/* ── speedvideodating.com ──────────────────────────────────────────────────
   The blue is #187EDA, sampled from the bottom band of the Fifty Signals
   cover, and the gold is a real gradient rather than a flat yellow — a shiny
   metal reads as gold, a flat #FFD700 reads as a highlighter.

   The header keeps the deep cover blue; everything below it is light. Two
   grounds means two sets of text colours, so the header has its own and never
   borrows the page's.

   ⚠ On a light ground, muted text must be a real HEX with contrast, never a
   translucent white — a var() fallback does not save you, it just renders 70%
   white on white and the text vanishes. That exact bug cost Frican a page.

   NAETH sits on top of this: `data-nt` swaps the palette, `data-fui="curve"`
   does the corner language. Everything is expressed in custom properties so a
   NAETH palette can override it without touching a rule. */

:root{
  --blue:#187EDA;          /* the cover band */
  --blue-lo:#0B4F8F;
  --blue-hi:#4FA3F0;

  /* the dark header ground */
  --hdr:#061426;
  --hdr-2:#0B2038;
  --hdr-text:#FFFFFF;
  --hdr-muted:#A9C2DA;
  --hdr-line:rgba(255,255,255,.14);

  /* the light page ground */
  --bg:#F2F6FB;
  --bg-2:#E7EEF7;
  --card:#FFFFFF;
  --line:#DCE5EF;
  --line-2:#C4D2E2;

  --text:#0C2136;
  --muted:#4A6076;
  --dim:#6B8199;

  /* gold — unchanged */
  --gold:#E9C558;
  --gold-lo:#A87F1E;
  --gold-hi:#FFF0B8;
  --gold-sheen:linear-gradient(135deg,#A87F1E 0%,#E9C558 26%,#FFF0B8 46%,
                               #E9C558 62%,#A87F1E 100%);
  --gold-ink:#2B2409;      /* readable text ON gold */

  --good:#1E8E5A;
  --warn:#A9741B;
  --bad:#C0392B;

  --r:14px;
  --shadow:0 6px 20px rgba(12,33,54,.08);
  --shadow-lg:0 14px 40px rgba(12,33,54,.12);
  --wrap:1120px;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:#1268BC;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ── gold, used sparingly: it means "this is the thing" ── */
/* Gold TEXT on the light ground needs darker stops or it is unreadable; the
   bright sheen is kept for bars, buttons and anything on the dark header.
   The readable version is the DEFAULT so a new gold heading anywhere on the
   page is legible without anyone remembering to opt in. */
.gold{
  background:linear-gradient(135deg,#8A6614 0%,#C9A227 40%,#A87F1E 75%,#8A6614 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
header .gold{
  background:var(--gold-sheen);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rule-gold{height:2px;border:0;background:var(--gold-sheen);opacity:.9;margin:0}

/* ── header: keeps the deep cover blue ── */
header.top{
  position:sticky;top:0;z-index:50;
  background:
    radial-gradient(900px 300px at 10% -60%, rgba(24,126,218,.45), transparent 65%),
    var(--hdr);
  border-bottom:1px solid var(--hdr-line);
  color:var(--hdr-text);
}
.topbar{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand svg{display:block}
.brand b{
  color:#FFFFFF;               /* the name is white, full stop */
  font-weight:800;letter-spacing:-.01em;font-size:1.12rem;
}
.brand:hover{text-decoration:none}
nav.main{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
nav.main a{
  color:var(--hdr-muted);font-size:.82rem;font-weight:600;
  padding:9px 12px;border-radius:9px;
}
nav.main a:hover{color:#fff;background:rgba(255,255,255,.10);text-decoration:none}
nav.main a.on{color:var(--gold-ink);background:var(--gold-sheen);font-weight:700}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:11px;border:1px solid var(--line-2);
  background:var(--card);color:var(--text);
  font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;
  transition:transform .12s ease,box-shadow .15s ease,background .15s ease;
}
.btn:hover{background:var(--bg-2);text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn-gold{
  background:var(--gold-sheen);color:var(--gold-ink);border:0;
  box-shadow:0 6px 18px rgba(168,127,30,.28),inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-gold:hover{background:var(--gold-sheen);filter:brightness(1.06)}
.btn-blue{background:linear-gradient(135deg,var(--blue-lo),var(--blue));border:0;color:#fff}
.btn-blue:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;border-color:var(--line-2)}
.btn-danger{border-color:#E3B4AE;color:#9E2E20;background:#FDF3F2}
.btn-danger:hover{background:#FAE4E1}
.btn-lg{padding:15px 30px;font-size:.96rem}
.btn-sm{padding:7px 13px;font-size:.78rem;border-radius:8px}
.btn-block{width:100%}

/* ── cards ── */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px;
  box-shadow:var(--shadow);
}
.card+.card{margin-top:16px}
.card h2,.card h3{margin:0 0 12px}
.card-gold{border-color:#E6CE8E;background:linear-gradient(180deg,#FFFDF6,#FFFFFF)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

h1{font-size:2.1rem;line-height:1.15;letter-spacing:-.025em;margin:0 0 14px;font-weight:800}
h2{font-size:1.3rem;letter-spacing:-.015em;font-weight:750}
h3{font-size:1.02rem;font-weight:700}
.lede{font-size:1.08rem;color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}
.dim{color:var(--dim);font-size:.86rem}
.tiny{font-size:.76rem;color:var(--dim)}
section{padding:34px 0}

/* ── stat tiles ── */
.stat{background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:15px 17px}
.stat b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.02em;
  line-height:1.1;color:var(--text)}
.stat span{display:block;color:var(--dim);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;margin-top:5px}

/* ── pills / chips ── */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  border-radius:999px;font-size:.76rem;font-weight:700;
  background:var(--bg-2);border:1px solid var(--line);color:var(--muted)}
.pill-gold{background:var(--gold-sheen);color:var(--gold-ink);border:0}
.pill-live{background:#E4F6ED;border-color:#A9DCC3;color:#146E45}
.pill-live::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--good);box-shadow:0 0 0 0 rgba(30,142,90,.6);
  animation:pulse 1.9s infinite}
@keyframes pulse{
  70%{box-shadow:0 0 0 9px rgba(30,142,90,0)}
  100%{box-shadow:0 0 0 0 rgba(30,142,90,0)}
}
/* pills sitting on the dark header need the header's palette */
header .pill{background:rgba(255,255,255,.14);border-color:var(--hdr-line);color:#fff}
header .pill-gold{background:var(--gold-sheen);color:var(--gold-ink)}

/* choice chips (intents, genders) */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative;cursor:pointer;user-select:none}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-flex;flex-direction:column;gap:1px;
  padding:9px 15px;border-radius:11px;font-size:.84rem;font-weight:650;
  background:var(--card);border:1px solid var(--line-2);color:var(--text);
  transition:all .14s ease}
.chip small{color:var(--dim);font-size:.7rem;font-weight:500}
.chip input:checked+span{
  background:var(--gold-sheen);color:var(--gold-ink);border-color:transparent;
  box-shadow:0 4px 14px rgba(168,127,30,.28)}
.chip input:checked+span small{color:#5A4A12}
.chip input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}

/* ── forms ── */
label.f{display:block;font-size:.76rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin:0 0 7px}
input[type=text],input[type=number],input[type=date],input[type=time],
input[type=password],select,textarea{
  width:100%;box-sizing:border-box;                    /* never rely on inherit */
  padding:12px 14px;border-radius:10px;
  background:#fff;border:1px solid var(--line-2);
  color:var(--text);font:inherit;font-size:.92rem;outline:none;
}
input::placeholder,textarea::placeholder{color:#95A8BC}
input:focus,select:focus,textarea:focus{border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(24,126,218,.18)}
textarea{resize:vertical;min-height:88px}
.field{margin-bottom:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ── notes ── */
.note{padding:13px 16px;border-radius:11px;font-size:.88rem;
  border:1px solid var(--line);background:var(--card);margin:0 0 16px}
.note-good{border-color:#A9DCC3;background:#EDF9F3;color:#14603F}
.note-warn{border-color:#EBD59A;background:#FDF7E6;color:#7A5510}
.note-bad{border-color:#EFC2BB;background:#FDF1EF;color:#8E2A1D}
.note-gold{border-color:#E6CE8E;background:#FFFAEC;color:#6B520F}

/* ── the countdown ── */
.clock{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.02em}
.clock-xl{font-size:3.4rem;line-height:1}
.clock-lg{font-size:2rem}
.bar{height:6px;border-radius:999px;background:var(--bg-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold-sheen);
  transition:width 1s linear;border-radius:999px}
.bar.warn i{background:linear-gradient(90deg,#E0A21B,#C0392B)}

/* ── tables ── */
table{width:100%;border-collapse:collapse;font-size:.86rem}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line)}
th{color:var(--dim);font-size:.71rem;text-transform:uppercase;letter-spacing:.09em;
  font-weight:700}
tbody tr:hover{background:var(--bg-2)}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
code{background:var(--bg-2);padding:1px 6px;border-radius:5px;font-size:.86em}

/* ── footer ── */
footer.site{border-top:1px solid var(--line);margin-top:56px;background:var(--bg-2);
  padding:30px 0 44px;color:var(--muted);font-size:.83rem}
footer.site nav{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:14px}
footer.site a{color:var(--text)}

/* ── install prompt ── */
#installBar{
  background:var(--hdr);
  border-top:2px solid transparent;
  border-image:var(--gold-sheen) 1;
  color:#fff;
  padding:14px 0;
}
.install-inner{display:flex;align-items:center;gap:16px;justify-content:space-between;
  flex-wrap:wrap}
.install-text{display:flex;flex-direction:column;gap:2px;min-width:min(100%,240px)}
.install-text strong{font-size:.95rem}
.install-text span{font-size:.8rem;color:var(--hdr-muted)}
#installBar .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3);background:transparent}
#installBar .btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ── skip link, for keyboard users ── */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--gold);color:var(--gold-ink);
  padding:10px 16px;border-radius:8px}

@media (max-width:720px){
  h1{font-size:1.6rem}
  .clock-xl{font-size:2.5rem}
  .topbar{min-height:auto;padding:10px 0;flex-wrap:wrap}
  nav.main{width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap}
  section{padding:24px 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}