/* ============================================================================
   ORCA DEVS — core design system
   Loaded on every page. Tokens, reset, typography, layout, chrome, primitives.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  /* paper & ink — bright, near-white like HeyClicky --------------------- */
  --paper:        #FDFFF6;   /* near-white with a hint of green */
  --paper-2:      #F6F8F2;
  --paper-3:      #EDF0E8;
  --ink:          #111111;
  --ink-2:        #333333;
  --ink-3:        #666666;
  --ink-4:        #999999;

  /* soft section — replaces the old near-black "deep" sections ---------- */
  --deep:         #F2F4EE;   /* very pale sage — still readable contrast */
  --deep-2:       #E8EBE3;
  --deep-3:       #DEE1D8;
  --on-deep:      #111111;
  --on-deep-2:    #444444;
  --on-deep-3:    #777777;

  /* accents ----------------------------------------------------------- */
  --tide:         #0076FF;   /* HeyClicky-style blue accent */
  --tide-deep:    #0052CC;
  --tide-lit:     #3399FF;
  --tide-wash:    #D6E8FF;
  --glacier:      #66AAFF;
  --sun:          #FF6B35;   /* warm orange secondary */
  --sun-wash:     #FFE4D6;
  --kelp:         #00B48A;
  --kelp-wash:    #C8F0E4;
  --amber:        #F5A623;

  /* lines & shadow ---------------------------------------------------- */
  --line:         rgba(0,0,0,.14);
  --line-2:       rgba(0,0,0,.08);
  --line-3:       rgba(0,0,0,.04);
  --line-on-deep: rgba(0,0,0,.12);
  --line-on-deep-2:rgba(0,0,0,.07);

  --sh-1: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px -8px rgba(0,0,0,.16);
  --sh-2: 0 1px 3px rgba(0,0,0,.06), 0 14px 34px -16px rgba(0,0,0,.22);
  --sh-3: 0 2px 6px rgba(0,0,0,.07), 0 34px 70px -28px rgba(0,0,0,.28);
  --sh-4: 0 4px 12px rgba(0,0,0,.08), 0 64px 120px -44px rgba(0,0,0,.36);

  /* geometry ---------------------------------------------------------- */
  --r-xs: 10px;
  --r-sm: 14px;
  --r:    20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --pill: 999px;

  --bar:   44px;   /* macOS menubar height */
  --max:   1240px;
  --max-narrow: 780px;
  --gutter: clamp(20px, 4vw, 40px);

  /* type -------------------------------------------------------------- */
  --display: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sans:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* motion ------------------------------------------------------------ */
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* -------------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--bar) + 24px);
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  font-feature-settings:"ss01" 1;   /* Geist: single-storey a in UI text */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video,iframe{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
h1,h2,h3,h4,h5,p,figure,blockquote{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
::selection{ background:var(--ink); color:var(--paper) }
:focus-visible{ outline:2px solid var(--tide); outline-offset:3px; border-radius:6px }
hr{ border:0; border-top:1px solid var(--line); margin:0 }

/* ------------------------------------------------------- ambient background */
/* Flat clean white — no radial gradients, no grain. HeyClicky-style. */
.bg-field{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:var(--paper);
}
/* subtle dot grid — very faint, low-contrast on bright bg */
:root{
  --dot-cols: 12;
  --dot:      calc(100vw / var(--dot-cols));
  --dot-s:    1.5px;
}
/* The pitch is one twelfth of the viewport — the same column count the layout
   uses — so a dot lands on every column line and on both screen edges, and it
   re-registers on resize instead of drifting.

   It sits above everything including the bar, and blends in difference mode
   against white squares: pure black over light surfaces, pure white over dark
   ones. One layer that inverts itself against whatever it crosses.

   Squares are the one thing a radial gradient cannot draw, so the paint is
   vertical bars and the mask is horizontal bars: where they cross, a square. */
:root{
  --dot-cols: 12;
  --dot:      calc(100vw / var(--dot-cols));
  --dot-s:    2px;
}
.bg-grid{
  position:fixed; inset:0; pointer-events:none; z-index:95;
  background-image:repeating-linear-gradient(90deg, #fff 0 var(--dot-s), transparent var(--dot-s) var(--dot));
  -webkit-mask-image:repeating-linear-gradient(180deg, #000 0 var(--dot-s), transparent var(--dot-s) var(--dot));
  mask-image:repeating-linear-gradient(180deg, #000 0 var(--dot-s), transparent var(--dot-s) var(--dot));
  -webkit-mask-position:0 12px;
  mask-position:0 12px;
  mix-blend-mode:difference;
}
@supports not (mix-blend-mode:difference){
  .bg-grid{
    z-index:0; mix-blend-mode:normal;
    background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.42) 0 var(--dot-s), transparent var(--dot-s) var(--dot));
  }
}
@media (max-width:1000px){ :root{ --dot-cols:8 } }
@media (max-width:760px){  :root{ --dot-cols:4; --dot-s:1.5px } }
/* no grain on bright white — removed */
.bg-grain{ display:none }

/* ------------------------------------------------------------------- layout */
.wrap{
  width:100%; max-width:var(--max); margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative; z-index:2;
}
.wrap-narrow{ max-width:var(--max-narrow) }
.sec{ padding-block: clamp(72px, 10vw, 132px); position:relative }
.sec-tight{ padding-block: clamp(52px, 7vw, 84px) }
main{ position:relative; z-index:2 }

/* -------------------------------------------------------------- typography */
/* uniform-weight display across all sizes — Figtree is round and confident */
.display{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.028em;
  line-height:1.05;
  text-wrap:balance;
}
h1.display{ font-size:clamp(2.6rem, 6.2vw, 4.8rem); letter-spacing:-.034em; line-height:1 }
h2.display{ font-size:clamp(1.9rem, 4vw, 3.1rem); line-height:1.06; letter-spacing:-.030em }
h3.display{ font-size:clamp(1.4rem, 2.4vw, 1.9rem); line-height:1.14; letter-spacing:-.024em }
/* em runs in body weight, slightly dimmed */
.display em{
  font-style:normal;
  font-weight:400;
  color:var(--tide-deep);
}
.on-deep .display em{ color:var(--tide) }

/* micro label */
.label{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
}
.label::before{
  content:""; width:22px; height:1px; background:currentColor; opacity:.4;
}
.on-deep .label{ color:var(--on-deep-3) }

.lede{
  font-size:clamp(1.06rem, 1.5vw, 1.24rem);
  line-height:1.62;
  color:var(--ink-2);
  max-width:62ch;
  text-wrap:pretty;
}
.on-deep .lede{ color:var(--on-deep-2) }
p + p{ margin-top:1.05em }

.sec-head{ display:grid; gap:20px; margin-bottom:clamp(38px, 5vw, 62px); max-width:820px }
.sec-head.center{ margin-inline:auto; text-align:center; justify-items:center }
.sec-head.center .label::before{ display:none }

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:52px; padding-inline:26px;
  border-radius:var(--pill);
  font-weight:600; font-size:15.5px; letter-spacing:-.01em;
  border:1px solid transparent;
  transition:background .22s var(--ease-soft), color .22s var(--ease-soft),
             border-color .22s var(--ease-soft), box-shadow .22s var(--ease-soft);
  white-space:nowrap;
  will-change:transform;
}
.btn svg{ flex-shrink:0 }
.btn-p{ background:var(--ink); color:#fff; box-shadow:var(--sh-2) }
.btn-p:hover{ background:var(--ink-2) }
.btn-s{ background:transparent; color:var(--ink); border-color:var(--line) }
.btn-s:hover{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.18) }
.btn-t{ background:var(--tide); color:#fff; box-shadow:var(--sh-2) }
.btn-t:hover{ background:var(--tide-deep) }
.btn-sm{ height:38px; padding-inline:16px; font-size:13.5px }

/* ---------------------------------------------------------- glass buttons
   The trick in these is that the button is *light*, not dark: a pale tinted
   gradient, dark text with a white text-shadow so it reads as engraved, a
   saturated 1px border, and two blended rims — a screen highlight along the
   bottom inside edge and a colour-burn shadow just under it. That pair is
   what gives the edge its thickness. */
.btn-glass{
  position:relative; overflow:hidden;
  height:56px; padding:0 30px 1px 30px;
  border-radius:var(--pill);
  font-size:17.5px; font-weight:600; letter-spacing:-.022em;
  color:var(--ink);
  text-shadow:0 2px 2px rgba(255,255,255,.8);
  box-shadow:0 12px 28px rgba(5,12,15,.16);
  transition:transform .12s, opacity .15s;
}
.btn-glass > span, .btn-glass > svg{ position:relative; z-index:2 }
.btn-glass::before,.btn-glass::after{
  content:""; position:absolute; inset:0;
  border-radius:inherit; pointer-events:none;
}
.btn-glass::before{ mix-blend-mode:screen;     box-shadow:inset 0 -15px 2px -12px rgba(255,255,255,.25) }
.btn-glass::after { mix-blend-mode:color-burn; box-shadow:inset 0 -8px 0 4px rgba(160,160,160,.55) }
/* the sheen sweeping the top half */
.btn-glass .gloss{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.85) 0%, rgba(255,255,255,.35) 34%,
    rgba(255,255,255,.06) 52%, transparent 64%);
}
.btn-glass:hover{ opacity:.82 }
.btn-glass:active{ transform:scale(.97) }

/* blue — the primary action */
.btn-glass.btn-p{
  background:linear-gradient(180deg,#CCE4FF 0%,#99C9FF 18%,#66AAFF 50%,#4D9EFF 80%,#66AAFF 100%);
  border:1px solid var(--tide-deep);
  color:#003080;
}
/* paper — the secondary */
/* The pale pill is built to the same recipe as the blue one — five stops with
   a bright top, a mid tone that carries the body, and a lift at the base —
   rather than the flat three-stop wash it had. That is what made it look like
   a different component sitting next to its own primary. */
.btn-glass.btn-s{
  background:linear-gradient(180deg,#FFFFFF 0%,#F7F6F1 18%,#E9E7DF 50%,#DEDBD1 80%,#EFEDE6 100%);
  border:1px solid rgba(5,12,15,.34);
  color:var(--ink);
}
.btn-glass.btn-s:hover{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFAF6 18%,#EFEDE6 50%,#E5E2D9 80%,#F5F3EE 100%);
}

/* stacked button + its small print */
.btn-col{ display:flex; flex-direction:column; align-items:center; gap:8px }
.btn-note{
  font-size:12px; font-weight:400; letter-spacing:-.02em;
  color:rgba(5,12,15,.42); text-align:center;
}
@media (prefers-reduced-motion:reduce){ .btn-glass:active{ transform:none } }
.on-deep .btn-p{ background:var(--paper); color:var(--ink) }
.on-deep .btn-p:hover{ background:#fff }
.on-deep .btn-s{ color:var(--on-deep); border-color:var(--line-on-deep) }
.on-deep .btn-s:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.28) }

/* arrow link */
.alink{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:15px; color:var(--ink);
  border-bottom:1px solid var(--line);
  padding-bottom:3px;
  transition:gap .22s var(--ease), border-color .22s, color .22s;
}
.alink .arw{ transition:transform .3s var(--ease) }
.alink:hover{ gap:12px; border-color:var(--tide); color:var(--tide-deep) }
.alink:hover .arw{ transform:translateX(3px) }
.on-deep .alink{ color:var(--on-deep); border-color:var(--line-on-deep) }
.on-deep .alink:hover{ color:var(--glacier); border-color:var(--glacier) }

/* --------------------------------------------------------------- primitives */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  padding:5px 11px; border-radius:var(--pill);
  background:rgba(10,20,23,.045);
  border:1px solid var(--line-2);
  color:var(--ink-2);
  white-space:nowrap;
}
.on-deep .chip{ background:rgba(255,255,255,.06); border-color:var(--line-on-deep-2); color:var(--on-deep-2) }
.chip-row{ display:flex; flex-wrap:wrap; gap:7px }

/* Status tags read as a machine's own label, not a marketing badge: lowercase
   mono on a dark chip with a small steady LED, no pulse, no shouting caps. */
.pill-live,.pill-private{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.02em;
  padding:5px 10px; border-radius:6px;
  background:rgba(5,12,15,.82); color:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.pill-private{ color:rgba(255,255,255,.62) }
.dot{
  width:6px; height:6px; border-radius:50%; background:#37D67A;
  flex-shrink:0; position:relative;
  box-shadow:0 0 0 2px rgba(55,214,122,.22);
}
.pill-private .dot{ background:var(--ink-4); box-shadow:0 0 0 2px rgba(255,255,255,.10) }

/* checkmark bullet list */
.ticks{ display:grid; gap:13px }
.ticks li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.55; color:var(--ink-2) }
.ticks b{ color:var(--ink); font-weight:600 }
.ticks .tk{
  flex-shrink:0; width:19px; height:19px; margin-top:2px; border-radius:50%;
  background:var(--kelp-wash); display:grid; place-items:center;
}
.on-deep .ticks li{ color:var(--on-deep-2) }
.on-deep .ticks b{ color:var(--on-deep) }
.on-deep .ticks .tk{ background:rgba(159,218,219,.16) }

/* stat block */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr)); gap:2px;
        background:var(--line-2); border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden }
.stats > div{ background:var(--paper-2); padding:18px 16px }
.stats .n{
  font-family:var(--display);
  font-size:clamp(1.7rem,3vw,2.3rem); line-height:1; letter-spacing:-.038em; font-weight:600;
}
.stats .l{ font-size:12.5px; color:var(--ink-3); margin-top:7px; line-height:1.35 }
.on-deep .stats{ background:var(--line-on-deep-2); border-color:var(--line-on-deep-2) }
.on-deep .stats > div{ background:rgba(255,255,255,.035) }
.on-deep .stats .l{ color:var(--on-deep-3) }

/* card */
.card{
  background:var(--paper-2);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  box-shadow:var(--sh-1);
  overflow:hidden;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s;
}
a.card:hover{ box-shadow:var(--sh-3); transform:translateY(-3px); border-color:var(--line) }

/* soft section — replaces the heavy near-black dark sections
   Background is a very pale sage green, everything else stays legible. */
.on-deep{
  background:var(--deep);
  color:var(--on-deep);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.on-deep::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(0,118,255,.05), transparent 60%),
    radial-gradient(760px 480px at 92% 108%, rgba(255,107,53,.04), transparent 62%);
}

/* ---------------------------------------------------------------- top bar
   macOS-style menubar: 44px, frosted, very clean. Brand name left,
   nav links centre-left, CTA button right. */
.bar{
  position:fixed; inset:0 0 auto 0; height:var(--bar); z-index:90;
  display:flex; align-items:center; gap:16px;
  padding-inline:clamp(16px,3vw,28px);
  background:rgba(253,255,246,.88);
  backdrop-filter:saturate(200%) blur(24px);
  -webkit-backdrop-filter:saturate(200%) blur(24px);
  border-bottom:1px solid rgba(0,0,0,.07);
  transition:box-shadow .3s, background .3s, transform .42s var(--ease);
  will-change:transform;
}
/* the system-tray side of the bar: status glyphs, clock, then the action.
   Each glyph opens a small menu, the way a real menu bar does. */
.tray{ display:flex; align-items:center; gap:2px; color:var(--ink-4); position:relative }
.tray svg{ flex-shrink:0 }
.tray-btn{
  display:grid; place-items:center;
  width:28px; height:26px; border-radius:6px;
  color:var(--ink-4); padding:0;
  transition:background .16s, color .16s;
}
.tray-btn:hover{ background:rgba(5,12,15,.07); color:var(--ink-2) }
.tray-btn[aria-expanded="true"]{ background:var(--ink); color:#fff }
.tray-btn.off{ color:#B4413A }

.tray-menu{
  position:absolute; top:calc(100% + 9px); right:0; z-index:60;
  width:242px; padding:9px;
  background:rgba(252,251,247,.92);
  backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--line-2); border-radius:12px;
  box-shadow:var(--sh-3);
  animation:tm-in .14s var(--ease);
}
@keyframes tm-in{ from{ opacity:0; transform:translateY(-5px) } to{ opacity:1; transform:none } }
.tm-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12.5px; font-weight:600; color:var(--ink);
  padding:4px 8px 8px;
}
.tm-state{ font-family:var(--mono); font-size:11px; color:var(--ink-3); font-weight:400 }
.tm-row{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px; border-radius:7px;
  font-size:13px; color:var(--ink-2); text-align:left;
  transition:background .15s;
}
.tm-row:hover{ background:rgba(5,12,15,.06) }
.tm-dot{
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--ink-4);
}
.tm-dot.on{ background:#37D67A; box-shadow:0 0 0 2px rgba(55,214,122,.22) }
.tm-x{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-4) }
.tm-note{
  font-size:11.5px; line-height:1.5; color:var(--ink-3);
  padding:8px 8px 4px; border-top:1px solid var(--line-3); margin-top:5px;
}
.tm-go{
  display:block; padding:7px 8px 4px;
  font-size:12px; font-weight:600; color:var(--tide-deep);
}

/* -------------------------------------------- now playing, in the menu bar */
.tm-now{ display:flex; align-items:center; gap:10px; padding:2px 8px 10px }
.tm-art{ border-radius:7px; flex-shrink:0; box-shadow:0 2px 6px rgba(5,12,15,.24) }
.tm-meta{ display:grid; gap:1px; min-width:0 }
.tm-t{ font-size:12.5px; font-weight:600; color:var(--ink); letter-spacing:-.015em }
.tm-a{ font-size:10.5px; color:var(--ink-3) }

.tm-bar{
  position:relative; height:14px; margin:0 8px;
  display:flex; align-items:center; cursor:grab; touch-action:none;
}
.tm-bar::before{
  content:""; position:absolute; left:0; right:0; height:4px;
  border-radius:2px; background:rgba(5,12,15,.14);
}
.tm-fill{
  position:relative; height:4px; width:0;
  background:var(--ink); border-radius:2px;
}
.tm-fill::after{
  content:""; position:absolute; right:-5px; top:50%;
  width:11px; height:11px; border-radius:50%;
  transform:translateY(-50%) scale(0);
  background:#fff; border:1px solid rgba(5,12,15,.24);
  box-shadow:0 1px 4px rgba(5,12,15,.3);
  transition:transform .16s var(--ease);
}
.tm-bar:hover .tm-fill::after, .tm-bar.scrubbing .tm-fill::after{ transform:translateY(-50%) scale(1) }
.tm-bar:active{ cursor:grabbing }

.tm-times{
  display:flex; justify-content:space-between; padding:4px 8px 0;
  font-family:var(--mono); font-size:9px; color:var(--ink-4);
}
.tm-controls{ display:flex; align-items:center; gap:8px; padding:8px 8px 4px }
.tm-ctl{
  display:grid; place-items:center; padding:0;
  width:24px; height:24px; border-radius:50%;
  color:var(--ink-3);
  transition:background .15s, color .15s, transform .12s;
}
.tm-ctl:hover{ background:rgba(5,12,15,.08); color:var(--ink) }
.tm-ctl.play{ width:28px; height:28px; background:var(--ink); color:#fff }
.tm-ctl.play:hover{ background:var(--tide-deep); color:#fff }
.tm-ctl:active{ transform:scale(.93) }

.tm-vol{ display:flex; align-items:center; gap:6px; margin-left:auto; color:var(--ink-4) }
.tm-vol input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:56px; height:4px; border-radius:2px;
  background:rgba(5,12,15,.16); cursor:pointer;
}
.tm-vol input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:11px; height:11px; border-radius:50%;
  background:#fff; border:1px solid rgba(5,12,15,.26);
  box-shadow:0 1px 3px rgba(5,12,15,.3);
}
.tm-vol input[type="range"]::-moz-range-thumb{
  width:11px; height:11px; border:1px solid rgba(5,12,15,.26);
  border-radius:50%; background:#fff;
}
.bar-clock{
  font-size:13.5px; color:var(--ink-2); letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; min-width:62px; text-align:right;
}
.bar-cta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; letter-spacing:-.015em;
  color:var(--tide); padding:6px 10px; margin-left:4px;
  border-radius:var(--pill); white-space:nowrap;
  transition:opacity .18s, background .18s;
}
.bar-cta:hover{ background:rgba(10,95,105,.08) }
.bar-cta:hover{ opacity:.7 }
.orca-mark{ flex-shrink:0 }

.bar.stuck{
  box-shadow:0 1px 0 rgba(0,0,0,.06), 0 6px 20px -10px rgba(0,0,0,.12);
}
.bar.gone{ transform:translateY(-100%) }
@media (prefers-reduced-motion:reduce){
  .bar{ transition:border-color .3s, box-shadow .3s, background .3s }
  .bar.gone{ transform:none }
}
.brand{ display:flex; align-items:center; gap:9px; flex-shrink:0 }
.brand-mark{ width:28px; height:28px; object-fit:contain; flex-shrink:0 }
.brand-name{ font-weight:700; font-size:16px; letter-spacing:-.02em; line-height:1.1 }
.brand-sub{
  display:block; font-family:var(--mono); font-size:9px; font-weight:400;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:1px;
}
.nav{ display:flex; align-items:center; gap:1px; margin-left:10px }
.nav a{
  padding:6px 12px; border-radius:7px; font-size:13.5px; font-weight:500;
  color:var(--ink-2); letter-spacing:-.01em;
  transition:background .15s, color .15s;
}
.nav a:hover{ background:rgba(0,0,0,.05); color:var(--ink) }
.nav a[aria-current="page"]{ color:var(--ink); font-weight:600; background:rgba(0,0,0,.04) }
.bar-right{ margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0 }
.burger{
  display:none; width:34px; height:34px; border-radius:8px;
  align-items:center; justify-content:center; border:1px solid var(--line-2);
}
.burger span{ display:block; width:15px; height:1.5px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s }
.burger span + span{ margin-top:4px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg) }

/* mobile drawer */
.drawer{
  position:fixed; inset:var(--bar) 0 auto 0; z-index:89;
  background:rgba(253,255,246,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  padding:12px var(--gutter) 22px;
  display:grid; gap:2px;
  transform:translateY(-14px); opacity:0; visibility:hidden;
  transition:transform .32s var(--ease), opacity .24s, visibility .32s;
}
.drawer.open{ transform:none; opacity:1; visibility:visible }
.drawer a{
  padding:13px 4px; font-size:18px; font-weight:500; letter-spacing:-.02em;
  border-bottom:1px solid var(--line-3);
}
.drawer .btn{ margin-top:14px; width:100% }

/* ----------------------------------------------------------------- footer
   Footer is dark navy — keeps visual hierarchy on a fully-bright-page. */
.foot{
  background:#0F1117; color:rgba(255,255,255,.6);
  padding-top:clamp(64px,8vw,96px);
  position:relative; z-index:2; overflow:hidden;
}
.foot::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(900px 480px at 20% -20%, rgba(0,118,255,.10), transparent 62%);
}
.foot-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:44px 32px;
  padding-bottom:56px; position:relative;
}
.foot-brand .brand-name{ color:#fff }
.foot-brand .brand-sub{ color:rgba(255,255,255,.35) }
.foot-brand p{ margin-top:18px; font-size:14.5px; line-height:1.6; max-width:34ch; color:rgba(255,255,255,.5) }
.foot-col h5{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.3); font-weight:500; margin-bottom:16px;
}
.foot-col a{
  display:block; padding:6px 0; font-size:14.5px; color:rgba(255,255,255,.5);
  transition:color .18s, transform .18s var(--ease);
}
.foot-col a:hover{ color:#fff; transform:translateX(3px) }
.foot-mark{
  font-family:var(--display);
  font-size:clamp(3.2rem,15vw,11rem); line-height:.82; letter-spacing:-.055em; font-weight:700;
  color:rgba(255,255,255,.04); user-select:none; pointer-events:none;
  padding-bottom:12px; white-space:nowrap;
}
.foot-bottom{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.08);
  padding:22px 0 30px;
  font-family:var(--mono); font-size:11.5px; color:rgba(255,255,255,.3);
}
.foot-social{ display:flex; gap:8px; margin-top:22px }
.foot-social a{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.5);
  transition:background .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.foot-social a:hover{ background:rgba(255,255,255,.09); color:#fff; transform:translateY(-2px) }

/* --------------------------------------------------------- reveal on scroll */
[data-rv]{ opacity:0 }
.no-anim [data-rv]{ opacity:1 !important; transform:none !important }

/* ------------------------------------------------------------ page masthead */
/* the compact hero used at the top of interior pages */
.masthead{ padding-top:calc(var(--bar) + clamp(48px,7vw,88px)); padding-bottom:clamp(34px,5vw,56px) }
.masthead .crumb{
  display:flex; align-items:center; gap:9px; margin-bottom:24px;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
}
.masthead .crumb a:hover{ color:var(--ink) }
.masthead h1{ margin-bottom:22px }

/* -------------------------------------------------------------- responsive */
@media (max-width: 1000px){
  .foot-grid{ grid-template-columns:1fr 1fr; gap:38px 26px }
}
@media (max-width: 860px){
  :root{ --bar:44px }   /* keep macOS height on mobile too */
  .nav{ display:none }      /* the burger takes over here */
  .burger{ display:flex }
  body{ font-size:16.5px }
}
@media (max-width: 560px){
  .foot-grid{ grid-template-columns:1fr }
  .btn{ height:48px; font-size:15px }
  .stats{ grid-template-columns:1fr 1fr }
}

/* ------------------------------------------------------------------- phone
   Everything above this point is fluid, so the phone pass is about density
   rather than layout: less air between sections, a display scale that does
   not eat the screen, and chrome trimmed to what a thumb can actually use. */
@media (max-width: 560px){
  .sec{ padding-block: 60px }
  .sec-tight{ padding-block: 44px }

  h1.display{ font-size:clamp(2.15rem, 9vw, 2.7rem); letter-spacing:-.036em }
  h2.display{ font-size:clamp(1.72rem, 7vw, 2.1rem); letter-spacing:-.032em }
  h3.display{ font-size:1.32rem; letter-spacing:-.026em }
  .lede{ font-size:1.02rem; line-height:1.58 }

  /* long URLs and mono strings are the usual source of a stray scrollbar */
  .u-mono, .label, code, pre{ overflow-wrap:anywhere }

  /* browser chrome on a phone: the address pill keeps the domain, the
     secondary buttons go, since they were never thumb-sized anyway */
  .frame-bar{ height:32px; padding:0 9px; gap:7px }
  .frame-url{ height:21px; padding:0 9px; font-size:10px }
  .tl{ width:8px; height:8px }
  .dots{ gap:5px }
  .fbtn{ height:22px; padding:0 9px; font-size:10px }

  /* portrait embeds were square, which wasted most of a phone screen */
  .stage.portrait{ aspect-ratio:3/4 }

  .drawer a{ padding:13px 4px; font-size:18px }
  .faq .q > button{ padding:20px 2px; gap:14px }
  .foot{ padding-top:56px }
}

/* the drawer must not run past the bottom of a short screen (landscape,
   or a phone with the URL bar expanded) */
.drawer{ max-height:calc(100dvh - var(--bar)); overflow-y:auto; overscroll-behavior:contain }

/* touch devices keep the styling but drop the lift, which otherwise sticks
   after a tap and leaves a card hovering until you tap something else */
@media (hover: none){
  .pcard:hover, a.card:hover, .tile:hover, .proof-links a:hover, .foot-social a:hover{
    transform:none;
  }
}

/* ------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-rv]{ opacity:1 !important }
}

/* --------------------------------------------------------------- utilities */
.u-center{ text-align:center }
.u-mono{ font-family:var(--mono) }
.u-hide-sm{ }
@media (max-width:700px){ .u-hide-sm{ display:none !important } }
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--ink); color:var(--paper); padding:11px 18px; border-radius:var(--pill);
  font-size:14px; font-weight:600; transition:top .2s;
}
.skip:focus{ top:12px }