/* ════════════════════════════════════════════════════════════════════════════
   EDGEwise — the site's one design system (2026-10-15).

   The owner looked at a homepage built in layers since August and called it
   amateur: every section carried its own era's styling, so nothing lined up.
   This file is the cure — ONE grid, ONE type scale, ONE card, ONE button, ONE
   header and ONE footer, shared by every public page. A page opts in to the
   full system with <body class="ew">; the tool pages (the board, The First
   Lot) take only the header and footer, whose classes are all prefixed so they
   cannot collide with the tools' own styles.

   Single theme by choice: EDGEwise is dark everywhere, so every colour is set
   explicitly and the page never borrows a host background.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --bg:#07090f; --surface:#0c1018; --surface-2:#111723; --raise:#161d2b;
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.13);
  --text:#eef2f8; --text-2:#b6bfcd; --muted:#8b94a6; --dim:#687184;
  --gold:#e0b46a; --gold-2:#f2d197; --gold-line:rgba(224,180,106,.34); --gold-wash:rgba(224,180,106,.08);
  --gain:#3fbf8f; --loss:#e0645a; --blue:#4a8fd6;
  --green:var(--gain); --red:var(--loss);   /* the names older drawings ask for */
  --display:"Bricolage Grotesque",Manrope,system-ui,-apple-system,Arial,sans-serif;
  --body:Manrope,'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r-lg:20px; --r:14px; --r-sm:10px;
  --wrap:1200px; --gutter:24px;
  --shadow:0 30px 60px -40px rgba(0,0,0,.9);
}
@media (max-width:640px){ :root { --gutter:16px } }

/* ── base (opt-in) ─────────────────────────────────────────────────────────── */
body.ew { margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:16px; line-height:1.65;
          -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
/* The reset carries ZERO specificity (:where), so any one-class rule on a page
   beats it. Written as .ew p it outranked .rec-note and silently zeroed the
   margins pages set on their own paragraphs. */
:where(.ew) *, :where(.ew) *::before, :where(.ew) *::after { box-sizing:border-box }
:where(.ew) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin:0; padding:0 }
:where(.ew) :where(ul, ol) { list-style:none }
:where(.ew) :where(img, svg) { display:block; max-width:100% }
:where(.ew) :where(a) { color:inherit; text-decoration:none }
:where(.ew) :where(button) { font:inherit; color:inherit }
.ew :focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:6px }
.ew [hidden] { display:none !important }
.ew-glow { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden }
.ew-glow::before, .ew-glow::after { content:""; position:absolute; width:62vmax; height:62vmax; border-radius:50%; filter:blur(130px); opacity:.09 }
.ew-glow::before { background:var(--gold); top:-36vmax; right:-22vmax }
.ew-glow::after { background:#2f6fed; top:40vh; left:-34vmax; opacity:.07 }
.ew main, .ew .site-footer { position:relative; z-index:1 }

.container { width:100%; max-width:calc(var(--wrap) + var(--gutter) * 2); margin:0 auto; padding-inline:var(--gutter) }
.section { padding-block:112px }
.section + .section { border-top:1px solid var(--line) }
@media (max-width:900px){ .section { padding-block:84px } }
@media (max-width:640px){ .section { padding-block:64px } }

/* ── type ──────────────────────────────────────────────────────────────────── */
.eyebrow { display:inline-flex; align-items:center; gap:10px; font:600 12px/1.2 var(--mono); letter-spacing:.16em;
           text-transform:uppercase; color:var(--gold) }
.h1 { font-family:var(--display); font-weight:800; font-size:clamp(42px,5.4vw,74px); line-height:1.02; letter-spacing:-.035em; text-wrap:balance }
.h2 { font-family:var(--display); font-weight:700; font-size:clamp(32px,3.5vw,50px); line-height:1.06; letter-spacing:-.03em; text-wrap:balance }
.h3 { font-family:var(--display); font-weight:700; font-size:22px; line-height:1.25; letter-spacing:-.015em }
.lede { font-size:18px; line-height:1.65; color:var(--text-2); max-width:40em }
.lede b, .body b { color:var(--text); font-weight:700 }
.body { font-size:15.5px; line-height:1.7; color:var(--text-2) }
.small { font-size:13px; line-height:1.6; color:var(--muted) }
.fine { font-size:12.5px; line-height:1.65; color:var(--dim) }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums }
.up { color:var(--gain) } .dn { color:var(--loss) }
@media (max-width:640px){ .lede { font-size:16.5px } }

/* the section head: eyebrow, headline, one line of support — always this shape */
.sh { display:grid; gap:18px; max-width:760px; margin-bottom:56px }
.sh.center { margin-inline:auto; text-align:center; justify-items:center }
.sh .lede { margin-top:2px }
@media (max-width:640px){ .sh { margin-bottom:36px; gap:14px } }

/* ── buttons and links ─────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 24px; border-radius:12px; border:0;
       cursor:pointer; font:800 15.5px/1 var(--body); letter-spacing:-.01em; color:#0b0d13 !important; white-space:nowrap;
       background:linear-gradient(180deg,#f0cb88,var(--gold) 55%,#c9954a);
       box-shadow:0 12px 30px -10px rgba(224,180,106,.5), inset 0 1px 0 rgba(255,255,255,.45); transition:transform .15s, box-shadow .15s }
.btn:hover { transform:translateY(-1px); box-shadow:0 16px 36px -10px rgba(224,180,106,.6), inset 0 1px 0 rgba(255,255,255,.45) }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 22px; border-radius:12px;
             border:1px solid var(--line-2); background:rgba(255,255,255,.03); font:700 15.5px/1 var(--body); color:var(--text);
             white-space:nowrap; cursor:pointer; transition:border-color .15s, background .15s }
.btn-ghost:hover { border-color:var(--gold-line); background:var(--gold-wash) }
.btn-lg { padding:17px 28px; font-size:16.5px; border-radius:13px }
.link { color:var(--gold); font-weight:700 }
.link:hover { text-decoration:underline }
.cta-row { display:flex; flex-wrap:wrap; gap:12px }
@media (prefers-reduced-motion:reduce){ .btn { transition:none } .btn:hover { transform:none } }

/* ── surfaces ──────────────────────────────────────────────────────────────── */
.card { background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--line); border-radius:var(--r-lg);
        box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.04) }
.pad { padding:32px } .pad-sm { padding:22px }
@media (max-width:640px){ .pad { padding:22px } .pad-sm { padding:18px } }
.chip { display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px; border:1px solid var(--line-2);
        font:600 10.5px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); white-space:nowrap }
.chip.on { border-color:rgba(63,191,143,.45); color:var(--gain) }
.chip.soon { border-color:var(--gold-line); color:var(--gold) }
.dot { width:8px; height:8px; border-radius:50%; background:var(--gain); box-shadow:0 0 10px var(--gain); flex:none }
.grid { display:grid; gap:24px }
.grid > * { min-width:0 }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)) }
.g3 { grid-template-columns:repeat(3,minmax(0,1fr)) }
.g4 { grid-template-columns:repeat(4,minmax(0,1fr)) }
@media (max-width:980px){ .g3, .g4 { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){ .g2, .g3, .g4 { grid-template-columns:1fr } }

/* a segmented control: the chosen option gold */
.seg { display:inline-flex; gap:4px; padding:5px; border-radius:14px; background:rgba(255,255,255,.035); border:1px solid var(--line);
       max-width:100%; overflow-x:auto; scrollbar-width:none }
.seg::-webkit-scrollbar { display:none }
.seg button { flex:none; padding:10px 16px; border:0; border-radius:10px; background:none; cursor:pointer; white-space:nowrap;
              font:700 14px/1 var(--body); color:var(--muted); transition:background .15s, color .15s }
.seg button:hover { color:var(--text) }
.seg button[aria-selected="true"], .seg button.on { background:var(--gold); color:#0b0d13 }

/* ── the header (shared; prefixed so a tool page can carry it safely) ──────── */
.site-header { position:sticky; top:0; z-index:50; background:rgba(7,9,15,.78); -webkit-backdrop-filter:saturate(1.4) blur(14px);
               backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line); font-family:var(--body);
               /* a tool page may style every <header> (centred, with margins) — this one is immune */
               margin:0; padding:0; text-align:left; width:auto; max-width:none; display:block; animation:none }
/* and its order is fixed, whatever order a tool page once gave its own strip */
.site-header .sh-brand { order:0 } .site-header .navSet { order:1 } .site-header .navSp { order:2 }
.site-header .signIn { order:3 } .site-header .sh-join { order:4 } .site-header .sh-menu { order:5 }
.site-header .sh-in { display:flex; align-items:center; gap:28px; height:68px; max-width:calc(var(--wrap) + var(--gutter) * 2);
                      margin:0 auto; padding-inline:var(--gutter) }
.site-header .sh-brand { display:inline-flex; align-items:center; gap:10px; flex:none; color:var(--text); text-decoration:none }
.site-header .sh-brand img { width:30px; height:30px; border-radius:8px; display:block }
.site-header .sh-brand b { font:800 18px/1 var(--display); letter-spacing:-.02em }
.site-header .sh-brand b span { color:var(--muted); font-weight:600 }
.site-header .navSet { display:flex; align-items:center; gap:2px; margin:0; padding:0; border:0 }
.site-header .navLink { position:relative; display:inline-flex; align-items:center; height:68px; padding:0 13px; margin:0; border:0;
                        border-radius:0; background:none; font:600 14px/1 var(--body); letter-spacing:0; color:var(--text-2);
                        text-decoration:none; white-space:nowrap; transition:color .15s }
.site-header .navLink:hover, .site-header .navLink:focus-visible { color:var(--text); background:none }
.site-header .navLink[aria-current="page"] { color:var(--text); background:none }
.site-header .navLink[aria-current="page"]::after { content:""; position:absolute; left:13px; right:13px; bottom:-1px; height:2px;
                                                    border-radius:2px; background:var(--gold) }
.site-header .navSp { flex:1 }
.site-header [hidden] { display:none !important }   /* the tool pages hide controls until they apply */
.site-header .signIn { display:inline-flex; align-items:center; margin:0; padding:9px 14px; border:0; border-radius:10px; background:none;
                       font:600 14px/1 var(--body); letter-spacing:0; text-transform:none; color:var(--text-2); text-decoration:none; white-space:nowrap }
.site-header .signIn:hover { color:var(--text); background:rgba(255,255,255,.04) }
.site-header .sh-join { display:inline-flex; align-items:center; padding:10px 16px; border-radius:10px; font:800 14px/1 var(--body);
                        color:#0b0d13; text-decoration:none; white-space:nowrap; background:linear-gradient(180deg,#f0cb88,var(--gold) 55%,#c9954a) }
.site-header .sh-menu { display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line-2); background:none; cursor:pointer;
                        align-items:center; justify-content:center; color:var(--text) }
.site-header .sh-menu svg { width:20px; height:20px }
@media (max-width:1060px){
  .site-header .sh-in { gap:14px }
  .site-header .navLink { padding:0 9px; font-size:13.5px }
  .site-header .navLink[aria-current="page"]::after { left:9px; right:9px }
}
/* phones and narrow tablets: the links fold into a sheet behind the menu button */
@media (max-width:900px){
  .site-header .sh-in { height:62px }
  .site-header .sh-menu { display:inline-flex }
  .site-header .navSet { position:fixed; left:0; right:0; top:62px; display:none; flex-direction:column; align-items:stretch; gap:0;
                         padding:10px var(--gutter) 22px; background:rgba(9,12,19,.98); border-bottom:1px solid var(--line);
                         box-shadow:0 30px 50px -20px rgba(0,0,0,.8) }
  .site-header.open .navSet { display:flex }
  .site-header .navLink { height:auto; padding:15px 4px; font-size:17px; border-bottom:1px solid var(--line) }
  .site-header .navLink[aria-current="page"] { color:var(--gold) }
  .site-header .navLink[aria-current="page"]::after { display:none }
  .site-header .signIn { padding:9px 10px }
}
@media (max-width:420px){ .site-header .signIn { display:none } .site-header.open .navSet .sh-sheetSign { display:flex } }
.site-header .sh-sheetSign { display:none }

/* ── the footer (shared) ───────────────────────────────────────────────────── */
.site-footer { border-top:1px solid var(--line); padding:72px 0 40px; font-family:var(--body); color:var(--muted); background:transparent }
.site-footer .sf-in { max-width:calc(var(--wrap) + var(--gutter) * 2); margin:0 auto; padding-inline:var(--gutter) }
/* Three straight answers close every page (Grok's review, 16 Oct): the three
   objections still standing at the bottom of any page, one sentence each. */
.site-footer .sf-qa { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 0 64px; border:1px solid var(--line); border-radius:var(--r-lg);
                      overflow:hidden; background:rgba(255,255,255,.015) }
.site-footer .sf-qa > div { padding:26px 28px }
.site-footer .sf-qa > div + div { border-left:1px solid var(--line) }
.site-footer .sf-qa h3 { margin:0 0 10px; font:700 17px/1.3 var(--display); letter-spacing:-.01em; color:var(--text) }
.site-footer .sf-qa p { margin:0; font-size:14.5px; line-height:1.6; color:var(--text-2) }
.site-footer .sf-qa p b { color:var(--gold); font-weight:800 }
@media (max-width:900px){ .site-footer .sf-qa { grid-template-columns:1fr } .site-footer .sf-qa > div + div { border-left:0; border-top:1px solid var(--line) } }
.site-footer .sf-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px }
.site-footer .sf-brand { display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none }
.site-footer .sf-brand img { width:30px; height:30px; border-radius:8px }
.site-footer .sf-brand b { font:800 18px/1 var(--display); letter-spacing:-.02em }
.site-footer .sf-brand b span { color:var(--muted); font-weight:600 }
.site-footer .sf-about { margin-top:14px; max-width:30em; font-size:14px; line-height:1.65; color:var(--muted) }
.site-footer h4 { margin:0 0 14px; font:600 11.5px/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text) }
.site-footer .sf-col a { display:block; padding:5px 0; font-size:14.5px; color:var(--muted); text-decoration:none }
.site-footer .sf-col a:hover { color:var(--text) }
.site-footer .sf-note { margin-top:48px; padding:20px 22px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.015);
                        font-size:12.5px; line-height:1.7; color:var(--dim) }
.site-footer .sf-note b { color:var(--muted) }
.site-footer .sf-copy { margin-top:22px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--dim) }
.site-footer .sf-copy a { color:var(--dim); text-decoration:none }
@media (max-width:900px){ .site-footer .sf-grid { grid-template-columns:1fr 1fr } .site-footer .sf-grid > :first-child { grid-column:1 / -1 } }
@media (pointer:coarse){ .site-footer .sf-col a { padding:10px 0 } }

/* ── Sofia's button: on a phone a compact pill that keeps her name ─────────────
   It was her portrait alone, and the owner could not tell it was Sofia ("I just
   see a round with a face", 16 Oct). Now her face, "Ask Sofia" and the AI tag,
   at full strength (a phone has no hover to wake it), and the footer leaves
   room so the pill never sits on the last line of the page. */
@media (max-width:640px){
  body #pubAi { right:12px; bottom:12px; gap:8px; padding:5px 13px 5px 5px; opacity:.94; filter:none }
  body #pubAi .pub-face { width:28px; height:28px; margin:0 }
  body #pubAi .pl { font-size:12.5px }
  body #pubAi .pl em { margin-left:6px; font-size:9.5px }
  .site-footer { padding-bottom:92px }
}