/* The public pages: home, pricing, method, legal, 404. Tokens in tokens.css, components in components.css. */
[hidden] { display: none !important; }
.site-bar .site-acts { display: flex; gap: var(--s2); }
.site-menu { display: none; position: relative; }
.site-menu summary { list-style: none; width: var(--hit); height: var(--hit); display: grid; place-items: center; border-radius: var(--r-sm); color: var(--ink-2); cursor: pointer; }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .site-menu summary:hover { background: var(--surface-2); color: var(--ink); } }
.site-menu .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-menu); }
@media (max-width: 760px) {
  .site-menu { display: block; }
  .site-bar .site-acts .btn-ghost { display: none; }
}
@media (max-width: 420px) { .site-bar .appbar-in > .theme-switch { display: none; } .site-bar .appbar-in { gap: var(--s2); } }

/* hero */
.hero { padding-block: var(--s16) var(--s10); }
.hero-in { display: grid; gap: var(--s10); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
.hero-copy .row { margin-top: var(--s6); }
@media (max-width: 960px) { .hero-in { grid-template-columns: 1fr; } .hero { padding-top: var(--s10); } }
.console { display: grid; gap: var(--s3); padding: var(--s6); margin: 0; }
.console-total { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.console-total .label { margin-left: auto; }
.console .chart { height: 140px; }
.console-weak { margin-top: var(--s2); }
.console figcaption { margin-top: var(--s1); }
.d.accent { font: var(--w-semi) var(--t-sm) / 1 var(--f-mono); color: var(--accent-text); }

/* sections */
.facts { padding-block: var(--s6) var(--s10); }
.facts .stat .v { font-size: var(--t-3xl); }
.sec-hd { display: grid; gap: var(--s3); max-width: 46rem; }
.sec-hd p, .split p, .narrow p, .page-hd .lede { max-width: var(--max-text); }
.hero .pill { white-space: nowrap; }
.split { display: grid; gap: var(--s10); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--s8); } }
.narrow { max-width: 46rem; }
.wrap.narrow { margin-inline: auto; }
.ticks { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s3); align-items: start; color: var(--ink-2); }
.ticks li svg { width: 20px; height: 20px; color: var(--accent-text); margin-top: 2px; }
.ticks li b { color: var(--ink); font-weight: var(--w-semi); }
.week { list-style: none; padding: 0; display: grid; }
.week li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t b" "s b"; column-gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.week li:last-child { border-bottom: 0; }
.week li b { grid-area: t; font-weight: var(--w-semi); }
.week li .faint { grid-area: s; font-size: var(--t-sm); }
.week li .badge { grid-area: b; align-self: center; }
/* a price is not a score: ink, not sand; the free plan is quieter than Pro */
.price { font: var(--w-bold) var(--t-5xl) / 1 var(--f-mono); letter-spacing: -0.05em; color: var(--ink); }
.price small { font-size: var(--t-lg); color: var(--ink-2); letter-spacing: 0; margin-left: 2px; }
.price small:first-child { margin: 0 6px 0 0; font: var(--w-medium) var(--t-base) / 1 var(--f-sans); }
.price.is-free { color: var(--ink-2); font-size: var(--t-4xl); }

/* comparison table */
.compare caption { caption-side: bottom; text-align: left; padding: var(--s3) var(--s4); }
.compare .tdsub { display: block; font-size: var(--t-sm); color: var(--ink-2); white-space: normal; }
.compare td:first-child { min-width: 12rem; }

/* FAQ */
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: var(--hit); padding: var(--s4) 0; font-weight: var(--w-semi); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: var(--w-medium) var(--t-xl) / 1 var(--f-mono); color: var(--ink-3); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq-a { padding-bottom: var(--s5); color: var(--ink-2); max-width: var(--max-text); }
.faq-a p + p { margin-top: var(--s2); }

/* call to action band */
.band { padding-block: var(--s12); border-top: 1px solid var(--line); background: var(--bg-2); }
.band-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }

/* pricing */
.page-hd { padding-block: var(--s16) var(--s8); }
.plans { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; padding-bottom: var(--s12); }
.plan { padding: var(--s8); }
@media (max-width: 480px) { .plan { padding: var(--s6); } }
.section.first { border-top: 0; padding-top: 0; }

/* legal documents */
.doc { padding-bottom: var(--s16); display: grid; gap: var(--s8); }
.doc h2 { font-size: var(--t-xl); margin-bottom: var(--s3); letter-spacing: -0.015em; }
.doc p, .doc li { color: var(--ink-2); max-width: var(--max-text); }
.doc ul { padding-left: 1.2em; display: grid; gap: var(--s2); }
.doc b { color: var(--ink); }
mark.todo { background: var(--warn-soft); color: var(--warn); border-radius: var(--r-xs); padding: 0 4px; font: var(--w-medium) .92em var(--f-mono); }

/* footer */
.site-foot { border-top: 1px solid var(--line); padding-block: var(--s10) var(--s12); }
.site-foot .wrap { display: grid; gap: var(--s3); }
.foot-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s3); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.foot-links a { color: var(--ink-2); text-decoration: none; font-size: var(--t-md); min-height: var(--hit-sm); display: inline-flex; align-items: center; }
@media (pointer: coarse) { .foot-links a { min-height: var(--hit); } }
@media (hover: hover) and (pointer: fine) { .foot-links a:hover { color: var(--ink); text-decoration: underline; } }
main[data-page="404"] .page-hd { padding-block: var(--s20); }
/* a scrolling table keeps its screen-reader labels inside it (an absolute element would escape the scroll box) */
.table-wrap { position: relative; }
/* on a phone, each row of the comparison is a small card: provider, then mocks and price, then the source */
@media (max-width: 600px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s1) var(--s4); padding: var(--s4); border-bottom: 1px solid var(--line); }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare tbody td { display: block; padding: 0; border: 0; white-space: normal; text-align: left; min-width: 0; }
  .compare tbody td:first-child, .compare tr.is-best td:first-child { grid-column: 1 / -1; min-width: 0; box-shadow: none; }
  .compare tbody td[data-unit]::after { content: " " attr(data-unit); font-family: var(--f-sans); color: var(--ink-2); }
  .compare tbody td:last-child { grid-column: 1 / -1; }
  .compare tbody td:last-child a { display: inline-flex; align-items: center; min-height: var(--hit-sm); }
  .compare tr.is-best { box-shadow: inset 3px 0 var(--accent); }
  main[data-page] .table td + td { white-space: normal; }
}
.menu-theme { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s3); }
@media (max-width: 600px) { .facts .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts .stat { padding: var(--s4); } .facts .stat .v { font-size: var(--t-2xl); } }

/* pricing: the lengths of Pro */
.plan-lengths { list-style: none; padding: 0; display: grid; border: 1px solid var(--line); border-radius: var(--r-sm); }
.plan-lengths li { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s3); align-items: baseline; padding: var(--s2) var(--s3); }
.plan-lengths li + li { border-top: 1px solid var(--line); }
.plan-lengths .small { grid-column: 1 / -1; }

/* ---------- direction "Linear, adapted" (public pages only: this file is not loaded in the app).
   Hairlines instead of shadows, stepped graphite surfaces, Geist 600 set tight, emerald on under 5 % of the page,
   one soft emerald light behind the example report. Brand kept: logo, emerald, sand scores, Geist / Geist Mono. */
:root {
  --r: 10px; --r-lg: 12px; --r-xl: 16px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --glow: 0 0 0 0 transparent;
  --shadow-1: none;
  --shadow-2: 0 1px 2px rgba(14, 19, 17, .08);
  --hair: rgba(14, 19, 17, .09);
  --mesh: rgba(46, 229, 157, .16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #090B0A; --bg-2: #0E1110; --surface: #111513; --surface-2: #171B19; --surface-3: #1E2320; --shadow-2: 0 1px 2px rgba(0, 0, 0, .35); --hair: rgba(255, 255, 255, .07); --mesh: rgba(46, 229, 157, .07); }
}
:root[data-theme="dark"] { --bg: #090B0A; --bg-2: #0E1110; --surface: #111513; --surface-2: #171B19; --surface-3: #1E2320; --shadow-2: 0 1px 2px rgba(0, 0, 0, .35); --hair: rgba(255, 255, 255, .07); --mesh: rgba(46, 229, 157, .07); }

.appbar, .section, .band, .site-foot, .faq, .faq details, .card, .stat, .table-wrap, .plan-lengths, .plan-lengths li + li { border-color: var(--hair); }
.card-feature { border-color: var(--line-2); }
.btn { border-radius: 8px; }
.btn-lg { border-radius: 10px; }

.display { font-weight: var(--w-semi); letter-spacing: -0.045em; line-height: 1; }
h1, .h1, h2, .h2 { font-weight: var(--w-semi); letter-spacing: -0.035em; }
h3 { font-size: var(--t-lg); letter-spacing: -0.02em; }

/* hero: the product (the example report) is the picture, lit from behind */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--s20) var(--s16); }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto 40%; height: 120%; z-index: -1; background: radial-gradient(closest-side, var(--mesh), transparent 70%); pointer-events: none; }
@media (max-width: 960px) { .hero { padding-top: var(--s10); } .hero::before { inset: 30% -30% auto -10%; } }
.hero .pill { border-color: var(--hair); background: var(--surface); color: var(--ink-2); }
.console { background: var(--surface); }

/* the numbers: one row split by hairlines */
.facts .grid-4 { gap: 0; border-block: 1px solid var(--hair); }
.facts .stat { background: none; border: 0; border-radius: 0; padding: var(--s6) var(--s5); }
.facts .stat + .stat { border-left: 1px solid var(--hair); }
.facts .stat .v { color: var(--ink); font-weight: var(--w-semi); }
@media (max-width: 600px) {
  .facts .stat { padding: var(--s4); }
  .facts .stat:nth-child(3) { border-left: 0; }
  .facts .stat:nth-child(n+3) { border-top: 1px solid var(--hair); }
}

/* the three promises: flat panels on one surface */
.section .grid-3 { gap: 0; border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.section .grid-3 > .card { border: 0; border-radius: 0; background: none; padding: var(--s6); }
.section .grid-3 > .card + .card { border-left: 1px solid var(--hair); }
@media (max-width: 760px) { .section .grid-3 > .card + .card { border-left: 0; border-top: 1px solid var(--hair); } }

.section { padding-block: var(--s20); }
.band { background: none; }
.page-hd { padding-block: var(--s20) var(--s10); }