/* AheadWise pages: navigation, home page sections and the audit tool. Built on ew.css tokens and components. */

/* ------------------------------------------------------------------------------------------------- navigation */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px);
  transition: border-color var(--t-2) var(--ease); }
.nav.is-scrolled { border-bottom-color: var(--rule); }
.nav__inner { display: flex; align-items: center; gap: 20px; height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
  font-size: 1.16rem; font-weight: 700; font-stretch: 120%; letter-spacing: -0.035em; }
.logo svg { width: 28px; height: 28px; flex: none; }
.logo .mark-bg { fill: var(--ink); } .logo .mark-scale { stroke: var(--paper); } .logo .mark-needle { stroke: var(--signal); } .logo .mark-dot { fill: var(--signal); }
.nav__links { display: flex; gap: 2px; margin-left: 16px; }
.nav__links a { padding: 8px 12px; border-radius: var(--r-2); text-decoration: none; font-size: 0.93rem; font-weight: 520; color: var(--ink-2);
  transition: color var(--t-1) var(--ease), background var(--t-1) var(--ease); }
.nav__links a:hover { color: var(--ink); background: var(--sunk); }
.nav__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav__menu { display: none; width: 40px; padding: 0; }
.nav__menu svg { width: 18px; height: 18px; }
@media (max-width: 980px) { .nav__links, .nav__secondary { display: none; } .nav__menu { display: inline-flex; } }
.menu-links { display: grid; }
.menu-links a { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--rule); text-decoration: none;
  font-size: 1.15rem; font-weight: 600; font-stretch: 108%; color: var(--ink); }

/* ------------------------------------------------------------------------------------------------------ hero */
.hero { padding-block: clamp(40px, 6vw, 88px) clamp(72px, 9vw, 120px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: clamp(40px, 5vw, 96px); align-items: center; }
@media (max-width: 1080px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } .hero__grid .calc { max-width: 640px; } }
.hero__copy { display: grid; gap: 26px; align-content: start; }
.hero__copy > * { animation: rise 700ms var(--ease) both; }
.hero__copy > *:nth-child(2) { animation-delay: 60ms; } .hero__copy > *:nth-child(3) { animation-delay: 120ms; }
.hero__copy > *:nth-child(4) { animation-delay: 180ms; } .hero__copy > *:nth-child(5) { animation-delay: 240ms; }
.hero .calc { animation: rise 800ms 160ms var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; border-top: 1px solid var(--rule); }
.hero__proof li { display: grid; gap: 8px; align-content: start; padding: 18px 18px 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--ink-2); }
.hero__proof li + li { padding-left: 18px; border-left: 1px solid var(--rule); }
.hero__proof .t-num { font-size: 1.55rem; line-height: 1; color: var(--ink); }
@media (max-width: 600px) {
  .hero__proof { grid-template-columns: minmax(0, 1fr); }
  .hero__proof li { padding-right: 0; }
  .hero__proof li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 16px; }
}

/* ---------------------------------------------------------------------------------------- winner check (calc) */
.calc { overflow: hidden; }
.calc__head { display: grid; gap: 14px; padding: 20px 22px 18px; border-bottom: 1px solid var(--rule); }
.calc__title { font-size: 1.22rem; font-weight: 650; font-stretch: 110%; letter-spacing: -0.022em; }
.calc__table { width: 100%; border-collapse: collapse; }
.calc__table th, .calc__table td { padding: 10px 6px; border-bottom: 1px solid var(--rule); text-align: left; }
.calc__table thead th { padding-block: 10px 8px; font-size: 0.74rem; font-weight: 600; font-stretch: var(--narrow); letter-spacing: 0.02em; color: var(--ink-3); }
.calc__table th:first-child, .calc__table td:first-child { padding-left: 22px; }
.calc__table th:last-child, .calc__table td:last-child { padding-right: 22px; text-align: right; }
.calc__table .input { min-height: 38px; }
.calc__table td.rate { width: 74px; font-weight: 600; font-variant-numeric: tabular-nums; }
.calc__variant { display: flex; align-items: center; gap: 10px; min-width: 0; }
.calc__badge { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 5px; background: var(--ink); color: var(--on-ink);
  font-size: 0.8rem; font-weight: 700; font-stretch: 110%; }
.calc__copy { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; color: var(--ink-3); font-weight: 450; }
.calc__body { display: grid; gap: 16px; padding: 18px 22px 20px; }
.calc__verdict { display: grid; gap: 8px; align-content: start; min-height: 132px; }
.calc__verdict .chip { justify-self: start; }
.calc__headline { font-size: 1.55rem; line-height: 1.1; font-weight: 660; font-stretch: 112%; letter-spacing: -0.03em; }
.calc__detail { font-size: 0.93rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.calc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 22px;
  border-top: 1px solid var(--rule); background: var(--surface-2); }
@media (max-width: 520px) { .calc__copy { display: none; } .calc__table th:first-child, .calc__table td:first-child { padding-left: 14px; } }

/* ---------------------------------------------------------------------------------------------------- problem */
.split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 88px); align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.split .section-head { margin-bottom: 0; }
.split__text { display: grid; gap: 16px; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.figure { padding: clamp(18px, 3vw, 30px); }
.figure__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.figure__head h3 { font-size: 1rem; font-weight: 620; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.85rem; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.chart-scroll { overflow-x: auto; }
.zchart { width: 100%; min-width: 600px; height: auto; }
.zchart .band-noise { fill: var(--noise-wash); }
.zchart .band-border { fill: var(--borderline-wash); }
.zchart .rule { stroke: var(--rule-2); stroke-width: 1; }
.zchart .cut { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 4; }
.zchart text { fill: var(--ink-3); font: 500 12px var(--mono); }
.zchart .region { fill: var(--ink-2); font: 600 12.5px var(--font); font-stretch: 94%; }
.zchart .d-real { fill: var(--real); } .zchart .d-borderline { fill: var(--borderline); } .zchart .d-noise, .zchart .d-unproven { fill: var(--noise); } .zchart .d-broken-split { fill: var(--split); }
.figure__note { margin-top: 18px; max-width: 62em; font-size: 0.88rem; color: var(--ink-3); }
.after { margin-top: 28px; }

/* ------------------------------------------------------------------------------------------------------- steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: none; }
@media (max-width: 960px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step { display: flex; flex-direction: column; gap: 14px; }
.step .rule-scale { margin-bottom: 8px; }
.step__top { display: flex; align-items: baseline; justify-content: space-between; }
.step__n { font-size: 2.6rem; line-height: 1; color: var(--ink); }
.step p { color: var(--ink-2); font-size: 0.98rem; text-wrap: pretty; }
.step .text-button { align-self: start; margin-top: auto; }
.vignette { margin-block: 6px 4px; padding: 16px; border: 1px solid var(--rule); border-radius: var(--r-3); background: var(--surface); box-shadow: var(--shadow-1); }
.vg-file { display: flex; justify-content: space-between; gap: 10px; font-size: 0.8rem; color: var(--ink-3); margin-bottom: 12px; }
.vg-file b { color: var(--ink); font-weight: 600; font-family: var(--mono); font-size: 0.78rem; }
.vg-bar { width: 100%; height: 8px; border-radius: 2px; overflow: hidden; }
.vg-bar .real { fill: var(--real); } .vg-bar .borderline { fill: var(--borderline); } .vg-bar .noise, .vg-bar .unproven { fill: var(--noise); } .vg-bar .broken-split { fill: var(--split); }
.vg-counts { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; margin-top: 12px; font-size: 0.76rem; color: var(--ink-3); }
.vg-counts b { display: block; font-size: 1.05rem; color: var(--ink); font-stretch: var(--wide); font-weight: 600; font-variant-numeric: tabular-nums; }
.ticket { position: relative; padding: 16px 18px 16px 22px; border-radius: var(--r-2); background: var(--surface);
  border: 1px solid var(--rule); box-shadow: var(--shadow-1); display: grid; gap: 6px; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-2); }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule); }
.ticket::before { left: -8px; clip-path: inset(0 0 0 50%); } .ticket::after { right: -8px; clip-path: inset(0 50% 0 0); }
.ticket__head { display: flex; justify-content: space-between; font-family: var(--font); font-size: 0.74rem; font-weight: 600; font-stretch: var(--narrow); letter-spacing: 0.04em; color: var(--ink-3); }
.ticket__pick { font-family: var(--font); font-size: 1.1rem; font-weight: 640; font-stretch: 110%; letter-spacing: -0.02em; color: var(--ink); }
.ticket__rule { border-top: 1px dashed var(--rule-2); margin-block: 4px; }
.ranked { display: grid; }
.ranked li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 0.84rem; color: var(--ink); }
.ranked li:last-child { border-bottom: 0; }
.ranked li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranked .n { color: var(--ink-3); font-variant-numeric: tabular-nums; margin-right: 6px; }

/* ---------------------------------------------------------------------------------------------------- evidence */
.evidence { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 980px) { .evidence { grid-template-columns: minmax(0, 1fr); } }
.bars-panel { padding: clamp(18px, 3vw, 28px); }
.bars-panel h3 { font-size: 1rem; font-weight: 620; }
.bars-panel .sub { margin-top: 4px; font-size: 0.88rem; color: var(--ink-3); }
.bars { display: grid; gap: 14px; margin-top: 26px; }
.bar-row { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) 58px; gap: 14px; align-items: center; }
.bar-name { font-size: 0.9rem; color: var(--ink-2); line-height: 1.25; }
.bar-name small { display: block; font-size: 0.76rem; color: var(--ink-3); }
.bar-track { position: relative; height: 12px; background: var(--sunk); border-radius: 2px; }
.bar-track svg { width: 100%; height: 100%; }
.bar-track rect { fill: var(--ink-3); }
.bar-track::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: 50%; border-left: 1px dashed var(--ink-2); opacity: 0.6; }
.bar-row.is-ours .bar-name { color: var(--ink); font-weight: 640; }
.bar-row.is-ours rect { fill: var(--signal); }
.bar-val { text-align: right; font-size: 0.98rem; color: var(--ink); }
.bar-row.is-ours .bar-val { color: var(--signal-ink); }
.bars__axis { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) 58px; gap: 14px; margin-top: 6px; }
.bars__axis span:nth-child(2) { display: flex; justify-content: space-between; font: 500 0.72rem var(--mono); color: var(--ink-3); }
.bars__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 0.84rem; color: var(--ink-3); }
@media (max-width: 520px) { .bar-row, .bars__axis { grid-template-columns: minmax(96px, 120px) minmax(0, 1fr) 52px; gap: 10px; } }
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.figures > div { padding: 22px 20px 24px 0; border-bottom: 1px solid var(--rule); }
.figures > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--rule); }
.figures dt { font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1; color: var(--ink); }
.figures dt small { font-size: 0.55em; color: var(--ink-3); margin-inline: 2px; }
.figures dd { margin-top: 10px; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 560px) { .figures { grid-template-columns: minmax(0, 1fr); } .figures > div:nth-child(even) { padding-left: 0; border-left: 0; } }
.aside-note { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin-top: clamp(28px, 4vw, 44px); padding-top: 20px;
  border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 0.95rem; max-width: 78em; }

/* ------------------------------------------------------------------------------------------------ product tabs */
.surface { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .surface { grid-template-columns: minmax(0, 1fr); } }
.surface__text { display: grid; gap: 16px; }
.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 24px; color: var(--ink-2); font-size: 0.96rem; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 10px; height: 5px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.mapping { font-size: 0.9rem; }
.mapping .row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--rule); }
.mapping .row:last-child { border-bottom: 0; }
.mapping .k { color: var(--ink-3); font-size: 0.82rem; }
.mapping .v { font-family: var(--mono); font-size: 0.8rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platforms { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 4px; }
.platforms li { font-size: 1.02rem; font-weight: 620; font-stretch: 110%; letter-spacing: -0.02em; color: var(--ink-3); }
.chat { display: grid; gap: 12px; padding: 18px; }
.bubble { max-width: 88%; padding: 12px 14px; border-radius: 12px; font-size: 0.92rem; line-height: 1.5; }
.bubble--user { justify-self: end; background: var(--ink); color: var(--on-ink); border-bottom-right-radius: 4px; }
.bubble--bot { background: var(--surface-2); border: 1px solid var(--rule); color: var(--ink); border-bottom-left-radius: 4px; }
.bubble--bot ol { margin-top: 8px; padding-left: 20px; display: grid; gap: 6px; }
.toolcall { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-2); border: 1px dashed var(--rule-2);
  font-family: var(--mono); font-size: 0.76rem; color: var(--ink-3); }
.toolcall::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--real); }
.guard-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--rule); font-size: 0.92rem; }
.guard-list li:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------------------------------- security */
.secure { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .secure { grid-template-columns: minmax(0, 1fr); } }
.points { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.points li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.points .idx { font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-3); padding-top: 3px; }
.points h3 { font-size: 1.02rem; font-weight: 620; margin-bottom: 4px; }
.points p { color: var(--ink-2); font-size: 0.94rem; }
.reads .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--rule); font-size: 0.92rem; }
.reads .row:last-of-type { border-bottom: 0; }
.reads .yes, .reads .no { font-size: 0.8rem; font-weight: 600; font-stretch: var(--narrow); }
.reads .yes { color: var(--real); } .reads .no { color: var(--ink-3); }
.reads .no-row span:first-child { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--rule-2); }
.code { margin: 0; padding: 16px 18px; border-top: 1px solid var(--rule); background: var(--surface-2); font: 400 0.8rem/1.7 var(--mono); color: var(--ink-2);
  overflow-x: auto; border-radius: 0 0 var(--r-3) var(--r-3); white-space: pre; }
.code b { color: var(--signal-ink); font-weight: 500; }

/* ----------------------------------------------------------------------------------------------------- pricing */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule); border-radius: var(--r-3); background: var(--surface); box-shadow: var(--shadow-1); }
.tier { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 3vw, 32px); }
.tier + .tier { border-left: 1px solid var(--rule); }
.tier.is-featured { background: var(--surface-2); }
.tier.is-featured::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--signal); }
.tier__name { display: flex; justify-content: space-between; align-items: center; font-size: 0.98rem; font-weight: 620; }
.tier__price { font-size: 2.3rem; line-height: 1.05; color: var(--ink); }
.tier__price--text { font-size: 1.55rem; line-height: 1.2; padding-block: 6px 5px; }
.tier__note { font-size: 0.88rem; color: var(--ink-3); }
.tier .ticks { margin-block: 14px 26px; padding-top: 18px; border-top: 1px solid var(--rule); flex: 1; align-content: start; }
@media (max-width: 900px) { .tiers { grid-template-columns: minmax(0, 1fr); } .tier + .tier { border-left: 0; border-top: 1px solid var(--rule); } }
.pricing-note { margin-top: 18px; font-size: 0.9rem; color: var(--ink-3); }

/* --------------------------------------------------------------------------------------------------------- FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.faq .section-head { position: sticky; top: 104px; margin-bottom: 0; }
@media (max-width: 900px) { .faq { grid-template-columns: minmax(0, 1fr); } .faq .section-head { position: static; } }

/* --------------------------------------------------------------------------------------------- closing + footer */
.closing { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 28px 48px; align-items: end; padding-block: clamp(64px, 9vw, 112px); }
.closing h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
.closing p { margin-top: 16px; }
.closing .hero__actions { justify-content: flex-end; }
@media (max-width: 860px) { .closing { grid-template-columns: minmax(0, 1fr); } .closing .hero__actions { justify-content: flex-start; } }
.footer { padding-block: 40px 56px; font-size: 0.9rem; color: var(--ink-3); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 36px; }
.footer h4 { margin: 0 0 12px; font-size: 0.8rem; font-weight: 600; font-stretch: var(--narrow); letter-spacing: 0.02em; color: var(--ink-2); }
.footer ul { display: grid; gap: 8px; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer a:hover { color: var(--ink); }
.footer__about p { margin-top: 12px; max-width: 26em; }
.footer__fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 0.84rem; }
@media (max-width: 800px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__about { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------------------------------------ drawer bits */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 520px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.sent { display: grid; gap: 12px; padding: 18px; border-radius: var(--r-3); background: var(--sunk); }
.sent .addr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--r-2); background: var(--surface);
  border: 1px solid var(--rule); font-family: var(--mono); font-size: 0.86rem; }
.verdict-list { display: grid; gap: 14px; }
.verdict-list li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 0.93rem; color: var(--ink-2); }
.facts { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.facts li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 0.92rem; }
.facts li span:first-child { color: var(--ink-2); }
.facts li span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* ===================================================================================================== value */
.money { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 980px) { .money { grid-template-columns: minmax(0, 1fr); } }
.money__inputs { display: grid; gap: 14px; padding: 22px; }
.money__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.money__grid .full { grid-column: 1 / -1; }
@media (max-width: 520px) { .money__grid { grid-template-columns: minmax(0, 1fr); } }
.money__unit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; color: var(--ink-3); }
.money__out { display: grid; gap: 18px; padding: 22px; }
.money__head { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.3; font-weight: 640; font-stretch: 108%; letter-spacing: -0.015em; text-wrap: pretty; }
.money__rows { display: grid; gap: 12px; }
.money__row { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 0.9rem; }
@media (max-width: 520px) { .money__row { grid-template-columns: minmax(0, 1fr) auto; } .money__bar { grid-column: 1 / -1; grid-row: 2; } }
.money__label { color: var(--ink-2); }
.money__val { font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money__bar { width: 100%; height: 12px; }
.money__bar rect { fill: var(--signal); }
.money__row.is-today .money__bar rect { fill: var(--ink-3); }
.money__bar line { stroke: var(--ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.money__facts { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--rule); }
.money__facts div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; font-size: 0.9rem; }
.money__facts dt { color: var(--ink-3); }
.money__facts dd { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.money__note { font-size: 0.8rem; line-height: 1.5; color: var(--ink-3); }

/* ===================================================================================================== regions */
.markets { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 980px) { .markets { grid-template-columns: minmax(0, 1fr); } }
.region-grid { display: grid; border-top: 1px solid var(--rule); }
.region-card { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 8px 28px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.region-card h3 { font-size: 1.05rem; font-weight: 620; text-wrap: balance; }
.region-card p { color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; max-width: 58ch; }
@media (max-width: 1180px) { .region-card { grid-template-columns: minmax(0, 1fr); } }
.market-card { display: grid; gap: 0; overflow: hidden; }
.market-card__head { display: grid; gap: 12px; padding: 20px 22px 18px; border-bottom: 1px solid var(--rule); }
.market-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.market-chip { height: 30px; padding-inline: 11px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--surface);
  color: var(--ink-2); font: inherit; font-size: 0.84rem; font-weight: 560; cursor: pointer;
  transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease), border-color var(--t-1) var(--ease); }
.market-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.market-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.market-chip:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.market-card__body { display: grid; gap: 16px; padding: 20px 22px; min-height: 300px; align-content: start; }
.market-card__title { font-size: 1.15rem; font-weight: 640; font-stretch: 108%; letter-spacing: -0.015em; }
.market-events { display: grid; }
.market-events li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 0.94rem; }
.market-events li:first-child { border-top: 1px solid var(--rule); }
.market-events__name { color: var(--ink); font-weight: 560; }
.market-events__date { color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.market-events__none { color: var(--ink-3); }
.market-facts { display: grid; gap: 10px; }
.market-facts div { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr); gap: 12px; font-size: 0.9rem; }
.market-facts dt { color: var(--ink-3); }
.market-facts dd { color: var(--ink); font-variant-numeric: tabular-nums; }
.market-card__foot { padding: 14px 22px; border-top: 1px solid var(--rule); background: var(--surface-2); font-size: 0.8rem; color: var(--ink-3); line-height: 1.5; }
.market-card__empty { color: var(--ink-3); }

/* ===================================================================================================== audit */
.audit-head { padding-block: clamp(36px, 5vw, 64px) clamp(24px, 3vw, 36px); }
.audit-head__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(24px, 4vw, 64px); align-items: end; }
@media (max-width: 920px) { .audit-head__grid { grid-template-columns: minmax(0, 1fr); } }
.audit-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.audit-head .t-lead { margin-top: 16px; }
.dropbox { display: grid; gap: 14px; padding: 22px; border: 1.5px dashed var(--rule-2); border-radius: var(--r-3); background: var(--surface);
  transition: border-color var(--t-1) var(--ease), background var(--t-1) var(--ease); }
.dropbox.over { border-color: var(--signal); background: var(--signal-wash); }
.dropbox h2 { font-size: 1.1rem; font-weight: 640; font-stretch: 108%; letter-spacing: -0.02em; }
.dropbox p { font-size: 0.9rem; color: var(--ink-3); }
.dropbox .row { display: flex; flex-wrap: wrap; gap: 10px; }
.privacy { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ink-3); }
.privacy svg { width: 14px; height: 14px; flex: none; }
.audit-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; padding-bottom: 96px; }
@media (max-width: 980px) { .audit-layout { grid-template-columns: minmax(0, 1fr); } }
.rail { position: sticky; top: 88px; display: grid; gap: 14px; }
@media (max-width: 980px) { .rail { position: static; } }
.rail .panel__head h2 { font-size: 0.95rem; font-weight: 620; }
.rail .file { font-family: var(--mono); font-size: 0.82rem; word-break: break-all; }
.rail .fields { display: grid; gap: 12px; }
.rail details summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.rail details summary::-webkit-details-marker { display: none; }
.rail details summary::after { content: "Edit"; font-weight: 500; color: var(--ink-3); }
.rail details[open] summary::after { content: "Done"; }
.results { display: grid; gap: 22px; }
.summary { padding: clamp(20px, 3vw, 30px); display: grid; gap: 20px; }
.summary__headline { font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.15; font-weight: 640; font-stretch: 108%; letter-spacing: -0.025em; text-wrap: pretty; }
.summary__headline mark { background: linear-gradient(transparent 60%, var(--noise-wash) 60%); color: inherit; }
.stack { width: 100%; height: 14px; border-radius: 3px; overflow: hidden; background: var(--sunk); }
.stack rect.real { fill: var(--real); } .stack rect.borderline { fill: var(--borderline); } .stack rect.noise, .stack rect.unproven { fill: var(--noise); }
.stack rect.reversed { fill: var(--reversed); } .stack rect.broken-split { fill: var(--split); }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.metric { padding: 18px 16px 4px 0; display: grid; gap: 6px; align-content: start; }
.metric + .metric { padding-left: 16px; border-left: 1px solid var(--rule); }
.metric .value { font-size: 1.7rem; line-height: 1.05; }
.metric .label { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.metric p { font-size: 0.82rem; color: var(--ink-3); line-height: 1.45; }
@media (max-width: 860px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 480px) { .metrics { grid-template-columns: minmax(0, 1fr); } .metric + .metric { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } }
.advice { display: grid; gap: 10px; }
.advice li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 0.95rem; }
.advice li::before { content: ""; position: absolute; left: 3px; top: 0.62em; width: 7px; height: 7px; border-radius: 1.5px; background: var(--signal); }
.toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.search { position: relative; }
.search .input { padding-left: 34px; min-width: 240px; min-height: 38px; }
.search svg { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; color: var(--ink-3); pointer-events: none; }
.copy-cell { min-width: 160px; max-width: 270px; }
.copy-cell span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.copy-cell.win span { font-weight: 620; color: var(--ink); }
.copy-cell.lose span { color: var(--ink-2); }
.empty { padding: 28px; text-align: left; color: var(--ink-3); }
.goal-flag { display: block; margin-top: 6px; font-size: 0.76rem; font-weight: 600; white-space: nowrap; color: var(--ink-3); }
.goal-flag--agrees { color: var(--real); }
.goal-flag--disagrees { color: var(--reversed); }
.preflight .panel__head h2 { font-size: 1.05rem; font-weight: 640; font-stretch: 108%; letter-spacing: -0.015em; text-wrap: balance; }
.preflight__body { display: grid; gap: 16px; }
.preflight__lead { font-size: 1rem; color: var(--ink); max-width: 70ch; text-wrap: pretty; }
.preflight__skill { display: grid; gap: 2px; }
.preflight__label { font-size: 0.82rem; color: var(--ink-3); }
.preflight__range { display: block; font-size: 0.78rem; color: var(--ink-3); }
.preflight__table tr.is-plan td { background: var(--signal-wash); }
.preflight__table tr.is-plan .preflight__label { color: var(--signal-ink); font-weight: 600; }
.preflight .t-small { max-width: 80ch; }
.cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-3); }
.cta-band h3 { font-size: 1.3rem; font-weight: 640; font-stretch: 108%; letter-spacing: -0.02em; }
.cta-band p { margin-top: 6px; color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 720px) { .cta-band { grid-template-columns: minmax(0, 1fr); } }
.detail-variants { display: grid; gap: 10px; }
.detail-variant { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px; border: 1px solid var(--rule); border-radius: var(--r-2); }
.detail-variant.is-winner { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.detail-variant p { color: var(--ink); font-size: 0.95rem; }
.detail-variant .meta { margin-top: 6px; font-size: 0.82rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Lift check page: the verdict sentence reads as a statement, not a headline. */
.lift-sentence { font-size: 1.2rem; line-height: 1.5; font-weight: 600; text-wrap: pretty; margin: 0.25rem 0 0.75rem; }

/* YouTube creators: the strip on the home page and the example pick on creators.html */
.creator-strip { margin-top: calc(-1 * clamp(32px, 5vw, 72px)); }
.creator-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: clamp(20px, 3vw, 32px); }
.creator-strip__inner .t-h3 { margin-top: 10px; max-width: 34em; }
.pick { display: grid; gap: 20px; align-content: start; padding: clamp(20px, 3vw, 32px); }
.pick__titles { display: grid; gap: 10px; }
.pick__titles li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 8px; color: var(--ink-2); }
.pick__titles .is-pick { border-color: var(--ink-3); color: var(--ink); font-weight: 560; }
.pick__facts { display: grid; gap: 10px; margin: 0; }
.pick__facts div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 12px; }
.pick__facts dt { color: var(--ink-3); }
.pick__facts dd { margin: 0; color: var(--ink); }
@media (max-width: 380px) { .nav .logo span { display: none; } }  /* the audit page's buttons need the room at 320px */