/* TOS Genie — design tokens + base styles.
   Editorial serif display over a neutral sans body; indigo accent, gold spark. */

:root {
  --accent-ink: #ffffff;
  --ink: #10131a;
  --ink-2: #333c4a;
  --muted: #5b6472;
  --paper: #ffffff;
  --surface: #f7f8fa;
  --surface-2: #eef1f5;
  --line: #e2e6ec;
  --accent: #4f3ff0;
  --accent-hover: #3f31d4;
  --accent-soft: #eeebff;
  --gold: #e5a50a;
  --danger: #cf3a2c;
  --danger-soft: #fdecea;
  --warn-soft: #fdf3e0;
  --ok: #0e9f6e;
  --ok-soft: #e6f6ef;

  /* Grade badges are solid chips carrying white text, so these stay fixed in
     both themes and are solved for >=4.5:1 against white. Lightening them for
     dark mode would break the white text sitting on top of them. */
  --grade-a: #0c835b;
  --grade-b: #4a8424;
  --grade-c: #9a6d08;
  --grade-d: #b95a1b;
  --grade-f: #cf3a2c;

  /* Used when a status colour is TEXT on a soft background, not a chip. */
  --pill-danger: #c7382a;
  --pill-ok: #0b7e57;
  --pill-warn: #b0551a;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16, 19, 26, .05), 0 8px 24px -12px rgba(16, 19, 26, .16);
  --shadow-lg: 0 2px 4px rgba(16, 19, 26, .05), 0 24px 60px -24px rgba(16, 19, 26, .26);

  --serif: 'Instrument Serif', Iowan Old Style, Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1120px;
  --prose: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ink: #eef1f6;
    --ink-2: #c3cbd7;
    --muted: #8e99a9;
    --paper: #0e1116;
    /* Raised above --paper so cards read as elevated rather than as bare outlines. */
    --surface: #1a2029;
    --surface-2: #222a35;
    --line: #262e3a;
    --accent: #8b7cff;
    --accent-hover: #a396ff;
    --accent-soft: #1e1b3a;
    --gold: #f0b429;
    --danger: #f0705f;
    --danger-soft: #2c1512;
    --warn-soft: #2a2010;
    --ok: #34d399;
    --ok-soft: #0f2620;
    /* Badge backgrounds deliberately unchanged — white text sits on them. */
    --pill-danger: #f0705f;
    --pill-ok: #34d399;
    --pill-warn: #f38a3f;
    --accent-ink: #0e1116;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 60px -24px rgba(0, 0, 0, .7);
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.01em; }
h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 5.2vw, 3.6rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.18rem; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
small { font-size: .85rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: .7rem 1rem; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.prose { max-width: var(--prose); }
.stack > * + * { margin-top: 1rem; }
.muted { color: var(--muted); }
.center { text-align: center; }

/* ------------------------------------------------------------------ header */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 1.5rem; height: 66px; }

.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--serif); font-size: 1.42rem; color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand .spark { color: var(--gold); font-size: 1.1em; line-height: 0; }

.nav { display: flex; gap: 1.4rem; margin-left: auto; align-items: center; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 500; }
.nav a:hover { color: var(--accent); }

@media (max-width: 760px) {
  .nav .hide-sm { display: none; }
  .site-head .wrap { gap: .75rem; }
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.15rem; border-radius: var(--radius-sm);
  font: inherit; font-size: .95rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-lg { padding: .95rem 1.5rem; font-size: 1.02rem; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .55; pointer-events: none; }

/* ------------------------------------------------------------------ forms */

label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .35rem; color: var(--ink-2); }
input[type='text'], input[type='email'], input[type='password'], input[type='url'],
input[type='date'], input[type='datetime-local'], input[type='search'], textarea, select {
  width: 100%; padding: .74rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); font: inherit; font-size: .98rem;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline-offset: 0; }
.field + .field { margin-top: 1rem; }
.hint { font-size: .84rem; color: var(--muted); margin-top: .35rem; }

.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
}
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }

.alert { padding: .85rem 1rem; border-radius: var(--radius-sm); font-size: .93rem; border: 1px solid; }
.alert-error { background: var(--danger-soft); border-color: var(--danger); color: var(--pill-danger); }
.alert-ok { background: var(--ok-soft); border-color: var(--ok); color: var(--pill-ok); }
.alert-warn { background: var(--warn-soft); border-color: var(--gold); color: var(--ink); }

/* ------------------------------------------------------------------ grade */

.grade {
  display: inline-grid; place-items: center;
  width: 84px; height: 84px; border-radius: 20px;
  font-family: var(--serif); font-size: 3rem; line-height: 1; color: #fff;
  box-shadow: var(--shadow);
}
.grade-sm { width: 44px; height: 44px; border-radius: 12px; font-size: 1.6rem; }
.grade-A { background: var(--grade-a); }
.grade-B { background: var(--grade-b); }
.grade-C { background: var(--grade-c); }
.grade-D { background: var(--grade-d); }
.grade-F { background: var(--grade-f); }

/* WCAG 2.2 AA 2.5.8 — interactive targets are at least 24x24 CSS px. */
.toolbar button, .linkish, .toggle button, .tag { min-height: 24px; }
.linkish { padding: .2rem 0; }

.pill {
  display: inline-block; padding: .18rem .6rem; border-radius: 999px;
  font-size: .76rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
.pill-high { background: var(--danger-soft); color: var(--pill-danger); }
.pill-medium { background: var(--warn-soft); color: var(--pill-warn); }
.pill-low { background: var(--ok-soft); color: var(--pill-ok); }

/* ------------------------------------------------------------------ footer */

.site-foot {
  margin-top: 5rem; border-top: 1px solid var(--line);
  background: var(--surface); padding: 2.5rem 0 3rem;
  font-size: .9rem; color: var(--muted);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: 1.1rem; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--accent); }
.disclaimer { max-width: 62ch; }

/* ------------------------------------------------------------------ utility */

.auth-page { max-width: 420px; margin: 4rem auto 0; }
.grid { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } }

.badge-dev {
  background: var(--warn-soft); color: var(--ink); border: 1px solid var(--gold);
  padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700;
}

/* ------------------------------------------------------------------ analysis */

.verdict { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }

.answer {
  font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.35;
  margin: 1.6rem 0 1.4rem; max-width: 54ch; border-left: 3px solid var(--accent);
  padding-left: 1.1rem;
}

.rights { margin: 0; padding-left: 1.1rem; }
.rights li { margin-bottom: .3rem; }

.controls {
  display: flex; gap: .75rem; flex-wrap: wrap;
  position: sticky; top: 66px; z-index: 20;
  background: var(--paper); padding: .9rem 0; border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
}
.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.toggle button {
  font: inherit; font-size: .87rem; font-weight: 600; cursor: pointer;
  padding: .45rem .95rem; border: 0; background: transparent; color: var(--muted);
}
.toggle button.on { background: var(--accent); color: var(--accent-ink); }

.clause {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.35rem 1.5rem; margin-bottom: 1rem; background: var(--paper);
}
.clause[data-risk='high'] { border-left: 4px solid var(--danger); }
.clause[data-risk='medium'] { border-left: 4px solid var(--grade-d); }
.clause[data-risk='low'] { border-left: 4px solid var(--line); }
.clause h3 { margin: .55rem 0 .55rem; font-size: 1.14rem; }
.clause p { margin: 0; }

.clause-head { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; }
.clause-cat { font-size: .8rem; color: var(--muted); font-weight: 600; }

.quote {
  margin: 0; padding: .85rem 1.1rem; background: var(--surface);
  border-radius: var(--radius-sm); border-left: 3px solid var(--line);
}
.quote p { font-family: var(--serif); font-size: 1.06rem; }
.quote cite { display: block; margin-top: .45rem; font-size: .8rem; color: var(--muted); font-style: normal; }

.action-drawer { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .85rem; }
.action-drawer summary { cursor: pointer; font-weight: 600; font-size: .93rem; color: var(--accent); }
.action-drawer ol { margin: .8rem 0 0; padding-left: 1.25rem; }
.action-drawer li { margin-bottom: .45rem; }
.action-drawer li::marker { color: var(--accent); font-weight: 700; }

.ai-note {
  margin-top: 2rem; padding: 1rem 1.15rem; background: var(--surface);
  border-radius: var(--radius-sm); font-size: .88rem; color: var(--muted);
}

.label-warning {
  background: var(--warn-soft); border: 1px solid var(--gold); color: var(--ink);
  padding: 1rem 1.15rem; border-radius: var(--radius-sm); margin: 1.5rem 0; font-size: .93rem;
}

.progress { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .95rem; }
.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* ------------------------------------------------------------------ exposure */

.stats {
  display: grid; gap: 1rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.stat-v { font-family: var(--serif); font-size: 2rem; line-height: 1.1; }
.stat-l { font-size: .88rem; font-weight: 600; margin-top: .25rem; }
.stat-s { font-size: .8rem; color: var(--muted); }

.port-row {
  display: flex; align-items: center; gap: .9rem; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; background: var(--paper);
}
.port-row:hover { border-color: var(--accent); color: inherit; }

.renewals { list-style: none; margin: 0; padding: 0; }
.renewals li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.renewals li:last-child { border-bottom: 0; }

.pick-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pick { display: block; cursor: pointer; margin: 0; font-weight: 400; }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick-body {
  display: flex; align-items: center; gap: .7rem;
  border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .85rem;
  background: var(--paper); transition: border-color .12s ease, background .12s ease;
}
.pick input:checked + .pick-body { border-color: var(--accent); background: var(--accent-soft); }
.pick input:focus-visible + .pick-body { outline: 3px solid var(--accent); outline-offset: 2px; }
.pick-body small { display: block; }

.sticky-save {
  position: sticky; bottom: 0; margin-top: 2rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: .9rem 0;
}

.watch-bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.6rem; padding: 1rem 1.15rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.watch-bar form { margin: 0; }

/* ------------------------------------------------------------------ seo pages */

.crumbs { font-size: .87rem; color: var(--muted); margin-bottom: 1rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

.clause-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; display: block; overflow-x: auto; }
.clause-table thead th {
  text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); border-bottom: 2px solid var(--line); padding: .6rem .8rem;
}
.clause-table tbody th { text-align: left; font-weight: 600; vertical-align: top; padding: .9rem .8rem; min-width: 150px; }
.clause-table td { vertical-align: top; padding: .9rem .8rem; border-bottom: 1px solid var(--line); }
.clause-table tbody th { border-bottom: 1px solid var(--line); }
.clause-table .quote p { font-size: .95rem; }

.link-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.link-list li { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.link-list li:last-child { border-bottom: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------- blog */

.blog-search { display: flex; gap: .6rem; margin: 1.5rem 0 1rem; }
.blog-search input { flex: 1; max-width: 340px; }

.tag-row { display: flex; gap: .45rem; flex-wrap: wrap; }
.tag {
  display: inline-block; padding: .25rem .7rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600; text-decoration: none;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid transparent;
}
.tag:hover { border-color: var(--accent); color: var(--accent); }
.tag.on { background: var(--accent); color: var(--accent-ink); }

.post-card h2 a { text-decoration: none; color: var(--ink); }
.post-card h2 a:hover { color: var(--accent); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }

.toc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin: 2rem 0;
}
.toc-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 .6rem; font-weight: 700; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { padding: .18rem 0; font-size: .93rem; }
.toc li.lvl-3 { padding-left: 1rem; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.post-body { font-size: 1.06rem; line-height: 1.72; }
.post-body h2 { margin-top: 2.2rem; font-size: 1.5rem; }
.post-body h3 { margin-top: 1.8rem; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 1.5rem 0; }
.post-body blockquote {
  margin: 1.5rem 0; padding: .3rem 0 .3rem 1.15rem;
  border-left: 3px solid var(--accent); color: var(--ink-2); font-style: italic;
}
.post-body pre {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1rem; overflow-x: auto; font-size: .88rem;
}
.post-body code { font-family: var(--mono); font-size: .9em; background: var(--surface-2); padding: .1rem .35rem; border-radius: 4px; }
.post-body pre code { background: none; padding: 0; }
.post-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; display: block; overflow-x: auto; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; }
.post-body hr { margin: 2.5rem 0; }

img.hero { width: 100%; height: auto; border-radius: var(--radius); margin: 1.5rem 0; }

.price { font-family: var(--serif); font-size: 2.6rem; line-height: 1; margin: .8rem 0 1.2rem; }
.price .per { font-family: var(--sans); font-size: .95rem; color: var(--muted); font-weight: 500; margin-left: .5rem; }

.faq { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.faq h2 { font-size: 1.35rem; }
.faq-item { border-bottom: 1px solid var(--line); padding: .2rem 0; }
.faq-item summary {
  cursor: pointer; font-weight: 600; padding: .8rem 0; font-size: 1.02rem;
  list-style: none; display: flex; align-items: center; gap: .6rem; min-height: 24px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: '+'; color: var(--accent); font-weight: 700; font-size: 1.15rem; }
.faq-item[open] summary::before { content: '−'; }
.faq-item p { margin: 0 0 1rem 1.5rem; color: var(--ink-2); }

/* --------------------------------------------------------------- placements */

.post-layout {
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 3rem 20px;
  display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr);
}
.post-main { min-width: 0; max-width: 760px; }
@media (min-width: 1080px) {
  .post-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .post-main { max-width: none; }
}
.aside-sticky { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1rem; }

.promo {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; background: var(--surface); display: block;
}
.promo-house { background: var(--accent-soft); border-color: var(--accent); }

.promo-label {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .12rem .5rem;
  margin-bottom: .6rem; background: var(--paper);
}
.promo-img { width: 100%; height: auto; border-radius: var(--radius-sm); margin-bottom: .75rem; display: block; }
.promo-head { font-weight: 600; font-size: 1.02rem; margin: 0 0 .4rem; line-height: 1.35; }
.promo-body { font-size: .9rem; color: var(--ink-2); margin: 0 0 .9rem; line-height: 1.5; }
.promo-cta { width: 100%; }

/* In-content and end-of-post sit inline with the article. */
.promo-row { display: grid; gap: 1rem; margin: 2.5rem 0; }
@media (min-width: 700px) { .promo-row { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.promo-row .promo { background: var(--paper); }

.disclosure-note {
  font-size: .85rem; color: var(--muted); line-height: 1.5;
  background: var(--surface); border-left: 3px solid var(--gold);
  padding: .7rem .9rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0 0 1.4rem;
}

/* The entity pages get a slot too, below the clause list. */
.terms-promos { margin-top: 2.5rem; }

.clause-link { color: inherit; text-decoration: none; }
.clause-link:hover { color: var(--accent); text-decoration: underline; }
.clause-hub {
  margin-top: 2.5rem; padding: 1.25rem 1.4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.clause-hub h2 { margin-top: 0; }

/* ------------------------------------------------------- share + progress */

.share-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 1.4rem; }
.share-btn {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  padding: .35rem .8rem; min-height: 28px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink-2); text-decoration: none;
}
.share-btn:hover { border-color: var(--accent); color: var(--accent); }

.analyze-progress { margin-top: 1.2rem; }
.analyze-bar {
  height: 4px; background: var(--surface-2); border-radius: 999px;
  overflow: hidden; margin-top: .8rem;
}
.analyze-bar i {
  display: block; height: 100%; width: 0;
  background: var(--accent); border-radius: 999px;
  transition: width .4s ease;
}
.analyze-note { margin-top: .7rem; }

/* Mobile navigation. Three sections were unreachable below 760px. */
.mobile-menu { display: none; position: relative; }
.mobile-menu > summary {
  list-style: none; cursor: pointer; font-weight: 600; font-size: .95rem;
  color: var(--ink-2); padding: .45rem .7rem; min-height: 24px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu-panel {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60;
  display: flex; flex-direction: column; gap: .2rem; min-width: 190px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .5rem;
}
.mobile-menu-panel a {
  padding: .6rem .7rem; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-size: .95rem; min-height: 24px;
}
.mobile-menu-panel a:hover { background: var(--surface); color: var(--accent); }
@media (max-width: 760px) { .mobile-menu { display: block; } }

/* Short pages left a raw band under the footer. */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
.site-foot { flex-shrink: 0; }

/* Empty states: a dead-end sentence gives no way forward. */
.empty { text-align: left; }
.empty-title { font-weight: 600; margin: 0 0 .3rem; }
.empty-body { color: var(--muted); font-size: .92rem; margin: 0 0 .9rem; line-height: 1.5; }

/* 375px: the two header actions wrapped to two lines each. */
@media (max-width: 480px) {
  .site-head .wrap { gap: .5rem; padding: 0 14px; }
  .nav { gap: .6rem; }
  .nav .btn { padding: .55rem .8rem; font-size: .88rem; }
}

/* ===================================================================== hero */
/* A dark band in both themes. The photograph is dark, so theming it would mean
   shipping two images and two scrims for no gain. */

.hero {
  position: relative;
  isolation: isolate;
  background: #0b0e13;
  color: #fff;
  /* Full viewport, minus the header, so the hero owns the first screen.
     svh rather than vh: on mobile, vh includes the browser chrome that is
     about to slide away, so 100vh overflows on load and then jumps. */
  min-height: calc(100svh - 66px);
  display: flex;
  align-items: center;
  padding: clamp(3rem, 7vw, 5rem) 20px clamp(5rem, 9vw, 7rem);
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 32%; display: block; }

/* Two scrims, not one. The horizontal pass guarantees contrast behind the text
   column; the vertical pass stops the header and the section below fighting the
   photograph at the edges. */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(8,10,14,.96) 0%, rgba(8,10,14,.90) 32%, rgba(8,10,14,.45) 58%, rgba(8,10,14,.15) 100%),
    linear-gradient(180deg, rgba(8,10,14,.55) 0%, rgba(8,10,14,0) 28%, rgba(8,10,14,0) 70%, rgba(8,10,14,.65) 100%);
}

.hero-inner { width: 100%; max-width: var(--wrap); margin: 0 auto; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #c3cbd7; margin: 0 0 1.4rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  padding: .4rem .85rem; border-radius: 999px; backdrop-filter: blur(6px);
}
.hero-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px rgba(229,165,10,.22);
}

.hero-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 1.02; letter-spacing: -.02em;
  margin: 0 0 1.3rem; color: #fff;
  text-wrap: balance;
}

.hero-sub {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6; color: #cdd5e0;
  max-width: 54ch; margin: 0 0 2.2rem;
}

.hero-form {
  display: flex; gap: .6rem; flex-wrap: wrap;
  max-width: 620px; margin: 0;
}
.hero-form input {
  flex: 1; min-width: 260px;
  padding: .95rem 1.1rem; font-size: 1rem;
  background: rgba(255,255,255,.96); color: var(--ink);
  border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}
.hero-form input::placeholder { color: #6b7482; }
.hero-form input:focus { outline: 3px solid var(--gold); outline-offset: 2px; border-color: transparent; }
.hero-form .btn { padding: .95rem 1.6rem; box-shadow: 0 10px 30px -12px rgba(79,63,240,.8); }

.hero-note { margin: 1.1rem 0 0; font-size: .9rem; color: #aab3c0; }
.hero-note a { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
.hero-note a:hover { color: var(--gold); }

/* The progress panel is injected into the hero form, so it needs to read on dark. */
.hero .analyze-progress { max-width: 620px; }
.hero .analyze-stage { color: #e7ecf3; }
.hero .analyze-note { color: #aab3c0; }
.hero .analyze-bar { background: rgba(255,255,255,.16); }

@media (max-width: 640px) {
  /* Portrait phones crop a 16:9 photo to almost nothing, so lean on the scrim
     and let the image sit behind as texture rather than as the subject. */
  /* Lighter than the first attempt: at .82 the photograph was invisible, which
     is the same as not shipping one. This keeps the text safely above 4.5:1
     while the paper and the light still read. */
  .hero::before {
    background:
      linear-gradient(180deg, rgba(8,10,14,.62) 0%, rgba(8,10,14,.76) 48%, rgba(8,10,14,.92) 100%);
  }
  .hero-media img { object-position: 74% 42%; }
  .hero-eyebrow { font-size: .74rem; letter-spacing: .03em; }
  .hero-form .btn { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-inner > * { animation: heroIn .7s cubic-bezier(.2,.7,.3,1) backwards; }
  .hero-inner > *:nth-child(2) { animation-delay: .06s; }
  .hero-inner > *:nth-child(3) { animation-delay: .12s; }
  .hero-inner > *:nth-child(4) { animation-delay: .18s; }
  .hero-inner > *:nth-child(5) { animation-delay: .24s; }
}
@keyframes heroIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The header sits ABOVE the hero in the document, not over it, so making it
   transparent just showed the white page behind. It joins the dark band
   instead, which also survives scrolling — a header that only works at
   scroll-position zero is a header that breaks the moment anyone reads. */
body.has-hero .site-head {
  background: #0b0e13;
  border-bottom-color: rgba(255, 255, 255, .08);
  backdrop-filter: none;
}
body.has-hero .site-head .brand { color: #f4f6f9; }
body.has-hero .site-head .brand .spark { color: var(--gold); }
body.has-hero .site-head .nav a { color: #c3cbd7; }
body.has-hero .site-head .nav a:hover { color: var(--gold); }
body.has-hero .site-head .nav .btn-primary { background: var(--accent); color: #fff; }
body.has-hero .site-head .nav .btn-primary:hover { background: var(--accent-hover); }
body.has-hero .mobile-menu > summary { color: #c3cbd7; border-color: rgba(255,255,255,.2); }

/* No seam between the header and the hero. */
body.has-hero .hero { padding-top: clamp(3rem, 8vw, 6.5rem); }


/* ------------------------------------------------------- hero, full height */

.hero-scroll {
  position: absolute; left: 50%; bottom: clamp(1.4rem, 3vw, 2.4rem);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: #9aa4b2; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; font-weight: 600;
}
.hero-scroll:hover { color: var(--gold); }
.hero-scroll-line { width: 1px; height: 34px; background: linear-gradient(180deg, transparent, #9aa4b2); }
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll-line { animation: scrollPulse 2.4s ease-in-out infinite; transform-origin: top; }
}
@keyframes scrollPulse { 0%,100% { opacity:.35; transform: scaleY(.6); } 50% { opacity:1; transform: scaleY(1); } }
@media (max-height: 620px) { .hero-scroll { display: none; } }

/* ================================================================ honeycomb */

.hive-section { padding: clamp(3.5rem, 7vw, 6rem) 16px; max-width: 1040px; text-align: center; }
.hive-h { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: .4rem; }
.hive-sub { margin-bottom: 2.2rem; }

.hive {
  /* 7 across at any width. The floor keeps a phone legible; the ceiling stops
     the comb sprawling on a wide monitor. */
  --hex-w: clamp(44px, 8.6vw, 122px);
  --hex-h: calc(var(--hex-w) * 1.1547);
  --hex-gap: clamp(4px, 1vw, 9px);
  display: flex; flex-direction: column; align-items: center;
}
/* Rows must overlap by a quarter of a cell for the points to nest. A negative
   flex `gap` is invalid and is silently dropped, which is why the first attempt
   rendered as separated rows rather than a comb — margin can go negative. */
.hive-row + .hive-row {
  margin-top: calc(var(--hex-h) * -0.255 + var(--hex-gap) * 0.5);
}
.hive-row { display: flex; justify-content: center; gap: var(--hex-gap); }
/* Half a cell plus half a gap: the offset that turns stacked rows into a comb. */
.hive-row.offset { margin-left: calc((var(--hex-w) + var(--hex-gap)) * 0.5); }

.hex {
  width: var(--hex-w); height: var(--hex-h);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: grid; place-items: center;
  text-decoration: none; color: #fff;
  background: var(--grade-c);
  transition: transform .18s ease, filter .18s ease;
  position: relative;
}
.hex.grade-A { background: var(--grade-a); }
.hex.grade-B { background: var(--grade-b); }
.hex.grade-C { background: var(--grade-c); }
.hex.grade-D { background: var(--grade-d); }
.hex.grade-F { background: var(--grade-f); }

.hex:hover, .hex:focus-visible { transform: scale(1.07); filter: brightness(1.12); z-index: 2; color: #fff; }
/* clip-path crops an outline, so focus is shown with an inner ring instead. */
.hex:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #fff; }

.hex-in { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: 0 6px; }
.hex-grade { font-family: var(--serif); font-size: clamp(15px, calc(var(--hex-w) * 0.3), 38px); line-height: 1; }
.hex-name {
  font-size: clamp(7px, calc(var(--hex-w) * 0.113), 13px); font-weight: 600; letter-spacing: .01em;
  max-width: calc(var(--hex-w) * 0.82); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.hive-legend {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem 1.1rem; padding: 0; margin: 2.4rem 0 0; font-size: .82rem; color: var(--muted);
}
.hive-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.hive-legend strong { color: var(--ink); }
.hive-legend .swatch {
  width: 12px; height: 14px; display: inline-block;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hive-legend .swatch.grade-A { background: var(--grade-a); }
.hive-legend .swatch.grade-B { background: var(--grade-b); }
.hive-legend .swatch.grade-C { background: var(--grade-c); }
.hive-legend .swatch.grade-D { background: var(--grade-d); }
.hive-legend .swatch.grade-F { background: var(--grade-f); }

.hive-more { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

/* ============================================================== page bands */
/* Same language as the hero, a third of the height. Interior pages exist to be
   read, so the image sets the tone and then gets out of the way. */

.band {
  position: relative; isolation: isolate;
  background: #0b0e13; color: #fff;
  padding: clamp(3rem, 6vw, 4.75rem) 20px clamp(2.6rem, 5vw, 4rem);
  overflow: hidden;
}
.band-media { position: absolute; inset: 0; z-index: -2; }
.band-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; display: block; }
.band::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(8,10,14,.95) 0%, rgba(8,10,14,.88) 38%, rgba(8,10,14,.5) 66%, rgba(8,10,14,.2) 100%),
    linear-gradient(180deg, rgba(8,10,14,.5) 0%, rgba(8,10,14,0) 34%, rgba(8,10,14,.5) 100%);
}
.band-inner { width: 100%; max-width: var(--wrap); margin: 0 auto; }
.band-eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .7rem;
}
.band-title {
  font-family: var(--serif); font-weight: 400; color: #fff;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: -.015em;
  margin: 0 0 .7rem; text-wrap: balance;
}
.band-sub { font-size: clamp(1rem, 1.4vw, 1.12rem); color: #cdd5e0; max-width: 56ch; margin: 0; }

@media (max-width: 640px) {
  .band::before {
    background: linear-gradient(180deg, rgba(8,10,14,.66) 0%, rgba(8,10,14,.82) 60%, rgba(8,10,14,.94) 100%);
  }
}

/* The header must not paint a light bar above a dark band either. */
body.has-band .site-head {
  background: #0b0e13; border-bottom-color: rgba(255,255,255,.08); backdrop-filter: none;
}
body.has-band .site-head .brand { color: #f4f6f9; }
body.has-band .site-head .brand .spark { color: var(--gold); }
body.has-band .site-head .nav a { color: #c3cbd7; }
body.has-band .site-head .nav a:hover { color: var(--gold); }
body.has-band .mobile-menu > summary { color: #c3cbd7; border-color: rgba(255,255,255,.2); }