/* Shared styling for the standalone legal pages (terms.html, privacy.html).
   Deliberately NOT the landing's stylesheet: these pages carry no dc-runtime, no FX loop and
   no i18n component — just text. Tokens are copied from index.html :root so the two stay
   visually identical; if the landing's palette changes, mirror it here.
   Sizes follow autoqc-web/DESIGN-SIZES.md: body 16px, labels 13px, nothing below the
   --text-faint floor (#b4b6bf) for text. */
:root{
  --ink:#0a0a0c; --surface-1:#131316; --hairline:rgba(255,255,255,.16); --edge:rgba(255,255,255,.12);
  --text-bright:#e8e8ec; --text-mid:#bcbcc4; --text-faint:#b4b6bf; --decor:#5a5a62;
  --accent:#f4b896; --accent-ink:#c8a07a;
}
*{box-sizing:border-box;}
html{scrollbar-width:none;-ms-overflow-style:none;}
html::-webkit-scrollbar{width:0;height:0;}
body{margin:0;background:var(--ink);color:var(--text-mid);font-family:Manrope,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;}

/* faint dot grid + the two verticals, same motif as the landing (axis at 50%: 20% + 80%) */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;}
.bg .dots{position:absolute;inset:0;opacity:.12;
  background-image:radial-gradient(var(--decor) 1px, transparent 1px);background-size:44px 44px;}
.bg .v{position:absolute;top:0;bottom:0;width:1px;background:var(--hairline);opacity:.5;}
.bg .v.l{left:20%;} .bg .v.r{left:80%;}

.wrap{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:0 56px;}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 0;border-bottom:1px solid var(--hairline);}
/* the wordmark is a link, so it must opt out of the body link underline below.
   No padding-left: .14em would compensate the trailing letter-space but also push the Q itself
   3px right of the column everything else lines up on (same fix as the landing header/footer). */
.mark{font-family:Lora,Georgia,serif;font-size:22px;letter-spacing:.14em;
  color:var(--text-bright);text-decoration:none;border-bottom:none;}
.mark:hover{color:var(--accent);border-bottom:none;}

/* Language buttons: same metal chip as the landing's .lang-btn (itself a 1:1 port of the
   product's globals.css) — 9px radius, 34px tall, solid silver rim via a border-box gradient,
   peach rim on hover. The pressed one keeps the silver rim and just brightens its fill, so the
   pair never turns into two accent-coloured buttons. */
.langs{display:flex;gap:8px;}
.lang{appearance:none;display:inline-flex;align-items:center;height:34px;padding:0 12px;
  border-radius:9px;cursor:pointer;border:1.5px solid transparent;
  font-family:Manrope,system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--text-faint);white-space:nowrap;
  background:linear-gradient(180deg,#2a2a31 0%,#0c0c0e 100%) padding-box,
             linear-gradient(#9a9aa4,#9a9aa4) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.5);
  transition:background .25s ease,box-shadow .3s ease,transform .12s ease,color .25s ease;}
.lang:hover{color:var(--text-bright);
  background:linear-gradient(180deg,#2a2a31 0%,#0c0c0e 100%) padding-box,
             linear-gradient(color-mix(in srgb, var(--accent) 55%, #9a9aa4), color-mix(in srgb, var(--accent) 55%, #9a9aa4)) border-box;}
.lang:active{transform:translateY(1px);}
.lang:focus-visible{outline:1px solid color-mix(in srgb, var(--text-mid) 65%, transparent);outline-offset:3px;}
.lang[aria-pressed="true"]{color:var(--text-bright);
  background:linear-gradient(180deg,#33333b 0%,#141418 100%) padding-box,
             linear-gradient(#9a9aa4,#9a9aa4) border-box;}

h1{font-family:Lora,Georgia,serif;font-weight:400;font-size:34px;line-height:1.2;letter-spacing:-.01em;
  color:var(--text-bright);margin:56px 0 10px;}
.updated{font-size:13px;color:var(--text-faint);margin:0 0 8px;}
.lede{font-size:16px;line-height:1.7;color:var(--text-mid);margin:18px 0 0;max-width:70ch;}

section{padding:34px 0;border-top:1px solid var(--hairline);}
section:first-of-type{border-top:none;}
h2{font-family:Lora,Georgia,serif;font-weight:400;font-size:21px;line-height:1.3;
  color:var(--text-bright);margin:0 0 14px;}
h2 .num{font-size:15px;color:var(--text-faint);margin-right:12px;letter-spacing:.06em;}
p{font-size:16px;line-height:1.75;color:var(--text-mid);margin:0 0 14px;max-width:70ch;}
p:last-child{margin-bottom:0;}
ul{margin:0 0 14px;padding-left:22px;}
li{font-size:16px;line-height:1.75;color:var(--text-mid);margin:0 0 8px;max-width:68ch;}
strong{color:var(--text-bright);font-weight:600;}
a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid rgba(200,160,122,.35);}
a:hover{color:var(--accent);border-bottom-color:var(--accent);}
/* placeholders the owner must fill in before publishing */
.fill{color:var(--accent);border-bottom:1px dashed rgba(244,184,150,.5);}

.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px 0 30px;border-top:1px solid var(--hairline);margin-top:8px;}
.foot span, .foot a{font-size:13px;color:var(--text-faint);}
.foot a{border-bottom:none;}
.foot a:hover{color:var(--text-bright);}

[data-lang]{display:none;}
[data-lang].on{display:block;}

@media (max-width:760px){
  .wrap{padding:0 24px;}
  h1{font-size:28px;margin-top:38px;}
  h2{font-size:19px;}
  .bg .v{display:none;}
}