/* 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; }
.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; }
.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; }
.price { font: var(--w-bold) var(--t-5xl) / 1 var(--f-mono); letter-spacing: -0.05em; color: var(--sand); }
.price small { font-size: var(--t-lg); color: var(--ink-2); letter-spacing: 0; margin-left: 2px; }

/* 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)); 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; }
.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; }
@media (max-width: 600px) { .compare td:first-child { min-width: 9rem; } .compare th, .compare td { padding-inline: var(--s3); } }
.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); } }