/* ══════════════════════════════════════════════════════════════════════════════════════════════
   SCAIL BRAND SHEET — the one stylesheet every page outside public/scail.html loads.
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Sean, 2026-10-01: "Anything we build should always have that same style sheet, same font, same
   typography, same font sizes ... Our brand has to be consistent."

   The Founders 100 page and both training pages were each written with their own copy of the
   tokens and their own type: Urbanist only, headings at weight 600, a conic dot standing in for
   the mark. None of them loaded Lufga. They looked like a different company from scailapp.com.

   Every value below is lifted from public/scail.html (which IS scailapp.com) — tokens from :root,
   type from the h1-h4 / .kick / .lede / .btn rules, and the Lufga division from the block that
   defines --font-display. If scail.html changes a value, change it here in the same commit.

   THE DIVISION: Lufga is the voice — headings and big figures, weight 200, tight tracking.
   Urbanist is everything a person reads — body 17px/300, labels, controls, tables.

   HOW TO USE on any standalone page, in this order, LAST in <head> so it wins ties:
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Urbanist:wght@100;200;300;400;500;600;700&display=swap">
     <link rel="stylesheet" href="/brand/lufga.css">
     <link rel="stylesheet" href="/brand/scail-brand.css">
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme: light;
  --ground:#F5F5F7; --paper:#FFFFFF; --ink:#0E0E10; --ink-2:#55555E; --ink-3:#8A8A94;
  --c1:#FF3D9A; --c2:#F5202C; --c3:#FF7A00; --c4:#FFC81F; --c5:#2FBFA5; --c6:#2E9BE0;
  --rp1:#D6006E; --rp2:#C8102E; --rp3:#B04C00; --rp4:#8C6A08; --rp5:#0C7D6C; --rp6:#1A6FB5;
  --ok:#D6006E; --warn:#6B6B6B;
  --sf-card:rgba(255,255,255,.74); --sf-pane:rgba(255,255,255,.92);
  --sf-edge:rgba(14,14,16,.09); --sf-edge-2:rgba(14,14,16,.17); --sf-tile:rgba(255,255,255,.66);
  --line:var(--sf-edge);
  --r-xl:30px; --r-lg:22px; --r-md:15px; --r-sm:11px;
  --font:'Urbanist','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-display:'Lufga','Urbanist','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ramp:linear-gradient(100deg,var(--rp1),var(--rp2) 26%,var(--rp3) 48%,var(--rp5) 74%,var(--rp6));
}

/* ── Ground: the site's mesh, without extra markup ─────────────────────────────────────────── */
html{background:var(--ground)}
body{
  font-family:var(--font); font-weight:300; font-size:17px; line-height:1.6; color:var(--ink);
  -webkit-font-smoothing:antialiased;
  background:
    linear-gradient(color-mix(in srgb,var(--ground) 60%,transparent),color-mix(in srgb,var(--ground) 60%,transparent)),
    radial-gradient(52% 46% at 10% 14%, color-mix(in srgb,var(--c1) 22%,transparent), transparent 72%),
    radial-gradient(48% 42% at 90% 8%,  color-mix(in srgb,var(--c6) 20%,transparent), transparent 72%),
    radial-gradient(46% 44% at 88% 74%, color-mix(in srgb,var(--c5) 20%,transparent), transparent 72%),
    radial-gradient(52% 46% at 10% 84%, color-mix(in srgb,var(--c4) 22%,transparent), transparent 72%),
    var(--ground);
  background-attachment:fixed;
}
::selection{background:var(--c1); color:#fff}

/* ── Type: Lufga is the voice ──────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--font-display); font-weight:200; letter-spacing:-.032em; line-height:1.04; text-wrap:balance}
h1{letter-spacing:-.045em}
h1 em,h2 em,.gr-text{font-style:normal; background:var(--ramp); -webkit-background-clip:text; background-clip:text;
  color:var(--rp1); -webkit-text-fill-color:transparent}
.display,.figure,.num,.amt,.price{font-family:var(--font-display); font-weight:200; letter-spacing:-.05em; font-variant-numeric:tabular-nums}
b,strong{font-weight:500}

.kick,.eyebrow-text{display:inline-flex; align-items:center; gap:9px; font-family:var(--font); font-size:11px; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--ink-3)}
.lede,.sub{font-size:clamp(16.5px,1.5vw,19.5px); color:var(--ink-2); font-weight:300}
.fine{font-size:12.5px; color:var(--ink-3); line-height:1.65}

/* ── Wordmark + mark: the header's halomark, never a stand-in ──────────────────────────────── */
.brand b{font-family:var(--font); font-weight:300; font-size:20px; letter-spacing:.14em;
  background:var(--ramp); -webkit-background-clip:text; background-clip:text; color:var(--ink); -webkit-text-fill-color:transparent}
.brand .dot,.brand .mark{width:30px; height:30px; border-radius:0; background:url('/brand/site/halomark.svg') center/contain no-repeat}

/* ── Controls ──────────────────────────────────────────────────────────────────────────────── */
.btn{font-family:var(--font); font-size:15px; font-weight:400; min-height:48px; border-radius:999px;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .2s, border-color .2s}
.btn.pri,.btn.dark{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:500; box-shadow:0 12px 30px -16px rgba(14,14,16,.9)}
.btn.pri:hover,.btn.dark:hover{transform:translateY(-2px); box-shadow:0 22px 46px -18px rgba(14,14,16,.85)}
.btn.sec,.btn.pale{background:var(--sf-pane); color:var(--ink); border-color:var(--sf-edge-2)}
.btn.sec:hover,.btn.pale:hover{transform:translateY(-2px); border-color:var(--ink); background:var(--paper)}
summary{font-weight:500}
th{font-weight:500; letter-spacing:.17em; font-size:11px; text-transform:uppercase; color:var(--ink-3)}

/* ── Surfaces: frosted cards and tiles, as on the site ─────────────────────────────────────── */
.card,.tile,details{background:var(--sf-card); border-color:var(--sf-edge); backdrop-filter:blur(16px) saturate(1.2)}
:focus-visible{outline:2px solid var(--rp6); outline-offset:3px; border-radius:8px}