/* ==========================================================================
   Midebo marketing site — "Beacon" design system (Light default + Dark)
   Brand: black #05080F + blue #004898 (light grounds) / #00A0F0 (dark).
   Sampled from the mascot; gold #C9A24B retired 2026-07-29.
   Tokens drive everything; components never hardcode a theme colour.
   ========================================================================== */
/* The brand wordmark, so "Midebo" in the headline is set in the real logo face
   rather than approximated in Poppins. Subset — it carries the wordmark glyphs only. */
@font-face{
  font-family:"MidebGeo";
  src:url("/static/fonts/midebgeo.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Poppins";
  src:url("/static/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  /* Beacon — LIGHT (default) */
  --ground:#EFF4FA; --surface:#FFFFFF; --surface-2:#F3F7FC; --inset:#FAFCFE;
  --line:#DCE5EF; --line-soft:#E8EEF6;
  --ink:#0D1522; --ink-soft:#4A5A68; --ink-mute:#7D8BA0;
  --navy:#05080F; --navy-lift:#14263D; --on-navy:#FFFFFF;
  --accent:#004898; --accent-deep:#003A7A; --gold-soft:#00A0F0;
  --hero-tint:radial-gradient(1100px 460px at 82% -18%,#E4EEFA,transparent);
  --btn-bg:#004898; --btn-ink:#FFFFFF; --btn2-bg:transparent; --btn2-ink:#0D1522; --btn2-line:#CBD5E1;
  --ok:#2E8B67; --ok-bg:#E7F3EC;
  --radius:14px; --radius-lg:20px;
  --shadow:0 1px 2px rgba(20,35,63,.05), 0 14px 34px rgba(20,35,63,.08);
  --shadow-lg:0 2px 4px rgba(20,35,63,.06), 0 22px 50px rgba(20,35,63,.12);
  --disp:"Poppins",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1120px;
}
/* Beacon LIGHT is the brand default — we intentionally do NOT auto-switch to
   dark on prefers-color-scheme. Dark is opt-in only, via the header toggle
   (which stamps :root[data-theme="dark"]). */
:root[data-theme="light"]{
  --ground:#EFF4FA; --surface:#FFFFFF; --surface-2:#F3F7FC; --inset:#FAFCFE;
  --line:#DCE5EF; --line-soft:#E8EEF6; --ink:#0D1522; --ink-soft:#4A5A68; --ink-mute:#7D8BA0;
  --accent:#004898; --accent-deep:#003A7A; --gold-soft:#00A0F0;
  --hero-tint:radial-gradient(1100px 460px at 82% -18%,#E4EEFA,transparent);
  --btn-bg:#004898; --btn-ink:#FFFFFF; --btn2-ink:#0D1522; --btn2-line:#CBD5E1;
  --ok:#2E8B67; --ok-bg:#E7F3EC;
  --shadow:0 1px 2px rgba(20,35,63,.05), 0 14px 34px rgba(20,35,63,.08);
  --shadow-lg:0 2px 4px rgba(20,35,63,.06), 0 22px 50px rgba(20,35,63,.12);
}
:root[data-theme="dark"]{
  --ground:#070E1A; --surface:#0E1B2E; --surface-2:#0A1526; --inset:#0C1728;
  --line:#22385A; --line-soft:#1B2E4C; --ink:#EAF0FA; --ink-soft:#A5B4CE; --ink-mute:#7E8FAB;
  --accent:#00A0F0; --accent-deep:#00C8F8; --gold-soft:#00C8F8;
  --hero-tint:radial-gradient(1100px 480px at 82% -20%,#0E2B4A,transparent);
  --btn-bg:#00A0F0; --btn-ink:#05080F; --btn2-ink:#EAF0FA; --btn2-line:#24405F;
  --ok:#5FC49A; --ok-bg:#12321F;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 16px 38px rgba(0,0,0,.4);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 24px 54px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
  line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.center{text-align:center}

/* ---- type ---- */
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:-.022em;line-height:1.08;
  text-wrap:balance;margin:0}
.eyebrow{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-deep)}
:root[data-theme="dark"] .eyebrow{color:var(--accent)}
.lede{font-size:clamp(16px,1.6vw,19px);color:var(--ink-soft);max-width:60ch}
/* the headline wordmark: black "Mide" + blue "bo", matching the logo exactly —
   --accent is #004898 on light and #00A0F0 on dark, which is what the logo uses */
.wordmark{font-family:"MidebGeo",var(--disp);font-weight:600;letter-spacing:-.012em}
.wordmark .wm-mi{color:var(--ink)}
.wordmark .wm-bo{color:var(--accent)}
/* "ringing" shakes the way a phone actually rings: a short burst, then a long
   gap. The gap is the taste knob — ~8.7s here reads as occasional; drop it much
   below 4s and it stops being a detail and becomes a tic. */
.ring{display:inline-block;transform-origin:50% 72%}
/* A booking landing. The tick draws the eye, the card follows it in. */
@media (prefers-reduced-motion:no-preference){
  /* ⚠️ `forwards` is load-bearing. .float-chip's base is opacity:0 (the entrance
     rule below holds it visible with its own forwards), so an unfilled animation
     here reverts to invisible the instant it ends — the chip flashed and vanished.
     opacity:1 is belt-and-braces for the frame where .landing is toggled off to
     restart the animation. */
  .float-chip.landing{opacity:1;animation:chipLand .62s cubic-bezier(.2,.8,.25,1) forwards}
  .float-chip.landing svg{animation:tickPop .62s cubic-bezier(.2,.8,.25,1) forwards}
}
@keyframes chipLand{
  0%{opacity:0;transform:translateY(12px) scale(.97)}
  60%{opacity:1}
  100%{opacity:1;transform:none}
}
@keyframes tickPop{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
@media (prefers-reduced-motion:no-preference){
  .ring{animation:ringShake 10.2s ease-in-out 1.4s infinite}
}
@keyframes ringShake{
  0%{transform:rotate(0)}
  1.5%{transform:rotate(-4.5deg)}  3%{transform:rotate(4.5deg)}
  4.5%{transform:rotate(-3deg)}    6%{transform:rotate(3deg)}
  7.5%{transform:rotate(0)}
  9%{transform:rotate(-4.5deg)}    10.5%{transform:rotate(4.5deg)}
  12%{transform:rotate(-3deg)}     13.5%{transform:rotate(3deg)}
  15%,100%{transform:rotate(0)}
}

/* ---- section rhythm ---- */
section{padding:clamp(52px,8vw,92px) 0}
section.tight{padding:clamp(36px,5vw,56px) 0}
.sec-head{max-width:62ch;margin:0 auto clamp(30px,4vw,44px);text-align:center}
.sec-head h2{font-size:clamp(26px,3.4vw,38px);margin:12px 0 10px}
.sec-head p{color:var(--ink-soft);margin:0;font-size:clamp(15px,1.5vw,17px)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;
  font-size:15px;line-height:1;padding:13px 22px;border-radius:11px;border:1px solid transparent;
  cursor:pointer;transition:transform .12s,filter .12s,border-color .12s,background .12s}
.btn:hover{transform:translateY(-1px)}
.btn.sm{padding:9px 15px;font-size:14px}
.btn-primary{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--btn2-bg);color:var(--btn2-ink);border-color:var(--btn2-line)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-onnavy{background:var(--gold-soft);color:#05080F;border-color:var(--gold-soft)}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.nav .row{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600;
  font-size:21px;letter-spacing:-.01em;color:var(--ink)}
.brand .bo{color:var(--accent)}
.brand svg{width:31px;height:28px;flex:none}
.nav-links{display:flex;gap:26px;margin-left:10px}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-soft);padding:6px 0;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink);border-bottom-color:var(--accent)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.navlogin{font-size:14px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.navlogin:hover{color:var(--ink)}
@media (max-width:780px){.navlogin{display:none}}
.theme-toggle{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;flex:none}
.theme-toggle:hover{color:var(--ink);border-color:var(--accent)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}
.nav-burger{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer}
@media (max-width:780px){
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);padding:8px 22px 16px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--line-soft)}
  .nav-cta .btn-ghost{display:none}
  .nav-burger{display:grid;place-items:center}
}

/* ---- hero ---- */
.hero{background:var(--hero-tint);border-bottom:1px solid var(--line-soft)}
/* The band above the eyebrow was ~162px, which is a lot of nothing before the
   first thing anyone reads. Roughly halved. */
.hero:has(.collage){padding-top:26px}
.hero .row:has(.collage){padding-top:clamp(24px,3.4vw,42px)}
.hero .row{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4vw,56px);
  align-items:center;padding:clamp(48px,7vw,84px) 22px}   /* keep .wrap's 22px gutter:
     a `... 0` shorthand here wipes it and the hero bleeds edge-to-edge under ~1160px */
.hero h1{font-size:clamp(32px,5.4vw,56px);margin:16px 0 16px}
.hero .lede{margin:0 0 26px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .trust{margin:22px 0 0;font-size:13.5px;color:var(--ink-soft);padding-left:14px;
  border-left:3px solid var(--accent)}
@media (max-width:820px){.hero .row{grid-template-columns:1fr}}

/* call-card visual */
.callcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px;box-shadow:var(--shadow-lg)}
.cc-top{display:flex;align-items:center;gap:10px}
.cc-dot{width:9px;height:9px;border-radius:50%;background:#34d399;
  box-shadow:0 0 0 4px rgba(52,211,153,.2)}
.cc-live{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.cc-wave{margin-left:auto;display:flex;align-items:flex-end;gap:3px;height:22px}
.cc-wave i{width:3px;background:var(--accent);border-radius:2px;animation:wv 1.1s ease-in-out infinite}
.cc-wave i:nth-child(1){height:40%}.cc-wave i:nth-child(2){height:78%;animation-delay:.12s}
.cc-wave i:nth-child(3){height:100%;animation-delay:.24s}.cc-wave i:nth-child(4){height:58%;animation-delay:.36s}
.cc-wave i:nth-child(5){height:86%;animation-delay:.48s}.cc-wave i:nth-child(6){height:34%;animation-delay:.6s}
@keyframes wv{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.cc-bubbles{margin:15px 0;display:flex;flex-direction:column;gap:8px}
.bub{font-size:13.5px;padding:9px 13px;border-radius:13px;max-width:86%;line-height:1.4}
.bub.them{background:var(--surface-2);color:var(--ink);border-bottom-left-radius:3px;align-self:flex-start}
.bub.ai{background:var(--navy);color:#fff;border-bottom-right-radius:3px;align-self:flex-end}
.cc-booked{display:flex;align-items:center;gap:9px;background:var(--ok-bg);color:var(--ok);
  border-radius:11px;padding:11px 13px;font-size:13.5px;font-weight:600}
.cc-booked svg{width:17px;height:17px;flex:none}

/* ---- verticals: uniform trade grid ---- */
.verts{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:920px;margin:0 auto}
@media (max-width:820px){.verts{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.verts{grid-template-columns:repeat(2,1fr)}}
.vchip{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:13px 10px;font-size:13.5px;font-weight:600;
  color:var(--ink-soft);text-align:center;box-shadow:var(--shadow)}
.vchip svg{width:16px;height:16px;color:var(--accent);flex:none}
/* Catch-all bar: spans the whole grid under the trade chips so an unlisted trade
   is invited in rather than bouncing. Accent-tinted so it reads as a statement,
   not as a 16th trade. */
.vchip-all{grid-column:1/-1;background:transparent;border:1px dashed var(--accent);
  color:var(--ink);font-size:14.5px;padding:15px 14px;box-shadow:none}

/* ---- stats band ---- */
.statwrap{background:linear-gradient(180deg,#E4EDF8,#F2F7FC);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.statwrap > .wrap{position:relative;z-index:1}
:root[data-theme="dark"] .statwrap{background:linear-gradient(180deg,#0B1728,#070E1A)}
.statwave{position:absolute;inset:0;display:flex;align-items:center;gap:6px;padding:0 22px;
  opacity:.16;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.statwave i{flex:1;min-width:2px;background:var(--accent);border-radius:2px;
  transform:scaleY(.6);transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .statwave i{animation:swave 3.4s ease-in-out infinite}
  @keyframes swave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr);gap:26px}}
.stat .big{font-family:var(--disp);font-weight:600;font-size:clamp(28px,4vw,42px);color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.stat .lbl{font-size:13.5px;color:var(--ink-soft);margin:8px auto 0;max-width:22ch}

/* ---- split section (image + copy) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.split-media img{width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);display:block}
.split-copy h2{font-size:clamp(24px,3vw,34px);margin:10px 0 14px}
.split-copy .lede{margin:0 0 20px}

/* ---- feature cards ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:820px){.cards{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow)}
.card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--accent-deep);margin-bottom:14px}
:root[data-theme="dark"] .card .ic{color:var(--accent)}
.card .ic svg{width:22px;height:22px}
.card h3{font-size:19px;margin:0 0 7px}
.card p{margin:0;color:var(--ink-soft);font-size:15px}

/* ---- steps (how) ---- */
.steps{display:flex;flex-direction:column;gap:0;max-width:760px;margin:0 auto}
.step{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line-soft)}
.step:last-child{border-bottom:0}
.step .n{width:40px;height:40px;border-radius:11px;background:var(--navy);color:#fff;
  font-family:var(--disp);font-weight:600;font-size:17px;display:grid;place-items:center}
.step h3{font-size:18px;margin:6px 0 5px}
.step p{margin:0;color:var(--ink-soft);font-size:15px}

/* ---- cast table (how) ---- */
.cast{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:820px){.cast{grid-template-columns:1fr 1fr}}
.cast .c{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.cast .role{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.cast .who{font-family:var(--disp);font-weight:600;font-size:17px;margin:5px 0 4px}
.cast .does{font-size:13px;color:var(--ink-soft);margin:0 0 10px}
.tagchip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-mute)}
.tagchip.own{background:var(--accent);color:var(--btn-ink)}

/* ---- pricing ---- */
.plans{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:stretch}
@media (max-width:1000px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.plans{grid-template-columns:1fr}}
.plan{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow);position:relative}
.plan.featured{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),var(--shadow-lg)}
.plan .flag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--accent);color:var(--btn-ink);font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 12px;border-radius:999px}
.plan .pname{font-family:var(--disp);font-weight:600;font-size:19px}
.plan .pwho{font-size:12.5px;color:var(--ink-mute);margin:2px 0 12px;min-height:2.4em}
.plan .price{font-family:var(--disp);font-weight:600;font-size:40px;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.plan .price .per{font-size:15px;font-weight:600;color:var(--ink-soft)}
.plan .mins{font-size:13px;color:var(--ink-soft);margin:8px 0 2px;font-weight:600}
.plan .price.talk{font-size:30px;letter-spacing:-.02em;white-space:nowrap}
.plan .permin{font-size:12px;color:var(--ink-mute);margin:0 0 14px}
.plan ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.plan li{font-size:13.5px;color:var(--ink-soft);display:flex;gap:9px;align-items:flex-start}
.plan li svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:2px}
.plan .plan-all{font-size:12.5px;color:var(--ink-mute);margin-top:2px}
.plan .support{font-size:12px;color:var(--ink-mute);margin:0 0 14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.plan .btn{width:100%;justify-content:center}
/* Four stacked notes at gap:8 with each wrapping to two lines read as one grey
   wall. More air between them, a narrower column so lines break consistently,
   and a little more leading so each note is legible on its own. */
.price-notes{max-width:660px;margin:34px auto 0;display:flex;flex-direction:column;gap:18px}
.price-notes p{margin:0;font-size:13.5px;line-height:1.65;color:var(--ink-mute);text-align:center}

/* pricing "The details" card (2026-08-02) — Mike: "add this to a box or
   something so it looks better". Was nine centred paragraphs stacked in a
   column, which read as fine print and hid the overage answer inside it.
   ⚠️ Left-aligned on purpose. The old block was centred, which is fine for one
   line and unreadable for four — centred text gives the eye no fixed left edge
   to return to. */
.price-notes-card{
  max-width:980px;margin:40px auto 0;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:28px 30px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.05);
}
.price-notes-head{
  margin:0 0 18px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint,#7D8BA0);font-weight:700;
}
/* ⚠️ COLUMNS, NOT GRID. Grid was tried first and every row sized to its tallest
   cell, so a two-line note sitting beside a six-line one left a visible hole
   underneath it — the card read as broken rather than airy. Multi-column flows
   each note directly after the last, so notes of wildly different lengths pack
   without gaps, and adding or removing one needs no breakpoint retuning. */
.price-notes-grid{
  columns:3 280px;column-gap:34px;margin:0;
}
.price-note{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 22px;
}
.price-note dt{
  font-size:14px;font-weight:700;color:var(--ink);margin:0 0 5px;
}
.price-note dd{
  margin:0;font-size:13.5px;line-height:1.65;color:var(--ink-mute);
}
@media (max-width:640px){
  .price-notes-card{padding:22px 18px;border-radius:12px;margin-top:30px}
  .price-notes-grid{gap:18px}
}

/* ---- faq ---- */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2px 18px}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font-family:var(--disp);font-weight:600;
  font-size:16px;display:flex;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--accent);font-size:22px;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 16px;color:var(--ink-soft);font-size:14.5px}

/* ---- about / founders ---- */
.founders{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.founders{grid-template-columns:1fr}}
.founder{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.founder .fav{width:56px;height:56px;border-radius:14px;background:var(--navy);color:var(--gold-soft);
  display:grid;place-items:center;font-family:var(--disp);font-weight:600;font-size:22px;margin-bottom:14px}
.founder h3{font-size:19px;margin:0 0 2px}
.founder .frole{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:12px}
:root[data-theme="dark"] .founder .frole{color:var(--accent)}
.founder p{margin:0 0 12px;color:var(--ink-soft);font-size:14.5px}
.founder a{color:var(--accent-deep);font-weight:600;font-size:14px}
:root[data-theme="dark"] .founder a{color:var(--accent)}

/* ---- CTA band ---- */
.band{background:var(--navy);border-radius:var(--radius-lg);padding:clamp(34px,5vw,56px);text-align:center;
  color:var(--on-navy);box-shadow:var(--shadow-lg)}
.band h2{color:#fff;font-size:clamp(24px,3vw,34px);margin:0 0 12px}
.band p{color:#c3cee0;margin:0 auto 24px;max-width:52ch;font-size:16px}
.band .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.bandsplit{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(22px,4vw,42px);align-items:center;
  text-align:left;padding:clamp(20px,2.5vw,30px)}
@media (max-width:760px){.bandsplit{grid-template-columns:1fr}}
.bandsplit .band-media img{width:100%;height:auto;border-radius:var(--radius);display:block;
  box-shadow:0 12px 30px rgba(0,0,0,.32)}
.bandsplit h2{margin:0 0 12px}
.bandsplit p{margin:0 0 22px;max-width:44ch}
.bandsplit .cta{justify-content:flex-start}

/* ---- contact ---- */
/* `align-items:start` left the two boxes different heights; stretch matches them. */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;max-width:960px;margin:0 auto;align-items:stretch}
@media (max-width:760px){
  .contact-grid{grid-template-columns:1fr}
  /* Stacked, the form would land first and a phone visitor would meet a bare
     form with no "Let's talk" and no idea who they are writing to. Put the
     intro box first on mobile; desktop order is unchanged. */
  .contact-grid > .cbox:last-child{order:-1}
}
.cbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.cbox h3{font-size:19px;margin:0 0 8px}
.cbox p{color:var(--ink-soft);margin:0 0 16px;font-size:15px}
.cbox .who{font-weight:600;color:var(--ink)}
.cdiv{border:0;border-top:1px solid var(--line-soft);margin:22px 0 18px}

/* form */
.form{display:flex;flex-direction:column;gap:15px;margin-top:4px}
.field{display:flex;flex-direction:column;gap:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media (max-width:520px){.field-row{grid-template-columns:1fr}}
.form label{font-size:13px;font-weight:600;color:var(--ink)}
.form label .opt{font-weight:400;color:var(--ink-mute)}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:var(--inset);border:1px solid var(--line);border-radius:10px;padding:11px 13px;transition:border-color .12s,box-shadow .12s}
.form textarea{resize:vertical;min-height:96px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.form .btn{align-self:flex-start;margin-top:2px}
.form-note{font-size:12px;color:var(--ink-mute);margin:2px 0 0}
.err{font-size:12.5px;color:#c0392b;font-weight:600}
.err-banner{background:#fdecea;color:#a5342a;border:1px solid #f5c6c0;border-radius:10px;
  padding:11px 13px;font-size:13.5px;margin-bottom:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.success{display:flex;gap:14px;align-items:flex-start;background:var(--ok-bg);border:1px solid var(--ok);
  border-radius:var(--radius);padding:18px}
.success svg{width:22px;height:22px;color:var(--ok);flex:none;margin-top:2px}
.success h3{margin:0 0 5px;font-size:18px}
.success p{color:var(--ink-soft);font-size:14.5px}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line);background:var(--surface-2);margin-top:20px}
.foot .row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:26px 0;font-size:13.5px;color:var(--ink-soft)}
.foot .brand{font-size:17px}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot nav a:hover{color:var(--ink)}
.foot .rt{margin-left:auto;color:var(--ink-mute);display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.foot .rt a{color:var(--ink-soft)}
.foot .rt a:hover{color:var(--ink)}
.foot .foot-copy{color:var(--ink-mute)}
.foot-social{display:flex;gap:12px;align-items:center}
.foot-social a{color:var(--ink-mute);display:grid;place-items:center}
.foot-social a:hover{color:var(--accent)}
.foot-social svg{width:19px;height:19px}

/* ---- hero trades collage + floating chip ---- */
.collage{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  width:100%;max-width:460px;margin:0 auto}
/* ---- collage layouts, switchable with ?grid= ------------------------------
   Six tiles in one grid; every arrangement below is CSS only. The tiles are
   square-cropped with object-fit:cover, so a tile can change shape without the
   photo caring. ---------------------------------------------------------------- */
.collage{grid-template-rows:auto auto}
.collage[data-grid="default"]{gap:12px}
.collage[data-grid="default"] .tile:nth-child(3),
.collage[data-grid="default"] .tile:nth-child(4){transform:translateY(30px)}
.collage[data-grid="default"]{padding-bottom:30px}

/* tight — one flush block. Reads as a single object rather than six loose squares. */
.collage[data-grid="tight"]{gap:5px}

/* stagger — the same offset the original had, but committed to and evened out */
.collage[data-grid="stagger"]{gap:9px;padding-bottom:46px}
.collage[data-grid="stagger"] .tile:nth-child(3),
.collage[data-grid="stagger"] .tile:nth-child(4){transform:translateY(46px)}

/* bento — one tile carries the composition and the rest support it.
   align-self:stretch is what squares it up with the copy: the row is sized by the
   text column, the collage fills that height, and the 1fr rows divide whatever is
   left. So the top and bottom edges line up with the headline block on their own,
   and keep lining up if the copy changes length. padding-bottom reserves a band for
   the booking chip so it stops overlapping the bottom row of photos. */
/* Sized to square up with the copy block rather than centred at whatever height it
   happens to be. Found empirically, because the constraint is circular: the row is
   as tall as the text, the text height moves with the font clamp, and a 3x3 grid is
   as tall as it is wide. align-self:stretch was the wrong tool — it matches the ROW,
   and the row carries big vertical padding, so it overshot to +/-79px. Equal 1fr
   rows at 337px land within ~18px of the copy at every width tested AND come out
   square, which the row-3 compression I tried first did not. padding-bottom is the
   band the booking chip sits in, so it no longer overlaps the bottom row. */
/* ⚠️ `.collage > .float-chip` (further down) is NOT inside a media query, so the
   booking chip is a flow grid item spanning all columns at every width — the grid
   resolves to FOUR rows, three of tiles and one of chip. I had added
   padding-bottom on top of that, which was 74px of dead space below the chip and
   the whole reason this block would not line up.
   With that gone the height is 3 tile rows + the chip row + 3 gaps, so max-width is
   the only dial: 374px puts the total within a pixel of the copy column, and since
   both are centre-aligned in the row their top and bottom edges then coincide. */
.collage[data-grid="bento"]{gap:7px;grid-template-rows:1fr 1fr 1fr;
  align-self:center;max-width:374px}
.collage[data-grid="bento"] .tile{min-height:0}

/* ---- photo framing, switchable with ?frame= --------------------------------
   Done with an INSET shadow rather than padding on purpose: real padding would add
   ~12px per tile row, ~36px of height, and undo the alignment above. An inset ring
   paints inside the tile and costs no layout at all. ------------------------- */
.collage[data-frame="mat"] .tile{box-shadow:inset 0 0 0 6px #fff, var(--shadow)}
.collage[data-frame="mat"] .tile img{border-radius:7px}
.collage[data-frame="line"] .tile{box-shadow:inset 0 0 0 2px var(--ink), var(--shadow);
  border-color:var(--ink)}
.collage[data-frame="thickmat"] .tile{box-shadow:inset 0 0 0 10px #fff, var(--shadow)}
.collage[data-frame="thickmat"] .tile img{border-radius:6px}
.collage[data-grid="bento"] .tile:nth-child(1){grid-column:1/3;grid-row:1/3}
.collage[data-grid="bento"] .tile:nth-child(2){grid-column:3;grid-row:1}
.collage[data-grid="bento"] .tile:nth-child(3){grid-column:3;grid-row:2}
.collage[data-grid="bento"] .tile:nth-child(4){grid-column:1;grid-row:3}
.collage[data-grid="bento"] .tile:nth-child(5){grid-column:2;grid-row:3}
.collage[data-grid="bento"] .tile:nth-child(6){grid-column:3;grid-row:3}
.collage[data-grid="bento"] .tile{aspect-ratio:auto}
.collage .tile{position:relative;overflow:hidden;aspect-ratio:1;border-radius:14px;
  border:1px solid var(--line);box-shadow:var(--shadow);background:var(--surface-2)}
.collage img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;display:block}
/* ---- swap effects ----------------------------------------------------------
   Each effect is an overlay carrying the INCOMING photo which reveals itself
   over the outgoing one, then the <img> src is swapped underneath and the
   overlay is dropped. Switch live with ?fx=blinds|mosaic|dissolve|flip|wipe.

   The tiling effects (blinds, mosaic) slice one photo across N elements:
   background-size N*100% makes the image exactly N cells wide/tall, so a
   background-position of i/(N-1) lines cell i up with its own band.
   -------------------------------------------------------------------------- */
.collage .fx{position:absolute;inset:0;z-index:2;background-repeat:no-repeat}

/* blinds — horizontal slats, like a blind opening */
.collage .fx-blinds{display:flex;flex-direction:column}
.collage .fx-blinds i{flex:1;background-size:100% 800%;background-repeat:no-repeat;
  transform:scaleY(0);will-change:transform;
  animation:slatIn .44s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes slatIn{to{transform:scaleY(1)}}

/* mosaic — a 5x5 grid dissolving in a random order; reads as "computed" */
.collage .fx-mosaic{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr)}
.collage .fx-mosaic i{background-size:500% 500%;background-repeat:no-repeat;
  opacity:0;transform:scale(.72);will-change:transform,opacity;
  animation:cellIn .42s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes cellIn{to{opacity:1;transform:scale(1)}}

/* dissolve — cross-fade with a micro push-in. The calm one. */
.collage .fx-dissolve{background-size:cover;background-position:center;
  opacity:0;transform:scale(1.05);will-change:transform,opacity;
  animation:dissolveIn .78s cubic-bezier(.3,.6,.2,1) forwards}
@keyframes dissolveIn{to{opacity:1;transform:scale(1)}}

/* flip — the tile turns over like a card */
.collage .tile{perspective:900px}
.collage .fx-flip{background-size:cover;background-position:center;backface-visibility:hidden;
  transform:rotateY(92deg);will-change:transform;
  animation:flipIn .62s cubic-bezier(.3,.7,.25,1) forwards}
@keyframes flipIn{to{transform:rotateY(0deg)}}

/* wipe — a single diagonal sweep across the tile */
.collage .fx-wipe{background-size:cover;background-position:center;
  clip-path:polygon(0 0, 0 0, 0 100%, 0 100%);will-change:clip-path;
  animation:wipeIn .62s cubic-bezier(.35,.6,.2,1) forwards}
@keyframes wipeIn{to{clip-path:polygon(0 0, 132% 0, 100% 100%, 0 100%)}}
@media (max-width:820px){
  .collage[data-grid] .tile:nth-child(3),
  .collage[data-grid] .tile:nth-child(4){transform:none}
  .collage[data-grid]{padding-bottom:0}
}
.hero-photo{position:relative}
.hero-photo img{width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);display:block}
.float-chip{position:absolute;left:-14px;bottom:22px;display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 15px;box-shadow:var(--shadow-lg)}
.float-chip svg{width:22px;height:22px;color:var(--ok);flex:none}
.float-chip b{display:block;font-size:14px;color:var(--ink);font-family:var(--disp);font-weight:600}
.float-chip span{display:block;font-size:12px;color:var(--ink-mute)}
@media (max-width:820px){.float-chip{left:12px;bottom:12px}}
/* In the collage the chip is a full-width row BELOW the photos: it never covers a
   trade photo, and spanning the grid's whole width makes it read as a caption for
   the collage rather than an orphaned card. (The absolute rule above still serves
   .hero-photo.) */
.collage > .float-chip{position:static;grid-column:1/-1;margin-top:14px}

/* ---- modules ("grows with you") ---- */
.modules{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.modules{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.modules{grid-template-columns:1fr}}
/* Three-card variant: the 4-column base left a dead column on the right and the
   row read as left-shunted. Matches the 3-across feature/capability grids. */
.modules.three{grid-template-columns:repeat(3,1fr)}
/* Straight from 3 to 1: a 2-column tablet step strands the third card alone on
   its own row, which reads as a mistake. Three narrow cards is the lesser evil. */
@media (max-width:700px){.modules.three{grid-template-columns:1fr}}
.module{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.module.soon{background:var(--surface-2);border-style:dashed}
.mbadge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;margin-bottom:10px;background:var(--ok-bg);color:var(--ok)}
.module.soon .mbadge{background:#EEF1F7;color:var(--ink-mute)}
.module h3{font-size:15.5px;margin:0 0 4px;font-family:var(--disp);font-weight:600}
.module p{margin:0;font-size:13px;color:var(--ink-soft)}

/* ---- how: call visual + reliability ---- */
.showcall{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,44px);align-items:center}
@media (max-width:820px){.showcall{grid-template-columns:1fr}}
.showcall .callcard{max-width:420px}
.showcall-copy h2{font-size:clamp(24px,3vw,32px);margin:10px 0 18px}
ul.rel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
ul.rel li{display:flex;flex-direction:column;gap:3px;padding-left:16px;border-left:2px solid var(--accent)}
ul.rel b{font-family:var(--disp);font-weight:600;font-size:16px;color:var(--ink)}
ul.rel span{font-size:14px;color:var(--ink-soft)}

/* ---- missed-call cost calculator ---- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:920px;margin:0 auto;align-items:stretch}
@media (max-width:760px){.calc{grid-template-columns:1fr}}
.calc-inputs{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;display:flex;flex-direction:column;gap:22px;box-shadow:var(--shadow)}
.calc-field label{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;
  font-weight:600;color:var(--ink);margin-bottom:12px}
.calc-field label b{font-family:var(--disp);font-size:20px;color:var(--accent-deep);font-variant-numeric:tabular-nums}
.calc-note{font-size:12px;color:var(--ink-mute);margin:0}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:var(--surface-2);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;
  border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:var(--shadow);cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);
  border:3px solid #fff;box-shadow:var(--shadow);cursor:pointer}
.calc-out{background:var(--navy);border-radius:var(--radius);padding:28px;color:#fff;text-align:center;
  display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow-lg)}
.calc-lost-label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c3cee0}
.calc-lost{font-family:var(--disp);font-weight:600;font-size:clamp(40px,7vw,64px);line-height:1;
  margin:8px 0 4px;color:#00A0F0;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.calc-pitch{font-size:14.5px;color:#dbe4f0;margin:14px 0 18px}
.calc-pitch b{color:var(--gold-soft)}
.calc-out .btn{align-self:center}

/* ---- "hear a real call" audio player ---- */
.player{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;max-width:940px;
  margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px;box-shadow:var(--shadow-lg)}
@media (max-width:760px){.player{grid-template-columns:1fr}}
.player-left{display:flex;align-items:center;gap:18px}
.play-btn{flex:none;width:64px;height:64px;border-radius:50%;border:0;background:var(--accent);
  color:var(--btn-ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s,filter .15s}
.play-btn:hover{transform:scale(1.05);filter:brightness(1.05)}
.play-btn svg{width:26px;height:26px}
.play-btn .ico-pause{display:none}
.player.playing .play-btn .ico-play{display:none}
.player.playing .play-btn .ico-pause{display:block}
.player-meta{flex:1;min-width:0}
.player-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:10px}
.wave{display:flex;align-items:center;gap:2px;height:34px}
.wave i{flex:1;min-width:2px;background:var(--accent);border-radius:2px;transform:scaleY(.4);transform-origin:center}
.progress{height:5px;border-radius:999px;background:var(--surface-2);margin:12px 0 6px;overflow:hidden}
.progress-fill{display:block;height:100%;width:0;background:var(--accent);border-radius:999px}
.player-time{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.player-right .cc-bubbles{margin:0 0 12px}
/* voice picker */
.voices{max-width:940px;margin:22px auto 0;text-align:center}
.voices-label{font-size:14px;color:var(--ink-soft);margin:0 0 14px}
.voices-label b{color:var(--ink)}
.voice-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.vpick{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:8px 15px 8px 9px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);
  cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s,background .15s}
.vpick:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow)}
.vpick-ic{width:26px;height:26px;border-radius:50%;background:var(--surface-2);color:var(--accent-deep);
  display:grid;place-items:center;flex:none}
.vpick-ic svg{width:13px;height:13px}
.vpick-sex{font-size:11px;font-weight:600;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.04em}
.vpick.playing{border-color:var(--accent);background:var(--accent);color:var(--btn-ink)}
.vpick.playing .vpick-ic{background:rgba(0,0,0,.14);color:var(--btn-ink)}
.vpick.playing .vpick-sex{color:rgba(22,35,63,.7)}
@media (prefers-reduced-motion:no-preference){
  .player.playing .wave i{animation:wave .9s ease-in-out infinite}
  .wave i:nth-child(2n){animation-delay:.10s} .wave i:nth-child(3n){animation-delay:.20s}
  .wave i:nth-child(5n){animation-delay:.30s} .wave i:nth-child(7n){animation-delay:.15s}
  @keyframes wave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
}

/* ---- "Hear it in action" call demos ---- */
.lead-sub{color:var(--ink-soft);font-size:15.5px;max-width:62ch;margin:10px 0 0}
.calls{display:flex;flex-direction:column;gap:16px}
.call{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:22px 24px;display:flex;flex-direction:column;gap:9px}
.call-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.call-pattern{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:var(--accent);color:var(--btn-ink);border-radius:999px;padding:4px 11px}
.call-trade{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute)}
.call-title{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:-.01em;margin:2px 0 0}
.call-biz{font-size:14px;color:var(--ink-soft);margin:0}
.call-blurb{font-size:15px;color:var(--ink-soft);max-width:70ch;margin:4px 0 2px}
.call-player{display:flex;align-items:center;gap:16px;margin-top:6px}
.call-player .play-btn{width:54px;height:54px}
.call-player .play-btn svg{width:22px;height:22px}
.call-bar{flex:1;min-width:0}
/* the trade, shown rather than described — same photos the hero cycles */
.call-photo{flex:none;width:76px;height:76px;object-fit:cover;border-radius:12px;
  border:1px solid var(--line);box-shadow:var(--shadow);display:block}
.call-times{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-mute);
  font-variant-numeric:tabular-nums;margin-top:5px}
.call-foot{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line-soft);
  padding-top:12px;margin-top:4px;font-size:13.5px;color:var(--ink-soft)}
.call-foot svg{width:15px;height:15px;vertical-align:-2px;margin-right:5px}
.call-voice svg{color:var(--accent)}
.call-outcome svg{color:var(--ok)}
.call-foot b{color:var(--ink)}
.call-note{max-width:74ch;margin:20px auto 0;font-size:13px;line-height:1.6;
  color:var(--ink-mute);text-align:center}
@media (max-width:620px){
  .call{padding:18px 17px}
  .call-player{gap:12px}
  .call-player .play-btn{width:46px;height:46px}
  .call-photo{width:56px;height:56px}
}

/* ---- subtle tinted section bands (was warm cream; now a cool blue wash) ---- */
.warmband{background:linear-gradient(180deg,#E4EDF8,#F2F7FC)}
:root[data-theme="dark"] .warmband{background:linear-gradient(180deg,#0B1728,#070E1A)}

/* ---- mascot ---- */
.mascot{width:140px;height:auto;display:block;margin:0 auto 8px;
  filter:drop-shadow(0 12px 18px rgba(20,35,63,.18))}
/* nav: little mascot beside the wordmark */
.nav-mascot{height:42px;width:auto;margin-left:4px;flex:none}
@media (max-width:480px){.nav-mascot{height:34px}}

/* About: bigger mascot to the left of the copy, kept close together */
.about-hero{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.2vw,40px);max-width:1080px;margin:0 auto}
.about-hero .mascot-lg{width:clamp(190px,24vw,250px);margin:0;flex:none}
.about-hero-copy{text-align:left;max-width:680px}
.about-hero-copy h2{font-size:clamp(24px,3.4vw,36px);margin:12px 0 12px}
.about-hero-copy p{color:var(--ink-soft);font-size:clamp(15px,1.5vw,17px);margin:0}
@media (max-width:640px){.about-hero{flex-direction:column;text-align:center}
  .about-hero-copy{text-align:center}}
@media (prefers-reduced-motion:no-preference){
  .mascot{animation:bob 3.6s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}

/* ---- comparison table ---- */
.compare-wrap{overflow-x:auto;max-width:880px;margin:0 auto;-webkit-overflow-scrolling:touch}
.compare{width:100%;border-collapse:separate;border-spacing:0;min-width:620px}
.compare th,.compare td{padding:14px 14px;text-align:center}
.compare thead th{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--ink);padding-bottom:14px;border-bottom:2px solid var(--line)}
.compare tbody td{border-bottom:1px solid var(--line);font-size:14px}
.compare tbody tr:last-child td{border-bottom:0}
.compare .rowhead{text-align:left;color:var(--ink);font-weight:600;white-space:nowrap}
.compare td.rowhead{color:var(--ink-soft)}
.compare th.mid,.compare td.mid{background:var(--navy);color:#fff}
.compare thead th.mid{border-radius:12px 12px 0 0}
.compare tbody tr:last-child td.mid{border-radius:0 0 12px 12px}
.compare td.mid{border-bottom-color:rgba(255,255,255,.14)}
.compare .cell-yes svg{width:20px;height:20px;color:var(--ok)}
.compare td.mid.cell-yes svg{color:var(--gold-soft)}
.compare .cell-no svg{width:17px;height:17px;color:var(--ink)}
.compare .cell-maybe svg{width:17px;height:17px;color:var(--ink-mute)}
.compare .cell-text{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.compare td.mid.cell-text{color:var(--gold-soft)}

/* ---- risk-reversal bar ---- */
.risk-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;padding:20px 26px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);max-width:900px;margin:0 auto}
.risk{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--ink)}
.risk svg{width:18px;height:18px;color:var(--ok);flex:none}

/* ============================ MOTION / FLAIR ============================ */
/* ambient hero glow (adds depth; drift is motion-gated below) */
.hero{position:relative;overflow:hidden}
.hero > .wrap{position:relative;z-index:2}
.hero .glow{position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none;z-index:0}
.hero .glow.g1{width:440px;height:440px;top:-150px;right:-70px;
  background:radial-gradient(circle,rgba(0,72,152,.34),transparent 68%)}
.hero .glow.g2{width:400px;height:400px;bottom:-170px;left:-90px;
  background:radial-gradient(circle,rgba(5,8,15,.16),transparent 70%)}
.hero .glow.g3{width:440px;height:440px;top:-140px;left:-140px;
  background:radial-gradient(circle,rgba(0,160,240,.24),transparent 66%)}

/* hero floating "live" notification chips (in the whitespace above the headline) */
.hero-notes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.fnote{position:absolute;display:inline-flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13px;font-weight:600;
  color:var(--ink);box-shadow:var(--shadow);white-space:nowrap;opacity:0}
.fnote svg{width:15px;height:15px;color:var(--accent-deep)}
.fnote.n1{top:9%;left:4%} .fnote.n2{top:21%;left:27%} .fnote.n3{top:4%;left:45%}
@media (max-width:820px){.hero-notes{display:none}}
@media (prefers-reduced-motion:no-preference){
  .fnote{animation:fnote 10.5s ease-in-out infinite}
  .fnote.n2{animation-delay:3.5s} .fnote.n3{animation-delay:7s}
  @keyframes fnote{0%{opacity:0;transform:translateY(22px) scale(.96)}
    8%{opacity:1;transform:translateY(0) scale(1)}26%{opacity:1;transform:translateY(-6px)}
    36%{opacity:0;transform:translateY(-26px) scale(.98)}100%{opacity:0}}
}

/* collage tiles come alive on hover */
.collage .tile{transition:transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s ease}
.collage .tile:hover{transform:translateY(-5px) scale(1.03);box-shadow:var(--shadow-lg);z-index:3}

/* card + trade hover lift */
.card,.module,.vchip,.plan{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.card:hover,.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.vchip:hover{transform:translateY(-2px);border-color:var(--accent)}

/* primary-button sheen sweep */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%);
  transform:translateX(-120%)}
.btn-primary:hover::after{transform:translateX(120%);transition:transform .6s ease}

@media (prefers-reduced-motion:no-preference){
  .hero .glow.g1{animation:drift1 15s ease-in-out infinite}
  .hero .glow.g2{animation:drift2 19s ease-in-out infinite}
  .hero .glow.g3{animation:drift3 26s ease-in-out infinite}
  @keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-26px,22px) scale(1.06)}}
  @keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(28px,-18px) scale(1.05)}}
  @keyframes drift3{0%,100%{transform:translateX(0)}50%{transform:translateX(92vw)}}

  /* orchestrated hero entrance */
  .hero-copy > *{opacity:0;animation:riseIn .7s cubic-bezier(.2,.7,.2,1) forwards}
  .hero-copy > *:nth-child(1){animation-delay:.08s} .hero-copy > *:nth-child(2){animation-delay:.16s}
  .hero-copy > *:nth-child(3){animation-delay:.26s} .hero-copy > *:nth-child(4){animation-delay:.36s}
  .hero-copy > *:nth-child(5){animation-delay:.46s}
  .collage .tile{opacity:0;animation:tilePop .6s cubic-bezier(.2,.7,.2,1) forwards}
  .collage .tile:nth-child(1){animation-delay:.46s}
  .collage .tile:nth-child(2){animation-delay:.58s}
  .collage .tile:nth-child(3){animation-delay:.54s}
  .collage .tile:nth-child(4){animation-delay:.66s}
  .collage .tile:nth-child(5){animation-delay:.62s}
  .collage .tile:nth-child(6){animation-delay:.74s}
  .float-chip{opacity:0;animation:riseIn .6s ease .9s forwards}

  /* scroll reveal (JS adds .in when in view) */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  @keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes tilePop{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:none}}
}

/* ---- interactive demo chat ---- */
.muted{color:var(--ink-mute)}
.demo-wrap2{max-width:680px;margin:0 auto}
.demo-mascot{width:clamp(150px,15vw,210px);height:auto;display:block;margin:0 auto 10px;
  filter:drop-shadow(0 12px 18px rgba(20,35,63,.18))}
/* Below the two-column breakpoint the mascot sits ABOVE the demo instead of
   inside it, which pushed the demo itself off a laptop screen. On this page the
   demo is the content, so the mascot goes. It still appears on every other page. */
@media (max-width:1040px){.demo-mascot{display:none}}
/* Wide screens: heading + mascot become a left column so the demo box starts at
   the top of the page. The demo IS the content on this page, so instructions
   should not push it down. Stacks back to normal below 1041px. */
@media (min-width:1041px){
  /* Two matched white boxes, same shape as the contact page: same 18px gap, same
     card padding and radius, stretched to equal height. The mascot is pushed to
     the bottom of the left card with margin-top:auto so the column fills. */
  .demo-wrap2{display:grid;grid-template-columns:300px 680px;gap:18px;max-width:998px;
    align-items:stretch}
  /* Gate state has no mascot (see demo.html), so nothing fills the stretched
     left column and it ends up mostly empty. Let it size to its content there;
     the unlocked state keeps stretch, where the mascot still does that job. */
  .demo-wrap2.gated{align-items:start}
  .demo-side{background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);padding:26px;display:flex;flex-direction:column}
  .demo-wrap2 .sec-head{text-align:left;margin:0 !important;max-width:none}
  /* "Talk to Midebo." wrapped in the 300px column; a notch smaller keeps it on
     one line without shrinking it anywhere else on the site. */
  .demo-side .sec-head h2{font-size:27px}
  .demo-mascot{margin:auto auto 0;max-width:186px}
  .demo{margin:0}
}
.demo{position:relative;max-width:680px;margin:0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:20px 20px 18px}
.demo-trades{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;
  padding:0 0 14px;margin:0 0 4px;border-bottom:1px solid var(--line)}
.trade-pill{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:7px 15px;font:inherit;
  font-size:13px;font-weight:700;color:var(--ink-soft);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.trade-pill:hover{border-color:var(--accent);color:var(--ink)}
.trade-pill.on{background:var(--navy);border-color:var(--navy);color:#fff}
.demo-chat{height:clamp(300px,46vh,380px);overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:6px 4px 12px}
.demo .bub{max-width:82%;font-size:14.5px;padding:10px 14px;line-height:1.42}
.demo .bub.ai{align-self:flex-start;background:var(--surface-2);color:var(--ink);border-radius:14px;border-bottom-left-radius:3px}
.demo .bub.them{align-self:flex-end;background:var(--navy);color:#fff;border-radius:14px;border-bottom-right-radius:3px}
.demo-booked{align-self:center;background:var(--ok-bg);color:var(--ok);border-radius:11px;padding:9px 14px;font-size:13.5px;font-weight:600;margin:2px 0;text-align:center}
.demo-quick{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.chip{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font:inherit;
  font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:border-color .15s,color .15s}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.demo-input{display:flex;gap:10px}
.demo-input input{flex:1;font:inherit;font-size:15px;background:var(--inset);border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:var(--ink)}
.demo-input input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.demo-foot{margin-top:12px;text-align:center}
.linkbtn{background:none;border:0;color:var(--accent-deep);font:inherit;font-weight:600;cursor:pointer}
.linkbtn:hover{text-decoration:underline}

/* ---- sticky mini-CTA bar ---- */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:center;
  gap:14px;padding:11px 20px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(20,35,63,.09);
  transform:translateY(115%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.stickybar.show{transform:translateY(0)}
.sticky-msg{font-weight:600;color:var(--ink);font-size:15px}
@media (max-width:520px){.sticky-msg{display:none}}
@media (prefers-reduced-motion:reduce){.stickybar{transition:none}}

/* legal / prose pages */
.legal{max-width:720px;margin:0 auto;color:var(--ink-soft);font-size:15.5px;line-height:1.7}
.legal .legal-intro{font-size:17px;color:var(--ink);margin:0 0 8px}
.legal h3{color:var(--ink);font-size:19px;margin:30px 0 6px}
.legal p{margin:0 0 12px}
.legal .legal-foot{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-faint,#7D8BA0)}

/* legal — white scroll panel (2026-08-02, Mike: "in a white box on the page with
   the scroll like other sites do").
   ⚠️ The text stays in the DOM, only the VIEWPORT is capped — so crawlers, Stripe
   and A2P reviewers, ctrl-F and deep links all still see the whole document. An
   iframe or a lazy-loaded panel would have broken exactly the readers this page
   exists for. */
/* ★ 2026-08-02, revised: white box, but THE PAGE SCROLLS — no inner scroll
   region. Mike: "keep them in a white box but the whole page scrolls, not in an
   iframe." (It was never an iframe — it was a capped-height div with its own
   scrollbar, which reads the same to anyone using it, and that is the point.)
   ⭐ Strictly better for the readers that matter here: no nested scrollbar to
   fight on a trackpad, no scroll-trapping on mobile, ctrl-F highlights land
   where you can see them, and a deep link scrolls the page rather than an inner
   box the browser may not restore. The card was doing presentational work; the
   scrolling was just a side effect of how it was built. */
.legal-panel{
  max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  padding:34px 38px;
}
.legal-panel .legal{max-width:none}
.legal-panel .legal h3{scroll-margin-top:12px}
/* Numbered clauses (2026-08-02). The number sits in the left gutter via a
   hanging indent, so it never pushes the prose out of alignment — the text
   edge stays straight down the page whether a number is one digit or four
   characters ("12.10"). */
.legal .legal-num{display:inline-block;min-width:26px;color:var(--ink-faint,#7D8BA0);font-weight:700}
.legal p.legal-clause{padding-left:38px;text-indent:-38px}
.legal .legal-subnum{
  display:inline-block;width:38px;text-indent:0;
  color:var(--ink-faint,#7D8BA0);font-variant-numeric:tabular-nums;font-size:12.5px;
}
@media (max-width:640px){
  /* Narrow screens cannot spare 38px of gutter — drop the hanging indent and
     let the number sit inline rather than squeezing the prose to a ribbon. */
  .legal p.legal-clause{padding-left:0;text-indent:0}
  .legal .legal-subnum{width:auto;margin-right:7px}
}
/* First heading shouldn't push a 30px gap against the panel's own padding. */
.legal-panel .legal h3:first-of-type{margin-top:18px}
@media (max-width:640px){
  .legal-panel{padding:22px 18px;border-radius:12px}
}
/* Printing: drop the card chrome so the text runs edge to edge on paper. The
   height cap and inner scroll are gone as of 2026-08-02, so there is no longer a
   scrollbox to unwrap — only the border and shadow to strip. */
@media print{
  .legal-panel{box-shadow:none;border:0;padding:0}
}

/* signup — plan summary + next steps */
.plan-pick-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:4px}
.plan-pick-price{font-family:var(--disp);font-weight:700;font-size:26px;color:var(--ink);white-space:nowrap}
.plan-pick-price span{font-size:13px;color:var(--ink-mute);font-weight:600}
.signup-steps{margin:8px 0 0;padding-left:20px;color:var(--ink-soft);line-height:1.6}
.signup-steps li{margin-bottom:8px}

.faq-page{max-width:760px;margin:0 auto}

/* placeholder login screen */
.login-wrap{max-width:410px;margin:0 auto}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:30px 28px;text-align:center}
.login-mascot{display:block;width:106px;height:auto;margin:0 auto 6px}
.login-card .form{text-align:left;margin-top:4px}
.login-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin:-2px 0 4px}
.login-row a{color:var(--accent-deep);font-weight:600}
.login-remember{display:flex;align-items:center;gap:6px;color:var(--ink-soft)}
.login-submit{width:100%;justify-content:center;margin-top:4px}
.login-soon{font-size:13px;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:12px 0 0;text-align:center}
.login-alt{font-size:14px;color:var(--ink-soft);margin:18px 0 0}

/* pricing — "Learn more" link + compare matrix */
.plan-learn{display:block;text-align:center;margin-top:10px;font-size:13px;font-weight:700;color:var(--accent-deep)}
.plan-learn:hover{text-decoration:underline}
.compare-full thead th{vertical-align:bottom;padding:14px 12px}
.compare-full .pn{display:block;font-family:var(--disp);font-weight:700;font-size:16px}
.compare-full .pp{display:block;font-family:var(--disp);font-weight:700;font-size:20px;margin-top:2px}
.compare-full .pp i{font-style:normal;font-size:12px;font-weight:600;color:var(--ink-mute)}
.compare-full .pm{display:block;font-size:11px;color:var(--ink-mute);font-weight:600}
.compare-full th.on .pp i,.compare-full th.on .pm{color:rgba(255,255,255,.7)}
.pick-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:var(--accent);color:var(--btn-ink);border-radius:5px;padding:2px 6px;margin-bottom:6px}
.pick-tag.ghost{background:transparent;color:var(--ink-mute);border:1px solid var(--line)}
.compare-full tfoot td{padding-top:14px;border-bottom:none}
.compare-full tfoot td.on{background:color-mix(in srgb,var(--navy) 6%,transparent);border-radius:0 0 8px 8px}
.soon{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent-deep);background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:5px;padding:1px 5px;vertical-align:middle}
.ptable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ptable{width:100%;min-width:720px;border-collapse:collapse;font-size:14px}
.ptable th,.ptable td{padding:11px 12px;text-align:center;border-bottom:1px solid var(--line)}
.ptable thead th{font-family:var(--disp);font-weight:700;color:var(--ink);font-size:15px}
.ptable thead th span{display:block;font-family:var(--body);font-weight:600;font-size:12px;color:var(--ink-mute)}
.ptable th:first-child,.ptable td.fcell{text-align:left;color:var(--ink-soft)}
.ptable .fcell{font-weight:500;min-width:230px}
.ptable td.on{background:color-mix(in srgb,var(--navy) 6%,transparent)}
.ptable th.on{background:var(--navy);color:#fff;border-radius:8px 8px 0 0}
.ptable th.on span{color:rgba(255,255,255,.75)}
.ptable .grouprow td{background:var(--surface-2);font-family:var(--disp);font-weight:700;font-size:12.5px;
  color:var(--ink);text-align:left;text-transform:uppercase;letter-spacing:.04em}
.ptable .tyes svg{width:17px;height:17px;color:var(--ok,#2e9e6b)}
.ptable .tval{font-weight:700;color:var(--ink)}
.ptable .mut{color:var(--ink-faint,#9AA8B8)}

/* focus + motion */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- add-ons block on /pricing ---- */
.addons{max-width:660px;margin:38px auto 0}
.addons h3{font-family:var(--disp);font-size:19px;margin:0 0 2px;text-align:center}
.addons-sub{margin:0 0 16px;font-size:13.5px;color:var(--ink-mute);text-align:center}
.addon{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:10px}
.addon-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.addon-head b{font-family:var(--disp);font-size:15px}
.addon-price{font-weight:700;font-size:14px;color:var(--accent-deep);white-space:nowrap}
.addon p{margin:4px 0 0;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}

/* ---- (i) explainer on compare rows ---- */
.infobtn{width:17px;height:17px;margin-left:7px;padding:0;border-radius:50%;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-mute);
  font-family:var(--disp);font-size:11px;font-weight:700;line-height:1;cursor:pointer;
  vertical-align:middle}
.infobtn:hover{border-color:var(--accent);color:var(--accent-deep)}
.infobtn[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.rowinfo{display:none;margin-top:7px;font-size:12.5px;line-height:1.6;color:var(--ink-soft);
  max-width:46ch}
.rowinfo.open{display:block}

/* Mascot inside a side column: smaller and centred, so it decorates the column
   instead of pushing the form below the fold the way the hero version did. */
.mascot-side{display:block;margin:6px auto 28px;width:132px;height:auto}
/* Pricing. `lean` is wider than it is tall (477x560 vs the 336x640 standing
   poses), so the shared 140px width would render it larger on screen than the
   others. Sized down to sit quietly above the plan grid rather than compete
   with it — the point here is a bit of warmth, not a focal point. */
.mascot-lean{width:118px;margin-bottom:2px}
.cbox-title{font-size:30px;margin:8px 0 8px}
.cbox-intro{margin:0 0 6px;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}

/* ---- /login shell (fields are disabled; see login.html) ---- */
.login-card{max-width:420px;margin:0 auto;text-align:center}
.login-card h1{font-family:var(--disp);font-size:28px;margin:0 0 8px}
.login-note{color:var(--ink-soft);font-size:14.5px;margin:0 0 20px}
.login-form{text-align:left;opacity:.55;pointer-events:none}
.login-form .btn{width:100%;justify-content:center;margin-top:4px}
.login-help{font-size:13.5px;margin:18px 0 10px}