/* ============================================================
   Waivo Edge — shared design system
   Static CSS. No framework. Dark, data-forward, quant aesthetic.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* New design tokens (2026 teal redesign) */
  --bg:#060B14; --ink:#EAF1FB; --mut:#8597B0; --mut2:#5E7088;
  --teal:#2FE9CB; --line:rgba(255,255,255,.07);
  --display:'Archivo',sans-serif; --body:'Hanken Grotesk',system-ui,sans-serif;

  /* Brand (retinted to teal; old aliases keep the case-study CSS working) */
  --navy:    #060B14;
  --navy-2:  #0B1322;
  --navy-3:  #10213a;
  --cyan:    #2FE9CB;
  --cyan-2:  #8CF7E0;
  --white:   #EAF1FB;
  --muted:   #8597B0;
  --muted-2: #5E7088;

  /* Surfaces */
  --panel:        rgba(255,255,255,0.035);
  --panel-2:      rgba(255,255,255,0.05);
  --border:       rgba(255,255,255,0.07);
  --border-cyan:  rgba(47,233,203,0.22);

  /* Type */
  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout */
  --maxw: 1180px;
  --radius: 16px;
}

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

body {
  font-family: var(--sans);
  background: var(--navy);
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Backdrop */
.bg {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 90% 50% at 50% -10%, #0d3a5c 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 85% 110%, #002a3a 0%, transparent 60%),
    var(--navy);
}
.grid-overlay {
  position: fixed; inset: 0; z-index: -1;
  background-image: radial-gradient(circle, rgba(0,212,212,0.10) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 10%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 10%, transparent 80%);
}

/* Shell */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { position: relative; padding: 88px 0; }
@media (max-width: 640px){ section { padding: 60px 0; } }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  background: linear-gradient(to bottom, rgba(7,16,31,0.92) 30%, rgba(7,16,31,0));
  backdrop-filter: blur(8px);
}
.nav-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.nav-logo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.nav-wordmark {
  font-size: 21px; font-weight: 800; letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-cta {
  font-size: 14px; font-weight: 600; color: var(--white);
  text-decoration: none; padding: 9px 16px; border-radius: 10px;
  border: 1px solid var(--border-cyan); background: rgba(0,212,212,0.06);
  transition: background .15s, transform .15s;
}
.nav-cta:hover { background: rgba(0,212,212,0.14); transform: translateY(-1px); }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(0,212,212,0.09); border: 1px solid var(--border-cyan);
  border-radius: 100px; padding: 6px 15px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--cyan);
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Eyebrow / section headers */
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cyan); font-weight: 600;
}
.section-head {
  font-size: clamp(28px, 4.4vw, 44px); font-weight: 800; letter-spacing: -1.2px;
  line-height: 1.1; margin: 14px 0 0;
}
.section-intro { color: var(--muted); font-size: clamp(15px,2vw,18px); max-width: 640px; margin-top: 16px; }

/* Typography helpers */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.accent { color: var(--cyan); }
.grad {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-2) 55%, #a7f7ea 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Buttons + form (shared with existing signup behavior) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
  color: #042022; border: none; border-radius: 12px;
  padding: 14px 24px; font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  box-shadow: 0 4px 22px rgba(0,212,212,0.30); transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 30px rgba(0,212,212,0.45); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-ghost {
  background: transparent; color: var(--white); box-shadow: none;
  border: 1px solid var(--border-cyan);
}
.btn-ghost:hover { background: rgba(0,212,212,0.10); box-shadow: none; }

.signup-card {
  width: 100%; max-width: 520px;
  background: var(--panel); border: 1px solid var(--border-cyan);
  border-radius: 20px; padding: 30px 28px; backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.signup-card h2 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.signup-card .sub { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.form-group { display: flex; gap: 10px; }
.form-input {
  flex: 1; background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px; font-size: 15px; font-family: inherit;
  color: var(--white); outline: none; transition: border-color .2s, box-shadow .2s;
}
.form-input::placeholder { color: rgba(138,168,200,0.6); }
.form-input:focus { border-color: rgba(0,212,212,0.5); box-shadow: 0 0 0 3px rgba(0,212,212,0.10); }
.success-msg {
  display: none; align-items: center; gap: 10px; margin-top: 16px;
  background: rgba(0,212,212,0.10); border: 1px solid rgba(0,212,212,0.3);
  border-radius: 12px; padding: 14px 18px; font-size: 14px; font-weight: 500; color: var(--cyan-2);
}
.success-msg.show { display: flex; }
.privacy-note { font-size: 12px; color: rgba(138,168,200,0.5); margin-top: 14px; text-align: center; }
@media (max-width: 540px){ .form-group { flex-direction: column; } }

/* Generic card grid */
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; transition: border-color .2s, transform .2s, background .2s;
}
.card:hover { border-color: var(--border-cyan); background: var(--panel-2); }
.card-index { font-family: var(--mono); font-size: 13px; color: var(--cyan); letter-spacing: .12em; }
.card h3 { font-size: 19px; font-weight: 700; margin: 10px 0 8px; letter-spacing: -0.3px; }
.card p { color: var(--muted); font-size: 14.5px; }

.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
@media (max-width: 900px){ .grid-3,.grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } html{scroll-behavior:auto;} }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border); padding: 40px 0; margin-top: 40px;
  color: var(--muted-2); font-size: 13px;
}
.site-footer .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--cyan); }

/* Showcase cards + read-more */
.showcase-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.read-more { color: var(--cyan); font-weight: 600; font-size: 14px; margin-top: 16px; display: inline-block; }
.showcase-card:hover .read-more { text-decoration: underline; }

/* ===== Ripple demo ===== */
.ripple-stage {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 30px; border: 1px dashed var(--border-cyan); border-radius: var(--radius);
  background: radial-gradient(ellipse 70% 120% at 50% 0%, rgba(0,212,212,0.06), transparent 70%);
}
.ripple-protector {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border-cyan); border-radius: 14px;
  padding: 16px 22px; color: var(--white); font-family: inherit; text-align: left;
  transition: transform .2s, border-color .2s, opacity .3s, background .2s;
}
.ripple-protector:hover { transform: translateY(-2px); background: rgba(0,212,212,0.10); }
.ripple-protector .rp-figure { font-size: 30px; }
.ripple-protector .rp-text { display: flex; flex-direction: column; }
.ripple-protector .rp-text strong { font-size: 16px; }
.ripple-protector .rp-hint { font-size: 12.5px; color: var(--muted); }
.ripple-status { font-size: 12px; letter-spacing: .14em; color: var(--muted-2); text-transform: uppercase; }

/* Pulled state */
.ripple.pulled .ripple-protector { opacity: .4; border-color: rgba(255,90,90,0.5); border-style: dashed; transform: translateY(2px); }
.ripple.pulled .ripple-status { color: #ff8a8a; }
.ripple-effects .effect { opacity: .32; transform: scale(.99); transition: opacity .45s ease, transform .45s ease, border-color .45s; }
.ripple.pulled .ripple-effects .effect { opacity: 1; transform: none; border-color: var(--border-cyan); }
.ripple.pulled .ripple-effects .effect:nth-child(1){ transition-delay:.05s; }
.ripple.pulled .ripple-effects .effect:nth-child(2){ transition-delay:.15s; }
.ripple.pulled .ripple-effects .effect:nth-child(3){ transition-delay:.25s; }
.ripple.pulled .ripple-effects .effect:nth-child(4){ transition-delay:.35s; }
.ripple-effects .effect .card-index { color: var(--muted-2); }
.ripple.pulled .ripple-effects .effect .card-index { color: var(--cyan); }
@media (prefers-reduced-motion: reduce){ .ripple-effects .effect { opacity:1; transform:none; } }

/* ===== Comparison bar / band component ===== */
.cmp { display: flex; flex-direction: column; gap: 14px; }
.cmp-row { display: grid; grid-template-columns: 130px 1fr 62px; align-items: center; gap: 12px; }
.cmp-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.cmp-track { position: relative; height: 12px; border-radius: 7px; background: rgba(255,255,255,0.06); overflow: hidden; }
.cmp-fill { position: absolute; inset: 0 auto 0 0; border-radius: 7px; background: linear-gradient(90deg, rgba(0,212,212,0.55), var(--cyan)); }
.cmp-fill.dim { background: linear-gradient(90deg, rgba(138,168,200,0.25), rgba(138,168,200,0.5)); }
.cmp-val { font-family: var(--mono); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
/* Mobile: override any inline column widths so the bar track stays legible */
@media (max-width: 560px){
  .cmp-row { grid-template-columns: 84px 1fr 96px !important; gap: 8px !important; }
  .cmp-label { font-size: 12px; }
  .cmp-val { font-size: 11.5px; }
}

/* ===== Case-study template ===== */
.case-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.back-bar { position: sticky; top: 0; z-index: 40; background: rgba(7,16,31,0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.back-bar .inner { max-width: 760px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; }
.back-link { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .15s; }
.back-link:hover { color: var(--cyan); }

.case-head { padding: 48px 0 8px; }
.case-cat { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); }
.case-title { font-size: clamp(34px, 6vw, 56px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.05; margin: 14px 0; }
.case-title .a { color: #f0b27a; }   /* side A — warm */
.case-title .b { color: #6fc6f0; }   /* side B — cool */
.case-sub { color: var(--muted); font-family: var(--mono); font-size: 13px; }
.rule { height: 1px; background: var(--border); margin: 22px 0; }

.case-block { padding: 30px 0; border-top: 1px solid var(--border); }
.case-block:first-of-type { border-top: none; }
.block-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); font-weight: 600; }
.block-title { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; letter-spacing: -0.6px; margin: 10px 0 12px; }
.block-intro { color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.case-block p.body { color: var(--white); opacity: .9; font-size: 15.5px; line-height: 1.7; margin-top: 12px; }
.case-call { font-size: clamp(17px,2.4vw,20px); line-height: 1.6; color: var(--white); }

/* Side-by-side comparison cards (player/team/coach blocks) */
.sides { display: grid; gap: 16px; margin-top: 18px; }
.side { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px; border-top: 3px solid var(--muted-2); }
.side.warm { border-top-color: #f0b27a; }
.side.cool { border-top-color: #6fc6f0; }
.side-name { font-size: 18px; font-weight: 700; }
.side-meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.side-stat { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; }
.side-stat .big { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--cyan); white-space: nowrap; }
.side.warm .side-stat .big { color: #f0b27a; }
.side.cool .side-stat .big { color: #6fc6f0; }
.side-stat .desc { font-size: 14px; color: var(--muted); }
.side .txt { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--white); opacity: .88; }

/* Why-it-matters callout — left accent border (consistent across all pieces) */
.why { border-left: 3px solid var(--cyan); background: rgba(0,212,212,0.05); padding: 16px 18px; border-radius: 0 10px 10px 0; margin-top: 20px; font-size: 15px; line-height: 1.65; }
.why b, .why strong { color: var(--cyan); }
.callout { border-left: 3px solid #f0b27a; background: rgba(240,178,122,0.06); padding: 16px 18px; border-radius: 0 10px 10px 0; margin-top: 18px; font-size: 14.5px; line-height: 1.6; }
.callout .lbl { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #f0b27a; display: block; margin-bottom: 8px; }
.proof { font-family: var(--mono); font-size: 13.5px; line-height: 1.6; color: var(--cyan); background: rgba(0,212,212,0.06); border: 1px solid var(--border-cyan); border-radius: 10px; padding: 14px 16px; margin-top: 14px; }
.proof .lbl { color: var(--muted); }

/* Stat trios */
.stat-trio { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 18px; }
.stat-trio .cell { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.stat-trio .cell .big { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--cyan); line-height: 1.15; }
.stat-trio .cell .desc { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
@media (max-width: 560px){ .stat-trio { grid-template-columns: 1fr; } }

/* Framework cards (How Waivo Edge grades) */
.framework { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 18px; }
.framework .fc { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.framework .fc .n { font-family: var(--mono); font-size: 13px; color: var(--cyan); }
.framework .fc h4 { font-size: 16px; font-weight: 700; margin: 8px 0 6px; }
.framework .fc p { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 560px){ .framework { grid-template-columns: 1fr; } }

/* Timeline (coaching track record) */
.timeline { margin-top: 18px; }
.tl-item { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--border); }
.tl-when { font-family: var(--mono); font-size: 12.5px; color: var(--cyan); }
.tl-when .where { display: block; color: var(--muted-2); margin-top: 2px; }
.tl-body h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.tl-body p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
@media (max-width: 560px){ .tl-item { grid-template-columns: 1fr; gap: 6px; } }

/* Stack → call verdict */
.verdict { background: linear-gradient(180deg, rgba(0,212,212,0.06), transparent); border: 1px solid var(--border-cyan); border-radius: 16px; padding: 26px; margin-top: 18px; }
.verdict .v-eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.verdict .v-title { font-size: clamp(20px,3vw,26px); font-weight: 800; letter-spacing: -0.5px; margin: 8px 0 12px; }
.verdict p { color: var(--white); opacity: .9; font-size: 15.5px; line-height: 1.7; }
.tagline { font-family: var(--mono); font-size: 15px; color: var(--cyan); margin-top: 18px; text-align: center; font-weight: 600; }

/* WAIVO disclaimer footer (source protection — mandatory) */
.waivo-disclaimer { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.waivo-disclaimer .mark { font-weight: 800; letter-spacing: 0.5px; }
.waivo-disclaimer .mark .vo { color: var(--cyan); }
.waivo-disclaimer p { font-size: 12.5px; color: var(--muted-2); line-height: 1.65; margin-top: 10px; }

/* End-of-case CTA */
.case-cta { text-align: center; background: var(--panel); border: 1px solid var(--border-cyan); border-radius: 18px; padding: 34px 24px; margin: 30px 0; }
.case-cta h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.case-cta p { color: var(--muted); margin: 10px auto 20px; max-width: 460px; font-size: 15px; }

/* Floor–ceiling band */
.band { position: relative; height: 46px; margin: 10px 0; }
.band-track { position: absolute; top: 50%; left: 0; right: 0; height: 8px; transform: translateY(-50%); border-radius: 6px; background: rgba(255,255,255,0.06); }
.band-range { position: absolute; top: 50%; height: 8px; transform: translateY(-50%); border-radius: 6px; background: linear-gradient(90deg, rgba(0,212,212,0.25), rgba(0,212,212,0.6)); }
.band-marker { position: absolute; top: 50%; width: 3px; height: 24px; transform: translate(-50%,-50%); background: var(--cyan-2); border-radius: 2px; box-shadow: 0 0 10px rgba(0,240,200,0.6); }
.band-marker::after { content: attr(data-label); position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; color: var(--cyan-2); white-space: nowrap; }
.band-ends { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted-2); }

/* ============================================================
   v2 additions — redaction motif, ask-Waivo Edge search, data
   showcase, ripple v2, section separation
   ============================================================ */

/* ===== Redaction / "locked preview" motif (site-wide) ===== */
.rdct {
  display: inline-block;
  filter: blur(4.5px);
  -webkit-user-select: none; user-select: none;
  pointer-events: none;
  font-family: var(--mono);
  color: var(--cyan);
  letter-spacing: .06em;
  vertical-align: baseline;
  opacity: .9;
}
.rdct.warm { color: #f0b27a; }
.rdct.cool { color: #6fc6f0; }
.lock { filter: none; font-size: .82em; opacity: .75; margin-right: 1px; -webkit-user-select: none; user-select: none; }
.lockpill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); border: 1px solid var(--border); border-radius: 100px;
  padding: 3px 10px; background: rgba(255,255,255,0.03);
}
.unlock-note {
  display: flex; align-items: center; gap: 7px; margin-top: 14px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted-2);
}
.unlock-note::before { content: "🔒"; font-size: 12px; }

/* ===== Ask-Waivo Edge mock search module ===== */
.ask-head { font-size: clamp(21px,3.2vw,29px); font-weight: 800; letter-spacing: -0.6px; line-height: 1.15; margin-top: 12px; }
.ask-lead { color: var(--muted); font-size: clamp(14px,1.9vw,16.5px); max-width: 540px; margin: 12px auto 0; }
.ask-wrap { max-width: 720px; margin: 32px auto 0; }
.ask-bar {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.07); border: 1px solid var(--border-cyan);
  border-radius: 18px; padding: 9px 9px 9px 24px;
  animation: askGlow 3s ease-in-out infinite;
}
.ask-bar.focus, .ask-bar:hover {
  animation: none;
  border-color: rgba(0,212,212,0.6);
  box-shadow: 0 18px 50px rgba(0,0,0,0.42), 0 0 0 4px rgba(0,212,212,0.14), 0 0 34px rgba(0,212,212,0.2);
}
@keyframes askGlow {
  0%,100% { box-shadow: 0 18px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,212,212,0.18); }
  50%     { box-shadow: 0 18px 50px rgba(0,0,0,0.42), 0 0 0 1px rgba(0,212,212,0.55), 0 0 30px rgba(0,212,212,0.18); }
}
@media (prefers-reduced-motion: reduce){ .ask-bar { animation: none; } }
.ask-input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--white); font-family: inherit; font-size: clamp(16px,2vw,19px);
  padding: 18px 0; cursor: pointer;
}
.ask-input::placeholder { color: rgba(138,168,200,0.7); }
.ask-send {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 13px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,212,212,0.35); transition: transform .15s;
}
.ask-send:hover { transform: translateY(-1px); }
.ask-send svg { width: 22px; height: 22px; }
.ask-caption { text-align: center; font-size: 12.5px; color: var(--muted-2); margin-top: 14px; font-family: var(--mono); letter-spacing: .03em; }

.ask-prompts { display: none; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 20px; }
.ask-prompts.show { display: grid; animation: askChipsIn .35s ease both; }
@keyframes askChipsIn { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none;} }
.ask-chip {
  text-align: left; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; color: var(--white); font-family: inherit;
  font-size: 14.5px; line-height: 1.4; cursor: pointer; display: flex; gap: 11px; align-items: flex-start;
  transition: border-color .18s, background .18s, transform .18s;
}
.ask-chip:hover { border-color: var(--border-cyan); background: var(--panel-2); transform: translateY(-1px); }
.ask-chip.active { border-color: var(--cyan); background: rgba(0,212,212,0.08); }
.ask-chip .ico { color: var(--cyan); font-family: var(--mono); font-size: 13px; flex-shrink: 0; margin-top: 1px; }
@media (max-width: 560px){ .ask-prompts { grid-template-columns: 1fr; } }

/* Analyzing state */
.ask-loading { display: none; align-items: center; gap: 12px; justify-content: center; margin-top: 24px; color: var(--muted); font-family: var(--mono); font-size: 13.5px; }
.ask-loading.show { display: flex; }
.ask-loading .dots { display: inline-flex; gap: 4px; }
.ask-loading .dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); animation: askpulse 1s ease-in-out infinite; }
.ask-loading .dots span:nth-child(2){ animation-delay: .15s; }
.ask-loading .dots span:nth-child(3){ animation-delay: .3s; }
@keyframes askpulse { 0%,100%{ opacity:.25; transform: translateY(0);} 50%{ opacity:1; transform: translateY(-3px);} }

/* Inline reveal / breakdown */
.ask-reveal { margin-top: 22px; }
.breakdown {
  background: var(--panel); border: 1px solid var(--border-cyan); border-radius: 18px;
  padding: 26px; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease;
}
.breakdown.in { opacity: 1; transform: none; }
.bd-cat { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.bd-title { font-size: clamp(20px,3vw,26px); font-weight: 800; letter-spacing: -0.6px; margin: 8px 0 4px; }
.bd-sub { color: var(--muted); font-size: 14px; margin-bottom: 4px; }
.bd-rows { margin: 18px 0 6px; }
.bd-row { display: grid; grid-template-columns: 132px 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid var(--border); align-items: baseline; }
.bd-row .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.bd-row .v { font-size: 14.5px; line-height: 1.55; color: var(--white); opacity: .92; }
@media (max-width: 560px){ .bd-row { grid-template-columns: 1fr; gap: 3px; } }
.bd-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; color: var(--cyan); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.bd-link:hover { text-decoration: underline; }

/* ===== Data showcase — matchup card ===== */
.matchup-card {
  max-width: 600px; margin: 32px auto 0; background: var(--panel);
  border: 1px solid var(--border-cyan); border-radius: 16px; padding: 24px 24px 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.3);
  position: relative; overflow: hidden;
}
.matchup-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(0,212,212,0.04) 0 1px, transparent 1px 3px);
  opacity: .5;
}
.matchup-card > * { position: relative; z-index: 1; }
.mc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; }
.mc-player { font-weight: 800; font-size: 16px; letter-spacing: -0.3px; }
.mc-player .pos { font-family: var(--mono); color: var(--cyan); font-size: 12px; margin-right: 8px; }
.mc-snap { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); text-align: right; }
.tag-illustrative { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; margin-top: 6px; }
.mc-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.mc-label { font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }
.mc-val { font-family: var(--mono); font-size: 13px; text-align: right; }
.mc-val.vis { color: var(--cyan); }
.mc-val .up { color: var(--cyan-2); }
.mc-more { text-align: center; padding: 16px 0 4px; border-top: 1px solid var(--border-cyan); margin-top: 4px; font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* ===== Ripple v2 — fifth panel, struck protector, instruction ===== */
.ripple-instruction { text-align: center; font-family: var(--mono); font-size: 13.5px; color: var(--cyan); margin-bottom: 18px; letter-spacing: .02em; }
.ripple.pulled .ripple-protector .rp-figure { filter: grayscale(1); }
.ripple.pulled .ripple-protector .rp-text strong { text-decoration: line-through; text-decoration-color: rgba(255,120,120,0.8); }
.ripple-effects .effect:nth-child(5){ transition-delay:.05s; }
.ripple.pulled .ripple-effects .effect:nth-child(5){ transition-delay:.45s; }
.effect .net { display: block; margin-top: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--cyan); }
.effect .net .lbl { color: var(--muted-2); }
/* make the 5-up grid breathe: let the last card span full width on the 2-col layout */
@media (min-width: 561px){ .ripple-effects.grid-2 .effect:nth-child(5){ grid-column: 1 / -1; } }

/* ===== Section separation (break the monotone scroll) ===== */
section.sec-alt {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), rgba(0,212,212,0.022) 60%, transparent),
    rgba(0,0,0,0.12);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sec-divider { height: 1px; max-width: var(--maxw); margin: 0 auto; background: linear-gradient(90deg, transparent, var(--border-cyan), transparent); }

/* ============================================================
   2026 TEAL REDESIGN — homepage design system
   (ported from the design handoff; appended so it wins the cascade.
    Case-study CSS above is retained and retinted via the tokens.)
   ============================================================ */
body{ font-family:var(--body); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.5; }
::selection{ background:rgba(47,233,203,.28); color:var(--ink); }

@keyframes wv-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes wv-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
@keyframes wv-drift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(2%,-3%,0)}100%{transform:translate3d(0,0,0)}}

.rv{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.16,.84,.44,1),transform .85s cubic-bezier(.16,.84,.44,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){ .rv{opacity:1;transform:none;transition:none} }

.wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 28px}
section[id]{scroll-margin-top:84px}

/* nav */
nav.bar{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(7,12,22,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
nav.bar .row{max-width:1180px;margin:0 auto;padding:0 28px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:11px;cursor:pointer;flex:none;text-decoration:none}
.logo img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.logo span{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;color:#EAF1FB}
.navlinks{display:flex;align-items:center;gap:2px}
.navlinks a{font-size:14px;font-weight:600;color:#9DB0C9;text-decoration:none;padding:9px 14px;border-radius:9px;transition:color .2s,background .2s}
.navlinks a:hover{color:var(--ink);background:rgba(47,233,203,.08)}
.btn-ghost{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:11px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .25s,background .25s,transform .25s;cursor:pointer}
.btn-ghost:hover{border-color:rgba(47,233,203,.5);background:rgba(47,233,203,.07);transform:translateY(-1px)}
.btn-fill{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:54px;padding:0 28px;border-radius:14px;background:var(--teal);color:#06140F;font-size:15.5px;font-weight:700;text-decoration:none;border:none;font-family:inherit;cursor:pointer;box-shadow:0 16px 40px -16px rgba(47,233,203,.8);transition:transform .25s,box-shadow .25s}
.btn-fill:hover{transform:translateY(-2px);box-shadow:0 22px 50px -16px rgba(47,233,203,.95)}

/* mobile nav */
.navtoggle{display:none;flex:none;width:42px;height:40px;align-items:center;justify-content:center;flex-direction:column;gap:5px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.03);cursor:pointer}
.navtoggle i{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
.navmenu{display:none}
@media (max-width:860px){
  nav.bar .navlinks, nav.bar > .row > .btn-ghost{display:none}
  .navtoggle{display:flex}
  .navmenu{position:fixed;top:68px;left:0;right:0;z-index:49;background:rgba(7,12,22,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);flex-direction:column;padding:14px 24px 20px;gap:6px}
  .navmenu.open{display:flex}
  .navmenu a{font-size:16px;font-weight:600;color:#C7D4E6;text-decoration:none;padding:12px 8px;border-radius:9px}
  .navmenu a:hover{background:rgba(47,233,203,.08);color:var(--ink)}
  .navmenu .btn-ghost{display:inline-flex;margin-top:8px;height:46px;justify-content:center}
}

/* ambient bg */
.amb{position:fixed;pointer-events:none;z-index:0}
.amb.grid{inset:0;background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.25) 60%,transparent);mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.25) 60%,transparent)}
.amb.glow1{top:-280px;left:50%;width:1100px;height:760px;margin-left:-550px;background:radial-gradient(closest-side,rgba(47,233,203,.16),rgba(47,233,203,0) 70%);filter:blur(8px);animation:wv-drift 16s ease-in-out infinite}
.amb.glow2{top:38%;right:-220px;width:620px;height:620px;background:radial-gradient(closest-side,rgba(34,140,200,.12),transparent 70%);filter:blur(10px)}

/* shared display helpers (new) */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--teal);text-transform:uppercase}
.lead{color:var(--mut);line-height:1.6}
h1,h2{margin:0}
.case-title,.block-title{font-family:var(--display)}

/* data card rows */
.drow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.045);font-family:var(--mono);font-size:13.5px}
.drow .k{color:#8FA1BA}
.drow .v{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.locked{filter:blur(5px);text-shadow:0 0 14px rgba(47,233,203,.7);-webkit-user-select:none;user-select:none}

/* ripple */
.ol{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:34px;flex-wrap:wrap}
.olcell{width:64px;height:46px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:700;transition:all .4s;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:#8FA1BA}
.olcell.lt{border-color:rgba(47,233,203,.55);background:rgba(47,233,203,.1);color:var(--teal)}
.olcell.pulled{border:1px dashed rgba(255,107,107,.7);background:rgba(255,107,107,.08);color:#FF8585;transform:translateY(-8px) rotate(-6deg)}
.olrole{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#52647C;margin-top:6px;text-align:center}
.ocard{border-radius:14px;padding:16px 16px 18px;transition:all .55s cubic-bezier(.16,.84,.44,1);border:1px solid var(--line);background:rgba(255,255,255,.02)}
.ocard.on{border-color:rgba(47,233,203,.32);background:rgba(15,30,40,.7);box-shadow:0 24px 50px -30px rgba(47,233,203,.5)}
.ocard .tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--mut2);margin-bottom:8px}
.ocard .lbl{font-size:14px;font-weight:600;line-height:1.35;color:#D7E3F2;margin-bottom:14px;min-height:38px}
.ocard .num{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;transition:all .5s;color:var(--mut2);filter:blur(5px)}
.ocard.on .num{color:var(--teal);filter:none}
.ocard .unit{font-family:var(--mono);font-size:10.5px;color:var(--mut2);transition:opacity .5s;opacity:0}
.ocard.on .unit{opacity:1}

/* feature cards */
.fcard{border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(18,28,46,.5),rgba(8,14,24,.4));padding:26px 24px 28px;transition:transform .3s,border-color .3s,box-shadow .3s}
.fcard:hover{transform:translateY(-4px);border-color:rgba(47,233,203,.32);box-shadow:0 30px 60px -36px rgba(47,233,203,.4)}
.fcard .no{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--teal);letter-spacing:.04em}
.fcard h3{font-weight:700;font-size:18.5px;letter-spacing:-.01em;margin:14px 0 9px}
.fcard p{font-size:14.5px;line-height:1.6;color:var(--mut);margin:0}

/* real-breakdown link cards (case studies, new style) */
.bdcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(18,28,46,.5),rgba(8,14,24,.4));padding:22px 22px 24px;transition:transform .3s,border-color .3s,box-shadow .3s}
.bdcard:hover{transform:translateY(-4px);border-color:rgba(47,233,203,.32);box-shadow:0 30px 60px -36px rgba(47,233,203,.4)}
.bdcard .cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2)}
.bdcard h3{font-weight:700;font-size:18px;letter-spacing:-.01em;margin:12px 0 8px}
.bdcard p{font-size:14px;line-height:1.55;color:var(--mut);margin:0 0 14px}
.bdcard .go{margin-top:auto;font-family:var(--mono);font-size:13px;color:var(--teal);font-weight:600}

/* misc */
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:999px;border:1px solid rgba(47,233,203,.32);background:rgba(47,233,203,.06)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);animation:wv-pulse 2.4s ease-in-out infinite}
.caret{display:inline-block;width:2px;height:20px;margin-left:2px;vertical-align:-3px;background:var(--teal);animation:wv-blink 1s step-end infinite}
.chip{display:inline-block;font-family:var(--mono);font-size:12.5px;color:#9DB0C9;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:9px 15px;cursor:pointer;text-decoration:none;transition:all .22s}
.chip:hover{border-color:rgba(47,233,203,.5);color:var(--ink);background:rgba(47,233,203,.07)}
.chip.chip-active{border-color:rgba(47,233,203,.6);color:var(--ink);background:rgba(47,233,203,.1)}

/* inline breakdown reveal (clicking an example chip) */
.bd{max-width:680px;margin:34px auto 0;text-align:left;border-radius:20px;border:1px solid rgba(47,233,203,.28);background:linear-gradient(180deg,#0C1626,#080F1B);box-shadow:0 50px 110px -50px rgba(0,0,0,.9);overflow:hidden;opacity:0;transform:translateY(12px);transition:opacity .45s cubic-bezier(.16,.84,.44,1),transform .45s cubic-bezier(.16,.84,.44,1)}
.bd.in{opacity:1;transform:none}
.bd .bd-h{padding:20px 24px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.bd .bd-cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#7DE9D6}
.bd .bd-title{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;margin-top:6px}
.bd .bd-call{display:flex;gap:10px;align-items:flex-start;padding:16px 24px;background:rgba(47,233,203,.06);border-bottom:1px solid rgba(255,255,255,.06);font-size:15px;color:#D7E3F2;line-height:1.5}
.bd .bd-call .ck{color:var(--teal);font-weight:700}
.bd .bd-call b{color:var(--teal)}
.bd .bd-rows{padding:6px 24px 8px}
.bd .bd-foot{padding:16px 24px 22px}
.bd .bd-foot a{font-family:var(--mono);font-size:13px;color:var(--teal);font-weight:600;text-decoration:none}
.bd .bd-foot a:hover{text-decoration:underline}

/* ===== Legal pages (/terms, /privacy) ===== */
.legalbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:rgba(7,12,22,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.legalbar .logo span{font-size:19px}
.legalback{font-family:var(--mono);font-size:13px;color:var(--mut);text-decoration:none}
.legalback:hover{color:var(--teal)}
.legal{max-width:760px;margin:0 auto;padding:48px 24px 40px;position:relative;z-index:2}
.legal .legal-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal)}
.legal h1{font-family:var(--display);font-weight:800;font-size:clamp(32px,5vw,46px);letter-spacing:-.03em;margin:14px 0 6px}
.legal .legal-updated{font-family:var(--mono);font-size:13px;color:var(--mut2);margin-bottom:8px}
.legal h2{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.6vw,25px);letter-spacing:-.02em;margin:36px 0 10px;padding-top:22px;border-top:1px solid var(--line)}
.legal h3{font-weight:700;font-size:15.5px;margin:18px 0 6px;color:var(--ink)}
.legal p{color:var(--mut);line-height:1.7;font-size:15.5px;margin:0 0 14px}
.legal ul{color:var(--mut);line-height:1.7;font-size:15.5px;margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal strong{color:var(--ink)}
.legal a{color:var(--teal);text-decoration:none}
.legal a:hover{text-decoration:underline}
.legal .legal-callout{font-size:14.5px;line-height:1.6;color:var(--ink);background:rgba(47,233,203,.06);border:1px solid rgba(47,233,203,.22);border-radius:12px;padding:16px 18px;margin:0 0 18px}
.legal .legal-caps{font-size:13px;line-height:1.65;color:var(--mut)}
.legal .legal-note{font-size:13.5px;color:var(--mut2);border-left:2px solid var(--line);padding-left:14px;margin:6px 0 22px}
.site-foot{border-top:1px solid rgba(255,255,255,.06);max-width:1180px;margin:40px auto 0;padding:30px 28px 56px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.site-foot .legal-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:13px}
.site-foot a{color:var(--mut);text-decoration:none}
.site-foot a:hover{color:var(--teal)}

/* ============================================================
   Change 1 — Waivo Edge / X toggle module
   ============================================================ */
.askmode-toggle{display:inline-flex;gap:4px;padding:5px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);margin:6px auto 30px}
.askmode-btn{display:inline-flex;align-items:center;gap:8px;border:none;background:transparent;color:#9DB0C9;font-family:var(--body);font-size:15px;font-weight:700;padding:10px 18px;border-radius:10px;cursor:pointer;transition:background .2s,color .2s}
.askmode-btn:hover{color:var(--ink)}
.askmode-btn.active{background:var(--teal);color:#06140F}
.askmode-btn .mlogo{width:18px;height:18px;display:block;border-radius:50%}
.askmode-btn .xicon{width:15px;height:15px;display:block;fill:currentColor}
.askmode-badge{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:999px;background:rgba(47,233,203,.18);color:var(--teal);border:1px solid rgba(47,233,203,.4)}
.askmode-btn.active .askmode-badge{background:rgba(6,20,15,.18);color:#06140F;border-color:rgba(6,20,15,.3)}
@keyframes askmode-nudge{0%,100%{transform:none}30%{transform:translateY(-3px)}60%{transform:translateY(0)}}
.askmode-btn.nudge{animation:askmode-nudge .9s ease 1}
.askmode-area{min-height:300px}
.askmode-pane{display:none}
.askmode-pane.active{display:block;animation:askfade .28s cubic-bezier(.16,.84,.44,1)}
@keyframes askfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* X mode */
.xwrap{max-width:600px;margin:0 auto}
.xcaption{color:var(--mut);font-size:14.5px;margin:0 auto 18px;max-width:520px;line-height:1.55}
.xcompose{display:flex;gap:12px;align-items:center;background:#000;border:1px solid #2F3336;border-radius:16px;padding:14px 16px;text-align:left}
.xcompose .xav{width:40px;height:40px;border-radius:50%;background:#16181C;flex:none;border:1px solid #2F3336}
.xcompose .xph{flex:1;color:#71767B;font-size:15.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xcompose .xpost{flex:none;background:#1D9BF0;color:#fff;border:none;border-radius:999px;padding:8px 18px;font-weight:700;font-size:14px;cursor:pointer;transition:background .2s,transform .15s}
.xcompose .xpost:hover{background:#1a8cd8;transform:translateY(-1px)}
.xcompose .xph.filled{color:#E7E9EA}
.xhint{text-align:center;color:#71767B;font-family:var(--mono);font-size:13px;padding:24px 0 6px}
.xchips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 0}
.xchip{font-family:var(--body);font-size:13.5px;font-weight:600;color:#9DB0C9;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:9px 15px;cursor:pointer;transition:all .2s}
.xchip:hover{border-color:#1D9BF0;color:var(--ink)}
.xchip.active{border-color:#1D9BF0;background:rgba(29,155,240,.14);color:#fff}
.xthread{max-width:560px;margin:24px auto 0;text-align:left;background:#000;border:1px solid #2F3336;border-radius:18px;overflow:hidden;animation:askfade .3s cubic-bezier(.16,.84,.44,1)}
.xtweet{display:flex;gap:12px;padding:16px}
.xtweet + .xtweet{border-top:1px solid #2F3336}
.xav-init{width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:15px;background:linear-gradient(135deg,#3a4a5a,#22303a)}
.xav-waivo{width:44px;height:44px;border-radius:50%;flex:none;background:#06140F;border:1px solid #1f3a33;display:flex;align-items:center;justify-content:center}
.xav-waivo img{width:30px;height:30px;border-radius:50%}
.xbody{flex:1;min-width:0}
.xname{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.xname b{color:#E7E9EA;font-size:15px;font-weight:700}
.xname .xhandle{color:#71767B;font-size:14px;font-weight:400}
.xverified{width:16px;height:16px;fill:#1D9BF0;flex:none}
.xtext{color:#E7E9EA;font-size:15px;line-height:1.45;margin-top:3px}
.xtext .xmention{color:#1D9BF0}
.xverdict{color:#E7E9EA;font-size:15px;line-height:1.5;margin-top:3px}
.xmattered{margin:12px 0 0;padding:0;list-style:none}
.xmattered li{color:#C4C9CE;font-size:14px;line-height:1.5;padding-left:16px;position:relative;margin-bottom:7px}
.xmattered li::before{content:'•';position:absolute;left:0;color:#71767B}
.xmattered li b{color:#E7E9EA}
.xcall{margin-top:12px;color:#E7E9EA;font-size:14.5px;line-height:1.5}
.xcall b{color:#2FE9CB}
.xcard{margin-top:14px;border:1px solid #2F3336;border-radius:14px;overflow:hidden;background:#0A0F16}
.xcard .xc-eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#7DE9D6;padding:12px 14px 0}
.xcard .xc-title{font-family:var(--display);font-weight:800;font-size:16px;color:#E7E9EA;padding:4px 14px 0}
.xcard .xc-rows{padding:10px 14px}
.xcard .xc-row{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12.5px;padding:5px 0;border-top:1px solid rgba(255,255,255,.06)}
.xcard .xc-row:first-child{border-top:none}
.xcard .xc-row .k{color:#8FA1BA}
.xcard .xc-row .v{color:#2FE9CB}
.xcard .xc-foot{padding:11px 14px;border-top:1px solid #2F3336;font-family:var(--mono);font-size:12px;color:#8FA1BA}
.xcard .xc-foot b{color:#E7E9EA}
.xeng{display:flex;gap:24px;padding:4px 16px 16px;color:#71767B;font-size:13px;font-family:var(--mono)}
.xeng span{display:inline-flex;align-items:center;gap:6px}
.xanalyzing{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid #2F3336;color:#71767B;font-family:var(--mono);font-size:13px}
.xcta{margin-top:24px}

/* ============================================================
   Change 2 — Real ripple (Seattle case study) tiles
   ============================================================ */
.rip-legend{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--mut2);text-align:center;margin:0 0 22px}
.rip-legend b{color:var(--ink);font-weight:700}
.rip-sel{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 26px}
.rip-pill{font-family:var(--mono);font-size:13px;font-weight:700;color:#9DB0C9;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:9px 18px;cursor:pointer;transition:all .2s}
.rip-pill:hover{border-color:rgba(47,233,203,.5);color:var(--ink)}
.rip-pill.active{background:rgba(47,233,203,.12);border-color:var(--teal);color:var(--teal)}
.rip-pos{border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.02);padding:22px 22px 24px;margin-bottom:16px;animation:askfade .3s cubic-bezier(.16,.84,.44,1)}
.rip-pos .rp-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rip-pos .rp-pos{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--teal)}
.rip-pos .rp-name{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.rip-pos .rp-verdict{font-size:14.5px;color:var(--mut);font-style:italic}
.rip-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:18px}
.rip-tile{border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02);padding:14px}
.rip-tile .t-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut2);line-height:1.4;min-height:28px}
.rip-tile .t-vals{display:flex;align-items:baseline;gap:7px;margin-top:10px;font-family:var(--display);font-weight:800;font-size:17px}
.rip-tile .t-before{color:var(--mut2)}
.rip-tile .t-arrow{color:var(--mut2);font-size:12px}
.rip-tile .t-chg{font-family:var(--mono);font-size:12px;margin-top:7px;font-weight:700}
.rip-tile.bad{border-color:rgba(255,107,107,.32);background:rgba(255,107,107,.05)}
.rip-tile.bad .t-after{color:#FF8585}
.rip-tile.bad .t-chg{color:#FF8585}
.rip-tile.good{border-color:rgba(47,233,203,.32);background:rgba(47,233,203,.05)}
.rip-tile.good .t-after{color:#2FE9CB}
.rip-tile.good .t-chg{color:#2FE9CB}
.rip-tile.neutral .t-after{color:var(--ink)}
.rip-tile.neutral .t-chg{color:var(--mut)}
.rip-why{font-size:14px;line-height:1.6;color:var(--mut);margin-top:16px;border-left:2px solid var(--line);padding-left:14px}
.rip-note{font-size:12.5px;color:var(--mut2);font-style:italic;margin-top:10px;line-height:1.5}
.rip-punch{margin-top:30px;border-radius:18px;border:1px solid rgba(47,233,203,.22);background:rgba(47,233,203,.05);padding:24px 26px;font-size:16px;line-height:1.65;color:var(--ink)}
.rip-punch b{color:var(--teal)}
.rip-foot{font-size:12.5px;color:var(--mut2);text-align:center;margin-top:18px;line-height:1.55;font-style:italic}

/* ===== Footer disclaimer line (all pages) ===== */
.foot-note{flex-basis:100%;width:100%;font-size:11.5px;color:var(--mut2);line-height:1.55;margin-top:10px}
.foot-note a{color:var(--mut);text-decoration:underline}
.foot-note a:hover{color:var(--teal)}

/* ===== Hero manifesto (one-time reveal) ===== */
.manifesto{max-width:840px;margin:0 auto}
.manifesto .m-body{font-family:var(--body);font-weight:500;font-size:clamp(19px,2.5vw,27px);line-height:1.5;color:var(--ink);max-width:760px;margin:0 auto;text-wrap:pretty}
.manifesto .m-payoff{font-family:var(--display);font-weight:900;font-size:clamp(40px,7vw,80px);letter-spacing:-.035em;line-height:1;margin-top:36px;color:var(--teal);text-shadow:0 0 40px rgba(47,233,203,.35)}
/* Progressive enhancement: default = final state. Animation only when JS adds .animate */
.manifesto{transition:transform .7s cubic-bezier(.16,.84,.44,1)}
.manifesto.animate{transform:translateY(14px)}
.manifesto.animate.go{transform:none}
.manifesto .mseg{transition:opacity .55s ease}
.manifesto.animate .mseg{opacity:0}
.manifesto.animate .mseg.in{opacity:1}
@media (prefers-reduced-motion: reduce){
  .manifesto{transform:none!important}
  .manifesto .mseg{opacity:1!important}
}

/* ===== Intro splash gate (one-time, full-screen) ===== */
.intro{position:fixed;inset:0;z-index:1000;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;overflow:hidden;color:#EAF1FB;font-family:var(--body);
  background:radial-gradient(120% 90% at 50% -10%, #0A1726 0%, #060C16 42%, #04080F 100%)}
.intro.show{display:flex}
.intro.closing{opacity:0;transform:scale(1.06);filter:blur(6px);pointer-events:none;
  transition:opacity .8s ease, transform .8s cubic-bezier(.16,.84,.44,1), filter .8s ease}

/* ambient layers */
.intro-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.intro-wave{position:absolute;top:-70px;right:-150px;z-index:0;opacity:.5;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 42%,transparent 82%);mask-image:radial-gradient(closest-side,#000 42%,transparent 82%)}
@media (max-width:760px){ .intro-wave{right:-230px;top:-110px;opacity:.34} }
.intro-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 38%, rgba(0,0,0,.55), transparent 72%);mask-image:radial-gradient(120% 80% at 50% 38%, rgba(0,0,0,.55), transparent 72%)}
.intro-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.intro-glow.g1{width:620px;height:620px;left:-160px;top:-120px;background:radial-gradient(closest-side, rgba(47,233,203,.32), transparent 70%);animation:intro-drift1 20s ease-in-out infinite}
.intro-glow.g2{width:680px;height:680px;right:-200px;bottom:-160px;background:radial-gradient(closest-side, rgba(34,140,200,.28), transparent 70%);animation:intro-drift2 22s ease-in-out infinite}
.intro-horizon{position:absolute;left:50%;bottom:23%;width:560px;max-width:82%;height:170px;transform:translateX(-50%);background:radial-gradient(60% 80% at 50% 100%, rgba(47,233,203,.22), transparent 70%);filter:blur(26px)}
.intro-scan{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg, transparent, rgba(47,233,203,.5), transparent);opacity:.5;animation:intro-scan 9s linear infinite}
.intro-vignette{position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(2,5,10,.72))}
.intro-stars{position:absolute;inset:0}
.intro-star{position:absolute;width:3px;height:3px;border-radius:50%;background:#2FE9CB;opacity:0;box-shadow:0 0 6px rgba(47,233,203,.8);animation:intro-twinkle 3s ease-in-out infinite}
.intro-star.float{animation:intro-float 8s linear infinite}

/* content */
.intro-inner{position:relative;z-index:2;max-width:840px;display:flex;flex-direction:column;align-items:center}
.intro-pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;color:#7DE9D6;border:1px solid rgba(47,233,203,.3);background:rgba(47,233,203,.05);border-radius:999px;padding:7px 16px;
  animation:intro-rise .8s cubic-bezier(.16,.84,.44,1) .1s both}
.intro-dot{width:7px;height:7px;border-radius:50%;background:#2FE9CB;box-shadow:0 0 10px #2FE9CB;animation:intro-dotpulse 2.4s ease-in-out infinite}
.intro-para{max-width:680px;margin:30px auto 0;font-size:clamp(17px,2.1vw,21px);line-height:1.66;color:#AEBFD6;text-wrap:pretty;
  animation:intro-rise .8s cubic-bezier(.16,.84,.44,1) .22s both}
.intro-para strong{color:#fff;font-weight:700}
.intro-para strong.teal{color:#2FE9CB}
.intro-wordmark{font-family:var(--display);font-weight:900;font-size:clamp(50px,9vw,116px);letter-spacing:-.04em;line-height:1;margin:34px 0 0;
  background:linear-gradient(180deg,#EAFFFA 0%,#2FE9CB 60%,#16B89E 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 46px rgba(47,233,203,.45));
  animation:intro-rise-word 1s cubic-bezier(.16,.84,.44,1) .5s both}
.intro-enter{position:relative;overflow:hidden;margin-top:44px;display:inline-flex;align-items:center;gap:10px;height:62px;padding:0 34px;border:none;border-radius:16px;
  background:linear-gradient(180deg,#5BF4DA,#2FE9CB 55%,#23C9AE);color:#04130F;font-family:var(--body);font-size:16px;font-weight:700;cursor:pointer;
  box-shadow:0 18px 44px -16px rgba(47,233,203,.8);
  animation:intro-rise .8s cubic-bezier(.16,.84,.44,1) .9s both, intro-breathe 3.2s ease-in-out 2s infinite;
  transition:transform .2s cubic-bezier(.16,.84,.44,1)}
.intro-enter:hover{transform:translateY(-3px) scale(1.03)}
.intro-enter .intro-arrow{display:inline-block;animation:intro-bob 1.8s ease-in-out infinite}
.intro-enter::after{content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);transform:skewX(-18deg);animation:intro-gloss 4.6s ease-in-out 2.2s infinite}

/* exit spinner (crisp; sits above the blurring gate) */
.intro-spinner{position:fixed;inset:0;z-index:1001;display:none;align-items:center;justify-content:center;pointer-events:none}
.intro-spinner.show{display:flex;animation:intro-fadein .3s ease both}
.intro-spinner i{width:34px;height:34px;border-radius:50%;border:3px solid rgba(47,233,203,.25);border-top-color:#2FE9CB;animation:intro-spin .7s linear infinite}

/* keyframes */
@keyframes intro-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes intro-rise-word{from{opacity:0;transform:translateY(26px) scale(.94);filter:blur(14px) drop-shadow(0 0 46px rgba(47,233,203,.45))}to{opacity:1;transform:none;filter:blur(0) drop-shadow(0 0 46px rgba(47,233,203,.45))}}
@keyframes intro-dotpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
@keyframes intro-drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes intro-drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-30px)}}
@keyframes intro-scan{0%{top:-2%}100%{top:102%}}
@keyframes intro-twinkle{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:.9;transform:scale(1)}}
@keyframes intro-float{0%{opacity:0;transform:translateY(20px) scale(.8)}20%{opacity:.85}100%{opacity:0;transform:translateY(-70px) scale(1)}}
@keyframes intro-breathe{0%,100%{box-shadow:0 18px 44px -16px rgba(47,233,203,.8)}50%{box-shadow:0 18px 64px -10px rgba(47,233,203,1)}}
@keyframes intro-bob{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes intro-gloss{0%,100%{left:-60%}55%,72%{left:130%}}
@keyframes intro-spin{to{transform:rotate(360deg)}}
@keyframes intro-fadein{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion: reduce){
  .intro-pill,.intro-para,.intro-wordmark,.intro-enter{animation:none!important;opacity:1!important;transform:none!important}
  .intro-wordmark{filter:none}
  .intro-glow,.intro-scan,.intro-star,.intro-dot,.intro-arrow{animation:none!important}
  .intro-enter::after{display:none}
  .intro.closing{transition:opacity .3s ease}
}

/* ============================================================
   Landing polish pass (presentation only)
   ============================================================ */

/* 1. Nav scroll-progress + active link */
.navprogress{position:absolute;left:0;bottom:-1px;height:2px;width:0;z-index:51;
  background:linear-gradient(90deg,#16B89E,#2FE9CB,#7DE9D6);box-shadow:0 0 12px rgba(47,233,203,.7);transition:width .12s linear}
.navlinks a.active{color:#EAF1FB;background:rgba(47,233,203,.12)}

/* 2. Numbered chapter markers */
.marker{display:inline-flex;align-items:center;gap:13px;margin-bottom:18px;vertical-align:middle}
.marker .num{font-family:var(--display);font-weight:800;font-size:18px;color:#2FE9CB;letter-spacing:-.02em;line-height:1}
.marker .rule{width:46px;height:1px;flex:none;background:linear-gradient(90deg,rgba(47,233,203,.75),transparent)}
.marker .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#7DE9D6;line-height:1.4}

/* 3. Section tonal "rooms" (full-bleed bands) */
.band-section{position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;
  padding:104px 28px;border-bottom:1px solid rgba(0,0,0,.45)}
.band-section > .band-inner{max-width:1180px;margin:0 auto}
.band-blue{background:radial-gradient(130% 72% at 50% 0%,rgba(120,170,255,.13),transparent 58%),linear-gradient(180deg,#0E2238,#0B1A2D);
  border-top:1px solid rgba(130,175,255,.26);box-shadow:inset 0 1px 0 rgba(150,190,255,.20)}
.band-teal{background:radial-gradient(130% 72% at 50% 0%,rgba(47,233,203,.15),transparent 58%),linear-gradient(180deg,#08231F,#0A1A1D);
  border-top:1px solid rgba(47,233,203,.34);box-shadow:inset 0 1px 0 rgba(47,233,203,.26)}

/* 4. Editorial moment band */
.editorial-band{position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw;
  padding:128px 28px;text-align:center;background:radial-gradient(closest-side at 50% 50%,rgba(47,233,203,.10),transparent 62%)}
.editorial-band > .band-inner{max-width:1180px;margin:0 auto}

/* 5. Gradient-clipped headlines */
.gradtext{background:linear-gradient(180deg,#EAFFFA,#2FE9CB 58%,#16B89E);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 40px rgba(47,233,203,.42))}

/* 6. Polished primary CTAs */
.cta-primary{position:relative;overflow:hidden;background:linear-gradient(180deg,#5BF4DA,#2FE9CB 55%,#23C9AE)!important;color:#04130F!important;
  box-shadow:0 18px 44px -16px rgba(47,233,203,.8);animation:cta-breathe 3.4s ease-in-out infinite;transition:transform .2s cubic-bezier(.16,.84,.44,1)}
.cta-primary:hover{transform:translateY(-2px) scale(1.02)}
.cta-primary::after{content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);animation:cta-gloss 5s ease-in-out 1.5s infinite}
.cta-primary .cta-arrow{display:inline-block;animation:cta-bob 1.8s ease-in-out infinite}
@keyframes cta-breathe{0%,100%{box-shadow:0 18px 44px -16px rgba(47,233,203,.8)}50%{box-shadow:0 18px 62px -10px rgba(47,233,203,1)}}
@keyframes cta-gloss{0%,100%{left:-60%}55%,72%{left:130%}}
@keyframes cta-bob{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* 7. Hero scroll cue */
.scrollcue{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:46px}
.scrollcue .sc-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;color:var(--mut2)}
.scrollcue .sc-arrow{color:var(--teal);font-size:18px;line-height:1;animation:sc-bob 1.6s ease-in-out infinite}
@keyframes sc-bob{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(6px);opacity:1}}

@media (prefers-reduced-motion: reduce){
  .cta-primary,.cta-primary::after,.cta-primary .cta-arrow,.scrollcue .sc-arrow{animation:none!important}
}

/* ===== Wave mark + wave flair ===== */
.logo canvas.wavemark{display:block;flex:none}
.logo .dotai{color:var(--teal)}
.hero-wave{position:absolute;top:52%;right:-150px;transform:translateY(-50%);z-index:0;opacity:.62;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 54%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 54%,#000 88%,transparent)}
.stat-wave{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;opacity:.4;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent 76%);mask-image:radial-gradient(closest-side,#000,transparent 76%)}
@media (max-width:760px){ .hero-wave{right:-230px;opacity:.42} }