/* ── North Client — public site ────────────────────────────────────────────
   Identity copied from the dashboard itself, not invented for this site:
     ground          #031b0d      (public/new-ui.html)
     accent gradient #b8ff63 -> #65f342
     ink on accent   #0a2408
     text            #e9fff0
     muted           rgba(235,255,240,.62)
     warn            #f4b740
     typeface        Inter, with a mono for labels and figures
   Discord blue is a separate brand token and never doubles as the accent, so a
   blue control always means the same thing.

   The dashboard is dark-first, so this is too: bare :root is the dark set and
   the light theme is the override. Both resolve for the system default and for
   an explicit toggle. */
:root{
  --ground:#031b0d; --ground-2:#04240f;
  --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.075);
  --ink:#e9fff0; --ink-soft:#d8ffb9; --muted:rgba(235,255,240,.62);
  --rule:rgba(184,255,99,.14); --rule-strong:rgba(184,255,99,.26);
  --accent:#b8ff63; --accent-2:#65f342; --accent-ink:#0a2408;
  --accent-grad:linear-gradient(135deg,#b8ff63,#65f342);
  --accent-wash:rgba(184,255,99,.10);
  --discord:#5865F2; --discord-ink:#ffffff; --discord-hover:#4752C4;
  --good:#65f342; --warn:#f4b740;
  --radius:14px;
  /* The panel's own overlay over the wallpaper (public/new-ui.html). */
  --wash-a:rgba(0,16,7,.26); --wash-b:rgba(0,13,5,.36);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --ground:#f4fff6; --ground-2:#eaffee;
    --surface:rgba(3,27,13,.035); --surface-2:rgba(3,27,13,.065);
    --ink:#0a2408; --ink-soft:#1d4a17; --muted:rgba(10,36,8,.62);
    --rule:rgba(10,36,8,.13); --rule-strong:rgba(10,36,8,.24);
    --accent:#3f8f2a; --accent-2:#2f7a1f; --accent-ink:#ffffff;
    --accent-grad:linear-gradient(135deg,#4fa832,#2f7a1f);
    --accent-wash:rgba(101,243,66,.14);
    --discord:#5865F2; --discord-ink:#ffffff; --discord-hover:#4752C4;
    --good:#2f8a57; --warn:#b4741a;
    /* Light theme lifts the same wallpaper instead of darkening it. */
    --wash-a:rgba(255,255,255,.74); --wash-b:rgba(244,255,246,.84);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --ground:#f4fff6; --ground-2:#eaffee;
  --surface:rgba(3,27,13,.035); --surface-2:rgba(3,27,13,.065);
  --ink:#0a2408; --ink-soft:#1d4a17; --muted:rgba(10,36,8,.62);
  --rule:rgba(10,36,8,.13); --rule-strong:rgba(10,36,8,.24);
  --accent:#3f8f2a; --accent-2:#2f7a1f; --accent-ink:#ffffff;
  --accent-grad:linear-gradient(135deg,#4fa832,#2f7a1f);
  --accent-wash:rgba(101,243,66,.14);
  --good:#2f8a57; --warn:#b4741a;
  /* Light theme lifts the same wallpaper instead of darkening it. */
    --wash-a:rgba(255,255,255,.74); --wash-b:rgba(244,255,246,.84);
  color-scheme:light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* THE GROUND IS THE DASHBOARD'S OWN WALLPAPER, NOT AN APPROXIMATION OF IT.
   The bright green the panel shows is a photographic backdrop layered over
   #031b0d with a darkening gradient on top — none of it is expressible as a
   colour token, which is why a token-only copy came out near-black. bg.jpg is
   that exact image, lifted from public/new-ui.html, and the overlay below is the
   same one the panel uses, so the two grounds match rather than merely rhyme.
   The colour underneath still shows while the image loads and if it ever fails. */
body{
  margin:0;
  background-color:var(--ground);
  background-image:
    linear-gradient(180deg, var(--wash-a), var(--wash-b)),
    url("bg.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 26px;}
h1,h2,h3,.display{
  font-family:inherit; font-weight:800; text-wrap:balance;
  letter-spacing:-.025em; line-height:1.1; margin:0;
}
.mono,.eyebrow,.fig,.tag,.step-n{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
}
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);}
a{color:inherit;}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

/* ── Masthead ─────────────────────────────────────────────────────────── */
.mast{
  border-bottom:1px solid var(--rule);
  background:color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:20;
}
.mast-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:14px 0;}
.wordmark{font-size:18px;letter-spacing:-.03em;text-decoration:none;font-weight:800;}
.wordmark .n{
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;align-items:center;}
.nav a{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  padding:7px 11px;border-radius:9px;border:1px solid transparent;
  transition:color .15s ease,background .15s ease,border-color .15s ease;
}
.nav a:hover{color:var(--ink);background:var(--surface);}
.nav a[aria-current="page"]{color:var(--accent);background:var(--accent-wash);border-color:var(--rule-strong);}

/* Theme toggle — the dashboard has one, so this does too. */
.theme-btn{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  color:var(--muted);background:var(--surface);border:1px solid var(--rule);
  padding:7px 11px;border-radius:9px;cursor:pointer;line-height:1;
  transition:color .15s ease,border-color .15s ease;
}
.theme-btn:hover{color:var(--ink);border-color:var(--rule-strong);}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.cta{
  font-family:inherit;font-weight:700;font-size:14.5px;letter-spacing:-.01em;
  background:var(--accent-grad);color:var(--accent-ink);text-decoration:none;
  padding:12px 20px;border-radius:11px;border:1px solid transparent;display:inline-block;
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;
}
.cta:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 8px 22px rgba(101,243,66,.18);}
.cta.ghost{background:none;color:var(--ink);border-color:var(--rule-strong);box-shadow:none;}
.cta.ghost:hover{border-color:var(--accent);background:var(--surface);box-shadow:none;}
.cta.discord{background:var(--discord);color:var(--discord-ink);display:inline-flex;align-items:center;gap:9px;}
.cta.discord:hover{background:var(--discord-hover);filter:none;box-shadow:0 8px 22px rgba(88,101,242,.28);}
.cta.discord svg{width:19px;height:19px;fill:currentColor;flex:none;}

.discord-float{
  position:fixed;right:20px;bottom:20px;z-index:50;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--discord);color:var(--discord-ink);
  font-family:inherit;font-weight:700;font-size:14px;
  text-decoration:none;padding:13px 18px;border-radius:999px;
  box-shadow:0 8px 26px rgba(0,0,0,.34);
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.discord-float:hover{background:var(--discord-hover);transform:translateY(-2px);box-shadow:0 12px 30px rgba(88,101,242,.34);}
.discord-float svg{width:20px;height:20px;fill:currentColor;flex:none;}
@media (max-width:560px){
  .discord-float{right:13px;bottom:13px;padding:13px;border-radius:50%;}
  .discord-float .lbl{display:none;}
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{padding:76px 0 56px;border-bottom:1px solid var(--rule);}
.hero h1{font-size:clamp(34px,6vw,62px);max-width:16ch;}
.hero .lede{font-size:clamp(17px,2vw,20px);color:var(--ink-soft);max-width:62ch;margin:22px 0 0;font-weight:400;}
.hero .lede em{font-style:normal;color:var(--accent);font-weight:600;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center;}

/* Cards — the dashboard's glass panels. */
.panel{
  margin-top:44px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface);overflow:hidden;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--rule);background:var(--surface-2);}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none;box-shadow:0 0 10px var(--good);}
.panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.cell{padding:20px 18px;border-right:1px solid var(--rule);}
.cell:last-child{border-right:0;}
.cell .eyebrow{display:block;margin-bottom:9px;}
.fig{font-size:clamp(18px,2.3vw,23px);font-weight:700;letter-spacing:-.02em;display:block;line-height:1.2;color:var(--ink);}
.cell small{display:block;margin-top:8px;color:var(--muted);font-size:13.5px;}

/* ── Sections ─────────────────────────────────────────────────────────── */
section{padding:60px 0;border-bottom:1px solid var(--rule);scroll-margin-top:74px;}
.sec-head{margin-bottom:30px;max-width:64ch;}
.sec-head h2{font-size:clamp(24px,3.2vw,34px);margin-bottom:11px;}
.sec-head p{margin:0;color:var(--muted);}

.ledger{display:flex;flex-direction:column;gap:9px;}
.row{
  display:grid;grid-template-columns:minmax(180px,235px) 1fr;gap:8px 32px;
  padding:17px 18px;align-items:start;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .15s ease,background .15s ease;
}
.row:hover{border-color:var(--rule-strong);background:var(--surface-2);}
.row h3{font-size:16px;font-weight:700;letter-spacing:-.012em;}
.row .tag{display:block;margin-top:6px;font-size:10.5px;color:var(--accent);letter-spacing:.07em;text-transform:uppercase;font-weight:600;}
.row p{margin:0;color:var(--muted);font-size:15.5px;max-width:68ch;}

.cycle{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:9px;}
.step{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:20px 18px;}
.step-n{
  font-size:11.5px;font-weight:700;color:var(--accent-ink);background:var(--accent-grad);
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:8px;margin-bottom:12px;
}
.step h3{font-size:15.5px;margin-bottom:7px;}
.step p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55;}

.note{
  border:1px solid var(--rule-strong);border-radius:var(--radius);
  background:var(--accent-wash);padding:22px 24px;max-width:72ch;
}
.note h3{font-size:17px;margin-bottom:9px;}
.note p{margin:0;color:var(--ink-soft);font-size:15.5px;}
.note p + p{margin-top:11px;}

footer{padding:48px 0 96px;}
.foot-in{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;}
.foot-note{color:var(--muted);font-size:14px;margin:0;}

@media (max-width:720px){
  body{font-size:16px;}
  .row{grid-template-columns:1fr;gap:5px;}
  .cell{border-right:0;border-bottom:1px solid var(--rule);}
  .panel-grid .cell:last-child{border-bottom:0;}
  .hero{padding:48px 0 36px;}
  section{padding:44px 0;}
  .mast{position:static;}
  .nav{margin-left:0;gap:5px;}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}

/* ── Hero introduction ─────────────────────────────────────────────────────
   Replaces the stat panel that used to sit here. This is the first thing a
   visitor reads, so it is prose at a comfortable measure rather than a grid of
   labels — it has to explain what the thing IS before any feature list can mean
   anything. The lead sentence is set larger to carry the opening. */
.intro{
  margin-top:40px;
  max-width:68ch;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.intro p{
  margin:0;
  color:var(--ink-soft);
  font-size:17.5px;
  line-height:1.68;
}
.intro .intro-lead{
  font-size:clamp(19px,2.1vw,22px);
  line-height:1.5;
  color:var(--ink);
  font-weight:500;
  letter-spacing:-.01em;
}
.intro strong{
  color:var(--ink);
  font-weight:600;
}
@media (max-width:720px){
  .intro{margin-top:30px;gap:15px;}
  .intro p{font-size:16.5px;}
}

/* "View the UI" — a destination, not a section jump, so it reads as an action
   rather than another anchor in the list. */
.nav a.nav-demo{
  color:var(--accent);
  border-color:var(--rule-strong);
  background:var(--accent-wash);
}
.nav a.nav-demo:hover{
  color:var(--accent-ink);
  background:var(--accent-grad);
  border-color:transparent;
}

/* ── Floating actions ──────────────────────────────────────────────────────
   Two floating buttons now, so they stack rather than fight for the corner.
   The wrapper owns the position; the buttons only describe themselves. The
   demo button is the green accent and Discord stays blue, so the two never
   read as the same kind of action. */
.float-stack{
  position:fixed; right:20px; bottom:20px; z-index:50;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.float-stack .discord-float{ position:static; right:auto; bottom:auto; }
.demo-float{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--accent-grad); color:var(--accent-ink);
  font-family:inherit; font-weight:700; font-size:14px;
  text-decoration:none; padding:13px 18px; border-radius:999px;
  box-shadow:0 8px 26px rgba(0,0,0,.34);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.demo-float:hover{ filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 12px 30px rgba(101,243,66,.34); }
.demo-float svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2;
                 stroke-linecap:round; stroke-linejoin:round; flex:none; }
@media (max-width:560px){
  .float-stack{ right:13px; bottom:13px; gap:9px; }
  .demo-float{ padding:13px; border-radius:50%; }
  .demo-float .lbl{ display:none; }
}