/* /start: a clone of /welcome (30 Oct 2026), the Autism360 parent funnel rebuilt from the app's React funnel
   (fe/src/pages/funnel + components/funnel, "Funnel V5"). The base rules below are the app's values as plain CSS;
   the "onboarding skin" layer at the end restyles them to the app's new onboarding designs (Figma "Autism360 App
   [MASTER]", Onboarding Changes / Registration deferred, Nov 2026). Single light theme. */

:root {
  --fn-orange: #FF9F21;
  --fn-orange-600: #F69515;
  --fn-mango: #FFC52A;
  --fn-ink: #222222;
  --fn-label: #444444;
  --fn-muted: #5A5A5A;
  --fn-deep-blue: #003881;
  --fn-anchor-cool: #CDE2FD;
  --fn-pdf-bg: #E8F3FF;
  --fn-pdf-text: #2D71C8;
  --fn-skill-bg: #FFECF5;
  --fn-skill-border: #FF2A91;
  --fn-plan-blue: #005FE0;
  --fn-gradient: linear-gradient(180deg, #ffc52a 0%, #f69515 100%);
  --fn-disabled-bg: #ebe3d8;
  --fn-disabled-text: #b4a997;
  --fn-card: 0 0 9px rgba(0, 0, 0, .12);
  --fn-card-lg: 0 0 18px rgba(0, 0, 0, .12);
  --fn-card-strong: 2px 4px 2px rgba(0, 0, 0, .25);
  --fn-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  --fn-btn-glow: 0 4px 12px rgba(255, 159, 33, .3);
  --fn-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }
body.fn {
  margin: 0;
  background-color: #fff3dc;
  background-image: linear-gradient(150deg, #fffefb 0%, #fffaee 50%, #fff3dc 100%);
  background-attachment: fixed;
  font-family: var(--fn-font);
  font-size: 16px;
  line-height: 1.5;
  color: #000;
  -webkit-font-smoothing: antialiased;
}
.fn *, .fn *::before, .fn *::after { box-sizing: border-box; font-family: var(--fn-font); }
.fn button { font: inherit; }
/* Tailwind's preflight, which the app relies on: an image keeps its own shape unless a rule sets its height.
   Without it the width/height attributes (there to reserve space) fix the height and stretch the picture. */
img { max-width: 100%; height: auto; }
.fn b, .fn strong { font-weight: 700; }
.fn [hidden] { display: none !important; }

/* ---------- page frames ---------- */
.fn-page { position: relative; min-height: 100vh; min-height: 100svh; padding: 64px 24px; }
.fn-page--options { padding: 40px 32px; }
.fn-page--value { padding: 64px 24px 24px; }
.fn-page--value.has-email { padding-bottom: 40px; }
.fn-page--plan, .fn-page--paywall { padding: 64px 24px 96px; }
.fn-page--center { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.fn-page--thanks { display: flex; align-items: center; justify-content: center; padding: 64px 24px; }
.fn-wrap { margin: 0 auto; max-width: 1100px; }
.fn-col { margin: 0 auto; width: 355px; max-width: 100%; display: flex; flex-direction: column; }
.fn-stack { margin: 0 auto; max-width: 580px; display: flex; flex-direction: column; gap: 28px; }
.fn-stack--6 { gap: 24px; }
.fn-logo { display: block; margin: 0 auto; height: 36px; width: auto; }
.fn-logo--42 { height: 42px; margin-bottom: 26px; }
.fn-logo--32 { height: 32px; margin-bottom: 24px; }
.fn-orange { color: var(--fn-orange); }

/* ---------- welcome ---------- */
.fn-title {
  margin: 0 0 14px; text-align: center; text-wrap: balance;
  font-size: 30px; font-weight: 700; line-height: 1.12; letter-spacing: -.02em; color: var(--fn-ink);
}
@media (min-width: 640px) { .fn-title { font-size: 38px; } }
.fn-lead { margin: 0 auto; max-width: 440px; text-align: center; font-size: 15.5px; line-height: 28px; color: #000; }
.fn-lead--soft { color: #6f6a61; }
.fn-form { margin: 64px auto 0; width: 337px; max-width: 100%; }
.fn-form--child { margin-top: 40px; }
.fn-field { margin-bottom: 32px; display: flex; flex-direction: column; gap: 8px; }
.fn-field__label { margin: 0; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--fn-ink); }
.fn-field__label--soft { color: var(--fn-label); }
.fn-field__hint { margin: -4px 0 0; font-size: 12px; line-height: 16px; font-style: italic; color: var(--fn-muted); }
.fn-field__reaction { margin: 8px 0 0; font-size: 18px; line-height: 28px; font-weight: 700; color: #000; }
.fn-back {
  display: inline-block; margin: 0 0 24px; padding: 0; border: 0; background: transparent; align-self: flex-start;
  font-size: 14px; line-height: 20px; color: var(--fn-muted); text-decoration: underline; cursor: pointer;
}

/* Text field: the app's .funnel-input (antd Input restyled) */
.fn-input {
  display: block; width: 100%; height: 60px; padding: 0 17px;
  border: 1px solid var(--fn-orange); border-radius: 16px; background: #f9f9f9;
  box-shadow: 0 4px 14px rgba(255, 159, 33, .16);
  font-size: 16px; line-height: 1.5714; color: rgba(0, 0, 0, .88); outline: none; -webkit-appearance: none;
}
.fn-input::placeholder { font-style: italic; font-size: 13px; color: #5a5a5a; opacity: 1; }
.fn-input--center { text-align: center; }
.fn-input--center::placeholder { text-align: center; }
.fn-input--valid { padding-right: 40px; }

/* Select: the app's .funnel-select (antd Select) and its .funnel-select-dropdown popup */
.fn-select { position: relative; width: 100%; }
.fn-select__btn {
  display: flex; align-items: center; width: 100%; height: 60px; padding: 0 17px;
  border: 1px solid var(--fn-orange); border-radius: 16px; background: #f9f9f9;
  font-size: 13px; line-height: 58px; color: #5a5a5a; text-align: left; cursor: pointer; transition: box-shadow .2s;
}
.fn-select__btn:hover, .fn-select__btn:focus-visible, .fn-select.is-open .fn-select__btn {
  outline: none; box-shadow: 0 0 0 2px rgba(255, 159, 33, .15);
}
.fn-select__value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-select__arrow { flex: none; margin-left: 8px; display: inline-flex; font-size: 12px; color: rgba(0, 0, 0, .5); }
.fn-select__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--fn-orange); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
  transform-origin: top; animation: fn-slide-up .2s cubic-bezier(.08, .82, .17, 1);
}
/* Opens upward when the viewport has no room below the field (antd flips its popup the same way). */
.fn-select__menu.is-up { top: auto; bottom: calc(100% + 4px); transform-origin: bottom; }
.fn-select__opt {
  display: flex; align-items: center; min-height: 32px; padding: 5px 12px; border-radius: 10px;
  font-size: 13px; line-height: 22px; color: #5a5a5a; cursor: pointer; transition: background .2s;
}
.fn-select__opt:hover, .fn-select__opt.is-active { background: rgba(255, 159, 33, .08); }
.fn-select__opt[aria-selected="true"] { background: rgba(255, 159, 33, .12); color: var(--fn-ink); font-weight: 600; }
@keyframes fn-slide-up { from { opacity: 0; transform: scaleY(.8); } to { opacity: 1; transform: scaleY(1); } }

/* Floating "next" arrow (.funnel-next-arrow) */
.fn-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 5; width: 60px; height: 60px; border: 0; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; background: var(--fn-gradient); color: #fff; font-size: 22px;
  box-shadow: 0 4px 12px rgba(255, 159, 33, .4); cursor: pointer; transition: transform .12s ease, opacity .15s ease;
}
.fn-fab:active { transform: scale(.96); }
.fn-fab:disabled { background: var(--fn-disabled-bg); color: var(--fn-disabled-text); box-shadow: none; cursor: not-allowed; }

/* Icons (Ant Design glyphs and the app's SVG files) render at 1em, inline, in currentColor. */
.fn-i { display: inline-flex; width: 1em; height: 1em; line-height: 1; vertical-align: -.125em; }
.fn-i svg { width: 1em; height: 1em; fill: currentColor; }

/* ---------- situation / follow-up ---------- */
.fn-head { min-height: 80px; }
.fn-q { margin: 0; text-align: left; font-size: 18px; line-height: 28px; font-weight: 700; color: var(--fn-ink); }
@media (min-width: 768px) { .fn-q { font-size: 20px; } }
.fn-q-sub { margin: 8px 0 0; text-align: left; font-size: 12px; line-height: 16px; font-style: italic; color: var(--fn-muted); }
.fn-options { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.fn-options--tall { min-height: 12rem; }
.fn-fade { animation: fn-fade-in var(--dur, 450ms) var(--ease, ease-out) var(--d, 0ms) both; }
@keyframes fn-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.fn-cta-row { margin-top: 32px; }

/* Option tile (.funnel-option-btn): white at rest, brand gradient when chosen */
.fn-option {
  display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 48px; padding: 14px;
  border: 1px solid var(--fn-orange); border-radius: 10px; background: #fff; color: var(--fn-ink);
  font-size: 14px; line-height: 1.35; text-align: left; white-space: normal; cursor: pointer;
  box-shadow: 0 2px 8px rgba(17, 24, 39, .07), 0 1px 2px rgba(17, 24, 39, .05);
  transition: box-shadow .15s ease, transform .1s ease, background-color .2s, color .2s;
}
.fn-option--plain { padding: 10px; }
.fn-option:not([aria-pressed="true"]):hover { box-shadow: 0 8px 18px rgba(255, 159, 33, .22), 0 2px 6px rgba(17, 24, 39, .06); transform: translateY(-1px); }
.fn-option:active { transform: scale(.99); }
.fn-option:focus-visible { outline: none; box-shadow: 0 0 0 2px #e67e0a; }
.fn-option[aria-pressed="true"] { background: var(--fn-gradient); border-color: var(--fn-orange-600); color: #FDFDFD; box-shadow: 0 6px 20px rgba(255, 159, 33, .45); }
.fn-option__row { display: flex; width: 100%; align-items: center; gap: 12px; }
.fn-option__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 11px;
  font-size: 23px; background: var(--fn-gradient); color: #fff;
}
.fn-option[aria-pressed="true"] .fn-option__icon { background: #fff; color: var(--fn-orange-600); }
.fn-option__icon svg { width: 1em; height: 1em; }
.fn-option__text { display: flex; min-width: 0; flex-direction: column; }
.fn-option__label { font-size: 15px; font-weight: 600; line-height: 1.375; }
.fn-option__sub { margin-top: 4px; font-size: 12px; line-height: 1.375; color: #8a8175; }
.fn-option[aria-pressed="true"] .fn-option__sub { color: rgba(255, 255, 255, .85); }

/* ---------- buttons and bars ---------- */
.fn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 48px;
  border: 1px solid var(--fn-orange-600); border-radius: 12px; background: var(--fn-gradient); color: #fff;
  font-size: 16px; font-weight: 600; line-height: 1.5; white-space: nowrap; cursor: pointer;
  box-shadow: var(--fn-btn-glow); transition: transform .1s ease;
}
.fn-btn:active:not(:disabled) { transform: scale(.98); }
.fn-btn:disabled { background: var(--fn-disabled-bg); border-color: var(--fn-disabled-bg); color: var(--fn-disabled-text); box-shadow: none; cursor: not-allowed; }
.fn-btn--block { display: flex; width: 100%; height: 52px; padding: 0 15px; border-radius: 10px; }
.fn-btn--sm { padding: 0 32px; }
.fn-btn__spin { animation: fn-rot 1s linear infinite; }
.fn-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 24px 24px 20px;
  background: linear-gradient(to top, rgba(var(--fn-fade, 255, 255, 255), 1) 55%, rgba(var(--fn-fade, 255, 255, 255), 0));
}
.fn-bar--sticky { position: sticky; margin: 28px -24px 0; }
.fn-bar__in { margin: 0 auto; display: flex; max-width: 580px; justify-content: center; }
.fn-link { padding: 0; border: 0; background: none; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--fn-orange-600); cursor: pointer; }

/* ---------- loading, errors ---------- */
.fn-spinwrap { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.fn-spin { position: relative; display: block; width: 32px; height: 32px; animation: fn-rot 1.2s linear infinite; }
.fn-spin i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--fn-orange-600); opacity: .3; animation: fn-pulse 1s linear infinite alternate; }
.fn-spin i:nth-child(1) { top: 0; left: 0; }
.fn-spin i:nth-child(2) { top: 0; right: 0; animation-delay: .4s; }
.fn-spin i:nth-child(3) { bottom: 0; right: 0; animation-delay: .8s; }
.fn-spin i:nth-child(4) { bottom: 0; left: 0; animation-delay: 1.2s; }
@keyframes fn-rot { to { transform: rotate(360deg); } }
@keyframes fn-pulse { to { opacity: 1; } }
.fn-loading { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: 0 24px 160px; }
.fn-loading .fn-logo { height: 42px; margin: 0 0 16px; }
.fn-loading__text {
  margin: 0; max-width: 384px; text-align: center; font-size: 20px; line-height: 1.625; font-weight: 600; color: #000;
  transition: opacity .5s ease, transform .5s ease;
}
.fn-loading__text.is-out { opacity: 0; transform: translateY(6px); }
.fn-orbit { position: relative; width: 80px; height: 80px; --center: #FFD07A; --dot: #F5A623; }
.fn-orbit--blue { --center: #7A9BCC; --dot: #003881; }
.fn-orbit__center { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; border-radius: 50%; background: var(--center); transform: translate(-50%, -50%); }
.fn-orbit__dot { position: absolute; top: 0; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--dot); transform: translateX(-50%); transform-origin: 50% 40px; animation: fn-orbit 1.4s linear infinite; }
@keyframes fn-orbit { to { transform: translateX(-50%) rotate(360deg); } }
.fn-error { width: 100%; max-width: 448px; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.fn-error h2 { margin: 0; font-size: 18px; line-height: 28px; font-weight: 700; color: #000; }
.fn-error p { margin: 0; font-size: 14px; line-height: 20px; color: rgba(0, 0, 0, .7); }
.fn-error .fn-btn { margin-top: 16px; }

/* ---------- strategy (value screen) ---------- */
.fn-h1 { margin: 0; text-align: center; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--fn-deep-blue); }
.fn-anchor { padding: 10px; border: 1px solid var(--fn-deep-blue); border-radius: 10px; background: var(--fn-anchor-cool); font-size: 12px; line-height: 16px; color: var(--fn-muted); }
.fn-card { padding: 10px; border-radius: 10px; background: #fff; box-shadow: var(--fn-card); }
.fn-card--xs { font-size: 12px; line-height: 16px; color: var(--fn-ink); }
.fn-card--xs p { margin: 0; }
.fn-card--xs p + p { margin-top: 4px; }
.fn-card--xs p.b { font-weight: 700; }
.fn-card__h { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: #000; }
.fn-card__h--lg { font-size: 16px; line-height: 24px; }
.fn-card__p { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--fn-muted); }
.fn-card__p--i { margin-top: 8px; font-style: italic; }
.fn-card__p--mt { margin-top: 12px; font-style: italic; }
.fn-insight { padding: 20px 16px; border-radius: 10px; background: #fff; box-shadow: var(--fn-card-strong); }
.fn-row { display: flex; align-items: flex-start; gap: 12px; }
.fn-row + .fn-row { margin-top: 20px; }
.fn-row__icon { display: flex; flex: none; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 12px; font-size: 20px; }
.fn-row__body { flex: 1; }
.fn-row__label { margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; color: var(--fn-deep-blue); }
.fn-row__text { margin: 4px 0 0; white-space: pre-line; font-size: 14px; line-height: 20px; color: var(--fn-ink); }
.fn-emojis { margin-top: 12px; display: flex; gap: 20px; }
.fn-emoji { display: flex; width: 80px; flex-direction: column; align-items: center; gap: 8px; }
.fn-emoji img { width: 48px; height: 48px; }
.fn-emoji .q { font-size: 30px; line-height: 1; }
.fn-emoji p { margin: 0; text-align: center; font-size: 10px; line-height: 1.25; color: #000; }
.fn-resource { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; text-align: center; }
.fn-resource__thumb { position: relative; margin: 0 auto; width: 132px; max-width: 100%; }
.fn-resource__thumb img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.fn-resource__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.fn-resource__play img { width: 36px; height: 36px; border-radius: 0; box-shadow: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .1)) drop-shadow(0 1px 1px rgba(0, 0, 0, .06)); }
.fn-resource__fallback { display: block; margin: 0 auto; }
.fn-resource__kind { margin: 0; font-size: 10px; line-height: 1.3; color: var(--fn-muted); }
.fn-tag { display: inline-block; padding: 4px 10px; border-radius: 6px; background: var(--fn-pdf-bg); font-size: 10px; line-height: 1.3; color: var(--fn-pdf-text); }
.fn-resource__name { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--fn-ink); }
.fn-skel {
  display: inline-block; background-color: #ebebeb; border-radius: 4px; line-height: 1;
  background-image: linear-gradient(90deg, #ebebeb, #f5f5f5, #ebebeb); background-size: 200px 100%; background-repeat: no-repeat;
  animation: fn-shimmer 1.5s ease-in-out infinite;
}
@keyframes fn-shimmer { from { background-position: -200px 0; } to { background-position: calc(200px + 100%) 0; } }

/* Inline email capture */
.fn-email { display: flex; flex-direction: column; gap: 12px; animation: fn-email-reveal 550ms cubic-bezier(.22, .61, .36, 1) both; }
@keyframes fn-email-reveal { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.fn-email__h { margin: 0; text-align: center; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--fn-ink); }
.fn-email__card { padding: 20px; border-radius: 10px; background: #fff; box-shadow: var(--fn-card-strong); }
.fn-email__opts { display: flex; flex-direction: column; gap: 20px; }
.fn-choice {
  display: flex; width: 100%; height: 56px; align-items: center; justify-content: center; gap: 12px; padding: 0 15px;
  border: 1.5px solid var(--fn-orange); border-radius: 16px; background: #fff; font-size: 16px; font-weight: 500; color: var(--fn-ink);
  cursor: pointer; transition: color .2s, border-color .2s;
}
.fn-choice:hover, .fn-choice:focus-visible, .fn-choice:active { outline: none; border-color: var(--fn-deep-blue); color: var(--fn-deep-blue); }
.fn-choice:disabled { opacity: .65; cursor: default; }
.fn-choice img { width: 20px; height: 20px; }
.fn-choice .fn-i { color: var(--fn-orange); font-size: 16px; }
.fn-or { text-align: center; font-size: 12px; line-height: 16px; color: rgba(0, 0, 0, .4); }
.fn-msg { margin: 0; font-size: 12px; line-height: 16px; }
.fn-msg--error { color: #ef4444; }
.fn-msg--soft { color: rgba(0, 0, 0, .5); }
.fn-msg--warn { color: #d97706; }
.fn-msg--center { margin-top: -12px; text-align: center; }
.fn-email__form { display: flex; flex-direction: column; gap: 16px; }
.fn-email__title { margin: 0; text-align: center; font-size: 18px; line-height: 28px; font-weight: 700; color: #000; }
.fn-email__field { position: relative; width: 100%; }
.fn-email__check { position: absolute; right: 17px; top: 50%; transform: translateY(-50%); pointer-events: none; display: inline-flex; font-size: 14px; line-height: 1; color: #22c55e; }
.fn-email__registered { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fn-email__actions { margin-top: 8px; display: flex; justify-content: center; }
.fn-email__thanks { display: flex; flex-direction: column; gap: 16px; text-align: center; }
.fn-email__thanks p { margin: 0; font-size: 12px; line-height: 16px; color: rgba(0, 0, 0, .7); }
.fn-email__thanks p.soft { color: rgba(0, 0, 0, .6); line-height: 1.625; }
.fn-email__thanks .fn-email__actions { margin-top: 0; }

/* ---------- plan recap ---------- */
.fn-h3 { margin: 0 0 8px; font-size: 16px; line-height: 24px; font-weight: 700; color: #000; }
.fn-h3--12 { margin-bottom: 12px; }
.fn-learnt { padding: 10px; border-radius: 10px; background: #fff; box-shadow: var(--fn-card); font-size: 12px; line-height: 16px; color: var(--fn-muted); }
.fn-learnt p { margin: 0; font-weight: 700; color: #000; }
.fn-learnt ul { margin: 8px 0 0; padding-left: 20px; list-style: disc; }
.fn-learnt li { font-weight: 700; }
.fn-learnt li + li { margin-top: 4px; }
.fn-car__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fn-car__head .fn-h3 { margin: 0; }
.fn-car__nav { display: none; gap: 8px; }
@media (min-width: 768px) { .fn-car__nav { display: flex; } }
.fn-arrow {
  width: 46px; height: 46px; border-radius: 13px; border: 1px solid #EFEFEF; background: #fff; color: #222; cursor: pointer;
  display: grid; place-items: center; transition: border-color .14s, box-shadow .14s, transform .1s, color .14s;
}
.fn-arrow:hover { border-color: #FF9F21; color: #D17707; box-shadow: 0 4px 12px rgba(246, 149, 21, .16); }
.fn-arrow:active { transform: scale(.94); }
.fn-arrow:disabled { opacity: .36; cursor: default; box-shadow: none; border-color: #EFEFEF; color: #222; }
.fn-arrow--sm { width: 34px; height: 34px; border-radius: 10px; }
.fn-arrow svg { width: 16px; height: 16px; }
.fn-car__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fn-car__track::-webkit-scrollbar { display: none; }
.fn-car__slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; padding: 0 4px; }
.fn-skill { display: flex; width: 100%; align-items: stretch; padding: 10px; border: 1px solid var(--fn-skill-border); border-radius: 10px; background: var(--fn-skill-bg); box-shadow: var(--fn-card-lg); }
.fn-skill__in { display: flex; width: 100%; align-items: center; padding: 10px; border-radius: 10px; background: #fff; font-size: 12px; line-height: 16px; color: var(--fn-muted); }
.fn-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }
.fn-dots button { display: block; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #c4c4c4; cursor: pointer; }
.fn-dots button.is-active { background: #2d71c8; }
.fn-now { display: flex; flex-direction: column; gap: 10px; }
.fn-now__item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; background: #fff; box-shadow: var(--fn-card); }
.fn-now__item img { width: 24px; height: 24px; flex: none; }
.fn-now__item p { margin: 0; font-size: 12px; line-height: 16px; color: var(--fn-muted); }

/* ---------- paywall ---------- */
.fn-pw-h2 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--fn-ink); }
@media (min-width: 768px) { .fn-pw-h2 { font-size: 30px; } }
.fn-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; }
.fn-checks li { display: flex; align-items: flex-start; gap: 12px; }
.fn-checks .tick { margin-top: 1px; flex: none; font-size: 16px; line-height: 1; font-weight: 700; color: var(--fn-orange); }
.fn-checks .t { font-size: 12px; line-height: 16px; font-weight: 700; color: #4b5563; }
@media (min-width: 768px) { .fn-checks .t { font-size: 14px; line-height: 20px; } }
.fn-rating { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 640px) { .fn-rating { flex-direction: row; gap: 16px; } }
.fn-rating__card { flex: 1; display: flex; align-items: stretch; gap: 16px; padding: 16px; border-radius: 10px; background: #fff; box-shadow: var(--fn-card); }
.fn-score { display: flex; flex: none; flex-direction: column; align-items: flex-start; }
.fn-score b { font-size: 30px; line-height: 1; font-weight: 700; color: var(--fn-ink); }
.fn-score strong { margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--fn-ink); }
.fn-score .fn-stars { margin-top: 4px; }
.fn-score small { margin-top: 4px; font-size: 10px; line-height: 1.3; color: var(--fn-muted); }
.fn-bars { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 10px; }
.fn-bars div { display: flex; align-items: center; gap: 8px; font-size: 10px; line-height: 1.3; color: var(--fn-muted); }
.fn-bars span { width: 40px; flex: none; }
.fn-bars i { display: block; height: 8px; flex: 1; overflow: hidden; border-radius: 9999px; background: #EFEFEF; }
.fn-bars i::after { content: ""; display: block; height: 100%; width: var(--pct); border-radius: 9999px; background: var(--c); }
.fn-review { flex: 1; padding: 8px; border-radius: 10px; background: #fff; box-shadow: var(--fn-card); }
.fn-review__head { display: flex; align-items: flex-start; gap: 12px; }
.fn-review__av { display: flex; width: 24px; height: 24px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: #F4D9C8; font-size: 10px; line-height: 1.3; font-weight: 700; color: var(--fn-ink); }
.fn-review__who { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.fn-review__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 1.3; font-weight: 700; color: var(--fn-ink); }
.fn-review__who span { font-size: 10px; line-height: 1.3; color: var(--fn-muted); }
.fn-review__date { font-size: 10px; line-height: 1.3; color: var(--fn-muted); white-space: nowrap; }
.fn-review .fn-stars { margin-top: 8px; }
.fn-review__title { margin: 8px 0 0; font-size: 10px; line-height: 1.3; color: var(--fn-ink); }
.fn-review__text { margin: 4px 0 0; font-size: 9px; line-height: 1.375; color: var(--fn-muted); }
.fn-review__tags { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 10px; line-height: 1.3; }
.fn-review__tags span { padding: 2px 8px; border-radius: 4px; background: #F0F0F0; color: #444; }
.fn-stars { display: inline-flex; gap: 2px; }
.fn-stars span { display: inline-flex; align-items: center; justify-content: center; width: var(--s); height: var(--s); font-size: calc(var(--s) * .7); line-height: 1; color: #fff; background: #DCDCDC; }
.fn-stars span.on { background: var(--c); }
.fn-stars span.part { background: linear-gradient(to right, var(--c) var(--p), #DCDCDC var(--p)); }
.fn-tagline { margin: 0; text-align: center; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--fn-deep-blue); }
.fn-plans { display: flex; flex-direction: column; gap: 12px; }
.fn-plan {
  position: relative; display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 16px;
  border: 1px solid var(--fn-plan-blue); border-radius: 10px; background: #fff; color: var(--fn-deep-blue); text-align: left; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.fn-plan[aria-checked="true"] { background: #E8F1FB; border-width: 2px; }
.fn-plan__badge { position: absolute; top: -12px; right: 16px; padding: 3px 10px; border-radius: 6px; background: var(--fn-orange); color: #fff; font-size: 10px; line-height: 1.5; font-weight: 700; letter-spacing: .5px; }
.fn-plan__name { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 24px; font-weight: 700; }
.fn-plan__radio { display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; border: 2px solid var(--fn-plan-blue); border-radius: 50%; }
.fn-plan[aria-checked="true"] .fn-plan__radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--fn-plan-blue); }
.fn-plan__price { font-size: 18px; line-height: 28px; font-weight: 700; }
.fn-fine { margin: 0; font-size: 12px; line-height: 16px; font-style: italic; color: var(--fn-deep-blue); }
.fn-truemed-widget { margin: 12px 0; font-size: 14px; }
.fn-feature { overflow: hidden; border: 2px solid var(--fn-orange); border-radius: 10px; }
.fn-feature__in { display: flex; flex-direction: column; background: #fff; }
.fn-feature__txt { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 20px; }
.fn-feature__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (min-width: 768px) {
  .fn-feature__in { flex-direction: row; }
  .fn-feature__txt { width: 40%; }
  .fn-feature__img { width: 60%; }
}
.fn-feature__h { margin: 0; font-size: 14px; line-height: 1.375; font-weight: 700; color: var(--fn-deep-blue); }
@media (min-width: 768px) { .fn-feature__h { font-size: 16px; } }
.fn-feature__p { margin: 0; font-size: 12px; line-height: 1.625; color: var(--fn-muted); }
.fn-community { overflow: hidden; border: 2px solid var(--fn-orange); border-radius: 10px; background: #FDF8F0; }
.fn-community__in { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.fn-community__txt { display: flex; flex-direction: column; gap: 4px; }
.fn-community__txt .fn-feature__p { line-height: 16px; }
.fn-community__imgs { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 640px) { .fn-community__imgs { flex-direction: row; } }
.fn-community__imgs > div { flex: 1; overflow: hidden; border-radius: 8px; }
.fn-community__imgs img { display: block; width: 100%; }
.fn-imgcard { overflow: hidden; border-radius: 10px; }
.fn-imgcard img { display: block; width: 100%; }

/* Course carousel: the app's CourseCarousel styles, verbatim */
.a360cr{
  --orange:#FF9F21; --orange-600:#F69515; --orange-700:#D17707; --mango:#FFC52A;
  --cream:#FFF1DE; --cream-soft:#FFFAF3;
  --ink:#222; --mute:#5A5A5A; --faint:#6E6E6E; --line:#EFEFEF; --line-2:#F6F6F6;
  --indigo:#384087; --blue:#2D71C8; --accent:#2D71C8; --accent-ink:#1F4E82;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased;
  box-sizing:border-box; padding:24px 0 32px;
}
.a360cr-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin:0 0 20px; padding:0; }
.a360cr-head-l{ min-width:0; }
.a360cr-title{ font-size:clamp(18px,2vw,22px); font-weight:700; letter-spacing:-0.02em; line-height:1.1; margin:0; color:var(--ink); text-wrap:balance; }
.a360cr-sub{ font-size:13px; color:var(--mute); margin:6px 0 0; line-height:1.5; max-width:50ch; }
.a360cr-nav{ display:inline-flex; gap:9px; flex:0 0 auto; }
.a360cr-arrow{ width:46px; height:46px; border-radius:13px; border:1px solid var(--line); background:#fff;
  color:var(--ink); cursor:pointer; display:grid; place-items:center; transition:border-color .14s, box-shadow .14s, transform .1s, background .14s, color .14s, opacity .14s; }
.a360cr-arrow:hover{ border-color:var(--orange); color:var(--orange-700); box-shadow:0 4px 12px rgba(246,149,21,.16); }
.a360cr-arrow:active{ transform:scale(.94); }
.a360cr-arrow:disabled{ opacity:.36; cursor:default; box-shadow:none; border-color:var(--line); color:var(--ink); }
.a360cr-arrow svg{ width:20px; height:20px; }
.a360cr-viewport{ position:relative; }
.a360cr-track{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 4px 18px; position:relative;
  scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
.a360cr-track::-webkit-scrollbar{ display:none; }
.a360cr.is-drag .a360cr-track{ scroll-behavior:auto; cursor:grabbing; scroll-snap-type:none; }
.a360cr.is-drag .a360cr-card{ pointer-events:none; }
.a360cr-card{ scroll-snap-align:start; flex:0 0 260px; width:260px; display:flex; flex-direction:column;
  background:#fff;
  background-image:radial-gradient(125% 105% at 100% 100%, rgba(var(--tinge,246,149,21),.20) 0%, rgba(var(--tinge,246,149,21),.06) 30%, rgba(255,255,255,0) 60%);
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  color:inherit; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.a360cr-media{ position:relative; aspect-ratio:16/9; background:var(--cream); overflow:hidden; }
.a360cr-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.a360cr-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 60%,rgba(0,0,0,.18) 100%); }
.a360cr-ribbon{ position:absolute; top:12px; left:12px; z-index:2; display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; letter-spacing:.02em; padding:6px 11px; border-radius:999px; white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.14); }
.a360cr-ribbon--new{ background:#FF9F21; color:#fff; }
.a360cr-ribbon--popular{ background:#384087; color:#fff; }
.a360cr-ribbon--feature{ background:rgba(255,255,255,.95); color:#222; border:1px solid #EFEFEF; }
.a360cr-ribbon svg{ width:11px; height:11px; flex:0 0 auto; }
.a360cr-dur{ position:absolute; bottom:12px; right:12px; z-index:2; display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:600; color:#fff; background:rgba(20,16,10,.62); backdrop-filter:blur(4px);
  padding:5px 10px; border-radius:999px; white-space:nowrap; }
.a360cr-dur svg{ width:12px; height:12px; flex:0 0 auto; }
.a360cr-body{ padding:16px 17px 18px; display:flex; flex-direction:column; gap:9px; flex:1; }
.a360cr-top{ display:flex; align-items:center; gap:9px; }
.a360cr-cat{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--accent-ink); }
.a360cr-cat-dot{ width:7px; height:7px; border-radius:50%; background:rgb(var(--tinge)); flex:0 0 auto; }
.a360cr-level{ margin-left:auto; font-size:11px; font-weight:600; color:var(--faint); background:var(--line-2); padding:3px 9px; border-radius:999px; }
.a360cr-name{ font-size:16.5px; font-weight:700; letter-spacing:-0.01em; line-height:1.25; margin:0; color:var(--ink); text-wrap:pretty; }
.a360cr-instrow{ display:flex; align-items:center; justify-content:space-between; gap:7px 12px; flex-wrap:wrap; }
.a360cr-inst{ display:flex; align-items:center; gap:9px; min-width:0; }
.a360cr-inst-av{ width:28px; height:28px; border-radius:50%; overflow:hidden; flex:0 0 auto; background:var(--cream); border:1px solid var(--line); }
.a360cr-inst-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.a360cr-inst-name{ font-size:13px; font-weight:500; color:var(--mute); }
.a360cr-rating{ display:inline-flex; align-items:center; gap:7px; }
.a360cr-stars{ display:inline-flex; }
.a360cr-stars svg{ width:14px; height:14px; color:var(--orange); }
.a360cr-rating .val{ font-size:13px; font-weight:700; color:var(--ink); }
.a360cr-rating .rev{ font-size:12.5px; color:var(--faint); }
.a360cr-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--faint); margin-top:1px; }
.a360cr-meta span{ display:inline-flex; align-items:center; gap:5px; }
.a360cr-meta svg{ width:14px; height:14px; color:var(--mute); }
.a360cr-viewport::before, .a360cr-viewport::after{ content:""; position:absolute; top:0; bottom:18px; width:34px; z-index:3; pointer-events:none; opacity:0; transition:opacity .2s; }
.a360cr-viewport::before{ left:0; background:linear-gradient(90deg,#FBFBFB,rgba(251,251,251,0)); }
.a360cr-viewport::after{ right:0; background:linear-gradient(270deg,#FBFBFB,rgba(251,251,251,0)); }
.a360cr-viewport.show-l::before{ opacity:1; }
.a360cr-viewport.show-r::after{ opacity:1; }
.a360cr-dots{ display:flex; justify-content:center; gap:9px; margin:16px 0 0; }
.a360cr-dot{ width:9px; height:9px; padding:0; border:0; border-radius:50%; background:#D2D2D9; cursor:pointer; -webkit-appearance:none; appearance:none; transition:background .18s ease, transform .18s ease; }
.a360cr-dot:hover{ background:#B6B6BF; }
.a360cr-dot.is-active{ background:var(--accent); transform:scale(1.15); }
@media (max-width:820px){ .a360cr-card{ flex-basis:240px; width:240px; } }
@media (max-width:560px){
  .a360cr{ padding:20px 0 26px; }
  .a360cr-head{ align-items:flex-start; }
  .a360cr-title{ font-size:17px; }
  .a360cr-sub{ font-size:12.5px; }
  .a360cr-nav{ display:none; }
  .a360cr-track{ padding-left:16px; padding-right:16px; gap:12px; scroll-padding-left:16px; }
  .a360cr-card{ flex-basis:72%; width:72%; max-width:260px; }
  .a360cr-dots{ margin-top:12px; }
  .a360cr-viewport::before, .a360cr-viewport::after{ display:none; }
}
@media (max-width:380px){ .a360cr-card{ flex-basis:80%; width:80%; } }

/* ---------- thank you ---------- */
.fn-thanks { margin: 0 auto; max-width: 1100px; text-align: center; animation: fn-fade-in 450ms ease-out; }
.fn-thanks .fn-logo { height: 36px; margin-bottom: 32px; }
.fn-thanks h1 { margin: 0; font-size: 30px; line-height: 1.25; font-weight: 700; color: var(--fn-deep-blue); }
.fn-thanks__sub { margin: 16px 0 0; font-size: 16px; line-height: 24px; color: var(--fn-ink); }
@media (min-width: 768px) {
  .fn-thanks h1 { font-size: 36px; }
  .fn-thanks__sub { font-size: 18px; line-height: 28px; }
}
.fn-truemed { margin: 24px auto 0; max-width: 520px; text-align: left; background: #FFF7ED; border-left: 4px solid var(--fn-orange); border-radius: 8px; padding: 12px 16px; }
.fn-truemed img { display: block; height: 35px; margin-bottom: 8px; }
.fn-truemed p { margin: 0; font-size: 14px; color: #06575F; }
.fn-truemed p + p { margin-top: 6px; color: #6b7280; }
.fn-truemed a { color: #06575F; font-weight: 600; text-decoration: none; }
.fn-truemed a.u { font-weight: 400; text-decoration: underline; }
.fn-thanks__cta { margin: 40px auto 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fn-thanks__count { margin: 0; font-size: 14px; line-height: 20px; color: var(--fn-muted); }
@media (min-width: 768px) { .fn-thanks__count { font-size: 16px; line-height: 24px; } }
.fn-thanks__count b { display: inline-flex; min-width: 1.25em; align-items: center; justify-content: center; font-weight: 700; color: var(--fn-orange); font-variant-numeric: tabular-nums; }
.fn-thanks__hint { margin: 0; font-size: 12px; line-height: 16px; font-style: italic; color: var(--fn-muted); }
.fn-confetti { position: fixed; inset: 0; z-index: 100; width: 100%; height: 100%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .fn-fade, .fn-email, .fn-thanks { animation: none; }
  .fn-select__menu { animation: none; }
}

/* =====================================================================================================================
   Onboarding skin (4 Nov 2026): /start follows the app's new onboarding designs (Figma "Autism360 App [MASTER]",
   Onboarding Changes / Registration deferred) and the App Brand Book: Poppins; a white page with a warm cream glow top right
   and a pale blue one on the left; the yellow star mark centred above a centred heading; light-grey fields that turn
   orange once picked; a cream selected row with an orange tick; the yellow-to-orange gradient on the one main button.
   Radius rule: fields and option rows 10-12px, cards 16px, buttons 12px, chips and the tick full round.
   Only this file, the star mark and a "has-value" class on dropdowns changed; words and data are the same.
   ===================================================================================================================== */
:root {
  --ob-desk: #F3F7FD; --ob-paper: #FFFFFF; --ob-cream: #FFF4E5; --ob-cream-2: #FFEBD0; --ob-cream-line: #F8DDB6;
  --ob-blue-tint: #E7F0FD;
  --ob-ink: #111821; --ob-ink-2: #41404F; --ob-ink-3: #7A7A88; --ob-placeholder: #9D9D9D;
  --ob-line: #E9E9EE; --ob-line-2: #DFDFDF;
  --ob-orange: #F2A23A; --ob-orange-ink: #E0820F; --ob-picked: #ECB04F;
  --ob-grad: linear-gradient(90deg, #F5C650 0%, #F0B046 45%, #E99A3B 100%);
  --ob-ease: cubic-bezier(.16, 1, .3, 1); --ob-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ob-row: 0 1px 2px rgba(17, 24, 33, .04), 0 4px 14px rgba(17, 24, 33, .05);
  --ob-cta-shadow: 0 6px 16px rgba(233, 154, 59, .28);
  --ob-col-l: max(0px, calc(50% - 240px));   /* left edge of the 480px column, for fixed pieces */
  --ob-head: 56px;

  --fn-orange: var(--ob-orange); --fn-orange-600: var(--ob-orange-ink); --fn-ink: var(--ob-ink); --fn-label: var(--ob-ink-2);
  --fn-muted: var(--ob-ink-2); --fn-gradient: var(--ob-grad);
  --fn-disabled-bg: #EDEDED; --fn-disabled-text: #A3A3A3;
  --fn-card: var(--ob-row); --fn-card-lg: var(--ob-row); --fn-card-strong: var(--ob-row); --fn-btn-glow: var(--ob-cta-shadow);
}

/* ---------- page shell: phone-width column with a warm glow at the top and the /ai quiz's blue aurora below ----------
   One aurora on every screen (Ash, 10 Nov 2026), in the /ai quiz's blues (quiz.css: the #F3F7FD wash, the #E4F1FF glow
   and a faint navy #384086 haze), so /start, /ai and /choose-plan share one blue and the hand-off doesn't jump. Ash
   chose these over the brand book's Blue tints. The desk around the column is the same wash, and the bottom bars fade
   into it (--fn-fade). */
body.fn { --fn-fade: 236, 243, 253; background: var(--ob-desk); color: var(--ob-ink); }
body.fn::before {
  content: ""; position: fixed; top: 0; bottom: 0; left: 50%; z-index: -1; width: min(480px, 100%); transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(70% 34% at 100% 0%, rgba(252, 238, 196, .62), rgba(252, 238, 196, 0) 70%),
    radial-gradient(62% 46% at 0% 42%, rgba(228, 241, 255, .95), rgba(228, 241, 255, 0) 72%),
    radial-gradient(54% 34% at 100% 66%, rgba(56, 64, 134, .07), rgba(56, 64, 134, 0) 72%),
    radial-gradient(100% 40% at 50% 100%, rgba(228, 241, 255, .9), rgba(228, 241, 255, 0) 72%),
    linear-gradient(180deg, #FFFFFF 0%, #F3F7FD 42%, #F3F7FD 100%);
  box-shadow: 0 0 0 1px rgba(17, 24, 33, .04), 0 24px 60px rgba(17, 24, 33, .08);
}
@media (max-width: 480px) { body.fn::before { box-shadow: none; } }
#fn-root { position: relative; max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; }

/* a light frosted strip at the top carries the back arrow and the progress line */
body.fn::after {
  content: ""; position: fixed; top: 0; left: var(--ob-col-l); right: var(--ob-col-l); z-index: 20; height: var(--ob-head);
  background: linear-gradient(to bottom, rgba(255, 255, 255, .88), rgba(243, 247, 253, .55));
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); pointer-events: none;
}
@media (prefers-reduced-transparency: reduce) { body.fn::after { background: var(--ob-paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* the star mark, centred above the heading (supplied artwork, not recoloured) */
.fn .fn-logo, .fn .fn-logo--42, .fn .fn-logo--32, .fn-loading .fn-logo, .fn-thanks .fn-logo {
  position: static; display: block; width: 46px; height: 46px; margin: 0 auto 18px; transform: none;
}
.fn .fn-logo--32 { width: 40px; height: 40px; margin-bottom: 16px; }

.fn-back {
  position: fixed; top: 9px; left: calc(var(--ob-col-l) + 8px); z-index: 21; display: grid; place-items: center;
  width: 38px; height: 38px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent;
  font-size: 0; color: transparent; text-decoration: none; cursor: pointer; transition: transform .25s var(--ob-ease), background-color .2s;
}
.fn-back::before {
  content: ""; width: 20px; height: 20px; background: var(--ob-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fn-back:hover { background: var(--ob-cream); }
.fn-back:active { transform: scale(.92); }
.fn-back:focus-visible { outline: 3px solid var(--ob-orange); outline-offset: 2px; }

/* progress: a thin warm track with the gradient fill and a small white knob, one value per step */
#fn-root { --ob-track-l: 20px; }
#fn-root:has(.fn-back) { --ob-track-l: 56px; }
#fn-root::before, #fn-root::after { content: ""; position: fixed; z-index: 21; left: calc(var(--ob-col-l) + var(--ob-track-l)); pointer-events: none; }
#fn-root::before { top: 26px; right: calc(var(--ob-col-l) + 20px); height: 4px; border-radius: 999px; background: #F1EADF; }
#fn-root::after {
  top: 21px; height: 14px;
  width: max(14px, calc((min(480px, 100%) - var(--ob-track-l) - 20px) * var(--fn-progress, 0)));
  background:
    radial-gradient(circle at calc(100% - 7px) 50%, #fff 0 3.5px, var(--ob-orange-ink) 4px 6.5px, rgba(242, 162, 58, 0) 7px),
    var(--ob-grad) left center / calc(100% - 7px) 4px no-repeat;
  border-radius: 999px; transition: width .7s var(--ob-ease);
}
#fn-root[data-screen="situation"] { --fn-progress: .08; }
#fn-root[data-screen="domain"] { --fn-progress: .22; }      /* area, focus, then the follow-up (decision 193) */
#fn-root[data-screen="subdomain"] { --fn-progress: .37; }
#fn-root[data-screen="follow-up"] { --fn-progress: .52; }
#fn-root[data-screen="compile"] { --fn-progress: .64; }
#fn-root[data-screen="strategy"] { --fn-progress: .76; }
#fn-root[data-screen="plan"] { --fn-progress: .84; }
#fn-root[data-screen="summary"] { --fn-progress: .92; }
#fn-root[data-screen="paywall"] { --fn-progress: 1; }
#fn-root[data-screen="thank-you"]::before, #fn-root[data-screen="thank-you"]::after { display: none; }

/* ---------- frames and type: centred headings, as the designs ---------- */
.fn-page { padding: calc(var(--ob-head) + 18px) 20px 40px; }
.fn-page--options { padding-bottom: 112px; }
.fn-page--value { padding-bottom: 24px; }
.fn-page--plan, .fn-page--paywall { padding-bottom: 112px; }
.fn-page--center, .fn-page--thanks { padding-top: calc(var(--ob-head) + 18px); }
.fn-wrap, .fn-stack { max-width: none; }
.fn-col { width: 100%; }
.fn-stack { gap: 18px; }
.fn-head { min-height: 0; }
.fn-title, .fn-q, .fn-h1, .fn-h3, .fn-email__title, .fn-loading__text, .fn-error h2, .fn-thanks h1 { color: var(--ob-ink); font-weight: 600; }
.fn-title { margin: 0 0 10px; text-align: center; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.fn-lead, .fn-lead--soft { margin: 0 auto; max-width: 34ch; text-align: center; font-size: 15px; line-height: 1.6; color: var(--ob-ink-2); }
.fn-orange { color: var(--ob-orange-ink); }
.fn-q, .fn-h1 { margin: 0; text-align: center; font-size: 21px; line-height: 1.35; letter-spacing: -.005em; text-wrap: balance; }
.fn-q-sub { margin: 8px auto 0; max-width: 36ch; text-align: center; font-style: normal; font-size: 14.5px; line-height: 1.6; color: var(--ob-ink-2); }
.fn-h3 { font-size: 17px; line-height: 1.35; }

/* ---------- fields: light grey line, orange once picked ---------- */
.fn-form, .fn-form--child { width: 100%; margin: 28px 0 0; }
.fn-field { gap: 8px; margin-bottom: 20px; }
.fn-field__label, .fn-field__label--soft { font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--ob-ink); }
.fn-field__hint { margin: 0; font-style: normal; font-size: 12.5px; line-height: 1.45; color: var(--ob-ink-3); }
.fn-field__reaction { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ob-orange-ink); }
.fn-input, .fn-select__btn {
  height: 50px; padding: 0 16px; border: 1px solid var(--ob-line-2); border-radius: 10px; background: #fff; box-shadow: none;
  font-size: 16px; font-weight: 500; color: var(--ob-ink); transition: border-color .2s, box-shadow .2s;
}
.fn-select__btn { line-height: 48px; }
.fn-select__value { color: var(--ob-placeholder); font-weight: 400; }
.fn-select.has-value .fn-select__value { color: var(--ob-ink); font-weight: 600; }
.fn-select.has-value .fn-select__btn { border-color: var(--ob-picked); }
.fn-select.has-value .fn-select__arrow { color: var(--ob-orange-ink); }
.fn-input::placeholder { font-style: normal; font-size: 16px; font-weight: 400; color: var(--ob-placeholder); }
.fn-input:focus, .fn-select__btn:hover, .fn-select__btn:focus-visible, .fn-select.is-open .fn-select__btn {
  outline: none; border-color: var(--ob-orange); box-shadow: 0 0 0 4px rgba(242, 162, 58, .16);
}
.fn-select__arrow { color: var(--ob-ink-3); transition: transform .25s var(--ob-ease); }
.fn-select.is-open .fn-select__arrow { transform: rotate(180deg); }
.fn-select__menu { padding: 6px 0; border: 1px solid var(--ob-line); border-radius: 12px; background: #fff; box-shadow: 0 14px 32px rgba(17, 24, 33, .12); }
.fn-select__opt { display: flex; align-items: center; min-height: 42px; padding: 9px 16px; border-radius: 0; font-size: 15px; color: var(--ob-ink); }
.fn-select__opt:hover, .fn-select__opt.is-active { background: #FFFAF2; }
.fn-select__opt[aria-selected="true"] { background: var(--ob-cream); color: var(--ob-ink); font-weight: 600; }
.fn-select__opt[aria-selected="true"]::after {
  content: ""; flex: none; width: 18px; height: 18px; margin-left: auto; background: var(--ob-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- option rows: white, picked = cream with an orange edge and tick ---------- */
.fn-options { margin-top: 24px; gap: 10px; }
.fn-option {
  min-height: 56px; padding: 14px; border: 1px solid var(--ob-line-2); border-radius: 12px; background: #fff; color: var(--ob-ink);
  font-size: 15px; font-weight: 600; box-shadow: var(--ob-row);
  transition: transform .25s var(--ob-ease), border-color .25s, background-color .25s, box-shadow .25s;
}
.fn-option--plain { padding: 14px; }
.fn-option:not([aria-pressed="true"]):hover { border-color: var(--ob-picked); box-shadow: 0 6px 16px rgba(233, 154, 59, .12); transform: translateY(-1px); }
.fn-option:active { transform: scale(.985); }
.fn-option:focus-visible { outline: 3px solid var(--ob-orange); outline-offset: 3px; }
.fn-option[aria-pressed="true"] {
  background: var(--ob-cream); color: var(--ob-ink); border-color: var(--ob-picked);
  box-shadow: 0 0 0 3px rgba(242, 162, 58, .14), 0 6px 16px rgba(233, 154, 59, .1);
}
.fn-option::after {
  content: ""; flex: none; width: 24px; height: 24px; margin-left: auto; border: 1.5px solid var(--ob-line-2); border-radius: 50%;
  background: #fff; transition: background-color .3s var(--ob-spring), border-color .3s, transform .3s var(--ob-spring);
}
.fn-option[aria-pressed="true"]::after {
  border-color: transparent; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat, var(--ob-grad); transform: scale(1.04);
}
.fn-option__row { flex: 1; width: auto; min-width: 0; gap: 12px; margin-right: 12px; }
.fn-option__icon { width: 42px; height: 42px; border-radius: 50%; font-size: 22px; background: var(--ob-cream); color: var(--ob-orange-ink); transition: background-color .25s, color .25s; }
.fn-option[aria-pressed="true"] .fn-option__icon { background: var(--ob-grad); color: #fff; }
.fn-option__label { font-size: 15px; font-weight: 600; color: var(--ob-ink); }
.fn-option__sub { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--ob-ink-3); }
.fn-option[aria-pressed="true"] .fn-option__sub { color: var(--ob-ink-2); }
.fn-option--plain { padding-right: 14px; }
.fn-option--plain::before { content: none; }

/* ---------- buttons: the yellow-to-orange gradient marks the one main action ---------- */
.fn-btn {
  min-height: 52px; height: auto; padding: 14px 20px; border: 0; border-radius: 12px; background: var(--ob-grad); color: #fff;
  font-size: 16px; font-weight: 600; box-shadow: var(--ob-cta-shadow); transition: transform .25s var(--ob-ease), filter .2s, box-shadow .25s;
}
.fn-btn--block, .fn-bar .fn-btn, .fn-cta-row .fn-btn { display: flex; width: 100%; }
.fn-btn:hover:not(:disabled) { filter: brightness(1.03) saturate(1.05); box-shadow: 0 8px 20px rgba(233, 154, 59, .34); }
.fn-btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.fn-btn:focus-visible { outline: 3px solid var(--ob-ink); outline-offset: 3px; }
.fn-btn:disabled { background: #EDEDED; color: #A3A3A3; box-shadow: none; filter: none; }
.fn-fab {
  left: calc(var(--ob-col-l) + 20px); right: calc(var(--ob-col-l) + 20px); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 22; width: auto; height: 52px; gap: 10px; border-radius: 12px; background: var(--ob-grad); color: #fff; font-size: 20px;
  box-shadow: var(--ob-cta-shadow); transition: transform .25s var(--ob-ease), filter .2s;
}
.fn-fab::before { content: attr(aria-label); font-size: 16px; font-weight: 600; }   /* the button's own label, "Continue", as the designs show */
.fn-fab .fn-i { transition: transform .35s var(--ob-ease); }
.fn-fab:hover:not(:disabled) { filter: brightness(1.03) saturate(1.05); }
.fn-fab:hover:not(:disabled) .fn-i { transform: translateX(4px); }
.fn-fab:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.fn-fab:focus-visible { outline: 3px solid var(--ob-ink); outline-offset: 3px; }
.fn-fab:disabled { background: #EDEDED; color: #A3A3A3; box-shadow: none; }
#fn-root:has(> .fn-fab:not([hidden])) > .fn-page::after {
  content: ""; position: fixed; left: var(--ob-col-l); right: var(--ob-col-l); bottom: 0; z-index: 19; height: 104px; pointer-events: none;
  background: linear-gradient(to top, rgba(var(--fn-fade, 255, 255, 255), .96) 55%, rgba(var(--fn-fade, 255, 255, 255), 0));
}
.fn-bar { z-index: 22; padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, rgba(var(--fn-fade, 255, 255, 255), .96) 55%, rgba(var(--fn-fade, 255, 255, 255), 0)); }
.fn-bar:not(.fn-bar--sticky) { left: var(--ob-col-l); right: var(--ob-col-l); }
.fn-bar--sticky { margin: 22px -20px 0; }
.fn-bar__in { max-width: none; }
.fn-cta-row { margin-top: 22px; }
.fn-link { font-size: 13px; font-weight: 600; color: var(--ob-orange-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- cards: white, faint line, 16px; pastel tints for the plan blocks ---------- */
.fn-card, .fn-insight, .fn-learnt, .fn-now__item, .fn-email__card {
  border: 1px solid var(--ob-line); border-radius: 16px; background: #fff; box-shadow: var(--ob-row);
}
.fn-anchor {
  padding: 10px 14px; border: 1px solid var(--ob-cream-line); border-radius: 12px; background: var(--ob-cream);
  box-shadow: none; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--ob-ink);
}
.fn-anchor b { font-weight: 600; }
.fn-card { padding: 14px 16px; }
.fn-card--xs { font-size: 13px; line-height: 1.45; color: var(--ob-ink-2); }
.fn-card--xs p.b { color: var(--ob-ink); }
.fn-card__h { font-size: 15px; line-height: 1.35; color: var(--ob-ink); }
.fn-card__h--lg { font-size: 16px; }
.fn-card__p { font-size: 13px; line-height: 1.5; color: var(--ob-ink-2); }
.fn-insight { padding: 18px 16px; }
.fn-row + .fn-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ob-line); }
.fn-row__icon { width: 44px; height: 44px; border-radius: 50%; }
.fn-row__label { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ob-ink); }
.fn-row__text { font-size: 14px; line-height: 1.55; color: var(--ob-ink-2); }
.fn-tag { padding: 4px 10px; border-radius: 999px; background: var(--ob-cream); color: var(--ob-orange-ink); font-size: 11px; font-weight: 600; }
.fn-resource__thumb img { border-radius: 14px; box-shadow: var(--ob-row); }
.fn-resource__name { color: var(--ob-ink); }
.fn-emoji p { color: var(--ob-ink-2); font-weight: 500; }

/* email capture */
.fn-email__h { font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--ob-ink); }
.fn-email__card { padding: 20px 18px; }
.fn-choice {
  height: 54px; border: 1px solid var(--ob-line-2); border-radius: 12px; background: #fff; box-shadow: none;
  font-size: 15px; font-weight: 500; color: var(--ob-ink); transition: border-color .2s, box-shadow .2s, transform .25s var(--ob-ease);
}
.fn-choice:hover, .fn-choice:focus-visible, .fn-choice:active { border-color: var(--ob-picked); color: var(--ob-ink); box-shadow: 0 6px 16px rgba(233, 154, 59, .12); }
.fn-choice .fn-i { color: var(--ob-orange-ink); }
.fn-or { color: var(--ob-ink-3); }
.fn-msg--soft, .fn-email__thanks p, .fn-email__thanks p.soft { color: var(--ob-ink-2); }

/* plan recap */
.fn-learnt { padding: 14px 16px; font-size: 13px; line-height: 1.5; color: var(--ob-ink-2); }
.fn-learnt p { color: var(--ob-ink); }
.fn-learnt li { color: var(--ob-ink-2); font-weight: 500; }
.fn-learnt li::marker { color: var(--ob-orange); }
.fn-skill { padding: 6px; border: 0; border-radius: 16px; background: var(--ob-blue-tint); box-shadow: none; }
.fn-skill__in { padding: 14px; border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.5; color: var(--ob-ink-2); }
.fn-dots button { width: 8px; height: 8px; border-radius: 999px; background: var(--ob-line-2); transition: width .3s var(--ob-ease), background-color .2s; }
.fn-dots button.is-active { width: 20px; background: var(--ob-orange); }
.fn-arrow { border: 1px solid var(--ob-line-2); border-radius: 50%; background: #fff; color: var(--ob-ink); box-shadow: none; }
.fn-arrow:hover { border-color: var(--ob-picked); color: var(--ob-orange-ink); box-shadow: 0 6px 16px rgba(233, 154, 59, .12); }
.fn-now__item { padding: 12px 14px; }
.fn-now__item p { font-size: 14px; line-height: 1.45; color: var(--ob-ink-2); }

/* loading and errors */
.fn-loading { padding-top: calc(var(--ob-head) + 18px); }
.fn-loading .fn-logo { margin: 0 auto 18px; }
.fn-loading__text { font-size: 20px; }
.fn-orbit { --center: #FFD98A; --dot: var(--ob-orange); }
.fn-orbit--blue { --center: #CFE0FB; --dot: #8DB3EE; }
.fn-spin i { background: var(--ob-orange); }
.fn-error p { color: var(--ob-ink-2); }

/* thank you (kept for direct links; the funnel now ends on /choose-plan) */
.fn-thanks h1 { color: var(--ob-ink); }
.fn-thanks__sub, .fn-thanks__count { color: var(--ob-ink-2); }

/* the base sheet's ".fn button { font: inherit }" outranks single-class rules, so button type is set at that weight */
.fn .fn-btn { font-size: 16px; font-weight: 600; line-height: 1.4; }
.fn .fn-fab { font-size: 20px; line-height: 1; }
.fn .fn-back { font-size: 0; line-height: 0; }
.fn .fn-option { font-size: 15px; font-weight: 600; line-height: 1.35; }
.fn .fn-choice { font-size: 15px; font-weight: 500; }
.fn .fn-select__btn { font-size: 16px; font-weight: 500; }
.fn .fn-link { font-size: 13px; font-weight: 600; }

/* entrance: a short fade up */
@keyframes fn-fade-in { from { opacity: .2; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #fn-root::after, .fn-option, .fn-option::after, .fn-btn, .fn-fab, .fn-fab .fn-i, .fn-choice, .fn-back, .fn-dots button, .fn-select__arrow { transition: none; }
  .fn-option:not([aria-pressed="true"]):hover, .fn-fab:hover:not(:disabled) .fn-i { transform: none; }
}

/* =====================================================================================================================
   First screen (4 Nov 2026): /gi's landing (gi.css .hero, .showcase, .paths, .stage-q) in the onboarding colours —
   hero headline, the two app phones with mood stickers and the rating chip, the "Start helping today, not in months"
   waitlist card (the usual path vs with VARA), then "Step 1 · Pick one" and the situation options.
   ===================================================================================================================== */
.fn-page--landing { padding-bottom: 120px; }
.fn-ph-ic { display: inline-flex; }
.fn-ph-ic svg { width: 1em; height: 1em; }
/* On a phone the headline keeps to three lines and the lede to one (Ash, 10 Nov 2026): both scale with the column
   (cqi = 1% of .fn-hero's width), up to 30px and 15px. */
.fn-hero { container-type: inline-size; display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.fn-hero__h { margin: 0; font-size: min(30px, 5.9cqi); line-height: 1.14; font-weight: 700; letter-spacing: -.02em; color: var(--ob-ink); text-wrap: balance; }
.fn-hero__lede { margin: 0; font-size: clamp(12px, 3.85cqi, 15px); line-height: 1.6; color: var(--ob-ink-2); }

.fn-showcase { position: relative; height: 330px; margin: 8px -20px 0; perspective: 900px; }
.fn-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ob-ease); }
.fn-phone { position: absolute; width: 170px; height: auto; border-radius: 26px; box-shadow: 0 24px 50px rgba(36, 33, 33, .22), 0 4px 10px rgba(36, 33, 33, .1); }
.fn-phone--a { left: 50%; top: 6px; margin-left: -112px; z-index: 2; transform: rotate(-5deg) translateZ(40px); animation: fn-floaty 7s ease-in-out infinite; }
.fn-phone--b { left: 50%; top: 34px; margin-left: -8px; width: 150px; opacity: .96; transform: rotate(7deg); animation: fn-floaty 8s ease-in-out -2s infinite; }
@keyframes fn-floaty { 50% { translate: 0 -8px; } }
.fn-mood { position: absolute; z-index: 3; width: 52px; height: auto; filter: drop-shadow(0 8px 14px rgba(36, 33, 33, .18)); animation: fn-bob 5s ease-in-out infinite; }
.fn-mood--1 { left: 22px; top: 40px; animation-delay: -1s; }
.fn-mood--2 { right: 24px; top: 18px; animation-delay: -2.5s; }
.fn-mood--3 { left: 34px; bottom: 44px; animation-delay: -3.5s; }
.fn-mood--4 { right: 30px; bottom: 28px; }
@keyframes fn-bob { 50% { transform: translateY(-10px) rotate(-6deg); } }
.fn-rating {
  position: absolute; z-index: 4; left: 50%; bottom: -6px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--ob-line); border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(17, 24, 33, .1);
  white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--ob-ink);
}
.fn-rating__stars { display: flex; gap: 1px; font-size: 14px; color: var(--ob-orange); }

/* the waitlist card: the usual path stalls, the VARA path fills in three steps */
.fn-paths { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; padding: 16px; border: 1px solid var(--ob-line); border-radius: 16px; background: #fff; box-shadow: var(--ob-row); }
.fn-paths__title { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--ob-ink); }
.fn-paths__sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ob-ink-2); }
.fn-lane { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--ob-line); border-radius: 14px; }
.fn-lane--wait { background: #F7F7F9; }
.fn-lane--vara { background: var(--ob-cream); border-color: var(--ob-cream-line); }
.fn-lane__head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ob-ink); }
.fn-lane__head .fn-ph-ic { font-size: 18px; color: var(--ob-ink-3); }
.fn-lane--vara .fn-lane__head .fn-ph-ic { color: var(--ob-orange-ink); }
.fn-lane__head em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 500; color: var(--ob-ink-3); }
.fn-lane__head em.is-go { font-weight: 600; color: #B35F00; }
.fn-track { position: relative; display: block; height: 8px; margin: 4px 7px; border-radius: 99px; }
.fn-lane--wait .fn-track { background: repeating-linear-gradient(90deg, var(--ob-line-2) 0 8px, transparent 8px 14px); }
/* the usual path: the app's "Stressed" diary emoji gets halfway, shakes as if stuck, turns once and slides back to the start (Ash, 10 Nov 2026) */
.fn-track__stuck {
  position: absolute; left: 4%; top: 50%; display: block; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  filter: drop-shadow(0 3px 6px rgba(17, 24, 33, .16)); animation: fn-stuck 6s ease-in-out infinite;
}
.fn-track__stuck img { display: block; width: 100%; height: 100%; }
/* the dashes it has covered turn brand orange (Orange 500) and go grey again as it slides back: same timing as fn-stuck */
.fn-track__trail { position: absolute; inset: 0 auto 0 0; width: 4%; border-radius: inherit; background: repeating-linear-gradient(90deg, #FF9F21 0 8px, transparent 8px 14px); animation: fn-trail 6s ease-in-out infinite; }
@keyframes fn-trail { 0%, 6% { width: 4%; } 38%, 60% { width: 50%; } 94%, 100% { width: 4%; } }
@keyframes fn-stuck {
  0%, 6% { left: 4%; transform: none; }
  38% { left: 50%; transform: none; }
  40% { left: 50%; transform: translateX(-6px) rotate(-14deg); }
  42% { left: 50%; transform: translateX(6px) rotate(14deg); }
  44% { left: 50%; transform: translateX(-6px) rotate(-14deg); }
  46% { left: 50%; transform: translateX(6px) rotate(14deg); }
  48% { left: 50%; transform: translateX(-3px) rotate(-7deg); }
  50% { left: 50%; transform: rotate(0deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  60% { left: 50%; transform: rotate(360deg); }
  94%, 100% { left: 4%; transform: rotate(360deg); }
}


.fn-track__flag { position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 4px; background: var(--ob-line-2); }
.fn-lane--vara .fn-track { background: #F1E4CF; }
.fn-track__bar { position: absolute; inset: 0 auto 0 0; display: block; width: 100%; border-radius: inherit; background: var(--ob-grad); transform-origin: left; animation: fn-fillbar 2.2s var(--ob-ease) .5s both; }
@keyframes fn-fillbar { from { transform: scaleX(0); } }
.fn-track__node { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 3px solid var(--ob-line-2); border-radius: 50%; background: #fff; animation: fn-lit .45s var(--ob-spring) both; }
.fn-track__node.n1 { left: 0; animation-delay: .6s; }
.fn-track__node.n2 { left: 50%; animation-delay: 1.5s; }
.fn-track__node.n3 { left: 100%; animation-delay: 2.5s; }
@keyframes fn-lit { from { border-color: var(--ob-line-2); transform: scale(.6); } to { border-color: var(--ob-orange-ink); transform: scale(1); box-shadow: 0 0 0 5px rgba(242, 162, 58, .2); } }
/* the With VARA line is navy (Ash, 10 Nov 2026): /ai's navy #384086 into brand Navy #003881; the dots light up navy too */
.fn-lane--vara .fn-track__bar { background: linear-gradient(90deg, #384086 0%, #003881 100%); }
.fn-lane--vara .fn-track__node { animation-name: fn-lit-navy; }
@keyframes fn-lit-navy { from { border-color: var(--ob-line-2); transform: scale(.6); } to { border-color: #003881; transform: scale(1); box-shadow: 0 0 0 5px rgba(0, 56, 129, .14); } }
/* each dot gets one of the app's emoji, dropped on just after it lights up (Ash, 10 Nov 2026) */
.fn-lane--vara .fn-track { margin: 13px 13px 9px; }
.fn-track__emo { position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; filter: drop-shadow(0 3px 6px rgba(179, 95, 0, .22)); animation: fn-drop .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.fn-track__emo.e1 { left: 0; animation-delay: .75s; }
.fn-track__emo.e2 { left: 50%; animation-delay: 1.65s; }
.fn-track__emo.e3 { left: 100%; animation-delay: 2.65s; }
@keyframes fn-drop { from { opacity: 0; transform: translateY(-30px) scale(.7) rotate(-12deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
/* the timeline waits until the lane is on screen (.is-in, set in situation.js) */
.fn-lane--vara:not(.is-in) :is(.fn-track__bar, .fn-track__node, .fn-track__emo, .fn-steps3 span) { animation-play-state: paused; }
.fn-steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fn-steps3 span { display: flex; flex-direction: column; gap: 2px; opacity: 0; animation: fn-steprise .5s var(--ob-ease) both; }
.fn-steps3 .s1 { animation-delay: .7s; }
.fn-steps3 .s2 { text-align: center; animation-delay: 1.6s; }
.fn-steps3 .s3 { text-align: right; animation-delay: 2.6s; }
@keyframes fn-steprise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fn-steps3 small { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #B35F00; }
.fn-steps3 b { font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--ob-ink); }
/* Each lane's pills stay on one line on a phone (Ash, 10 Nov 2026): the text scales with the row (3.8% of its width,
   9–11px) and only wraps on the narrowest phones. With VARA has three ("Start today" repeats the lane's "Starts today"). */
.fn-pills { container-type: inline-size; display: flex; flex-wrap: wrap; gap: 4px; }
.fn-pills span { padding: 4px .55em; border: 1px solid var(--ob-line); border-radius: 999px; background: #fff; font-size: clamp(9px, 3.8cqi, 11px); font-weight: 500; white-space: nowrap; color: var(--ob-ink-2); }
.fn-lane--vara .fn-pills span { border-color: var(--ob-cream-line); color: #8A4A00; }
.fn-lane--wait .fn-pills span { font-size: clamp(9px, 3.55cqi, 11px); }   /* longer words: a little smaller to stay on one line */

/* the question, left-aligned under the card as on /gi */
.fn-stage-q { margin-top: 30px; }
.fn-stage-q__k { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #B35F00; }
.fn-stage-q__h { margin: 0 0 4px; font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--ob-ink); text-wrap: balance; }
.fn-stage-q__hint { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ob-ink-2); }
.fn-options--landing { margin-top: 16px; }
.fn-fine { margin: 14px 0 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--ob-ink-3); }
.fn-fab { animation: fn-fab-in .35s var(--ob-ease); }
@keyframes fn-fab-in { from { opacity: 0; transform: translateY(12px); } }

/* sub-stages: multi-select (up to 3), so the tick is a rounded square; once 3 are picked the rest dim */
.fn-options--multi .fn-option::after { border-radius: 7px; }
.fn-option.is-capped { opacity: .45; box-shadow: none; cursor: not-allowed; }
.fn-option.is-capped:hover { border-color: var(--ob-line-2); box-shadow: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fn-tilt { transform: none !important; transition: none; }
  .fn-phone, .fn-mood, .fn-track__stuck, .fn-track__trail, .fn-track__bar, .fn-track__node, .fn-track__emo, .fn-steps3 span, .fn-fab { animation: none; opacity: 1; }
  .fn-phone--b { opacity: .96; }
  .fn-track__node { border-color: var(--ob-orange-ink); }
}

/* area list (third screen): /ai's "Other options" disclosure in the onboarding colours */
.fn-others { margin-top: 10px; border: 1.5px dashed var(--ob-line-2); border-radius: 12px; background: rgba(255, 255, 255, .7); }
.fn-others__summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 14px 16px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ob-ink); }
.fn-others__summary::-webkit-details-marker { display: none; }
.fn-others__summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border: solid var(--ob-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .3s var(--ob-ease); }
.fn-others[open] .fn-others__summary::after { transform: rotate(225deg); }
.fn-others__summary:focus-visible { outline: 3px solid var(--ob-orange); outline-offset: 2px; border-radius: 12px; }
.fn-options--others { margin: 0; padding: 0 10px 10px; }
.fn-others[open] .fn-options--others > * { animation: fn-fade-in .45s var(--ob-ease) both; }
@media (prefers-reduced-motion: reduce) { .fn-others__summary::after { transition: none; } .fn-others[open] .fn-options--others > * { animation: none; } }

/* subdomain list (fourth screen): /ai's s06 cards, a bold label over a one-line description, then "Show more" */
.fn-options--sub .fn-option { align-items: flex-start; padding: 14px 14px 14px 16px; }
.fn-options--sub .fn-option__row { margin-right: 12px; }
.fn-options--sub .fn-option__label { font-size: 15.5px; line-height: 1.3; font-weight: 600; }
.fn-options--sub .fn-option__sub { margin-top: 5px; font-size: 13px; line-height: 1.45; font-weight: 400; color: var(--ob-ink-3); }
.fn-options--sub .fn-option::after { margin-top: 1px; }
.fn-sub-msg { margin: 10px 0 0; text-align: left; }
.fn-sub-msg:empty { display: none; }


.fn-sub-msg { font-size: 13px; line-height: 1.4; }

/* loading checklist before the strategy (4 Nov 2026): each step spins, then ticks off green 1.5 s later */
.fn-loading--steps { justify-content: flex-start; gap: 0; padding: calc(var(--ob-head) + 72px) 24px 120px; }
.fn-loading--steps .fn-logo { width: 52px; height: 52px; margin: 0 auto 28px; }
.fn-steps { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; margin: 0; padding: 0; list-style: none; }
.fn-steps__row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--ob-line); border-radius: 14px; background: #fff;
  box-shadow: var(--ob-row); font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--ob-ink-3);
  opacity: .55; transform: translateY(4px); transition: opacity .4s var(--ob-ease), transform .4s var(--ob-ease), color .3s, border-color .3s, background-color .3s;
}
.fn-steps__row.is-active, .fn-steps__row.is-done { opacity: 1; transform: none; color: var(--ob-ink); }
.fn-steps__row.is-active { border-color: var(--ob-cream-line); }
.fn-steps__row.is-done { background: #F1F7EE; border-color: #DDEAD5; }   /* brand green tints */
.fn-steps__mark { position: relative; flex: none; width: 26px; height: 26px; border: 2px solid var(--ob-line-2); border-radius: 50%; transition: border-color .3s, background-color .3s; }
.fn-steps__row.is-active .fn-steps__mark { border-color: #F6E2BF; border-top-color: var(--ob-orange); animation: fn-spin .8s linear infinite; }
.fn-steps__row.is-done .fn-steps__mark { border-color: transparent; background: #01BD33; animation: fn-pop .45s var(--ob-spring); }   /* brand green */
.fn-steps__row.is-done .fn-steps__mark::after {
  content: ""; position: absolute; inset: 0; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center / 15px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}
@keyframes fn-spin { to { transform: rotate(360deg); } }
@keyframes fn-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.fn-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .fn-steps__row { transition: none; transform: none; }
  .fn-steps__row.is-active .fn-steps__mark { animation: none; border-color: var(--ob-orange); }
  .fn-steps__row.is-done .fn-steps__mark { animation: none; }
}

/* the child's name, asked inside the loader after the second tick (as the app's field: label, italic guidance, a soft
   rounded input with an orange edge) */
.fn-steps__gate { position: relative; z-index: 2; list-style: none; animation: fn-fade-in .45s var(--ob-ease) both; }   /* above the rows below, so the age menu is not covered */
.fn-gate { display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 16px; border: 1px solid var(--ob-cream-line); border-radius: 16px; background: #FFFBF4; box-shadow: var(--ob-row); }
.fn-gate__label { font-size: 18px; line-height: 1.35; font-weight: 500; color: var(--ob-ink); }
.fn-gate__hint { margin: 0 0 6px; font-size: 13px; line-height: 1.45; font-style: italic; color: var(--ob-ink-2); }
.fn .fn-gate__input { height: 56px; padding: 0 20px; border: 1px solid var(--ob-picked); border-radius: 16px; background: #F8F8F8; font-size: 17px; font-weight: 500; }
.fn .fn-gate__input:focus { border-color: var(--ob-orange); background: #fff; box-shadow: 0 0 0 4px rgba(242, 162, 58, .16); }
.fn-gate__reaction { margin: 2px 0 0; }
.fn-gate__actions { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .fn-steps__gate { animation: none; } }
/* the age question that follows the name, styled like the name field (soft grey fill, orange edge, 16px corners) */
.fn-gate.is-in { animation: fn-fade-in .4s var(--ob-ease) both; }
.fn .fn-gate__select .fn-select__btn { height: 56px; padding: 0 20px; border: 1px solid var(--ob-picked); border-radius: 16px; background: #F8F8F8; line-height: 54px; font-size: 17px; }
.fn .fn-gate__select .fn-select__arrow { color: var(--ob-ink); }
.fn-gate__select .fn-select__menu { z-index: 30; }
@media (prefers-reduced-motion: reduce) { .fn-gate.is-in { animation: none; } }
.fn-gate h2.fn-gate__label { margin: 0; }
.fn-nowrap { white-space: nowrap; }

/* Confirm / Change for an answer saved from an earlier visit: the gradient Confirm, an outlined Change (as the designs'
   secondary button: white with an orange edge) */
.fn-gate__actions--two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.fn .fn-btn--ghost { background: #fff; color: var(--ob-ink); border: 1.5px solid var(--ob-picked); box-shadow: none; }
.fn .fn-btn--ghost:hover { background: var(--ob-cream); filter: none; box-shadow: none; }
/* five steps plus the question: less space above the list, so the panel fits a small phone */
.fn-loading--steps { padding-top: calc(var(--ob-head) + 40px); }
.fn-loading--steps .fn-logo { width: 46px; height: 46px; margin-bottom: 20px; }
.fn-steps { gap: 10px; }
.fn-steps__row { padding: 12px 16px; }
@media (max-height: 720px) {
  .fn-loading--steps { padding-top: calc(var(--ob-head) + 16px); }
  .fn-loading--steps .fn-logo { width: 38px; height: 38px; margin-bottom: 14px; }
  .fn-steps__row { padding: 10px 14px; font-size: 14px; }
}

/* thinking line under the current loader step (transitions.dev "thinking states"): small grey phrases that shimmer
   while they hold and swap with a short blurred rise; it folds away when the step ticks */
.fn-steps__body { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.fn-think {
  --think-base: var(--ob-ink-3); --think-highlight: var(--ob-ink); --think-distance: 6px; --think-blur: 2px;
  position: relative; display: block; height: 19px; margin-top: 3px; overflow: hidden;
  font-size: 12.5px; line-height: 19px; font-weight: 400; text-align: left;
  transition: height .3s var(--ob-ease), margin-top .3s var(--ob-ease), opacity .25s;
}
.fn-steps__row:not(.is-active) .fn-think, .fn-think.is-folded { height: 0; margin-top: 0; opacity: 0; }
.fn-think__text {
  position: absolute; top: 0; left: 0; right: 0; display: block; overflow: hidden; color: var(--think-base);
  white-space: nowrap; text-overflow: ellipsis; transform: translateY(0); filter: blur(0); opacity: 1;
  transition: transform 180ms ease-in-out, filter 180ms ease-in-out, opacity 180ms ease-in-out;
  will-change: transform, filter, opacity;
}
.fn-think__text::before {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; overflow: hidden; text-overflow: ellipsis;
  background-image: linear-gradient(90deg, transparent 0%, transparent 40%, var(--think-highlight) 50%, transparent 60%, transparent 100%);
  background-size: 400% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; animation: fn-think-shimmer 1.6s linear infinite;
}
@keyframes fn-think-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
.fn-think__text.is-exit { transform: translateY(calc(var(--think-distance) * -1)); filter: blur(var(--think-blur)); opacity: 0; }
.fn-think__text.is-enter-start { transition: none; transform: translateY(var(--think-distance)); filter: blur(var(--think-blur)); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .fn-think, .fn-think__text { transition: none !important; transform: none !important; filter: none !important; }
  .fn-think__text::before { display: none !important; }
}


/* =====================================================================================================================
   ?s=strategy in premium claymorphism (5 Nov 2026), rebuilt around the parent's answers 10 Nov 2026 (decision 138): the
   plan-ready hero, "Start here today", "Coming up", one parent story and the 7 support layers. Clay = a near-white
   surface with a white rim, a soft inner highlight at the top, a warm inner shade at the bottom and a tinted outer
   shadow; radius rule: cards 24px, inner tiles 14-18px, bubbles and pills full round; App Brand Book colours only; the
   CTA is the funnel's standard button. Motion: one reveal sequence ([data-reveal] → .is-in, ordered by --i), pills that
   pop, the bubble that squash-settles, steps and timeline rows that rise, the layers meter that fills, a tick that
   pops. Everything is static under reduced motion.
   ===================================================================================================================== */
.fn-page--sv {
  --clay-face: #FFFFFF;
  --clay-rim: rgba(255, 255, 255, .95);
  --clay-hi: inset 0 2px 1px rgba(255, 255, 255, .95), inset 0 10px 18px rgba(255, 255, 255, .55);
  --clay-shade: inset 0 -8px 18px rgba(246, 149, 21, .10);
  --clay-drop: 0 18px 34px -16px rgba(246, 149, 21, .38), 0 6px 14px -6px rgba(17, 24, 33, .08);
  --clay: var(--clay-hi), var(--clay-shade), var(--clay-drop);
  --clay-spring: cubic-bezier(.34, 1.56, .64, 1);
  padding-top: calc(var(--ob-head) + 10px);
}
/* App Brand Book colours only while the strategy screen shows (10 Nov 2026): set on the body so the shared chrome (the
   backdrop glows, the progress line) picks them up too. The onboarding skin's tones map to their brand equivalents;
   the --fn-* aliases are restated because :root resolved them from the old --ob-* values. */
body.fn:has(.fn-page--sv) {
  --ob-ink: #111821; --ob-ink-2: #444444; --ob-ink-3: #444444; --ob-placeholder: #9D9D9D; --ob-line: #CCCCCC;
  --ob-cream: #FFF4E5; --ob-cream-2: #FFEBD0; --ob-cream-line: #FFEBD0;
  --ob-orange: #FF9F21; --ob-orange-ink: #F69515; --ob-picked: #FFB71B;
  --ob-grad: linear-gradient(90deg, #FFC52A 0%, #F69515 100%); --ob-cta-shadow: 0 6px 16px rgba(246, 149, 21, .28);
  --fn-gradient: var(--ob-grad); --fn-orange: #FF9F21; --fn-orange-600: #F69515; --fn-ink: #111821; --fn-label: #444444; --fn-muted: #444444;
  --fn-btn-glow: var(--ob-cta-shadow);
}
#fn-root:has(.fn-page--sv)::before { background: #FFEBD0; }
.fn-sv { gap: 18px; }

/* hero: the star in a puffy medallion with a slow warm glow */
.fn-sv-hero { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 4px; }
.fn-sv-medal {
  position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #FFFFFF 0%, #FEF9EB 46%, #FCEEC4 100%);
  box-shadow: inset 0 3px 2px rgba(255, 255, 255, .95), inset 0 -10px 18px rgba(246, 149, 21, .22), 0 16px 30px -12px rgba(246, 149, 21, .5);
}
.fn-sv-medal::after {
  content: ""; position: absolute; inset: -10px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 197, 42, .35), rgba(255, 197, 42, 0) 68%); animation: fn-sv-glow 4s ease-in-out infinite;
}
@keyframes fn-sv-glow { 50% { transform: scale(1.12); opacity: .6; } }
.fn .fn-sv-medal .fn-logo { width: 46px; height: 46px; margin: 0; }
.fn-sv-title { font-size: 26px; line-height: 1.25; letter-spacing: -.015em; }

/* the parent's answers under the heading (decision 138): how they feel, the facts the plan is built on as white pills,
   their own words, and a green receipt that the plan is saved */
.fn-sv-lead { max-width: 34ch; margin: -4px 0 0; font-size: 15px; line-height: 1.5; color: #444444; text-align: center; text-wrap: balance; }
.fn-sv-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.fn-sv-fact { padding: 6px 12px; border: 1.5px solid #FCECD3; border-radius: 999px; background: #FFFFFF; color: #222222; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.fn-sv-said { max-width: 36ch; margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: #444444; text-align: center; text-wrap: balance; }
.fn-sv-said b { font-weight: 600; color: #111821; }
.fn-sv-receipt { display: inline-flex; align-items: flex-start; gap: 7px; max-width: 100%; margin: 2px 0 0; padding: 7px 14px; border-radius: 16px; background: #F1F7EE; color: #222222; font-size: 12.5px; line-height: 1.45; text-wrap: pretty; }
.fn-sv-receipt .fn-i { flex: none; margin-top: 2px; font-size: 13px; color: #01BD33; }
.fn-sv-receipt span { overflow-wrap: anywhere; }
.fn-kicker { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #F69515; }
.fn-sv-h2 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: #111821; text-wrap: balance; }

/* "Start here today": the first strategy card, fully open, in a clay card with a warm wash at the top */
.fn-today {
  position: relative; padding: 18px 18px 16px; border: 2px solid var(--clay-rim); border-radius: 24px; box-shadow: var(--clay);
  background: linear-gradient(180deg, #FEF9EB 0, #FFFFFF 150px);
}
.fn-today.is-you { background: linear-gradient(180deg, #FCEDF5 0, #FFFFFF 150px); }
.fn-today__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fn-today__for { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: #444444; }
.fn-sv-bub {
  display: grid; flex: none; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF, #FCECD3); color: #FF9F21;
  box-shadow: inset -3px -5px 10px rgba(17, 24, 33, .05), inset 3px 3px 6px rgba(255, 255, 255, .9), 0 10px 18px -8px rgba(246, 149, 21, .45);
}
.fn-today.is-you .fn-sv-bub { background: radial-gradient(circle at 35% 30%, #FFFFFF, #F8D6E8); color: #EA4390; }
.fn-sv-glyph { display: inline-flex; width: 28px; height: 28px; }
.fn-sv-glyph svg { width: 100%; height: 100%; }
.fn-today__title { margin: 8px 0 0; font-size: 21px; line-height: 1.28; font-weight: 600; letter-spacing: -.015em; color: #111821; text-wrap: balance; }
.fn-today__problem { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #444444; text-wrap: pretty; }
.fn-today__problem b { font-weight: 600; color: #222222; }
.fn-today__why { margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: #F1FBFF; font-size: 13.5px; line-height: 1.5; color: #222222; text-wrap: pretty; }
.fn-today__why b { font-weight: 600; color: #111821; }
.fn-today__h3 { display: flex; flex-direction: column; gap: 2px; margin: 16px 0 8px; font-size: 15px; font-weight: 600; color: #111821; }
.fn-today__h3 small { font-size: 12px; font-weight: 400; color: #444444; }
.fn-today__steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fn .fn-today__step {
  display: grid; grid-template-columns: 28px 1fr; align-items: center; column-gap: 10px; width: 100%; min-height: 52px; padding: 11px 12px;
  border: 1.5px solid #FCECD3; border-radius: 16px; background: #FFFFFF; color: #222222; font: inherit; font-size: 14px; line-height: 1.45; text-align: left; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.fn-today__box, .fn-today__n { grid-area: 1 / 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.fn-today__box { background: #FCECD3; color: #FFFFFF; font-size: 13px; transition: background-color .2s; }
.fn-today__box .fn-i { opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--clay-spring); }
.fn-today__n { font-size: 12px; font-weight: 700; color: #222222; transition: opacity .15s; }
.fn-today__txt { grid-column: 2; text-wrap: pretty; }
.fn .fn-today__step[aria-pressed="true"] { border-color: #DDEAD5; background: #F1F7EE; }
.fn-today__step[aria-pressed="true"] .fn-today__box { background: #01BD33; }
.fn-today__step[aria-pressed="true"] .fn-today__box .fn-i { opacity: 1; transform: none; }
.fn-today__step[aria-pressed="true"] .fn-today__n { opacity: 0; }
.fn .fn-today__step:focus-visible { outline: 2px solid #F69515; outline-offset: 2px; }
@media (hover: hover) { .fn .fn-today__step:hover { border-color: #FFB71B; } }
.fn-today__done:empty { display: none; }
.fn-today__done { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: #222222; }
.fn-today__more { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: #F69515; }
.fn-coach { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #FFEBD0; }
.fn-coach__q { margin: 0 0 10px; }
.fn-coach__q p { margin: 0; font-size: 14px; line-height: 1.5; font-style: italic; color: #222222; text-wrap: pretty; }
.fn-coach__by { display: flex; align-items: center; gap: 10px; }
.fn-coach__avs { display: flex; flex: none; }
.fn-coach__av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #FFFFFF; background: var(--fn-gradient); color: #111821; font-size: 10.5px; font-weight: 700; }
.fn-coach__av + .fn-coach__av { margin-left: -9px; }
.fn-coach__av.is-star { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px #FFEBD0; }
.fn-coach__av img { width: 18px; height: 18px; }
.fn-coach__who { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 1.35; color: #444444; }
.fn-coach__who b { font-weight: 600; color: #111821; }

/* "Coming up": the other cards on a dotted timeline, each a light card with when, what it answers and its first step */
.fn-next { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.fn-next__list { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fn-next__list::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 18px; border-left: 2px dashed #FFC52A; }
.fn-next__item { position: relative; display: grid; grid-template-columns: 16px 1fr; column-gap: 12px; align-items: start; }
.fn-next__dot { width: 16px; height: 16px; margin-top: 16px; border: 3px solid #FFB71B; border-radius: 50%; background: #FFFFFF; }
.fn-next__item.is-you .fn-next__dot { border-color: #EA4390; }
.fn-next__body { padding: 12px 14px; border: 1.5px solid #FFEBD0; border-radius: 18px; background: #FFFFFF; box-shadow: 0 8px 18px -12px rgba(246, 149, 21, .35); }
.fn-next__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 12px; color: #444444; }
.fn-next__when { padding: 3px 9px; border-radius: 999px; background: #FFF4E5; color: #222222; font-size: 11.5px; font-weight: 700; }
.fn-next__item.is-you .fn-next__when { background: #FCEDF5; }
.fn-next__title { margin: 6px 0 0; font-size: 16px; line-height: 1.3; font-weight: 600; color: #111821; text-wrap: balance; }
.fn-next__first { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: #444444; text-wrap: pretty; }
.fn-next__first b { font-weight: 600; color: #222222; }
.fn-next__count { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; font-weight: 600; color: #444444; }
.fn-next__count .fn-i { font-size: 12px; color: #F69515; }

/* the parent story that stood here was replaced by the resources carousel (decision 155, styles at the end) */

/* the bridge: the plan's 7 support layers, the first done, the ones the parent asked for marked */
.fn-layers { padding: 18px; border: 2px solid var(--clay-rim); border-radius: 24px; background: var(--clay-face); box-shadow: var(--clay); }
.fn-layers__sub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: #444444; }
.fn-layers__meter { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; }
.fn-layers__track { flex: 1; height: 8px; overflow: hidden; border-radius: 99px; background: #FFEBD0; }
.fn-layers__fill { display: block; width: calc(100% / 7); height: 100%; border-radius: 99px; background: var(--fn-gradient); }
.fn-layers__n { font-size: 12px; font-weight: 700; color: #444444; }
.fn-layers__list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fn-layer { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: 14px; font-size: 14px; line-height: 1.35; color: #222222; }
.fn-layer__n { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border: 1.5px solid #CCCCCC; border-radius: 50%; background: #F7F8FC; color: #444444; font-size: 12px; font-weight: 700; }
.fn-layer.is-done .fn-layer__n { border-color: transparent; background: var(--fn-gradient); color: #111821; }
.fn-layer.is-done .fn-layer__label { font-weight: 600; color: #111821; }
.fn-layer.is-asked { background: #FFF4E5; }
.fn-layer__label { flex: 1; min-width: 0; }
.fn-layer__tag { flex: none; padding: 2px 8px; border: 1px solid #FCECD3; border-radius: 999px; background: #FFFFFF; color: #222222; font-size: 11px; font-weight: 600; white-space: nowrap; }

/* the CTA stays the funnel's standard gradient button (Ash, 5 Nov 2026) */
.fn-page--sv .fn-sv-bar.fn-bar--sticky { margin-top: 26px; }

/* ---------- motion (only when the person has not asked for less) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fn-page--sv [data-reveal] { opacity: 0; transform: translateY(18px) scale(.985); }
  .fn-page--sv [data-reveal].is-in {
    opacity: 1; transform: none;
    transition: opacity .6s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * 110ms), transform .7s var(--clay-spring) calc(var(--i, 0) * 110ms);
  }
  .fn-page--sv .fn-sv-medal[data-reveal] { transform: scale(.6); }
  .fn-page--sv .fn-sv-medal[data-reveal].is-in { transform: none; transition: opacity .4s ease-out, transform .8s var(--clay-spring); }
  .fn-sv-hero .fn-sv-facts.is-in .fn-sv-fact { animation: fn-sv-pop .5s var(--clay-spring) both; animation-delay: calc(300ms + var(--k) * 80ms); }
  .fn-today.is-in .fn-sv-bub { animation: fn-sv-squash .7s var(--clay-spring) both; animation-delay: .25s; }
  .fn-today.is-in .fn-today__steps li { animation: fn-sv-rise .55s cubic-bezier(.22, 1, .36, 1) both; }
  .fn-today.is-in .fn-today__steps li:nth-child(2) { animation-delay: .1s; }
  .fn-today.is-in .fn-today__steps li:nth-child(3) { animation-delay: .2s; }
  .fn-today__step[aria-pressed="true"] .fn-today__box { animation: fn-sv-pop .45s var(--clay-spring); }
  .fn-next.is-in .fn-next__item { animation: fn-sv-rise .6s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(150ms + var(--k) * 160ms); }
  .fn-layers.is-in .fn-layers__fill { animation: fn-sv-fill 1s cubic-bezier(.22, 1, .36, 1) .3s both; }
  .fn-layers.is-in .fn-layer { animation: fn-sv-rise .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(200ms + var(--k) * 70ms); }
  .fn .fn-today__step:active { transform: scale(.985); }
}
@keyframes fn-sv-fill { from { width: 0; } }
@keyframes fn-sv-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fn-sv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fn-sv-squash { 0% { transform: scale(.5); } 55% { transform: scale(1.12, .92); } 80% { transform: scale(.96, 1.04); } 100% { transform: scale(1); } }
@keyframes fn-sv-float { 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .fn-sv-medal::after { animation: none; }
  .fn-today__box .fn-i, .fn .fn-today__step, .fn-today__box { transition: none; }
}

/* "Where should we save Zoya's plan?": the parent's details, asked inside the loader while step 5 runs (save-plan.js).
   Google first as a white pill, a quiet "or use your email" rule, then labelled name and email fields in the gate's
   input style, the gradient Save button and the privacy line. */
.fn-save { gap: 10px; }
.fn-save h2.fn-gate__label { text-wrap: balance; }
.fn-save__sub { margin-bottom: 4px; }
.fn .fn-save__google { height: 56px; border-radius: 16px; background: #fff; font-size: 16px; font-weight: 600; gap: 10px; }
.fn-save__gerr { margin: -2px 0 0; text-align: center; }
.fn-save__or { display: flex; align-items: center; gap: 12px; margin: 4px 0; font-size: 12.5px; color: var(--ob-ink-3); }
.fn-save__or::before, .fn-save__or::after { content: ""; flex: 1; height: 1px; background: var(--ob-cream-line); }
.fn-save__label { margin: 2px 0 -4px; font-size: 13px; font-weight: 600; color: var(--ob-ink-2); }
.fn .fn-save .fn-gate__input { height: 52px; font-size: 16px; }
.fn-save .fn-email__registered { align-items: flex-start; }
.fn-save__fine { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--ob-ink-3); }
.fn-save__fine .fn-i { flex: none; margin-top: 2px; font-size: 13px; color: var(--ob-ink-3); }
/* The checklist's question panels, slimmer (6 Nov 2026; smaller again 10 Nov): lighter edge and shadow, 15px questions,
   42px buttons and 46px fields, 14px text. Pills (.fn-chip, 12px, 34px tall) for the feeling, the weekly time and the
   support systems (ticked). Colours from the App Brand Book only. */
.fn-gate { gap: 8px; padding: 14px 14px 14px; border-color: #FFEBD0; border-radius: 14px; background: #FDFDFD; box-shadow: 0 1px 2px rgba(17, 24, 33, .03), 0 6px 18px rgba(246, 149, 21, .08); }
.fn-gate__label { font-size: 15px; line-height: 1.4; font-weight: 500; letter-spacing: -.005em; }
.fn-gate__hint { margin: -2px 0 4px; font-size: 12px; color: #444444; }
.fn-gate__count { margin: 0 0 -2px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #F69515; }
.fn-gate__actions { margin-top: 4px; }
.fn-gate__actions--two { gap: 8px; margin-top: 6px; }
.fn .fn-gate .fn-btn { min-height: 42px; height: 42px; padding: 0 16px; border-radius: 12px; font-size: 14px; }
.fn .fn-gate .fn-btn--ghost { border-width: 1px; }
.fn .fn-gate__input, .fn .fn-save .fn-gate__input { height: 46px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
.fn .fn-gate__select .fn-select__btn { height: 46px; padding: 0 14px; border-radius: 12px; line-height: 44px; font-size: 14px; }
.fn .fn-gate .fn-select__opt { font-size: 13.5px; }
.fn .fn-save__google { height: 44px; border-radius: 12px; font-size: 14px; }
.fn-save { gap: 8px; }
.fn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 2px; }
.fn-chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border: 1px solid #FCECD3; border-radius: 999px;
  background: #FFFFFF; color: #222222; font: inherit; font-size: 12px; font-weight: 500; line-height: 1.2; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.fn-chip:hover { border-color: #FFB71B; }
.fn-chip:active { transform: scale(.97); }
.fn-chip:focus-visible { outline: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #F69515; }
.fn-chip[aria-pressed="true"] { background: linear-gradient(90deg, #FFC52A 0%, #F69515 100%); border-color: transparent; color: #FFFFFF; box-shadow: 0 3px 10px rgba(246, 149, 21, .3); }
.fn-chip__tick { display: none; font-size: 11px; }
.fn-chip--multi[aria-pressed="true"] .fn-chip__tick { display: inline-flex; animation: fn-pop .2s ease-out both; }
@media (prefers-reduced-motion: reduce) { .fn-chip { transition: none; } .fn-chip--multi[aria-pressed="true"] .fn-chip__tick { animation: none; } }
.fn .fn-gate .fn-btn:not(.fn-btn--ghost):not(:disabled) { box-shadow: 0 4px 12px rgba(246, 149, 21, .24); }

/* =====================================================================================================================
   ?s=plan, the 7 support layers (decision 139). Same clay language and App Brand Book colours as ?s=strategy (the page
   carries .fn-page--sv for the brand tokens). Each layer is a clay card with a pale wash in its own brand tint (orange,
   blue, green, purple, pink, lime, yellow in turn), a white "Layer n" pill, a green "You asked for this" tag where it
   matches the parent's support picks, the promise in the brand orange, the layer's title and lines, then its media. A
   sticky counter (seven dots and "Layer n of 7") follows the scroll. Motion: the [data-reveal] rise from ?s=strategy,
   emoji tiles that pop, list rows that rise; the check-in video is still under reduced motion.
   ===================================================================================================================== */
.fn-lays { gap: 16px; }
.fn-lay-count {
  position: sticky; top: calc(var(--ob-head) + 8px); z-index: 5; display: inline-flex; align-self: center; align-items: center; gap: 10px;
  margin: 0; padding: 7px 14px; border: 1.5px solid #FFEBD0; border-radius: 999px; background: #FFFFFF; color: #444444;
  font-size: 12px; font-weight: 700; box-shadow: 0 8px 18px -10px rgba(246, 149, 21, .45);
}
.fn-lay-count__dots { display: inline-flex; gap: 4px; }
.fn-lay-count__dots i { width: 7px; height: 7px; border-radius: 50%; background: #FFEBD0; transition: background-color .3s, transform .3s var(--clay-spring); }
.fn-lay-count__dots i.is-on { background: #FF9F21; }

.fn-lay {
  --w: #FEF9EB; position: relative; padding: 18px; border: 2px solid var(--clay-rim); border-radius: 24px; box-shadow: var(--clay);
  background: linear-gradient(180deg, var(--w) 0, #FFFFFF 140px); scroll-margin-top: calc(var(--ob-head) + 56px);
}
.fn-lay[data-layer="2"] { --w: #F1FBFF; }
.fn-lay[data-layer="3"] { --w: #F1F7EE; }
.fn-lay[data-layer="4"] { --w: #F8F2FE; }
.fn-lay[data-layer="5"] { --w: #FCEDF5; }
.fn-lay[data-layer="6"] { --w: #FAFBEB; }
.fn-lay[data-layer="7"] { --w: #FEF9EB; }
.fn-lay__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fn-lay__pill { padding: 4px 10px; border: 1.5px solid #FFEBD0; border-radius: 999px; background: #FFFFFF; color: #222222; font-size: 11.5px; font-weight: 700; }
.fn-lay__asked { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #F1F7EE; color: #222222; font-size: 11.5px; font-weight: 600; }
.fn-lay__asked .fn-i { font-size: 11px; color: #01BD33; }
.fn-lay.is-asked { border-color: #DDEAD5; }
.fn-lay__promise { margin: 12px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #F69515; }
.fn-lay__title { margin: 4px 0 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: #111821; text-wrap: balance; }
.fn-lay__lead { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; font-weight: 600; color: #222222; text-wrap: pretty; }
.fn-lay__body { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: #444444; text-wrap: pretty; }
.fn-lay__media { margin-top: 14px; }
.fn-lay__media-h { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: #444444; }

/* layer 1: the three strategies from ?s=strategy, today's first, with its ticks */
.fn-l1 { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fn-l1__item { display: grid; grid-template-columns: 30px 1fr; align-items: center; column-gap: 10px; padding: 10px 12px; border: 1.5px solid #FFEBD0; border-radius: 16px; background: #FFFFFF; }
.fn-l1__mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #FCECD3; color: #222222; font-size: 12px; font-weight: 700; }
.fn-l1__item.is-today .fn-l1__mark { background: var(--fn-gradient); color: #111821; }
.fn-l1__item.is-today.is-done .fn-l1__mark, .fn-l1__item.is-today .fn-l1__mark .fn-i { color: #FFFFFF; }
.fn-l1__item.is-today:has(.fn-i) .fn-l1__mark { background: #01BD33; }
.fn-l1__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fn-l1__txt b { font-size: 14.5px; line-height: 1.35; font-weight: 600; color: #111821; }
.fn-l1__txt small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: #444444; }
.fn-l1__today { padding: 1px 7px; border-radius: 999px; background: #FFF4E5; color: #222222; font-weight: 700; }
.fn-l1__more { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: #F69515; }

/* layer 2: every masterclass as a scroll-snap carousel that runs to the card's edges, the best fit first; dots below */
.fn-courses-wrap { margin: 0 -18px; }
.fn-courses {
  display: flex; gap: 10px; margin: 0; padding: 2px 18px 10px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none;
}
.fn-courses::-webkit-scrollbar { display: none; }
.fn-courses:focus-visible { outline: 2px solid #F69515; outline-offset: -2px; border-radius: 18px; }
.fn-course { display: flex; flex-direction: column; flex: 0 0 86%; scroll-snap-align: start; overflow: hidden; border: 1.5px solid #D3F1FD; border-radius: 18px; background: #FFFFFF; }
.fn-course__art { position: relative; }
.fn-course__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #E4F6FE; }
.fn-course__best, .fn-course__badge { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.fn-course__best { background: linear-gradient(90deg, #FFC52A 0%, #F69515 100%); color: #111821; box-shadow: 0 4px 10px rgba(246, 149, 21, .35); }
.fn-course__badge { background: #FFFFFF; color: #222222; }
.fn-course__body { display: flex; flex: 1; flex-direction: column; padding: 12px 14px 14px; }
.fn-course__tag { margin: 0; font-size: 11.5px; font-weight: 600; color: #444444; }
.fn-course__title { margin: 4px 0 0; font-size: 16px; line-height: 1.3; font-weight: 600; color: #111821; text-wrap: balance; }
.fn-course__stats { margin: 4px 0 0; font-size: 12.5px; color: #444444; }
.fn-course__star { color: #FFB71B; }
.fn-course__by { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.fn-course__by img { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.fn-course__by span { display: flex; flex-direction: column; font-size: 12px; line-height: 1.35; color: #444444; }
.fn-course__by b { font-weight: 600; color: #111821; }
.fn-course__same { margin: 10px 0 0; padding: 7px 10px; border-radius: 12px; background: #FEF9EB; font-size: 12.5px; line-height: 1.45; color: #222222; }
.fn-course__learn { display: flex; flex-direction: column; gap: 5px; margin: 12px 0 0; padding: 0; list-style: none; }
.fn-course__learn li { display: flex; gap: 8px; font-size: 13px; line-height: 1.45; color: #444444; }
.fn-course__learn .fn-i { flex: none; margin-top: 3px; font-size: 11px; color: #00C2FF; }
.fn-courses__dots { display: flex; justify-content: center; gap: 0; margin-top: 2px; }
.fn .fn-courses__dot { display: grid; place-items: center; width: 24px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.fn-courses__dot::before { content: ""; width: 7px; height: 7px; border-radius: 9px; background: #CCCCCC; transition: width .3s var(--ob-ease), background-color .3s; }
.fn-courses__dot[aria-current]::before { width: 20px; background: linear-gradient(90deg, #FFC52A 0%, #F69515 100%); }
.fn .fn-courses__dot:focus-visible { outline: 2px solid #F69515; outline-offset: -4px; border-radius: 99px; }

/* layer 3: the resource already emailed */
.fn-res { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1.5px solid #DDEAD5; border-radius: 18px; background: #FFFFFF; }
.fn-res__thumb { flex: none; width: 72px; height: 92px; border-radius: 10px; object-fit: cover; background: #F1F7EE; box-shadow: 0 6px 14px -8px rgba(17, 24, 33, .25); }
.fn-res__thumb.is-icon { object-fit: contain; padding: 14px; }
.fn-res__txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fn-res__txt b { font-size: 15px; line-height: 1.35; font-weight: 600; color: #111821; }
.fn-res__inbox { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #F1F7EE; color: #222222; font-size: 12px; font-weight: 600; }
.fn-res__inbox .fn-i { color: #01BD33; }

/* layer 4: /ai's Daily Diary phone (diary-phone.js markup: the app's two screens take turns, emoji tiles cling to the
   phone and float), restyled in brand colours; then up to eight diary emoji, no borders, each bobbing on its own beat */
.fn-l4phone .vd { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fn-l4phone .vd__lift { position: relative; }
.fn-l4phone .vd__glow { position: absolute; inset: -22px; border-radius: 60px; background: radial-gradient(56% 46% at 50% 34%, rgba(255, 159, 33, .24), rgba(255, 159, 33, 0) 72%); }
.fn-l4phone .vd__float { position: absolute; z-index: 3; height: auto; filter: drop-shadow(0 8px 14px rgba(17, 24, 33, .18)); transform: rotate(var(--r, 0deg)); }
.fn-l4phone .vd__phone { position: relative; z-index: 1; width: 178px; padding: 7px; border-radius: 30px; background: #111821; box-shadow: 0 22px 44px -18px rgba(17, 24, 33, .45); }
.fn-l4phone .vd__screenwrap { position: relative; width: 100%; height: 300px; overflow: hidden; border-radius: 24px; background: #FFFFFF; }
.fn-l4phone .vd__screen { position: absolute; inset: 0; opacity: 0; transform: scale(.97); transition: opacity .45s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.fn-l4phone .vd__screen.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fn-l4phone .vd__screen img { display: block; width: 100%; height: auto; }
.fn-l4phone .vd__screen[data-screen="diary"] img { margin-top: -6px; }
.fn-l4phone .vd__toggle { position: relative; z-index: 2; display: inline-flex; padding: 4px; border: 1.5px solid #FFEBD0; border-radius: 999px; background: #FFFFFF; box-shadow: 0 8px 20px -10px rgba(246, 149, 21, .45); }
.fn .fn-l4phone .vd__tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 0; border-radius: 999px; background: transparent; color: #444444; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .35s, color .35s; }
.fn-l4phone .vd__tab svg { display: block; width: 15px; height: 15px; }
.fn .fn-l4phone .vd__tab.is-active { background: #111821; color: #FFFFFF; }
.fn-l4wrap .fn-lay__media-h { margin-top: 18px; }
.fn-l4 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 6px; margin: 0; padding: 0; list-style: none; }
.fn-l4 li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.fn-l4 img { width: 48px; height: 48px; filter: drop-shadow(0 6px 10px rgba(246, 149, 21, .25)); }
.fn-l4 span { max-width: 100%; font-size: 11px; line-height: 1.25; color: #222222; overflow-wrap: break-word; hyphens: manual; }   /* 3 columns so whole words fit; no mid-word breaks (e2e report, 11 Nov 2026) */

/* layer 5: workshops for their area, the one behind today's strategy first */
.fn-l5 { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fn-l5 li { display: grid; grid-template-columns: 32px 1fr; align-items: center; column-gap: 10px; padding: 10px 12px; border: 1.5px solid #F8D6E8; border-radius: 16px; background: #FFFFFF; }
.fn-l5 li.is-match { border-color: #EA4390; box-shadow: 0 8px 18px -12px rgba(234, 67, 144, .5); }
.fn-l5__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #FCEDF5; color: #EA4390; }
.fn-l5__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fn-l5__txt b { font-size: 14px; line-height: 1.35; font-weight: 600; color: #111821; }
.fn-l5__txt small { font-size: 12px; color: #444444; }
.fn-l5__txt .fn-l5__match { align-self: flex-start; margin-bottom: 3px; padding: 1px 7px; border-radius: 999px; background: #FCEDF5; color: #222222; font-size: 11px; font-weight: 700; }

/* layer 6: the app's check-in video in a phone frame */
.fn-l6 { display: flex; justify-content: center; padding: 6px 0 2px; }
.fn-l6phone { position: relative; width: 168px; aspect-ratio: 480 / 854; overflow: hidden; border: 6px solid #111821; border-radius: 30px; background: #111821; box-shadow: 0 22px 36px -18px rgba(17, 24, 33, .45); }
.fn-l6phone__notch { position: absolute; top: 6px; left: 50%; z-index: 1; width: 46px; height: 12px; border-radius: 99px; background: #111821; transform: translateX(-50%); }
.fn-l6__video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }

/* layer 7: questions parents ask, and today's strategy as a prompt */
.fn-l7 { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fn-l7 li { padding: 12px; border: 1.5px solid #FCECD3; border-radius: 16px; background: #FFFFFF; }
.fn-l7__who { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #444444; }
.fn-l7__av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #FFF4E5; color: #222222; font-size: 11px; font-weight: 700; }
.fn-l7 p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: #222222; }
.fn-l7__prompt { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: #FEF9EB; color: #222222; font-size: 13px; font-weight: 600; }
.fn-l7__prompt .fn-i { flex: none; color: #FF9F21; font-size: 15px; }

/* the close: all seven */
.fn-lays__done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 8px 0; text-align: center; }
.fn-lays__done-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fn-gradient); color: #FFFFFF; font-size: 18px; box-shadow: 0 10px 18px -8px rgba(246, 149, 21, .55); }
.fn-lays__done .fn-layers__sub { margin: 0; text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .fn-lay.is-in .fn-l4 li { animation: fn-sv-pop .5s var(--clay-spring) both; animation-delay: calc(200ms + var(--k) * 90ms); }
  .fn-lay.is-in .fn-l4 img { animation: fn-l4-bob calc(3.2s + var(--k) * .35s) ease-in-out calc(900ms + var(--k) * 150ms) infinite; }
  .fn-l4phone .vd__float { animation: fn-l4-float 6s ease-in-out infinite; }
  .fn-sv-bar .fn-btn.is-ready { animation: fn-sv-pop .5s var(--clay-spring); }
  .fn-lay.is-in .fn-l1__item, .fn-lay.is-in .fn-l5 li, .fn-lay.is-in .fn-l7 li { animation: fn-sv-rise .55s cubic-bezier(.22, 1, .36, 1) both; }
  .fn-lay.is-in :is(.fn-l1__item, .fn-l5 li, .fn-l7 li):nth-child(2) { animation-delay: .1s; }
  .fn-lay.is-in :is(.fn-l1__item, .fn-l5 li, .fn-l7 li):nth-child(3) { animation-delay: .2s; }
  .fn-lay-count__dots i.is-on { transform: scale(1.15); }
}
@keyframes fn-l4-bob { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-6px) rotate(-4deg); } 65% { transform: translateY(2px) rotate(3deg); } }
@keyframes fn-l4-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-8px) rotate(var(--r, 0deg)); } }
/* the layers page's button while it waits for layer 7: readable cream, not the grey disabled look */
.fn .fn-page--layers .fn-sv-bar .fn-btn:disabled { border-color: #CCCCCC; background: #CCCCCC; color: #444444; opacity: 1; }   /* grey while locked (Ash, 10 Nov 2026) */

/* ---------- ?s=summary (decision 146): the plan as one timeline, then the region ---------- */
.fn-sum { position: relative; list-style: none; margin: 4px 0 0; padding: 20px 18px 6px; border: 2px solid var(--clay-rim); border-radius: 24px; background: #FFFFFF; box-shadow: var(--clay); }
.fn-sum::before { content: ""; position: absolute; left: 33px; top: 40px; bottom: 44px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #FFC52A 0%, #F69515 100%); opacity: .45; }
.fn-sum__step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; }
.fn-sum__n { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(90deg, #FFC52A 0%, #F69515 100%); color: #FFFFFF; font-size: 14px; font-weight: 700; box-shadow: 0 0 0 4px #FFFFFF, 0 6px 12px -4px rgba(246, 149, 21, .45); }
.fn-sum__txt { display: flex; flex-direction: column; gap: 3px; padding-top: 1px; }
.fn-sum__txt .fn-kicker { font-size: 10.5px; }
.fn-sum__name { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 600; color: #111821; }
.fn-sum__line { margin: 0; font-size: 13.5px; line-height: 1.5; color: #444444; }
.fn-sum__asked { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: #EBF3E5; color: #222222; font-size: 11.5px; font-weight: 600; }
.fn-sum__asked .fn-i { color: #01BD33; font-size: 12px; }
.fn-regions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; text-align: center; }
.fn-regions .fn-layers__sub { margin: 0 0 6px; }
.fn-regions__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: left; }
.fn-region { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 12px; border: 1.5px solid #FFEBD0; border-radius: 14px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(17, 24, 33, .04), 0 4px 14px rgba(17, 24, 33, .05); font: inherit; font-size: 14.5px; font-weight: 500; color: #111821; cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s var(--clay-spring); }
.fn-region:last-child { grid-column: 1 / -1; justify-content: center; }
.fn-region:active { transform: scale(.98); }
.fn-region:focus-visible { outline: 3px solid #111821; outline-offset: 2px; }
.fn-region__flag { font-size: 22px; line-height: 1; }
.fn-region__name { flex: 1; }
.fn-region:last-child .fn-region__name { flex: 0 1 auto; }
.fn-region__tick { display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #F69515; color: #FFFFFF; font-size: 12px; }
.fn-region[aria-checked="true"] { border-color: #F69515; background: #FFF4E5; box-shadow: 0 0 0 4px rgba(246, 149, 21, .12); }
.fn-region[aria-checked="true"] .fn-region__tick { display: grid; animation: fn-pop .2s ease-out both; }
@media (prefers-reduced-motion: reduce) { .fn-region { transition: none; } .fn-region[aria-checked="true"] .fn-region__tick { animation: none; } }
.fn-region { position: relative; gap: 8px; padding: 10px 10px; text-align: left; font-size: 13.5px; white-space: nowrap; }
.fn-region__flag { font-size: 20px; }
.fn-region__tick { position: absolute; top: -7px; right: -7px; box-shadow: 0 0 0 2px #FFFFFF; }

/* the region sheet on ?s=summary: opens from "Check pricing", slides up over a dimmed page, Confirm hands off */
.fn-sheet { width: min(480px, 100%); max-width: 100%; max-height: 92dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: #FFFFFF; color: #111821; box-shadow: 0 -18px 40px rgba(17, 24, 33, .14); overflow: auto; }
.fn-sheet[open] { animation: fn-sheet-up .38s cubic-bezier(.22, 1, .36, 1) both; }
.fn-sheet::backdrop { background: rgba(17, 24, 33, .38); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
@keyframes fn-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.fn-sheet__in { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 20px calc(20px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.fn-sheet__in::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 99px; background: #CCCCCC; }
.fn-sheet__in .fn-regions__grid { margin: 8px 0 10px; }
.fn-sheet__x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #F7F8FC; cursor: pointer; }
.fn-sheet__x::before { content: ""; width: 14px; height: 14px; background: #111821; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
.fn-sheet__x:focus-visible { outline: 3px solid #111821; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fn-sheet[open] { animation: none; } }

/* ====================================================================================================
   UI/UX polish (decision 148, ui-ux-pro-max audit at 375px). Accessibility first: text at least 4.5:1 (3:1 when large),
   nothing under 12px, tap targets of 44px, focus never hidden under the sticky bars. Copy unchanged.
   ==================================================================================================== */
/* the main button: ink text on the Primary Gradient (white measured 1.6:1; ink is about 10:1) */
.fn .fn-btn:not(.fn-btn--ghost):not(:disabled), .fn .fn-fab:not(:disabled) { color: #111821; }
.fn-sum__n { color: #111821; }
/* orange text measured 2.0–2.7:1: kickers and "+ more" lines go to #444444 with an Orange 600 dot as the accent */
.fn-kicker, .fn-lay__promise, .fn-stage-q__k { display: flex; align-items: center; gap: 7px; color: #444444; font-size: 12px; }
.fn-kicker::before, .fn-lay__promise::before, .fn-stage-q__k::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(90deg, #FFC52A 0%, #F69515 100%); }
.fn-sum__txt .fn-kicker { font-size: 12px; }
.fn-sv-hero .fn-kicker, .fn-today .fn-kicker { justify-content: flex-start; }
.fn-l1__more, .fn-today__more { color: #444444; }
/* the headline's highlighted words: ink on a yellow highlighter band instead of orange text */
.fn-orange { color: inherit; background: linear-gradient(transparent 58%, rgba(255, 197, 42, .55) 58%, rgba(255, 197, 42, .55) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* greys below 4.5:1 move to the brand's body text colour */
.fn-option__sub, .fn-options--sub .fn-option__sub, .fn-fine, .fn-steps__text { color: #444444; }
/* nothing under 12px */
.fn-next__when, .fn-proof__label, .fn-layer__tag, .fn-sum__asked, .fn-lay__pill, .fn-course__best, .fn-course__badge, .fn-course__tag, .fn-course small { font-size: 12px; }
/* 44px tap targets */
.fn .fn-back, .fn-back { width: 44px; height: 44px; top: 6px; left: calc(var(--ob-col-l) + 6px); }
.fn-sheet__x { width: 44px; height: 44px; top: 10px; right: 10px; }
.fn .fn-link { display: inline-flex; align-items: center; min-height: 44px; }
.fn .fn-gate .fn-btn { min-height: 48px; height: 48px; }
.fn .fn-courses__dot { width: 28px; height: 44px; margin-block: -8px; }
/* keyboard focus never sits under the sticky bottom bar or the frosted header */
html:has(body.fn) { scroll-padding-top: 72px; scroll-padding-bottom: 120px; }
.fn-l4 span, .fn-lay__asked { font-size: 12px; }
/* region sheet: one region per row on phones up to 420px, so "United Kingdom" is never clipped (decision 150) */
@media (max-width: 420px) {
  .fn-regions__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fn-region, .fn-region:last-child { justify-content: flex-start; min-height: 48px; font-size: 14.5px; }
  .fn-region:last-child .fn-region__name { flex: 1; }
}
.fn-region__name { overflow: hidden; text-overflow: ellipsis; }
/* long child names (the field allows 50 characters) wrap instead of widening the page (decision 150) */
.fn .fn-btn { white-space: normal; text-wrap: balance; overflow-wrap: anywhere; }
.fn h1, .fn h2, .fn h3, .fn p, .fn .fn-option__label, .fn .fn-sv-lead { overflow-wrap: anywhere; }
/* cover (Ash, 11 Nov 2026): the headline sits closer to the progress line, and the phones are about three quarters the
   size (72%) so the "Start helping today" card and With VARA come up the screen */
.fn-page--landing { padding-top: calc(var(--ob-head) + 2px); }
.fn-hero { padding-top: 0; }
.fn-showcase { height: 240px; margin-top: 2px; }
.fn-tilt { transform-origin: 50% 0; transform: scale(.72) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.fn-rating { bottom: -4px; }

/* ---------- the checklist's questions in a bottom sheet (decision 151, option B) ----------
   While a question is open the checklist behind dims and blurs, and the step it belongs to swaps its spinner for a
   pause mark; the sheet says "Waiting for your answers" with a dot per question. */
.fn-steps__row.is-waiting .fn-steps__mark { animation: none; border-color: transparent; background: linear-gradient(90deg, #FFC52A 0%, #F69515 100%); }
.fn-steps__row.is-waiting .fn-steps__mark::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 9px; margin: -4.5px 0 0 -4px; border-left: 3px solid #111821; border-right: 3px solid #111821; }
.fn-loading.is-asking .fn-steps, .fn-loading.is-asking > .fn-logo { filter: blur(2px); opacity: .6; transition: filter .3s, opacity .3s; }
.fn-qsheet { width: min(480px, 100%); max-width: 100%; max-height: 90dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: #FFFFFF; color: #111821; box-shadow: 0 -18px 40px rgba(17, 24, 33, .16); overflow: auto; overscroll-behavior: contain; }
.fn-qsheet[open] { animation: fn-sheet-up .38s cubic-bezier(.22, 1, .36, 1) both; }
.fn-qsheet.is-leaving { animation: fn-sheet-down .22s ease-in both; }
@keyframes fn-sheet-down { to { transform: translateY(100%); } }
.fn-qsheet::backdrop { background: rgba(17, 24, 33, .28); }
.fn-qsheet__in { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 20px calc(22px + env(safe-area-inset-bottom, 0px)); }
.fn-qsheet__in::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 99px; background: #CCCCCC; }
.fn-qsheet__dots { display: flex; gap: 6px; }
.fn-qsheet__dots i { width: 22px; height: 5px; border-radius: 99px; background: #F7F8FC; box-shadow: inset 0 0 0 1px #CCCCCC; }
.fn-qsheet__dots i.is-done { background: #FFC52A; box-shadow: none; }
.fn-qsheet__dots i.is-on { background: linear-gradient(90deg, #FFC52A 0%, #F69515 100%); box-shadow: none; }
.fn-qsheet__wait { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin: 0; padding: 5px 11px; border-radius: 999px; background: #FFF4E5; color: #111821; font-size: 12.5px; font-weight: 600; }
.fn-qsheet__wait::before { content: ""; width: 7px; height: 9px; border-left: 2.5px solid #F69515; border-right: 2.5px solid #F69515; }
.fn-qsheet .fn-steps__gate { animation: none; }
.fn-qsheet .fn-gate { padding: 0; border: 0; background: none; box-shadow: none; gap: 10px; }
.fn-qsheet .fn-gate h2.fn-gate__label { font-size: 18px; line-height: 1.35; font-weight: 600; color: #111821; }
@media (prefers-reduced-motion: reduce) {
  .fn-qsheet[open], .fn-qsheet.is-leaving { animation: none; }
  .fn-loading.is-asking .fn-steps, .fn-loading.is-asking > .fn-logo { transition: none; }
}
/* inside the sheet a dropdown opens in place (it pushes the content down) instead of floating past the sheet's edge */
.fn-qsheet .fn-select__menu, .fn-qsheet .fn-select__menu.is-up { position: static; inset: auto; margin-top: 6px; transform-origin: top; max-height: 40dvh; overflow: auto; }
.fn-qsheet .fn-gate__count { display: none; }   /* the dots show progress; no "Question n of n" (Ash, 11 Nov 2026) */
.fn-today__why { background: var(--fn-anchor-cool); color: #111821; }   /* Ash, 11 Nov 2026: the "Why this works" box in #CDE2FD (was #65D7FF earlier the same day) */
.fn-sv-bub__logo { display: block; width: 28px; height: 28px; }

/* ---------- the goal card on ?s=strategy (decision 153): the goal, then the focus picks as swipeable cards ---------- */
.fn-goal { position: relative; padding: 18px 18px 16px; border: 2px solid var(--clay-rim); border-radius: 24px; background: linear-gradient(180deg, #F1FBFF 0, #FFFFFF 150px); box-shadow: var(--clay); }
.fn-goal__text { margin: 6px 0 0; font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: #111821; text-wrap: pretty; }
.fn-goal__needs { margin-top: 14px; padding-top: 12px; border-top: 1px solid #FFEBD0; }
.fn-goal__label { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #444444; }
.fn-goal__wrap { margin: 0 -18px; }
.fn-goal__rail { display: flex; gap: 10px; margin: 0; padding: 2px 18px 6px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 18px; scrollbar-width: none; }
.fn-goal__rail::-webkit-scrollbar { display: none; }
.fn-goal__rail:focus-visible { outline: 3px solid #111821; outline-offset: -3px; border-radius: 16px; }
.fn-goal__sub { position: relative; flex: 0 0 82%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px 46px; border: 1px solid #FFEBD0; border-radius: 16px; background: #FFF4E5; }
.fn-goal__rail.is-one .fn-goal__sub { flex-basis: 100%; }
.fn-goal__n { position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(90deg, #FFC52A 0%, #F69515 100%); color: #111821; font-size: 12px; font-weight: 700; }
.fn-goal__sub b { font-size: 15px; line-height: 1.35; font-weight: 600; color: #111821; }
.fn-goal__sub p { margin: 0; font-size: 13px; line-height: 1.5; color: #444444; }
.fn-goal__dots { display: flex; justify-content: center; gap: 2px; margin-top: 4px; }
.fn-goal__dot { display: grid; place-items: center; width: 28px; height: 44px; margin-block: -10px; padding: 0; border: 0; background: none; cursor: pointer; }
.fn-goal__dot::before { content: ""; width: 7px; height: 7px; border-radius: 9px; background: #CCCCCC; transition: width .3s, background-color .3s; }
.fn-goal__dot[aria-current]::before { width: 20px; background: linear-gradient(90deg, #FFC52A 0%, #F69515 100%); }
.fn-goal__dot:focus-visible { outline: 3px solid #111821; outline-offset: -6px; border-radius: 99px; }
@media (prefers-reduced-motion: reduce) { .fn-goal__dot::before { transition: none; } }

/* "Resources you may need for {name}" (decision 155): the heading sits above a card holding a swipe rail of resources;
   the rail, dots and 44px dot targets are the goal card's (.fn-goal__rail etc.) */
.fn-kit { display: flex; flex-direction: column; gap: 12px; }
.fn-kit__box { padding: 16px 18px 12px; border: 2px solid var(--clay-rim); border-radius: 24px; background: linear-gradient(180deg, #F8F2FE 0, #FFFFFF 120px); box-shadow: var(--clay); }
.fn-kit__item.fn-goal__sub { gap: 6px; padding: 14px 16px 14px; }
.fn-kit__kind { align-self: flex-start; padding: 3px 10px; border-radius: 99px; background: #FFFFFF; border: 1px solid #FFEBD0; font-size: 12px; font-weight: 600; line-height: 1.4; color: #111821; }
.fn-kit__app { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 600; color: #444444; }
.fn-kit__app .fn-i { font-size: 12px; color: #F69515; }
/* resource cards: a soft shadow and a shimmer that sweeps in from the bottom-right corner towards the centre
   (Ash, 11 Nov 2026). The rail gets extra bottom room so the shadow isn't clipped by its horizontal scroll. */
.fn-kit .fn-goal__rail { padding-bottom: 16px; }
.fn-kit .fn-goal__dots { margin-top: -6px; }
.fn-kit__item.fn-goal__sub { overflow: hidden; isolation: isolate; box-shadow: 0 10px 22px -12px rgba(17, 24, 33, .28), 0 2px 6px -2px rgba(246, 149, 21, .18);
  background: radial-gradient(120% 90% at 100% 100%, #FFEBD0 0, rgba(255, 235, 208, 0) 60%), #FFF4E5; }
.fn-kit__item.fn-goal__sub::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top left, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 62%) no-repeat;
  background-size: 300% 300%; background-position: 100% 100%; animation: fn-kit-shimmer 3.6s cubic-bezier(.22, 1, .36, 1) infinite; }
.fn-kit__item.fn-goal__sub:nth-child(2)::after { animation-delay: .5s; }
.fn-kit__item.fn-goal__sub:nth-child(3)::after { animation-delay: 1s; }
.fn-kit__item.fn-goal__sub:nth-child(4)::after { animation-delay: 1.5s; }
.fn-kit__item.fn-goal__sub:nth-child(5)::after { animation-delay: 2s; }
@keyframes fn-kit-shimmer {
  0% { background-position: 100% 100%; opacity: 0; }
  15% { opacity: 1; }
  55% { background-position: 50% 50%; opacity: 1; }
  75%, 100% { background-position: 50% 50%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .fn-kit__item.fn-goal__sub::after { animation: none; opacity: 0; } }

/* "Other parents with similar experiences" (Ash, 11 Nov 2026): parent questions as a swipe rail in the resources'
   card style (.fn-kit__box), each in quotes with the focus it is about */
.fn-peer { display: flex; flex-direction: column; gap: 6px; }
.fn-peer__sub { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: #444444; }
.fn-peer__item.fn-goal__sub { justify-content: space-between; gap: 10px; padding: 16px 16px 14px; background: #FFFFFF; border-color: #CDE2FD; box-shadow: 0 10px 22px -12px rgba(17, 24, 33, .22); }
.fn-peer .fn-goal__rail { padding-bottom: 16px; }
.fn-peer .fn-goal__dots { margin-top: -6px; }
.fn-peer__q { margin: 0; font-size: 15.5px; line-height: 1.45; font-weight: 500; font-style: italic; color: #111821; text-wrap: pretty; }
.fn-peer__about { font-size: 12px; font-weight: 600; color: #444444; }
/* the parent questions sit on the page with no outer card (Ash, 11 Nov 2026): the rail bleeds to the screen edges and
   lines its first card up with the page's 20px gutter */
.fn-peer { gap: 10px; }
.fn-peer .fn-goal__wrap { margin: 0 -20px; }
.fn-peer .fn-goal__rail { padding-inline: 20px; scroll-padding: 0 20px; }
/* the resources carousel's last card: "+13 more resources for Zoya's goal" */
.fn-kit__more.fn-goal__sub { justify-content: center; background: radial-gradient(120% 90% at 100% 100%, #FFC52A 0, rgba(255, 197, 42, 0) 70%), #FFEBD0; }
.fn-kit__more .fn-kit__more-n { font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: #111821; }
.fn-kit__more p { font-size: 15px; font-weight: 600; color: #111821; }

/* layer 3 on ?s=plan: the /ai funnel's resources walkthrough (640x360) in a rounded 16:9 frame (Ash, 11 Nov 2026) */
.fn-l3 { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px; background: #111821; box-shadow: 0 18px 32px -18px rgba(17, 24, 33, .45); }
.fn-l3__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* layer 4 on ?s=plan: /ai's frame around the Daily Diary phone (Ash, 11 Nov 2026), from quiz.css .moments: the domain
   pills drift up on the left, the logged moments drift down on the right, behind the phone and faded top and bottom.
   Colours moved onto the brand palette. The columns stop above the phone's Daily diary / Insights toggle. */
.fn-l4stage { position: relative; margin-inline: -20px; padding-inline: 20px; }
.fn-l4stage .fn-l4phone { position: relative; z-index: 2; }
.fn-mo { position: absolute; top: 0; bottom: 64px; width: calc(50% - 40px); z-index: 1; overflow: hidden; pointer-events: none; opacity: .85; display: flex;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
.fn-mo--l { left: 0; justify-content: flex-start; }
.fn-mo--r { right: 0; justify-content: flex-end; }
.fn-mo__track { display: flex; flex-direction: column; gap: 7px; width: 100%; padding: 10px 6px 10px 8px; will-change: transform; }
.fn-mo--l .fn-mo__track { align-items: flex-start; padding-left: 10px; animation: fn-mo-up 48s linear infinite; }
.fn-mo--r .fn-mo__track { align-items: flex-end; padding-right: 10px; animation: fn-mo-down 56s linear infinite; }
.fn-mo__pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border: 1px solid #FFEBD0; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 9px; font-weight: 600; color: #111821; white-space: nowrap; box-shadow: 0 2px 8px rgba(17, 24, 33, .06); }
.fn-mo__pill i { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.fn-mo__chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid #FFEBD0; border-radius: 9px; background: rgba(255, 255, 255, .92); white-space: nowrap; box-shadow: 0 2px 8px rgba(17, 24, 33, .06); }
.fn-mo__txt { display: inline-flex; flex-direction: column; }
.fn-mo__txt b { font-size: 7.5px; line-height: 1.25; font-weight: 600; color: #222222; }
.fn-mo__txt small { font-size: 6px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #444444; }
.fn-mo__check { display: inline-grid; place-items: center; flex: none; width: 11px; height: 11px; border-radius: 50%; background: #F1F7EE; color: #01BD33; }
.fn-mo__check .fn-i { font-size: 7px; }
@keyframes fn-mo-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes fn-mo-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .fn-mo__track { animation: none; } }
@media (max-width: 360px) { .fn-mo { display: none; } }
/* layer 4 on the narrowest phones: a little less gap and 11px labels so a long word ("Communication") fits its cell whole */
@media (max-width: 380px) {
  .fn-l4 { column-gap: 2px; }
  .fn-l4 span { font-size: 11px; letter-spacing: -.01em; }
}
/* the checklist question sheet's close button (Ash, 11 Nov 2026): top right, clear of the "Waiting for your answers" pill */
.fn-qsheet__x { z-index: 2; top: 14px; right: 14px; }

/* save-plan email: "Did you mean priya@gmail.com?" with Yes / No (Ash, 11 Nov 2026) */
.fn-email__fix { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 10px 12px; border: 1px solid #FFEBD0; border-radius: 12px; background: #FFF4E5; }
.fn-email__fix-q { margin: 0; font-size: 14px; line-height: 1.4; color: #111821; }
.fn-email__fix-q .fn-nowrap { font-weight: 600; }
.fn-email__fix-actions { display: flex; gap: 14px; }
.fn-email__fix-actions .fn-link { min-height: 44px; font-size: 14px; font-weight: 600; }

/* ?s=plan layer 1: "Goal: <the goal card's goal>" under "Strategies for Zoya's goal", the goal in bold on #FFECF6 (Ash, 11 Nov 2026) */
.fn-lay__goal { margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; background: #FFECF6; font-size: 15px; line-height: 1.45; color: #111821; }
.fn-lay__goal b { font-weight: 600; }
.fn-lay__goal { display: flex; align-items: flex-start; gap: 8px; }
.fn-lay__goal-ic { flex: none; font-size: 18px; line-height: 1.3; }

/* ---------- first screen, as /gi's landing on a phone (Ash, 11 Nov 2026) ----------
   No progress line or frosted strip on this screen (nothing to go back to yet); the headline, lede, phones, rating
   chip and spacing take /gi's sizes (src/assets/gi/gi.css .hero/.showcase/.chip-float), replacing the 72% phones above.
   Poppins is loaded to 700 on both pages, so /gi's 800/900 weights draw as 700 there too. */
#fn-root:is([data-screen="situation"], :not([data-screen]))::before,
#fn-root:is([data-screen="situation"], :not([data-screen]))::after { display: none; }
body.fn:has(#fn-root:is([data-screen="situation"], :not([data-screen])))::after { display: none; }
.fn-page--landing { padding-top: 36px; }
.fn-hero { gap: 14px; padding-top: 0; }
.fn-hero__h { font-size: 30px; line-height: 1.12; letter-spacing: -.02em; text-wrap: wrap; }
.fn-hero__lede { max-width: 34ch; font-size: 15px; line-height: 1.6; color: #444444; }
.fn-showcase { height: 330px; margin-top: 22px; }
.fn-tilt { transform-origin: 50% 50%; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.fn-showcase .fn-rating { bottom: -6px; flex-direction: row; gap: 10px; border: 0; border-radius: 10px; box-shadow: 0 0 9px rgba(0, 0, 0, .12); font-weight: 700; }
.fn-paths { margin-top: 18px; }

/* "Where are you right now?": /gi's stage question and rows (gi.css .stage-q, .stagerow with body.gi's colours) */
.fn-stage-q { margin-top: 24px; }
.fn-stage-q__h { font-size: clamp(20px, calc((100vw - 40px) / 13.2), 24px); line-height: 1.5; font-weight: 700; }
.fn-stage-q__hint { margin: 0 0 12px; font-size: 13px; line-height: 1.45; }
.fn-stagelist { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.fn-stagerow {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 24px; column-gap: 12px; row-gap: 10px; align-items: start;
  width: 100%; padding: 14px; border: 2px solid #CCCCCC; border-radius: 18px; background: #FFFFFF; text-align: left;
  font: inherit; color: #111821; cursor: pointer; touch-action: manipulation;
  transition: border-color .2s, background-color .2s, transform .15s var(--ob-ease);
}
.fn-stagerow:hover { border-color: #FFB71B; }
.fn-stagerow:active { transform: scale(.985); }
.fn-stagerow:focus-visible { outline: 3px solid #F69515; outline-offset: 2px; }
.fn-stagerow[aria-pressed="true"] { border-color: #F69515; background: #FFF4E5; }
.fn-stagerow__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #F7F8FC; color: #111821; }
.fn-stagerow__ic svg { width: 20px; height: 20px; }
.fn-stagerow.c1 .fn-stagerow__ic { background: #FFF4E5; }
.fn-stagerow.c2 .fn-stagerow__ic { background: #E4F1FF; }
.fn-stagerow.c3 .fn-stagerow__ic { background: #F3E9FD; }
.fn-stagerow.c4 .fn-stagerow__ic { background: #FCEDF5; }
.fn-stagerow.c5 .fn-stagerow__ic { background: #EBF3E5; }
.fn-stagerow.c6 .fn-stagerow__ic { background: #E4F6FE; }
.fn-stagerow__txt { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.fn-stagerow__txt b { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.fn-stagerow__txt span { font-size: 13px; font-weight: 500; line-height: 1.4; color: #444444; }
.fn-stagerow.is-none { align-items: center; }
.fn-stagerow.is-none .fn-stagerow__txt { padding-top: 0; }
.fn-stagerow__radio { width: 24px; height: 24px; margin-top: 7px; border: 2px solid #CCCCCC; border-radius: 50%; box-sizing: border-box; transition: background-color .2s, box-shadow .2s; }
.fn-stagerow.is-none .fn-stagerow__radio { margin-top: 0; }
.fn-stagerow[aria-pressed="true"] .fn-stagerow__radio { border-color: #F69515; background: #F69515; box-shadow: inset 0 0 0 4px #FFF4E5; }
.fn-stagerow__pills { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 6px; }
.fn-stagerow__pills > span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px 5px 7px; border-radius: 999px; background: #F7F8FC; font-size: 12px; font-weight: 600; line-height: 1.1; color: #222222; }
.fn-stagerow[aria-pressed="true"] .fn-stagerow__pills > span { background: #FFFFFF; }
.fn-stagerow__pills .fn-ph-ic { font-size: 13px; color: #01BD33; }
@media (prefers-reduced-motion: reduce) { .fn-stagerow, .fn-stagerow__radio { transition: none; } .fn-stagerow:active { transform: none; } }

/* the privacy policy link in the email panel's fine print (as /ai's save screen) */
.fn-save__fine a { color: #111821; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.fn-save__fine a:focus-visible { outline: 2px solid #F69515; outline-offset: 2px; border-radius: 2px; }

/* ---------- a calmer question sheet on ?s=compile (decision 190, Ash 13 Nov 2026: "feels a bit flashy") ----------
   A lighter dim behind it, a slow fade-and-rise instead of a full slide, a softer shadow, a grey "Waiting for your
   answers", the name reaction in plain ink with a small green tick, a fainter focus ring and no glow on Continue.
   --fn-kb (aboveKeyboard in core.js) lifts it above the on-screen keyboard. */
.fn-qsheet { margin-bottom: var(--fn-kb, 0px); max-height: calc(90dvh - var(--fn-kb, 0px)); box-shadow: 0 -6px 24px rgba(17, 24, 33, .07); transition: margin-bottom .2s ease-out, max-height .2s ease-out; }
.fn-qsheet[open] { animation: fn-qsheet-in .55s cubic-bezier(.22, 1, .36, 1) both; }
.fn-qsheet.is-leaving { animation: fn-qsheet-out .32s ease-in both; }
@keyframes fn-qsheet-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fn-qsheet-out { to { opacity: 0; transform: translateY(20px); } }
.fn-qsheet::backdrop { background: rgba(17, 24, 33, .12); animation: fn-qsheet-dim .5s ease-out both; }
@keyframes fn-qsheet-dim { from { opacity: 0; } to { opacity: 1; } }
.fn-loading.is-asking .fn-steps, .fn-loading.is-asking > .fn-logo { filter: blur(1.5px); opacity: .7; transition: filter .5s ease-out, opacity .5s ease-out; }
.fn-qsheet__wait { background: #F7F8FC; color: #444444; font-weight: 500; }
.fn-qsheet__wait::before { border-color: #CCCCCC; }
.fn-qsheet .fn-field__reaction { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: #444444; }
.fn-qsheet .fn-field__reaction::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8.5'/%3E%3C/svg%3E") center / 11px no-repeat, #01BD33; }
.fn-qsheet .fn-field__reaction[hidden] { display: none; }
.fn .fn-qsheet .fn-gate__input:focus { border-color: #F69515; box-shadow: 0 0 0 3px rgba(246, 149, 21, .08); }
.fn .fn-qsheet .fn-gate .fn-btn:not(.fn-btn--ghost):not(:disabled) { box-shadow: none; }
.fn-qsheet .fn-chip[aria-pressed="true"] { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .fn-qsheet, .fn-qsheet[open], .fn-qsheet.is-leaving, .fn-qsheet::backdrop { transition: none; animation: none; }
}

/* ---------- the support-systems question as a tick list (decision 191) ----------
   Its options became benefit-led ("Daily guidance on what to try next"), too long for pills: one full-width row each,
   a square tick box on the left, picked rows in soft orange like the first screen's stage rows. */
.fn-chips--list { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
.fn-chips--list .fn-chip { justify-content: flex-start; width: 100%; min-height: 48px; padding: 10px 14px; gap: 12px; border: 1px solid #CCCCCC; border-radius: 12px; font-size: 14px; line-height: 1.35; text-align: left; color: #222222; }
.fn-chips--list .fn-chip:active { transform: scale(.99); }
.fn-chips--list .fn-chip__tick { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border: 1.5px solid #CCCCCC; border-radius: 6px; background: #FFFFFF; color: transparent; font-size: 12px; animation: none; transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.fn-chips--list .fn-chip[aria-pressed="true"] { background: #FFF4E5; border-color: #F69515; color: #111821; box-shadow: none; }
.fn-chips--list .fn-chip--multi[aria-pressed="true"] .fn-chip__tick { display: inline-grid; border-color: transparent; background: #F69515; color: #FFFFFF; animation: none; }
@media (prefers-reduced-motion: reduce) { .fn-chips--list .fn-chip__tick { transition: none; } }
/* the plan page's and summary's "You asked for …" now name the pick (decision 191), so it is a light line of text with a
   green tick rather than a tinted pill, which looked heavy once it ran to a second line */
.fn-lay__asked, .fn-sum__asked { align-items: flex-start; gap: 6px; max-width: 100%; padding: 0; border-radius: 0; background: none; color: #444444; font-size: 12.5px; font-weight: 500; line-height: 1.4; white-space: normal; }
.fn-lay__asked .fn-i, .fn-sum__asked .fn-i { flex: none; margin-top: 2px; font-size: 13px; color: #01BD33; }
.fn-lay__top:has(.fn-lay__asked) { row-gap: 8px; }

/* ---------- 16px text fields (Ash, 13 Nov 2026, iPhone 13) ----------
   iOS Safari zooms the page in when a field under 16px gets focus, and stays zoomed: after the name question the sheet
   was cut off on the right (the ×, the age list and Continue). Every field in the sheet is 16px, so it never zooms. */
.fn .fn-gate__input, .fn .fn-save .fn-gate__input { height: 48px; font-size: 16px; }
.fn .fn-gate__input::placeholder { font-size: 16px; }

/* "Saving Maya's plan…" on the way back from Google's sign-in on iPhone/iPad (decision 199) */
.fn-saving { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 70dvh; text-align: center; }
.fn-saving__text { margin: 0; font-size: 16px; font-weight: 500; color: #111821; }

/* the "usual path" card's stuck emoji and orange trail animate left and width, which the browser re-lays out every
   frame. They play only while the card is on screen (situation.js toggles .is-on), so they cost nothing at load,
   when the card is below the fold on a phone (decision 200). */
.fn-paths:not(.is-on) .fn-track__stuck, .fn-paths:not(.is-on) .fn-track__trail { animation-play-state: paused; }