/* ═══════════════════════════════════════════════════════════════════
   WineMe — document pages (support / privacy / terms).
   Shares the homepage's ground, palette and faces so the legal pages
   read as the same company. Single-theme on purpose, like the homepage:
   these paint their own ground rather than borrowing the viewer's.

   One deviation from the homepage tokens, deliberately:
   --ox (#A11D38) scores 2.46:1 as text on --ground and --ox-lit 4.36:1.
   Neither is legible for the inline links these documents are full of,
   so --link is the brand hue lifted to 5.97:1 (passes AA). --ox stays,
   but only ever as a GRAPHIC element — rules, chips — never as text.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --ground:#1A0F0C;
  --ground-2:#150C0A;
  --raised:#22140F;
  --cream:#F7EDE1;
  --body:rgba(247,237,225,.82);   /* 11.06:1 — running text            */
  --dim:rgba(247,237,225,.66);    /*  7.50:1 — meta, labels, footer    */
  --ox:#A11D38;
  --link:#E8677D;                 /*  5.97:1 — inline links            */
  --hair:rgba(247,237,225,.14);
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{
  margin:0; background:var(--ground); color:var(--body);
  font:400 17px/1.75 var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:hidden; overflow-wrap:break-word;
}
::selection{background:var(--ox); color:var(--cream)}

a{color:var(--link); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--cream)}
:focus-visible{outline:2px solid var(--link); outline-offset:3px; border-radius:3px}

/* ── sticky bar ─────────────────────────────────────────────────── */
.bar{
  position:sticky; top:0; z-index:20;
  background:rgba(21,12,10,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);
}
.bar-in{
  max-width:840px; margin:0 auto; padding:13px clamp(20px,5vw,32px);
  display:flex; align-items:center; gap:11px;
}
.bar img{
  width:28px; height:28px; flex:none; display:block;
  background:#000; border-radius:22%;
  box-shadow:0 0 0 1px var(--hair), 0 4px 14px rgba(0,0,0,.5);
}
.bar .wm{
  font-weight:800; font-size:15px; letter-spacing:.16em; color:var(--cream);
}
.bar .home{
  margin-left:auto; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); text-decoration:none; white-space:nowrap;
}
.bar .home:hover{color:var(--cream)}

/* ── document head ──────────────────────────────────────────────── */
main{max-width:840px; margin:0 auto; padding:clamp(48px,9vw,88px) clamp(20px,5vw,32px) 0}
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--link); margin:0 0 18px;
}
.eyebrow b{color:var(--cream); font-weight:400}
h1{
  font-weight:900; font-size:clamp(38px,8.5vw,62px); line-height:.98;
  letter-spacing:-.028em; text-transform:uppercase;
  color:var(--cream); margin:0; text-wrap:balance;
}
.lede{
  font-size:clamp(17px,2.4vw,19px); line-height:1.68; color:var(--body);
  max-width:62ch; margin:20px 0 0;
}
.updated{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); margin:22px 0 0;
}
.head-rule{border:0; border-top:1px solid var(--hair); margin:clamp(34px,6vw,52px) 0 0}

/* ── sections ───────────────────────────────────────────────────────
   The number is real structure, not ornament: these are enumerated
   legal sections that get cited ("section 11"), so they carry it.
   Support has no numbers — it is four unordered topics.            */
section{padding:clamp(30px,5vw,44px) 0; border-bottom:1px solid var(--hair)}
section:last-of-type{border-bottom:0}
.num{
  font-family:var(--mono); font-size:12px; color:var(--link);
  letter-spacing:.06em; display:block; margin:0 0 8px;
}
h2{
  font-weight:700; font-size:clamp(21px,3.2vw,25px); line-height:1.25;
  letter-spacing:-.012em; color:var(--cream); margin:0 0 4px; text-wrap:balance;
}
p{margin:14px 0; max-width:68ch}
ul{margin:14px 0; padding:0; list-style:none; max-width:68ch}
li{position:relative; padding-left:22px; margin:10px 0}
li::before{
  content:""; position:absolute; left:2px; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--ox);
}
strong{color:var(--cream); font-weight:700}

/* numbered rail — the number moves into the margin when there is room */
@media (min-width:900px){
  .numbered section{position:relative; padding-left:76px}
  .num{position:absolute; left:0; top:calc(clamp(30px,5vw,44px) + .38em); margin:0}
}

/* ── contact card (support) ─────────────────────────────────────── */
.card{
  background:var(--raised); border:1px solid var(--hair);
  border-left:3px solid var(--ox); border-radius:4px;
  padding:clamp(22px,4vw,30px); margin:clamp(30px,5vw,42px) 0 0;
}
.card .label{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim); margin:0 0 10px;
}
.card .email{
  font-weight:800; font-size:clamp(21px,4.4vw,30px); letter-spacing:-.02em;
  margin:0; line-height:1.2; word-break:break-word;
}
.card .email a{color:var(--cream); text-decoration:none}
.card .email a:hover{color:var(--link)}
.card p{margin:14px 0 0; color:var(--dim); font-size:15px; max-width:60ch}

/* ── footer ─────────────────────────────────────────────────────── */
footer{
  max-width:840px; margin:0 auto;
  padding:clamp(38px,6vw,54px) clamp(20px,5vw,32px) 64px;
  border-top:1px solid var(--hair); margin-top:clamp(30px,5vw,44px);
}
.foot-links{display:flex; flex-wrap:wrap; gap:10px 24px; margin-bottom:14px}
.foot-links a{color:var(--dim); text-decoration:none; font-size:14px}
.foot-links a:hover{color:var(--cream)}
.foot-legal{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  color:var(--dim); font-size:12.5px;
}