/* ============================================================
   Scandium — scandiumsc.com
   Design tokens
   ============================================================ */
:root{
  --paper:      #fbfaf8;
  --paper-2:    #f4f2ed;
  --ink:        #14161a;
  --ink-2:      #3b4048;
  --muted:      #767c85;
  --line:       #e4e1d9;
  --line-2:     #d3cfc4;
  --accent:     #c2561b;   /* filament -- Scandium, the company */
  --accent-2:   #f0dfd0;

  /* GU.Email product mark. The product gets its own colour so the page can
     say "company first, product second" visually, not just in copy. */
  --gm-bg:      #4b2a7f;   /* purple  */
  --gm-bg-2:    #5c34a0;   /* purple, hover / on dark */
  --gm-fg:      #d8dbe1;   /* silver  -- 7.9:1 on --gm-bg */
  --gm-tint:    #efeaf8;
  --dark:       #101215;
  --dark-2:     #1b1e23;
  --dark-line:  #2b2f36;
  --dark-muted: #8d949e;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(72px, 9.5vw, 132px);
  --radius: 3px;
}

/* ============================================================
   Reset & base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-0.025em; line-height:1.1; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

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

/* Utility type */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.lede{ font-size:clamp(17px,1.9vw,21px); color:var(--ink-2); line-height:1.55; }
.small{ font-size:14.5px; color:var(--muted); line-height:1.6; }
.mono{ font-family:var(--mono); }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  /* font-family and cursor are inherited by <a> but NOT by <button>, which
     falls back to the UA control font. Email CTAs are buttons (a button has
     no href, so there is no address in the markup to harvest), so both are
     set explicitly here rather than in a button-only override. */
  font-family:inherit; cursor:pointer;
  /* <a> is transparent by default, <button> is UA grey (buttonface). Variants
     that want a fill set their own below; without this base, any variant that
     only sets a border -- .btn--ghostDark did -- renders as a grey slab. */
  background:transparent;
  font-size:15px; font-weight:500; letter-spacing:-0.01em;
  padding:.72em 1.3em; border-radius:var(--radius);
  text-decoration:none; border:1px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  white-space:nowrap;
}
.btn--primary{ background:var(--ink); color:var(--paper); }
.btn--primary:hover{ background:var(--accent); }
.btn--ghost{ border-color:var(--line-2); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--onDark{ background:var(--paper); color:var(--ink); }
.btn--onDark:hover{ background:var(--accent); color:#fff; }
.btn--ghostDark{ border-color:var(--dark-line); color:var(--paper); background:transparent; }
.btn--ghostDark:hover{ border-color:var(--dark-muted); }
.btn .arw{ transition:transform .18s ease; }
.btn:hover .arw{ transform:translateX(3px); }

/* A button that reads as inline prose — used where an email address sits in
   running text. Same reason as .btn: no href, so nothing to scrape. */
.lnk{
  font:inherit; color:var(--accent); background:none; border:0; padding:0;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.lnk:hover{ color:var(--ink); }
.band--dark .lnk{ color:var(--paper); }

/* ============================================================
   Element tile (logo mark)
   ============================================================ */
.tile{
  position:relative; flex:none;
  width:34px; height:34px;
  border:1px solid var(--ink);
  border-radius:2px;
  font-family:var(--mono);
  color:var(--ink);
  display:grid; place-items:center;
}
.tile b{ font-size:14px; font-weight:500; letter-spacing:0.01em; line-height:1; }
.tile i{ position:absolute; top:2.5px; left:3.5px; font-size:7.5px; font-style:normal; line-height:1; opacity:.65; }
.tile--dark{ border-color:var(--dark-line); color:var(--paper); }

/* ============================================================
   GU.Email wordmark
   ------------------------------------------------------------
   Every brand mention of the product is wrapped in .gm. Padding and
   radius are in em, so the chip scales with whatever it sits inside --
   a 68px h1 or a 15px list item -- without a size variant per context.
   nowrap keeps "GU.Email" from breaking across a line.
   ============================================================ */
.gm{
  display:inline-block;
  background:var(--gm-bg); color:var(--gm-fg);
  padding:.06em .34em .12em; border-radius:.16em;
  font-weight:600; letter-spacing:-0.015em;
  white-space:nowrap;
}
a:hover > .gm, a:hover .gm{ background:var(--gm-bg-2); }
.band--dark .gm{ background:var(--gm-bg-2); }
h1 .gm, h2 .gm{ letter-spacing:-0.03em; }
/* .eyebrow and .prod__kind are text-transform:uppercase, which INHERITS into
   the chip and would render the wordmark as "GU.EMAIL". The casing is part of
   the brand, so it is reset explicitly wherever the chip sits in small caps. */
.eyebrow .gm, .prod__kind .gm, .ftr h4 .gm{ text-transform:none; letter-spacing:-0.01em; font-size:1.15em; }
/* Inside a purple button the chip would be purple-on-purple: let it inherit. */
.btn--gm .gm, .btn--onDark .gm{ background:transparent; color:inherit; padding:0; }
/* Legal pages drop the filled chip and set the mark as a bold defined term --
   the contract convention. terms.html names the product ~11 times in running
   prose, where filled chips read as highlighter rather than branding. The
   GU.Email SPELLING is unchanged; only the background is dropped. (ADR-014) */
.doc .gm{ background:transparent; color:inherit; padding:0; border-radius:0; font-weight:600; }
.doc a:hover .gm{ background:transparent; }
.specs code{ font-family:var(--mono); font-size:.88em; background:var(--paper-2); border:1px solid var(--line); border-radius:2px; padding:.08em .35em; }

/* ============================================================
   Header
   ============================================================ */
.hdr{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.hdr.is-stuck{ border-bottom-color:var(--line); }
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:68px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand__name{ font-size:16.5px; font-weight:600; letter-spacing:-0.02em; }
.nav{ display:flex; align-items:center; gap:30px; }
.nav a{
  font-size:14.5px; color:var(--ink-2); text-decoration:none;
  transition:color .16s ease;
}
.nav a:hover{ color:var(--ink); }
.hdr__cta{ display:flex; align-items:center; gap:14px; }
.burger{
  display:none; width:38px; height:38px; border:1px solid var(--line-2);
  background:transparent; border-radius:var(--radius); padding:0; cursor:pointer;
  align-items:center; justify-content:center;
}
.burger span{ display:block; width:15px; height:1px; background:var(--ink); position:relative; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:15px; height:1px; background:var(--ink);
}
.burger span::before{ top:-5px; } .burger span::after{ top:5px; }

@media (max-width: 860px){
  .nav{
    position:absolute; top:68px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 20px; display:none;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:11px 0; width:100%; font-size:16px; border-bottom:1px solid var(--line); }
  .burger{ display:flex; }
  .hdr__cta .btn{ display:none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{ padding-top:clamp(56px,8vw,104px); padding-bottom:clamp(56px,8vw,96px); position:relative; overflow:hidden; }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,6vw,72px); align-items:center; }
.hero h1{
  font-size:clamp(38px,6.1vw,68px);
  letter-spacing:-0.038em; line-height:1.02;
  margin:20px 0 22px; max-width:14ch;
}
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero .lede{ max-width:52ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero__facts{
  display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:38px;
  padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--muted);
}
.hero__facts span{ display:inline-flex; align-items:center; gap:8px; }
.hero__facts span::before{ content:""; width:4px; height:4px; background:var(--accent); border-radius:50%; }

.hero__art{ position:relative; display:grid; place-items:center; }
.hero__art svg{ width:min(100%,340px); height:auto; overflow:visible; }
.glow{
  position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(194,86,27,.16) 0%, rgba(194,86,27,0) 68%);
  pointer-events:none;
}
@media (max-width: 900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__art{ order:-1; justify-items:start; }
  .hero__art svg{ width:190px; }
  .hero h1{ max-width:100%; }
}

/* filament animation */
.filament{ stroke-dasharray:1; stroke-dashoffset:0; }
@media (prefers-reduced-motion: no-preference){
  .filament{ animation:hum 4.5s ease-in-out infinite; }
  @keyframes hum{ 0%,100%{ opacity:.85 } 50%{ opacity:1 } }
}

/* ============================================================
   Sections
   ============================================================ */
section{ scroll-margin-top:80px; }
.band{ padding-block:var(--section); }
.band--tint{ background:var(--paper-2); border-block:1px solid var(--line); }
.band--dark{ background:var(--dark); color:var(--paper); }
.band--dark .eyebrow{ color:var(--dark-muted); }
.band--dark .small{ color:var(--dark-muted); }

.sec-head{ max-width:60ch; margin-bottom:clamp(40px,5vw,64px); }
.sec-head h2{ font-size:clamp(28px,3.7vw,42px); letter-spacing:-0.032em; margin:14px 0 18px; }
.sec-head p{ color:var(--ink-2); font-size:clamp(16px,1.7vw,19px); line-height:1.55; }
.band--dark .sec-head p{ color:#b9bfc7; }

/* ---- Problem list ---- */
.probs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.probs li{ background:var(--paper); padding:clamp(24px,3vw,34px); }
.probs .n{ font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.1em; }
.probs p{ margin-top:14px; font-size:16px; color:var(--ink-2); line-height:1.55; }
.probs strong{ color:var(--ink); font-weight:600; }
@media (max-width:820px){ .probs{ grid-template-columns:1fr; } }

/* ---- Feature grid ---- */
.feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.feats > div{ background:var(--paper); padding:clamp(26px,3vw,36px); }
.band--tint .feats > div{ background:var(--paper-2); }
.feats h3{ font-size:17.5px; letter-spacing:-0.02em; margin:18px 0 10px; }
.feats p{ font-size:15.2px; color:var(--ink-2); line-height:1.6; }
.feats .ico{ color:var(--accent); }
.feats .ico svg{ width:22px; height:22px; }
@media (max-width:900px){ .feats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .feats{ grid-template-columns:1fr; } }

/* ---- Credentials strip ---- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.stats > div{ background:var(--paper); padding:clamp(22px,2.6vw,30px); }
.band--tint .stats > div{ background:var(--paper-2); }
.stats dt{ font-family:var(--mono); font-size:clamp(20px,2.4vw,27px); font-weight:500; letter-spacing:-0.03em; color:var(--ink); }
.stats dd{ margin:10px 0 0; font-size:14.5px; color:var(--ink-2); line-height:1.55; }
@media (max-width:900px){ .stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .stats{ grid-template-columns:1fr; } }

/* ---- Products ---- */
/* auto-fit means one product fills the row and a second would sit beside it
   without touching this rule -- Scandium sells products only, and GU.Email is
   currently the only released one. */
.prods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(16px,2vw,24px); align-items:stretch; }
/* A lone full-width card would run its bullets down one sparse column.
   Multi-column, not a 2-col grid: grid rows take the height of their tallest
   cell, so one wrapped bullet left a visible gap beside its short neighbour.
   columns balances the flow and ignores differing item heights. */
/* .prod.prod--wide, not .prod--wide: `.prod ul{display:grid}` is declared
   later in this file and would otherwise win on source order, leaving the list
   a grid -- where `columns` is simply ignored. */
.prod.prod--wide ul{ display:block; columns:2; column-gap:clamp(20px,3vw,44px); }
.prod.prod--wide li{ break-inside:avoid; margin-bottom:9px; }
@media (max-width:620px){ .prod.prod--wide ul{ columns:1; } }
.prod{
  border:1px solid var(--line-2); border-radius:4px; background:var(--paper);
  padding:clamp(28px,3.2vw,40px); display:flex; flex-direction:column;
}
.prod--flag{ border-color:var(--gm-bg); background:var(--gm-tint); }
.prod__kind{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.prod h3{ font-size:clamp(21px,2.3vw,26px); letter-spacing:-0.028em; margin:16px 0 12px; }
.prod p{ font-size:15.8px; color:var(--ink-2); line-height:1.6; }
.prod p + p{ margin-top:14px; }
.prod ul{ margin:20px 0 26px; display:grid; gap:9px; }
.prod li{ font-size:14.8px; color:var(--ink-2); display:grid; grid-template-columns:14px 1fr; gap:10px; line-height:1.5; }
.prod li::before{ content:""; width:5px; height:5px; margin-top:9px; border-radius:50%; background:var(--gm-bg); }
.prod--plain li::before{ background:var(--accent); }
.prod .btn{ margin-top:auto; align-self:flex-start; }
.btn--gm{ background:var(--gm-bg); color:var(--gm-fg); }
.btn--gm:hover{ background:var(--gm-bg-2); color:#fff; }
@media (max-width:900px){ .prods{ grid-template-columns:1fr; } }

/* ---- Steps ---- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,40px); }
.steps li{ padding-top:20px; border-top:1px solid var(--dark-line); }
.steps .n{ font-family:var(--mono); font-size:11.5px; color:var(--accent); letter-spacing:.12em; }
.steps h3{ font-size:18px; margin:14px 0 10px; letter-spacing:-0.02em; }
.steps p{ font-size:15px; color:#b3b9c1; line-height:1.6; }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* ---- Terminal ---- */
.term{
  margin-top:clamp(44px,5vw,64px);
  background:var(--dark-2); border:1px solid var(--dark-line); border-radius:5px;
  font-family:var(--mono); font-size:13.5px; line-height:1.9; overflow-x:auto;
}
.term__bar{ display:flex; gap:7px; padding:13px 16px; border-bottom:1px solid var(--dark-line); }
.term__bar i{ width:9px; height:9px; border-radius:50%; background:#34393f; display:block; }
.term__body{ padding:18px 20px 22px; white-space:pre; color:#c9ced6; font-variant-ligatures:none; }
.term__body .c{ color:#6c737d; }
.term__body .p{ color:var(--accent); }
.term__body .g{ color:#7fae7f; }

/* ---- Spec table ---- */
.specs{ border-top:1px solid var(--line); }
.specs > div{
  display:grid; grid-template-columns:minmax(160px,240px) 1fr; gap:24px;
  padding:16px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.specs dt{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.specs dd{ margin:0; font-size:16px; color:var(--ink-2); }
@media (max-width:620px){ .specs > div{ grid-template-columns:1fr; gap:6px; } }

/* ---- Pricing ---- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); align-items:start; }
.plan{
  border:1px solid var(--line-2); border-radius:4px; background:var(--paper);
  padding:clamp(26px,3vw,34px); display:flex; flex-direction:column; height:100%;
}
.plan--feature{ border-color:var(--ink); box-shadow:0 1px 0 var(--ink); position:relative; }
.plan__tag{
  position:absolute; top:-1px; right:-1px;
  background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 10px; border-radius:0 4px 0 4px;
}
.plan h3{ font-size:19px; letter-spacing:-0.02em; }
/* Reserves three wrapped lines, not three ems. "Small and medium business --
   production mail that can't afford a silent bounce." wraps to 3 lines in a
   ~250px card; at 3em the SMB price block dropped ~24px below the other two
   and the three cards lost their shared baseline. */
.plan__for{ font-size:14.5px; color:var(--muted); margin-top:8px; min-height:5em; }
/* Price and its meta line are two separate blocks, never an inline pair:
   "Rp 14.500.000 / year" is wide enough to wrap the "/ year" onto its own
   line in a narrow card, which knocks the three cards off a shared baseline. */
.plan__price{ margin:26px 0 4px; }
.plan__price b{ font-size:clamp(27px,2.9vw,31px); font-weight:600; letter-spacing:-0.035em; display:block; }
/* Rupiah is the primary figure and USD sits directly beneath it -- we sell
   from Indonesia, so Rp leads and the dollar line is the courtesy conversion. */
.plan__usd{ font-family:var(--mono); font-size:15px; color:var(--ink-2); letter-spacing:-0.01em; }
.plan__meta{ font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.05em; margin-top:6px; }
.plan--free .plan__price b{ color:var(--gm-bg); }
.plan--feature .plan__tag{ background:var(--gm-bg); color:var(--gm-fg); }
.plan--feature{ border-color:var(--gm-bg); box-shadow:0 1px 0 var(--gm-bg); }
.plan--feature li svg{ color:var(--gm-bg); }
.plan ul{ margin:26px 0 28px; display:grid; gap:11px; }
.plan li{ font-size:15px; color:var(--ink-2); display:grid; grid-template-columns:16px 1fr; gap:10px; line-height:1.5; }
.plan li svg{ width:12px; height:12px; margin-top:6px; color:var(--accent); }
.plan .btn{ justify-content:center; margin-top:auto; }
@media (max-width:940px){ .plans{ grid-template-columns:1fr; } .plan__for{ min-height:0; } }
.pricing-note{ margin-top:26px; display:flex; flex-wrap:wrap; gap:8px 26px; }

/* ---- Company ---- */
.co{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,6vw,80px); align-items:start; }
.co p + p{ margin-top:18px; }
.co .lede{ color:var(--ink-2); }
.facts{ border-top:1px solid var(--line); }
.facts > div{ display:grid; grid-template-columns:130px 1fr; gap:20px; padding:15px 0; border-bottom:1px solid var(--line); }
.facts dt{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-top:3px; }
.facts dd{ margin:0; font-size:15.5px; color:var(--ink-2); }
.inds{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.inds span{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  border:1px solid var(--line-2); border-radius:100px; padding:5px 12px; color:var(--ink-2);
}
@media (max-width:900px){ .co{ grid-template-columns:1fr; } }

/* ---- FAQ ---- */
.faq{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(32px,5vw,64px); }
.faq details{ border-bottom:1px solid var(--line); padding:4px 0; }
.faq summary{
  cursor:pointer; list-style:none; padding:18px 0;
  font-size:16.5px; font-weight:500; letter-spacing:-0.015em;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--accent); font-size:18px; flex:none; }
.faq details[open] summary::after{ content:"–"; }
.faq p{ font-size:15.5px; color:var(--ink-2); padding:0 0 20px; max-width:58ch; line-height:1.65; }
@media (max-width:820px){ .faq{ grid-template-columns:1fr; } }

/* ---- CTA ---- */
.cta{ text-align:center; }
.cta h2{ font-size:clamp(28px,4vw,44px); letter-spacing:-0.035em; margin:16px auto 20px; max-width:18ch; }
.cta p{ color:#b9bfc7; max-width:52ch; margin-inline:auto; font-size:17px; }
.cta__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px; }

/* ---- Footer ---- */
.ftr{ background:var(--dark); color:var(--dark-muted); border-top:1px solid var(--dark-line); padding-block:clamp(48px,6vw,72px) 34px; }
.ftr__top{ display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,48px); }
.ftr h4{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6f767f; font-weight:500; margin-bottom:16px; }
.ftr a{ text-decoration:none; color:#b3b9c1; font-size:14.5px; transition:color .16s ease; }
.ftr a:hover{ color:var(--paper); }
.ftr li + li{ margin-top:10px; }
.ftr__about{ font-size:14.5px; line-height:1.65; max-width:38ch; margin-top:16px; }
.ftr__brand{ display:flex; align-items:center; gap:11px; color:var(--paper); text-decoration:none; }
.ftr__brand .brand__name{ color:var(--paper); }
.ftr__btm{
  margin-top:clamp(40px,5vw,60px); padding-top:22px; border-top:1px solid var(--dark-line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px; color:#6f767f;
}
.pay{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; }
.pay em{ font-style:normal; border:1px solid var(--dark-line); border-radius:3px; padding:4px 8px; color:#b3b9c1; }
@media (max-width:820px){ .ftr__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .ftr__top{ grid-template-columns:1fr; } }

/* ============================================================
   Legal pages
   ============================================================ */
.doc{ max-width:760px; padding-block:clamp(56px,7vw,88px); }
.doc h1{ font-size:clamp(30px,4.2vw,44px); letter-spacing:-0.035em; margin-bottom:14px; }
.doc h2{ font-size:19px; letter-spacing:-0.02em; margin:44px 0 14px; }
.doc p, .doc li{ font-size:16px; color:var(--ink-2); line-height:1.7; }
.doc p + p{ margin-top:14px; }
.doc ul{ list-style:disc; padding-left:20px; margin-top:12px; display:grid; gap:8px; }
.doc .updated{ font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.05em; }
.doc a{ color:var(--accent); }
.doc__back{ display:inline-flex; gap:8px; align-items:center; font-size:14px; color:var(--muted); text-decoration:none; margin-bottom:34px; }
.doc__back:hover{ color:var(--ink); }

/* ============================================================
   Reveal on scroll
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .rv{ opacity:0; transform:translateY(14px); transition:opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1); }
  .rv.in{ opacity:1; transform:none; }
}
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }