/* ============================================================================
   REDDENDA DESK — design system v2 (2026-08-10, @DESK-REBUILD)
   Dark SaaS / frontier-infrastructure. Replaces the teal+gold healthcare theme.
   Fonts are the three already self-hosted in /assets/fonts (no new network cost).
   Built against the estate design law: gradients live on 1px edges and one hero
   band, never inside a card; no bounce easing; nothing animates over 1.2s.
   ========================================================================== */

@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/space-grotesk-latin-var.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-var.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'PlexMono';src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  /* ground */
  --void:#07080B; --panel:#0C0E13; --raise:#12151D; --lift:#171B25;
  --edge:rgba(255,255,255,.07); --edge2:rgba(255,255,255,.13); --edge3:rgba(255,255,255,.22);
  /* signal */
  --volt:#6D5EF8; --volt-hot:#9B8CFF; --volt-deep:#3A2FA8;
  --volt-soft:rgba(109,94,248,.14); --volt-glow:rgba(109,94,248,.34);
  --signal:#3DDC97; --signal-soft:rgba(61,220,151,.13);
  --amber:#F2B33D; --amber-soft:rgba(242,179,61,.13);
  --hot:#FF6B5B;
  /* type */
  /* Text tokens are contrast-measured, not eyeballed. Every one clears WCAG AA (4.5:1) on --void,
     --panel AND --raise, because --t4 carries the smallest text on the page (sources, disclaimers,
     the honest-language notes) and those are exactly the lines a partner leans in to read.
     The previous #4E5563 measured 2.67:1 on --void and 2.44:1 on --raise. It failed outright. */
  --t1:#F3F5F9; --t2:#A2AAB9; --t3:#949CAA; --t4:#828A98;
  --disp:'Space Grotesk',system-ui,'Segoe UI',sans-serif;
  --body:Inter,system-ui,-apple-system,sans-serif;
  --mono:'PlexMono','JetBrains Mono',ui-monospace,monospace;
  /* motion */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--void);color:var(--t1);font:400 16px/1.62 var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:clip;position:relative}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--volt-hot);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,28px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── grain: one fixed overlay, the estate house treatment ─────────────────── */
/* No mix-blend-mode: a fixed full-viewport BLENDED layer recomposites against everything scrolling
   under it, every frame, and it was the most expensive paint on the page. Plain alpha at the same
   opacity is visually indistinguishable here and costs almost nothing. */
.grain::after{content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── nav ──────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:900;backdrop-filter:blur(16px) saturate(150%);
  background:rgba(7,8,11,.78);border-bottom:1px solid transparent;transition:border-color .3s var(--e-out),background .3s var(--e-out)}
.nav.stuck{border-bottom-color:var(--edge);background:rgba(7,8,11,.92)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,28px);height:64px;
  display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:9px;font:600 15.5px/1 var(--disp);letter-spacing:-.02em;margin-right:6px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--volt);
  box-shadow:0 0 0 3px rgba(109,94,248,.16),0 0 14px var(--volt-glow)}
.brand small{font:500 10px/1 var(--mono);color:var(--t3);letter-spacing:.14em;text-transform:uppercase;padding-left:8px;margin-left:2px;border-left:1px solid var(--edge2)}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-links a,.navbtn{font:500 13.5px/1 var(--body);color:var(--t2);padding:9px 12px;border-radius:8px;
  transition:color .18s var(--e-out),background .18s var(--e-out);background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:6px}
.nav-links a:hover,.navbtn:hover{color:var(--t1);background:rgba(255,255,255,.045)}
.navbtn svg{transition:transform .22s var(--e-out)}
.has-menu[aria-expanded="true"] svg{transform:rotate(180deg)}
.cta-sm{background:var(--t1)!important;color:#08090C!important;font-weight:600!important;padding:9px 15px!important}
.cta-sm:hover{background:#fff!important}

/* industries mega menu */
/* The 8px gap between the button and the panel was DEAD SPACE: moving the cursor down toward the menu
   left the hover target and fired mouseleave, so the panel vanished before it could be reached. The
   panel now starts flush at 100% and re-creates the visual gap with a transparent top border, so the
   pointer never crosses a hole. Paired with a close delay in desk.js. */
.mega{position:absolute;top:100%;border-top:8px solid transparent;background-clip:padding-box;
  left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(880px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--edge2);
  border-radius:16px;padding:14px;opacity:0;visibility:hidden;transition:opacity .2s var(--e-out),transform .2s var(--e-out);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.85);display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.mega.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega a{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:12px;border-radius:11px;align-items:start;
  transition:background .16s var(--e-out)}
.mega a:hover{background:rgba(255,255,255,.05)}
.mega .ic{width:34px;height:34px;border-radius:9px;background:var(--raise);border:1px solid var(--edge);
  display:grid;place-items:center;color:var(--volt-hot)}
.mega b{display:block;font:600 13.5px/1.3 var(--body);color:var(--t1)}
.mega span{display:block;font:400 12.2px/1.45 var(--body);color:var(--t3);margin-top:3px}
.navwrap{position:relative}
/* THE BRIDGE. The panel is far wider than the button, so a diagonal toward its far corner leaves the
   button's own box sideways and the menu closes mid-travel. This invisible wedge spans the full panel
   width across the seam, keeping the pointer inside the hover target on any approach angle. It only
   exists while the menu is open, so it can never swallow clicks on the nav behind it. */
.navwrap::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  width:min(880px,calc(100vw - 32px));height:16px;display:none}
.navwrap:hover::after,.navwrap:focus-within::after{display:block}

/* ── type ─────────────────────────────────────────────────────────────────── */
h1{font:600 clamp(40px,7.2vw,82px)/1.02 var(--disp);letter-spacing:-.043em;max-width:16ch}
h2{font:600 clamp(28px,4.3vw,50px)/1.07 var(--disp);letter-spacing:-.035em;max-width:19ch}
h3{font:600 clamp(19px,2.1vw,24px)/1.25 var(--disp);letter-spacing:-.022em}
.lede{font-size:clamp(16.5px,1.95vw,19.5px);line-height:1.58;color:var(--t2);max-width:56ch}
.sublede{font-size:clamp(15px,1.7vw,17.5px);line-height:1.6;color:var(--t2);max-width:58ch}
.grad{background:linear-gradient(100deg,var(--volt-hot),#C9BEFF 46%,var(--volt-hot));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.kick{font:500 11px/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--t3);
  display:flex;align-items:center;gap:9px;margin-bottom:18px}
.kick::before{content:'';width:22px;height:1px;background:var(--edge3)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ── sections + the reveal engine (direct children of .wrap) ──────────────── */
.sec{position:relative;padding:clamp(72px,9vw,112px) 0;
  /* skip render work for offscreen sections; the size hint keeps the scrollbar honest */
  content-visibility:auto;contain-intrinsic-size:auto 720px}
.sec>.wrap>*{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
.sec>.wrap>*:nth-child(2){transition-delay:.07s}
.sec>.wrap>*:nth-child(3){transition-delay:.13s}
.sec>.wrap>*:nth-child(4){transition-delay:.19s}
.sec.in>.wrap>*{opacity:1;transform:none}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--edge2) 22%,var(--edge2) 78%,transparent)}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;font:600 14.5px/1 var(--body);
  padding:14px 22px;border-radius:11px;border:1px solid transparent;cursor:pointer;
  transition:transform .18s var(--e-out),background .18s var(--e-out),border-color .18s var(--e-out)}
.btn:hover{transform:translateY(-1px)}
.btn-p{background:var(--t1);color:#08090C}
.btn-p:hover{background:#fff}
.btn-g{background:rgba(255,255,255,.045);color:var(--t1);border-color:var(--edge2)}
.btn-g:hover{background:rgba(255,255,255,.08);border-color:var(--edge3)}

/* ── cards. flat interiors; the gradient lives on the 1px edge only ───────── */
.card{position:relative;background:var(--panel);border:1px solid var(--edge);border-radius:16px;
  padding:clamp(20px,2.4vw,28px);transition:border-color .25s var(--e-out),background .25s var(--e-out)}
.card:hover{border-color:var(--edge2);background:var(--raise)}
.card-lit{background:var(--panel);border-color:transparent;
  background-image:linear-gradient(var(--panel),var(--panel)),
    linear-gradient(140deg,rgba(109,94,248,.55),rgba(255,255,255,.06) 42%,rgba(109,94,248,.22));
  background-origin:border-box;background-clip:padding-box,border-box}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* stat */
.stat{font:600 clamp(30px,4.2vw,50px)/1 var(--disp);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat-l{font:500 12.5px/1.4 var(--body);color:var(--t3);margin-top:9px}
/* Live-counter states (@ttys004 2026-08-20). `unavailable` is a 11-character word landing in a slot
   sized for a numeral at clamp(30px,4.2vw,50px); left at that size it overflows the tick cell and
   pushes horizontal scroll at 320px. It is a fallback nobody should see often, so it reads as a quiet
   note rather than a headline. .stat-since reserves its own line height so the freshness string
   arriving after the fetch does not shift the card. */
.stat-na,.stat.stat-na,.tick .stat.stat-na{font:600 clamp(14px,1.6vw,19px)/1.25 var(--body);letter-spacing:-.01em;color:var(--t3)}
/* ^ THE SELECTOR LIST IS THE POINT, not the size. The first draft was a bare `.stat-na` (0,1,0) and it
   LOST to `.tick .stat` (0,2,0), which lives in an inline <style> in index.html and in industry.css,
   both after desk.css. Four of the seven counters kept the 30px headline size and the rule shipped
   doing nothing — visible only by reading the computed value, never by grepping the file. */
.stat-since{font:500 10.5px/1.4 var(--mono);color:var(--t4);margin-top:7px;letter-spacing:.01em;min-height:1.4em}
.src{font:500 10.5px/1.4 var(--mono);color:var(--t4);margin-top:10px;letter-spacing:.01em}

/* pill */
.pill{display:inline-flex;align-items:center;gap:7px;font:500 12px/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--t2);background:rgba(255,255,255,.04);
  border:1px solid var(--edge);border-radius:999px;padding:7px 13px}
.pill .d{width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 9px var(--signal)}

/* ── footer ───────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--edge);padding:56px 0 44px;margin-top:20px}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:34px}
.foot h4{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--t4);margin-bottom:14px}
.foot a{display:block;font-size:13.5px;color:var(--t2);padding:5px 0;transition:color .16s var(--e-out)}
.foot a:hover{color:var(--t1)}
.foot-note{margin-top:38px;padding-top:22px;border-top:1px solid var(--edge);
  font-size:12.2px;color:var(--t4);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ── responsive ───────────────────────────────────────────────────────────── */
@media(max-width:940px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
  .mega{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:760px){
  /* the nav was wrapping "Reddenda Desk" onto two lines and "Talk to us" onto three at 390px.
     Nothing in a 64px bar may wrap, so the brand tag drops and every control is nowrap. */
  .brand{font-size:14.5px;white-space:nowrap}
  .brand small{display:none}
  .nav-in{gap:6px}
  .nav-links a,.navbtn{padding:8px 9px;white-space:nowrap}
  .cta-sm{padding:9px 12px!important;white-space:nowrap}
}
@media(max-width:470px){
  /* At 320px the bar ran past the viewport: brand + Industries + CTA needed ~340px inside 284px.
     The industries menu is reachable from the grid on every page and from the footer, so the button
     is the correct thing to drop. Brand and the one CTA always survive. */
  .navwrap{display:none}
  .brand{font-size:13.5px}
  .cta-sm{font-size:13px!important;padding:8px 11px!important}
}
@media(max-width:640px){
  .nav-links .hide-sm{display:none}
  .g2,.g4{grid-template-columns:1fr}
  h1{font-size:clamp(34px,9vw,46px)}
  .foot-grid{grid-template-columns:1fr}
}

/* ── reduced motion: real, not a token ────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .sec>.wrap>*{opacity:1!important;transform:none!important}
  .grain::after{display:none}
}

/* ── the pricing ladder + the measurement proof ───────────────────────────── */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.rung{position:relative;padding:26px 24px;border:1px solid var(--edge);border-radius:16px;background:var(--panel)}
.rung.hot{border-color:transparent;
  background-image:linear-gradient(var(--panel),var(--panel)),
    linear-gradient(140deg,rgba(242,179,61,.65),rgba(255,255,255,.06) 46%,rgba(242,179,61,.28));
  background-origin:border-box;background-clip:padding-box,border-box}
.rn{font:600 clamp(30px,3.6vw,42px)/1 var(--disp);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.rung.hot .rn{color:var(--amber)}
.rn span{font:500 13px/1 var(--body);letter-spacing:0;color:var(--t3);margin-left:7px}
.rung h3{margin:16px 0 10px}
@media(max-width:880px){.ladder{grid-template-columns:1fr}}

.measure{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,38px);margin-top:34px;
  padding:clamp(22px,3vw,34px);border:1px solid var(--edge);border-radius:18px;background:var(--panel)}
.measure h3{margin-bottom:12px}
.calc{border:1px solid var(--edge);border-radius:13px;padding:18px 20px;background:var(--void)}
.cr{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;
  font-size:13.6px;color:var(--t3);border-bottom:1px solid var(--edge)}
.cr b{color:var(--t1);font-weight:600;font-size:15px}
.cr.eq{color:var(--t2)} .cr.eq b{color:var(--volt-hot)}
.cr.tot b{font-size:18px}
.cr.share{border-bottom:0;padding-top:14px} .cr.share b{color:var(--amber);font-size:20px}
.calc .src{border-bottom:0;margin-top:12px}
@media(max-width:820px){.measure{grid-template-columns:1fr}}