/* ============================================================
   J PARK & ASSOCIATES — homepage components
   Loaded only by index.html (after styles.css, before footer.css).
   ============================================================ */

/* ===== Homepage components =====
   Each component is plain DOM + the matching init function in home.js. Every
   one has a no-JS fallback (content visible) and a prefers-reduced-motion end
   state (--dur: 0 collapses CSS transitions). The footer card, directory and
   contact form live in footer.css. */
.hm [hidden] { display: none !important; }
:where(.hm) button { font: inherit; }
.hm .section + .section { border-top: 1px solid var(--hline); }

/* ---------- 0. Intro: scroll zoom reveal ---------- */
.rv {
  --rv-side-fs: 40px; --rv-side-w: 160px; --rv-gap: 16px; --rv-cta-fs: 42px; --rv-icon: 52px;
  position: relative; height: 100vh; height: 100svh; background: var(--cream-50);
}
@media (min-width: 1800px) { .rv { --rv-side-fs: 55px; --rv-side-w: 250px; --rv-gap: 20px; --rv-cta-fs: 56px; --rv-icon: 60px; } }
@media (max-width: 810px) { .rv { --rv-side-fs: 22px; --rv-side-w: 100px; --rv-gap: 10px; --rv-cta-fs: 26px; --rv-icon: 42px; } }
html.js .rv { height: 400vh; height: 400svh; }
.rv-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; align-items: center; justify-content: center; gap: var(--rv-gap);
  padding: 0; overflow: hidden;
}
.rv-side { flex-shrink: 0; width: var(--rv-side-w); white-space: nowrap; font: 500 var(--rv-side-fs)/1 var(--serif); color: var(--navy-900); }
.rv-side.left { text-align: right; }
.rv-side.right { text-align: left; }
.rv-win {
  position: relative; flex-shrink: 0; overflow: hidden; background: var(--navy-950);
  width: 100vw; height: 100vh; height: 100svh; border-radius: 0;
}
html.js .rv-win { width: 15vw; height: 5vh; border-radius: 50px; }
.rv-art { position: absolute; left: 50%; top: 50%; width: 100vw; height: 100vh; height: 100svh; transform: translate(-50%, -50%); will-change: transform; }
.rv-art .layer { position: absolute; inset: 0; will-change: transform; }
.rv-art svg { display: block; width: 100%; height: 100%; }
.rv-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(17, 28, 51, 0.55) 0%, rgba(17, 28, 51, 0.25) 75%); opacity: 0; }
html:not(.js) .rv-shade { opacity: 1; }
.rv-gilt { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 1px rgba(224, 200, 126, 0.9), inset 0 0 0 5px rgba(201, 168, 76, 0.14); }
.rv-center {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 22px; width: min(760px, 86vw); text-align: center; color: var(--cream-50);
}
html.js .rv-center { opacity: 0; }
.rv-lockup { width: 100%; line-height: 0; }
.rv-lockup img { display: block; width: 100%; height: auto; }
.rv-cta { display: inline-flex; align-items: center; gap: 12px; font: 500 calc(var(--rv-cta-fs) * 0.42)/1.2 var(--sans); color: var(--cream-50); text-decoration: none; transition: color calc(0.25s * var(--dur)); }
.rv-cta .icon { display: grid; place-items: center; flex-shrink: 0; width: var(--rv-icon); height: var(--rv-icon); border-radius: 50%; background: var(--gold-500); color: var(--navy-900); transition: background-color calc(0.25s * var(--dur)); }
.rv-cta .icon svg { width: 40%; height: 40%; }
.rv-cta:hover { color: var(--gold-300); }
.rv-cta:hover .icon { background: var(--gold-300); }
.rv-cue { position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 1; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; font: 600 11px/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: var(--grey-500); transition: opacity calc(0.4s * var(--dur)) ease; }
.rv-cue .track { position: relative; width: 1px; height: 46px; overflow: hidden; background: rgba(27, 42, 74, 0.16); }
.rv-cue i { position: absolute; left: 0; top: 0; width: 1px; height: 46px; background: var(--gold-500); transform: translateY(-100%); animation: rv-cue calc(2.2s * var(--dur)) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes rv-cue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }
html:not(.js) .rv-side, html:not(.js) .rv-cue { display: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .rv { height: 100vh; height: 100svh; }
  html.js .rv-win { width: 100vw; height: 100vh; height: 100svh; border-radius: 0; }
  html.js .rv-center { opacity: 1; transform: translate(-50%, -50%); visibility: visible !important; }
  .rv-shade { opacity: 1; }
  .rv-side, .rv-cue { display: none; }
  .hm-hero h2 em::after { transform: none; }
}

/* ---------- 0b. Hero text ---------- */
.hm-hero { background: var(--navy-950); color: var(--cream-50); padding-block: clamp(72px, 9vw, 112px); }
.hm-hero .kicker { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 18px; }
.hm-hero h1 { color: var(--cream-50); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; }
.hm-hero h2 { color: var(--cream-50); font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 600; margin-top: 8px; }
.hm-hero h2 em { position: relative; display: inline-block; color: var(--gold-300); font-style: italic; }
.hm-hero h2 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.06em; height: 2px; background: var(--gold-500); transform-origin: 0 50%; }
.hm-hero .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.hm-hero .line > span { display: inline-block; }
.hm-hero p { max-width: 58ch; color: rgba(245, 240, 232, 0.82); margin-top: 22px; font-size: 1.1rem; }
.hm-hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hm-hero .hero-note { margin-top: 18px; font-size: 0.95rem; color: rgba(245, 240, 232, 0.72); }
.hm-hero .hero-note a { color: var(--gold-300); }
/* Headline rise: home.js adds .armed (start state, screen only), then .in once the hero is on screen. The
   transitions sit on .armed.in so arming snaps to the start state instead of animating out of view. Without
   .armed (no JS, reduced motion, print) the hero is fully shown with the underline drawn. */
@media screen {
  html.js .hm-hero.armed:not(.in) .line > span { transform: translateY(105%); }
  html.js .hm-hero.armed:not(.in) .kicker { opacity: 0; letter-spacing: 0.5em; }
  html.js .hm-hero.armed:not(.in) .fade { opacity: 0; transform: translateY(12px); }
  html.js .hm-hero.armed:not(.in) h2 em::after { transform: scaleX(0); }
}
.hm-hero.armed.in .line > span { transition: transform calc(1s * var(--dur)) cubic-bezier(0.2, 0.75, 0.2, 1) calc(var(--d) * 110ms + 120ms); }
.hm-hero.armed.in .kicker { transition: opacity calc(0.8s * var(--dur)) ease, letter-spacing calc(1.2s * var(--dur)) cubic-bezier(0.2, 0.75, 0.2, 1); }
.hm-hero.armed.in .fade { transition: opacity calc(0.8s * var(--dur)) ease 0.55s, transform calc(0.8s * var(--dur)) ease 0.55s; }
.hm-hero.armed.in h2 em::after { transform: scaleX(1); transition: transform calc(0.9s * var(--dur)) cubic-bezier(0.65, 0, 0.35, 1) 0.75s; }

/* ---------- 1. Pain points: pill tabs ---------- */
#pain { background: var(--cream-50); }
.pp-nav { position: relative; display: inline-flex; padding: 6px; margin-top: 32px; background: var(--pill-bg); border-radius: 999px; max-width: 100%; user-select: none; -webkit-user-select: none; }
.pp-ind { position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; background: var(--navy-900); border-radius: 999px; z-index: 0; box-shadow: 0 2px 8px rgba(17, 28, 51, 0.18); }
.pp-ind.ready { transition: transform calc(0.3s * var(--dur)) cubic-bezier(0.2, 0.75, 0.2, 1), width calc(0.3s * var(--dur)) cubic-bezier(0.2, 0.75, 0.2, 1); }
.pp-tab { position: relative; z-index: 1; flex: 1 1 auto; white-space: nowrap; padding: 12px 22px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font: 500 17px/20px var(--sans); letter-spacing: -0.37px; color: var(--navy-900); transition: color calc(0.3s * var(--dur)) ease; }
.pp-tab:hover { color: var(--navy-700); }
.pp-tab[aria-selected="true"] { color: var(--cream-50); }
@media (max-width: 520px) {
  .pp-nav { display: flex; width: 100%; }
  .pp-tab { padding: 11px 10px; font-size: 15px; letter-spacing: -0.2px; }
}
html:not(.js) .pp-nav { display: none; }
.pp-panel { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; background: var(--white); border: 1px solid var(--hline); border-radius: 14px; padding: clamp(22px, 4vw, 40px); }
.pp-panel blockquote { margin: 0 0 18px; font: italic 600 20px/1.4 var(--serif); color: var(--navy-700); }
.pp-panel h3 { font-size: 26px; margin-bottom: 12px; }
.pp-panel p { color: var(--grey-500); }
.pp-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font: 600 15px/1.2 var(--sans); color: var(--navy-900); text-decoration: none; }
.pp-more svg { width: 14px; height: 14px; transition: transform calc(0.25s * var(--dur)) ease; }
.pp-more:hover { color: var(--gold-ink); }
.pp-more:hover svg { transform: translateX(3px); }
@media (max-width: 760px) { .pp-panel { grid-template-columns: 1fr; gap: 22px; } }
.pp-panel .checks { list-style: none; display: grid; gap: 10px; padding: 22px; background: var(--paper); border-radius: 10px; align-self: start; }
.pp-panel .checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.pp-panel .checks li::before {
  content: ""; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%;
  background: var(--gold-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231B2A4A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---------- 3. What actually changes: before/after grid ---------- */
#before-after { background: var(--paper); }
.ba-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ba-grid { grid-template-columns: 1fr; } }
.ba-card { position: relative; border-radius: 14px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: 0 1px 2px rgba(17, 28, 51, 0.06); }
/* The cards share the grid's rows, so every white "old way" panel is as tall as the tallest one in the row
   and the white/navy split lands on the same line across all cards. row-gap: 0 keeps the two halves touching. */
@supports (grid-template-rows: subgrid) {
  .ba-card { grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
}
.sl-o, .sl-n { display: grid; gap: 12px; align-content: start; }
.sl-o { padding: 24px 24px 22px; background: var(--white); border: 1px solid var(--hline); border-bottom: 0; border-radius: 14px 14px 0 0; color: var(--grey-500); }
.sl-n { padding: 24px 24px 28px; background: var(--navy-900); border: 1px solid var(--navy-900); border-radius: 0 0 14px 14px; color: rgba(245, 240, 232, 0.92); }
.sl-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sl-tag { display: inline-block; font: 600 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.sl-o .sl-tag { color: var(--grey-500); }
.sl-n .sl-tag { color: var(--gold-300); }
.sl-num { font: 600 12px/1 var(--sans); letter-spacing: 0.12em; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.sl-item { display: flex; gap: 12px; align-items: flex-start; }
.sl-item > span:last-child { flex: 1 1 0; min-width: 0; }
.sl-txt { font: 600 19px/1.35 var(--serif); }
.sl-o .sl-txt { color: var(--navy-900); }
.sl-mark { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; }
.sl-mark svg { width: 13px; height: 13px; }
.sl-mark.x { background: rgba(27, 42, 74, 0.08); color: var(--grey-500); }
.sl-mark.v { background: var(--gold-500); color: var(--navy-900); }
.ba-foot { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 18px 32px; flex-wrap: wrap; }
.ba-foot p { color: var(--grey-500); max-width: 48ch; }
.ba-foot p strong { color: var(--navy-900); }
.ba-foot .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- 4. Industries: six cards, all shown in full ---------- */
#industries { background: var(--white); }
.bn-frame { --bn-accent: var(--gold-500); --bn-gap: 10px; --bn-r: 13px; margin-top: 32px; padding: 14px; background: var(--navy-950); border-radius: calc(var(--bn-r) + 6px); }
.ind { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bn-gap); }
@media (max-width: 900px) { .ind { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ind { grid-template-columns: 1fr; } }
.ind-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 22px;
  border-radius: var(--bn-r); border: 1px solid rgba(255, 255, 255, 0.07); background: var(--c-bg); color: var(--cream-50);
}
.bn-wm { position: absolute; right: -14px; top: -14px; width: 120px; height: 120px; color: var(--cream-50); opacity: 0.07; z-index: 0; }
.bn-wm svg { width: 100%; height: 100%; }
.ind-card > :not(.bn-wm) { position: relative; z-index: 1; }
.bn-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); color: var(--bn-accent); flex-shrink: 0; }
.bn-ico svg { width: 20px; height: 20px; }
.ind-row { display: flex; align-items: center; gap: 10px; }
.bn-num { font: 600 11px/1 var(--sans); letter-spacing: 0.12em; color: var(--bn-accent); font-variant-numeric: tabular-nums; }
.ind-title { margin: 4px 0 0; font: 600 21px/1.25 var(--serif); color: var(--cream-50); letter-spacing: -0.01em; }
.ind-desc { font-size: 14px; line-height: 1.55; color: var(--cream-50); opacity: 0.8; margin: 0; }
.bn-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.bn-tags span { font: 500 12px/1 var(--sans); padding: 6px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: var(--cream-50); border: 1px solid rgba(255, 255, 255, 0.16); }
.bn-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; color: var(--grey-500); font-size: 14px; }

/* ---------- 5. A note from the founder ---------- */
.note-band { background: var(--cream-50); text-align: left; padding-block: clamp(96px, 14vw, 160px); }
.tw { margin: 0; max-width: 30ch; font: 600 clamp(24px, 3.2vw, 38px)/1.35 var(--serif); color: var(--navy-900); text-wrap: pretty; }
.tw .k { color: var(--gold-ink); }
.tw-sig { margin-top: 24px; display: flex; gap: 14px; align-items: center; }
.tw-mono { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--gold-500); display: grid; place-items: center; font: 700 18px/1 var(--serif); color: var(--navy-900); flex-shrink: 0; }
.tw-sig b { display: block; font: 600 16px/1.3 var(--sans); color: var(--navy-900); }
.tw-sig span { font-size: 14px; color: var(--grey-500); }

/* ---------- 7. How it works: accordion ---------- */
#how { background: var(--paper); }
.hw-row { display: flex; gap: 72px; align-items: flex-start; margin-top: 40px; }
.hw-acc { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hw-item { position: relative; overflow: hidden; border-radius: 20px; transition: background-color calc(0.3s * var(--dur)) ease; }
.hw-item:hover:not(.open) { background: rgba(27, 42, 74, 0.04); }
.hw-item.open { background: var(--white); box-shadow: 0 1px 2px rgba(17, 28, 51, 0.05); }
.hw-item h3 { margin: 0; font: inherit; }
.hw-hd { all: unset; box-sizing: border-box; width: 100%; min-height: 76px; display: flex; align-items: center; gap: 20px; padding: 22px 28px; cursor: pointer; border-radius: 20px; }
.hw-hd:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.hw-badge { flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; background: rgba(27, 42, 74, 0.06); color: var(--navy-900); transition: background-color calc(0.3s * var(--dur)) ease, color calc(0.3s * var(--dur)) ease; }
.hw-item.open .hw-badge { background: var(--navy-900); color: var(--cream-50); }
.hw-ttl { flex: 1 1 auto; min-width: 0; font: 600 28px/1.15 var(--serif); letter-spacing: -0.01em; color: var(--navy-900); }
.hw-chev { flex-shrink: 0; width: 20px; height: 20px; color: var(--navy-900); transition: transform calc(0.45s * var(--dur)) cubic-bezier(0.4, 0.2, 0.2, 1); }
.hw-item.open .hw-chev { transform: rotate(180deg); }
html.js .hw-pnl { overflow: hidden; height: 0; }
html.js .hw-item.open .hw-pnl { height: auto; }
.hw-pnl-in { padding: 0 28px 28px 84px; display: flex; flex-direction: column; gap: 16px; }
.hw-pnl-in p { max-width: 560px; color: var(--grey-500); font-size: 16px; line-height: 1.6; }
.hw-facts { list-style: none; display: grid; gap: 6px; }
.hw-facts li { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--slate-600); }
.hw-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); flex-shrink: 0; }
.hw-phone { font: 600 18px/1.2 var(--sans); color: var(--navy-900); text-decoration: none; font-variant-numeric: tabular-nums; }
.hw-phone:hover { color: var(--gold-ink); }
.hw-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0; margin-top: 4px; background: transparent; color: var(--navy-900); font: 500 15px/1 var(--sans); text-decoration: none; }
.hw-cta:hover { color: var(--gold-ink); }
.hw-cta svg { width: 14px; height: 14px; transition: transform calc(0.25s * var(--dur)) ease; }
.hw-cta:hover svg { transform: translateX(3px); }
.hw-vis-col { position: relative; flex: 0 0 46%; align-self: stretch; }
.hw-vis-move { position: absolute; left: 0; right: 0; top: 0; transition: transform calc(0.45s * var(--dur)) cubic-bezier(0.4, 0.2, 0.2, 1); }
.hw-vis { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity calc(0.45s * var(--dur)) ease; }
.hw-vis.on { opacity: 1; z-index: 2; }
.hw-vis svg, .hw-invis svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hw-invis { position: relative; width: 100%; overflow: hidden; border-radius: 18px; display: none; aspect-ratio: 1.4; }
.hw.stacked .hw-vis-col { display: none; }
.hw.stacked .hw-invis { display: block; }
.hw.stacked .hw-ttl { font-size: 20px; }
.hw.stacked .hw-hd { min-height: 60px; padding: 14px 18px; gap: 14px; }
.hw.stacked .hw-badge { width: 30px; height: 30px; font-size: 13px; }
.hw.stacked .hw-pnl-in { padding: 0 18px 18px 18px; }
@media (max-width: 1100px) { .hw-ttl { font-size: 25px; } }
html:not(.js) .hw-vis-col { display: none; }

/* ---------- 8. Tax-season stress test ---------- */
#stress-test { background: var(--cream-50); }
.sc-head { max-width: 720px; }
.sc-phone {
  --sc-rcv-bg: var(--cream-50); --sc-rcv-fg: var(--navy-900); --sc-snd-bg: var(--navy-900); --sc-snd-fg: var(--cream-50);
  margin: 30px 0 0; max-width: 720px; border-radius: 24px; background: var(--white); border: 1px solid var(--hline);
  box-shadow: 0 18px 40px rgba(17, 28, 51, 0.1); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto;
}
.sc-bar { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--hline); background: var(--white); }
.sc-bar b { display: block; font: 600 15px/1.2 var(--sans); color: var(--navy-900); }
.sc-bar .sub { font-size: 12px; color: var(--grey-500); }
.sc-restart { margin-left: auto; background: none; border: 0; color: var(--grey-500); font: 500 13px var(--sans); cursor: pointer; padding: 6px 4px; }
.sc-restart:hover { color: var(--navy-900); }
.sc-log { overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 180px; max-height: min(480px, 70vh); }
.sc-log .spacer { display: none; }
.sc-row { display: flex; gap: 8px; align-items: flex-end; }
.sc-row.me { justify-content: flex-end; }
.sc-ava { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--gold-500); display: grid; place-items: center; font: 700 12px/1 var(--serif); color: var(--navy-900); flex-shrink: 0; background: var(--white); }
.sc-bar .sc-ava { width: 38px; height: 38px; }
.sc-bubble { max-width: 80%; padding: 12px 16px; border-radius: 16px; font: 400 15px/1.45 var(--sans); letter-spacing: -0.01em; word-break: break-word; background: var(--sc-rcv-bg); color: var(--sc-rcv-fg); }
.sc-row.me .sc-bubble { background: var(--sc-snd-bg); color: var(--sc-snd-fg); }
.sc-bubble strong { font-weight: 700; }
.sc-bubble.in { animation: sc-in calc(0.25s * var(--dur)) ease-out both; }
@keyframes sc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sc-meter-bub { width: min(260px, 100%); display: grid; gap: 8px; }
.sc-meter { height: 8px; border-radius: 999px; background: rgba(27, 42, 74, 0.12); overflow: hidden; }
.sc-meter span { display: block; height: 100%; width: 8%; background: var(--gold-500); border-radius: 999px; transition: width calc(0.9s * var(--dur)) ease; }
.sc-meter-lbl { font-size: 12px; opacity: 0.8; font-variant-numeric: tabular-nums; }
.sc-composer { border-top: 1px solid var(--hline); background: var(--white); padding: 12px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; min-height: 66px; align-items: center; }
.sc-composer .btn { padding: 10px 22px; }
.sc-composer form { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; }
.sc-composer input { flex: 1 1 200px; min-width: 0; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--hline); font: 15px var(--sans); color: var(--slate-600); background: var(--white); }
.sc-composer input[aria-invalid="true"] { border-color: var(--err-on-light); }
.sc-composer .err { flex-basis: 100%; font-size: 12px; color: var(--err-on-light); min-height: 1em; }
.sc-composer .fine { flex-basis: 100%; font-size: 11px; color: var(--grey-500); }
.hm .btn-line { background: transparent; color: var(--navy-900); border-color: rgba(27, 42, 74, 0.28); }
.hm .btn-line:hover { border-color: var(--navy-900); }
.sc-noscript { max-width: 720px; margin-top: 24px; background: var(--white); border: 1px solid var(--hline); border-radius: 14px; padding: 22px 26px; }
.sc-noscript ol { padding-left: 20px; display: grid; gap: 8px; margin-top: 10px; }

/* ---------- 9. Stats strip: counters ---------- */
.hm .trust { background: var(--paper); padding-block: clamp(48px, 6vw, 72px); }
.st { --st-cols: 4; --st-size: min(85px, 6.2vw); width: 100%; display: grid; grid-template-columns: repeat(var(--st-cols), minmax(0, 1fr)); padding: 64px 0; background: var(--cream-50); border-radius: 14px; }
.st.wrapped { row-gap: 32px; }
/* No-JS defaults matching home.js layout(): 4/3/2/1 columns; JS overrides inline. */
@media (max-width: 1023px) { .st { --st-cols: 3; --st-size: clamp(44px, 7.2vw, 88px); row-gap: 32px; } .st:not(.wrapped) .st-stat:nth-child(3n+1) { border-left: 0; } }
@media (max-width: 767px) { .st { --st-cols: 2; } .st:not(.wrapped) .st-stat:nth-child(3n+1) { border-left: 1px solid rgba(27, 42, 74, 0.16); } .st:not(.wrapped) .st-stat:nth-child(2n+1) { border-left: 0; } }
@media (max-width: 479px) { .st { --st-cols: 1; } .st:not(.wrapped) .st-stat:nth-child(n) { border-left: 0; } }
.st-stat { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 24px; min-width: 0; }
.st-stat + .st-stat { border-left: 1px solid rgba(27, 42, 74, 0.16); }
.st.wrapped .st-stat.row-start { border-left: 0; }
.st-num { display: flex; align-items: baseline; line-height: 1; color: var(--navy-900); font: 600 var(--st-size)/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.st-num .unit { color: var(--gold-ink); font-size: 0.45em; }
.st-num .unit.pre { margin-right: 2px; }
.st-num .unit.suf { margin-left: 2px; }
.st-lbl { font: 400 13px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-500); text-align: center; text-wrap: balance; max-width: 22ch; }

/* ---------- Nav before the intro reveal ---------- */
/* index.html ships the nav in its reveal state (on-stage, logo away) and home.js (deferred)
   takes over after parsing; without JavaScript these keep it readable. */
html:not(.js) .nav.on-stage { background: rgba(245, 240, 232, 0.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(27, 42, 74, 0.08); }
html:not(.js) .nav .logo.away { opacity: 1; visibility: visible; }