/* ==========================================================================
   Kailan Uwi? — Web Design System v1.2 implementation
   Tokens and rules are transcribed from the locked design system PDF.
   Do not introduce colours, radii, or type sizes outside this file.
   ========================================================================== */

/* --- Core tokens (design system p.2) ----------------------------------- */
:root {
  /* Palette — the only four brand colours. */
  --mint:        #A7D8D1;  /* Where you are */
  --teal:        #1C7C82;  /* The path / primary action */
  --dark-teal:   #0F5B62;  /* Where you're going */
  --ink:         #062C52;  /* Wordmark / primary text */

  /* Neutrals derived for surfaces only — never used as brand colour. */
  --bg:          #FBFAF7;
  --surface:     #FFFFFF;
  --mint-wash:   rgba(167, 216, 209, 0.18);
  --mint-edge:   rgba(167, 216, 209, 0.55);
  --ink-60:      rgba(6, 44, 82, 0.60);
  --ink-45:      rgba(6, 44, 82, 0.45);
  --ink-12:      rgba(6, 44, 82, 0.12);
  --ink-08:      rgba(6, 44, 82, 0.08);

  /* Type scale (design system p.2) */
  --fs-hero:   clamp(2.75rem, 7vw, 4.5rem);   /* 44–72px, 700 */
  --fs-h1:     clamp(2.25rem, 5vw, 3.5rem);   /* 36–56px, 600–700 */
  --fs-h2:     clamp(1.75rem, 3.6vw, 2.5rem); /* 28–40px, 600 */
  --fs-h3:     clamp(1.375rem, 2.2vw, 1.75rem); /* 22–28px, 600 */
  --fs-body:   clamp(1rem, 1.15vw, 1.125rem); /* 16–18px, 400 */
  --fs-helper: 0.9375rem;                     /* 15px, 400–500 */

  /* Layout (design system p.3) */
  --max-content: 1160px;   /* within 1120–1200 */
  --max-reading: 700px;    /* within 640–760 */
  --pad-mobile:  22px;     /* within 20–24 */
  --pad-desktop: 40px;     /* within 32–48 */
  --section-y-mobile:  64px;  /* within 56–80 */
  --section-y-desktop: 100px; /* within 80–120 */

  /* Controls (design system p.3) */
  --r-input:  12px;
  --r-button: 15px;   /* within 14–16 */
  --r-card:   18px;   /* within 16–20 */
  --tap:      48px;

  /* Motion — restrained by contract. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-quick: 160ms;
  --dur-base:  280ms;
  --dur-reveal: 420ms;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
button, input, select { font: inherit; color: inherit; }

h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p  { margin: 0; }

/* --- Layout primitives -------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--pad-mobile);
}
.reading { max-width: var(--max-reading); }
.section { padding-block: var(--section-y-mobile); }
/* The header is sticky, so anchored sections must clear it when jumped to. */
.section[id], .hero[id], #top { scroll-margin-top: 100px; }
@media (min-width: 768px) {
  .wrap { padding-inline: var(--pad-desktop); }
  .section { padding-block: var(--section-y-desktop); }
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.lede { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--ink-60); line-height: 1.62; }
.helper { font-size: var(--fs-helper); color: var(--ink-60); }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 250, 247, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease);
}
.site-header[data-stuck="true"] { border-bottom-color: var(--ink-08); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 80px;
}
@media (min-width: 768px) { .site-header .wrap { min-height: 88px; } }
/* Logo is the supplied master artwork. Never retype the wordmark. */
/* Sized so the header's remaining space clears Point A on every breakpoint:
   at 132px wide the lockup is 58.8px tall inside an 88px header (14.6px each
   side, against 13.9px required). Widening it breaks the clear-space rule. */
.wordmark img { width: clamp(112px, 15vw, 132px); }
.wordmark { display: inline-flex; text-decoration: none; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 0 26px;
  border: 1px solid transparent; border-radius: var(--r-button);
  font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease),
              border-color var(--dur-quick) var(--ease),
              transform var(--dur-quick) var(--ease);
}
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--dark-teal); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink-12); }
.btn-ghost:hover { border-color: var(--teal); color: var(--dark-teal); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 3px solid var(--teal); outline-offset: 2px;
}
@media (max-width: 560px) { .header-cta { display: none; } }

/* --- Hero --------------------------------------------------------------- */
.hero { padding-top: 48px; padding-bottom: var(--section-y-mobile); }
@media (min-width: 768px) { .hero { padding-top: 80px; padding-bottom: var(--section-y-desktop); } }
.hero-grid { display: grid; gap: 44px; align-items: center; }
.hero-grid > * { min-width: 0; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.08fr 0.92fr; gap: 56px; }
}
.hero h1 { font-size: var(--fs-hero); font-weight: 700; max-width: 15ch; }
.hero .lede { margin-top: 22px; max-width: 50ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-note { margin-top: 20px; display: flex; align-items: center; gap: 9px; }
.hero-note svg { flex: none; color: var(--teal); }

/* --- Hero diagram: months counted to a marked one ----------------------
   Illustrative only. It carries no figures and is not a chart; it exists
   to say "time is countable" before the calculator proves it.
   ---------------------------------------------------------------------- */
.monthstrip {
  margin: 0; padding: 28px;
  background: var(--surface);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-card);
}
@media (min-width: 768px) { .monthstrip { padding: 32px; } }
.monthstrip-cap {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 20px;
}
.monthstrip-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px;
}
@media (min-width: 420px) { .monthstrip-grid { gap: 11px; } }
.ms-cell {
  aspect-ratio: 1 / 1; border-radius: 9px;
  background: var(--ink-08);
  opacity: 0; transform: scale(0.86);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease),
              background-color 300ms var(--ease);
}
.ms-cell.is-on { opacity: 1; transform: none; background: var(--mint); }
.ms-cell.is-goal.is-on {
  background: var(--dark-teal);
  box-shadow: 0 0 0 4px var(--mint-wash);
}
.monthstrip-foot {
  display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px;
  font-size: 0.8125rem; color: var(--ink-60);
}
.ms-key { display: inline-flex; align-items: center; gap: 8px; }
.ms-dot { width: 11px; height: 11px; border-radius: 4px; flex: none; }
.ms-dot-past { background: var(--mint); }
.ms-dot-goal { background: var(--dark-teal); }

/* --- Cards -------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--ink-08);
  border-radius: var(--r-card);
  padding: 26px;
}
@media (min-width: 768px) { .card { padding: 32px; } }

/* --- Calculator --------------------------------------------------------- */
.calc { display: grid; gap: 22px; }
/* Grid children default to min-width:auto, which lets the intrinsic width of a
   number input push the card wider than the viewport. Opt every column out. */
.calc > * { min-width: 0; }
@media (min-width: 940px) {
  .calc { grid-template-columns: 1fr 1.05fr; gap: 30px; align-items: start; }
  /* Seven inputs make a tall column. Pin the date so it stays in view while
     you type — watching it move is the entire point of the tool. */
  .calc > .result { position: sticky; top: 104px; }
}

.field { display: block; margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field-label { display: block; font-size: var(--fs-helper); font-weight: 500; margin-bottom: 7px; }
.field-hint { display: block; font-size: 0.8125rem; color: var(--ink-45); margin-top: 6px; }

.input-shell {
  display: flex; align-items: stretch; min-width: 0;
  border: 1px solid var(--ink-12); border-radius: var(--r-input);
  background: var(--surface); overflow: hidden;
  transition: border-color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
}
.input-shell:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--mint-wash); }
.input-prefix {
  display: inline-flex; align-items: center; padding-inline: 14px;
  background: var(--mint-wash); color: var(--dark-teal);
  font-weight: 600; font-size: 0.9375rem; border-right: 1px solid var(--ink-08);
  min-width: 56px; justify-content: center;
}
.input-shell input {
  flex: 1 1 0; min-width: 0; width: 100%; min-height: var(--tap);
  border: 0; background: transparent; padding: 0 14px;
  font-size: 1.0625rem; font-weight: 500;
}
.input-shell input:focus { outline: none; }
.input-shell input::-webkit-outer-spin-button,
.input-shell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-shell input[type=number] { -moz-appearance: textfield; }

select.select {
  width: 100%; min-height: var(--tap);
  border: 1px solid var(--ink-12); border-radius: var(--r-input);
  background: var(--surface); padding: 0 40px 0 14px; font-weight: 500;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23062C52' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
/* Salary-currency prefixes carry a code, not a glyph, so they need room. */
.input-prefix.cur-fx { font-size: 0.8125rem; letter-spacing: 0.01em; min-width: 62px; }

/* --- Currency chip: a real select dressed as the field's prefix ---------
   Native select on purpose — it gives the OS picker on a phone, which beats
   any custom menu for reach and accessibility, and cannot be clipped by an
   overflow ancestor the way a bespoke dropdown can. */
.cur-chip {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  padding-inline: 12px 10px;
  background: var(--mint-wash); color: var(--dark-teal);
  border-right: 1px solid var(--ink-08);
  font-weight: 600; font-size: 0.8125rem;
  min-width: 74px; flex: none;
  transition: background-color var(--dur-quick) var(--ease);
}
.cur-chip:hover { background: rgba(167, 216, 209, 0.34); }
.cur-select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; padding: 0; margin: 0;
  font: inherit; color: inherit; font-weight: 600;
  cursor: pointer; width: 100%; min-height: var(--tap);
  /* The whole chip is the tap target, caret included. */
  position: absolute; inset: 0; opacity: 0;
}
.cur-chip::before {
  content: attr(data-code);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.cur-caret { flex: none; opacity: 0.75; margin-left: auto; }
.cur-chip:focus-within {
  outline: 3px solid var(--teal); outline-offset: -3px;
}

/* --- The rate actually used, stated under the fields it applies to ------ */
.fx-line {
  margin-top: 8px; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-60);
}
.fx-line[data-state="stale"] { color: var(--ink); font-weight: 500; }
.fx-line[data-state="failed"] { color: var(--ink); font-weight: 500; }
.fx-line[data-state="loading"] { color: var(--ink-45); }
.input-suffix {
  display: inline-flex; align-items: center; padding-inline: 16px;
  background: var(--mint-wash); color: var(--dark-teal);
  font-weight: 600; font-size: 0.9375rem; border-left: 1px solid var(--ink-08);
}

/* --- Target: the derived figure, presented as the user's to change ------ */
.target-block {
  margin-top: 26px; padding: 22px;
  background: var(--mint-wash); border: 1px solid var(--mint-edge);
  border-radius: var(--r-card);
}
/* The estimate reads as an answer, not a field awaiting input. */
.target-lead { font-size: var(--fs-helper); color: var(--ink-60); line-height: 1.5; }
.target-figure {
  font-size: clamp(1.875rem, 5vw, 2.375rem); font-weight: 700;
  letter-spacing: -0.02em; margin-top: 6px; color: var(--dark-teal);
  font-variant-numeric: tabular-nums;
}
.target-breakdown {
  margin-top: 8px; font-size: 0.8125rem; color: var(--ink-60); line-height: 1.5;
}

/* Overriding is available, but secondary to the answer above it. */
.target-override { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--mint-edge); }
.target-override summary {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: var(--tap); cursor: pointer; list-style: none;
  font-size: var(--fs-helper); font-weight: 600; color: var(--teal);
}
.target-override summary::-webkit-details-marker { display: none; }
.target-override summary::after {
  content: ''; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-quick) var(--ease);
}
.target-override[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.target-override summary:hover { color: var(--dark-teal); }
.override-body { padding-top: 6px; }
.override-body .input-shell { background: var(--surface); }
.override-body .input-shell input { font-size: 1.0625rem; font-weight: 600; }
.target-reset {
  margin-top: 12px; border: 0; background: none; padding: 8px 0; cursor: pointer;
  font-size: var(--fs-helper); font-weight: 600; color: var(--teal);
  text-decoration: underline; text-underline-offset: 3px; min-height: var(--tap);
}
.target-reset:hover { color: var(--dark-teal); }

/* What the safety fund does to the date, in the same place you change it. */
.runway-impact {
  margin-top: 10px; font-size: 0.8125rem; line-height: 1.5;
  color: var(--dark-teal); font-weight: 500;
}

.runway { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--mint-edge); }
.runway .field-label { display: block; margin-bottom: 8px; }
.runway-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.runway-input { flex: 1 1 150px; min-width: 0; background: var(--surface); }
.runway-input input { text-align: left; }
.runway-picks { display: flex; gap: 8px; }
.runway-picks .chip { padding: 0 16px; min-width: 56px; font-variant-numeric: tabular-nums; }

/* --- Setup: assumptions, summarised in the closed state ---------------- */
.setup {
  margin-top: 24px; border-top: 1px solid var(--ink-08); padding-top: 20px;
}
.setup summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: var(--tap); cursor: pointer; list-style: none;
  border-radius: var(--r-input);
}
.setup summary::-webkit-details-marker { display: none; }
.setup-title { font-weight: 600; display: inline-flex; align-items: center; gap: 9px; }
.setup-title::after {
  content: ''; width: 9px; height: 9px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-quick) var(--ease);
}
.setup[open] .setup-title::after { transform: rotate(-135deg) translateY(-2px); }
.setup-summary {
  font-size: var(--fs-helper); color: var(--ink-60); text-align: right;
  font-variant-numeric: tabular-nums;
}
.setup-body { padding-top: 8px; }
/* Marks the field that is blocking a calculation. Weight and wording carry
   the message; the palette has no alert colour and does not need one. */
.field-hint.is-warn { color: var(--ink); font-weight: 500; }

.field-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
.field-row > * { min-width: 0; }
@media (min-width: 480px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* --- Result (design system p.3: Uwi Date is the hero) ------------------- */
.result {
  /* Flat Dark Teal: it anchors the destination, and the locked palette
     has exactly four colours — no invented gradient stop. */
  background: var(--dark-teal);
  color: #fff; border-radius: var(--r-card); padding: 30px 26px; border: 0;
}
@media (min-width: 768px) { .result { padding: 38px 34px; } }
.result-label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--mint);
}
.uwi-date {
  font-size: clamp(2.5rem, 8.5vw, 3.75rem); font-weight: 700;
  line-height: 1.03; letter-spacing: -0.02em; margin-top: 12px;
  text-transform: uppercase;
}
.uwi-remaining { font-size: clamp(1.125rem, 2.4vw, 1.375rem); font-weight: 500; color: var(--mint); margin-top: 10px; }
.result-divider { height: 1px; background: rgba(167,216,209,0.28); margin: 26px 0 22px; }

/* Savings vs target — never louder than the date. */
.vs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--fs-helper); }
.vs-head .vs-label { color: rgba(255,255,255,0.72); }
.vs-head .vs-value { font-weight: 600; }
.progress {
  height: 9px; border-radius: 999px; margin-top: 12px;
  background: rgba(255,255,255,0.16); overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 999px; background: var(--mint);
  width: 0%; transition: width var(--dur-reveal) var(--ease);
}
.vs-foot { margin-top: 11px; font-size: 0.875rem; color: rgba(255,255,255,0.72); }

/* Quiet reveal — motion must explain change, not decorate. */
.reveal { transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.reveal[data-swap="true"] { opacity: 0; transform: translateY(6px); }

.result-empty { font-size: 1.0625rem; color: rgba(255,255,255,0.8); margin-top: 12px; max-width: 38ch; line-height: 1.55; }
#safetyNote { margin-top: 8px; }
.disclaimer { margin-top: 28px; max-width: 70ch; }
.uwi-date, .vs-value, .pk-cell-date { font-variant-numeric: tabular-nums; }

/* --- Mobile sticky result ----------------------------------------------
   Hidden entirely on wide screens, where the full card already sits beside
   the inputs. Below the breakpoint it rides under the header so the date
   stays in view while the questions are answered. */
.uwi-sticky { display: none; }

@media (max-width: 767px) {
  .uwi-sticky {
    display: block;
    position: sticky;
    top: 80px;                 /* clears the sticky header */
    z-index: 40;               /* below the header's 50 */
    margin-bottom: 20px;
    padding: 11px 18px 13px;
    background: var(--dark-teal);
    color: #fff;
    border-radius: var(--r-card);
    transition: opacity var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease);
  }

  /* Faded out while the full card is on screen, so the same figure is not
     shown twice. */
  .uwi-sticky[data-tucked="true"] {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }

  .uwi-sticky-label {
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--mint);
  }
  .uwi-sticky-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-top: 3px;
  }
  .uwi-sticky-date {
    font-size: 1.4375rem; font-weight: 700; line-height: 1.1;
    letter-spacing: -0.015em; text-transform: uppercase;
    font-variant-numeric: tabular-nums;
  }
  .uwi-sticky-sub {
    font-size: 0.8125rem; font-weight: 500; color: var(--mint);
    text-align: right; flex: none;
  }
  /* A message rather than a date needs to wrap, not sit on one line. */
  .uwi-sticky[data-empty="true"] .uwi-sticky-row { display: block; }
  .uwi-sticky[data-empty="true"] .uwi-sticky-date {
    font-size: 0.9375rem; font-weight: 600; text-transform: none;
    line-height: 1.4;
  }
  .uwi-sticky[data-empty="true"] .uwi-sticky-sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .uwi-sticky { transition: none; }
  .uwi-sticky[data-tucked="true"] { transform: none; }
}

/* --- Paano Kung...? ----------------------------------------------------- */
.pk-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.chip {
  min-height: var(--tap); padding: 0 20px;
  border: 1px solid var(--ink-12); border-radius: var(--r-button);
  background: var(--surface); font-size: 0.9375rem; font-weight: 500; cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease),
              border-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
.chip:hover { border-color: var(--mint-edge); }
.chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }

.pk-control { display: grid; gap: 14px; align-items: end; }
.pk-control > * { min-width: 0; }
@media (min-width: 720px) {
  .pk-control { grid-template-columns: minmax(0, 320px) minmax(0, 200px) auto; justify-content: start; align-items: end; }
}
.stepper { display: flex; gap: 10px; }
.step-btn {
  width: var(--tap); height: var(--tap); flex: none;
  border: 1px solid var(--ink-12); border-radius: var(--r-input);
  background: var(--surface); font-size: 1.25rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease), background-color var(--dur-quick) var(--ease);
}
.step-btn:hover { border-color: var(--teal); background: var(--mint-wash); }

/* Before → after comparison */
.pk-compare {
  margin-top: 26px; display: grid; gap: 16px; align-items: center;
  grid-template-columns: 1fr;
}
.pk-compare > * { min-width: 0; }
@media (min-width: 720px) { .pk-compare { grid-template-columns: 1fr auto 1fr; } }
.pk-cell { background: var(--surface); border: 1px solid var(--ink-08); border-radius: var(--r-card); padding: 20px 22px; }
.pk-cell.is-new { border-color: var(--mint-edge); background: var(--mint-wash); }
.pk-cell-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-45); }
.pk-cell.is-new .pk-cell-label { color: var(--dark-teal); }
.pk-cell-date { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; margin-top: 8px; text-transform: uppercase; letter-spacing: -0.015em; }
.pk-cell.is-new .pk-cell-date { color: var(--dark-teal); }
.pk-arrow { display: flex; justify-content: center; color: var(--teal); }
@media (max-width: 719px) { .pk-arrow { transform: rotate(90deg); } }

/* Earlier / later / no-change state.
   Colour is never the only signal — every state ships with words. */
.pk-impact {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: var(--r-button); font-weight: 600;
  border: 1px solid transparent;
}
.pk-impact[data-state="earlier"] { background: var(--mint-wash); border-color: var(--mint-edge); color: var(--dark-teal); }
.pk-impact[data-state="later"]   { background: var(--ink-08); border-color: var(--ink-12); color: var(--ink); }
.pk-impact[data-state="same"]    { background: transparent; border-color: var(--ink-12); color: var(--ink-60); }
.pk-impact[data-state="none"]    { display: none; }

/* --- Steps -------------------------------------------------------------- */
.steps { display: grid; gap: 20px; margin-top: 40px; padding: 0; list-style: none; }
@media (min-width: 620px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 940px) { .steps-6 { grid-template-columns: repeat(3, 1fr); gap: 28px 24px; } }
.step { padding-top: 22px; border-top: 2px solid var(--mint); }
.step-num {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--teal);
}
.step h3 { margin-top: 10px; }
.step p { margin-top: 10px; color: var(--ink-60); }

/* --- Trust -------------------------------------------------------------- */
.trust { background: var(--mint-wash); border-block: 1px solid var(--mint-edge); }
.trust-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 18px; }
@media (min-width: 820px) { .trust-list { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.trust-list li { display: flex; gap: 13px; align-items: flex-start; }
.trust-list svg { flex: none; margin-top: 3px; color: var(--teal); }
.trust-list strong { display: block; font-weight: 600; }
.trust-list span { color: var(--ink-60); font-size: var(--fs-helper); }

/* --- Tiers: what is free now, and what the full version will add -------- */
.tiers { display: grid; gap: 16px; margin-top: 30px; }
@media (min-width: 720px) { .tiers { grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } }
.tier {
  padding: 22px; border: 1px solid var(--ink-08); border-radius: var(--r-card);
  background: var(--surface);
}
.tier.is-next { background: var(--mint-wash); border-color: var(--mint-edge); }
.tier-label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 14px;
}
.tier.is-next .tier-label { color: var(--dark-teal); }
.tier-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tier-list li {
  position: relative; padding-left: 26px; font-size: var(--fs-helper); line-height: 1.5;
}
.tier-list li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 13px; height: 8px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.tier-note {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mint-edge);
  font-size: 0.8125rem; color: var(--ink-60); line-height: 1.5;
}

/* --- Waitlist ----------------------------------------------------------- */
.waitlist-form { margin-top: 28px; display: grid; gap: 14px; }
.waitlist-form > * { min-width: 0; }
@media (min-width: 620px) { .waitlist-form { grid-template-columns: 1fr auto; align-items: start; } }
.form-status { font-size: var(--fs-helper); margin-top: 4px; min-height: 1.4em; }
.form-status[data-tone="error"] { color: var(--ink); font-weight: 500; }
.form-status[data-tone="ok"] { color: var(--dark-teal); font-weight: 600; }
.form-status[data-tone="notice"] { color: var(--ink-60); }

/* Honest capability notice — shown only while no endpoint is configured. */
.config-notice {
  margin-top: 22px; padding: 15px 18px;
  border: 1px dashed var(--ink-12); border-radius: var(--r-input);
  background: var(--surface); font-size: 0.875rem; color: var(--ink-60);
  display: flex; gap: 11px; align-items: flex-start;
}
.config-notice svg { flex: none; margin-top: 2px; color: var(--teal); }
.config-notice code { font-size: 0.8125rem; background: var(--ink-08); padding: 1px 6px; border-radius: 5px; }

/* --- FAQ ---------------------------------------------------------------- */
.faq { margin-top: 36px; display: grid; gap: 12px; }
.faq details {
  background: var(--surface); border: 1px solid var(--ink-08);
  border-radius: var(--r-card); overflow: hidden;
}
.faq summary {
  min-height: var(--tap); display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 22px; cursor: pointer; font-weight: 600; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-quick) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq .faq-body { padding: 0 22px 20px; color: var(--ink-60); max-width: 62ch; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--ink-08); padding-block: 40px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
.site-footer img { width: 128px; }
.site-footer p { font-size: 0.875rem; color: var(--ink-45); }

/* --- Scroll-in: supporting motion only ---------------------------------- */
.rise { opacity: 0; transform: translateY(14px); }
.rise.is-in { opacity: 1; transform: none; transition: opacity 520ms var(--ease), transform 520ms var(--ease); }

/* --- Reduced motion: meaning preserved, movement removed ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .rise { opacity: 1; transform: none; }
  .reveal[data-swap="true"] { opacity: 1; transform: none; }
  .ms-cell { opacity: 1; transform: none; }
}

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