/* Guise: shared tokens and parts for the homepage and the member area. One button pair, one card style, one radius scale. */
@font-face { font-family:"IBM Plex Sans"; font-weight:400; font-display:swap; src:url(/fonts/ibm-plex-sans-400.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-weight:500; font-display:swap; src:url(/fonts/ibm-plex-sans-500.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-weight:600; font-display:swap; src:url(/fonts/ibm-plex-sans-600.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:400; font-display:swap; src:url(/fonts/ibm-plex-mono-400.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:500; font-display:swap; src:url(/fonts/ibm-plex-mono-500.woff2) format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-weight:200 900; font-display:swap; src:url(/fonts/source-serif-4-var.woff2) format("woff2"); }

:root {
  --void:#06080B; --ink:#0B0F14; --panel:#10151C; --text:#EEEAE2; --dim:#A3ABB4; --faint:#7A838E; --line:rgba(238,234,226,.12);
  --signal:#FFB43A; --on-signal:#1A1100; --ok:#8FD0B8; --bad:#F08A7E;
  --serif:"Source Serif 4",Georgia,serif; --sans:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r1:10px; --r2:22px; --r3:46px;
  --ease:cubic-bezier(.22,.61,.36,1); --gutter:clamp(18px,4.5vw,56px); --max:1240px;
  color-scheme:dark;
}
*,*::before,*::after { box-sizing:border-box; }
html { background:var(--void); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; min-height:100dvh; background:var(--void); color:var(--text); font:400 17px/1.6 var(--sans); overflow-x:hidden; }
::selection { background:var(--signal); color:var(--on-signal); }
:focus-visible { outline:2px solid var(--signal); outline-offset:3px; border-radius:6px; }
a { color:inherit; text-underline-offset:4px; text-decoration-color:rgba(238,234,226,.35); transition:text-decoration-color .2s; }
a:hover { text-decoration-color:var(--text); }
h1,h2,h3 { margin:0; font-weight:400; text-wrap:balance; }
p { margin:0; }
img,video { display:block; max-width:100%; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font:500 12px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.eyebrow::before { content:""; width:22px; height:1px; background:currentColor; }
.wrap { width:min(100% - 2*var(--gutter), var(--max)); margin-inline:auto; }

/* buttons: one pair. primary = the one signal colour, secondary = outline */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--text); font:500 15px/1 var(--sans); letter-spacing:.01em; text-decoration:none; cursor:pointer; transition:transform .18s var(--ease), background .18s, border-color .18s, box-shadow .18s; }
.btn:hover { border-color:var(--text); transform:translateY(-1px); }
.btn:active { transform:translateY(1px); }
.btn.primary { background:var(--signal); color:var(--on-signal); border-color:var(--signal); font-weight:600; box-shadow:0 10px 30px -10px rgba(255,180,58,.55); }
.btn.primary:hover { background:#FFC463; border-color:#FFC463; }
.btn[disabled] { opacity:.5; cursor:default; transform:none; }

/* header */
.top { position:sticky; top:0; z-index:40; background:rgba(6,8,11,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:16px; min-height:64px; }
.brand { display:flex; align-items:baseline; gap:10px; margin-right:auto; text-decoration:none; font:600 15px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
.brand small { font:400 11px/1 var(--mono); letter-spacing:.14em; color:var(--faint); }
.top nav { display:flex; gap:22px; align-items:center; font:500 14px/1 var(--sans); }
.top nav a { text-decoration:none; color:var(--dim); padding:14px 2px; }
.top nav a:hover { color:var(--text); }
.lang { display:flex; gap:2px; font:500 12px/1 var(--mono); letter-spacing:.1em; }
.lang button { background:none; border:0; color:var(--faint); padding:14px 8px; min-width:44px; cursor:pointer; font:inherit; letter-spacing:inherit; }
.lang button[aria-pressed="true"] { color:var(--text); }
.lang button:hover { color:var(--text); }
@media (max-width:760px) { .top nav .hide-s { display:none; } .top nav { gap:6px; } }

footer.foot { border-top:1px solid var(--line); padding:44px 0 56px; color:var(--faint); font-size:14px; }
footer.foot .wrap { display:flex; flex-wrap:wrap; gap:18px 40px; justify-content:space-between; }
footer.foot a { color:var(--dim); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r2); }

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