/* ==============================
   Imports
============================== */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap");

/* ==============================
   Fonts & Global Variables
============================== */
@font-face {
  font-family: "PP Woodland";
  src: url("../fonts/PPWoodland-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-body: "DM Sans", sans-serif;
  --font-heading: "PP Woodland", serif;
}

 :root {
        --brand-bg: #ffde92;
        --brand-text: #000000;
        --brand-hover: #f8d789;
        --accent-border: #eab308;
        --accent-bg: #ffffff;
        --text-xs: 0.75rem;
        --text-sm: 0.875rem;
        --text-base: 1rem;
        --text-lg: 1.125rem;
        --text-xl: 1.25rem;
        --text-2xl: 1.5rem;
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: var(--font-body);
        background-color: #f3f3f3;
        color: #18181b;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        min-height: 100vh;
        width: 100%;
        overflow-x: hidden;
        background: #f3f3f3;
      }

      ::selection {
        background: var(--brand-bg);
        color: var(--brand-text);
      }

      ::-webkit-scrollbar {
        width: 0.25rem;
        height: 0.25rem;
      }

      ::-webkit-scrollbar-track {
        background: transparent;
      }

      ::-webkit-scrollbar-thumb {
        background-color: #d4d4d8;
        border-radius: 0.25rem;
      }

      ::-webkit-scrollbar-thumb:hover {
        background-color: #a1a1aa;
      }

      iconify-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .hidden {
        display: none !important;
      }

      .container {
        max-width: 30rem;
        margin: 0 auto;
        padding: 2.5rem 1rem;
        width: 100%;
      }
.container2 {
    max-width: 23rem;
    margin: 0 auto;
    padding: 2.5rem 1rem;
    width: 100%;
    display: flex;
    height: 100vh;
    align-items: center;
    align-content: center;
}
      .form-wrapper {
        max-width: 28rem;
        margin: 0 auto;
        width: 100%;
        display: block;
      }

      #step1,
      #step2 {
        width: 100%;
      }

      .step-card {
        overflow: hidden;
        transition: all 0.3s;
        position: relative;
      }

      .step-header {padding: 1rem 1.25rem 0;}

      .header-content,
      .s2-header-content {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: center;
        gap: 1rem;
        text-align: left;
        padding-bottom: 0.5rem;
      }
.header-content2 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    text-align: left;
    padding-bottom: 0.5rem;
}
      .s2-header-content {
        gap: 0.75rem;
        justify-content: space-between;
      }
h3.s2-goals-title2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #000;
    letter-spacing: -0.025em;
    text-align: center;
    font-family: var(--font-heading);
}
      .product-image {
        width: 100px;
        height: 100%;
        flex-shrink: 0;
        object-fit: cover;
      }

      .header-text-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding-right: 0.25rem;
        text-align: left;
      }

      .title-text {
        font-size: var(--text-base);
        font-weight: 500;
        margin: 0;
        text-align: left;
        letter-spacing: -0.025em;
      }

      .sub-text {
        font-size: var(--text-sm);
        color: #6b7280;
        margin-top: 0.25rem;
        max-width: 13.75rem;
        text-align: left;
        line-height: 1.4;
      }

      .progress-wrap {
        display: flex;
        gap: 0.25rem;
        padding-top: 0.5rem;
      }

      .progress-bar {
        width: 1.5rem;
        height: 3px;
        border-radius: 2px;
        transition: background-color 0.3s;
      }

      .progress-active {
        background: #000000;
      }

      .progress-inactive {
        background: rgba(0,0,0,0.08);
      }

      .progress-clickable {
        cursor: pointer;
      }

      .progress-clickable:hover {
        background: rgba(0,0,0,0.2);
      }

      .card-body {
        padding: 1.5rem;
      }

      .section-title {
        font-size: var(--text-sm);
        font-weight: 500;
        margin-bottom: 0.75rem;
        color: #000000;
        display: block;
        width: 100%;
      }

      .mb-6 {
        margin-bottom: 1.5rem;
      }

      .mt-6 {
        margin-top: 1.5rem;
      }

      .mt-4 {
        margin-top: 1rem;
      }

      .mt-3 {
        margin-top: 0.75rem;
      }

      .mt-2 {
        margin-top: 0.5rem;
      }

      .mb-2 {
        margin-bottom: 0.5rem;
      }

      .input-group {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 0.5rem;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
      }

      .input-row {
        display: flex;
      }

      .input-field {
        position: relative;
        z-index: 0;
        height: 2.5rem;
        width: 100%;
        background: #ffffff;
        padding: 0 0.75rem;
        font-size: var(--text-sm);
        color: #000000;
        border: none;
        outline: none;
        transition: all 0.2s;
        font-family: 'Inter', sans-serif;
        font-weight: 400;
      }

      .input-field::placeholder {
        color: #6b7280;
      }

      .input-field:focus {
        z-index: 10;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
        background: #ffffff;
      }

      .border-b {
        border-bottom: 1px solid rgba(0,0,0,0.1);
      }

      .border-r {
        border-right: 1px solid rgba(0,0,0,0.1);
      }

      .btn-wrapper {
        margin-top: 1.25rem;
        display: grid;
        grid-template-columns: 1fr;
      }

      .dynamic-btn {
        background-color: var(--brand-bg);
        color: var(--brand-text);
        cursor: pointer;
        display: inline-flex;
        border: none;
        width: 100%;
        border-radius: 10px;
        position: relative;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        font-family: 'Inter', sans-serif;
        text-decoration: none;
      }

      .dynamic-btn:hover {
        background-color: var(--brand-hover);
      }

      .dynamic-btn:active {
        transform: scale(0.98);
      }

      .dynamic-btn.h-11 {
        height: 2.35rem;
        font-size: var(--text-sm);
        font-weight: 500;
      }

      .dynamic-btn.h-12 {
        height: 2.4rem;
        font-size: var(--text-sm);
        font-weight: 500;
      }

      .footer-text {
        margin-top: 1rem;
        font-size: var(--text-xs);
        text-align: center;
        color: #6b7280;
        line-height: 1.625;
        padding: 0 0.5rem;
        max-width: 300px;
        margin: 1rem auto;
      }

      .footer-text a {
        color: #6b7280;
        text-decoration: underline;
        text-decoration-color: #d1d5db;
        text-underline-offset: 2px;
        transition: all 0.2s;
      }

      .footer-text a:hover {
        color: #374151;
      }

      .back-btn {
        cursor: pointer;
        color: #6b7280;
        background: #e5e5e5;
        border: none;
        padding: 0.375rem;
        margin-left: -0.5rem;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.2s;
      }

      .back-btn:hover {
        color: #000000;
        background: rgba(0,0,0,0.05);
      }

      .back-btn iconify-icon {
        font-size: var(--text-xl);
      }

      .product-group {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 0.5rem;
      }

      .product-label {
        position: relative;
        display: block;
        margin-bottom: 0.5rem;
        cursor: pointer;
        margin-top: 0.25rem;
      }

      .product-radio {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
      }

      .product-item {
        border: 2px solid #ffffff;
        background: #ffffff;
        padding: 0.625rem;
        padding-left: 2.375rem;
        border-radius: 0.75rem;
        box-shadow:
          0 1px 1.75px 0 rgba(0,0,0,.12),
          0 -.5px 1.5px 0 rgba(0,0,0,.09),
          0 3px 4px 0 rgba(0,0,0,.03);
        transition: all 0.3s;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .product-item:hover {
        background: rgba(0,0,0,0.02);
      }

      .dynamic-badge {
        position: absolute;
        top: -0.575rem;
        right: 0.625rem;
        font-size: var(--text-xs);
        padding: 0.125rem 0.5rem;
        border-radius: 0.25rem;
        font-weight: 500;
        border: 1px dashed #868585;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
        letter-spacing: -0.025em;
        z-index: 10;
        transform: scale(0.9);
        transform-origin: top right;
        background-color: white;
        color: var(--brand-text);
      }

      .prod-info {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
      }

      .prod-title {
        font-size: var(--text-sm);
        color: #000000;
        font-weight: 500;
      }

      .prod-desc {
        font-size: var(--text-xs);
        color: #6b7280;
      }

      .prod-price-col {
        display: flex;
        flex-direction: column;
        text-align: right;
        padding-right: 0.25rem;
      }

      .prod-price {
        font-size: var(--text-base);
        font-weight: 500;
        color: #000000;
      }

      .prod-old-price {
        font-size: var(--text-sm);
        color: #6b7280;
        text-decoration: line-through;
        text-decoration-color: #ef4444;
      }

      .product-radio:checked + .product-item {
        background-color: var(--accent-bg);
        border-color: rgba(255,255,255,0.3);
      }

      .product-checkbox {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1.25rem;
        height: 1.25rem;
        background: #ffffff;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
      }

      .product-radio:checked ~ .product-checkbox {
        background-color: var(--brand-bg);
        border: none;
      }

      .product-checkbox iconify-icon {
        color: #000;
        font-size: var(--text-lg);
        opacity: 0;
        transition: opacity 0.3s;
      }

      .product-radio:checked ~ .product-checkbox iconify-icon {
        opacity: 1;
      }

      .features-box {
        border-radius: 0.75rem;
        padding: 0.1rem 0;
        margin-bottom: 1.5rem;
        animation: fadeIn 0.3s ease-in-out;
        box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.02);
      }

      .features-title {
        font-size: var(--text-sm);
        font-weight: 700;
        color: #000000;
        margin-bottom: 0.75rem;
      }

      .features-list {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
      }

      .feature-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: var(--text-sm);
        color: #4b5563;
      }

      .feature-icon {
        color: var(--accent-border);
        font-size: var(--text-base);
        flex-shrink: 0;
      }

      .payment-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.75rem;
        flex-direction: column;
        gap: 0.6rem;
        align-content: center;
        align-items: center;
      }

      .payment-tabs {
        background: #e4e4e466;
        border-radius: 0.5rem;
        display: flex;
        gap: 0.25rem;
        width: 100%;
        justify-content: center;
        border: 1px solid rgba(0,0,0,0.1);
      }

      .payment-label {
        position: relative;
        cursor: pointer;
        flex: 1;
      }

      .payment-radio {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
      }

      .payment-tab {
        height: 2rem;
        padding: 0 0.5rem;
        border-radius: 0.375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        color: #747474;
        transition: all 0.3s;
        border: 1px solid transparent;
        font-size: var(--text-xs);
        font-weight: 500;
      }

      .payment-radio:checked + .payment-tab {
        border-right: 1px solid #80808029;
        background: #ffffff;
        color: #000000;
        border-left: 1px solid #80808029;
      }

      .payment-tab iconify-icon {
        font-size: var(--text-sm);
      }

      .card-inputs-wrap {
        background: #fcfcfc;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 0.75rem;
        padding: 0.75rem;
        transition: all 0.3s;
      }

      .card-input-row {
        display: flex;
        align-items: center;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 0.5rem;
        background: #ffffff;
        overflow: hidden;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
        height: 2.5rem;
        padding: 0 0.5rem;
        gap: 0.5rem;
        transition: all 0.3s;
      }

      .card-input-row:focus-within {
        border-color: rgba(0,0,0,0.3);
        box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
      }

      .card-icon {
        color: #9ca3af;
        font-size: var(--text-xl);
        flex-shrink: 0;
        margin-left: 0.25rem;
      }

      .card-field {
        flex: 1;
        min-width: 0;
        background: transparent;
        border: none;
        outline: none;
        padding: 0 0.25rem;
        font-size: var(--text-sm);
        color: #000000;
        font-family: 'Inter', sans-serif;
        font-weight: 400;
      }

      .card-field::placeholder {
        color: #6b7280;
      }

      .card-field.short {
        width: 3.4375rem;
        text-align: center;
        flex: none;
      }

      .card-field.cvv {
        width: 2.8125rem;
        text-align: center;
        flex: none;
      }

      .divider {
        width: 1px;
        height: 1.25rem;
        background: #e5e7eb;
        flex-shrink: 0;
      }

      .powered-by {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 0.5rem;
        padding-right: 0.25rem;
        gap: 0.25rem;
      }

      .powered-text {
        font-size: var(--text-xs);
        color: #9ca3af;
        font-weight: 400;
      }

      .powered-brand {
        font-size: var(--text-xs);
        color: #000000;
        font-weight: 600;
        letter-spacing: -0.025em;
      }

      .summary-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        padding: 0 0.25rem;
        cursor: pointer;
      }

      .summary-header h3 {
        font-size: var(--text-sm);
        font-weight: 500;
        color: #000000;
        margin: 0;
      }

      .summary-header-right {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.5rem;
        margin-right: -0.5rem;
        border-radius: 0.5rem;
        transition: background 0.2s;
        color: #000000;
        font-weight: 500;
      }

      .summary-header:hover .summary-header-right {
        background: rgba(0,0,0,0.05);
      }

      .summary-total-preview {
        font-size: var(--text-sm);
      }

      .summary-arrow {
        font-size: var(--text-base);
        transition: transform 0.3s;
      }

      .rotate-180 {
        transform: rotate(180deg);
      }

      .summary-details {
        background: #fcfcfc;
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 0.75rem;
        padding: 1rem;
        font-size: var(--text-sm);
        color: #6b7280;
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
        transition: all 0.3s;
      }

      .summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .summary-row.subtotal {
        padding-bottom: 0.5rem;
        border-bottom: 1px dashed rgba(0,0,0,0.1);
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
      }

      .summary-row.total {
        margin-top: 0.25rem;
        padding-top: 0.75rem;
        border-top: 1px dashed rgba(0,0,0,0.1);
        color: #000000;
      }

      .summary-product-name {
        color: #000000;
        font-weight: 500;
        font-size: var(--text-sm);
      }

      .text-black {
        color: #000000;
      }

      .font-normal {
        font-weight: 400;
      }

      .font-medium {
        font-weight: 500;
      }

      .font-semibold {
        font-weight: 600;
      }

      .tracking-tight {
        letter-spacing: -0.025em;
      }

      .trust-seals {
        width: 70%;
        margin: 1.5rem auto 0;
        display: block;
        mix-blend-mode: multiply;
        opacity: 0.8;
      }

      .features-topline {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.85rem;
      }

      .features-title {
        margin-bottom: 0.2rem;
      }

      .features-subtitle {
        font-size: 0.74rem;
        line-height: 1.35;
        color: #6b7280;
      }

      .features-pill {
        flex-shrink: 0;
        padding: 0.22rem 0.5rem;
        border-radius: 999px;
        background: var(--brand-bg);
        color: #000;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: -0.015em;
        border: 1px solid rgba(0,0,0,0.06);
      }

      .plan-benefits-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
      }

      .plan-benefit-item {
        min-height: 2.4rem;
        display: flex;
        align-items: flex-start;
        gap: 0.4rem;
        padding: 0.55rem;
        border-radius: 0.65rem;
        background: #ffffff;
        border: 1px solid rgba(0,0,0,0.055);
        box-shadow: 0 1px 2px rgba(0,0,0,0.025);
      }

      .plan-benefit-item iconify-icon {
        color: var(--accent-border);
        font-size: 0.92rem;
        flex-shrink: 0;
        margin-top: 0.02rem;
      }

      .plan-benefit-item span {
        font-size: 0.72rem;
        line-height: 1.25;
        color: #3f3f46;
        font-weight: 500;
        letter-spacing: -0.01em;
      }

      @media (max-width: 360px) {
        .plan-benefits-grid {
          grid-template-columns: 1fr;
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(-4px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .fade-in {
        animation: fadeIn 0.2s ease-in;
      }

      @media (max-width: 480px) {
        :root {
          --text-xs: 0.68rem;
          --text-sm: 0.8rem;
          --text-base: 0.92rem;
          --text-lg: 1rem;
          --text-xl: 1.1rem;
          --text-2xl: 1.3rem;
        }

        body {
          zoom: 100%;
        }

        .container {
          padding: 0;
          max-width: 100%;
          width: 100%;
        }

        .form-wrapper {
          max-width: 100%;
          width: 100%;
        }

        .step-card {
          width: 100%;
          border-radius: 0;
          border-left: 0;
          border-right: 0;
        }

        .step-header {
        }

        .card-body {
          padding: 1.5rem;
        }

        .header-content,
        .s2-header-content {
          gap: 0.75rem;
        }

        .product-image {
          width: 100px;
          height: 100%;
        }

        .product-item {
          padding: 0.55rem;
          padding-left: 2.15rem;
          border-radius: 0.65rem;
        }

        .input-field,
        .card-input-row {
          height: 2.35rem;
        }

        .dynamic-btn.h-11 {
          height: 2.4rem;
        }

        .dynamic-btn.h-12 {
          height: 2.75rem;
        }

        .features-box {
        }

        .card-inputs-wrap {
          padding: 0.65rem;
        }

        .card-input-row {
          gap: 0.35rem;
          padding: 0 0.4rem;
        }

        .card-field.short {
          width: 3rem;
        }

        .card-field.cvv {
          width: 2.5rem;
        }

        .payment-tab {
          height: 2.15rem;
          padding: 0 0.35rem;
          gap: 0.25rem;
          font-size: var(--text-xs);
        }

        .footer-text {
          font-size: var(--text-xs);
          line-height: 1.5;
        }
      }

      .plan-features-box,
      .features-box {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0.875rem 0 1.5rem !important;
      }

      .plan-features-header,
      .features-title {
        font-size: var(--text-sm) !important;
        font-weight: 600 !important;
        color: #000000 !important;
        margin: 0 0 0.75rem !important;
        letter-spacing: -0.02em !important;
      }

      .plan-features-desc,
      .plan-name-dynamic,
      .plan-desc-dynamic,
      .features-description {
        display: none !important;
      }

      .plan-features-grid,
      .features-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 0.875rem !important;
        row-gap: 0.5rem !important;
      }

      .plan-feature-item,
      .feature-item {
        display: flex !important;
        align-items: center !important;
        gap: 0.375rem !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        color: #18181b !important;
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
        font-weight: 500 !important;
      }

      .plan-feature-item iconify-icon,
      .feature-item iconify-icon,
      .feature-icon {
        color: #eab308 !important;
        font-size: 0.9rem !important;
        width: 0.9rem !important;
        min-width: 0.9rem !important;
        height: 0.9rem !important;
        margin: 0 !important;
      }

      .plan-feature-item strong,
      .plan-feature-item span,
      .feature-item strong,
      .feature-item span {
        display: inline !important;
        margin: 0 !important;
        font-size: inherit !important;
        line-height: inherit !important;
        color: inherit !important;
        font-weight: 500 !important;
      }

      @media (max-width: 360px) {
        .plan-features-grid,
        .features-list {
          grid-template-columns: 1fr !important;
        }
      }

      .plan-feature-item,
      .feature-item {
        font-size: 0.68rem !important;
        color: #71717a !important;
      }

      .plan-feature-item iconify-icon,
      .feature-item iconify-icon,
      .feature-icon {
        color: #a1a1aa !important;
        font-size: 0.76rem !important;
        width: 0.76rem !important;
        min-width: 0.76rem !important;
        height: 0.76rem !important;
      }

      .plan-feature-item span,
      .feature-item span {
        color: #71717a !important;
        font-size: 0.68rem !important;
        font-weight: 500 !important;
      }

      .plan-features-note {
        margin-top: 0.7rem;
        color: #a1a1aa;
        font-size: 0.62rem;
        line-height: 1.35;
        letter-spacing: -0.01em;
      }
    .promo-bar-trial {
    background: #f9f9f9;
    color: #616161;
    text-align: center;
    font-size: 0.875rem;
    padding: 0.5rem;
    border-bottom: 1px solid #e6e6e6;
    border-top: 1px solid #e7e7e7;
}

  
      .w-full { width: 100%; }
      .s2-goals-title {font-size: 1.25rem;font-weight: 600;margin-bottom: 1.5rem;color: #000;letter-spacing: -0.025em;text-align: left;font-family: var(--font-heading);}
      .s2-goals-row { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
      .s2-goals-col { flex: 1 1 0%; text-align: left; }
      .s2-label {font-size: 11px;font-weight: 600;color: #828282;text-transform: uppercase;letter-spacing: 0.05em;margin-bottom: 0.5rem;display: block;}
      .s2-label-mb1 { margin-bottom: 0.25rem; }
      .s2-relative { position: relative; }
      .s2-select {width: 100%;height: 2.2rem;padding: 0 0.75rem;background-color: #fff;border: 1px solid #e5e7eb;border-radius: 0.5rem;font-size: 0.875rem;outline: none;appearance: none;color: #1f2937;font-weight: 500;font-family: inherit;cursor: pointer;}
      .s2-select:focus { border-color: #9ca3af; }
      .s2-select-icon { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: #9ca3af; pointer-events: none; display: flex; align-items: center; justify-content: center; }
      .s2-select-icon svg { width: 1.125rem; height: 1.125rem; }
      .s2-mb-6 { margin-bottom: 1.5rem; text-align: left; }
      .s2-subtitle {font-size: 11px;color: #777777;margin-bottom: 0.75rem;line-height: 1.375;}
      .s2-checkbox-grid {display: grid;grid-template-columns: repeat(1, minmax(0, 1fr));gap: 0.75rem;}
      .s2-checkbox-label {display: flex;align-items: center;padding: 0.7rem;border: 1px solid #e5e7eb;border-radius: 0.75rem;cursor: pointer;background-color: #fff;transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);}
      .s2-checkbox-label:hover { background-color: #f9fafb; }
      .s2-checkbox { width: 1rem; height: 1rem; border-radius: 0.25rem; border: 1px solid #d1d5db; accent-color: #000; outline: none; cursor: pointer; margin: 0; }
      .s2-checkbox-text {margin-left: 0.625rem;font-size: 12px;font-weight: 500;color: #1f2937;line-height: 1.25;}
      .s2-range-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0.5rem; }
      .s2-range-value { font-size: 0.75rem; font-weight: 700; color: #1f2937; letter-spacing: -0.025em; }
      .s2-range-wrapper { position: relative; width: 100%; display: flex; align-items: center; height: 1rem; margin-top: 0.5rem; }
      .s2-range { width: 100%; height: 0.25rem; background-color: #e5e7eb; border-radius: 0.5rem; appearance: none; cursor: pointer; outline: none; accent-color: #000; z-index: 10; position: relative; }
      .s2-range::-webkit-slider-thumb { appearance: none; width: 1rem; height: 1rem; border-radius: 50%; background: #000; cursor: pointer; border: none; }
      .s2-range::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: 50%; background: #000; cursor: pointer; border: none; }
      .s2-textarea {width: 100%;height: 6rem;padding: 0.75rem;background-color: #fff;border: 1px solid #e5e7eb;border-radius: 0.75rem;font-size: 0.875rem;outline: none;resize: none;font-family: inherit;color: #1f2937;transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);margin-top: 0.5rem;}
      .s2-textarea::placeholder { color: #aaaaaa; }
      .s2-textarea:focus { border-color: #afafaf; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); }
      .back-btn svg { width: 1.25rem; height: 1.25rem; }
      @media (max-width: 480px) { .s2-checkbox-grid { grid-template-columns: 1fr; } }