/* ============================================================
   MILVO — shared styles for the text pages (privacy, terms,
   support, 404). The landing page carries its own inline copy
   of these tokens so that it stays a single self-contained file.
   Tokens follow docs/09-design-system.md. Colour is grammar:
   amber = "do this", green = verified fact in the user's favour,
   red = nobody can save this card, teal = nothing is broken.
   ============================================================ */

:root{
  color-scheme: light dark;

  --cream:#FDF8F0;
  --paper:#FFFFFF;
  --paper-sunk:#FBF4EA;
  --ink:#3A302A;
  --ink-2:#7A6A5E;
  --border:#EADFD1;
  --border-soft:#F4EAE0;
  --border-btn:#D9C8B4;

  --amber:#E97B3C;
  --amber-tint:#FDEDE1;
  --amber-border:#F3D6BF;
  --green:#2E9E6B;
  --green-tint:#E4F4EC;
  --red:#D14B3E;
  --red-tint:#FBE9E6;
  --teal:#3E8FA8;
  --teal-tint:#E5F1F5;
  --on-amber:#332B26;

  --shadow-1:0 1px 0 rgba(58,48,42,.04), 0 2px 8px rgba(58,48,42,.05);
  --shadow-2:0 2px 0 rgba(58,48,42,.04), 0 10px 28px -12px rgba(58,48,42,.28);

  --t-h1:clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --t-h2:clamp(1.35rem, 1.2rem + .8vw, 1.72rem);
  --t-h3:clamp(1.12rem, 1.05rem + .35vw, 1.26rem);
  --t-body:clamp(1.0625rem, 1.02rem + .18vw, 1.115rem);
  --t-small:.955rem;

  --gut:16px;
  --sp-1:8px; --sp-2:12px; --sp-3:16px; --sp-4:24px; --sp-5:32px;
  --r-chip:12px; --r-panel:20px; --r-card:24px;
}
@media (min-width:720px){ :root{--gut:28px} }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream:#201A17;
    --paper:#2A2320;
    --paper-sunk:#241E1A;
    --ink:#F7EEE3;
    --ink-2:#C2AE9F;
    --border:#453931;
    --border-soft:#372D27;
    --border-btn:#56473D;
    --amber:#F1934F;
    --amber-tint:#3B2919;
    --amber-border:#5E4126;
    --green:#4FC08A;
    --green-tint:#17322A;
    --red:#ED7566;
    --red-tint:#3A2320;
    --teal:#68B9D2;
    --teal-tint:#173038;
    --on-amber:#241C18;
    --shadow-1:0 1px 0 rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.28);
    --shadow-2:0 2px 0 rgba(0,0,0,.2), 0 10px 28px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --cream:#201A17;
  --paper:#2A2320;
  --paper-sunk:#241E1A;
  --ink:#F7EEE3;
  --ink-2:#C2AE9F;
  --border:#453931;
  --border-soft:#372D27;
  --border-btn:#56473D;
  --amber:#F1934F;
  --amber-tint:#3B2919;
  --amber-border:#5E4126;
  --green:#4FC08A;
  --green-tint:#17322A;
  --red:#ED7566;
  --red-tint:#3A2320;
  --teal:#68B9D2;
  --teal-tint:#173038;
  --on-amber:#241C18;
  --shadow-1:0 1px 0 rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.28);
  --shadow-2:0 2px 0 rgba(0,0,0,.2), 0 10px 28px -12px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:var(--t-body);
  line-height:1.62;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Gabarito","Trebuchet MS",system-ui,sans-serif;
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
p{margin:0}
ul,ol{margin:0; padding:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:6px}

.wrap{width:100%; max-width:820px; margin-inline:auto; padding-inline:var(--gut)}

/* ---------- header ---------- */
.site-header{
  border-bottom:2px solid var(--border);
  background:var(--paper-sunk);
}
.header-inner{
  display:flex; align-items:center; gap:var(--sp-3);
  min-height:68px;
  max-width:820px; margin-inline:auto; padding-inline:var(--gut);
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none;
  font-family:"Gabarito","Trebuchet MS",system-ui,sans-serif;
  font-weight:700; font-size:1.3rem; letter-spacing:-.02em;
  margin-right:auto;
  padding:6px 4px;
}
.brand .mark{width:30px; height:30px; flex:none}
.back-link{
  min-height:44px;
  display:inline-flex; align-items:center;
  text-decoration:none;
  color:var(--ink-2);
  font-size:var(--t-small);
  border-bottom:2px solid transparent;
}
.back-link:hover{color:var(--ink); border-bottom-color:var(--amber)}

/* ---------- document ---------- */
.doc{padding-block:clamp(36px, 2rem + 3vw, 72px) clamp(48px, 2rem + 4vw, 88px)}
.doc h1{font-size:var(--t-h1); max-width:18ch}
.doc .meta{
  margin-top:var(--sp-3);
  color:var(--ink-2);
  font-size:var(--t-small);
}
.doc section{margin-top:var(--sp-5)}
.doc h2{
  font-size:var(--t-h2);
  margin-bottom:var(--sp-2);
  padding-top:var(--sp-2);
}
.doc h3{font-size:var(--t-h3); margin:var(--sp-4) 0 var(--sp-1)}
.doc p{margin-top:var(--sp-2); color:var(--ink-2); max-width:68ch}
.doc p.plain{color:var(--ink)}
.doc a{
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-decoration-color:var(--amber);
  text-underline-offset:3px;
}
.doc ul{list-style:none; margin-top:var(--sp-3); display:flex; flex-direction:column; gap:10px}
.doc ul li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px;
  color:var(--ink-2); max-width:68ch;
}
.doc ul li::before{
  content:"";
  width:8px; height:8px; margin-top:.62em;
  border-radius:50%;
  background:var(--amber);
}
.doc ol{margin-top:var(--sp-3); padding-left:1.25em; display:flex; flex-direction:column; gap:10px; color:var(--ink-2)}

.lede{font-size:clamp(1.1rem,1.02rem + .4vw,1.24rem); color:var(--ink-2); margin-top:var(--sp-3); max-width:62ch}

.panel{
  background:var(--paper);
  border:2px solid var(--border);
  border-radius:var(--r-card);
  padding:clamp(18px,.9rem + 1.4vw,28px);
  box-shadow:var(--shadow-1);
  margin-top:var(--sp-4);
}
.panel > *:first-child{margin-top:0}
.panel--teal{background:var(--teal-tint); border-color:color-mix(in srgb, var(--teal) 30%, transparent); box-shadow:none}
.panel--green{background:var(--green-tint); border-color:color-mix(in srgb, var(--green) 30%, transparent); box-shadow:none}
.panel--amber{background:var(--amber-tint); border-color:var(--amber-border); box-shadow:none}
.panel h2{margin-bottom:var(--sp-1); padding-top:0}
.panel p{color:var(--ink)}

table{
  width:100%;
  border-collapse:collapse;
  margin-top:var(--sp-3);
  font-size:var(--t-small);
}
caption{text-align:left; color:var(--ink-2); font-size:var(--t-small); padding-bottom:var(--sp-2)}
th,td{
  text-align:left;
  vertical-align:top;
  padding:10px 12px;
  border-bottom:2px solid var(--border-soft);
}
th{font-weight:600; color:var(--ink)}
td{color:var(--ink-2)}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

.mono{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:.92rem;
}
.placeholder{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86rem;
  background:var(--amber-tint);
  border:2px solid var(--amber-border);
  border-radius:8px;
  padding:1px 7px;
  /* these markers are long on purpose; they wrap rather than push the page sideways */
  overflow-wrap:anywhere;
}
.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 16px 9px 13px;
  border-radius:var(--r-chip);
  border:2px solid var(--border);
  background:var(--paper);
  font-size:var(--t-small);
  width:max-content; max-width:100%;
  margin-top:var(--sp-3);
}
.chip .dot{width:9px; height:9px; border-radius:50%; background:var(--ink-2); flex:none}
.chip--teal{background:var(--teal-tint); border-color:color-mix(in srgb, var(--teal) 34%, transparent)}
.doc .chip{max-width:100%}  /* .doc p's 68ch would otherwise win on specificity */
.chip--teal .dot{background:var(--teal)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 30px;
  border-radius:999px;
  border:2px solid transparent;
  font-family:"Gabarito","Trebuchet MS",system-ui,sans-serif;
  font-size:1.125rem; font-weight:600;
  text-decoration:none;
  background:var(--amber);
  color:var(--on-amber);
  box-shadow:var(--shadow-2);
  margin-top:var(--sp-4);
}
.btn--secondary{background:var(--paper); color:var(--ink); border-color:var(--border-btn); box-shadow:var(--shadow-1)}

/* ---------- footer ---------- */
.site-footer{
  margin-top:clamp(48px,3rem + 3vw,88px);
  border-top:2px solid var(--border);
  background:var(--paper-sunk);
  padding-block:var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  font-size:var(--t-small);
  color:var(--ink-2);
}
.site-footer ul{
  display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4);
  list-style:none;
  padding-bottom:var(--sp-3);
  border-bottom:2px solid var(--border-soft);
}
.site-footer a{
  min-height:44px;
  display:inline-flex; align-items:center;
  text-decoration:none;
  color:var(--ink);
  border-bottom:2px solid transparent;
}
.site-footer a:hover{border-bottom-color:var(--amber)}
.site-footer .legal{display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-3); max-width:80ch}

.skip{
  position:absolute; left:var(--gut); top:6px;
  transform:translateY(-200%);
  background:var(--paper); border:2px solid var(--amber);
  border-radius:12px; padding:10px 16px;
  z-index:80; text-decoration:none;
}
.skip:focus{transform:translateY(0)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}