/* TrackClear Studio — website
   One stylesheet for all four pages. Same tokens as the app and the docs, so the site, the
   installer and the OAuth consent screen all look like the same product — which is not only
   taste, it is one of the things Google's verification reviewers check for. */

:root {
  --ground: #0B0E0D; --panel: #141917; --panel-2: #1B211E; --line: #262E2A;
  --tx: #E8EDE9; --tx2: #A9B5AF; --tx3: #7C8781;
  --cleared: #35D08A; --tracked: #4C9BE8; --revenue: #E0A33E; --blocked: #E5484D;
  --sans: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --r: 10px;
}
@media (prefers-color-scheme: light) {
  :root { --ground: #F7F9F8; --panel: #FFFFFF; --panel-2: #F0F4F2; --line: #DDE5E1;
    --tx: #0E1412; --tx2: #46534E; --tx3: #6B7773;
    --cleared: #1B8F5A; --tracked: #2A6FB0; --revenue: #A9721B; --blocked: #C0353A; }
}
:root[data-theme="light"] { --ground: #F7F9F8; --panel: #FFFFFF; --panel-2: #F0F4F2; --line: #DDE5E1;
  --tx: #0E1412; --tx2: #46534E; --tx3: #6B7773;
  --cleared: #1B8F5A; --tracked: #2A6FB0; --revenue: #A9721B; --blocked: #C0353A; }
:root[data-theme="dark"] { --ground: #0B0E0D; --panel: #141917; --panel-2: #1B211E; --line: #262E2A;
  --tx: #E8EDE9; --tx2: #A9B5AF; --tx3: #7C8781;
  --cleared: #35D08A; --tracked: #4C9BE8; --revenue: #E0A33E; --blocked: #E5484D; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--ground); color: var(--tx); font-family: var(--sans);
  font-size: 1.0625rem; line-height: 1.65; margin: 0; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 900px; margin: 0 auto; padding-inline: 28px; }
.narrow { max-width: 760px; }

/* ── Anything still holding a placeholder is loud on purpose. Nothing here should reach a
      live domain wearing a {{TOKEN}}, and amber on the page beats a grep you forget to run. */
.todo { color: var(--revenue); font-family: var(--mono); font-size: 0.9em;
  border-bottom: 1px dashed var(--revenue); }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
nav { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px); }
nav .inner { max-width: 900px; margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; gap: 20px; }
.brandmark { font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.01em;
  text-decoration: none; color: var(--tx); white-space: nowrap; }
.brandmark .clear { color: var(--cleared); }
nav .links { margin-left: auto; display: flex; align-items: center; gap: 20px; }
nav .links a { color: var(--tx2); text-decoration: none; font-size: 0.875rem; }
nav .links a:hover { color: var(--tx); }
@media (max-width: 620px) { nav .links a.hide-sm { display: none; } }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn { display: inline-block; font-family: inherit; font-size: 0.9375rem; font-weight: 600;
  padding: 11px 22px; border-radius: var(--r); text-decoration: none; border: 1px solid var(--line);
  color: var(--tx); background: var(--panel); cursor: pointer; }
.btn:hover { border-color: var(--tx3); }
.btn-primary { background: var(--cleared); border-color: var(--cleared); color: #06120C; }
.btn-primary:hover { filter: brightness(1.08); border-color: var(--cleared); }
.btn-sm { font-size: 0.8125rem; padding: 8px 15px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding-block: 76px 40px; }
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; letter-spacing: -0.03em;
  margin: 0; max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--cleared); }
.hero .sub { color: var(--tx2); font-size: 1.125rem; margin: 20px 0 0; max-width: 56ch; }
.hero .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.hero .fine { font-size: 0.8125rem; color: var(--tx3); margin-top: 14px; }

.shot { border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--panel); margin-top: 44px; }
.shot img { display: block; width: 100%; height: auto; }
.shot .placeholder { aspect-ratio: 16 / 10; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 28px;
  background: var(--panel-2); color: var(--tx3); font-family: var(--mono); font-size: 0.8125rem;
  line-height: 1.8; }

/* ── Sections ────────────────────────────────────────────────────────────── */
section { padding-block: 46px; border-top: 1px solid var(--line); }
section.plain { border-top: 0; }
h2 { font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.25; }
h3 { font-size: 1.0625rem; letter-spacing: -0.01em; margin: 30px 0 8px; }
.kicker { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tx3); margin-bottom: 12px; }
p { margin: 0 0 15px; }
p:last-child { margin-bottom: 0; }
.lede { color: var(--tx2); font-size: 1.0625rem; max-width: 62ch; }
strong { font-weight: 600; color: var(--tx); }
code { font-family: var(--mono); font-size: 0.875em; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
a { color: var(--tracked); }

/* ── Feature grid ────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 14px; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 22px; }
.feat .n { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  color: var(--tx3); }
.feat h3 { margin: 8px 0 6px; font-size: 1.0625rem; }
.feat p { font-size: 0.9375rem; color: var(--tx2); margin: 0; }

/* ── Verdict legend ──────────────────────────────────────────────────────── */
.verdicts { display: grid; gap: 10px; margin-top: 24px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.v { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--r); padding: 15px 17px; }
.v .t { font-weight: 700; font-size: 0.9375rem; }
.v p { font-size: 0.875rem; color: var(--tx2); margin: 5px 0 0; }
.v-cleared { border-left-color: var(--cleared); } .v-cleared .t { color: var(--cleared); }
.v-tracked { border-left-color: var(--tracked); } .v-tracked .t { color: var(--tracked); }
.v-revenue { border-left-color: var(--revenue); } .v-revenue .t { color: var(--revenue); }
.v-blocked { border-left-color: var(--blocked); } .v-blocked .t { color: var(--blocked); }

/* ── Callout ─────────────────────────────────────────────────────────────── */
.note { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 22px; font-size: 0.9375rem; color: var(--tx2); margin-top: 22px; }
.note b { color: var(--tx); }
.note.warn { border-left: 3px solid var(--revenue); }

/* ── Price ───────────────────────────────────────────────────────────────── */
.price { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 30px; margin-top: 26px; max-width: 460px; }
.price .amt { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.price .per { color: var(--tx3); font-size: 0.9375rem; margin-top: 6px; }
.price ul { list-style: none; margin: 22px 0; padding: 0; }
.price li { position: relative; padding-left: 24px; font-size: 0.9375rem; color: var(--tx2);
  margin-bottom: 9px; }
.price li::before { content: "✓"; position: absolute; left: 0; color: var(--cleared);
  font-size: 0.875rem; }

/* ── Prose lists ─────────────────────────────────────────────────────────── */
ul.items { list-style: none; margin: 16px 0 0; padding: 0; }
ul.items li { position: relative; padding-left: 19px; color: var(--tx2); margin-bottom: 9px; }
ul.items li::before { content: "·"; position: absolute; left: 5px; color: var(--tx3); }
ul.items li b, ul.items li strong { color: var(--tx); }
ol.steps { margin: 16px 0 0; padding-left: 22px; }
ol.steps li { color: var(--tx2); margin-bottom: 10px; }

/* ── Legal pages ─────────────────────────────────────────────────────────── */
.legal { padding-block: 50px 20px; }
.legal h1 { font-size: 2rem; letter-spacing: -0.025em; margin: 10px 0 0; }
.legal .updated { font-family: var(--mono); font-size: 0.75rem; color: var(--tx3); margin-top: 12px; }
.legal h2 { font-size: 1.25rem; margin-top: 44px; }
.legal h3 { font-size: 1rem; margin-top: 26px; }
.legal p, .legal li { color: var(--tx2); }
.legal section { border-top: 0; padding-block: 0; }
.toc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 22px; margin-top: 30px; }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: 5px; font-size: 0.9375rem; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.scroller { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); margin-top: 18px; }
table { border-collapse: collapse; width: 100%; font-size: 0.875rem; min-width: 520px; }
th { text-align: left; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tx3); font-weight: 400; padding: 12px 16px;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--tx2);
  vertical-align: top; }
tr:last-child td { border-bottom: 0; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
details { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 20px; margin-bottom: 10px; }
details[open] { background: var(--panel-2); }
summary { cursor: pointer; font-weight: 600; font-size: 1rem; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; color: var(--tx3); font-family: var(--mono);
  margin-right: 10px; font-weight: 400; }
details[open] summary::before { content: "−"; }
details .body { color: var(--tx2); font-size: 0.9375rem; margin-top: 12px; }
/* Pages write answers as bare <p> inside <details>; keep both shapes styled the same. */
details > p { color: var(--tx2); font-size: 0.9375rem; margin: 12px 0 0; }
details > p:last-child { margin-bottom: 0; }
details .body p:last-child { margin-bottom: 0; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); margin-top: 60px; padding-block: 34px 50px; }
footer .cols { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
footer .cols > div { min-width: 150px; }
footer .h { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tx3); margin-bottom: 10px; }
footer a { display: block; color: var(--tx2); text-decoration: none; font-size: 0.875rem;
  margin-bottom: 7px; }
footer a:hover { color: var(--tx); }
footer .fine { margin-top: 30px; font-size: 0.8125rem; color: var(--tx3); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; position: fixed; background: var(--panel);
  padding: 10px 16px; border-radius: var(--r); border: 1px solid var(--line); z-index: 100; }