/* Meridian — meridian.mobily.io
   Palette lifted from the app's Theme (Shared/TimeKit.swift) so the site and
   the product read as one object. */

:root {
  --bg:        #0B0E14;
  --bg-deep:   #070910;
  --panel:     #10141C;
  --panel-2:   #151A24;
  --dial:      #24272C;
  --bezel:     #123B2D;
  --bezel-dk:  #0B241C;
  --stroke:    #1F2733;
  --stroke-2:  #2A3444;
  --cream:     #E8E4D8;
  --gold:      #D4B36A;
  --gold-dim:  #A98B47;
  --muted:     #9AA3B2;
  --dim:       #808B9C;
  --good:      #6BBF59;
  --busy:      #E29A3D;
  --asleep:    #D35D56;

  /* System stack only: the page loads no third-party resource of any kind,
     which is the same promise the app makes. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --shell: 1160px;
  --gut: clamp(20px, 5vw, 48px);
  --radius: 18px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--cream); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
:focus-visible:not(.dial-stage) { border-radius: 4px; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }

/* ---------- type ---------- */

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.022em; line-height: 1.12; }

h1 { font-size: clamp(2.4rem, 6.2vw, 4.05rem); }
h2 { font-size: clamp(1.85rem, 4.1vw, 2.75rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.28rem); letter-spacing: -0.01em; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-size: 0.685rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}

.lede { font-size: clamp(1.03rem, 1.7vw, 1.2rem); color: var(--muted); line-height: 1.66; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: #0B0E14;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav.is-stuck { border-bottom-color: var(--stroke); }
.nav-in { display: flex; align-items: center; gap: 18px; height: 66px; }

.wordmark {
  display: flex; align-items: center; gap: 11px;
  font-size: 0.83rem; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--cream);
}
.wordmark:hover { color: var(--cream); }
.wordmark svg { width: 26px; height: 26px; flex: none; }

.nav-links { display: flex; gap: 28px; margin-left: auto; align-items: center; }
/* :not(.btn) matters. This selector outranks .btn-gold on specificity, so
   without it the gold pill's own dark label loses and the button renders its
   text in this colour - which is what washed "Join the beta" out. */
.nav-links a:not(.btn) {
  font-size: 0.9rem; color: var(--cream); font-weight: 500;
  transition: color .2s ease;
}
/* Base is the wordmark's cream, so hover goes to gold rather than brighter -
   the same accent-on-hover move .btn-ghost makes. */
.nav-links a:not(.btn):hover { color: var(--gold); }

@media (max-width: 760px) { .nav-links .hide-sm { display: none; } }
@media (max-width: 380px) {
  .wordmark { font-size: 0.74rem; letter-spacing: 0.2em; gap: 8px; }
  .wordmark svg { width: 22px; height: 22px; }
  .btn-sm { padding: 8px 13px; font-size: 0.8rem; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 0.94rem; font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-gold {
  background: linear-gradient(160deg, #E6CB8C 0%, var(--gold) 46%, #B8974F 100%);
  color: #221A08;
  box-shadow: 0 8px 26px -12px rgba(212,179,106,.8);
}
.btn-gold:hover { color: #221A08; filter: brightness(1.07); }

.btn-ghost { background: transparent; border-color: #55607333; border-color: var(--muted); color: var(--cream); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn-sm { padding: 9px 17px; font-size: 0.85rem; }

/* ---------- sections ---------- */

section { position: relative; }

/* Anchor targets must clear the 66px sticky header. */
section[id], main[id] { scroll-margin-top: 84px; }

.band { padding: clamp(64px, 9vw, 116px) 0; }
.band-line { border-top: 1px solid var(--stroke); }
.band-panel { background: linear-gradient(180deg, var(--bg) 0%, #0d1119 50%, var(--bg) 100%); }

.head { max-width: 660px; margin-bottom: clamp(38px, 5vw, 58px); }
.head p { color: var(--muted); }
.head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- hero ---------- */

.hero { position: relative; padding: clamp(46px, 7vw, 86px) 0 clamp(56px, 8vw, 96px); overflow: hidden; }

.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 720px;
  background: radial-gradient(ellipse 60% 52% at 68% 34%, rgba(18,59,45,.55) 0%, transparent 68%),
              radial-gradient(ellipse 46% 40% at 22% 12%, rgba(212,179,106,.11) 0%, transparent 70%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(30px, 5vw, 68px); align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .hero-art { order: -1; }
}

.hero-grid > * { min-width: 0; }
.hero h1 { margin-bottom: 22px; }
.hero h1 .gild {
  background: linear-gradient(96deg, var(--gold) 8%, #F0DCA8 42%, var(--gold) 78%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
}
.hero .lede { max-width: 33ch; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero-note {
  margin-top: 20px; font-size: 0.84rem; color: var(--dim);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hero-note svg { width: 14px; height: 14px; flex: none; }

/* ---------- the dial ---------- */

.hero-art { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.dial-stage {
  position: relative;
  border-radius: 50%;          /* so the focus ring follows the watch */
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  width: min(100%, 480px);
  aspect-ratio: 1;
  filter: drop-shadow(0 44px 70px rgba(0,0,0,.66)) drop-shadow(0 0 60px rgba(18,59,45,.34));
}
.dial { width: 100%; height: 100%; display: block; }
.dial .hand { transition: transform .16s cubic-bezier(.34,1.56,.64,1); }
/* Switching city moves the 24-hour hand by up to half a turn. The spring above
   is tuned for one-second steps and would read as a jump cut over that
   distance, so the hand borrows a longer sweep for the move and gives it back.
   The reduced-motion block near the top of this file flattens it to nothing. */
.dial .hand.sweeping { transition: transform .62s cubic-bezier(.33,.86,.28,1); }
.dial .sec { transition: none; }

.bezel-group { cursor: grab; }
.bezel-group:active { cursor: grabbing; }

.dial-hint {
  font-size: 0.775rem; color: var(--dim); letter-spacing: .04em;
  display: flex; align-items: center; gap: 7px; text-align: center;
}
.dial-hint svg { width: 13px; height: 13px; }

.browse-card {
  border: 1px solid var(--gold); border-radius: 12px;
  padding: 9px 16px; background: rgba(212,179,106,.09);
  font-size: 0.85rem; color: var(--cream);
  display: none; align-items: center; gap: 10px;
}
.browse-card.on { display: flex; }
.browse-card b { font-family: var(--mono); color: var(--gold); font-weight: 600; }

/* ---------- live clock strip ---------- */

.strip {
  border: 1px solid var(--stroke); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel) 0%, #0d111a 100%);
  padding: clamp(18px, 2.4vw, 26px);
}
.strip-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 15px; margin-bottom: 17px; border-bottom: 1px solid var(--stroke);
}
.strip-top .eyebrow { margin: 0; }
.strip-top .live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
  margin-left: auto;
}
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--good); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 14px; }
/* Each tile is a button, and pressing one hands its city to the dial's
   24-hour hand. The gold tint on .is-primary still means "this one is you".
   The solid gold edge of [aria-pressed=true] means "this one is on the
   hand". */
.zone {
  padding: 13px 15px; border-radius: 13px;
  background: var(--panel-2); border: 1px solid var(--stroke);
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.zone:hover { border-color: var(--stroke-2); background: #1A2130; }
.zone.is-primary { border-color: rgba(212,179,106,.45); background: rgba(212,179,106,.07); }
.zone.is-primary:hover { border-color: rgba(212,179,106,.7); }
.zone[aria-pressed="true"] {
  border-color: var(--gold); background: rgba(212,179,106,.12);
  box-shadow: 0 0 0 1px rgba(212,179,106,.3), 0 12px 28px -20px rgba(212,179,106,.9);
}
.zone-name {
  display: block;
  font-size: 0.66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.zone.is-primary .zone-name,
.zone[aria-pressed="true"] .zone-name { color: var(--gold); }
.zone-time { display: block; font-family: var(--mono); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.zone-meta { display: block; font-size: 0.73rem; color: var(--dim); margin-top: 3px; font-family: var(--mono); }
/* Always rendered, so choosing a city never reflows the row. */
.zone-track {
  display: block; margin-top: 9px; min-height: 1em;
  font-size: 0.6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); transition: color .2s ease;
}
/* This line is what tells you the tile can be pressed, so it stays quiet by
   colour and size rather than by opacity. Faded text stops being readable long
   before it stops being informative. At 0.45 opacity it measured 2.04:1
   against the tile; flat var(--dim) reads 5.05:1. */
.zone:hover .zone-track, .zone:focus-visible .zone-track { color: var(--cream); }
.zone[aria-pressed="true"] .zone-track { color: var(--gold); }

.callable {
  margin-top: 16px; padding: 11px 15px; border-radius: 11px;
  font-size: 0.87rem; display: flex; align-items: center; gap: 10px;
  background: rgba(107,191,89,.1); border: 1px solid rgba(107,191,89,.3); color: #A6DC98;
}
.callable.no { background: rgba(211,93,86,.1); border-color: rgba(211,93,86,.3); color: #E7A9A4; }
/* Neither good nor bad. The hand is on the viewer's own clock. */
.callable.self { background: var(--panel-2); border-color: var(--stroke); color: var(--muted); }
.callable .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- feature rows ---------- */

.row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 72px); align-items: center;
  padding: clamp(40px, 5.5vw, 70px) 0;
}
.row + .row { border-top: 1px solid var(--stroke); }
.row.flip .row-art { order: -1; }
@media (max-width: 880px) {
  .row, .row.flip { grid-template-columns: 1fr; gap: 30px; }
  .row .row-art, .row.flip .row-art { order: -1; }
}

.row > * { min-width: 0; }
.row-copy p { color: var(--muted); }
.row h3 { margin-bottom: 12px; }

.ticks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; }
.ticks li {
  display: grid; grid-template-columns: 20px 1fr; gap: 11px;
  font-size: 0.93rem; color: var(--cream); align-items: start;
}
.ticks li::before {
  content: ""; width: 16px; height: 16px; margin-top: 5px; border-radius: 50%;
  background: rgba(212,179,106,.14);
  border: 1px solid rgba(212,179,106,.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23D4B36A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 13px; background-repeat: no-repeat; background-position: center;
}

/* ---------- phone mock ---------- */

.phone {
  width: min(100%, 306px); margin: 0 auto;
  border-radius: 42px; padding: 9px;
  background: linear-gradient(150deg, #3a4150 0%, #171b23 42%, #333a47 100%);
  box-shadow: 0 34px 60px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.phone-screen {
  border-radius: 34px; background: var(--bg); overflow: hidden;
  border: 1px solid #000; padding: 15px 13px 17px;
}
.phone-notch {
  width: 78px; height: 5px; border-radius: 99px; background: #000;
  margin: 0 auto 13px; opacity: .85;
}

.ui-title { font-size: 1.02rem; font-weight: 600; margin-bottom: 12px; }
.ui-eyebrow {
  font-size: 0.575rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.ui-card {
  background: var(--panel); border: 1px solid var(--stroke);
  border-radius: 13px; padding: 11px 12px; margin-bottom: 9px;
}

.overlap-bar {
  height: 30px; border-radius: 7px; overflow: hidden; display: flex;
  background: #0a0d13; border: 1px solid var(--stroke);
}
.overlap-bar span { display: block; height: 100%; }
.overlap-scale {
  display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: 0.55rem; color: var(--dim); margin-top: 5px;
}

.person { display: flex; align-items: center; gap: 10px; }
.person + .person { margin-top: 11px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--panel-2); color: var(--gold);
  font-size: 0.7rem; font-weight: 600;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring, var(--good));
}
.person-name { font-size: 0.8rem; font-weight: 500; line-height: 1.3; }
.person-sub { font-size: 0.64rem; color: var(--dim); }
.person-time { margin-left: auto; text-align: right; }
.person-time b { font-family: var(--mono); font-size: 0.88rem; font-weight: 600; display: block; }
.person-time span { font-size: 0.6rem; color: var(--muted); }

/* ---------- widget mock ---------- */

.widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 15px;
  width: 100%; max-width: 380px; margin: 0 auto; }
.widget {
  background: var(--panel); border: 1px solid var(--stroke);
  border-radius: 20px; padding: 14px; aspect-ratio: 1;
  display: flex; flex-direction: column;
  box-shadow: 0 18px 34px -18px rgba(0,0,0,.8);
}
.widget-label { font-size: 0.56rem; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); }
.widget-time { font-family: var(--mono); font-size: 1.32rem; font-weight: 600; margin-top: 1px; }
.widget-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: auto; }
.widget-mini { display: flex; align-items: center; gap: 6px; }
.widget-mini .avatar { width: 21px; height: 21px; font-size: 0.5rem; box-shadow: 0 0 0 1.5px var(--panel), 0 0 0 3px var(--ring, var(--good)); }
.widget-mini b { font-family: var(--mono); font-size: 0.66rem; font-weight: 600; }
.widget-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.6rem; color: var(--good); }

/* Below ~400px two square widget tiles cannot hold their own contents side
   by side, so they stack instead of pushing the page wider. */
@media (max-width: 400px) {
  .widgets { grid-template-columns: 1fr; max-width: 250px; }
}
.widget { min-width: 0; }
.widget-mini { min-width: 0; }
.widget-mini b { min-width: 0; }

/* ---------- faces gallery ---------- */

.faces {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
}
@media (max-width: 820px) { .faces { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .faces { grid-template-columns: repeat(2, 1fr); } }
.face { text-align: center; }
.face-art {
  position: relative; border-radius: 50%;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.6));
}
.face:hover .face-art { transform: translateY(-6px) scale(1.03); }
.face-name { margin-top: 13px; font-size: 0.87rem; font-weight: 600; }
.face-cat { font-size: 0.68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); margin-top: 2px; }

.faces-more {
  margin-top: 34px; text-align: center; font-size: 0.9rem; color: var(--muted);
}

/* ---------- stats ---------- */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1px; background: var(--stroke);
  border: 1px solid var(--stroke); border-radius: var(--radius); overflow: hidden;
}
.stat { background: var(--panel); padding: 26px 14px; text-align: center; }
.stat b {
  display: block; font-family: var(--mono); font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 600; color: var(--gold); letter-spacing: -.03em;
}
.stat span { font-size: 0.78rem; color: var(--muted); letter-spacing: .06em; }

/* ---------- privacy ---------- */

.privacy-card {
  border: 1px solid rgba(107,191,89,.3); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(107,191,89,.08) 0%, rgba(107,191,89,.02) 100%);
  padding: clamp(28px, 4vw, 46px);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 34px); align-items: start;
}
@media (max-width: 700px) { .privacy-card { grid-template-columns: 1fr; } }
.privacy-shield { width: 54px; height: 54px; color: var(--good); flex: none; }
.privacy-card h2 { margin-bottom: 12px; }
.privacy-card p { color: var(--muted); }
.privacy-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.privacy-list li { font-size: 0.9rem; padding-left: 20px; position: relative; color: var(--cream); }
.privacy-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--good);
}

/* ---------- cta ---------- */

.cta {
  text-align: center; border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background:
    radial-gradient(ellipse 58% 100% at 50% 0%, rgba(18,59,45,.5) 0%, transparent 70%),
    linear-gradient(180deg, var(--panel) 0%, #0c1017 100%);
  padding: clamp(40px, 6vw, 74px) clamp(22px, 4vw, 48px);
}
.cta h2 { margin-bottom: 14px; }
.cta p { color: var(--muted); max-width: 52ch; margin-left: auto; margin-right: auto; }
.cta .hero-cta { justify-content: center; }

/* ---------- steps ---------- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; margin-top: 34px; text-align: left; }
.step { border: 1px solid var(--stroke); border-radius: 14px; padding: 20px; background: rgba(255,255,255,.015); }
.step b { display: block; font-family: var(--mono); font-size: 0.8rem; color: var(--gold); margin-bottom: 8px; letter-spacing: .1em; }
.step p { font-size: 0.88rem; color: var(--muted); margin: 0; }

/* ---------- footer ---------- */

.foot { border-top: 1px solid var(--stroke); padding: 44px 0 54px; font-size: 0.88rem; }
.foot-in { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: flex-start; }
.foot-brand { max-width: 300px; }
.foot-brand p { color: var(--dim); font-size: 0.82rem; margin-top: 12px; }
.foot-links { display: flex; gap: 40px; margin-left: auto; flex-wrap: wrap; }
.foot-col { display: grid; gap: 9px; align-content: start; }
.foot-col .foot-h { font-size: 0.68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0; line-height: 1.4; }
.foot-col a { color: var(--dim); font-size: 0.88rem; }
.foot-col a:hover { color: var(--cream); }
.foot-legal { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--stroke); color: var(--dim); font-size: 0.78rem; }

/* ---------- article pages (privacy / support) ---------- */

.doc { padding: clamp(44px, 6vw, 80px) 0 clamp(56px, 8vw, 90px); max-width: 760px; }
.doc h1 { font-size: clamp(2rem, 4.6vw, 2.85rem); margin-bottom: 14px; }
.doc .updated { color: var(--dim); font-size: 0.85rem; margin-bottom: 40px; font-family: var(--mono); }
.doc h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin: 42px 0 14px; }
.doc h3 { font-size: 1.02rem; margin: 26px 0 10px; color: var(--gold); }
.doc p, .doc li { color: var(--muted); }
.doc strong { color: var(--cream); font-weight: 600; }
.doc ul { padding-left: 20px; display: grid; gap: 9px; margin: 0 0 1.1em; }
.doc li::marker { color: var(--gold); }
.doc .callout {
  border: 1px solid var(--stroke); border-left: 3px solid var(--gold);
  border-radius: 10px; padding: 18px 22px; background: var(--panel); margin: 26px 0;
}
.doc .callout p { color: var(--cream); }
.doc .table-wrap { overflow-x: auto; margin: 22px 0; }
.doc table { width: 100%; min-width: 460px; border-collapse: collapse; margin: 22px 0; font-size: 0.9rem; }
.doc th, .doc td { text-align: left; padding: 11px 13px; border: 1px solid var(--stroke); }
.doc th { background: var(--panel); color: var(--cream); font-weight: 600; font-size: 0.78rem; letter-spacing: .05em; text-transform: uppercase; }
.doc td { color: var(--muted); }

/* ---------- reveal ---------- */

/* Progressive enhancement: without JS (or if it throws) everything is
   simply visible. `js-anim` is set by the script only once it is safe. */
.js-anim .rise { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js-anim .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-anim .rise { opacity: 1; transform: none; } }

/* ---------- a11y utilities ---------- */

.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--gold); color: #221A08; font-weight: 600;
  padding: 11px 18px; border-radius: 0 0 10px 10px;
  transition: top .18s ease;
}
.skip:focus { top: 0; color: #221A08; }

/* In-text links need more than colour to be distinguishable. */
.doc p a, .row-copy p a, .privacy-card a { text-decoration: underline; text-underline-offset: 3px; }

/* Forced-colours: the gradient-clipped headline would vanish. */
@media (forced-colors: active) {
  .hero h1 .gild { -webkit-text-fill-color: currentColor; color: CanvasText; }
  .btn { border: 1px solid currentColor; }
}