/* ─────────────────────────────────────────
       DESIGN TOKENS
    ───────────────────────────────────────── */
    :root {
      --green:        #1B6B4A;
      --green-dark:   #145238;
      --green-light:  #E6F4EE;
      --green-mid:    #2D8A63;
      --orange:       #F5873A;
      --orange-dark:  #D96D22;
      --orange-light: #FEF0E7;
      --yellow:       #F5C842;
      --white:        #FFFFFF;
      --bg:           #F4F7F5;
      --surface:      #FFFFFF;
      --text:         #111827;
      --text-muted:   #6B7280;
      --border:       #E2E8E4;
      --radius-sm:    10px;
      --radius:       16px;
      --radius-lg:    24px;
      --shadow-sm:    0 2px 8px rgba(27,107,74,0.08);
      --shadow:       0 4px 20px rgba(27,107,74,0.12);
      --shadow-lg:    0 8px 40px rgba(27,107,74,0.16);
    }

    /* ─────────────────────────────────────────
       RESET & BASE
    ───────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      /* Sticky footer: stack nav / main / footer, let main grow so the
         footer is always pushed to the bottom even on short pages. */
      display: flex;
      flex-direction: column;
    }
    #main { flex: 1 0 auto; }   /* fill the leftover space */
    .footer { flex-shrink: 0; } /* never let the footer squash */
    img { max-width: 100%; display: block; }
    button { font-family: inherit; cursor: pointer; }
    input, select, textarea { font-family: inherit; }
    a { color: inherit; text-decoration: none; }

    /* ─────────────────────────────────────────
       LAYOUT HELPERS
    ───────────────────────────────────────── */
    .container {
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
      padding: 0 16px;
    }
    .container--wide {
      max-width: 960px;
      margin: 0 auto;
      padding: 0 20px;
    }

    /* ─────────────────────────────────────────
       NAVIGATION
    ───────────────────────────────────────── */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--white);
      border-bottom: 1px solid var(--border);
      padding: 0 20px;
    }
    .nav__inner {
      max-width: 960px;
      margin: 0 auto;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav__logo img {
      height: 32px;
      width: auto;
    }
    .nav__meta {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      background: var(--bg);
      padding: 5px 12px;
      border-radius: 20px;
    }
    .nav__step-label {
      font-size: 12px;
      font-weight: 700;
      color: var(--orange);
      background: var(--orange-light);
      padding: 5px 12px;
      border-radius: 20px;
      display: none;
    }
    .nav__step-label.visible { display: block; }

    /* ─────────────────────────────────────────
       SCREENS (single-page multi-step)
    ───────────────────────────────────────── */
    .screen { display: none; }
    .screen.active { display: block; }

    /* ─────────────────────────────────────────
       SCREEN 0 — LANDING
    ───────────────────────────────────────── */

    /* Hero */
    .hero {
      background: var(--green);
      padding: 36px 20px 0;
      overflow: hidden;
      position: relative;
    }
    .hero__inner {
      max-width: 960px;
      margin: 0 auto;
      display: flex;
      align-items: flex-end;
      gap: 24px;
    }
    .hero__content { flex: 1; padding-bottom: 36px; }
    .hero__badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,0.15);
      color: #FFD89C;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 20px;
      margin-bottom: 18px;
    }
    .hero__title {
      font-size: clamp(26px, 5vw, 42px);
      font-weight: 900;
      color: var(--white);
      line-height: 1.18;
      margin-bottom: 14px;
      letter-spacing: -0.3px;
    }
    .hero__title .highlight { color: var(--yellow); }
    .hero__subtitle {
      font-size: 14px;
      color: rgba(255,255,255,0.72);
      line-height: 1.65;
      margin-bottom: 28px;
      max-width: 380px;
    }
    .hero__cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--orange);
      color: var(--white);
      border: none;
      border-radius: 14px;
      padding: 17px 32px;
      font-size: 16px;
      font-weight: 800;
      box-shadow: 0 6px 24px rgba(245,135,58,0.45);
      transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
      letter-spacing: 0.01em;
    }
    .hero__cta:hover {
      background: var(--orange-dark);
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(245,135,58,0.5);
    }
    .hero__cta:active { transform: translateY(0); }
    .hero__mascot {
      flex-shrink: 0;
      width: 200px;
      display: flex;
      align-items: flex-end;
    }
    .hero__mascot img {
      width: 100%;
      max-width: 220px;
      object-fit: contain;
      filter: drop-shadow(0 8px 24px rgba(0,0,0,0.25));
    }
    /* Hide mascot on very small screens */
    @media (max-width: 400px) {
      .hero__mascot { display: none; }
    }

    /* Benefits */
    .benefits {
      padding: 32px 20px;
      max-width: 960px;
      margin: 0 auto;
    }
    .section-label {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--orange);
      margin-bottom: 6px;
    }
    .section-title {
      font-size: clamp(18px, 3vw, 24px);
      font-weight: 900;
      color: var(--text);
      margin-bottom: 4px;
    }
    .section-sub {
      font-size: 13.5px;
      color: var(--text-muted);
      margin-bottom: 20px;
    }
    .benefit-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    @media (min-width: 600px) {
      .benefit-cards { grid-template-columns: repeat(3, 1fr); }
    }
    .benefit-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 20px;
      display: flex;
      align-items: flex-start;
      gap: 16px;
      box-shadow: var(--shadow-sm);
      border: 1.5px solid var(--border);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .benefit-card:hover {
      border-color: var(--green-light);
      box-shadow: var(--shadow);
    }
    @media (min-width: 600px) {
      .benefit-card { flex-direction: column; gap: 12px; }
    }
    .benefit-card__icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
    }
    .benefit-card__icon--green  { background: var(--green-light); }
    .benefit-card__icon--orange { background: var(--orange-light); }
    .benefit-card__icon--yellow { background: #FFFBEB; }
    .benefit-card__title { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
    .benefit-card__desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }

    /* How it works */
    .how-it-works {
      background: var(--surface);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 32px 20px;
    }
    .how-it-works__inner { max-width: 960px; margin: 0 auto; }
    .steps-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 20px;
    }
    @media (min-width: 600px) {
      .steps-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
    }
    .step-item {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--bg);
      border-radius: 12px;
      padding: 14px 16px;
    }
    @media (min-width: 600px) {
      .step-item { flex-direction: column; text-align: center; gap: 8px; padding: 16px 10px; }
    }
    .step-item__num {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--green);
      color: var(--white);
      font-size: 13px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .step-item:last-child .step-item__num { background: var(--orange); }
    .step-item__label { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; }

    /* Landing CTA footer */
    .landing-cta {
      padding: 32px 20px 40px;
      text-align: center;
      max-width: 480px;
      margin: 0 auto;
    }
    .landing-cta p { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }

    /* ─────────────────────────────────────────
       SHARED FORM STYLES (screens 1–4)
    ───────────────────────────────────────── */
    .form-page {
      max-width: 480px;
      margin: 0 auto;
      padding: 20px 16px 48px;
    }

    /* Progress indicator */
    .progress {
      margin-bottom: 24px;
    }
    .progress__track {
      display: flex;
      gap: 5px;
      margin-bottom: 8px;
    }
    .progress__seg {
      flex: 1;
      height: 5px;
      border-radius: 5px;
      background: var(--border);
      transition: background 0.35s ease;
    }
    .progress__seg--done   { background: var(--green); }
    .progress__seg--active { background: var(--orange); }
    .progress__meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .progress__title { font-size: 12.5px; font-weight: 700; color: var(--text); }
    .progress__count { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }

    /* Cards */
    .card {
      background: var(--surface);
      border-radius: var(--radius-lg);
      padding: 24px 20px;
      box-shadow: var(--shadow-sm);
      border: 1.5px solid var(--border);
      margin-bottom: 14px;
    }
    .card__eyebrow {
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--orange);
      margin-bottom: 4px;
    }
    .card__title {
      font-size: 22px;
      font-weight: 900;
      color: var(--text);
      margin-bottom: 4px;
      letter-spacing: -0.2px;
    }
    .card__desc {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 22px;
    }

    /* Form fields */
    .field { margin-bottom: 16px; }
    .field:last-of-type { margin-bottom: 0; }
    .field__label {
      display: block;
      font-size: 12.5px;
      font-weight: 700;
      color: #374151;
      margin-bottom: 6px;
    }
    .field__label .required { color: var(--orange); margin-left: 2px; }
    .field__input {
      display: block;
      width: 100%;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 14px 14px;
      font-size: 15px;
      color: var(--text);
      background: var(--white);
      outline: none;
      transition: border-color 0.15s, box-shadow 0.15s;
      -webkit-appearance: none;
      appearance: none;
    }
    .field__input::placeholder { color: #C5CDD6; }
    .field__input:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 3px var(--green-light);
    }
    .field__input--select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 40px;
      cursor: pointer;
    }
    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    /* Section divider within a card */
    .card-divider {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 10.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      margin: 22px 0 16px;
    }
    .card-divider::before,
    .card-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    /* Buttons */
    .btn-group { display: flex; flex-direction: column; gap: 10px; }
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      border: none;
      border-radius: 14px;
      padding: 17px 24px;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0.01em;
      cursor: pointer;
      transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
    }
    .btn:active { transform: scale(0.98); }

    .btn--primary {
      background: var(--orange);
      color: var(--white);
      box-shadow: 0 4px 18px rgba(245,135,58,0.40);
    }
    .btn--primary:hover {
      background: var(--orange-dark);
      box-shadow: 0 6px 24px rgba(245,135,58,0.50);
    }

    .btn--submit {
      background: var(--green);
      color: var(--white);
      box-shadow: 0 4px 18px rgba(27,107,74,0.30);
    }
    .btn--submit:hover {
      background: var(--green-dark);
      box-shadow: 0 6px 24px rgba(27,107,74,0.40);
    }

    .btn--back {
      background: transparent;
      color: var(--green);
      border: 2px solid var(--green);
    }
    .btn--back:hover { background: var(--green-light); }

    /* ─────────────────────────────────────────
       SCREEN 2 — PACKAGE SELECTION
    ───────────────────────────────────────── */
    .pkg-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
    .pkg-card {
      background: var(--surface);
      border: 2px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, transform 0.1s;
      position: relative;
    }
    .pkg-card:hover { border-color: var(--green-mid); }
    .pkg-card:active { transform: scale(0.99); }
    .pkg-card.selected {
      border-color: var(--green);
      background: var(--green-light);
    }

    /* Langkah 2 gate: pulse all cards YELLOW when the user tries to continue without picking. */
    @keyframes pkgBlink {
      0%, 100% { border-color: var(--border);  box-shadow: 0 0 0 0 rgba(234,179,8,0); }
      50%      { border-color: #EAB308;         box-shadow: 0 0 0 4px rgba(234,179,8,0.45); }
    }
    .pkg-card--blink { animation: pkgBlink 1s ease-in-out 2; }

    /* Langkah 4 per-participant age sub-line (e.g. "Mengikut umur (18–61 tahun)").
       Now nested under the label inside .summary-row__main, so no side padding. */
    .summary-note {
      display: block;
      margin: 3px 0 0;
      color: var(--text-muted, #64748b);
      font-size: 11.5px;
      line-height: 1.4;
    }
    /* Left column of a summary row: label stacked above its age note. */
    .summary-row__main {
      display: flex;
      flex-direction: column;
    }

    /* Langkah 4 "price includes GST" note under the total */
    .summary-gst-note {
      text-align: right;
      font-size: 11px;
      color: var(--text-muted, #64748b);
      margin: 4px 2px 0;
    }

    .pkg-badge {
      position: absolute;
      top: -9px;
      right: 14px;
      font-size: 9.5px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--white);
    }
    .pkg-badge--orange { background: var(--orange); }
    .pkg-badge--green  { background: var(--green); }

    .pkg-radio {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: border-color 0.15s, background 0.15s;
    }
    .pkg-card.selected .pkg-radio {
      border-color: var(--green);
      background: var(--green);
    }
    .pkg-radio__dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--white);
      display: none;
    }
    .pkg-card.selected .pkg-radio__dot { display: block; }

    .pkg-info { flex: 1; }
    .pkg-name-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }
    .pkg-name {
      font-size: 16px;
      font-weight: 900;
      color: var(--text);
    }
    .pkg-card.selected .pkg-name { color: var(--green-dark); }
    .pkg-price {
      font-size: 18px;
      font-weight: 900;
      color: var(--green);
    }
    .pkg-price__sub {
      font-size: 11px;
      font-weight: 400;
      color: var(--text-muted);
    }
    .pkg-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .pkg-tag {
      font-size: 11px;
      font-weight: 600;
      background: #F1F5F9;
      color: #334155;
      border-radius: 6px;
      padding: 3px 9px;
    }
    .pkg-card.selected .pkg-tag {
      background: rgba(27,107,74,0.12);
      color: var(--green-dark);
    }

    .tip-box {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: var(--orange-light);
      border-radius: 12px;
      padding: 13px 15px;
      margin-bottom: 16px;
    }
    .tip-box__icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
    .tip-box__text { font-size: 12px; color: #92400E; line-height: 1.55; }

    /* ─────────────────────────────────────────
       SCREEN 3 — PERSONAL DETAILS
    ───────────────────────────────────────── */
    .addon-row {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--surface);
      border: 2px solid var(--border);
      border-radius: 14px;
      padding: 14px 16px;
      cursor: pointer;
      margin-bottom: 10px;
      transition: border-color 0.15s, background 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .addon-row.active {
      border-color: var(--green);
      background: var(--green-light);
    }
    .addon-row:active { transform: scale(0.99); }
    .addon-icon { font-size: 24px; flex-shrink: 0; }
    .addon-text { flex: 1; }
    .addon-title { font-size: 14.5px; font-weight: 700; color: var(--text); }
    .addon-price { font-size: 12px; color: var(--orange); font-weight: 700; margin-top: 2px; }
    .toggle {
      width: 46px;
      height: 26px;
      border-radius: 13px;
      background: #D1D5DB;
      position: relative;
      flex-shrink: 0;
      transition: background 0.2s;
    }
    .addon-row.active .toggle { background: var(--green); }
    .toggle__knob {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--white);
      box-shadow: 0 1px 4px rgba(0,0,0,0.25);
      transition: left 0.2s;
    }
    .addon-row.active .toggle__knob { left: 23px; }

    .addon-fields {
      display: none;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 14px;
      padding: 18px;
      margin-bottom: 10px;
    }
    .addon-fields.visible { display: block; }

    /* Spouse fields accent */
    .addon-fields--spouse {
      background: #FDF4FF;
      border-color: #E9D5FF;
    }
    .addon-fields--spouse .field__label { color: #7E22CE; }

    /* Child entries */
    .child-entry {
      background: #F0FDF4;
      border: 1.5px solid #A7F3D0;
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 10px;
    }
    .child-entry__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .child-entry__label {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: #065F46;
    }
    .child-entry__remove {
      background: none;
      border: none;
      color: #EF4444;
      font-size: 22px;
      cursor: pointer;
      line-height: 1;
      padding: 0;
    }
    .btn-add-more {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      border: 2px dashed #6EE7B7;
      background: #F0FDF4;
      color: #059669;
      border-radius: 12px;
      padding: 13px;
      font-size: 13.5px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
      font-family: inherit;
    }
    .btn-add-more:hover { background: #D1FAE5; border-color: #059669; }
    .btn-add-more:active { transform: scale(0.99); }

    /* ─────────────────────────────────────────
       SCREEN 4 — SUMMARY
    ───────────────────────────────────────── */
    .summary-hero {
      background: var(--green);
      border-radius: var(--radius-lg);
      padding: 22px 20px;
      margin-bottom: 12px;
    }
    .summary-hero__pkg  { font-size: 22px; font-weight: 900; color: var(--white); }
    .summary-hero__sub  { font-size: 12.5px; color: rgba(255,255,255,0.65); margin-top: 3px; }

    .summary-list {
      background: var(--surface);
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1.5px solid var(--border);
      margin-bottom: 12px;
    }
    .summary-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 18px;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
    }
    .summary-row:last-child { border-bottom: none; }
    .summary-row__label { color: var(--text-muted); font-weight: 500; }
    .summary-row__value { font-weight: 700; color: var(--text); }
    .summary-row__value--green { color: var(--green); }

    .summary-total {
      background: var(--orange);
      border-radius: var(--radius-lg);
      padding: 18px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
    }
    .summary-total__label  { font-size: 15px; font-weight: 700; color: var(--white); }
    .summary-total__amount { font-size: 28px; font-weight: 900; color: var(--white); letter-spacing: -0.5px; }

    .disclaimer {
      font-size: 11.5px;
      color: var(--text-muted);
      text-align: center;
      line-height: 1.65;
      margin-bottom: 18px;
      padding: 0 8px;
    }
    .disclaimer a { color: var(--green); text-decoration: underline; }

    /* ─────────────────────────────────────────
       SCREEN 5 — SUCCESS
    ───────────────────────────────────────── */
    .success-page {
      max-width: 480px;
      margin: 0 auto;
      padding: 40px 20px 60px;
      text-align: center;
    }
    .success-icon {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      background: var(--green-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 42px;
      margin: 0 auto 22px;
    }
    .success-title {
      font-size: 26px;
      font-weight: 900;
      color: var(--green);
      margin-bottom: 10px;
      letter-spacing: -0.3px;
    }
    .success-sub {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.65;
      margin-bottom: 28px;
    }
    .next-steps {
      background: var(--surface);
      border-radius: var(--radius-lg);
      padding: 22px 20px;
      text-align: left;
      margin-bottom: 28px;
      border: 1.5px solid var(--border);
    }
    .next-steps__title { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 16px; }
    .ns-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      margin-bottom: 16px;
    }
    .ns-item:last-child { margin-bottom: 0; }
    .ns-num {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--green);
      color: var(--white);
      font-size: 13px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .ns-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
    .ns-desc  { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

    .success-mascot {
      width: 120px;
      margin: 0 auto 20px;
    }
    .success-mascot img { width: 100%; }

    /* ─────────────────────────────────────────
       FOOTER
    ───────────────────────────────────────── */
    .footer {
      background: var(--green-dark);
      padding: 20px;
      text-align: center;
    }
    .footer__logo img { height: 24px; margin: 0 auto 10px; filter: brightness(0) invert(1); }
    .footer__text { font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.6; }
    .footer__links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
    .footer__link { font-size: 11px; color: rgba(255,255,255,0.6); transition: color 0.15s; }
    .footer__link:hover { color: var(--white); }

    /* ─────────────────────────────────────────
       RESPONSIVE DESKTOP TWEAKS
    ───────────────────────────────────────── */
    @media (min-width: 768px) {
      .form-page { padding: 28px 0 60px; }
      .card { padding: 32px 28px; }
      .success-page { padding: 56px 0 80px; }
    }