/* Shared shell for the three legal pages (privacy, terms, refunds).
   The tokens are copied from index.html's :root rather than imported,
   because index.html inlines its stylesheet and there is no build step to
   share one. If the palette there changes, change it here too -- these pages
   are linked from every footer and a mismatched theme reads as a phishing
   page, which is the last impression a page about refunds should give.

   Pure ASCII, like every other deployed file. See scripts/check-ascii.mjs. */

:root{
  --paper:#FFFFFF;
  --ink:#0A0A0A;
  --tint:#F2F1ED;
  --muted:#6B6B66;
  --flag:#C8102E;
  --rule:#0A0A0A;

  --grot:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#131312; --ink:#F2F1ED; --tint:#1E1E1C;
    --muted:#9A9A93; --flag:#FF5566; --rule:#F2F1ED;
  }
}
:root[data-theme="dark"]{
  --paper:#131312; --ink:#F2F1ED; --tint:#1E1E1C;
  --muted:#9A9A93; --flag:#FF5566; --rule:#F2F1ED;
}
:root[data-theme="light"]{
  --paper:#FFFFFF; --ink:#0A0A0A; --tint:#F2F1ED;
  --muted:#6B6B66; --flag:#C8102E; --rule:#0A0A0A;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--grot); font-size:17px; line-height:1.6;
  font-synthesis-weight:none;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
.col{max-width:68ch}

.mast{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap;
  padding:14px 0 10px; border-bottom:1px solid var(--rule);
}
.mark{font-weight:800; letter-spacing:-.02em; font-size:19px}
.mark a{color:inherit; text-decoration:none}
.cite{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  letter-spacing:.04em; text-transform:none;
}
.bar-x{height:9px; background:var(--rule)}

.pad{padding:44px 0 64px}

h1{
  font-size:clamp(30px,4.4vw,46px); line-height:1.05; letter-spacing:-.03em;
  font-weight:800; margin:0 0 6px; text-wrap:balance;
}
.stamp{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  letter-spacing:.04em; margin:0 0 34px;
}
h2{
  font-size:20px; letter-spacing:-.01em; font-weight:800;
  margin:38px 0 10px; padding-top:14px; border-top:1px solid var(--rule);
}
h3{font-size:17px; font-weight:700; margin:22px 0 6px}
p,li{margin:0 0 12px}
ul{padding-left:20px; margin:0 0 12px}
strong{font-weight:700}
a{color:inherit; text-underline-offset:2px}

.lede{font-size:19px; line-height:1.5; margin-bottom:26px}

/* The one thing on these pages a reader must not skim past. Used for the
   statements that limit what the product does -- the serving size gap, the
   eligibility conditions, the fact that Creem and not us is the seller. */
.note{
  border-left:3px solid var(--flag); background:var(--tint);
  padding:14px 16px; margin:0 0 16px;
}
.note p:last-child{margin-bottom:0}

footer{
  border-top:1px solid var(--rule); margin-top:54px; padding:22px 0 46px;
  font-size:14px; color:var(--muted);
}
footer a{color:var(--muted)}
.navlinks{margin:0 0 10px}
.navlinks a{margin-right:16px}