/* ZeroDegrees — legal pages (/privacy, /terms, /refunds).
 *
 * Deliberately self-contained. index.html is hand-maintained and off-limits, so
 * the handful of custom properties below are duplicated from it rather than
 * shared. Do not "DRY this up" against index.html.
 *
 * These pages are text documents: no three.js, no GSAP, no Lenis, no Embla, no
 * JavaScript at all.
 *
 * Contrast is measured, not eyeballed. Every ratio below is WCAG 2.1 against
 * the actual composited background:
 *   --ink   #1c1b19 on #f1f1f1 -> 15.24:1
 *   --link  #3d5b93 on #f1f1f1 ->  5.97:1
 *   --muted #57554f on #f1f1f1 ->  6.60:1
 *   --ink at .85 over #f1f1f1 (footer) -> 9.94:1
 * The brand blue #6491DE measures 2.80:1 on #f1f1f1 and is therefore used for
 * decoration only -- the asterisk mark and rules -- never for text.
 */

:root{
  --blue:#6491DE;          /* decorative only; fails text contrast on --white */
  --white:#f1f1f1;
  --ink:#1c1b19;
  --link:#3d5b93;
  --muted:#57554f;
  --rule:rgba(28,27,25,.14);
  --rule-soft:rgba(28,27,25,.08);
  --display:"Playfair Display",Georgia,serif;   /* stand-in for Canicule */
  --sans:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(20px,5vw,72px);
  --measure:70ch;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--white)}
body{
  font-family:var(--sans);
  color:var(--ink);
  font-size:clamp(16px,1.02vw,17px);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  min-height:100svh;
}
::selection{background:var(--blue);color:var(--ink)}
svg{display:block}

/* ===== top bar =====
   Shares .doc's column so the back link sits over the text rather than drifting
   out to the page edge on wide screens. */
.topbar{
  width:100%;max-width:var(--measure);margin:0 auto;
  padding:22px var(--gutter) 0;
}
.home{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:13px;font-weight:500;letter-spacing:.01em;
  color:var(--ink);text-decoration:none;
  padding:6px 0;
}
.home .mk{width:.86em;height:.86em;color:var(--blue);transition:transform .6s var(--ease)}
.home span{position:relative}
.home span::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);
}
.home:hover span::after{transform:scaleX(1);transform-origin:left}
.home:hover .mk{transform:rotate(90deg)}

/* ===== document ===== */
.doc{
  flex:1 0 auto;
  width:100%;
  max-width:var(--measure);
  margin:0 auto;
  padding:clamp(38px,7vh,72px) var(--gutter) clamp(56px,9vh,96px);
}

.doc h1{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(40px,7.4vw,72px);line-height:1.02;letter-spacing:-.025em;
  margin-bottom:.42em;
}
.doc h2{
  font-size:clamp(20px,2.2vw,25px);font-weight:600;line-height:1.25;
  letter-spacing:-.012em;
  margin:2.5em 0 .7em;
  padding-top:.85em;
  border-top:1px solid var(--rule-soft);
}
.doc h1 + p + h2,
.doc hr + h2{border-top:0;padding-top:0}
.doc h3{
  font-size:clamp(16px,1.5vw,18px);font-weight:600;line-height:1.35;
  letter-spacing:-.005em;
  margin:1.9em 0 .5em;
}

.doc p{margin:0 0 1.15em;text-wrap:pretty}
.doc h1 + p{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
  margin-bottom:2.1em;
}
.doc h1 + p strong{font-weight:400}

.doc ul{margin:0 0 1.3em;padding-left:1.15em;list-style:none}
.doc li{margin-bottom:.62em;position:relative}
.doc li::before{
  content:"";position:absolute;left:-1.15em;top:.72em;
  width:5px;height:1px;background:var(--muted);
}
.doc li:last-child{margin-bottom:0}

.doc strong{font-weight:600}

.doc a{
  color:var(--link);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:rgba(61,91,147,.42);
  transition:text-decoration-color .35s var(--ease);
}
.doc a:hover{text-decoration-color:currentColor}

/* Every `---` in the sources separates two top-level sections, so each one
   renders. h2 drops its own top rule when a hr already provides one. */
.doc hr{
  border:0;height:1px;background:var(--rule);
  margin:2.6em 0;
}

/* ===== tables =====
   Both tables in the privacy policy are two-column. Below 640px they restack as
   labelled rows so nothing scrolls sideways; above it they stay real tables. */
.table-wrap{margin:0 0 1.6em;overflow-x:auto;-webkit-overflow-scrolling:touch}
.doc table{width:100%;border-collapse:collapse;font-size:.94em}
.doc th,.doc td{text-align:left;vertical-align:top;padding:.72em .9em}
.doc th{
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--rule);
  padding-bottom:.6em;
}
.doc td{border-bottom:1px solid var(--rule-soft)}
.doc tbody tr:last-child td{border-bottom:0}
.doc th:first-child,.doc td:first-child{padding-left:0}
.doc th:last-child,.doc td:last-child{padding-right:0}

@media (max-width:640px){
  .doc thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .doc table,.doc tbody,.doc tr,.doc td{display:block;width:100%}
  .doc tr{
    padding:.95em 0;
    border-bottom:1px solid var(--rule-soft);
  }
  .doc tbody tr:last-child{border-bottom:0}
  .doc td{padding:0;border-bottom:0}
  .doc td + td{margin-top:.3em}
  .doc td::before{
    content:attr(data-label);
    display:block;
    font-family:var(--mono);font-size:10px;letter-spacing:.07em;
    text-transform:uppercase;color:var(--muted);
    margin-bottom:.15em;
  }
}

/* ===== cross-links ===== */
.also{
  width:100%;max-width:var(--measure);margin:0 auto;
  padding:0 var(--gutter) clamp(48px,7vh,80px);
}
.also h2{
  font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
  padding-top:1.5em;border-top:1px solid var(--rule);
  margin-bottom:.9em;
}
.also-links{display:flex;flex-wrap:wrap;gap:10px 26px}
.also-links a{
  font-size:15px;font-weight:500;color:var(--link);text-decoration:none;
  position:relative;padding:2px 0;
}
.also-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);
}
.also-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* ===== footer =====
   Mirrors index.html's .foot: mono, 11px, tracked, rule on top, and the opacity
   on the TEXT rather than the bar. There is no colour scrub on these pages, so
   the values are the static fallbacks index.html uses before the scrub runs. */
.foot{
  flex-shrink:0;
  background:var(--white);color:var(--ink);
  padding:26px var(--gutter);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  border-top:1px solid var(--rule);
}
.foot span{opacity:.85}
.foot a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .35s var(--ease)}
.foot a:hover{border-bottom-color:currentColor}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px}

@media (max-width:600px){
  .foot{flex-direction:column;align-items:flex-start;gap:14px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}