/* Poppins, kept here rather than fetched from Google: one less name to look up, one less
   connection to open, and nothing about who visits the page leaves this server.
   Poppins is published under the SIL Open Font License. */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/poppins-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/poppins-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/poppins-700.woff2') format('woff2');
}

/*
 * The Cabin Crew join page.
 *
 * This is the look the page has always had, kept as it was so members see the same thing they
 * signed up on. Only the markup behind it was rebuilt.
 */


    /* --------------------------------------------------
       THEME VARIABLES
    -------------------------------------------------- */
    :root {
      --bg: #0b1220;
      --bg-2: #0e1426;
      --surface: rgba(255, 255, 255, 0.06);
      --text: #e5e7eb;
      --muted: #9aa3b2;
      --primary: #7c5cff;
      --primary-2: #4f46e5;
      --accent: #22d3ee;
      --success: #10b981;
      --danger: #ef4444;
      --ring: rgba(124, 92, 255, 0.45);
      --card-blur: 18px;
      --radius: 18px;
      --radius-lg: 26px;
      --shadow: 0 20px 50px rgba(0,0,0,0.35);
      --grad: conic-gradient(from 180deg at 50% 50%, #7c5cff, #22d3ee, #7c5cff);
      --card-grad: linear-gradient(180deg, rgba(124,92,255,.12), rgba(2,6,23,.0));
      --input-bg: rgba(255, 255, 255, 0.06);
    }

    /* Light mode */
    html[data-theme="light"] {
      --bg: #f6f7fb;
      --bg-2: #eef1f7;
      --surface: rgba(255,255,255,0.9);
      --text: #0f172a;
      --muted: #475569;
      --primary: #6d5efc;
      --primary-2: #4f46e5;
      --accent: #06b6d4;
      --ring: rgba(109, 94, 252, 0.35);
      --card-blur: 12px;
      --card-grad: linear-gradient(180deg, rgba(109,94,252,.08), rgba(255,255,255,.9));
      --input-bg: rgba(255,255,255,0.7);
    }

    /* Respect system pref by default */
    @media (prefers-color-scheme: light) {
      html[data-theme="auto"] { color-scheme: light; }
    }
    @media (prefers-color-scheme: dark) {
      html[data-theme="auto"] { color-scheme: dark; }
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--text);
      background: var(--bg);
      overflow-x: hidden;
    }

    .page {
      position: relative;
      z-index: 1;
      flex: 1;
      display: grid;
      place-items: center;
      padding: 32px;
    }

    .shell {
      width: min(1200px, 96vw);
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 28px;
    }

    /*
     * Letting the page fit a phone.
     *
     * A grid or flex child will not shrink below the width of its own content unless it is told it
     * may. Every box down the chain kept its widest line, so on a phone the cards ran off the right
     * edge: the headline was cut in half and the card fields disappeared past the screen. Saying
     * min-width: 0 the whole way down is what lets the text wrap instead.
     */
    .shell > *,
    .card,
    .form-card,
    form,
    .pricing,
    .row,
    .field,
    .input,
    .card-input-row,
    .promo-row,
    .cta-group { min-width: 0; }

    @media (max-width: 1024px) {
      .page {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: stretch;
        padding-inline: clamp(16px, 6vw, 24px);
        padding-block: clamp(24px, 6vw, 56px);
      }

      .shell {
        width: min(1100px, 100%);
        grid-template-columns: 1fr;
        gap: clamp(16px, 4vw, 28px);
      }
    }

    @media (max-width: 640px) {
      .page {
        padding-inline: clamp(16px, 6vw, 24px);
        padding-block: clamp(18px, 9vw, 48px);
      }
    }

    /* Header Bar */
    .topbar {
      width: min(1200px, 96vw);
      margin: 24px auto 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      letter-spacing: .2px;
      font-size: 18px;
      color: inherit;
      text-decoration: none;
    }

    /* The topbar is space-between with two children. The back link and the theme
       toggle are grouped so it stays two children and the link does not land in
       the middle of the bar. */
    .topbar-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .back-to-site {
      color: var(--muted);
      text-decoration: none;
      font-size: 14px;
      white-space: nowrap;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      transition: color .2s ease, border-color .2s ease;
    }

    .back-to-site:hover,
    .back-to-site:focus-visible {
      color: var(--text);
      border-color: var(--ring);
    }

    @media (max-width: 560px) {
      .back-to-site { display: none; }
    }

    .brand .logo {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: var(--grad);
      box-shadow: 0 8px 24px rgba(124,92,255,.45);
      position: relative;
      overflow: hidden;
    }

    .brand .logo::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: 10px;
      background: var(--card-grad);
      backdrop-filter: blur(8px);
    }

    .brand .logo-image {
      display: block;
      max-height: var(--logo-height, 48px);
      height: auto;
      width: auto;
      object-fit: contain;
    }

    .mode-toggle {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      cursor: pointer;
      border: 1px solid rgba(124,92,255,.25);
      background: linear-gradient(180deg, rgba(124,92,255,.09), transparent);
      backdrop-filter: blur(12px);
      box-shadow: 0 6px 20px rgba(0,0,0,.15);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      color: var(--text);
    }

    .mode-toggle:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 26px rgba(0,0,0,.25);
      border-color: rgba(124,92,255,.5);
    }

    .mode-toggle i {
      color: inherit;
      transition: color .18s ease, opacity .18s ease;
    }
    html[data-theme="light"] .mode-toggle { color: #0f172a; }
    html[data-theme="dark"] .mode-toggle {
      color: #f8fafc;
      border-color: rgba(148,163,184,.35);
      background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(30,41,59,.82));
      box-shadow: 0 12px 26px rgba(2,6,23,.55);
    }
    html[data-theme="dark"] .mode-toggle:hover {
      border-color: rgba(148,163,184,.6);
      box-shadow: 0 14px 32px rgba(2,6,23,.62);
    }

    @media (max-width: 900px) {
      .topbar {
        padding-inline: clamp(16px, 6vw, 36px);
      }
    }

    @media (max-width: 768px) {
      /*
       * A phone screen is mostly height, and the header used to eat a third of the first one:
       * a large logo in the middle with the theme switch stretched underneath it. Side by side,
       * the way a header normally sits, gets the signup form up to where a thumb can reach it.
       */
      .topbar {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-inline: clamp(16px, 5vw, 24px);
        width: 100%;
        text-align: left;
      }

      .brand {
        width: auto;
        justify-content: flex-start;
        text-align: left;
        margin-inline: 0;
      }

      .brand .logo-image {
        max-height: min(var(--logo-height, 48px), 72px);
      }

      .mode-toggle {
        width: auto;
        flex: none;
      }
    }

    @media (max-width: 560px) {
      .brand {
        font-size: clamp(16px, 4vw, 18px);
        gap: 10px;
      }

      .mode-toggle {
        padding: 10px 12px;
        font-size: 14px;
      }
    }

    @media (max-width: 420px) {
      .brand {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
      }

      .brand .logo-image,
      .brand .logo {
        margin-inline: auto;
      }

      .mode-toggle {
        font-size: 13px;
      }
    }

    /* Glass Cards */
    .card {
      position: relative; border-radius: var(--radius-lg);
      background: var(--card-grad);
      backdrop-filter: blur(var(--card-blur));
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: var(--shadow);
      overflow: clip;
      isolation: isolate;
    }
    .card::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(124,92,255,.35), rgba(34,211,238,.25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
    }

    /* Left: Benefits & Selling Points */
    .left {
      padding: 28px;
      display: grid;
      gap: 22px;
      align-content: start;
    }

    .hero {
      display: grid;
      gap: 10px;
      padding: 6px 0 10px;
    }

    .hero h1 {
      font-size: clamp(26px, 4.5vw, 38px);
      line-height: 1.1;
      margin: 0;
    }

    .hero p {
      color: var(--muted);
      margin: 0;
    }

    .price-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 16px;
      background: rgba(124,92,255,.12);
      border: 1px dashed rgba(124,92,255,.45);
      font-weight: 600;
      width: fit-content;
      animation: glow 2.2s ease-in-out infinite;
    }
    @keyframes glow { 0%,100%{ box-shadow: 0 0 0 rgba(124,92,255,.0);} 50%{ box-shadow: 0 0 30px rgba(124,92,255,.35);} }

    .switcher {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      margin-top: 6px;
    }

    .switcher--stack {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }

    .switch {
      --h: 26px; width: 54px; height: var(--h); background: rgba(124,92,255,.25); border-radius: 999px; position: relative; cursor: pointer; transition: background .2s ease;
    }
    .switch::after {
      content: ""; position: absolute; top: 3px; left: 3px; width: calc(var(--h) - 6px); height: calc(var(--h) - 6px); background: white; border-radius: 50%; transition: transform .2s ease;
      box-shadow: 0 4px 14px rgba(0,0,0,.25);
    }
    .switch[data-on="true"] { background: rgba(16,185,129,.4); }
    .switch[data-on="true"]::after { transform: translateX(28px); }

    .benefits {
      display: grid;
      gap: 14px;
      margin-top: 10px;
    }

    .benefit {
      display: grid;
      grid-template-columns: 36px 1fr;
      gap: 12px;
      align-items: start;
    }

    .benefit .icn {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: rgba(124,92,255,.15);
      outline: 1px solid rgba(124,92,255,.3);
      color: var(--primary);
      box-shadow: inset 0 0 20px rgba(124,92,255,.15);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .benefit:hover .icn { transform: translateY(-2px) scale(1.03); box-shadow: inset 0 0 24px rgba(124,92,255,.25), 0 8px 22px rgba(124,92,255,.25); }
    .benefit h4 { margin: 2px 0 4px; font-size: 15px; }
    .benefit p { margin: 0; color: var(--muted); font-size: 13px; }

    /* Right: Registration Form */
    .right { padding: 22px; display: grid; gap: 18px; }
    .form-card { padding: 20px; display: grid; gap: 16px; }

    .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    @media (max-width: 768px) { .row { grid-template-columns: 1fr; } }

    .field {
      display: grid; gap: 8px; position: relative;
    }
    .label { font-weight: 600; font-size: 13px; color: var(--muted); }

    .input {
      display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 8px;
      border: 1px solid rgba(255,255,255,.14);
      background: var(--input-bg);
      border-radius: 14px; padding: 8px 10px; position: relative; transition: border .2s ease, transform .08s ease;
    }
    .input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
    .input i { color: var(--muted); display: grid; place-items: center; }
    .input input {
      border: 0; outline: 0; background: transparent; color: var(--text); font-size: 15px; padding: 10px 6px 10px 0;
    }
    .input input::placeholder { color: #9aa3b2AA; }
    .input:hover { transform: translateY(-1px); }

    /* Stripe card elements */
    .card-input-stack { display: grid; gap: 12px; }
    .card-input-row { display: grid; gap: 12px; }
    .card-input-row.meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (max-width: 860px) { .card-input-row.meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 560px) { .card-input-row.meta { grid-template-columns: 1fr; } }
    .card-input-row.meta .zip-wrapper { min-width: 0; }
    .input:focus-within, .input.is-focused { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
    .input.has-error { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(239,68,68,.25); }
    .input.stripe-host .StripeElement {
      width: 100%;
      min-height: 24px;
      padding: 10px 0;
      background: transparent !important;
    }
    .input.stripe-host .StripeElement--invalid { color: var(--danger); }
    .zip-wrapper input {
      width: 100%;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--text);
      font-size: 15px;
      padding: 10px 6px 10px 0;
      text-transform: uppercase;
    }
    .zip-wrapper input::placeholder { color: var(--muted); opacity: .8; }
    html[data-theme="light"] .zip-wrapper input::placeholder { color: rgba(71,85,105,.75); }
    #card-errors { min-height: 18px; color: var(--danger); font-size: 13px; margin-top: 6px; }

    /* Pricing notice */
    .pricing {
      display: grid;
      gap: 4px;
      padding: 12px 14px;
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(16,185,129,.12), transparent);
      border: 1px solid rgba(16,185,129,.35);
      margin-bottom: 12px;
    }
    .pricing .amount { font-weight: 800; font-size: clamp(22px, 3.5vw, 28px); color: var(--success); }
    .pricing small { color: var(--muted); }

    /* CTA Button */
    .cta-group {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .cta {
      --h: 56px; position: relative; display: block; place-items: center; min-width: 280px; height: var(--h);
      padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer; user-select: none; isolation: isolate;
      background: radial-gradient(120% 180% at 30% 30%, rgba(124,92,255,.35), rgba(34,211,238,.35)) padding-box;
    }
    .cta::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: linear-gradient(120deg, #7c5cff, #22d3ee, #7c5cff);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 8px 24px rgba(124,92,255,.45));
    }
    .cta > span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: white; }
    .cta .sub { display: block; font-weight: 500; font-size: 12px; opacity: .9; }
    .cta:hover { transform: translateY(-1px); box-shadow: 0 18px 40px rgba(124,92,255,.25); }
    .cta:active { transform: translateY(0); }

    .cta-support {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 18px;
      border-radius: 14px;
      font-weight: 600;
      text-decoration: none;
      color: var(--primary);
      background: rgba(124,92,255,.14);
      border: 1px solid rgba(124,92,255,.35);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .cta-support:hover {
      transform: translateY(-1px);
      border-color: rgba(124,92,255,.5);
      box-shadow: 0 12px 26px rgba(124,92,255,.18);
    }

    html[data-theme="dark"] .cta-support {
      color: #c7d2fe;
      background: rgba(124,92,255,.18);
    }

    /* Ripple */
    .ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple .7s linear; background: rgba(255,255,255,.45); }
    @keyframes ripple { to { transform: scale(12); opacity: 0; } }

    /* Secure note */
    .secure { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }

    /* Success message */
    .success {
      /* This block is only put on the page once somebody has actually joined, so it is shown as
         soon as it arrives. It used to be hidden here, left over from the old page where it sat in
         the markup waiting, and the result was an empty card after a successful signup. */
      display: block;
      position: relative;
      margin-top: 24px;
      padding: clamp(24px, 4vw, 32px);
      border-radius: calc(var(--radius-lg) - 4px);
      background: linear-gradient(145deg, rgba(16,185,129,.18), rgba(34,211,238,.12)) padding-box;
      border: 1px solid rgba(16,185,129,.35);
      box-shadow: 0 18px 42px rgba(13,148,136,.22);
      overflow: hidden;
      text-align: left;
      color: var(--text);
      animation: success-pop .55s cubic-bezier(.22, 1.12, .52, 1) both;
    }

    html[data-theme="light"] .success {
      background: linear-gradient(145deg, rgba(16,185,129,.12), rgba(6,182,212,.08)) padding-box;
      border-color: rgba(5,150,105,.25);
      box-shadow: 0 18px 32px rgba(45,212,191,.24);
    }

    .success::before {
      content: "";
      position: absolute;
      pointer-events: none;
      opacity: .55;
      inset: -30% auto auto -35%;
      width: 260px;
      height: 260px;
      background: radial-gradient(circle at center, rgba(16,185,129,.55), transparent 65%);
      filter: blur(2px);
    }

    .success__header {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: clamp(16px, 4vw, 24px);
      margin-bottom: clamp(16px, 3vw, 20px);
    }

    .success__icon {
      position: relative;
      width: clamp(56px, 9vw, 64px);
      aspect-ratio: 1 / 1;
      border-radius: 22px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(16,185,129,.78), rgba(34,211,238,.72));
      color: #f8fafc;
      font-size: clamp(24px, 5vw, 30px);
      box-shadow: 0 14px 32px rgba(13,148,136,.35);
      overflow: hidden;
    }

    .success__icon::before {
      content: "";
      position: absolute;
      inset: -30%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), transparent 60%);
    }

    .success__icon::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: 1px solid rgba(255,255,255,.35);
      opacity: .9;
    }

    .success__pulse {
      position: absolute;
      inset: -8px;
      border-radius: inherit;
      border: 2px solid rgba(16,185,129,.35);
      animation: success-pulse 2.8s ease-out infinite;
    }

    .success__headline {
      display: grid;
      gap: 6px;
    }

    .success__badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: fit-content;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(16,185,129,.16);
      color: var(--success);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .38px;
      text-transform: uppercase;
    }

    html[data-theme="light"] .success__badge { background: rgba(16,185,129,.12); }

    .success h3 {
      margin: 0;
      font-size: clamp(22px, 4vw, 28px);
      font-weight: 700;
      letter-spacing: -.2px;
      color: inherit;
    }

    .success__message,
    .success__note {
      position: relative;
      z-index: 1;
      margin: 0;
      line-height: 1.6;
    }

    .success__message { color: var(--text); opacity: .9; }
    .success__note {
      margin-top: 10px;
      color: var(--muted);
      font-size: 13px;
    }

    .success__actions {
      position: relative;
      z-index: 1;
      margin-top: clamp(18px, 4vw, 24px);
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .success__cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 20px;
      border-radius: 14px;
      text-decoration: none;
      font-weight: 600;
      color: #f8fafc;
      background: linear-gradient(135deg, rgba(16,185,129,.95), rgba(34,211,238,.95));
      box-shadow: 0 18px 36px rgba(13,148,136,.3);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .success__cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 22px 44px rgba(13,148,136,.35);
    }

    .success__cta i { font-size: 14px; }

    .success__link {
      font-weight: 600;
      color: var(--muted);
      text-decoration: none;
      transition: color .2s ease;
    }

    .success__link:hover { color: var(--text); }

    @keyframes success-pop {
      0% { transform: translateY(12px) scale(.97); opacity: 0; }
      60% { transform: translateY(0) scale(1.02); opacity: 1; }
      100% { transform: translateY(0) scale(1); opacity: 1; }
    }

    @keyframes success-pulse {
      0% { transform: scale(.9); opacity: .8; }
      70% { transform: scale(1.3); opacity: 0; }
      100% { transform: scale(.9); opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .success { animation: none; }
      .success__pulse { display: none; }
    }

    @media (max-width: 620px) {
      .success { text-align: center; }
      .success__header { flex-direction: column; text-align: center; }
      .success__headline { justify-items: center; }
      .success__badge { margin-inline: auto; }
      .success__actions { justify-content: center; }
    }

    @media (max-width: 768px) {
      .topbar {
        width: 100%;
        padding-inline: clamp(16px, 6vw, 24px);
      }

      .shell {
        width: 100%;
        box-sizing: border-box;
        padding-inline: 0;
        justify-items: center;
        margin-inline: auto;
      }

      .card {
        width: 100%;
        max-width: 520px;
        box-sizing: border-box;
        margin-inline: auto;
      }

      .left,
      .right {
        border-radius: calc(var(--radius-lg) - 4px);
      }

      .left {
        padding: 24px;
        gap: 20px;
      }

      .right {
        padding: 24px;
        gap: 20px;
      }

      .form-card {
        padding: 18px;
        gap: 18px;
      }
    }

    @media (max-width: 640px) {
      .left,
      .right {
        padding: 22px;
      }

      .hero h1 {
        font-size: clamp(24px, 7vw, 34px);
      }

      .price-badge {
        gap: 8px;
        padding: 8px 12px;
      }

      .benefits {
        gap: clamp(10px, 4vw, 16px);
      }

      .switcher {
        /* The price above it is centred on a phone, so the switch under it is too. Left aligned
           against centred text is what made this corner look untidy. */
        justify-content: center;
        flex-wrap: wrap;
        gap: clamp(8px, 3vw, 12px);
        text-align: center;
      }

      .pricing {
        text-align: center;
      }

      .cta {
        width: 100%;
        min-width: 0;
      }

      .cta > span {
        justify-content: center;
        width: 100%;
      }

      .cta-group {
        width: 100%;
        justify-content: center;
      }

      .secure {
        justify-content: center;
        text-align: center;
      }

      .input {
        grid-template-columns: 32px 1fr;
        padding: 8px 12px;
      }

      .input input {
        padding: 8px 4px 8px 0;
        font-size: 15px;
      }
    }

    @media (max-width: 480px) {
      .hero h1 {
        font-size: clamp(22px, 8vw, 32px);
        word-break: break-word;
      }

      .price-badge {
        font-size: 13px;
      }

      .benefit .icn {
        width: 32px;
        height: 32px;
      }

      .input {
        grid-template-columns: 28px 1fr;
      }
    }

    @media (max-width: 380px) {
      .mode-toggle {
        gap: 6px;
      }

      .row {
        gap: clamp(10px, 4vw, 16px);
      }
    }

    /* Subtle reveal on scroll */
    .reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.is-in { opacity: 1; transform: translateY(0); }

    /* Tilt hover utility */
    .tilt { will-change: transform; transition: transform .18s ease; }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .cta:hover, .benefit:hover .icn { animation: none !important; transform: none !important; }
    }
  
    /* --------------------------------------------------
       ADDED WITH THE REBUILD
       Only what the new markup needs; everything above is the page as it was.
    -------------------------------------------------- */

    .gradient-text {
      background: linear-gradient(90deg, #7c5cff, #22d3ee);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .brand-text {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text);
    }

    .promo-row {
      display: flex;
      gap: 8px;
      align-items: stretch;
    }

    .promo-row .input { flex: 1; min-width: 0; }

    .promo-apply {
      padding: 0 18px;
      border: 0;
      border-radius: 12px;
      background: linear-gradient(135deg, #7c5cff, #22d3ee);
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
    }

    .promo-apply:hover { filter: brightness(1.08); }

    .promo-result {
      margin: 8px 0 0;
      min-height: 18px;
      font-size: 13px;
      color: var(--muted);
    }

    .promo-result.is-good { color: #34d399; }
    .promo-result.is-bad { color: #f87171; }

    .secure-note {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
      font-size: 12.5px;
    }

    .signin-note { margin-top: 18px; text-align: center; font-size: 13.5px; }
    .signin-note a { color: var(--accent); }

    .flash {
      width: min(1200px, 96vw);
      margin: 12px auto 0;
      padding: 12px 16px;
      border-radius: 14px;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .flash--bad { background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .45); color: #fecaca; }
    .flash--good { background: rgba(16, 185, 129, .14); border: 1px solid rgba(16, 185, 129, .45); color: #a7f3d0; }

    html[data-theme="light"] .flash--bad { color: #991b1b; }
    html[data-theme="light"] .flash--good { color: #065f46; }

    .site-foot {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px 22px;
      padding: 26px 16px 34px;
      font-size: 13px;
      color: var(--muted);
    }

    .site-foot a { color: var(--muted); text-decoration: none; }
    .site-foot a:hover { color: var(--text); }

    .shell--single { grid-template-columns: minmax(0, 560px); justify-content: center; }

    textarea {
      width: 100%;
      min-height: 130px;
      padding: 14px 16px;
      font: inherit;
      color: var(--text);
      background: var(--input-bg);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      resize: vertical;
    }

    html[data-theme="light"] textarea { border-color: rgba(15,23,42,.12); }

/* Icons are drawn into the page now rather than fetched from a font, so they take their size from
   the text around them, exactly as the old ones did. */
.icn-svg {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex: none;
}

.benefit .icn .icn-svg,
.success__icon .icn-svg { width: 1em; height: 1em; }

@media (max-width: 520px) {
    .cta { min-width: 0; width: 100%; }
    .cta-group { width: 100%; }
    .cta-group > span { width: 100%; }
}

/*
 * The introduction, on a phone.
 *
 * Read on a desktop it is a column beside the form. Read on a phone it is a wall of text between
 * the visitor and the thing they came to do, so it is clipped to a few lines with the rest one tap
 * away, and the signup form is linked from the top. On anything wider it is left exactly as it was.
 */
.hero__jump { display: none; }

@media (max-width: 768px) {
    .hero__text {
        max-height: 10.5em;
        overflow: hidden;
        /* The last line fades out rather than being cut in half. Fading the text itself means the
           card can keep whatever background it likes, in either theme. */
        -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
        mask-image: linear-gradient(to bottom, #000 72%, transparent);
    }

    .hero__text.is-open {
        max-height: none;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .hero__more {
        margin-top: 10px;
        padding: 0;
        font: inherit;
        font-weight: 600;
        color: var(--accent, #7c5cff);
        background: none;
        border: 0;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* The jump lands with a little room above the card rather than flush against the edge. */
    #formRoot { scroll-margin-top: 16px; }

    .hero__jump {
        display: block;
        margin-top: 18px;
        padding: 14px 18px;
        border-radius: 999px;
        text-align: center;
        font-weight: 700;
        text-decoration: none;
        color: #fff;
        background: linear-gradient(135deg, #7c5cff, #22d3ee);
        box-shadow: 0 10px 24px rgba(124, 92, 255, .35);
    }

    /* The card itself sits closer together, so less of the screen is spent on the reading. */
    .card.left { padding: 18px; }
    .card.left h1 { font-size: clamp(26px, 7.5vw, 34px); line-height: 1.15; }
    .hero__text p { margin: 0 0 10px; }
}