/* ==========================================================================
   VOCARTES: design tokens
   ========================================================================== */
:root {
  /* surface */
  --ink:        #07080c;
  --ink-2:      #0a0c12;           /* unused since the tones went warm, kept as palette */
  --ink-3:      #0e1118;           /* ditto */
  /* The two section tones. The alternation was a lightness step of ΔE 2.15,
     under the threshold for a flat field that size, so you had to go looking
     for it. Same neutral blue-black family, lifted until the step is ΔE 4.5:
     a bit over twice the separation, still unmistakably a near-black. (A warm
     ember tone at ΔE 4.6 was tried and rejected. The visibility was right,
     the hue was not. Keep this one neutral; chroma is 1.9.) */
  --surface-alt: #0e111a;
  --surface:     var(--ink);       /* whichever tone the current section is on */
  --sec-accent:  var(--ember);     /* each section overrides this */
  --sec-ring:    rgba(255, 122, 69, .18);
  --raise:      rgba(255, 255, 255, 0.034);
  --raise-2:    rgba(255, 255, 255, 0.058);
  --line:       rgba(255, 255, 255, 0.085);
  --line-2:     rgba(255, 255, 255, 0.15);

  /* type */
  --ivory:      #f5f2ec;
  --ivory-dim:  #cfc9be;
  --muted:      #8d94a3;
  --muted-2:    #626a7a;

  /* accent */
  --ember:      #ff7a45;
  --gold:       #ffc46b;
  --teal:       #57d9c4;
  --violet:     #9b8cff;
  --rose:       #ff8fa8;

  --warm-grad:  linear-gradient(100deg, var(--gold), var(--ember) 55%, var(--rose));
  --cool-grad:  linear-gradient(100deg, var(--teal), var(--violet));

  /* geometry */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --pad: clamp(20px, 5vw, 48px);
  --maxw: 1320px;

  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ==========================================================================
   base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  font-feature-settings: "cv05" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

/* ---- role marks --------------------------------------------------------
   The roles are disciplines, not people, so they carry a mark instead of a
   portrait. It fills whatever frame a portrait used to, which is why every
   avatar slot on the page keeps working unchanged. Family sets the tint. */
.rm {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--ivory-dim);
  background: rgba(255, 255, 255, .05);
}
.rm svg { width: 48%; height: 48%; }
.rm-operator { color: #1d1206; background: var(--warm-grad); }
.rm-money    { color: var(--gold);   background: rgba(255, 196, 107, .12); }
.rm-risk     { color: var(--violet); background: rgba(155, 140, 255, .13); }
.rm-run      { color: var(--teal);   background: rgba(87, 217, 196, .12); }
.rm-grow     { color: var(--rose);   background: rgba(255, 143, 168, .12); }
.rm-open     { color: var(--muted); background: rgba(255, 255, 255, .03); border: 1px dashed var(--line-2); }

/* a photograph dropped in at assets/img/<key>.jpg fills whatever portrait
   frame it lands in: circle, rounded square or stacked avatar alike */
.ph { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* The portraits are head-and-shoulders with real room around the subject,
   which reads well at 76px and turns to mush at 28px. Small frames crop into
   the head so there is still a face in there at avatar size. */
.msg-face .ph { transform: scale(1.62); transform-origin: 50% 24%; }
.member-face .ph, .ask-face .ph, .core .ph {
  transform: scale(1.14); transform-origin: 50% 24%;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
::selection { background: rgba(255, 122, 69, .28); }

/* page-wide grain + vignette */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.42'/></svg>");
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* ==========================================================================
   type utilities
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--raise);
  backdrop-filter: blur(8px);
}
.eyebrow .num {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .1em; font-style: normal;
  color: var(--sec-accent);
  padding-right: 10px;
  border-right: 1px solid var(--line-2);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sec-accent);
  box-shadow: 0 0 0 4px var(--sec-ring);
  animation: pulse 2.6s var(--ease-io) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--sec-ring); }
  50%      { box-shadow: 0 0 0 8px transparent; }
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; }

.display {
  font-size: clamp(2.9rem, 6.6vw, 5.3rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
}
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; }
.serif-i { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; }

.grad-warm {
  background: var(--warm-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.grad-cool {
  background: var(--cool-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.section-title { font-size: clamp(2rem, 4vw, 3.15rem); letter-spacing: -0.042em; }
.lede { font-size: clamp(1.02rem, 1.35vw, 1.2rem); color: var(--muted); line-height: 1.62; max-width: 62ch; }
.mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; }

/* ==========================================================================
   buttons
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 550;
  letter-spacing: -0.012em;
  white-space: nowrap;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, border-color .3s;
  isolation: isolate;
  overflow: hidden;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--warm-grad);
  color: #1a0d06;
  font-weight: 600;
  box-shadow: 0 8px 26px -10px rgba(255, 122, 69, .65), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:hover { box-shadow: 0 16px 42px -12px rgba(255, 122, 69, .8), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-primary::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease);
}
.btn-primary:hover::after { transform: translateX(120%); }

.btn-ghost {
  border: 1px solid var(--line-2);
  background: var(--raise);
  color: var(--ivory);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover { background: var(--raise-2); border-color: rgba(255,255,255,.28); }

.btn .arrow { transition: transform .45s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ==========================================================================
   nav
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .45s var(--ease), border-color .45s, backdrop-filter .45s;
  border-bottom: 1px solid transparent;
}
.nav.stuck {
  background: rgba(7, 8, 12, .72);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav-in {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 74px;
}
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; padding: 7px 0; min-height: 44px; }
.brand-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.brand-mark {
  width: 30px; height: 30px; flex: none;
  transition: transform .45s var(--ease);
}
/* the blades lift a little when you reach for the logo */
.brand:hover .brand-mark { transform: translateY(-1.5px) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .brand-mark { transition: none; }
  .brand:hover .brand-mark { transform: none; }
}
.brand-name {
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.045em;
}
.brand-name b { font-weight: 600; }
.brand-tag {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2); margin-left: 9px; padding-left: 10px;
  border-left: 1px solid var(--line);
}
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  font-size: 14px; color: var(--muted); padding: 8px 13px; border-radius: 100px;
  transition: color .25s, background .25s;
}
.nav-links a:hover { color: var(--ivory); background: var(--raise); }
.nav-links a.here { color: var(--ivory); background: var(--raise-2); }
.nav-links a.here::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 1.5px;
  border-radius: 2px; background: var(--warm-grad);
}
.nav-links a { position: relative; }

.nav-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--warm-grad);
  box-shadow: 0 0 12px -2px rgba(255, 122, 69, .8);
  transition: width .08s linear;
  pointer-events: none;
}
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-cta .btn { padding: 10px 18px; font-size: 13.5px; }
/* ---- mobile navigation -------------------------------------------------
   Below 950px the inline links are hidden, so without this the page has no
   navigation at all, on a document that is ~28,000px tall on a phone. */
.nav-toggle {
  display: none;
  width: 44px; height: 44px; flex: none;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--raise);
  padding: 0 12px;
  flex-direction: column; justify-content: center; gap: 5px;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--ivory);
  transition: transform .34s var(--ease), opacity .24s;
}
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-menu {
  display: none;
  border-top: 1px solid var(--line);
  background: rgba(7, 8, 12, .97);
  backdrop-filter: blur(22px) saturate(140%);
  padding: 10px var(--pad) calc(18px + env(safe-area-inset-bottom));
  max-height: calc(100dvh - 74px);
  overflow-y: auto;
}
.nav-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 2px;
  font-size: 17px; font-weight: 500; letter-spacing: -0.022em;
  border-bottom: 1px solid var(--line);
  color: var(--ivory);
}
.nav-menu a:last-of-type { border-bottom: 0; }
.nav-menu a svg { color: var(--muted-2); }
.nav-menu .btn { display: flex; justify-content: center; width: 100%; margin-top: 14px; padding: 16px 24px; }

@media (max-width: 950px) {
  .nav-links, .brand-tag { display: none; }
  .nav-toggle { display: flex; }
  .nav.open { background: rgba(7, 8, 12, .97); backdrop-filter: blur(22px); border-bottom-color: var(--line); }
  .nav.open .nav-menu { display: block; }
  /* the header is the scroll container's lid while the menu is open */
  body.nav-locked { overflow: hidden; }
}
@media (max-width: 560px) { .nav-cta .btn-ghost { display: none; } }

/* ==========================================================================
   atmosphere
   ========================================================================== */
.aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; }
.blob-a { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: radial-gradient(circle, rgba(255,122,69,.52), transparent 68%); animation: drift-a 22s var(--ease-io) infinite alternate; }
.blob-b { width: 42vw; height: 42vw; right: -10vw; top: 2vw;  background: radial-gradient(circle, rgba(155,140,255,.42), transparent 68%); animation: drift-b 27s var(--ease-io) infinite alternate; }
.blob-c { width: 38vw; height: 38vw; left: 28vw; bottom: -18vw; background: radial-gradient(circle, rgba(87,217,196,.30), transparent 68%); animation: drift-c 31s var(--ease-io) infinite alternate; }
@keyframes drift-a { to { transform: translate3d(9vw, 7vw, 0) scale(1.18); } }
@keyframes drift-b { to { transform: translate3d(-8vw, 10vw, 0) scale(1.12); } }
@keyframes drift-c { to { transform: translate3d(6vw, -8vw, 0) scale(.88); } }

.grid-lines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 85% 65% at 50% 32%, #000 25%, transparent 78%);
}

/* ==========================================================================
   hero
   ========================================================================== */
.hero { position: relative; padding: 150px 0 70px; overflow: hidden; }
.hero-in {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  gap: clamp(30px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 1040px) { .hero-in { grid-template-columns: 1fr; gap: 54px; } .hero { padding-top: 130px; } }

.hero-copy > * + * { margin-top: 26px; }

.hero-h1 { font-size: clamp(2.5rem, 4.5vw, 3.75rem); letter-spacing: -0.048em; line-height: 1.04; }
.hero-h1 .line-1 { display: block; color: var(--ivory); }

/* rotating value statements */
.rotator {
  display: block;
  position: relative;
  height: 1.2em;
  font-size: .94em;
  overflow: hidden;
  margin-top: .1em;
}
.rot-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.022em;
  opacity: 0;
  transform: translateY(72%) rotateX(-38deg);
  transform-origin: 0 0;
  filter: blur(7px);
  transition: opacity .72s var(--ease), transform .82s var(--ease), filter .72s var(--ease);
}
.rot-item.is-in  { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
.rot-item.is-out { opacity: 0; transform: translateY(-72%) rotateX(34deg); filter: blur(7px); }
@media (max-width: 560px) { .rotator { font-size: .86em; } }

.hero-sub { font-size: clamp(1.03rem, 1.3vw, 1.16rem); color: var(--muted); max-width: 52ch; line-height: 1.64; }
.hero-sub strong { color: var(--ivory-dim); font-weight: 500; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { font-size: 13px; color: var(--muted-2); display: flex; align-items: center; gap: 8px; }

.hero-proof {
  display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center;
  padding-top: 24px; margin-top: 30px; border-top: 1px solid var(--line);
}
.proof-item { display: flex; align-items: baseline; gap: 9px; }
.proof-num { font-size: 19.5px; font-weight: 600; letter-spacing: -0.04em; }
.proof-lbl { font-size: 12px; color: var(--muted-2); }

/* ---- thought constellation --------------------------------------------- */
.stage {
  position: relative;
  aspect-ratio: 1 / 1.08;
  min-height: 470px;
}
@media (max-width: 1040px) { .stage { max-width: 540px; margin-inline: auto; width: 100%; } }
@media (max-width: 460px)  { .stage { min-height: 400px; } }

.stage-rings { position: absolute; inset: 0; z-index: 0; }
.stage-ring {
  position: absolute; top: 50%; left: 50%;
  border: 1px dashed rgba(255,255,255,.09);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.stage-ring.r1 { width: 44%;  height: 44%;  animation: spin 46s linear infinite; }
.stage-ring.r2 { width: 70%;  height: 70%;  animation: spin 72s linear infinite reverse; border-color: rgba(255,255,255,.06); }
.stage-ring.r3 { width: 98%;  height: 98%;  animation: spin 110s linear infinite; border-color: rgba(255,255,255,.04); }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* the person at the center, the owner */
.core {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 33%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #1b2030, #0b0e15);
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px -28px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.1);
  overflow: hidden;
}
.core svg { width: 100%; height: 100%; }
.core-halo {
  position: absolute; top: 50%; left: 50%;
  width: 37%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 3;
  background: conic-gradient(from 0deg, rgba(255,196,107,.0), rgba(255,122,69,.55), rgba(87,217,196,.45), rgba(155,140,255,.5), rgba(255,196,107,0));
  filter: blur(16px);
  opacity: .8;
  animation: spin 14s linear infinite;
}
.core-label {
  position: absolute; left: 50%; top: 50%;
  /* sits above the figure, in the one part of the ring the bubbles never occupy */
  transform: translate(-50%, calc(-1 * var(--core-r, 84px) - 100%));
  z-index: 6;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-2);
  padding: 5px 11px; border-radius: 100px;
  border: 1px solid var(--line); background: rgba(7,8,12,.85);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

/* thought bubbles */
.thought {
  position: absolute;
  z-index: 5;
  width: clamp(166px, 36%, 212px);
  padding: 12px 14px 13px;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(24,28,38,.94), rgba(11,14,20,.94));
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -26px rgba(0,0,0,.96), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(16px) scale(.9);
  transition: opacity .68s var(--ease), transform .78s var(--ease);
  will-change: transform, opacity;
}
.thought.is-in { opacity: 1; transform: translateY(0) scale(1); }
.thought.float { animation: bob 7s var(--ease-io) infinite alternate; }
@keyframes bob { to { translate: 0 -11px; } }

/* thought-tail dots pointing back to center */
.thought .tail { position: absolute; display: flex; gap: 4px; align-items: center; }
.thought .tail i { display: block; border-radius: 50%; background: rgba(255,255,255,.24); }
.thought .tail i:nth-child(1) { width: 7px; height: 7px; }
.thought .tail i:nth-child(2) { width: 5px; height: 5px; opacity: .72; }
.thought .tail i:nth-child(3) { width: 3px; height: 3px; opacity: .45; }

.th-top { display: flex; align-items: center; gap: 10px; }
.th-face {
  width: 34px; height: 34px; flex: none; border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: #12151d;
}
.th-face svg { width: 100%; height: 100%; }
.th-name { font-size: 13px; font-weight: 570; letter-spacing: -0.02em; line-height: 1.25; }
.th-role { font-size: 10.5px; color: var(--muted-2); letter-spacing: .02em; }
.th-body { margin-top: 9px; font-size: 12.2px; line-height: 1.45; color: var(--ivory-dim); }
.th-out {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9.6px; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 100px;
  color: var(--teal); background: rgba(87,217,196,.1); border: 1px solid rgba(87,217,196,.22);
}
.th-out.warm { color: var(--gold); background: rgba(255,196,107,.1); border-color: rgba(255,196,107,.22); }

/* slot placement */
.slot-0 { top: 0;      left: -8%; }
.slot-1 { top: 11%;    right: -6%; }
.slot-2 { bottom: 9%;  left: -10%; }
.slot-3 { bottom: -2%; right: -2%; }
.slot-4 { top: 50%; left: 50%; margin-left: -46%; margin-top: -8%; display: none; }
@media (max-width: 1360px) {
  .slot-0 { left: -4%; }  .slot-1 { right: -2%; }
  .slot-2 { left: -5%; }  .slot-3 { right: 0; }
}
@media (max-width: 1040px) {
  .slot-0 { left: 0; }  .slot-1 { right: 0; }
  .slot-2 { left: 0; }  .slot-3 { right: 0; }
}

/* ==========================================================================
   marquee strip
   ========================================================================== */
.strip {
  position: relative; z-index: 2;
  border-block: 1px solid var(--line);
  background: rgba(255,255,255,.015);
  padding: 17px 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.strip-track { display: flex; gap: 0; width: max-content; animation: slide 46s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.strip-item {
  display: flex; align-items: center; gap: 12px;
  padding-inline: 30px;
  font-size: 13.2px; color: var(--muted);
  white-space: nowrap;
}
.strip-item b { color: var(--ivory-dim); font-weight: 500; }
.strip-sep { color: var(--ember); opacity: .55; }

/* ==========================================================================
   generic section
   ========================================================================== */
section { position: relative; }
section[id] { scroll-margin-top: 92px; }

/* ---- chapters ----------------------------------------------------------
   A 17,000px page in one uninterrupted tone reads as a single undifferentiated
   scroll. Three signals mark a change of subject: an alternating surface tone,
   a chapter number, and an accent colour carried from the role families. */
section[data-accent="ember"]  { --sec-accent: var(--ember);  --sec-ring: rgba(255, 122, 69, .18); }
section[data-accent="gold"]   { --sec-accent: var(--gold);   --sec-ring: rgba(255, 196, 107, .18); }
section[data-accent="teal"]   { --sec-accent: var(--teal);   --sec-ring: rgba(87, 217, 196, .18); }
section[data-accent="violet"] { --sec-accent: var(--violet); --sec-ring: rgba(155, 140, 255, .2); }
section[data-accent="rose"]   { --sec-accent: var(--rose);   --sec-ring: rgba(255, 143, 168, .18); }

.sec-alt { background: var(--surface-alt); --surface: var(--surface-alt); }
/* a hairline at the seam so the tone change reads as deliberate */
.sec-alt::before,
.sec-alt::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: 1;
  background: linear-gradient(to right, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent);
}
.sec-alt::before { top: 0; }
.sec-alt::after  { bottom: 0; }
.sec { padding: clamp(80px, 11vw, 140px) 0; }
.sec-head { max-width: 900px; margin-bottom: clamp(44px, 5vw, 66px); }
.sec-head .eyebrow { margin-bottom: 22px; }
.sec-head .lede { margin-top: 20px; }
.hr-glow {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(to right, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent);
}

/* ==========================================================================
   contrast section: table stakes
   ========================================================================== */
.stakes-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 28px);
}
@media (max-width: 880px) { .stakes-grid { grid-template-columns: 1fr; } }

.stake-card {
  position: relative; overflow: hidden;
  padding: clamp(26px, 3.2vw, 40px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}
.stake-card.dim { background: rgba(255,255,255,.012); }
.stake-card.dim .stake-list li { color: var(--muted-2); }
.stake-card.hot {
  border-color: rgba(255,122,69,.3);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,122,69,.14), transparent 62%),
    linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.014));
  box-shadow: 0 40px 90px -50px rgba(255,122,69,.55);
}
.stake-kicker {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 16px;
}
.stake-card.hot .stake-kicker { color: var(--ember); }
.stake-title { font-size: clamp(1.4rem, 2.2vw, 1.95rem); letter-spacing: -0.04em; }
.stake-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 13px; }
.stake-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14.6px; line-height: 1.5; color: var(--ivory-dim);
  padding-bottom: 13px; border-bottom: 1px solid var(--line);
}
.stake-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.stake-list .ic { flex: none; margin-top: 2px; opacity: .9; }

/* ==========================================================================
   team roster
   ========================================================================== */
.roster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
@media (max-width: 1100px) { .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .roster { grid-template-columns: minmax(0, 1fr); } }
.member {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(172deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  padding: 20px 20px 22px;
  transition: transform .5s var(--ease), border-color .4s, background .4s, box-shadow .5s var(--ease);
}
.member::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(130% 80% at 50% 0%, rgba(255,122,69,.15), transparent 60%);
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.member:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 34px 70px -40px rgba(0,0,0,.95);
}
.member:hover::before { opacity: 1; }
.member-face {
  width: 64px; height: 64px; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: #11141c;
  margin-bottom: 17px;
  transition: transform .55s var(--ease);
}
.member:hover .member-face { transform: scale(1.05) rotate(-2deg); }
.member-name { font-size: 16.5px; font-weight: 570; letter-spacing: -0.028em; }
.member-role {
  font-family: var(--font-mono); font-size: 9.6px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); margin-top: 6px;
}
.member.fam-money .member-role { color: var(--gold); }
.member.fam-risk  .member-role { color: var(--violet); }
.member.fam-run   .member-role { color: var(--teal); }
.member.fam-grow  .member-role { color: var(--rose); }
.member.op .member-role { color: var(--ember); }

/* the roster is a sample, so the last card is deliberately open-ended */
.member.open {
  grid-column: span 3;
  border-style: dashed;
  background: rgba(255, 255, 255, .012);
}
.member.open .open-in { display: flex; gap: 20px; align-items: flex-start; }
.member.open .open-in > div:last-child { flex: 1; min-width: 0; }
.member.open .member-face { flex: none; margin-bottom: 0; }
.member.open .member-bio { max-width: 74ch; }
@media (max-width: 1100px) { .member.open { grid-column: span 2; } }
@media (max-width: 820px)  { .member.open { grid-column: span 1; } }
@media (max-width: 560px)  { .member.open .open-in { flex-direction: column; gap: 14px; } }
.member.open .member-name { color: var(--ivory-dim); }
.member.open .member-role { color: var(--teal); }
.member.open .member-status { display: none; }

/* the orchestrating layer is not one of the twelve, so it does not look like one */
.member.op {
  grid-column: span 2;
  border-color: rgba(255, 122, 69, .3);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(255, 122, 69, .14), transparent 60%),
    linear-gradient(172deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  box-shadow: 0 40px 90px -54px rgba(255, 122, 69, .6);
}
.member.op .member-name { font-size: 20px; }
.member.op .member-bio { font-size: 14px; max-width: 46ch; }
@media (max-width: 560px) { .member.op { grid-column: span 1; } }
.member-bio { font-size: 13.2px; color: var(--muted); line-height: 1.52; margin-top: 12px; }
.member-skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 15px; }
.chip {
  font-family: var(--font-mono); font-size: 9.6px; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 7px;
  color: var(--muted); background: rgba(255,255,255,.045); border: 1px solid var(--line);
}
.member-status {
  position: absolute; top: 20px; right: 20px;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal);
}
.member-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); }
.member.op .member-status { color: var(--ember); }
.member.op .member-status i { background: var(--ember); box-shadow: 0 0 8px var(--ember); }

/* ==========================================================================
   full-bleed band
   ========================================================================== */
.band {
  position: relative;
  min-height: clamp(320px, 40vw, 480px);
  display: grid; place-items: center;
  overflow: hidden;
  border-block: 1px solid var(--line);
}
.band-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
}
.band::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* dark enough on the left to carry the line, light enough on the right
     that the photograph is still a photograph */
  background:
    linear-gradient(to right, rgba(7,8,12,.95) 0%, rgba(7,8,12,.84) 30%, rgba(7,8,12,.4) 62%, rgba(7,8,12,.26) 100%),
    linear-gradient(to bottom, rgba(7,8,12,.6), rgba(7,8,12,0) 26%, rgba(7,8,12,0) 74%, rgba(7,8,12,.66));
}
.band-in { position: relative; z-index: 2; width: 100%; }
.band-q {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.7rem, 3.8vw, 3.05rem); line-height: 1.16; letter-spacing: -0.024em;
  color: var(--ivory); margin: 0; max-width: 20ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.8);
}
.band-q b { font-weight: 400; display: block; }

/* ==========================================================================
   industries
   ========================================================================== */
.ind-tabs {
  display: flex; gap: 7px; flex-wrap: wrap;
  padding-bottom: 28px; margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}
.ind-tab {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 17px; border-radius: 100px;
  font-size: 13.6px; font-weight: 500; color: var(--muted);
  border: 1px solid var(--line); background: rgba(255,255,255,.02);
  transition: color .3s, background .35s var(--ease), border-color .3s, transform .35s var(--ease);
}
.ind-tab:hover { color: var(--ivory); transform: translateY(-2px); }
.ind-tab.on {
  color: #16100a; background: var(--warm-grad); border-color: transparent; font-weight: 600;
  box-shadow: 0 10px 26px -12px rgba(255,122,69,.7);
}
/* not every icon in the set carries its own width/height, and an unsized svg
   in a flex row expands to fill the tab, pin it here so any icon is safe */
.ind-tab svg { width: 15px; height: 15px; flex: none; }
.ind-tab { white-space: nowrap; }
.ind-tab .tic { opacity: .85; }
.ind-tab.on .tic { opacity: 1; }

.ind-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: start;
}
@media (max-width: 980px) { .ind-panel { grid-template-columns: 1fr; } }

.ind-fade { animation: fade-up .6s var(--ease) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.ind-head { font-size: clamp(1.6rem, 2.7vw, 2.35rem); letter-spacing: -0.042em; line-height: 1.12; }
.ind-who { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ember); margin-bottom: 14px; }
.ind-sub { color: var(--muted); font-size: 15px; line-height: 1.6; margin-top: 16px; max-width: 46ch; }

.ind-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; }
@media (max-width: 460px) { .ind-stats { grid-template-columns: 1fr 1fr; } }
.stat {
  padding: 16px 15px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: rgba(255,255,255,.025);
}
.stat-n { font-size: clamp(1.4rem, 2.3vw, 1.85rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.stat-l { font-size: 11.6px; color: var(--muted-2); margin-top: 8px; line-height: 1.35; }

.ind-does { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 11px; }
.ind-does li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14.2px; color: var(--ivory-dim); line-height: 1.5;
}
.ind-does .tick { flex: none; margin-top: 3px; }
.ind-team { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.face-stack { display: flex; }
.face-stack > span {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--surface); background: #11141c; margin-left: -10px;
}
.face-stack > span:first-child { margin-left: 0; }
.ind-team-lbl { font-size: 12.4px; color: var(--muted-2); }
.ind-team-lbl b { color: var(--ivory-dim); font-weight: 500; }

/* ---- conversation ------------------------------------------------------- */
.convo {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(175deg, rgba(20,24,33,.85), rgba(9,11,16,.92));
  box-shadow: 0 46px 100px -56px rgba(0,0,0,1);
  overflow: hidden;
}
.convo-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.022);
}
.convo-dots { display: flex; gap: 6px; }
.convo-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.convo-dots i:first-child { background: rgba(255,122,69,.6); }
.convo-title {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-2); margin-left: 6px;
}
.convo-live {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal);
}
.convo-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); animation: pulse-dot 1.8s infinite; }
@keyframes pulse-dot { 50% { opacity: .25; } }

/* A chat window of constant size. Messages land into it and it scrolls to the
   newest, so the section's height never depends on how far the conversation
   has got, which is what used to move the page under the reader. */
.convo-body {
  padding: 22px 20px 24px; display: grid; gap: 17px; align-content: start;
  height: clamp(330px, 54vh, 520px);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.convo-body::-webkit-scrollbar { width: 0; height: 0; }

.msg { display: flex; gap: 12px; opacity: 0; transform: translateY(12px); }
.msg.in { animation: msg-in .6s var(--ease) forwards; }
@keyframes msg-in { to { opacity: 1; transform: none; } }
.msg-face {
  width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); background: #11141c;
}
.msg-col { min-width: 0; flex: 1; }
.msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.msg-who { font-size: 12.8px; font-weight: 570; letter-spacing: -0.018em; }
.msg-role { font-family: var(--font-mono); font-size: 9.4px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.msg-bubble {
  font-size: 14px; line-height: 1.56; color: var(--ivory-dim);
  padding: 12px 15px; border-radius: 4px 15px 15px 15px;
  background: rgba(255,255,255,.042); border: 1px solid var(--line);
}
.msg.you .msg-bubble {
  background: linear-gradient(140deg, rgba(255,122,69,.16), rgba(255,196,107,.07));
  border-color: rgba(255,122,69,.26);
  color: var(--ivory);
}
.msg.you .msg-who { color: var(--gold); }
.msg.is-typing .msg-bubble { padding: 10px 15px; }
.msg-bubble em { color: var(--ivory); font-style: normal; font-weight: 500; }

.msg-work {
  margin-top: 9px; display: grid; gap: 6px;
  padding: 11px 13px; border-radius: 12px;
  background: rgba(87,217,196,.045); border: 1px dashed rgba(87,217,196,.22);
}
.work-row {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.4px; letter-spacing: .02em; color: var(--muted);
}
.work-row b { color: var(--teal); font-weight: 500; }

.convo-outcome {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  border-top: 1px solid var(--line);
  background: linear-gradient(to right, rgba(87,217,196,.07), rgba(155,140,255,.05));
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.convo-outcome.shown { opacity: 1; transform: none; }
.outcome-lbl {
  font-family: var(--font-mono); font-size: 9.6px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2);
}
.outcome-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.4px; font-weight: 500;
  padding: 7px 13px; border-radius: 100px;
  color: var(--ivory); background: rgba(255,255,255,.055); border: 1px solid var(--line-2);
}
.outcome-chip svg { flex: none; }

/* typing indicator */
.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); animation: type 1.3s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes type { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }


/* ==========================================================================
   skill combinations
   ========================================================================== */
.combo { display: grid; gap: clamp(20px, 2.6vw, 34px); }
.combo-fade { animation: fade-up .6s var(--ease) both; }

.combo-ask {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 20px 22px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,196,107,.2);
  background: linear-gradient(120deg, rgba(255,196,107,.09), rgba(255,122,69,.045));
}
.combo-ask .ask-face {
  width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); background: #11141c;
}
.ask-lbl {
  font-family: var(--font-mono); font-size: 9.6px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 7px;
}
.ask-txt { font-size: clamp(1.02rem, 1.5vw, 1.24rem); line-height: 1.45; color: var(--ivory); letter-spacing: -0.022em; }
.ask-by { font-size: 12.2px; color: var(--muted-2); margin-top: 9px; }

/* the flow: skills on the left, what lands on the right */
.combo-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}
@media (max-width: 1000px) { .combo-flow { grid-template-columns: 1fr; } }

.flow-col { display: flex; flex-direction: column; gap: 10px; }
/* the deliverables column is shorter than the skills column, centre it so the
   two sides read as converging on the node rather than hanging from the top */
.flow-col.out { justify-content: center; }
@media (max-width: 1000px) { .flow-col.out { justify-content: flex-start; } }
.flow-head {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 9.8px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 4px;
}
.flow-head .n {
  padding: 2px 7px; border-radius: 100px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--ivory-dim);
}

.skill-row {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 14px 15px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  opacity: 0; transform: translateX(-14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .35s;
}
.skill-row.lit { opacity: 1; transform: none; }
.skill-row:hover { border-color: var(--line-2); }
.skill-face {
  width: 38px; height: 38px; flex: none; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.13); background: #11141c;
}
.skill-name { font-size: 13.4px; font-weight: 570; letter-spacing: -0.022em; }
.skill-who { font-size: 10.6px; color: var(--ember); margin-top: 2px; font-weight: 500; }
.skill-did { font-size: 12.8px; color: var(--muted); line-height: 1.48; margin-top: 8px; }

/* the connector between the two columns */
.flow-link { position: relative; }
@media (max-width: 1000px) { .flow-link { height: 54px; } }
.flow-link svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-link .fl-path { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1.2; }
.flow-link .fl-pulse {
  fill: none; stroke: url(#flowGrad); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 22 300;
  animation: flow 3.2s linear infinite;
}
.flow-link .fl-pulse.d2 { animation-delay: .8s; }
.flow-link .fl-pulse.d3 { animation-delay: 1.6s; }
.flow-link .fl-pulse.d4 { animation-delay: 2.4s; }
@keyframes flow { from { stroke-dashoffset: 322; } to { stroke-dashoffset: 0; } }
.flow-node {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, #1d2331, #0b0e15);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 6px rgba(7,8,12,.9), 0 0 30px -6px rgba(255,122,69,.6);
  z-index: 2;
}
.flow-node svg { position: static; width: 15px; height: 15px; }

.make-row {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(87,217,196,.16);
  background: rgba(87,217,196,.045);
  font-size: 13.2px; color: var(--ivory-dim); line-height: 1.42;
  opacity: 0; transform: translateX(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.make-row.lit { opacity: 1; transform: none; }
.make-row .tick { flex: none; margin-top: 2px; }

.yours-row {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 18px;
  border-radius: var(--r-md);
  border: 1px dashed rgba(255, 196, 107, .28);
  background: rgba(255, 196, 107, .05);
}
.yours-row .yr-lbl {
  font-family: var(--font-mono); font-size: 9.6px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); flex: none; padding-top: 3px;
}
.yours-row p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ivory-dim); }

/* ---- the artefact ------------------------------------------------------- *
 * Claiming "it drafts your posts" is cheap. These two blocks show the draft
 * and this morning's brief, so the claim is checkable on the page itself.    */
.proof {
  margin: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--raise), rgba(255, 255, 255, .012));
  overflow: hidden;
}
.proof-head {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .022);
}
.proof-head svg { width: 15px; height: 15px; flex: none; color: var(--sec-accent); }
.proof-ttl {
  font-family: var(--font-mono); font-size: 9.6px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ivory-dim);
}
.proof-when {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--muted-2); text-align: right;
}

/* the drafted post, copy on the left, what it was built from and the
   approve/edit/skip choice on the right, so it reads like the queue it is */
.sample-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 900px) {
  .sample-grid { grid-template-columns: 1fr; }
  .sample-side {
    flex-direction: column; gap: 14px;
    border-left: 0; border-top: 1px dashed var(--line);
  }
  .sample-acts { flex-direction: row; flex-wrap: wrap; }
  .sample-acts .sm-act { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .proof-head { flex-wrap: wrap; row-gap: 3px; }
  .proof-when { margin-left: 0; width: 100%; text-align: left; padding-left: 24px; }
}
.sample-body { padding: 20px 26px 22px; }
.sample-body p {
  margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--ivory-dim);
  max-width: 62ch;
}
.sample-body em { color: var(--ivory); font-style: italic; }
.sample-side {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: 20px 22px 22px;
  border-left: 1px solid var(--line);
  background: rgba(255, 255, 255, .016);
}
.sample-src {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  font-size: 12.4px; line-height: 1.5; color: var(--muted);
}
.sample-src svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--teal); }
.sample-acts { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.sample-acts .sm-act { justify-content: center; }
.sm-act {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 12.6px; color: var(--muted);
}
.sm-act svg { width: 12px; height: 12px; }
.sm-act.go {
  border-color: rgba(87, 217, 196, .4);
  background: rgba(87, 217, 196, .1);
  color: var(--teal);
}

/* the board, a table's job, not a chart's: nine items whose meaning is state
   and ownership. State is an icon plus a word, the owner is a name, so colour
   is never the only channel carrying it. */
.how-rule {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 0 -6px;
  font-family: var(--font-mono); font-size: 9.6px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2);
}
.how-rule::before, .how-rule::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.how-rule span { flex: none; }

.bd-tally {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.bd-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 10px; border-radius: 999px;
  border: 1px solid var(--tone-soft);
  background: var(--tone-bg);
  font-size: 12.4px; color: var(--ivory-dim);
}
.bd-pill svg { width: 13px; height: 13px; color: var(--tone); }
.bd-pill b { color: var(--tone); font-weight: 650; }

.bd-group { padding: 4px 0 2px; }
.bd-gname {
  margin: 0; padding: 14px 20px 8px;
  font-family: var(--font-mono); font-size: 9.6px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2); font-weight: 400;
}
.bd-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) 196px;
  gap: 4px 18px; align-items: start;
  padding: 13px 20px;
  border-top: 1px solid rgba(255, 255, 255, .045);
}
/* the owner column is fixed so every pill shares a left edge, ragged ones are
   unreadable down a list, which is the whole job of this thing */
.bd-main { max-width: 62ch; }
.bd-row.k-act { background: rgba(255, 122, 69, .06); box-shadow: inset 2px 0 0 var(--ember); }

.bd-state {
  display: inline-flex; align-items: center; gap: 6px;
  padding-top: 2px; color: var(--tone);
}
.bd-state svg { width: 13px; height: 13px; flex: none; }
.bd-word {
  font-family: var(--font-mono); font-size: 9.4px; letter-spacing: .12em;
  text-transform: uppercase;
}

.bd-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 11px; }
.bd-item { font-size: 14.2px; font-weight: 600; color: var(--ivory); }
.bd-stage {
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 11.4px; color: var(--muted);
}
.bd-meta { margin: 4px 0 0; font-size: 12.6px; line-height: 1.45; color: var(--muted); }
.bd-next {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 7px 0 0; font-size: 13.4px; line-height: 1.45; color: var(--ivory-dim);
}
.bd-next svg { width: 13px; height: 13px; flex: none; margin-top: 3px; color: var(--muted-2); }

.bd-who {
  display: flex; flex-direction: column; gap: 2px;
  justify-self: stretch;
  padding: 7px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--tone-soft); background: var(--tone-bg);
  font-size: 12.6px; color: var(--ivory);
}
.bd-wlbl {
  font-family: var(--font-mono); font-size: 8.8px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tone);
}
.bd-foot {
  margin: 0; padding: 14px 20px 17px;
  border-top: 1px solid var(--line);
  font-size: 12.4px; color: var(--muted-2);
}

/* whose move it is, the pill always spells out the name, the colour only ranks it */
.w-you    { --tone: var(--ember); --tone-soft: rgba(255,122,69,.34); --tone-bg: rgba(255,122,69,.09); }
.w-client { --tone: var(--gold);  --tone-soft: rgba(255,196,107,.3); --tone-bg: rgba(255,196,107,.07); }
.w-team   { --tone: var(--teal);  --tone-soft: rgba(87,217,196,.3);  --tone-bg: rgba(87,217,196,.07); }
.w-third  { --tone: var(--muted); --tone-soft: rgba(255,255,255,.14); --tone-bg: rgba(255,255,255,.03); }

@media (max-width: 720px) {
  .bd-row { grid-template-columns: 1fr; gap: 8px; }
  .bd-state { padding-top: 0; }
  .bd-who { justify-self: start; }
  .bd-main { max-width: none; }
}

/* the 7am brief */
.brief-rows { padding: 6px 0; }
.brief-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 4px 12px;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
}
.brief-row:last-child { border-bottom: 0; }
.br-dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 5px; grid-row: 1;
  background: var(--tone);
  box-shadow: 0 0 0 4px var(--tone-soft);
}
.br-head { display: flex; align-items: baseline; gap: 10px; grid-row: 1; }
.br-t {
  font-family: var(--font-mono); font-size: 9.6px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--tone);
}
.br-n { font-size: 12.6px; color: var(--muted-2); }
.br-d {
  grid-column: 2; margin: 0; max-width: 84ch;
  font-size: 13.6px; line-height: 1.55; color: var(--ivory-dim);
}
.br-d b { color: var(--ivory); font-weight: 600; }
.k-ok   { --tone: var(--teal);  --tone-soft: rgba(87, 217, 196, .16);  --tone-bg: rgba(87, 217, 196, .06); }
.k-slip { --tone: var(--gold);  --tone-soft: rgba(255, 196, 107, .16); --tone-bg: rgba(255, 196, 107, .06); }
.k-wait { --tone: var(--gold);  --tone-soft: rgba(255, 196, 107, .16); --tone-bg: rgba(255, 196, 107, .06); }
.k-act  { --tone: var(--ember); --tone-soft: rgba(255, 122, 69, .16);  --tone-bg: rgba(255, 122, 69, .07); }
.k-act  { background: rgba(255, 122, 69, .07); box-shadow: inset 2px 0 0 var(--ember); }

.combo-out {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(to right, rgba(87,217,196,.08), rgba(155,140,255,.055));
}

/* ---- catalogue ---------------------------------------------------------- */
.catalogue {
  margin-top: clamp(34px, 4vw, 54px);
  padding-top: clamp(30px, 3.4vw, 44px);
  border-top: 1px solid var(--line);
}
.cat-head { margin-bottom: 26px; }
.cat-title { font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -0.038em; }
.cat-sub { font-size: 14px; color: var(--muted); margin: 9px 0 0; }
.cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.cat-group {
  padding: 16px 17px 17px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  transition: border-color .35s, background .35s, transform .45s var(--ease);
}
.cat-group:hover { border-color: var(--line-2); background: rgba(255,255,255,.04); transform: translateY(-3px); }
.cat-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cat-face {
  width: 28px; height: 28px; flex: none; border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); background: #11141c;
}
.cat-label { font-size: 13.2px; font-weight: 560; letter-spacing: -0.022em; }
.cat-items { display: flex; flex-wrap: wrap; gap: 5px; }

/* ==========================================================================
   how it works, the run
   ========================================================================== */
.run { max-width: 940px; margin-inline: auto; }

.run-ask {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,196,107,.22);
  background: linear-gradient(120deg, rgba(255,196,107,.1), rgba(255,122,69,.05));
  box-shadow: 0 34px 80px -50px rgba(255,122,69,.7);
}
.run-ask .ask-face { width: 44px; height: 44px; }
.run-ask .ask-txt { font-size: clamp(1.08rem, 1.7vw, 1.42rem); }

/* ---- the routing step, made visible ---- */
.crew {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); flex-wrap: wrap;
  margin: 18px 0 6px;
  padding: 20px clamp(18px, 2.4vw, 26px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(120deg, rgba(255, 122, 69, .07), rgba(255, 255, 255, .015));
}
.crew-lead { display: flex; align-items: center; gap: 12px; flex: none; }
.crew-lead .cl-mark { width: 40px; height: 40px; border-radius: 13px; overflow: hidden; flex: none; }
.crew-h { font-size: 14.2px; font-weight: 560; letter-spacing: -0.024em; line-height: 1.3; max-width: 22ch; }
.crew-arrow { flex: none; color: var(--ember); opacity: .7; }
.crew-roles { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 240px; }
.crew-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border-radius: 100px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .035);
  font-size: 12.4px; font-weight: 500; letter-spacing: -0.012em;
}
.crew-chip .cc-mark { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex: none; }
.crew-note { flex-basis: 100%; font-size: 12.6px; color: var(--muted-2); margin: 2px 0 0; }

/* ---- what it asked you, and what you picked ---- */
.ask-q { margin-top: 14px; }
.ask-q .aq-lbl {
  font-family: var(--font-mono); font-size: 9.4px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
.ask-q .aq-q { font-size: 15.4px; font-weight: 550; letter-spacing: -0.026em; margin: 8px 0 12px; }
.aq-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.aq-opt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 100px;
  font-size: 13px; color: var(--muted-2);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
}
.aq-opt.picked {
  color: var(--ivory); border-color: rgba(255, 196, 107, .4);
  background: rgba(255, 196, 107, .1); font-weight: 550;
}
.aq-opt.picked svg { color: var(--gold); flex: none; }

/* ---- what it checked before anyone saw it ---- */
.checks {
  margin-top: 15px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  border: 1px solid rgba(87, 217, 196, .18); border-radius: var(--r-md);
  overflow: hidden; background: rgba(87, 217, 196, .18);
}
@media (max-width: 720px) { .checks { grid-template-columns: 1fr; } }
.check {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; background: #0b0e14;
  font-size: 12.7px; line-height: 1.45; color: var(--muted);
}
.check svg { flex: none; margin-top: 2px; }
.check b {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal); font-weight: 500; display: block; margin-bottom: 3px;
}

/* ---- and it keeps going ---- */
.recs {
  margin-top: clamp(24px, 3vw, 36px);
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(155, 140, 255, .26);
  background:
    radial-gradient(100% 90% at 0% 0%, rgba(155, 140, 255, .12), transparent 60%),
    linear-gradient(170deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
}
.recs-when {
  font-family: var(--font-mono); font-size: 9.8px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--violet);
}
.recs-h { font-size: clamp(1.3rem, 2.1vw, 1.75rem); letter-spacing: -0.038em; margin: 12px 0 0; }
.recs-lede { font-size: 14px; color: var(--muted); margin: 10px 0 0; max-width: 58ch; }
.recs-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.rec {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: start;
  padding: 16px 18px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .028);
  transition: border-color .35s, background .35s;
}
.rec:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .045); }
@media (max-width: 760px) { .rec { grid-template-columns: 34px 1fr; } }
.rec-mark { width: 34px; height: 34px; border-radius: 11px; overflow: hidden; }
.rec-t { font-size: 14.6px; font-weight: 560; letter-spacing: -0.024em; line-height: 1.35; }
.rec-why { font-size: 13.2px; color: var(--muted); line-height: 1.5; margin: 7px 0 0; }
.rec-exp {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font-family: var(--font-mono); font-size: 9.8px; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px;
  color: var(--teal); background: rgba(87, 217, 196, .09); border: 1px solid rgba(87, 217, 196, .2);
}
.rec-act {
  font-family: var(--font-mono); font-size: 9.6px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--violet); white-space: nowrap; padding-top: 4px;
}
@media (max-width: 760px) { .rec-act { grid-column: 2; padding-top: 0; } }
.recs-foot { font-size: 12.8px; color: var(--muted-2); margin: 18px 0 0; }

/* the timeline. NB: prefixed run-/step- because .stage is the hero constellation */
.run-line { list-style: none; margin: 0; padding: 0 0 0 46px; position: relative; }
@media (max-width: 560px) { .run-line { padding-left: 32px; } }
.run-line::before {
  content: ""; position: absolute; left: 15px; top: 24px; bottom: 30px; width: 2px;
  background: var(--line);
  border-radius: 2px;
}
@media (max-width: 560px) { .run-line::before { left: 9px; } }
.run-line::after {
  content: ""; position: absolute; left: 15px; top: 24px; width: 2px;
  height: var(--run-fill, 0px);
  background: linear-gradient(to bottom, var(--gold), var(--ember) 60%, var(--rose));
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(255,122,69,.55);
}
@media (max-width: 560px) { .run-line::after { left: 9px; } }

.run-step { position: relative; padding: 22px 0 24px; }
.stage + .run-step { border-top: 1px solid var(--line); }
.run-step::before {
  content: ""; position: absolute; left: -38px; top: 30px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface);
  background-image: linear-gradient(rgba(255, 255, 255, .055), rgba(255, 255, 255, .055));
  border: 2px solid var(--line-2);
  transition: background .4s, border-color .4s, box-shadow .4s;
}
@media (max-width: 560px) { .run-step::before { left: -29px; width: 10px; height: 10px; } }
.run-step.seen::before { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 0 4px rgba(255,122,69,.18); }
.run-step.you-step.seen::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,196,107,.2); }

.step-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 11px; }
.step-num { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--muted-2); }
.step-t { font-size: clamp(1.05rem, 1.6vw, 1.26rem); letter-spacing: -0.032em; font-weight: 570; }
.step-p { font-size: 14.4px; line-height: 1.58; color: var(--muted); margin: 0; max-width: 74ch; }
.step-p em { color: var(--ivory-dim); font-style: normal; font-weight: 500; }

.step-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.step-faces { display: flex; }
.step-faces > span {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--surface); background: #11141c; margin-left: -9px;
}
.step-faces > span:first-child { margin-left: 0; }
.owner {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 9.6px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 100px;
  color: var(--teal); background: rgba(87,217,196,.09); border: 1px solid rgba(87,217,196,.2);
}
.owner.ongoing { color: var(--violet); background: rgba(155,140,255,.1); border-color: rgba(155,140,255,.24); }
.owner.needs-you {
  color: #1c1207; background: var(--warm-grad); border-color: transparent; font-weight: 600;
}
.step-cost { font-family: var(--font-mono); font-size: 10.4px; color: var(--muted-2); }

/* you-stages get lifted out of the flow visually */
.run-step.you-step .step-inner {
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,196,107,.26);
  background: linear-gradient(140deg, rgba(255,196,107,.08), rgba(255,122,69,.03));
}
.run-step.you-step .step-p { color: var(--ivory-dim); }

.run-sum {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 30px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(170deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
@media (max-width: 720px) { .run-sum { grid-template-columns: 1fr 1fr; } }
.sum-cell { padding: 22px 20px; border-right: 1px solid var(--line); }
.sum-cell:last-child { border-right: 0; }
@media (max-width: 720px) {
  .sum-cell:nth-child(2n) { border-right: 0; }
  .sum-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.sum-n { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.sum-l { font-size: 12.4px; color: var(--muted-2); margin-top: 9px; line-height: 1.4; }

/* ---- what it used to be -------------------------------------------------- */
.before {
  max-width: 940px; margin: clamp(34px, 4vw, 52px) auto 0;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-lg);
  border: 1px dashed var(--line-2);
  background: rgba(255,255,255,.012);
}
.before-head { margin-bottom: 20px; }
.before-title { font-size: clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing: -0.035em; color: var(--muted); }
.before-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px;
}
@media (max-width: 760px) { .before-list { grid-template-columns: 1fr; } }
.before-list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.8px; line-height: 1.45; color: var(--muted-2);
}
.before-list li s { text-decoration-color: rgba(255,122,69,.55); text-decoration-thickness: 1.5px; }
.before-list .x { flex: none; margin-top: 3px; opacity: .8; }

/* ==========================================================================
   outcomes, the ledger, then the aggregate band
   ========================================================================== */
.ledger {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 22px);
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
@media (max-width: 900px) { .ledger { grid-template-columns: 1fr; } }

.led {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(168deg, rgba(255,255,255,.042), rgba(255,255,255,.01));
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.led::before {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 20% 0%, rgba(255,196,107,.13), transparent 62%);
  transition: opacity .5s var(--ease);
}
.led:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 36px 76px -44px rgba(0,0,0,.95); }
.led:hover::before { opacity: 1; }

.led-who {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--muted-2);
}
.led-ic {
  width: 32px; height: 32px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--ember);
  background: rgba(255,122,69,.09); border: 1px solid rgba(255,122,69,.2);
}
.led-ic svg { width: 15px; height: 15px; }

/* the conversion: hours in, something real out */
.led-hrs { display: flex; align-items: baseline; gap: 10px; }
.led-n {
  font-size: clamp(2.1rem, 3.4vw, 2.85rem); font-weight: 600;
  letter-spacing: -0.055em; line-height: 1;
}
.led-per { font-size: 12.8px; color: var(--muted-2); }

.led-became {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 14px;
  font-family: var(--font-mono); font-size: 9.6px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2);
}
.led-became::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, var(--line-2), transparent);
}
.led-became svg { flex: none; color: var(--ember); }

.led-did {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.18rem, 1.9vw, 1.52rem); line-height: 1.28; letter-spacing: -0.018em;
  color: var(--ivory);
  margin: 0 0 auto;
}
/* a general truth about the trade, never a measured result from a person
   who does not exist */
.led-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 20px 0 0; padding-top: 17px;
  border-top: 1px solid var(--line);
  font-size: 13.2px; line-height: 1.46; color: var(--muted);
}
.led-note svg { flex: none; margin-top: 3px; color: var(--teal); opacity: .8; }

/* the reader's own answer, which is the one that counts */
.yours {
  position: relative; overflow: hidden;
  text-align: center;
  padding: clamp(44px, 6vw, 82px) clamp(22px, 4vw, 48px);
  border-radius: var(--r-lg);
  border: 1px dashed var(--line-2);
  /* the scene is atmosphere behind the line, not a picture competing with it */
  background:
    radial-gradient(110% 130% at 50% 0%, rgba(255,196,107,.09), transparent 62%),
    radial-gradient(78% 115% at 50% 48%, rgba(7,8,12,.965) 0%, rgba(7,8,12,.9) 52%, rgba(7,8,12,.76) 100%),
    url("../img/scenes/outdoor-gathering.jpg") center 45% / cover no-repeat;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.yours-lbl {
  font-family: var(--font-mono); font-size: 9.6px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold);
}
.yours-line {
  font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.16;
  color: var(--ivory); margin: 16px 0 0;
}
.caret {
  display: inline-block; width: 3px; height: .82em; margin-left: .14em;
  vertical-align: -.06em; border-radius: 2px;
  background: var(--ember);
  animation: blink 1.15s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.yours-sub { font-size: 14px; color: var(--ivory-dim); margin: 16px 0 0; }

.metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(170deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
}
@media (max-width: 860px) { .metrics { grid-template-columns: 1fr; } }
.metric {
  padding: clamp(20px, 2.2vw, 28px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.metric:last-child { border-right: 0; }
@media (min-width: 861px) { .metric { border-bottom: 0; } }
@media (max-width: 860px) { .metric { border-right: 0; } .metric:last-child { border-bottom: 0; } }

.metric-n {
  font-size: clamp(1.7rem, 2.8vw, 2.25rem); font-weight: 600; letter-spacing: -0.055em; line-height: 1;
}
.metric-l { font-size: 12.8px; color: var(--muted); margin-top: 12px; line-height: 1.45; max-width: 22ch; }

/* ==========================================================================
   how it works
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); counter-reset: s; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(172deg, rgba(255,255,255,.038), rgba(255,255,255,.01));
  overflow: hidden;
}
.step-n {
  font-family: var(--font-serif); font-size: 3.6rem; line-height: 1;
  background: var(--warm-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .92;
}
.step h3 { font-size: 1.28rem; letter-spacing: -0.035em; margin-top: 16px; }
.step p { font-size: 14.2px; color: var(--muted); line-height: 1.58; margin: 12px 0 0; }
.step-line {
  position: absolute; right: -1px; top: 24%; bottom: 24%; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line-2), transparent);
}

/* ==========================================================================
   straight answers
   ========================================================================== */
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 22px); }
@media (max-width: 900px) { .qa-grid { grid-template-columns: 1fr; } }

.qa {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.8vw, 34px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  transition: transform .5s var(--ease), border-color .4s;
}
.qa:hover { transform: translateY(-4px); border-color: var(--line-2); }
.qa.hard {
  border-color: rgba(87,217,196,.26);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(87,217,196,.1), transparent 60%),
    linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
}
.qa-q {
  font-size: clamp(1.14rem, 1.8vw, 1.42rem); letter-spacing: -0.035em;
  line-height: 1.22; font-weight: 570; margin: 0;
}
.qa-a { font-size: 14.4px; line-height: 1.6; color: var(--muted); margin: 16px 0 auto; }
.qa-a em { color: var(--ivory-dim); font-style: normal; font-weight: 500; }
.qa-by { display: flex; align-items: center; gap: 11px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.qa-face {
  width: 34px; height: 34px; flex: none; border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); background: #11141c;
}
.qa-name { font-size: 12.8px; font-weight: 550; letter-spacing: -0.02em; }
.qa-role { font-size: 11px; color: var(--muted-2); margin-top: 1px; }

/* ==========================================================================
   who this is for
   ========================================================================== */
.aud {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.3vw, 16px);
}
@media (max-width: 1000px) { .aud { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .aud { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aud-card {
  padding: 20px 18px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  transition: transform .45s var(--ease), border-color .35s;
}
.aud-card:hover { transform: translateY(-3px); border-color: var(--line-2); }
.aud-ic {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 11px; margin-bottom: 15px;
  color: var(--sec-accent);
  background: rgba(255, 255, 255, .05);
}
.aud-ic svg { width: 16px; height: 16px; }
.aud-who { font-size: 14.6px; font-weight: 560; letter-spacing: -0.024em; }
.aud-size { font-size: 12.4px; color: var(--muted-2); margin-top: 5px; }
.aud-close {
  grid-column: 1 / -1;
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.3;
  color: var(--ivory);
}

/* ---- billing period ---- */
.bill {
  display: inline-flex; gap: 4px; margin-top: 28px; padding: 4px;
  border-radius: 100px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025);
}
.bill-opt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 100px;
  font-size: 13.6px; font-weight: 500; color: var(--muted);
  transition: color .25s, background .3s var(--ease);
}
.bill-opt:hover { color: var(--ivory); }
.bill-opt.on { color: #17100a; background: var(--warm-grad); font-weight: 600; }
.bill-save {
  font-family: var(--font-mono); font-size: 9.4px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 100px;
  color: var(--teal); background: rgba(87, 217, 196, .12); border: 1px solid rgba(87, 217, 196, .24);
}
.bill-opt.on .bill-save { color: #17100a; background: rgba(0, 0, 0, .16); border-color: transparent; }

.plans[data-bill="mo"] .bill-yr, .plans[data-bill="yr"] .bill-mo { display: none; }
.plan-bill {
  font-family: var(--font-mono); font-size: 10.4px; letter-spacing: .04em;
  color: var(--muted-2); margin-top: 6px;
}
.bill-note {
  max-width: 62ch; margin: clamp(20px, 2.4vw, 28px) auto 0;
  font-size: 13.4px; line-height: 1.58; color: var(--muted-2); text-align: center;
}

/* ==========================================================================
   pricing
   ========================================================================== */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 18px); align-items: stretch; }
@media (max-width: 1180px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.plan-fit {
  font-size: 13.4px; line-height: 1.5; color: var(--muted);
  margin: 0 0 14px; padding: 10px 12px;
  border-left: 2px solid var(--sec-accent, var(--gold)); border-radius: 0 6px 6px 0;
  background: rgba(255,255,255,.03);
}
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(22px, 2.1vw, 30px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(172deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  transition: transform .5s var(--ease), border-color .4s;
}
.plan:hover { transform: translateY(-4px); }
.plan.featured {
  border-color: rgba(255,122,69,.34);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,122,69,.15), transparent 58%),
    linear-gradient(172deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  box-shadow: 0 50px 110px -58px rgba(255,122,69,.6);
}
.plan-flag {
  position: absolute; top: -1px; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 9.4px; letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 100px;
  color: #17100a; background: var(--warm-grad); font-weight: 600;
  white-space: nowrap;
}
/* ---- every plan has every skill ---------------------------------------- *
 * The cards used to print a per-plan role count, which said the opposite of
 * what the product does. The roster is stated once here instead, whole.     */
.plan-all {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px);
  margin-bottom: clamp(26px, 3vw, 38px);
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px);
  border-radius: var(--r-lg);
  border: 1px dashed rgba(255, 196, 107, .26);
  background: linear-gradient(110deg, rgba(255, 196, 107, .06), rgba(255, 122, 69, .03));
}
.pa-marks { display: flex; flex-wrap: wrap; gap: 7px; flex: none; max-width: 280px; }
.pa-marks > span { display: inline-flex; }
.pa-marks svg, .pa-marks .rm { width: 28px; height: 28px; }
.pa-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px dashed rgba(255, 196, 107, .5);
  color: var(--gold); font-size: 15px; line-height: 1;
}
.pa-txt {
  margin: 0; font-size: 14px; line-height: 1.62; color: var(--ivory-dim); max-width: 74ch;
}
.pa-txt b { color: var(--ivory); font-weight: 600; }
@media (max-width: 860px) {
  .plan-all { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pa-marks { max-width: none; }
}

.plan-name { font-size: 1.22rem; letter-spacing: -0.035em; font-weight: 600; }
.plan-for { font-size: 12.8px; color: var(--muted-2); margin-top: 6px; }
.plan-price { display: flex; align-items: baseline; gap: 7px; margin: 24px 0 4px; }
.plan-price .amt { font-size: clamp(2.2rem, 3.4vw, 2.9rem); font-weight: 600; letter-spacing: -0.055em; line-height: 1; }
.plan-price .per { font-size: 13px; color: var(--muted-2); }
.plan-note {
  font-size: 12.4px; color: var(--muted-2);
  padding-bottom: 20px; margin-bottom: 22px;
  border-bottom: 1px solid var(--line);   /* the rule the roster row used to carry */
}
.plan-feats { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 11px; }
.plan-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.8px; color: var(--ivory-dim); line-height: 1.48; }
.plan-feats .tick { flex: none; margin-top: 3px; }
.plan .btn { justify-content: center; margin-top: auto; }

/* ==========================================================================
   cta + footer
   ========================================================================== */
.cta-wrap { position: relative; overflow: hidden; }
.cta-card {
  position: relative; z-index: 2;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(255,122,69,.2), transparent 58%),
    radial-gradient(85% 120% at 50% 45%, rgba(8,9,14,.96) 0%, rgba(8,9,14,.91) 55%, rgba(8,9,14,.8) 100%),
    url("../img/scenes/team-celebration.jpg") center 45% / cover no-repeat;
  padding: clamp(40px, 6vw, 82px) clamp(24px, 5vw, 64px);
  text-align: center;
  overflow: hidden;
  box-shadow: 0 60px 140px -70px rgba(255,122,69,.6);
}
.cta-card h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); letter-spacing: -0.05em; line-height: 1.04; }
.cta-card .lede { margin: 22px auto 0; text-align: center; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.cta-faces { display: flex; justify-content: center; margin-bottom: 30px; }
.cta-faces > span {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  border: 2px solid #0c0f16; background: #11141c; margin-left: -13px;
  transition: transform .5s var(--ease);
}
.cta-faces > span:first-child { margin-left: 0; }
.cta-card:hover .cta-faces > span { transform: translateY(-4px); }
.cta-fine { font-size: 12.4px; color: var(--muted); margin-top: 22px; }

/* the page closes on the warm tone rather than the one cool panel left over */
.footer { border-top: 1px solid var(--line); padding: 56px 0 40px; background: var(--surface-alt); --surface: var(--surface-alt); }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot-about { font-size: 13.4px; color: var(--muted-2); line-height: 1.68; margin-top: 16px; max-width: 34ch; }
/* The two Latin roots the name is built from. Lifted a shade so they read as
   the words being defined rather than as emphasis. */
.foot-about i { font-style: italic; color: var(--muted); }
.foot-col h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); font-weight: 400; }
.foot-col ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.foot-col a { font-size: 13.6px; color: var(--muted); transition: color .25s; }
.foot-col a:hover { color: var(--ivory); }
.foot-base {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 12.4px; color: var(--muted-2);
}
.foot-note {
  margin: 12px 0 0; max-width: 24ch;
  font-size: 11.8px; line-height: 1.55; color: var(--muted-2); opacity: .8;
}
.foot-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-legal a { color: var(--muted-2); text-decoration: none; }
.foot-legal a:hover { color: var(--text); }

/* ==========================================================================
   scroll reveal
   ========================================================================== */
.rise { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.rise.seen { opacity: 1; transform: none; }
.rise[data-d="1"] { transition-delay: .08s; }
.rise[data-d="2"] { transition-delay: .16s; }
.rise[data-d="3"] { transition-delay: .24s; }
.rise[data-d="4"] { transition-delay: .32s; }
.rise[data-d="5"] { transition-delay: .4s; }
.rise[data-d="6"] { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rise { opacity: 1; transform: none; }
  .thought { opacity: 1; transform: none; }
}

/* ---- small-screen overrides (kept last so they win the cascade) ---- */
@media (max-width: 620px) { .hero-proof { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* ==========================================================================
   small screens
   ========================================================================== */
@media (max-width: 760px) {
  /* a row of seven tabs wrapped to four lines and ate ~350px. One scrollable
     row reads as intentional and costs one. */
  .ind-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    padding-bottom: 20px;
    mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent);
  }
  .ind-tabs::-webkit-scrollbar { display: none; }
  .ind-tab { flex: none; scroll-snap-align: start; padding: 11px 18px; }

  /* anything carrying real words gets back above the legibility floor */
  .chip { font-size: 10.6px; padding: 5px 9px; }
  .skill-who { font-size: 12px; }
  .ind-who { font-size: 11.8px; }
  .convo-title, .stake-kicker, .flow-head, .led-who { font-size: 11px; }
  .th-role, .msg-role, .member-role, .qa-role { font-size: 11px; }
  .work-row { font-size: 11.4px; }
  .check { font-size: 13px; }
  .step-num { font-size: 11.5px; }
  .step-cost { font-size: 11.6px; }

  /* the billing toggle came out at 43px, a hair under thumb size */
  .bill-opt { padding: 13px 18px; }
  .bill { width: 100%; }
  .bill-opt { flex: 1; justify-content: center; }

  /* equal-width stacked actions instead of two different widths */
  .hero-actions, .cta-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .cta-actions .btn { justify-content: center; padding: 16px 24px; }

  .eyebrow { font-size: 10.6px; letter-spacing: .12em; line-height: 1.45; }

  /* the page is long enough on a phone without desktop-scale section padding */
  .sec { padding: clamp(56px, 13vw, 84px) 0; }
  .hero { padding-top: 116px; }
  .sec-head { margin-bottom: 34px; }
}

@media (max-width: 480px) {
  /* brand + primary CTA + toggle will not fit on a 360px header. The menu
     leads with the same action, and every section carries its own. */
  .nav-cta .btn-primary { display: none; }
  .eyebrow { font-size: 10px; padding: 6px 12px 6px 10px; }
}

/* ==========================================================================
   layouts that only make sense with room
   ========================================================================== */
@media (max-width: 1000px) {
  /* The connector is a fan converging left-to-right. Squashed into a 350x54
     box it reads as a smear of horizontal lines. Vertically, a single rule
     through the node says the same thing and says it correctly. */
  /* direct child only, the node's own icon also lives inside .flow-link */
  .flow-link > svg { display: none; }
  .flow-link { height: 74px; }
  .flow-link::before {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent, var(--line-2) 18%, rgba(255,255,255,.28) 50%, var(--line-2) 82%, transparent);
  }
  .flow-node svg { transform: rotate(90deg); }
}

@media (max-width: 760px) {
  /* Four absolutely-placed cards in a 400px box overlapped by ~38px and spilled
     past the stage. On a phone the constellation becomes a stack: the owner,
     then two cards that keep rotating. */
  .stage {
    aspect-ratio: auto; min-height: 0;
    display: flex; flex-direction: column; align-items: center;
    gap: 14px; padding-top: 6px;
  }
  .stage-rings, .core-halo, .thought .tail { display: none; }
  .core { position: static; transform: none; width: 128px; }
  .core-label { position: static; transform: none; }
  .thought {
    position: static; width: 100%; max-width: 440px;
    animation: none;
  }
  .slot-2, .slot-3 { display: none; }
}

@media (max-width: 620px) {
  /* the range reads better as a list than as a grid of half-empty cards */
  .aud { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .aud-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px 15px; }
  .aud-ic { margin-bottom: 0; }
  .aud-who { font-size: 15px; }
  .aud-size { margin-top: 2px; }
}

/* footer links were 16px tall. Widened to where the touch layout begins, so
   tablets are covered too and not just phones. */
@media (max-width: 950px) {
  .foot-col ul { gap: 2px; }
  .foot-col a { display: block; padding: 11px 0; font-size: 15px; }
}

/* ==========================================================================
   legal pages (security.html, terms.html, privacy.html)
   ========================================================================== */
.legal-hero { padding: 150px 0 20px; }
.legal-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sec-accent); display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
}
.legal-title { font-size: clamp(2.1rem, 4.2vw, 3.1rem); letter-spacing: -0.03em; line-height: 1.08; max-width: 18ch; }
.legal-updated { font-size: 13px; color: var(--muted-2); margin-top: 16px; }
.legal-cross { font-size: 13.6px; color: var(--muted); margin-top: 10px; }
.legal-cross a { color: var(--teal); }
.legal-cross a:hover { color: var(--ivory); }

.legal-tldr {
  margin-top: 36px; padding: 22px 26px; border-radius: var(--r-md);
  background: var(--raise); border: 1px solid var(--line-2); max-width: 68ch;
}
.legal-tldr h2 {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sec-accent); margin: 0 0 12px;
}
.legal-tldr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.legal-tldr li { position: relative; padding-left: 20px; font-size: 14.5px; color: var(--ivory-dim); line-height: 1.55; }
.legal-tldr li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sec-accent);
}

.legal-toc { margin-top: 40px; padding: 18px 22px; border-radius: var(--r-md); border: 1px solid var(--line); max-width: 68ch; }
.legal-toc h2 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); margin: 0 0 12px;
}
.legal-toc ol { columns: 2; column-gap: 24px; margin: 0; padding: 0 0 0 18px; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }
.legal-toc li { font-size: 13.6px; margin-bottom: 8px; break-inside: avoid; }
.legal-toc a { color: var(--muted); }
.legal-toc a:hover { color: var(--ivory); }

.legal-body { padding: 20px 0 100px; }
.legal-col { max-width: 68ch; }
.legal-section { padding-top: 48px; margin-top: 48px; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.legal-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-section h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -0.02em; margin: 0 0 16px; }
.legal-section h3 { font-size: 1.02rem; letter-spacing: -0.01em; color: var(--ivory); margin: 26px 0 10px; }
.legal-section p { font-size: 15px; line-height: 1.7; color: var(--ivory-dim); margin: 0 0 16px; }
.legal-section ul, .legal-section ol { margin: 0 0 16px; padding-left: 20px; }
.legal-section li { font-size: 15px; line-height: 1.68; color: var(--ivory-dim); margin-bottom: 8px; }
.legal-section a { color: var(--teal); text-underline-offset: 3px; }
.legal-section a:hover { color: var(--ivory); }
.legal-section strong { color: var(--ivory); font-weight: 600; }

.legal-note {
  margin: 24px 0; padding: 16px 18px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: var(--raise); font-size: 13.6px; color: var(--muted); line-height: 1.6;
}

.legal-endnav { margin-top: 60px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; gap: 22px; flex-wrap: wrap; }
.legal-endnav a { font-size: 13.8px; color: var(--muted); }
.legal-endnav a:hover { color: var(--ivory); }

@media (max-width: 640px) {
  .legal-hero { padding: 128px 0 16px; }
  .legal-tldr, .legal-toc { padding: 18px; }
}

/* ==========================================================================
   contact page
   The form is the only place on the site a visitor types something, so it gets
   real focus states and real error room rather than the usual thin-input look.
   ========================================================================== */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
  gap: clamp(20px, 3vw, 44px); align-items: start;
}
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
  padding: clamp(22px, 2.6vw, 38px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(172deg, rgba(255,255,255,.04), rgba(255,255,255,.008));
}
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .cf-row { grid-template-columns: 1fr; } }

.cf-field { display: block; margin-bottom: 18px; }
.cf-label {
  display: block; margin-bottom: 7px;
  font-size: 12.6px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
.cf-opt { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--muted-2); }

.cf-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  font: inherit; font-size: 15px; color: var(--text);
  background: rgba(0,0,0,.28);
  border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.cf-input::placeholder { color: var(--muted-2); }
.cf-input:hover { border-color: rgba(255,255,255,.2); }
.cf-input:focus-visible {
  outline: none; background: rgba(0,0,0,.4);
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,196,107,.16);
}
.cf-input.bad { border-color: #d9605a; box-shadow: 0 0 0 3px rgba(217,96,90,.14); }
.cf-textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.cf-select { appearance: none; cursor: pointer; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.cf-err { display: block; min-height: 16px; margin-top: 5px; font-size: 12.8px; color: #e0837d; }

/* The honeypot. Kept out of the layout and out of the tab order, never
   display:none, because some bots skip hidden inputs and some real browsers
   skip autofill on them. */
.cf-trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.cf-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.cf-fine { margin: 0; font-size: 12.8px; color: var(--muted-2); max-width: 34ch; }
.cf-status { margin: 16px 0 0; font-size: 14px; color: var(--muted); min-height: 20px; }
.cf-status.good { color: #8fd9a8; }
.cf-status.bad { color: #e0837d; }
#cfSubmit[disabled] { opacity: .6; pointer-events: none; }

.contact-side { display: grid; gap: 18px; }
.cs-block {
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: rgba(255,255,255,.022);
}
.cs-block.cs-quiet { background: none; }
.cs-h { margin: 0 0 12px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.cs-steps { margin: 0; padding-left: 18px; display: grid; gap: 10px; font-size: 14.4px; line-height: 1.6; color: var(--muted); }
.cs-steps b { color: var(--text); font-weight: 600; }
.cs-p { margin: 0 0 10px; font-size: 14.4px; line-height: 1.65; color: var(--muted); }
.cs-p:last-child { margin-bottom: 0; }
.cs-dim { color: var(--muted-2); font-size: 13.6px; }
.cs-link { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(255,196,107,.28); }
.cs-link:hover { border-bottom-color: var(--gold); }

/* ==========================================================================
   protection page: the scroll-assembled security picture
   The diagram is pinned while the copy moves past it, and each piece fades up
   as its step becomes the one being read. Nothing here is decorative: a piece
   appearing IS the explanation of that paragraph.
   ========================================================================== */
/* A hero and the section under it each carry .sec's full vertical padding, which
   stacks to nearly 280px of nothing on a wide screen. Close the seam from both
   sides instead of leaving a void under the headline. */
.prot-hero { padding-top: clamp(96px, 12vh, 150px); padding-bottom: clamp(34px, 4vw, 56px); }
.prot-hero + .sec { padding-top: clamp(26px, 3vw, 44px); }
.prot-lede { max-width: 60ch; }
.prot-start { margin-top: 26px; }

.walk-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 70px); align-items: start;
}
@media (max-width: 1000px) { .walk-grid { grid-template-columns: 1fr; } }

.walk-stage { position: sticky; top: 96px; }
@media (max-width: 1000px) {
  .walk-stage { position: sticky; top: 64px; z-index: 3; padding: 8px 0 14px;
    background: linear-gradient(to bottom, var(--bg) 72%, transparent); }
}
.stage-inner { padding: 4px 0; }
.dgm-cap { margin: 14px 0 0; font-size: 12.6px; color: var(--muted-2); text-align: center; }
@media (max-width: 1000px) { .dgm-cap { display: none; } }

.dgm { display: grid; gap: 10px; }
.dgm-row { display: grid; gap: 10px; justify-items: center; }

/* every piece starts absent and arrives when its step does */
.dgm-piece, .room, .rooms-note {
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  width: 100%;
}
.dgm-piece.on, .room.on, .rooms-note.on { opacity: 1; transform: none; }

.pc {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  padding: 16px 18px;
}
.pc-you { display: flex; align-items: center; gap: 12px; max-width: 320px; margin: 0 auto; }
.pc-ico { width: 34px; height: 34px; flex: none; color: var(--teal, #7fd4c1); }
.pc-ico svg { width: 100%; height: 100%; }
.pc-you b { display: block; font-size: 15px; }
.pc-you i { font-style: normal; font-size: 12.8px; color: var(--muted-2); }

.dgm-link { display: flex; align-items: center; gap: 10px; justify-content: center; }
.lk-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.lk-badge {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 12.4px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
  background: rgba(0,0,0,.25);
}
.lk-badge svg { width: 14px; height: 14px; }

.pc-head { font-size: 14.6px; font-weight: 600; margin-bottom: 4px; }
.pc-head em { display: block; font-style: normal; font-size: 12.6px; font-weight: 400; color: var(--muted-2); margin-top: 3px; }
.pc-body { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.chip {
  font-size: 12.4px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px;
  background: rgba(255,255,255,.03);
}
.pc-front { border-color: rgba(120,170,220,.34); }
.pc-back  { border-color: rgba(214,120,110,.34); }

.dgm-tunnel { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 2px 0; }
.tn-arrow { width: 22px; height: 22px; color: var(--gold); }
.tn-arrow svg { width: 100%; height: 100%; }
.tn-label { font-size: 12.8px; color: var(--muted); }
.tn-label i { font-style: normal; display: block; font-size: 11.8px; color: var(--muted-2); }

.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.room {
  border: 1px dashed var(--line); border-radius: 10px; padding: 10px;
  background: rgba(255,255,255,.022);
}
.room b { display: block; font-size: 12.8px; margin-bottom: 6px; }
.room span { display: block; font-size: 11.8px; color: var(--muted-2); line-height: 1.55; }
.room-you {
  border-style: solid; border-color: rgba(143,217,168,.5);
  background: rgba(143,217,168,.07);
}
.room-you b { color: #8fd9a8; }
.rooms-note {
  margin-top: 10px; text-align: center; font-size: 12.2px; color: var(--muted-2);
  border-top: 1px solid var(--line); padding-top: 10px;
}

/* the steps */
.walk-steps { display: grid; gap: clamp(40px, 9vh, 96px); padding: clamp(20px, 6vh, 60px) 0 0; }
.step {
  opacity: .34; transition: opacity .5s var(--ease);
  border-left: 2px solid transparent; padding-left: clamp(14px, 2vw, 22px);
}
.step.active { opacity: 1; border-left-color: var(--gold); }
.step.past { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .step { opacity: 1; } }
.step-n {
  display: block; font-size: 12px; letter-spacing: .12em; color: var(--muted-2); margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.step h2 { font-size: clamp(21px, 2.4vw, 30px); line-height: 1.22; margin: 0 0 14px; }
.step p { font-size: 15.4px; line-height: 1.72; color: var(--muted); margin: 0 0 12px; max-width: 54ch; }
.step p:last-child { margin-bottom: 0; }

.never { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; max-width: 56ch; }
.never li {
  font-size: 15px; line-height: 1.68; color: var(--muted);
  border-left: 2px solid rgba(143,217,168,.45); padding-left: 14px;
}
.never b { color: var(--text); font-weight: 600; }
.step-honest { border-left-color: rgba(255,255,255,.14); }
.honest-link { margin-top: 16px; }

.walk-nav {
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  margin-top: clamp(40px, 8vh, 80px); padding-top: 26px; border-top: 1px solid var(--line);
}
.walk-nav .btn[disabled] { opacity: .38; pointer-events: none; }
.walk-nav .btn.done { opacity: .5; }
.walk-dots { display: flex; gap: 7px; }
.wd { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.17); transition: background .35s, transform .35s; }
.wd.on { background: var(--gold); transform: scale(1.18); }

/* the jargon table */
.jargon { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.jg {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 2vw, 26px);
  background: rgba(255,255,255,.022);
}
.jg-plain { font-size: 17px; font-weight: 600; }
.jg-real {
  font-size: 12.6px; letter-spacing: .03em; color: var(--gold);
  margin: 5px 0 12px; font-variant-numeric: tabular-nums;
}
.jg p { margin: 0; font-size: 14.4px; line-height: 1.68; color: var(--muted); }
.jargon-foot { margin-top: 28px; font-size: 14.4px; color: var(--muted-2); max-width: 62ch; }

/* On a phone the pinned diagram has to earn its space: it keeps the shape and
   the labels, and drops the detail chips, so the reading column still gets
   most of the screen. */
@media (max-width: 1000px) {
  .dgm { gap: 6px; transform-origin: top center; }
  .pc { padding: 10px 12px; border-radius: 12px; }
  .pc-you { max-width: none; gap: 9px; }
  .pc-ico { width: 24px; height: 24px; }
  .pc-you b { font-size: 13.4px; }
  .pc-body { display: none; }
  .pc-head { font-size: 13px; margin-bottom: 0; }
  .pc-head em { font-size: 11.4px; margin-top: 2px; }
  .rooms { gap: 5px; margin-top: 9px; }
  .room { padding: 7px; border-radius: 8px; }
  .room b { font-size: 11.2px; margin-bottom: 3px; }
  .room span { font-size: 10.4px; line-height: 1.45; }
  .room-other span { display: none; }
  .rooms-note { margin-top: 7px; padding-top: 7px; font-size: 11px; }
  .lk-badge { font-size: 10.8px; padding: 3px 9px; }
  .tn-label { font-size: 11.6px; }
  .tn-label i { display: none; }
  .tn-arrow { width: 17px; height: 17px; }
  .walk-steps { padding-top: 26px; gap: 56px; }
  .step h2 { font-size: 21px; }
  .step p, .never li { font-size: 14.8px; }
}

/* ==========================================================================
   protection page: the injection section and the fair comparison
   ========================================================================== */
.threat-intro { max-width: 68ch; margin-bottom: clamp(28px, 4vh, 48px); }
.threat-intro p { font-size: 15.6px; line-height: 1.74; color: var(--muted); margin: 0 0 16px; }
.threat-intro b { color: var(--text); }

.inject {
  margin: 22px 0; padding: 18px 20px;
  border: 1px solid rgba(214,120,110,.34); border-left-width: 3px; border-radius: 0 12px 12px 0;
  background: rgba(214,120,110,.06);
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 14px; line-height: 1.66; color: #e6b9b3;
}
.inject-tag {
  display: block; margin-bottom: 9px;
  font-family: inherit; font-size: 11.4px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(230,185,179,.7);
}

.threats { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: clamp(14px, 1.8vw, 20px); }
.threat {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: rgba(255,255,255,.022);
}
.th-bad {
  padding: 14px 18px; font-size: 14.2px; line-height: 1.5; color: #e6b9b3;
  background: rgba(214,120,110,.09); border-bottom: 1px solid rgba(214,120,110,.2);
  font-style: italic;
}
.th-good { padding: 16px 18px 18px; }
.th-good b { display: block; font-size: 15px; color: #8fd9a8; margin-bottom: 8px; }
.th-good p { margin: 0; font-size: 14.2px; line-height: 1.68; color: var(--muted); }
.threat-foot { margin-top: clamp(24px, 3vh, 36px); max-width: 68ch; font-size: 15px; line-height: 1.72; color: var(--muted); }

.vs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); align-items: start; }
@media (max-width: 860px) { .vs { grid-template-columns: 1fr; } }
.vs-col { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 2.2vw, 30px); }
.vs-them { background: rgba(255,255,255,.015); }
.vs-us { background: linear-gradient(170deg, rgba(143,217,168,.07), rgba(255,255,255,.01)); border-color: rgba(143,217,168,.3); }
.vs-col h3 { margin: 0 0 16px; font-size: 17px; }
.vs-us h3 { color: #8fd9a8; }
.vs-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.vs-col li { font-size: 14.4px; line-height: 1.66; color: var(--muted); padding-left: 20px; position: relative; }
.vs-col li b { color: var(--text); font-weight: 600; }
.vs-them li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 2px; border: 1.5px solid rgba(214,120,110,.6);
}
.vs-us li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 10px; height: 6px; border-left: 2px solid #8fd9a8; border-bottom: 2px solid #8fd9a8;
  transform: rotate(-45deg);
}
.vs-foot { margin-top: clamp(22px, 3vh, 34px); max-width: 70ch; font-size: 14.8px; line-height: 1.72; color: var(--muted-2); }

/* the "cannot happen" grid and its honest counterweight */
.cant-head { margin: clamp(40px, 7vh, 80px) 0 clamp(20px, 3vh, 34px); }
.cant-title { font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 12px; line-height: 1.2; }

.cants { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.cant {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(16px, 1.8vw, 22px);
  background: rgba(255,255,255,.02);
}
.ct-hack {
  font-size: 13.8px; line-height: 1.5; color: #e0a49d; margin-bottom: 11px;
  padding-bottom: 11px; border-bottom: 1px solid rgba(214,120,110,.18);
}
.ct-hack::before { content: "\2717"; margin-right: 8px; opacity: .75; }
.cant p { margin: 0; font-size: 14.2px; line-height: 1.68; color: var(--muted); }
.cant b { color: #8fd9a8; font-weight: 600; }

.still {
  margin-top: clamp(30px, 4vh, 50px);
  border: 1px solid rgba(255,255,255,.13); border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 32px);
  background: rgba(255,255,255,.015);
}
.still h3 { margin: 0 0 10px; font-size: 19px; }
.still > p { margin: 0 0 20px; font-size: 14.8px; line-height: 1.7; color: var(--muted); max-width: 66ch; }
.still-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
@media (max-width: 820px) { .still-grid { grid-template-columns: 1fr; } }
.st b { display: block; font-size: 15px; margin-bottom: 8px; }
.st p { margin: 0; font-size: 14.2px; line-height: 1.68; color: var(--muted); }

/* ==========================================================================
   why-different page
   ========================================================================== */
.diff-hero { padding-top: clamp(96px, 12vh, 150px); padding-bottom: clamp(34px, 4vw, 56px); }
.diff-hero + .sec { padding-top: clamp(26px, 3vw, 44px); }

.gap-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 26px); align-items: start; }
@media (max-width: 860px) { .gap-two { grid-template-columns: 1fr; } }
.gap-col { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 2.2vw, 30px); }
.gap-before { background: rgba(255,255,255,.015); }
.gap-after { background: linear-gradient(170deg, rgba(255,196,107,.08), rgba(255,255,255,.01)); border-color: rgba(255,196,107,.28); }
.gap-lbl {
  display: block; font-size: 12.2px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 16px;
}
.gap-after .gap-lbl { color: var(--gold); }
.gap-list { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.gap-list li { font-size: 14.8px; line-height: 1.6; color: var(--muted); }
.gap-note { margin: 18px 0 0; font-size: 13.6px; color: var(--muted-2); font-style: italic; }

.conns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(14px, 1.8vw, 20px); }
.conn { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 2vw, 24px); background: rgba(255,255,255,.02); }
.conn h3 { margin: 0 0 9px; font-size: 16px; }
.conn p { margin: 0; font-size: 14.2px; line-height: 1.68; color: var(--muted); }
.conns-foot { margin-top: 26px; font-size: 14.2px; line-height: 1.7; color: var(--muted-2); max-width: 66ch; }

.setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.su { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 2vw, 26px); background: rgba(255,255,255,.018); }
.su-n {
  display: block; font-size: 11.6px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 7px;
}
.su-n.su-good { color: var(--gold); margin-top: 16px; }
.su-them { margin: 0; font-size: 14.2px; line-height: 1.66; color: var(--muted-2); }
.su-us { margin: 0; font-size: 14.4px; line-height: 1.68; color: var(--muted); }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.pil-n { display: block; font-size: 12px; letter-spacing: .12em; color: var(--muted-2); margin-bottom: 10px; }
.pil h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.28; }
.pil p { margin: 0 0 12px; font-size: 14.6px; line-height: 1.7; color: var(--muted); }
.pil-link { margin-top: 14px; font-size: 13.8px; }

.cmp { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-t { width: 100%; border-collapse: collapse; min-width: 660px; font-size: 13.8px; }
/* Ours is the first data column and stays put while the rest scrolls, so the
   comparison never leaves the reader looking at three competitors and a gap. */
.cmp-t th:nth-child(2), .cmp-t td:nth-child(2) {
  position: sticky; left: 0; z-index: 1;
  box-shadow: 1px 0 0 var(--line);
  background: linear-gradient(to right, rgba(255,196,107,.075), rgba(255,196,107,.055));
}
.cmp-t th, .cmp-t td { padding: 12px 13px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp-t thead th { font-size: 12.4px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.cmp-t thead th:first-child { color: transparent; }
.cmp-t tbody th { font-weight: 500; color: var(--text); width: 26%; }
.cmp-t td { color: var(--muted); }
.cmp-t .cmp-us { color: var(--text); background: rgba(255,196,107,.055); }
.cmp-t thead .cmp-us { color: var(--gold); }

.cmp-when { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(14px, 1.8vw, 20px); margin-top: clamp(26px, 3vh, 40px); }
.cw { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; background: rgba(255,255,255,.016); }
.cw b { display: block; font-size: 14.6px; margin-bottom: 8px; }
.cw p { margin: 0; font-size: 13.8px; line-height: 1.66; color: var(--muted-2); }
.cw-us { border-color: rgba(255,196,107,.3); background: rgba(255,196,107,.06); }
.cw-us b { color: var(--gold); }
.cw-us p { color: var(--muted); }

/* the ninety percent rule */
.ninety { margin-bottom: clamp(24px, 3vh, 38px); }
.nb-bar {
  display: grid; grid-template-columns: 9fr 1fr; gap: 4px;
  height: 52px; border-radius: 12px; overflow: hidden;
}
.nb-90, .nb-10 {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 12.8px; letter-spacing: .02em; padding: 0 10px;
}
.nb-90 {
  background: linear-gradient(100deg, rgba(143,217,168,.2), rgba(143,217,168,.1));
  border: 1px solid rgba(143,217,168,.34); color: #a8e2bd; border-radius: 10px;
}
.nb-10 {
  background: rgba(255,255,255,.05); border: 1px dashed var(--line);
  color: var(--muted-2); border-radius: 10px; font-size: 11.6px;
}
.nb-legend { display: grid; gap: 7px; margin-top: 14px; }
.nb-legend span { display: flex; align-items: center; gap: 9px; font-size: 13.2px; color: var(--muted-2); }
.nl { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.nl-90 { background: rgba(143,217,168,.55); }
.nl-10 { background: rgba(255,255,255,.14); border: 1px dashed rgba(255,255,255,.3); }

.ninety-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); align-items: start; }
@media (max-width: 860px) { .ninety-cols { grid-template-columns: 1fr; } }
.ncol { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 2.2vw, 30px); }
.ncol { background: linear-gradient(170deg, rgba(143,217,168,.06), rgba(255,255,255,.01)); border-color: rgba(143,217,168,.26); }
.ncol-alt { background: rgba(255,255,255,.016); border-color: var(--line); border-style: dashed; }
.ncol h3 { margin: 0 0 12px; font-size: 18px; }
.ncol p { margin: 0 0 12px; font-size: 14.4px; line-height: 1.7; color: var(--muted); }
.ncol-why {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13.8px; color: var(--muted-2);
}
.ncol-why b { color: var(--text); }
.ninety-foot { margin-top: clamp(22px, 3vh, 32px); max-width: 64ch; font-size: 15px; line-height: 1.72; color: var(--muted); }

/* the vendor stack under the ninety percent rule
   .vl-mark holds a neutral monogram until a real logo SVG is approved. Sized so
   a dropped-in 40x40 SVG needs no other change. */
.stack-head { margin: clamp(38px, 6vh, 70px) 0 clamp(20px, 3vh, 32px); max-width: 760px; }
.stack { display: grid; gap: clamp(12px, 1.6vw, 18px); }
.vend {
  display: grid; grid-template-columns: minmax(190px, 230px) 1fr 1fr;
  gap: clamp(14px, 2vw, 28px); align-items: start;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(18px, 2vw, 26px);
  background: rgba(255,255,255,.02);
}
@media (max-width: 900px) { .vend { grid-template-columns: 1fr; gap: 14px; } }

.vl { display: flex; align-items: center; gap: 13px; }
.vl-mark {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 11px;
  background: rgba(255,255,255,.055);
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
  color: rgba(255,255,255,.82);
  transition: color .3s, background .3s, border-color .3s;
}
/* The marks are the vendors' single-colour versions, so they take the page's
   ink rather than fighting five different brand palettes on a dark background. */
.vl-mark svg, .vl-mark img { width: 24px; height: 24px; display: block; }
.vend:hover .vl-mark { color: #fff; background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.2); }
.vl-id b { display: block; font-size: 16px; }
.vl-id span { display: block; font-size: 12.6px; color: var(--muted-2); margin-top: 3px; line-height: 1.4; }

.vw, .vy { margin: 0; font-size: 14px; line-height: 1.68; color: var(--muted); }
.vw b, .vy b { display: block; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }
.vw b { color: var(--muted-2); }
.vy b { color: var(--gold); }
.vy { color: var(--text); opacity: .86; }

.stack-foot { margin-top: 22px; font-size: 14px; line-height: 1.7; color: var(--muted-2); max-width: 66ch; }

/* ==========================================================================
   the Explore mega panel
   Anchored under the whole nav bar rather than under the trigger, so there is
   no gap for the pointer to fall through on its way down.
   ========================================================================== */
.nav-explore { display: inline-flex; align-items: center; gap: 4px; }
.nav-explore .cv { width: 13px; height: 13px; opacity: .75; transition: transform .25s var(--ease), opacity .25s; }
.nav-explore[aria-expanded="true"] { color: var(--text); }
.nav-explore[aria-expanded="true"] .cv { transform: rotate(180deg); opacity: 1; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(10, 12, 17, .97);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  box-shadow: 0 30px 64px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(-7px);
  transition: opacity .2s var(--ease), transform .24s var(--ease);
  z-index: 60;
}
.mega.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mega { transition: none; } }

.mega-in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(230px, 290px);
  gap: clamp(20px, 2.6vw, 40px);
  padding: clamp(24px, 2.4vw, 34px) 0;
}
.mega-col h4 {
  margin: 0 0 14px; font-size: 11.4px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 600;
}
.mega-col a {
  display: block; text-decoration: none;
  padding: 9px 11px; margin: 0 -11px 2px; border-radius: 9px;
  transition: background .2s;
}
.mega-col a:hover, .mega-col a:focus-visible { background: rgba(255,255,255,.045); }
.mega-col b { display: block; font-size: 14.4px; color: var(--text); font-weight: 500; }
.mega-col span { display: block; font-size: 12.4px; color: var(--muted-2); margin-top: 2px; line-height: 1.45; }

.mega-cta .mc-card {
  border: 1px solid rgba(255,196,107,.28); border-radius: 13px; padding: 20px;
  background: linear-gradient(170deg, rgba(255,196,107,.1), rgba(255,255,255,.012));
}
.mc-card b { display: block; font-size: 15px; margin-bottom: 8px; }
.mc-card p { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.mc-card .btn { width: 100%; justify-content: center; }

.mega-foot { border-top: 1px solid var(--line); background: rgba(255,255,255,.02); }
.mega-foot-in { display: flex; align-items: center; gap: 22px; padding: 13px 0; flex-wrap: wrap; }
.mega-foot-in a { font-size: 12.8px; color: var(--muted-2); text-decoration: none; }
.mega-foot-in a:hover { color: var(--text); }
.mega-foot-in i { flex: 1; }

/* Below the breakpoint where the top-level links disappear, the panel does too:
   its contents are appended to the drawer instead. */
@media (max-width: 1000px) {
  .mega { display: none; }
  .nm-head {
    display: block; margin: 18px 0 4px;
    font-size: 11.4px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2);
  }
}

/* the trigger is a real button so no invalid "#" href reaches a selector */
.nav-links button.nav-explore {
  font: inherit; cursor: pointer; border: none; background: none;
  padding: 9px 13px; border-radius: 10px;
  font-size: 13.6px; color: var(--muted); letter-spacing: .01em;
  transition: color .3s, background .3s;
}
.nav-links button.nav-explore:hover { color: var(--ivory); background: var(--raise); }

/* ==========================================================================
   the contact dialog
   Used anywhere an email address would otherwise have to be printed.
   ========================================================================== */
.cm-root { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.cm-root[hidden] { display: none; }
.cm-veil {
  position: absolute; inset: 0; background: rgba(4,5,8,.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s var(--ease);
}
.cm-root.on .cm-veil { opacity: 1; }
.cm-box {
  position: relative; width: min(520px, 100%);
  max-height: calc(100vh - 40px); overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #0e1016; padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 40px 90px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(10px) scale(.99);
  transition: opacity .22s var(--ease), transform .26s var(--ease);
}
.cm-root.on .cm-box { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cm-veil, .cm-box { transition: none; }
}
.cm-x {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 9px; color: var(--muted-2);
}
.cm-x:hover { color: var(--text); border-color: rgba(255,255,255,.22); }
.cm-x svg { width: 15px; height: 15px; }
.cm-title { margin: 0 0 8px; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.25; padding-right: 36px; }
.cm-sub { margin: 0 0 22px; font-size: 14px; line-height: 1.66; color: var(--muted); }
.cm-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.cm-actions .cf-status { margin: 0; }
.cm-actions .btn[disabled] { opacity: .6; pointer-events: none; }
body.cm-locked { overflow: hidden; }

/* a mail address used to sit here; now it opens the dialog */
.cs-ask {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(255,196,107,.28);
}
.cs-ask:hover { border-bottom-color: var(--gold); }

/* the corporate title, under the plain one */
.member-alias {
  font-size: 11.8px; letter-spacing: .02em; color: var(--muted-2);
  margin: 4px 0 0; opacity: .85;
}

/* ==========================================================================
   the stage switcher on the roles section
   ========================================================================== */
.stage-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vh, 32px); }
.stage-tab {
  display: flex; align-items: baseline; gap: 8px; cursor: pointer;
  font: inherit; font-size: 13.8px; color: var(--muted);
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.02);
  transition: color .3s, background .3s, border-color .3s, transform .3s var(--ease);
}
.stage-tab:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.stage-tab .st-n { font-size: 11px; letter-spacing: .08em; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.stage-tab.on {
  color: #10131a; background: linear-gradient(100deg, #ffc46b, #ff9a5e);
  border-color: transparent; transform: translateY(-1px);
}
.stage-tab.on .st-n { color: rgba(16,19,26,.6); }
@media (max-width: 720px) { .stage-tab { font-size: 13px; padding: 9px 13px; } }

.stage-said {
  grid-column: 1 / -1; margin: 0 0 2px;
  font-size: clamp(17px, 2vw, 21px); line-height: 1.45; color: var(--text); font-style: italic;
}
.stage-meta {
  display: block; margin-top: 8px; font-style: normal;
  font-size: 12.2px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2);
}

/* cards arrive on a stagger, so a stage change reads as people turning up */
.roster { transition: opacity .17s var(--ease), transform .17s var(--ease); }
.roster.swapping { opacity: 0; transform: translateY(6px); }
.roster .member { opacity: 0; transform: translateY(14px); animation: memberIn .5s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 42ms); }
@keyframes memberIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .roster .member { animation: none; opacity: 1; transform: none; }
  .roster, .roster.swapping { transition: none; opacity: 1; transform: none; }
}