/* ============================================================================
   TOPPER — FOUNDATION
   The design system, before any page layout: one layout unit, the type scale,
   spacing, the blue ramp and the shared primitives (buttons, fields, rules).
   Token names follow safe-start/v1/assets/foundation.css, so the concepts
   share one structure and differ only in values.

   Every size, color and duration in styles.css comes from here.
   ========================================================================== */

:root {
  /* ---- the unit ---------------------------------------------------------- */
  /* TE-style proportional scaling. --u is 16px at the 1440 × 800 design and
     grows with whichever runs out first, width or height: on 16:10 and 16:9
     screens the page is the design scaled up, to 1.5× on big monitors; on
     ultrawides the extra width goes to the layout (see --container). Bounded
     below so tablets stay usable. Phones get their own unit further down. */
  --u: clamp(11px, min(100vw / 90, 100vh / 50), 24px);

  /* One design pixel: exactly 1px at the design size and below, growing
     with --u above it. Component internals (icons, paddings, radii) are
     written as calc(N * var(--p)) so they scale with the type around them. */
  --p: max(1px, calc(var(--u) / 16));

  /* ---- type: seven roles, ~1.25 ratio ------------------------------------ */
  /* Floors keep text readable on small screens; no ceilings, the unit has
     its own.                                                     at 1440 */
  --type-figure:  max(64px, calc(var(--u) * 8));      /* 128 */
  --type-display: max(40px, calc(var(--u) * 4.5));    /*  72 */
  --type-title:   max(30px, calc(var(--u) * 3));      /*  48 */
  --type-heading: max(21px, calc(var(--u) * 1.625));  /*  26 */
  --type-lead:    max(18px, calc(var(--u) * 1.3125)); /*  21 */
  --type-body:    max(16px, calc(var(--u) * 1.0625)); /*  17 */
  --type-small:   max(14px, calc(var(--u) * .875));   /*  14 */

  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- spacing: multiples of the unit ------------------------------------ */
  --space-1:  calc(var(--u) * .5);   /*   8 */
  --space-2:  var(--u);              /*  16 */
  --space-3:  calc(var(--u) * 1.5);  /*  24 */
  --space-4:  calc(var(--u) * 2);    /*  32 */
  --space-6:  calc(var(--u) * 3);    /*  48 */
  --space-8:  calc(var(--u) * 4);    /*  64 */
  --space-12: calc(var(--u) * 6);    /*  96 */
  --space-16: calc(var(--u) * 8);    /* 128 */

  /* ---- layout ------------------------------------------------------------ */
  /* the widest the content runs: the full window at any normal ratio,
     stopping around 2.6:1 so 32:9 screens keep the page together */
  --container:  calc(var(--u) * 132);
  --gutter:     calc(var(--u) * 4);  /* page margin, 64 */
  --col-gap:    calc(var(--u) * 1.5);
  --copy-width: calc(var(--u) * 36); /* reading measure, 576 */
  --nav-h:      max(64px, calc(var(--u) * 5));

  /* ---- color: the blue ramp and two bright neighbours -------------------- */
  /* Mostly blue. Aqua and iris sit either side of it on the wheel and carry
     the moments that should feel bright: the Boost, progress, light. The page
     stays pale and soft; brightness lives in small, vivid things. */
  --blue-50:  #F4F8FF;
  --blue-100: #E7F0FF;
  --blue-200: #D3E4FF;
  --blue-300: #ADCBFF;
  --blue-400: #6E9DFF;
  --blue-500: #3D74FF;   /* electric */
  --blue-600: #2459F0;   /* buttons and figures */
  --blue-700: #1B43C4;   /* accent text */
  --blue-800: #172C6E;
  --blue-900: #0F1B3D;   /* ink */

  --aqua-200: #C6F3FF;
  --aqua-300: #8DE8FF;
  --aqua-400: #3FD6FF;
  --aqua-500: #12B8E8;

  --iris-200: #DCDAFF;
  --iris-300: #BBB6FF;
  --iris-400: #8F87FF;
  --iris-500: #6C5CFF;

  --ink:       var(--blue-900);       /* text */
  --ink-2:     #4A5673;               /* secondary text, AA on every sky tone */
  --on-accent: #FFFFFF;

  /* roles */
  --canvas:       var(--blue-50);
  --surface:      #FFFFFF;
  --accent:       var(--blue-600);    /* buttons, fills, large figures */
  --accent-hov:   var(--blue-700);
  --accent-text:  var(--blue-700);    /* accent at text sizes, AA on every sky tone */
  --accent-wash:  rgba(36, 89, 240, .09);  /* icon wells */
  --line:         rgba(23, 44, 110, .14);
  --line-strong:  rgba(23, 44, 110, .28);
  --field-border: rgba(23, 44, 110, .28);
  --focus:        var(--blue-600);
  --danger:       #B4552D;

  /* the two bright gradients: lift for progress and light, boost for the
     reward itself (white text holds AA from one end to the other) */
  --lift:  linear-gradient(90deg, var(--aqua-400), var(--blue-500) 55%, var(--iris-500));
  --boost: linear-gradient(115deg, var(--blue-600), var(--iris-500));

  /* frosted glass: cards sit in the sky rather than on it */
  --glass:
    radial-gradient(110% 70% at 100% 0%, rgba(63, 214, 255, .22), rgba(63, 214, 255, 0) 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(143, 135, 255, .18), rgba(143, 135, 255, 0) 62%),
    /* never thinner than .7: grey text keeps AA even over a blurred balloon */
    linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(243, 248, 255, .7));
  --glass-edge:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    0 0 0 1px rgba(36, 89, 240, .07);
  --glass-shadow:
    0 50px 90px -44px rgba(36, 89, 240, .42),
    0 18px 36px -22px rgba(15, 27, 61, .2);

  /* the sky: one continuous atmosphere. Low altitude at the top of the page,
     high altitude by the end; styles.css cross-fades between them on scroll. */
  --sky-low:
    radial-gradient(70% 55% at 84% -4%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 64%),
    radial-gradient(55% 45% at 0% 34%, rgba(63, 214, 255, .13), rgba(63, 214, 255, 0) 70%),
    linear-gradient(180deg, var(--blue-200) 0%, var(--blue-100) 40%, var(--blue-50) 82%);
  --sky-high:
    radial-gradient(60% 50% at 100% 58%, rgba(143, 135, 255, .18), rgba(143, 135, 255, 0) 70%),
    radial-gradient(90% 55% at 18% 108%, rgba(244, 248, 255, .85), rgba(244, 248, 255, 0) 70%),
    /* deepest point stops short of blue-300: accent text and figures keep AA */
    linear-gradient(180deg, color-mix(in srgb, var(--blue-300) 45%, var(--blue-200)) 0%, var(--blue-200) 42%, var(--blue-100) 100%);

  /* ---- shape: three radii ------------------------------------------------ */
  --radius-control: calc(10 * var(--p)); /* fields, options, rows inside panels */
  --radius-panel:   calc(20 * var(--p)); /* the account panel, the modal */
  --radius-pill:    999px;            /* buttons and chips */
  --control-height: calc(52 * var(--p));

  /* ---- motion: one curve, two durations ---------------------------------- */
  --ease:  cubic-bezier(.2, .8, .2, 1);
  --dur-1: 240ms;                     /* UI feedback */
  --dur-2: 640ms;                     /* reveals and state changes */
}

/* ---- phones: their own unit and scale ------------------------------------ */
@media (max-width: 767px) {
  :root {
    --u: clamp(13px, 3.6vw, 15px);                 /* 14 at 390 */
    --type-figure:  clamp(56px, 16.4vw, 72px);     /* 64 */
    --type-display: clamp(34px, 10.3vw, 44px);     /* 40 */
    --type-title:   clamp(27px, 7.7vw, 32px);      /* 30 */
    --type-heading: 21px;
    --type-lead:    18px;
    --type-body:    16px;
    --type-small:   14px;
    --gutter: 20px;
    --nav-h: 64px;
    --p: 1px;                                      /* phones keep true pixels */
  }
}

/* ================================================================== base == */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-4);
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--type-body);
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.lp-locked { overflow: hidden; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font-family: inherit; }
input { font-family: inherit; }
svg { display: block; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--ink); }

::selection { background: var(--aqua-200); color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

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

/* ============================================================ type roles == */
.t-figure {
  font-size: var(--type-figure); line-height: .9; font-weight: 800;
  letter-spacing: -.05em; font-variant-numeric: tabular-nums;
}
.t-display {
  font-size: var(--type-display); line-height: 1.02; font-weight: 800;
  letter-spacing: -.035em; text-wrap: balance;
}
.t-title {
  font-size: var(--type-title); line-height: 1.06; font-weight: 800;
  letter-spacing: -.03em; text-wrap: balance;
}
.t-heading {
  font-size: var(--type-heading); line-height: 1.2; font-weight: 700;
  letter-spacing: -.015em;
}
.t-lead {
  font-size: var(--type-lead); line-height: 1.5; font-weight: 500;
  letter-spacing: -.005em; color: var(--ink-2); text-wrap: pretty;
}
.t-body  { font-size: var(--type-body); line-height: 1.6; font-weight: 500; }
.t-small { font-size: var(--type-small); line-height: 1.5; font-weight: 600; }
.num     { font-variant-numeric: tabular-nums; }

/* ============================================================== buttons == */
/* Three variants at one height: primary electric blue, quiet outline, text
   link. Pills are part of Topper's identity, so every button is one. Solid
   colour with one light that sweeps across on hover. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: var(--control-height);
  padding: 0 max(24px, calc(var(--u) * 1.75));
  border: 0; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent);
  font: 700 var(--type-body)/1.1 var(--sans); letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 14px 28px -14px rgba(36, 89, 240, .8);
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease);
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-120%);
}
.btn:hover { background: var(--accent-hov); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 18px 32px -14px rgba(36, 89, 240, .9); }
.btn:hover::after { transform: translateX(120%); transition: transform calc(var(--dur-2) * 1.2) var(--ease); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn__arrow { width: 1.05em; height: 1.05em; flex: none; transition: transform var(--dur-1) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--sm {
  min-height: calc(44 * var(--p)); padding: 0 calc(20 * var(--p));
  font-size: var(--type-small); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}
.btn--quiet {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.btn--quiet::after { display: none; }
.btn--quiet:hover { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }

.link {
  font-weight: 700; color: var(--accent-text);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em;
}

/* =============================================================== fields == */
.field {
  width: 100%; min-height: var(--control-height); padding: 0 calc(16 * var(--p));
  border: 1.5px solid var(--field-border); border-radius: var(--radius-control);
  background: var(--surface); color: var(--ink);
  font: 500 max(16px, var(--type-body))/1.2 var(--sans);   /* 16px floor keeps iOS from zooming */
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.field::placeholder { color: #6B7684; }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(36, 89, 240, .16); }
.field[aria-invalid="true"] { border-color: var(--danger); }

/* an answer choice: the field's shape, pressable */
.option {
  display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--p));
  width: 100%; min-height: var(--control-height); padding: calc(12 * var(--p)) calc(16 * var(--p));
  border: 1.5px solid var(--field-border); border-radius: var(--radius-control);
  background: var(--surface); color: var(--ink); text-align: left;
  font: 600 var(--type-body)/1.35 var(--sans); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.option:hover { border-color: var(--accent); background: var(--blue-50); }
.option[aria-pressed="true"] { border-color: var(--accent); background: var(--blue-100); }

/* ========================================================== small parts == */
.rule { height: 0; border: 0; border-top: 1px solid var(--line); margin: 0; }

.chip {
  display: inline-flex; align-items: center; gap: calc(8 * var(--p));
  min-height: calc(30 * var(--p)); padding: 0 calc(12 * var(--p)); border-radius: var(--radius-pill);
  font-size: var(--type-small); font-weight: 700; line-height: 1; white-space: nowrap;
}

.ico { width: calc(20 * var(--p)); height: calc(20 * var(--p)); flex: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn::after { display: none; }
}