/*
 * The chrome and typography of the dwig.ai compliance pages (DWI-40).
 *
 * Every rule down to the compliance-document section is copied verbatim from
 * public/index.html so the pages are the same site rather than a lookalike:
 * the same tokens, the same body font, the same nav and the same footer. The
 * landing page keeps its own inline copy: it is the deployed byte-for-byte
 * mirror of the live page and may not be restructured.
 */

/* ---------- DWIG design tokens (v1) ---------- */
:root{
  --dwig-ink:#0A1120;
  --dwig-ink-raised:#131C2E;
  --dwig-daylight:#F1F4F7;
  --dwig-paper:#FFFFFF;
  --dwig-signal:#1668F5;
  --dwig-signal-deep:#0F4FC2;
  --dwig-ahead:#F2A93B;
  --dwig-slate:#55647A;
  --dwig-hairline:#DCE4EC;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --util:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.2,.7,.3,1);
  --t-state:120ms;
  --t-lane:1500ms;
  --radius:2px;
  --lane:2px;

  /* semantic (light) */
  --bg:var(--dwig-paper);
  --surface:var(--dwig-paper);
  --surface-2:var(--dwig-daylight);
  --text:var(--dwig-ink);
  --muted:var(--dwig-slate);
  --line:var(--dwig-hairline);
  --accent:var(--dwig-signal);
  --accent-text:var(--dwig-signal-deep);
  --accent-tint:#EAF1FE;
  --btn-bg:var(--dwig-ink);
  --btn-fg:#FFFFFF;
  --shadow:0 1px 0 rgba(10,17,32,.04), 0 18px 48px -24px rgba(10,17,32,.22);

  --pad:clamp(20px,5vw,64px);
  --maxw:1200px;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--dwig-ink);
    --surface:var(--dwig-ink-raised);
    --surface-2:#0F1829;
    --text:#EAF0F7;
    --muted:#93A1B5;
    --line:#20293C;
    --accent:#4C8BFF;
    --accent-text:#7FAAFF;
    --accent-tint:rgba(22,104,245,.16);
    --btn-bg:#EAF0F7;
    --btn-fg:var(--dwig-ink);
    --shadow:0 18px 48px -24px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:var(--dwig-ink);
  --surface:var(--dwig-ink-raised);
  --surface-2:#0F1829;
  --text:#EAF0F7;
  --muted:#93A1B5;
  --line:#20293C;
  --accent:#4C8BFF;
  --accent-text:#7FAAFF;
  --accent-tint:rgba(22,104,245,.16);
  --btn-bg:#EAF0F7;
  --btn-fg:var(--dwig-ink);
  --shadow:0 18px 48px -24px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.03em;line-height:1.02;font-weight:800}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius)}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------- wordmark ---------- */
.wordmark{font-family:var(--display);font-weight:800;letter-spacing:.3em;font-size:20px;text-decoration:none;line-height:1}
.wordmark.sm{font-size:16px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--btn-bg);color:var(--btn-fg);
  font:600 16px/1 var(--body);text-decoration:none;
  padding:17px 24px;border-radius:var(--radius);border:0;cursor:pointer;
  transition:background var(--t-state) var(--ease),transform var(--t-state) var(--ease);
}
.btn:hover{background:var(--dwig-signal-deep);color:#fff}
.btn:active{transform:translateY(1px)}
.btn .icon{width:18px;height:18px;transition:transform var(--t-state) var(--ease)}
.btn:hover .icon{transform:translateX(3px)}
.btn.sm{font-size:14px;padding:12px 18px;gap:10px}
.btn.lg{font-size:17px;padding:19px 26px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent}
.nav .wrap{display:flex;align-items:center;gap:48px;height:76px}
.nav ul{display:flex;gap:36px;list-style:none;margin:0;padding:0}
.nav ul a{font-size:14px;text-decoration:none;color:var(--muted);transition:color var(--t-state)}
.nav ul a:hover{color:var(--text)}
.nav .btn{margin-left:auto}

/* footer */
footer{border-top:1px solid var(--line);padding:32px 0 40px}
footer .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
footer .tagline{font-size:14px;color:var(--muted)}
footer ul{display:flex;flex-wrap:wrap;gap:12px 28px;list-style:none;margin:0 0 0 auto;padding:0}
footer ul a{font-size:14px;color:var(--muted);text-decoration:none}
footer ul a:hover{color:var(--text)}

/* ---------- compliance document ---------- */
/*
 * Everything below is new. The landing page lays out in bands; a policy is one
 * column, so it sets its own measure rather than borrowing a band's grid.
 */
.doc{padding:clamp(40px,6vw,72px) 0 clamp(56px,7vw,88px)}
.doc article{max-width:720px}
.doc .meta{font-size:14px;color:var(--muted)}
.doc h1{font-size:clamp(34px,4.4vw,52px);letter-spacing:-.03em;margin:10px 0}
.doc section{margin-top:40px}
.doc h2{font-size:clamp(20px,2vw,24px);letter-spacing:-.02em;line-height:1.2}
.doc section > * + *{margin-top:14px}
.doc p{font-size:17px;line-height:1.6}
.doc a{color:var(--accent-text);font-weight:500;overflow-wrap:anywhere}
.doc ul{list-style:none;margin:0;padding:0}
.doc ul li{position:relative;padding-left:22px;font-size:17px;line-height:1.6}
.doc ul li::before{content:"\2022";position:absolute;left:4px;color:var(--muted)}
.doc ul li + li{margin-top:12px}

/* the 10DLC disclosures, each its own labelled row so a reviewer can find one */
.doc dl{margin:0}
.doc dt{font-size:14px;font-weight:500;color:var(--muted)}
.doc dd{margin:4px 0 0;font-size:17px;line-height:1.6}
.doc dd + dt{margin-top:22px}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .nav ul{display:none}
  .nav .btn{padding:11px 14px}
  footer ul{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}