/* ============================================================
   QuestLaw website — the one stylesheet every page loads.

   Tokens come from tokens.css, fonts from fonts.css. This file owns the shared
   shell (nav, footer, buttons, page and prose primitives) and the landing
   page's own sections. docs.css layers the documentation shell on top.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: var(--leading-normal);
}
/* Column flex plus an auto top margin on the last child: the footer sits at the bottom of
   short pages (auth callback, contact received) instead of halfway up them. */
.foot { margin-top: auto; }
a { color: var(--oxblood); text-decoration: none; }
a:hover { color: var(--oxblood-hover); }
h1, h2, h3, h4, h5, p { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/*
 * Two widths, and only two. wrap-wide is the page's left edge — every section starts
 * there, so the eye tracks one margin from the hero to the footer. Prose inside it is
 * capped at --site-narrow and stays LEFT aligned rather than centred: centring a
 * narrower column would indent the text sections away from the sections that need the
 * full width for a recording, and the mismatched left edges read worse than the space.
 * Rules and accordion rows are capped with the text so a row never outruns its content.
 */
.wrap-wide { width: min(1200px, calc(100% - 44px)); margin: 0 auto; }
.wrap-read { width: min(var(--site-narrow), calc(100% - 44px)); margin: 0 auto; }
.mono { font-family: var(--font-mono); }
.disp {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.06;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  padding: 10px 16px; border-radius: var(--shape-sm);
  border: 1px solid var(--oxblood); background: var(--oxblood); color: var(--on-oxblood);
  cursor: pointer; transition: background var(--duration-fast) var(--ease-out);
}
.btn:hover { background: var(--oxblood-hover); color: var(--on-oxblood); }
.btn:active { background: var(--oxblood-press); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-shadow); }
.btn.sm { font-size: 13px; padding: 7px 12px; }
.btn.ghost { background: transparent; color: var(--oxblood); }
.btn.ghost:hover { background: var(--oxblood); color: var(--on-oxblood); }

/* nav */
.nav { border-bottom: 1px solid var(--rule); }
.nav .row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 0; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.brand b { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.navlinks { display: flex; align-items: center; gap: 24px; }
.navlinks a { font-size: 14px; color: var(--ink-2); }
.navlinks a:hover { color: var(--ink); }
.navlinks a.btn { color: var(--on-oxblood); }
.navlinks a.btn:hover { color: var(--on-oxblood); }
@media (max-width: 760px) { .navlinks a:not(.only) { display: none; } }

/*
 * Product recordings.
 *
 * The recordings already contain a shadowed application window on their own canvas, so a
 * bordered, shadowed card around them frames a frame and reads as a postage stamp. The
 * wrapper only clips; `--zoom` crops into the recording so the interface fills the slot at
 * a legible size, tuned per clip where the capture left dead margin.
 */
.demo-frame {
  overflow: hidden; border-radius: var(--shape-md);
  background: var(--paper);
}
.demo { display: block; width: 100%; height: auto; transform: scale(var(--zoom, 1)); }

/* hero — copy beside the recording */
.hero { padding: 52px 0 8px; }
.hero-layout { display: grid; grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr); gap: 44px; align-items: center; }
.hero h1 { font-size: clamp(1.9rem, 3.3vw, 2.65rem); max-width: 17ch; }
.hero .lede { font-size: 1.05rem; color: var(--ink-2); max-width: 46ch; margin: 18px 0 0; text-wrap: pretty; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 26px 0 0; }

/* one-line product statement */
.lead { padding: 56px 0 8px; border-top: 1px solid var(--rule); margin-top: 44px; }
.lead h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); max-width: 22ch; }
.lead p { font-size: 1.05rem; color: var(--ink-2); max-width: var(--site-narrow); margin: 14px 0 0; text-wrap: pretty; }

/* explorer (accordion + the demo it selects) */
.explorer { padding: 36px 0 8px; }
.exp-layout { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 40px; align-items: start; }
.exp-acc { border-top: 1px solid var(--rule); }
.exp-acc .item { border-bottom: 1px solid var(--rule); }
.exp-acc .head { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: 0; padding: 19px 2px; cursor: pointer; font-family: inherit; }
/* Solid fill in both states; the step changes hue, never washes out to a tint of its
   own text colour. */
.exp-acc .idx { font-family: var(--font-mono); font-size: 11px; font-weight: 600; flex: none; color: var(--paper); background: var(--ink-2); border-radius: var(--shape-pill); padding: 3px 8px; }
.exp-acc .item.open .idx { background: var(--oxblood); }
.exp-acc .ttl { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); flex: 1; }
.exp-acc .item.open .ttl, .exp-acc .head:hover .ttl { color: var(--oxblood); }
.exp-acc .chev { width: 8px; height: 8px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg); transition: transform var(--duration-base) var(--ease-out); flex: none; margin-right: 3px; }
.exp-acc .item.open .chev { transform: rotate(-135deg); border-color: var(--oxblood); }
.exp-acc .body { max-height: 0; overflow: hidden; transition: max-height var(--duration-base) var(--ease-out); }
.exp-acc .inner { padding: 0 4px 24px 30px; }
.exp-acc .lead-line { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -.02em; line-height: 1.12; color: var(--ink); max-width: 22ch; }
.exp-acc .inner > p { font-size: 14.5px; line-height: 1.58; color: var(--ink-2); margin: 12px 0 0; max-width: 52ch; text-wrap: pretty; }
.beta-note { font-size: 13px !important; margin-top: 14px !important; }
.exp-visual { position: sticky; top: 24px; }
.exp-scene { display: none; }
.exp-scene.on { display: block; }
/* One shape for all three, so switching panels never resizes the sticky column. 4:3 rather
   than the capture's own 3:2 — two of these recordings frame a portrait window, and the
   squarer slot is what lets the interface inside them read at a usable size. */
.exp-scene .demo-frame { aspect-ratio: 4 / 3; }
.exp-scene .demo { height: 100%; object-fit: cover; }

/* security */
.sec { padding: 60px 0; border-top: 1px solid var(--rule); }
.sec h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.03em; line-height: 1.08; max-width: 18ch; }
.sec-copy { margin: 26px 0 0; }
.sec-copy p { font-size: 1rem; line-height: 1.66; color: var(--ink-2); margin: 16px 0 0; text-wrap: pretty; }
.sec-copy .intro { margin: 0; }
.sec-copy .sec-more { margin: 22px 0 0; font-size: 13.5px; }

/* faq — full width, heading stacked above the questions */
.faq { border-top: 1px solid var(--rule); background: var(--paper-sunk); padding: 64px 0 72px; }
.faq-layout { display: grid; gap: 28px; }
/* The FAQ is the one section on its own tinted surface, so the band is its container and
   the measure centres inside it. The white sections above stay on the shared left edge:
   they run continuously into the hero and the explorer, which need the full width. */
.faq h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.faq-head p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 12px 0 0; }
.acc { border-top: 1px solid var(--rule); }
.acc .item { border-bottom: 1px solid var(--rule); }
.acc .head { display: flex; align-items: center; gap: 24px; width: 100%; text-align: left; background: none; border: 0; padding: 17px 0; cursor: pointer; font-family: inherit; }
.acc .ttl { font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; flex: 1; }
.acc .item.open .ttl, .acc .head:hover .ttl { color: var(--oxblood); }
/* Two identical concentric bars: the second quarter-turns onto the first, so the
   open state is one clean rule rather than a doubled-up dash. */
.acc .plus { position: relative; width: 13px; height: 13px; flex: none; }
.acc .plus::before, .acc .plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px;
  margin: -0.75px 0 0 -6.5px; background: var(--faint);
  transition: transform var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}
.acc .plus::after { transform: rotate(90deg); }
.acc .item.open .plus::after { transform: rotate(180deg); }
.acc .item.open .plus::before, .acc .item.open .plus::after { background: var(--oxblood); }
.acc .body { max-height: 0; overflow: hidden; transition: max-height var(--duration-base) var(--ease-out); }
.acc .body .inner { padding: 2px 40px 20px 0; }
.acc .body p { font-size: 14px; line-height: 1.62; color: var(--ink-2); margin: 0 0 10px; text-wrap: pretty; }
.acc .body p:last-child { margin-bottom: 0; }
.doclink { display: inline-flex; align-items: baseline; gap: 5px; }
.doclink svg { width: 13px; height: 13px; align-self: center; color: var(--oxblood); }

/* content pages — anything that is mostly words */
.page { padding: 52px 0 8px; }
.page .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--oxblood); }
.page h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.4rem); letter-spacing: -.03em; line-height: 1.08; margin: 10px 0 0; max-width: 22ch; }
.page .lede { font-size: 1.05rem; color: var(--ink-2); max-width: 62ch; margin: 16px 0 0; text-wrap: pretty; }
.prose { padding: 34px 0 64px; }
.prose h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; margin: 34px 0 0; }
.prose h3 { font-size: 1rem; font-weight: 600; margin: 24px 0 0; }
.prose p, .prose li { font-size: 14.5px; line-height: 1.68; color: var(--ink-2); text-wrap: pretty; }
.prose p { margin: 12px 0 0; max-width: 70ch; }
.prose ul, .prose ol { margin: 12px 0 0; padding-left: 22px; max-width: 70ch; }
.prose li { margin: 6px 0 0; }
.prose .fine { font-size: 12.5px; color: var(--muted); }
.prose h2[id], .prose h3[id] { scroll-margin-top: 24px; }

/* long numbered policies — privacy, terms */
.page .effective { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.toc {
  columns: 2; column-gap: 34px; margin: 30px 0 0; max-width: none;
  padding: 18px 22px 18px 44px; border: 1px solid var(--rule);
  border-radius: var(--shape-lg); background: var(--paper-sunk);
}
.toc li { break-inside: avoid; margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
.toc a { color: var(--ink-2); }
.toc a:hover { color: var(--oxblood); }
.card {
  padding: 22px 24px; border: 1px solid var(--rule); border-radius: var(--shape-lg);
  background: var(--paper-sunk);
}
.card h3 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.card p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 8px 0 0; }

/* forms */
.form { display: grid; gap: 18px; max-width: 560px; margin: 28px 0 0; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field .hint { font-size: 12.5px; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--shape-sm);
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.55; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--oxblood); box-shadow: var(--ring-shadow);
}
.form-note { font-size: 12.5px; color: var(--muted); max-width: 56ch; }
.hp { position: absolute; left: -9999px; opacity: 0; }

/* footer — one row of links, then the notice. Wraps on its own; no column grid. */
.foot { background: var(--ink); color: var(--paper); border-top: 1px solid oklch(0.30 0.006 262); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 20px 0; }
.foot .brand { color: var(--paper); }
.foot .brand b { font-size: 16px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-links a { font-size: 13px; color: oklch(0.78 0.005 262); }
.foot-links a:hover { color: var(--paper); }
.foot-legal {
  display: grid; gap: 6px; padding: 14px 0 20px; border-top: 1px solid oklch(0.30 0.006 262);
  color: oklch(0.58 0.006 262); font-size: 11.5px; line-height: 1.55;
}
.foot-legal p { max-width: 108ch; }
.foot-legal a { color: oklch(0.78 0.05 30); }

@media (max-width: 980px) {
  .hero-layout { grid-template-columns: 1fr; gap: 32px; }
  .hero .lede { max-width: 56ch; }
}
@media (max-width: 940px) {
  .exp-layout { grid-template-columns: 1fr; gap: 24px; }
  .exp-visual { position: static; order: -1; }
}