/* ==========================================================================
   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);
  /* 0.66, NOT 0.60/0.45, AND NOT 0.64 EITHER. Both tokens are text-only —
     every consumer of both is a text colour, so neither has a decorative use
     to preserve at a lighter value. The alpha is set by the DARKEST surface
     these tokens actually land on, which is the mint-wash tint over --bg
     (relative luminance 0.887, the .trust section): 4.5:1 needs 0.6502 there,
     where plain white needs only 0.6340. 0.64 clears white and misses the
     tint by 4.37:1 — measured, not predicted. 0.66 clears every real
     background with margin. Same hue, #062C52; only the alpha moved. */
  --ink-60:      rgba(6, 44, 82, 0.66);
  --ink-45:      rgba(6, 44, 82, 0.66);
  --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; legacy <=720 pass sets 52px explicitly */
  --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;
}

/* PR44 is a homepage redesign. Compact layout tokens are deliberately scoped
   so Worker-rendered product/auth/legal pages keep their pre-PR44 geometry. */
.home-page {
  --pad-mobile: 20px;
  --header-mobile: 76px;
  --header-desktop: 88px;
}
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); }
/* DIRECT CHILD ONLY. `.site-header .wrap` also matched the login panel's own
   wrap, so the panel's heading, form, note and link became flex items in the
   header's row — four narrow slivers side by side, and horizontal overflow
   below 430px. The flex row is the header BAR, not everything inside the
   header element. */
.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; }

/* Homepage-only compact header. */
.home-page .site-header > .wrap { min-height: var(--header-mobile); }
.home-page .wordmark img { width: 104px; }
@media (min-width: 768px) {
  .home-page .site-header > .wrap { min-height: var(--header-desktop); }
  .home-page .wordmark img { width: 132px; }
}

/* --- 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;
}
.header-cta { white-space: nowrap; }
@media (max-width: 560px) {
  .site-header > .wrap { gap: 10px; }
  .header-cta {
    display: inline-flex;
    min-height: var(--tap);
    padding-inline: 14px;
    font-size: 0.75rem;
  }
}

/* --- Hero --------------------------------------------------------------- */
/* Checkpoint 1: make the first screen feel like a compact product surface,
   not a marketing preamble. Copy and CTA behaviour are unchanged. */
.hero { padding-top: 36px; padding-bottom: 52px; }
.hero-grid { display: grid; gap: 24px; align-items: center; }
.hero-grid > * { min-width: 0; }
.hero h1 {
  font-size: 2.0625rem;
  font-weight: 700;
  line-height: 1.06;
  max-width: 13ch;
}
.hero .lede {
  margin-top: 14px;
  max-width: 36ch;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.hero-actions .btn { padding-inline: 20px; }
.hero-note {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  line-height: 1.45;
}
.hero-note svg { flex: none; color: var(--teal); }

@media (min-width: 768px) {
  .hero { padding-top: 72px; padding-bottom: 84px; }
  .hero-grid { gap: 44px; }
  .hero h1 { font-size: var(--fs-hero); line-height: 1.08; max-width: 15ch; }
  .hero .lede { margin-top: 20px; max-width: 50ch; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.62; }
  .hero-actions { margin-top: 30px; }
  .hero-note { margin-top: 16px; font-size: var(--fs-helper); }
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.08fr 0.92fr; gap: 56px; }
}

/* --- 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: 18px;
  background: var(--surface);
  border: 1px solid var(--ink-08);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(6, 44, 82, 0.035);
}
.monthstrip-cap {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
.monthstrip-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}
.ms-cell {
  aspect-ratio: 1 / 1;
  border-radius: 7px;
  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 3px var(--mint-wash);
}
.monthstrip-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-60);
}
.ms-key { display: inline-flex; align-items: center; gap: 6px; }
.ms-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }

@media (min-width: 420px) {
  .monthstrip-grid { gap: 9px; }
}
@media (min-width: 768px) {
  .monthstrip { padding: 28px; border-radius: var(--r-card); }
  .monthstrip-cap { font-size: 0.75rem; margin-bottom: 18px; }
  .monthstrip-grid { gap: 11px; }
  .ms-cell { border-radius: 9px; }
  .monthstrip-foot { gap: 18px; margin-top: 20px; font-size: 0.8125rem; }
  .ms-key { gap: 8px; }
  .ms-dot { width: 11px; height: 11px; border-radius: 4px; }
}
.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; }
}

/* --- Completed five-answer summary ------------------------------------
   Desktop keeps the existing form. On phones, after Q5 is complete and the
   user leaves the field, the five tall inputs become one review card. Editing
   expands the chosen real field directly under its summary row. */
.answers-compact-head,
.answer-summary-row,
.answers-summary-fx { display: none; }

@media (max-width: 767px) {
  .answers-card[data-compact="true"] { padding: 18px; }

  .answers-card[data-compact="true"] .answers-compact-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
  }

  .answers-compact-title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dark-teal);
  }

  .answers-compact-help {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ink-60);
    text-align: right;
  }

  .answers-card[data-compact="true"] .answer-summary-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding-block: 7px;
    border-top: 1px solid var(--ink-08);
  }

  .answers-card[data-compact="true"] .answers-compact-head + .answer-item .answer-summary-row {
    border-top: 0;
  }

  .answer-summary-check {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--mint-wash);
    color: var(--dark-teal);
    font-size: 0.75rem;
    font-weight: 700;
  }

  .answer-summary-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  .answer-summary-label {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--ink-60);
  }

  .answer-summary-value {
    min-width: 0;
    font-size: 0.9375rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  .answer-edit-btn {
    min-width: 58px;
    min-height: var(--tap);
    padding: 0 8px;
    border: 0;
    border-radius: var(--r-input);
    background: transparent;
    color: var(--teal);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
  }

  .answer-edit-btn:hover { background: var(--mint-wash); }

  .answers-card[data-compact="true"] .answer-item > .field { display: none; }

  .answers-card[data-compact="true"] .answer-item.is-editing > .field {
    display: block;
    margin: 4px 0 14px 32px;
    padding: 14px;
    border-radius: var(--r-input);
    background: var(--mint-wash);
  }

  .answers-card[data-compact="true"] .answers-summary-fx {
    display: block;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ink-08);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ink-60);
  }

  /* While gastos is open, the real #fxLine is visible inside that row.
     Suppress the compact copy so the same sentence is never shown twice. */
  .answers-card[data-compact="true"]
  .answer-item[data-answer-item="gastos"].is-editing ~ .answers-summary-fx {
    display: none;
  }

  .answers-card[data-compact="true"] .target-block { margin-top: 18px; }
}

.field { display: block; margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
/* Wrapping each question in .answer-item makes its label the last child of
   that wrapper, so the generic :last-child rule above would otherwise erase
   every inter-question gap. Restore the original form rhythm explicitly. */
.answers-card .answer-item > .field { margin-bottom: 18px; }
.answers-card .answer-item[data-answer-item="utang"] > .field { 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; }

/* 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);
}
.result-qualifier {
  margin-top: 8px;
  max-width: 42ch;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
}
.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 shared/base 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 {
    /* Fluid, and NOWRAP. A long month wrapped to a second line and pushed the
       bar from 72px to 95px — "SEPTEMBER 2027" does what "JULY 2035" never
       did, so the bar's height depended on which month the answer happened to
       land in. It shrinks to fit instead. */
    font-size: clamp(1.125rem, 5.2vw, 1.4375rem);
    font-weight: 700; line-height: 1.1;
    letter-spacing: -0.015em; text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; min-width: 0;
  }
  .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;
    /* This node carries a DATE (nowrap, so a long month cannot double the
       bar's height) or a SENTENCE — the next question, or a reason. A
       sentence must wrap; leaving it nowrap pushed the page 29px wider than
       a 320px viewport. */
    white-space: normal;
  }
  .uwi-sticky[data-empty="true"] .uwi-sticky-sub { display: none; }

  .home-page .uwi-sticky { top: calc(var(--header-mobile) + 1px); }
}

@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); }
/* THE IMPACT AS A HEADING. Same size and rhythm as the label it replaces, so
   the date stays the figure; the state only shifts the colour, and the words
   carry the meaning on their own. .pk-impact (the pill) is untouched — /plano
   still uses it. */
/* SPECIFICITY, NOT JUST OPACITY. `.pk-cell.is-new .pk-cell-label` above is
   (0,3,0) and these were (0,2,0), so every state rendered in --dark-teal and
   the `color` declared here never applied — at .6 that produced 2.90:1, the
   worst text on the page. Qualified to (0,4,0) so the state actually decides
   the colour, and .72 rather than .6 so muted does not mean unreadable. */
.pk-cell.is-new .pk-impact-head[data-state="earlier"] { color: var(--dark-teal); opacity: 1; }
.pk-cell.is-new .pk-impact-head[data-state="later"]   { color: var(--ink); opacity: .8; }
.pk-cell.is-new .pk-impact-head[data-state="same"]    { color: var(--ink); opacity: .72; }
/* Why there is no date. Shown only when the scenario has none to head. */
.pk-note { margin: 16px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink); opacity: .85; }
.pk-note[hidden] { display: none; }
.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); }
/* --teal is 4.94:1 on white but only 4.41:1 on this section's tint, and the
   brand colour is locked so the fix is which palette colour is used here, not
   a new one. --dark-teal is 6.96:1 on the same tint. */
.trust .eyebrow { color: var(--dark-teal); }
.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;
}

/* On the dark teal card, `.helper`'s --ink-60 is dark navy on dark teal:
   1.45:1, a WCAG failure that reads as almost invisible. rgba(255,255,255,0.72)
   is the colour this card already uses for secondary text — .vs-label and
   .vs-foot — and it measures 4.90:1, over the 4.5:1 AA floor. Scoped to
   `.result .helper` rather than to this one element so the next helper added
   inside the card inherits the fix instead of repeating the bug. */
.result .helper { color: rgba(255, 255, 255, 0.72); }




/* --- Phase 4: the locked block, the slider, the deliberate recalculation ---
   Visible-but-locked is the point: a question hidden behind a paywall teaches
   nothing, so Q6, Q7, the safety period and the target override stay on screen
   and stay unusable. */
/* THE LOCKED Q6/Q7 ROWS, beside the five free questions.
   No field, no button, nothing focusable: a locked question is a statement
   that the question exists, and the moment it is drawn as an input shell it
   starts advertising an interaction it does not have. Muted weight and a lock
   glyph, sized well under the real fields so the five answered questions keep
   the column's hierarchy. */
.locked-rows{margin:26px 0 0;padding:16px 16px 14px;border:1px dashed var(--ink-12);
  border-radius:16px;background:var(--ink-04)}
.locked-rows-head{margin:0 0 12px;font-size:.8125rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);opacity:.65}
.locked-row{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px}
.locked-row-icon{font-size:.9375rem;line-height:1.45;opacity:.7}
.locked-row-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.locked-row-title{font-size:.9375rem;font-weight:600;line-height:1.45;color:var(--ink);opacity:.8}
.locked-row-sub{font-size:.8125rem;line-height:1.4;color:var(--dark-teal);font-weight:600}
.locked-rows-why{margin:12px 0 0;font-size:.8125rem;line-height:1.5;color:var(--ink);opacity:.85}
.locked-rows-link{margin:10px 0 0;font-size:.8125rem;line-height:1.5}
.locked-rows-link a{font-weight:600;color:var(--dark-teal);
  /* A jump link inside a dense block still has to be a real target. */
  display:inline-block;padding:6px 0;min-height:32px}
.locked-rows-foot{margin:10px 0 0;font-size:.8125rem;line-height:1.5;color:var(--ink);opacity:.72}
/* Contrast: the locked copy is ordinary body text and must stay AA. It is not
   decoration — it is the explanation of what the free number leaves out. */
.locked-copy{margin:14px 0 0;color:var(--ink);font-size:.95rem;line-height:1.6}



/* Reserved for the paid CTA. No size, no border, nothing — it exists so the
   hierarchy below the result is settled before the button arrives. */
.unlock-slot{display:contents}
.unlock-slot[hidden]{display:none}

.pk-values{display:flex;flex-direction:column;gap:2px;justify-content:flex-end}
.pk-scenario-label{margin:0;font-size:.8125rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);opacity:.72}
.pk-scenario{margin:0;font-size:1.5rem;font-weight:700;line-height:1.2;
  color:var(--dark-teal);font-variant-numeric:tabular-nums}
.pk-current{margin:2px 0 0;font-size:.9375rem;line-height:1.5;color:var(--ink);opacity:.75;
  font-variant-numeric:tabular-nums}

.pk-slider{margin-top:18px}
/* 48px of TAP TARGET, whatever the track looks like. A range input defaults to
   about 16px high, which fails the rule the whole design system is built on. */
.pk-slider input[type=range]{width:100%;min-height:48px;height:48px;background:transparent;cursor:pointer}
.pk-slider input[type=range]:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:8px}
.pk-slider-ends{display:flex;justify-content:space-between;margin-top:2px;font-size:.85rem;color:var(--ink);opacity:.7}

.pk-precise{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;margin-top:14px}
/* `flex: 1 1 240px` sets flex-BASIS, which is the main-axis size — width in a
   row, HEIGHT in a column. Below 720px .pk-precise turns into a column, so a
   closed 48px <details> was being stretched to 240px: the viewport-sized blank
   band between the scenario controls and the comparison card, and the reason
   "Custom na halaga" looked like an orphaned heading with nothing under it.
   One bug, two symptoms. Desktop keeps the row and is unaffected. */
.pk-custom{flex:1 1 240px}
.pk-custom summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:var(--dark-teal)}

@media (max-width:720px){
  .pk-values{margin-top:12px}
  .pk-precise{flex-direction:column;align-items:stretch}
  /* Size to content in a column; never to the row-basis. */
  .pk-custom{flex:0 0 auto}
}


/* --- Phase 4: the free journey ------------------------------------------- */

/* The login panel. Stays on the page, opens under the header, and is reachable
   on a phone — the old waitlist CTA was hidden below 560px, which a login
   control can never be. */
.header-cta{display:inline-flex}
.login-panel{border-top:1px solid var(--ink-08);background:var(--surface)}
.login-panel[hidden]{display:none}
/* ONE COLUMN, always. Heading, label, input, button, note, link — in that
   order, each on its own line. `display:block` also re-states the intent
   after the header-bar flex fix above, so this cannot silently become a row
   again if the header markup moves. */
.login-wrap{
  display:block;
  padding-block:20px;
  /* Meaningful action near the bottom edge of a phone shouldn't sit under the
     browser chrome. */
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
}
.login-title{margin:0 0 16px;font-size:1.25rem;font-weight:700;line-height:1.25;color:var(--ink)}
.login-form{display:grid;gap:16px;max-width:26rem}
.login-form .btn{width:100%;min-height:var(--tap)}
.login-note{margin:16px 0 0;font-size:.9375rem;line-height:1.55;color:var(--ink);opacity:.85;max-width:34rem}
.login-alt{margin:12px 0 0;font-size:.9375rem;line-height:1.55}
.login-alt a{font-weight:600}
.login-panel input:disabled{background:var(--ink-04);cursor:not-allowed}
.login-panel .btn:disabled{opacity:.55;cursor:not-allowed}
/* ON DESKTOP THE PANEL BELONGS TO THE BUTTON THAT OPENED IT.
   The trigger sits at the right end of the header bar; the panel spanned the
   full wrap and stacked its content hard against the left edge, so the thing
   that appeared was nowhere near the thing that was clicked. The background
   still spans the header — only the CONTENT is constrained and pushed to the
   same edge as the control. Below 721px nothing applies: on a phone the wrap
   IS the column and narrowing it would only make the form harder to use. */
@media (min-width:721px){
  .login-wrap > *{max-width:27rem;margin-left:auto}
}

/* GUIDE state. One question at a time, on the same surface the date will use,
   so the card never looks broken or empty before the fifth answer. */
.guide-step{margin:0 0 10px;font-size:.8125rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mint)}
.guide-ask{margin:0;font-size:1.375rem;font-weight:700;line-height:1.3;color:#fff}
.guide-help{margin:12px 0 0;font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.82)}
#resultGuide[hidden]{display:none}

.uwi-basis{margin:12px 0 0;font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.82)}
.result-target-line{margin:12px 0 0;font-size:1rem;font-weight:700;line-height:1.5;color:#fff}

/* THE MILESTONE. An interpretation of the figure above it, not a footnote
   about the inputs, so it gets a rule and a label rather than being a fourth
   paragraph in the same grey. The label reuses .guide-step's mint on the same
   dark surface; the caveat reuses .uwi-basis's rgba(255,255,255,.82), already
   measured at 4.90:1 on the teal card. No new colour. */
.milestone{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(167,216,209,0.28)}
.milestone-label{margin:0 0 8px;font-size:.8125rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mint)}
.milestone-body{margin:0;font-size:1rem;font-weight:600;line-height:1.6;color:#fff}
.milestone-caveat{margin:10px 0 0;font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.82)}

/* THE OFFER CARD. Its own surface below the result, on the page background
   rather than on the teal — so the answer reads as the answer and the ask
   reads as an ask. Not a sales block: one question, one link, the prices as
   plain fact. */
.offer-card{margin-top:26px}
.offer-card[hidden]{display:none}
.unlock-ask{margin:0;font-size:1.0625rem;line-height:1.6;color:var(--ink);font-weight:600}
.unlock-ask-sub{margin-top:8px;font-weight:400}
.unlock-cta{margin:18px 0 0}
.unlock-cta .btn{width:auto;min-width:min(100%,18rem);min-height:var(--tap)}
.unlock-price{margin:12px 0 0;font-size:.875rem;line-height:1.7;color:var(--ink);opacity:.85}

/* "Paano nakuha ang petsang ito?" — the free result says what it is based on,
   then offers the arithmetic rather than asserting it. What the figure leaves
   out is the milestone caveat's job. On the dark card, so it follows the
   card's secondary-text colour. */
.uwi-how{margin:14px 0 0;font-size:.9375rem;line-height:1.5}
.uwi-how a{color:#fff;text-decoration-color:rgba(255,255,255,.5);font-weight:600}

/* The Paano Kung teaser. Explains the simulator; it is not the simulator. */
.pk-teaser-section{padding-block:0}
.pk-teaser{margin-top:-12px}
.pk-teaser-title{margin:0;font-size:1.25rem;font-weight:700}
.pk-teaser-body{margin:10px 0 0;line-height:1.6}
.pk-teaser-note{margin:8px 0 0;font-size:.9375rem;line-height:1.6;color:var(--ink);opacity:.8}
.pk-teaser-cta{margin:18px 0 0}
.pk-teaser-cta .btn{min-height:var(--tap)}
.pk-teaser[data-ready="false"]{opacity:.72}
.pk-teaser[data-ready="false"] .btn{
  background:var(--ink-08);color:var(--ink);opacity:.65;cursor:not-allowed;pointer-events:none}

/* The simulator itself: present, visibly unavailable, and saying why. */
.pk-gate{margin:18px 0 0;padding:14px 16px;border:1px solid var(--ink-12);
  border-radius:var(--r-input);background:var(--surface);
  font-size:.9375rem;line-height:1.6;color:var(--ink)}
.pk-gate[hidden]{display:none}
/* Collapsed while incomplete. The muted treatment stays for the moment
   between `hidden` being lifted and a re-render, and as a second signal if
   the attribute is ever removed by hand. */
.pk-body[hidden]{display:none}
.pk-body[data-ready="false"]{opacity:.6}
.pk-body[data-ready="false"] *{cursor:not-allowed}
.pk-body[data-ready="false"] .btn,
.pk-body[data-ready="false"] input,
.pk-body[data-ready="false"] select{pointer-events:none}

/* The paid-plan reveal, shown only after a real free Uwi Date exists. */
.locked-preview-section{background:var(--surface);border-block:1px solid var(--ink-08)}
.locked-preview-section[hidden]{display:none}
.reveal-lede{max-width:58ch}
.reveal-prompt{margin:0;font-size:1.0625rem;line-height:1.55;font-weight:700;color:var(--ink)}
.reveal-questions{margin:12px 0 0;padding-left:22px;display:grid;gap:7px;line-height:1.55}
.locked-copy{margin-top:18px;max-width:64ch;line-height:1.6}

/* THE WORKED EXAMPLE. Fixed illustrative figures, and it has to read as such:
   the heading says so, the surface is not the teal the real result uses, and
   every figure is literal text in the markup rather than anything computed. */
.example{margin-top:24px;padding:18px 18px 16px;border:1px solid var(--ink-12);
  border-radius:16px;background:var(--surface)}
.example-head{margin:0 0 14px;font-size:.8125rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);opacity:.7}
/* The jump from the locked rows lands here, so it needs the same clearance the
   sections get — .section[id] carries scroll-margin-top and this is a div. */
#planExample{scroll-margin-top:100px}
/* What counts as expected income. Supporting text under the figure it
   qualifies, not a second explanation. */
.example-hint{margin:12px 0 0;font-size:.875rem;line-height:1.55;color:var(--ink);opacity:.8}
.example-rows{margin:0;display:grid;gap:8px}
.example-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
.example-row dt{margin:0;font-size:.9375rem;line-height:1.5;color:var(--ink);opacity:.85}
.example-row dd{margin:0;font-size:.9375rem;line-height:1.5;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
/* THREE STAGES, EACH ANSWERING ITS OWN QUESTION. A rule between them so the
   reader can see where one calculation ends and the next begins — the figures
   carry from stage to stage and a continuous column of numbers hid that. */
.example-stage + .example-stage{margin-top:18px;padding-top:16px;border-top:1px solid var(--ink-08)}
.example-q{margin:0 0 12px;font-size:.9375rem;font-weight:700;line-height:1.45;color:var(--ink)}

/* The derived figure and the sum that justifies it, as one block: the label
   names what the number means, the sum shows where it came from. */
.example-math{margin:14px 0 0;font-size:.9375rem;line-height:1.6;color:var(--ink);opacity:.85}
.example-term{display:block;font-weight:600;color:var(--dark-teal);opacity:1}
.example-math strong{display:inline-block;margin-top:2px;color:var(--ink);opacity:1;
  font-variant-numeric:tabular-nums}
.example-note{margin:14px 0 0;font-size:.9375rem;line-height:1.6;color:var(--ink)}
#exampleCaveat{opacity:.85}

/* What the full plan adds, kept apart from how the free date is computed. */
.adds-title{margin:34px 0 0;font-size:1.125rem;font-weight:700}
.adds-list{margin:12px 0 0;padding-left:20px;line-height:1.7}

/* The purchase decision. The CTA is inert in this slice and looks it. */
/* CHECKOUT. Two fields, one acceptance, one button — the form is small on
   purpose and the styling should not make it look like more than it is. */
.buy-form{margin-top:28px}
.buy-gate{margin:0;padding:14px 16px;border-radius:var(--r-input);
  background:var(--mint-wash);font-size:.9375rem;line-height:1.55;color:var(--ink)}
.buy-gate[hidden],#unlockFields[hidden]{display:none}
.buy-form .field{margin-bottom:18px}
.accept{display:flex;gap:10px;align-items:flex-start;font-size:.9375rem;line-height:1.55;
  color:var(--ink);cursor:pointer;min-height:var(--tap)}
.accept input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--teal);cursor:pointer}
.accept-note{margin:8px 0 0 30px;font-size:.8125rem;line-height:1.55;color:var(--ink);opacity:.85}
.buy-privacy{margin:16px 0 0;font-size:.875rem;line-height:1.6;color:var(--ink);opacity:.85}
.buy-note[data-tone="error"]{color:var(--ink);font-weight:600}
.buy-note[data-tone="notice"]{color:var(--ink);opacity:.85}
.buy-note:empty{display:none}

.buy-cta{margin:28px 0 0}
.buy-cta .btn{min-height:var(--tap)}
.buy-cta .btn:disabled{background:var(--ink-08);color:var(--ink);opacity:.6;cursor:not-allowed}
.buy-note{margin:10px 0 0;font-size:.9375rem;line-height:1.6;color:var(--ink);opacity:.85}
.buy-price{margin:10px 0 0;font-size:.875rem;line-height:1.7;color:var(--ink);opacity:.85}
.buy-guarantee{margin:8px 0 0;font-size:.875rem;line-height:1.6;color:var(--ink)}
.buy-guarantee a{color:var(--teal);font-weight:600;text-decoration-color:var(--mint-edge);text-underline-offset:3px}
.buy-guarantee a:hover{color:var(--dark-teal);text-decoration-color:currentColor}
.offer-payoff{margin:16px 0 0;font-size:1.0625rem;line-height:1.55;font-weight:700;color:var(--dark-teal)}



/* --- PR44 Checkpoint 3: core product surfaces ---------------------------
   Pure presentation. The PR43 funnel and every input/calculation remain in
   their existing DOM order; these rules make the result, simulator, gap,
   trust and paid decision read as one compact mobile product flow. */

/* UWI DATE MO: keep the destination card dominant while reducing the amount
   of empty movement around supporting explanation. */
.home-page .result {
  box-shadow: 0 14px 36px rgba(6, 44, 82, 0.08);
}
.home-page .result-label { font-weight: 700; }
.home-page .milestone { max-width: 48ch; }
.home-page .result-divider { margin-block: 22px 18px; }

/* PAANO KUNG: the simulator is one contained tool, not a loose stack of
   controls spread across a whole white section. */
.home-page #paano { background: var(--surface); border-block: 1px solid var(--ink-08); }
.home-page #paano .wrap { max-width: 920px; }
.home-page #paano .pk-body[data-ready="true"] {
  margin-top: 24px !important;
  padding: 22px;
  border: 1px solid var(--ink-08);
  border-radius: var(--r-card);
  background: var(--bg);
}
.home-page #paano .pk-compare { margin-top: 22px; }
.home-page #paano .pk-cell { padding: 18px 20px; }

/* GAP / WORKED EXAMPLE: cream planning card inside a quiet white section.
   This is intentionally not teal so illustrative figures cannot be mistaken
   for the customer's result. */
.home-page .locked-preview-section {
  background: var(--surface);
  border-block: 1px solid var(--ink-08);
}
.home-page .locked-preview-section .wrap { max-width: 920px; }
.home-page .locked-preview-card {
  background: var(--bg);
  border-color: var(--ink-08);
  padding: 24px;
}
.home-page .locked-preview-card .example {
  background: var(--surface);
  border-color: var(--ink-08);
}

/* TRUST: shorter objection-handling strip between explanation and the ask. */
.home-page .trust {
  padding-block: 34px;
  background: var(--mint-wash);
  border-block: 1px solid var(--mint-edge);
}
.home-page .trust .wrap { max-width: 1040px; }
.home-page .trust h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.home-page .trust .lede { max-width: 64ch; }
.home-page .trust-list {
  margin-top: 22px;
  gap: 14px 18px;
}
.home-page .trust-list li {
  padding: 14px;
  border: 1px solid var(--mint-edge);
  border-radius: var(--r-input);
  background: var(--surface);
}
@media (min-width: 820px) and (max-width: 959px) {
  .home-page .trust-list { grid-template-columns: 1fr; }
}
@media (min-width: 960px) {
  .home-page .trust-list { grid-template-columns: repeat(4, 1fr); }
}

/* CONTEXTUAL BRIDGE: one compact hand-off after trust. */
.home-page .contextual-offer { padding-block: 28px; }
.home-page .contextual-offer .wrap { max-width: 920px; }
.home-page .contextual-offer .offer-card {
  margin-top: 0;
  padding: 20px 22px;
  border-color: var(--mint-edge);
  background: var(--mint-wash);
}
.home-page .contextual-offer .unlock-cta { margin-top: 14px; }

/* UWI DATE FOR GOOD: make the value explanation and checkout feel like one
   product card. The checkout itself, including price and terms, is unchanged. */
.home-page #uwiplan { background: var(--bg); }
.home-page #uwiplan .reading {
  max-width: 860px;
  padding: 30px;
  border: 1px solid var(--ink-08);
  border-radius: var(--r-card);
  background: var(--surface);
}
.home-page #uwiplan .tiers {
  gap: 12px;
  margin-top: 24px;
}
.home-page #uwiplan .tier { padding: 18px; }
.home-page #uwiplan .buy-form {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--mint-edge);
  border-radius: var(--r-card);
  background: var(--mint-wash);
}
.home-page #uwiplan .buy-gate { background: var(--surface); }
.home-page #uwiplan .buy-cta { margin-top: 22px; }
.home-page #uwiplan .buy-cta .btn { width: 100%; }
.home-page #uwiplan .buy-price {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mint-edge);
}

/* Mobile density: preserve 48px controls, shrink only surrounding whitespace. */
@media (max-width: 720px) {
  .home-page .result {
    padding: 24px 20px;
    box-shadow: none;
  }
  .home-page .result-qualifier { margin-top: 6px; }
  .home-page .uwi-remaining { margin-top: 8px; }
  .home-page .milestone { margin-top: 14px; padding-top: 12px; }
  .home-page .result-divider { margin-block: 18px 16px; }

  .home-page #paano .pk-body[data-ready="true"] {
    margin-top: 20px !important;
    padding: 16px 14px;
  }
  .home-page #paano .pk-cell { padding: 16px; }
  .home-page #paano .pk-compare { gap: 10px; margin-top: 20px; }

  .home-page .locked-preview-card {
    margin-top: 20px !important;
    padding: 18px 16px;
  }
  .home-page .reveal-questions { gap: 6px; }
  .home-page .locked-copy { margin-top: 16px; }
  .home-page .locked-preview-card .example { margin-top: 18px; }

  .home-page .trust {
    padding-block: 30px;
  }
  .home-page .trust .eyebrow { margin-bottom: 8px; }
  .home-page .trust h2 { font-size: 1.5rem; }
  .home-page .trust .lede {
    margin-top: 10px !important;
    font-size: 0.9375rem;
    line-height: 1.55;
  }
  .home-page .trust-list {
    margin-top: 18px;
    gap: 10px;
  }
  .home-page .trust-list li {
    gap: 10px;
    padding: 12px 14px;
  }
  .home-page .trust-list span {
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .home-page .contextual-offer { padding-block: 20px; }
  .home-page .contextual-offer .offer-card { padding: 18px; }
  .home-page .contextual-offer .unlock-cta .btn { width: 100%; }

  .home-page #uwiplan .reading {
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .home-page #uwiplan .tiers { margin-top: 20px; gap: 10px; }
  .home-page #uwiplan .tier { padding: 15px; }
  .home-page #uwiplan .tier-list { gap: 7px; }
  .home-page #uwiplan .tier-list li {
    padding-left: 23px;
    font-size: 0.875rem;
  }
  .home-page #uwiplan .buy-form {
    margin-top: 18px;
    padding: 16px;
  }
  .home-page #uwiplan .buy-cta { margin-top: 18px; }
  .home-page #uwiplan .buy-price {
    font-size: 0.8125rem;
    line-height: 1.6;
  }
}

/* ==========================================================================
   MOBILE PASS  (audit: docs/CLAUDE_MOBILE_UI_AUDIT.md)
   Scoped to <=720px throughout. Desktop is deliberately untouched: every rule
   below sits inside a max-width query, and the two structural fixes above
   (the header-bar child selector and the column flex-basis) change nothing at
   desktop widths, which the probe confirms.
   ========================================================================== */
@media (max-width: 720px) {

  /* --- header: secondary, and narrower than the wordmark ----------------
     The control was 139x48 beside a 112px logo — wider than the brand it sits
     next to, which is what made it read as the page's primary action. */
  .header-cta{
    /* 48px, NOT the 44 the audit's §1 suggests. The same audit's
       accessibility section says to preserve 48px minimum tap targets, and
       --tap is 48 across this design system — the two asks contradict each
       other, so this takes the top of §1's 44-48 range and satisfies both.
       The weight comes off the padding, the type and the border instead:
       26px -> 14px and 16px -> 15px takes it from 139px wide beside a 112px
       wordmark to 112px, so it no longer out-measures the brand. */
    min-height:var(--tap); height:var(--tap); padding:0 14px;
    font-size:.9375rem; font-weight:600;
    border-radius:14px; border-color:var(--ink-12); color:var(--ink);
  }

  /* --- section rhythm ---------------------------------------------------
     Related things closer than unrelated things: a section break is the only
     place that gets a large gap. */
  .section{ padding-block:52px; }
  .pk-teaser-section{ padding-block:0; }

  /* Label -> heading -> paragraph -> component, as one descending scale. */
  .eyebrow{ margin-bottom:12px; }
  .section h2 + .lede{ margin-top:14px !important; }

  /* --- typography: stop the headline competing with the answer ----------
     h1 was 44px against a 40px result, so the page had two display figures.
     The result is the thing the product exists to show. */
  .section h2{ font-size:1.625rem; }           /* 26px */
  .uwi-date{ font-size:2.25rem; }              /* 36px */
  .lede{ font-size:1.0625rem; line-height:1.6; }
  .field-hint{ font-size:.875rem; line-height:1.5; }

  /* --- form density -----------------------------------------------------
     The controls stay a comfortable 48px+; what made the page long was the
     rhythm around them, not their height. */
  .field{ margin-bottom:24px; }
  .answers-card .answer-item > .field{ margin-bottom:24px; }
  .answers-card .answer-item[data-answer-item="utang"] > .field{ margin-bottom:0; }
  .field-label{ margin-bottom:8px; }
  .input-shell{ min-height:52px; }
  /* The currency chip is secondary to the amount beside it. */
  .cur-chip{ flex:0 0 30%; max-width:30%; }

  /* The rate line is supporting information, not a field. */
  .fx-line{ font-size:.8125rem; opacity:.85; }
  .fx-label{ display:none; }

  /* The milestone stays readable without competing with the date. */
  .home-page .milestone{ margin-top:16px; padding-top:14px; }
  .home-page .milestone-body{ font-size:.9375rem; }
  .home-page .milestone-caveat{ font-size:.875rem; }

  /* --- scenario controls ------------------------------------------------ */
  .pk-control{ gap:12px; }
  .pk-slider{ margin-top:14px; }
  .pk-precise{ gap:12px; margin-top:12px; }
  /* /plano keeps the steppers; the free page has none to size. */
  .step-btn{ width:auto; min-width:var(--tap); padding:0 14px; gap:6px; }
  .stepper{ display:flex; gap:10px; }
  .stepper .step-btn{ flex:1 1 0; }
  /* The result follows the controls in normal flow. */
  .pk-compare{ margin-top:32px; }

  /* --- the compact locked rows and the worked example ------------------- */
  .locked-rows{ padding:14px 14px 12px; }
  .locked-row-title{ font-size:.875rem; }
  .example{ padding:16px 14px 14px; }
  .example-row dt,.example-row dd,.example-math,.example-note{ font-size:.875rem; }
  .example-hint{ font-size:.8125rem; }
  .example-q{ font-size:.9375rem; }
  .example-stage + .example-stage{ margin-top:16px; padding-top:14px; }
  /* A label and a figure that no longer fit on one line stack rather than
     squeeze; tabular figures stay on their own line and never wrap mid-number. */
  .example-row{ gap:2px; }

  /* --- density: fewer outlines where a tint already groups -------------- */
  .pk-gate{ border:0; background:var(--mint-wash); }
  .pk-teaser[data-ready="false"]{ border-color:transparent; background:var(--ink-04); }

  /* --- safe area on the things at the end of the page ------------------- */
  .site-footer{ padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
  .buy-cta,.buy-price{ margin-bottom:0; }
  .home-page #uwiplan .reading{ padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
}

/* The narrowest phones still in use. Nothing may overflow at 320px. */
@media (max-width: 360px) {
  .header-cta{ padding:0 14px; font-size:.875rem; }
  /* The locked safety-fund row: an input plus three chips does not fit on a
     320px screen, so the chips drop to their own line rather than pushing the
     page sideways. */
  .runway-row{ flex-direction:column; align-items:stretch; }
  .runway-picks{ justify-content:flex-start; }
  .runway-picks .chip{ flex:1 1 0; min-width:0; padding:0 8px; }
  .hero-copy h1{ font-size:1.875rem; }         /* 30px; the only phone-specific h1 override */
  .uwi-date{ font-size:2rem; }                 /* 32px */
  .step-btn{ padding:0 10px; }
}


/* Checkpoint 3 final mobile specificity pass. The legacy mobile audit above
   intentionally owns generic .section rhythm; these component-specific values
   come last so the compact trust/bridge/product-card treatment is not
   accidentally expanded back to generic landing-page spacing. */
@media (max-width: 720px) {
  .home-page .trust { padding-block: 30px; }
  .home-page .contextual-offer { padding-block: 20px; }
  .home-page #paano .pk-compare { margin-top: 20px; }
  .home-page #uwiplan .reading {
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}


/* --- PR44 Checkpoint 4: compact Process + FAQ ---------------------------
   Final homepage density pass. Content and semantics are unchanged; only the
   explanatory tail is compressed so it does not re-expand into a long-form
   landing page after the paid decision. */

/* PROCESS: four steps stay legible, but read as one mechanism instead of four
   large editorial blocks. On phones each step is a compact numbered row; on
   wide screens the same four become a single horizontal sequence. */
.home-page #proseso .wrap { max-width: 1040px; }
.home-page #proseso #initialSteps {
  margin-top: 28px;
  gap: 12px;
}
.home-page #proseso .step {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  grid-template-areas:
    "num title"
    "num body";
  align-content: start;
  gap: 4px 12px;
  padding: 14px 16px;
  border: 1px solid var(--ink-08);
  border-top: 3px solid var(--mint);
  border-radius: var(--r-input);
  background: var(--surface);
}
.home-page #proseso .step-num {
  grid-area: num;
  align-self: start;
  padding-top: 2px;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.home-page #proseso .step h3 {
  grid-area: title;
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}
.home-page #proseso .step p:not(.step-num) {
  grid-area: body;
  margin: 2px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
}
.home-page #proseso .adds-title {
  margin: 24px 0 0;
  padding: 16px 18px 6px;
  border: 1px solid var(--mint-edge);
  border-bottom: 0;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--mint-wash);
  font-size: 1rem;
}
.home-page #proseso .adds-list {
  margin: 0;
  padding: 6px 18px 16px 38px;
  border: 1px solid var(--mint-edge);
  border-top: 0;
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: var(--mint-wash);
  font-size: 0.875rem;
  line-height: 1.55;
}
.home-page #proseso .adds-list li + li { margin-top: 5px; }

@media (min-width: 940px) {
  .home-page #proseso .steps-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .home-page #proseso .step {
    grid-template-columns: 1fr;
    grid-template-areas:
      "num"
      "title"
      "body";
    gap: 5px;
    min-height: 158px;
  }
}

/* FAQ: keep all seven answers available, but make the closed state scan like
   a compact help list. The native details/summary interaction is retained. */
.home-page .faq-section .reading { max-width: 820px; }
.home-page .faq-section .faq {
  margin-top: 24px;
  gap: 8px;
}
.home-page .faq-section .faq details {
  border-radius: var(--r-input);
}
.home-page .faq-section .faq summary {
  min-height: var(--tap);
  padding: 11px 16px;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.home-page .faq-section .faq summary::after {
  width: 9px;
  height: 9px;
}
.home-page .faq-section .faq .faq-body {
  padding: 0 16px 16px;
  font-size: 0.875rem;
  line-height: 1.55;
}
.home-page .site-footer {
  padding-block: 28px;
}
.home-page .site-footer .wrap { gap: 14px; }
.home-page .site-footer img { width: 112px; }
.home-page .site-footer p { font-size: 0.8125rem; }

/* Component-specific mobile values come last so the legacy generic .section
   mobile rhythm cannot expand Process and FAQ back to 52px. */
@media (max-width: 720px) {
  .home-page #proseso { padding-block: 40px; }
  .home-page #proseso #initialSteps { margin-top: 22px; gap: 9px; }
  .home-page #proseso .step { padding: 12px 14px; }
  .home-page #proseso .adds-title { margin-top: 20px; padding: 14px 15px 5px; }
  .home-page #proseso .adds-list {
    padding: 5px 15px 14px 34px;
    font-size: 0.8125rem;
  }

  .home-page .faq-section { padding-block: 40px; }
  .home-page .faq-section .faq { margin-top: 20px; gap: 7px; }
  .home-page .faq-section .faq summary {
    padding: 10px 14px;
    font-size: 0.875rem;
  }
  .home-page .faq-section .faq .faq-body {
    padding: 0 14px 14px;
    font-size: 0.8125rem;
  }
  .home-page .site-footer {
    padding-block: 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}