@font-face{
  font-family:'Manrope';
  src:url('../fonts/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight:200 800; font-style:normal; font-display:swap;
}
:root{
  --navy:#122B43; --blue:#2D9FC1; --orange:#F47C3C; --yellow:#F2B83F;
  --slate:#687887; --ink:#18212B; --white:#FAF9F5; --concrete:#E5E5E0;
  --navy-08:rgba(18,43,67,.05); --navy-10:rgba(18,43,67,.07); --navy-15:rgba(18,43,67,.11);
  --blue-12:rgba(45,159,193,.13); --blue-20:rgba(45,159,193,.22);
  --orange-12:rgba(244,124,60,.13); --yellow-16:rgba(242,184,63,.18);
  --slate-12:rgba(104,120,135,.12);
  --red:#C24A3B; --red-12:rgba(194,74,59,.11); --violet:#7A6FBE; --violet-12:rgba(122,111,190,.13);
  --green:#2E9E5B;
  --border:#E4E1D6; --border-soft:#ECEAE0;
  --radius:14px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(18,33,43,.05), 0 1px 1px rgba(18,33,43,.04);
  --shadow-md:0 12px 32px rgba(18,33,43,.14), 0 3px 10px rgba(18,33,43,.06);
  --sans:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nav-h:72px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--white);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--sans); font-weight:800; margin:0; color:var(--navy); letter-spacing:-0.01em; line-height:1.14; }
p{ margin:0; }
a{ color:var(--blue); text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
.icon{ width:19px; height:19px; flex-shrink:0; display:inline-block; vertical-align:middle; }
.icon-sm{ width:15px; height:15px; }
.icon-lg{ width:26px; height:26px; }

/* ============ Layout ============ */
.wrap{ max-width:1200px; margin:0 auto; padding:0 32px; }
.wrap-narrow{ max-width:860px; margin:0 auto; padding:0 32px; }
section{ position:relative; }
.sec{ padding:96px 0; }
.sec-tight{ padding:72px 0; }

/* ============ Nav ============ */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:100;
  display:flex; align-items:center; background:transparent;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
  border-bottom:1px solid transparent;
}
.nav.stuck{ background:rgba(250,249,245,.92); backdrop-filter:blur(10px); border-bottom-color:var(--border); }
.nav-inner{ max-width:1200px; margin:0 auto; padding:0 32px; width:100%; display:flex; align-items:center; gap:28px; }
.nav .logo svg{ height:28px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.nav-links a{
  padding:9px 13px; border-radius:9px; font-size:13.5px; font-weight:700; color:var(--navy);
}
.nav-links a:hover{ background:var(--navy-08); }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav-login{ font-size:13.5px; font-weight:700; color:var(--navy); padding:9px 13px; border-radius:9px; }
.nav-login:hover{ background:var(--navy-08); }
.nav-burger{
  display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--border);
  background:#fff; color:var(--navy); align-items:center; justify-content:center; cursor:pointer;
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px;
  border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; border:1px solid transparent;
  white-space:nowrap; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn .icon{ width:16px; height:16px; }
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:#0d2032; }
.btn-secondary{ background:#fff; color:var(--navy); border-color:var(--border); }
.btn-secondary:hover{ background:var(--navy-08); border-color:var(--blue-20); }
.btn-sm{ height:38px; padding:0 15px; font-size:13.5px; }
.btn-lg{ height:50px; padding:0 24px; font-size:15px; }
.btn-onnavy{ background:#fff; color:var(--navy); }
.btn-onnavy:hover{ background:var(--concrete); }
.btn-onnavy-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.34); }
.btn-onnavy-ghost:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.55); }
.btn-block{ width:100%; }

/* ============ Shared bits ============ */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--blue); margin-bottom:16px;
}
.eyebrow-pill{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:100px;
  background:var(--blue-12); border:1px solid var(--blue-20); color:#1c7691;
  font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom:24px;
}
.eyebrow-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--blue); }
.sec-head{ max-width:760px; margin-bottom:48px; }
.sec-head h2{ font-size:40px; margin-bottom:14px; }
.sec-head .lede{ font-size:16.5px; line-height:1.6; color:var(--slate); }
.sec-head .lede + .lede{ margin-top:14px; }
.card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); }
.card-pad{ padding:24px; }
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  padding:4px 10px; border-radius:100px; white-space:nowrap;
}
.badge .badge-dot{ width:6px; height:6px; border-radius:50%; }
.badge-navy{ background:var(--navy-15); color:var(--navy); } .badge-navy .badge-dot{ background:var(--navy); }
.badge-blue{ background:var(--blue-12); color:#1c7691; } .badge-blue .badge-dot{ background:var(--blue); }
.badge-orange{ background:var(--orange-12); color:#b8551f; } .badge-orange .badge-dot{ background:var(--orange); }
.badge-slate{ background:var(--slate-12); color:var(--slate); } .badge-slate .badge-dot{ background:var(--slate); }
.badge-green{ background:rgba(46,158,91,.12); color:#1f7a45; } .badge-green .badge-dot{ background:var(--green); }
.check-row{ display:flex; align-items:flex-start; gap:11px; font-size:14.5px; line-height:1.55; color:var(--ink); }
.check-row .tick{
  width:20px; height:20px; border-radius:50%; background:var(--blue-12); color:#1c7691; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.check-row .tick .icon{ width:12px; height:12px; }

/* ============ Hero ============ */
.hero{ padding:calc(var(--nav-h) + 76px) 0 0; position:relative; overflow:hidden; }
.hero-art{
  position:absolute; top:calc(var(--nav-h) - 10px); left:50%; transform:translateX(-50%);
  width:1700px; max-width:none; opacity:.5; pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 92%);
  mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 62%, transparent 92%);
}
.hero-inner{ position:relative; z-index:1; }
.hero h1{ font-size:56px; max-width:900px; margin-bottom:24px; line-height:1.08; }
.hero h1 .rot{ color:var(--slate); }
.hero h1 .soft{ color:var(--blue); }
.hero-body{ font-size:17px; line-height:1.65; color:var(--slate); max-width:660px; margin-bottom:32px; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.hero-trust{ display:flex; align-items:flex-start; gap:11px; max-width:640px; font-size:13.5px; line-height:1.6; color:var(--slate); }
.hero-trust .tick{
  width:20px; height:20px; border-radius:50%; background:rgba(46,158,91,.14); color:#1f7a45; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.hero-trust .tick .icon{ width:12px; height:12px; }
.hero-shot{ margin-top:56px; position:relative; z-index:1; }

/* Browser chrome frame */
.frame{
  border-radius:var(--radius-lg); border:1px solid var(--border); background:#fff; overflow:hidden;
  box-shadow:var(--shadow-md);
}
.frame-bar{
  height:42px; background:var(--concrete); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:8px; padding:0 14px;
}
.frame-dots{ display:flex; gap:6px; }
.frame-dots i{ width:10px; height:10px; border-radius:50%; background:#d3d0c6; display:block; }
.frame-url{
  flex:1; height:26px; border-radius:100px; background:#fff; border:1px solid var(--border);
  display:flex; align-items:center; padding:0 12px; font-size:11.5px; color:var(--slate); font-weight:600;
  max-width:420px; margin:0 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.frame-tag{
  flex-shrink:0; background:var(--navy); color:#fff; font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:5px 11px; border-radius:100px; white-space:nowrap;
}
.frame-body{ position:relative; background:var(--white); }
.frame-body img{ width:100%; display:block; }

/* ============ Thread (5 stages) ============ */
.thread{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:8px; }
.stage{ padding:0 24px 0 0; position:relative; }
.stage:not(:last-child)::after{
  content:''; position:absolute; top:19px; left:44px; right:12px; height:2px;
  background:linear-gradient(to right, var(--blue-20), var(--border));
}
.stage-num{
  width:38px; height:38px; border-radius:11px; background:#fff; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800;
  color:var(--blue); margin-bottom:16px; position:relative; z-index:1; box-shadow:var(--shadow-sm);
}
.stage h3{ font-size:16px; margin-bottom:8px; }
.stage p{ font-size:13.5px; line-height:1.6; color:var(--slate); }

/* ============ Features ============ */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feat{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:24px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.feat:hover{ border-color:var(--blue-20); box-shadow:var(--shadow-sm); }
.feat-ico{
  width:44px; height:44px; border-radius:12px; background:var(--blue-12); color:var(--blue);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.feat h3{ font-size:16.5px; margin-bottom:9px; }
.feat p{ font-size:13.5px; line-height:1.62; color:var(--slate); }

/* ============ Stage switcher (win / plan / run / close) ============ */
/* Segmented tab control */
.vsim-tabs{
  display:inline-flex; gap:4px; padding:4px; margin-bottom:22px; flex-wrap:wrap;
  background:var(--navy-08); border-radius:100px;
}
.vsim-tab{
  display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer; font:inherit;
  padding:7px 18px; border-radius:100px; background:transparent;
  font-size:13.5px; font-weight:700; color:var(--slate); text-align:left;
  transition:color .18s ease, background .24s ease, box-shadow .24s ease;
}
.vsim-tab .icon{ width:16px; height:16px; flex-shrink:0; }
/* Two labels: what the stage of the job is called, and the screen it happens
   on. The stage leads, because the point of the section is the progression. */
.vsim-txt, .vt-txt{ display:flex; flex-direction:column; line-height:1.24; }
.vt-stage{ font-size:13.5px; }
.vt-screen{ font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--concrete-ink, #8A9AA8); }
.vsim-tab.active .vt-screen{ color:var(--slate); }
.vsim-tab:hover{ color:var(--navy); }
.vsim-tab.active{ background:#fff; color:var(--navy); box-shadow:var(--shadow-sm); }

/* The simulated app window */
.vsim-win{
  display:flex; border:1px solid var(--border); border-radius:var(--radius-lg);
  background:#fff; overflow:hidden; box-shadow:var(--shadow-md);
}
.vsim-rail{
  width:56px; flex-shrink:0; position:relative; background:#fff;
  border-right:1px solid var(--border); padding:14px 0;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.vsim-rail i{
  width:38px; height:38px; border-radius:11px; position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  color:var(--slate); transition:color .34s ease;
}
.vsim-rail i .icon{ width:19px; height:19px; }
.vsim-rail i.on{ color:#fff; }
.vsim-rail-ind{
  position:absolute; top:14px; left:9px; width:38px; height:38px; border-radius:11px;
  background:var(--navy); transform:translateY(calc(var(--i, 0) * 44px));
  transition:transform .46s cubic-bezier(.34,1.12,.4,1);
}
.vsim-body{ flex:1; display:flex; min-width:0; }
.vsim-nav{
  width:180px; flex-shrink:0; border-right:1px solid var(--border);
  background:var(--white); padding:16px 12px;
}
.vsim-nav-set{ display:none; }
.vsim-nav-set.active{ display:block; }
.vsim-nav-head{
  font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--slate); padding:0 9px; margin-bottom:10px;
}
.vsim-nav span.row{
  display:block; padding:7px 9px; border-radius:9px; margin-bottom:2px;
  font-size:12.5px; font-weight:700; color:var(--slate);
}
.vsim-nav span.row.on{ background:var(--blue-12); color:var(--navy); }
.vsim-stage{ flex:1; min-width:0; }
.vsim-stage .mock{ border:0; border-radius:0; box-shadow:none; min-height:436px; }
/* Wider inside the simulated window: the stage column has the room, and at 150px
   the badge and the value collided on the longer amounts. */
.vsim-stage .kan-col{ width:162px; }
.vsim-stage .mock-body{ min-height:392px; }
.vsim-stage .mtable{ font-size:12px; width:100%; }
.vsim-stage .mtable thead th{ font-size:10px; padding:12px 10px; }
.vsim-stage .mtable tbody td, .vsim-stage .mtable tfoot td{ padding:12px 10px; }
/* The over/(under) column is the one the copy promises, so it is the last to go.
   Shed the derivable middle columns as the window narrows instead of clipping. */
.vsim-stage .mtable .drop1, .vsim-stage .mtable .drop2,
.vsim-stage .mtable .drop3, .vsim-stage .mtable .drop4{ display:table-cell; }
@media (max-width:1180px){
  .vsim-stage .mtable{ font-size:11.5px; }
  .vsim-stage .mtable thead th, .vsim-stage .mtable tbody td, .vsim-stage .mtable tfoot td{ padding:11px 8px; }
  .vsim-stage .mtable .drop1{ display:none; }
}
@media (max-width:1000px){ .vsim-stage .mtable .drop2{ display:none; } }
@media (max-width:520px){ .vsim-stage .mtable .drop4{ display:none; } }
@media (max-width:760px){
  .vsim-stage .mtable{ font-size:11px; }
  .vsim-stage .mtable thead th, .vsim-stage .mtable tbody td, .vsim-stage .mtable tfoot td{ padding:10px 7px; }
  .vsim-stage .mtable .drop3{ display:none; }
}

/* --- mock: project schedule (Gantt) --- */
/* 21 day columns; every bar is placed by inline left/width percentages of
   the grid, and the column lines are a separate layer, so bars and lines
   share one coordinate system like the app's own Gantt. */
.sched{ display:flex; overflow-x:auto; overflow-y:hidden; background:#fff; }
.sched-list{
  width:176px; flex-shrink:0; position:sticky; left:0; z-index:2;
  border-right:1px solid var(--border); background:#fff;
}
.sched-lh{
  height:56px; display:flex; align-items:flex-end; padding:0 14px 9px;
  font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--slate);
  border-bottom:1px solid var(--border);
}
.sched-list .sched-row{
  height:50px; display:flex; flex-direction:column; justify-content:center; padding:0 14px;
  border-bottom:1px solid var(--border-soft);
}
.sched-list .t{ font-size:12px; font-weight:700; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sched-list .s{ font-size:10.5px; color:var(--slate); white-space:nowrap; }
.sched-grid{ flex:1; min-width:540px; }
.sched-head{ display:flex; height:56px; border-bottom:1px solid var(--border); }
.sched-day{
  flex:1; min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:7px; font-variant-numeric:tabular-nums; border-left:1px solid var(--border-soft);
}
.sched-day:first-child{ border-left:0; }
.sched-day b{ font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--slate); }
.sched-day em{ font-style:normal; font-size:11.5px; font-weight:700; color:var(--navy); margin-top:1px; }
.sched-day.we{ background:var(--navy-08); }
.sched-day.we b, .sched-day.we em{ color:var(--slate); }
.sched-day.today em{
  color:#fff; background:var(--orange); border-radius:100px; min-width:20px; height:20px; line-height:20px; text-align:center;
}
.sched-rain{
  position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--blue-12); color:var(--blue);
}
.sched-rain .icon, .sched-warn .icon{ width:11px; height:11px; }
.sched-day.rain em{ color:var(--blue); }
.sched-rows{ position:relative; padding-bottom:14px; }
.sched-cols{ position:absolute; inset:0; display:flex; pointer-events:none; }
.sched-cols i{ flex:1; border-left:1px solid var(--border-soft); }
.sched-cols i:first-child{ border-left:0; }
.sched-cols i.we{ background:var(--navy-08); }
.sched-rows .sched-row{ position:relative; height:50px; border-bottom:1px solid var(--border-soft); }
.sched-bar{
  position:absolute; top:14px; height:22px; border-radius:6px; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:4px; padding:0 7px;
  color:#fff; font-size:10px; font-weight:800; box-shadow:var(--shadow-sm); white-space:nowrap; overflow:visible;
}
.sched-bar b{ font-weight:800; }
/* The original slot of a task weather moved: outline only, nothing booked there. */
.sched-bar.ghost{ border:1.5px dashed var(--blue); background:#fff; box-shadow:none; z-index:0; }
/* The hovered task: a ring on the bar and the detail card beside it. */
.sched-bar.hover{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--navy); }
.sched-card{
  position:absolute; left:6%; top:150px; width:min(232px, 40%); z-index:3;
  background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-md);
  padding:8px 10px 9px; text-align:left;
}
.sched-card .t{ font-size:12px; font-weight:800; color:var(--navy); line-height:1.2; }
.sched-card .s{ font-size:10.5px; color:var(--slate); margin-top:1px; }
.sched-card .g{ display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; margin-top:6px; }
.sched-card .m b{ display:block; font-size:8.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); }
.sched-card .m span{ display:block; font-size:11px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; white-space:nowrap; margin-top:1px; }
.sched-card .p{ height:4px; border-radius:100px; background:var(--navy-08); margin-top:7px; overflow:hidden; }
.sched-card .p i{ display:block; height:100%; border-radius:100px; }
/* Finish-to-start dependencies: an elbow from the predecessor's end down into
   the successor's row, arrow into its start. Positioned by the same percentages
   as the bars, so the two can never drift apart. */
.sched-dep{
  position:absolute; height:50px; z-index:0; pointer-events:none; opacity:.55;
  border-left:1.5px solid var(--slate); border-bottom:1.5px solid var(--slate); border-radius:0 0 0 10px;
}
.sched-dep::after{
  content:''; position:absolute; right:-2px; bottom:-4.5px; width:0; height:0;
  border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid var(--slate);
}
.sched-dep-key{ width:14px; height:8px; border-left:1.5px solid var(--slate); border-bottom:1.5px solid var(--slate); border-radius:0 0 0 5px; opacity:.7; display:inline-block; }
.sched-bar.moved::before{
  content:''; position:absolute; left:-11px; top:50%; width:8px; height:8px; margin-top:-4px;
  border-top:1.5px solid var(--blue); border-right:1.5px solid var(--blue); transform:rotate(45deg);
}
.sched-warn{
  width:17px; height:17px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--red); box-shadow:0 0 0 1.5px var(--red);
}
.sched-bar .sched-warn{ margin-right:-3px; }
.sched-today{
  position:absolute; top:0; bottom:0; width:0; border-left:2px solid var(--orange); z-index:1; pointer-events:none; margin-left:-1px;
}
.sched-today::before{
  content:''; position:absolute; top:-1px; left:-5px; width:8px; height:8px; border-radius:50%; background:var(--orange);
}
.sched-foot{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; padding:10px 16px;
  border-top:1px solid var(--border); font-size:11px; font-weight:700; color:var(--slate); background:#fff;
}
.sched-foot span{ display:inline-flex; align-items:center; gap:6px; }
.sched-foot .sw{ width:9px; height:9px; border-radius:3px; display:inline-block; }
.sched-foot .sched-warn, .sched-foot .sched-rain{ position:static; transform:none; width:16px; height:16px; }
@media (max-width:1000px){
  .sched-list{ width:150px; }
  .sched-grid{ min-width:520px; }
  .sched-list .sched-row{ padding:0 10px; }
  .sched-day b{ display:none; }
}
@media (max-width:520px){
  .sched-list{ width:120px; }
  .sched-list .t{ font-size:11px; }
  .sched-list .s{ font-size:10px; }
  .sched-grid{ min-width:460px; }
  .sched-bar{ padding:0 5px; }
}
.vsim-panel{ display:none; }
.vsim-panel.active{ display:block; }

/* Caption under the window */
.vsim-cap{ margin-top:26px; }
.vsim-capset{ display:none; }
.vsim-capset.active{ display:grid; grid-template-columns:1fr 1.2fr; gap:36px; align-items:center; }
.vsim-capset .eyebrow{ margin-bottom:10px; }
.vsim-capset h3{ font-size:26px; }
/* The stage label above the caption, so the four read as a sequence. */
.vsim-stage-no{
  display:inline-block; margin-bottom:9px;
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange);
}
/* Says plainly that the four screens are examples, not the feature list. */
.vsim-note{
  margin:22px 0 0; max-width:74ch;
  font-size:13.5px; line-height:1.66; color:var(--slate);
  padding-top:18px; border-top:1px solid var(--border);
}
.vsim-capset p{ font-size:15px; line-height:1.65; color:var(--slate); }

/* Transitions — the view "arrives" the way it does in the app */
@keyframes vsimIn  { from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
@keyframes vsimItem{ from{ opacity:0; transform:translateX(-9px) } to{ opacity:1; transform:none } }
@keyframes vsimRise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes vsimPop { from{ opacity:0; transform:translate(-50%,-50%) scale(.35) } to{ opacity:1; transform:translate(-50%,-50%) scale(1) } }
.vsim-panel.active,
.vsim-capset.active{ animation:vsimIn .44s cubic-bezier(.22,.61,.36,1) backwards; }
.vsim-capset.active{ animation-delay:.06s; }
.vsim-nav-set.active span{ animation:vsimItem .34s cubic-bezier(.22,.61,.36,1) backwards; }
.vsim-nav-set.active span:nth-child(2){ animation-delay:.03s }
.vsim-nav-set.active span:nth-child(3){ animation-delay:.06s }
.vsim-nav-set.active span:nth-child(4){ animation-delay:.09s }
.vsim-nav-set.active span:nth-child(5){ animation-delay:.12s }
.vsim-nav-set.active span:nth-child(6){ animation-delay:.15s }
.vsim-nav-set.active span:nth-child(7){ animation-delay:.18s }
.vsim-panel.active .pin{ animation:vsimPop .42s cubic-bezier(.34,1.3,.5,1) backwards; }
.vsim-panel.active .pin:nth-child(2){ animation-delay:.16s }
.vsim-panel.active .pin:nth-child(3){ animation-delay:.21s }
.vsim-panel.active .pin:nth-child(4){ animation-delay:.26s }
.vsim-panel.active .pin:nth-child(5){ animation-delay:.31s }
.vsim-panel.active .pin:nth-child(6){ animation-delay:.36s }
.vsim-panel.active .pin:nth-child(7){ animation-delay:.41s }
.vsim-panel.active .pin:nth-child(8){ animation-delay:.46s }
.vsim-panel.active tbody tr,
.vsim-panel.active .sched-bar,
.vsim-panel.active .kan-col{ animation:vsimRise .42s cubic-bezier(.22,.61,.36,1) backwards; }
.vsim-panel.active tbody tr:nth-child(1), .vsim-panel.active .kan-col:nth-child(1){ animation-delay:.10s }
.vsim-panel.active tbody tr:nth-child(2), .vsim-panel.active .kan-col:nth-child(2){ animation-delay:.16s }
.vsim-panel.active tbody tr:nth-child(3), .vsim-panel.active .kan-col:nth-child(3){ animation-delay:.22s }
.vsim-panel.active tbody tr:nth-child(4), .vsim-panel.active .kan-col:nth-child(4){ animation-delay:.28s }
.vsim-panel.active tbody tr:nth-child(5), .vsim-panel.active .kan-col:nth-child(5){ animation-delay:.34s }
.vsim-panel.active .sched-row:nth-child(3) .sched-bar{ animation-delay:.10s }
.vsim-panel.active .sched-row:nth-child(4) .sched-bar{ animation-delay:.16s }
.vsim-panel.active .sched-row:nth-child(5) .sched-bar{ animation-delay:.22s }
.vsim-panel.active .sched-row:nth-child(6) .sched-bar{ animation-delay:.28s }
.vsim-panel.active .sched-row:nth-child(7) .sched-bar{ animation-delay:.34s }
.vsim-panel.active .sched-row:nth-child(8) .sched-bar{ animation-delay:.40s }
.vsim-panel.active .sched-card{ animation:vsimIn .4s cubic-bezier(.22,.61,.36,1) .55s backwards; }

@media (max-width:900px){
  .vsim-nav{ display:none; }
  .vsim-capset.active{ grid-template-columns:1fr; gap:14px; }
  .vsim-stage .mock{ min-height:0; }
  .vsim-stage .mock-body{ min-height:0; }
}
@media (max-width:640px){
  .vsim-rail{ display:none; }
  .vsim-tab{ padding:8px 13px; font-size:12.5px; }
}
/* Four tabs do not fit one pill on a phone: two rows of two, same control.
   The mock heads wrap their chips onto a second line instead of squeezing
   the chip text (a 44px bar cannot hold a two-line chip). */
@media (max-width:560px){
  .vsim-tabs{ display:grid; grid-template-columns:1fr 1fr; border-radius:22px; width:100%; }
  .vsim-tab{ justify-content:flex-start; padding:8px 12px; }
  .vsim-stage .mock-head{ height:auto; min-height:44px; flex-wrap:wrap; row-gap:6px; padding:8px 12px; }
  /* The map's side panel moves under the canvas: side by side, the map was 140px wide. */
  .vsim-stage .mock-body{ flex-direction:column; }
  .vsim-stage .map-canvas{ flex:none; min-height:240px; }
  .vsim-stage .map-side{ width:auto; border-left:0; border-top:1px solid var(--border); }
}
@media (prefers-reduced-motion: reduce){
  .vsim-panel.active, .vsim-capset.active, .vsim-nav-set.active span,
  .vsim-panel.active .pin, .vsim-panel.active tbody tr, .vsim-panel.active .kan-col, .vsim-panel.active .sched-bar, .vsim-panel.active .sched-card{ animation:none; }
  .vsim-rail-ind{ transition:none; }
}

/* --- mock: dispatch map --- */
.mock{ border:1px solid var(--border); border-radius:var(--radius); background:#fff; overflow:hidden; box-shadow:var(--shadow-sm); }
.mock-head{
  height:44px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px;
  padding:0 16px; background:#fff;
}
.mock-title{ font-size:12.5px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.04em; }
.mock-chip{
  white-space:nowrap; font-size:11px; font-weight:700; color:var(--slate); border:1px solid var(--border);
  border-radius:100px; padding:3px 10px; background:#fff;
}
.mock-chip.on{ background:var(--navy); color:#fff; border-color:var(--navy); }
.mock-body{ display:flex; min-height:300px; }
.map-canvas{ flex:1; position:relative; overflow:hidden; background:#F1EFE8; }
/* Over the base map: the nearest-crew route, the distance, the map controls. */
.map-route{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.map-route path{ fill:none; stroke:var(--navy); stroke-width:2.2; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; opacity:.8; }
.map-dist{
  position:absolute; transform:translate(-50%,-50%); padding:2px 7px; border-radius:100px;
  background:var(--navy); color:#fff; font-size:9.5px; font-weight:800; white-space:nowrap; box-shadow:var(--shadow-sm);
}
.map-ctl{
  position:absolute; right:10px; bottom:12px; display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.map-ctl span{ width:27px; height:27px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600; color:#666; }
.map-ctl span + span{ border-top:1px solid #e3e3e3; }
.map-scale{ position:absolute; left:10px; bottom:10px; display:flex; align-items:flex-end; gap:5px; font-size:9px; color:#444; line-height:1; }
.map-scale i{ display:block; width:44px; height:6px; border:1.5px solid #444; border-top:0; }
.map-svg{ position:absolute; inset:0; width:100%; height:100%; }
.pin{
  position:absolute; z-index:1; width:26px; height:26px; border-radius:50%; border:2px solid #fff;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:800;
  box-shadow:0 2px 6px rgba(18,33,43,.28); transform:translate(-50%,-50%);
}
.pin.sq{ border-radius:7px; }
.pin.tear{ border-radius:50% 50% 50% 5px; }
.map-side{ width:186px; border-left:1px solid var(--border); padding:12px; background:#fff; }
.map-side .lab{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); margin:6px 0 8px; }
.map-row{ display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border-soft); }
.map-row:last-child{ border-bottom:0; }
.map-row .sw{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.map-row .t{ font-size:11.5px; font-weight:700; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.map-row .s{ font-size:10.5px; color:var(--slate); }

/* --- mock: WIP table --- */
.mtable{ width:100%; border-collapse:collapse; font-size:10.5px; }
.mtable thead th{
  text-align:left; font-size:9px; letter-spacing:.03em; text-transform:uppercase; color:var(--slate);
  font-weight:800; padding:10px 6px; border-bottom:1px solid var(--border); white-space:nowrap; background:#fff;
}
.mtable tbody td{ padding:9px 6px; border-bottom:1px solid var(--border-soft); white-space:nowrap; }
.mtable th:first-child, .mtable td:first-child{ padding-left:12px; }
.mtable th:last-child, .mtable td:last-child{ padding-right:12px; }
.mtable tbody tr:last-child td{ border-bottom:0; }
.mtable .num{ text-align:right; font-variant-numeric:tabular-nums; }
.mtable .nm{ font-weight:700; color:var(--navy); }
.mtable .pos{ color:#1f7a45; font-weight:700; }
.mtable .neg{ color:var(--red); font-weight:700; }
.mtable tfoot td{ padding:11px 10px; font-weight:800; color:var(--navy); border-top:1px solid var(--border); background:var(--navy-08); }

/* --- mock: bid board --- */
.kan{ display:flex; gap:12px; padding:16px; overflow-x:auto; }
.kan-col{ width:150px; flex-shrink:0; }
.kan-h{ display:flex; align-items:center; justify-content:space-between; padding:0 2px 9px; }
.kan-h .n{ font-size:10px; font-weight:800; color:var(--slate); text-transform:uppercase; letter-spacing:.05em; }
.kan-h .c{ background:var(--concrete); color:var(--slate); font-size:9.5px; font-weight:800; padding:1px 7px; border-radius:100px; }
.kan-tot{ font-size:10.5px; color:var(--slate); font-weight:600; padding:0 2px 8px; margin-top:-5px; }
.kan-card{
  background:#fff; border:1px solid var(--border); border-radius:11px; padding:10px 11px; margin-bottom:8px;
  box-shadow:var(--shadow-sm);
}
.kan-card .t{ font-size:11.5px; font-weight:700; color:var(--navy); line-height:1.3; margin-bottom:5px; }
.kan-card .s{ font-size:10px; color:var(--slate); margin-bottom:8px; }
/* The GCs one bid went to: stacked initials, then the count. */
.kan-card .gcs{ display:flex; align-items:center; margin:-3px 0 8px; }
.kan-card .av{
  width:18px; height:18px; border-radius:50%; border:1.5px solid #fff; margin-right:-5px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:7.5px; font-weight:800; letter-spacing:.02em;
}
.kan-card .gcs .n{ margin-left:10px; font-size:9.5px; font-weight:700; color:var(--slate); white-space:nowrap; }
/* The opened bid: each GC it went to, with where that GC's quote stands. */
.kan-card.sel{ border-color:var(--navy); box-shadow:0 0 0 1px var(--navy), var(--shadow-sm); }
.kan-card .gcl{ display:flex; flex-direction:column; gap:4px; margin:-2px 0 7px; }
.kan-card .gcl div{ display:flex; align-items:center; gap:6px; font-size:9.5px; font-weight:700; color:var(--navy); white-space:nowrap; }
.kan-card .gcl .av{ margin-right:0; border-width:0; width:16px; height:16px; font-size:7px; }
.kan-card .gcl b{ margin-left:auto; font-size:8.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#1f7a45; }
.kan-card .gcl b.i{ color:var(--slate); }
.kan-card .gcn{ font-size:9px; font-weight:700; color:var(--slate); margin-bottom:8px; padding-top:6px; border-top:1px dashed var(--border); }
/* Badge on its own line, amount under it — at card width the two collided on the
   longer values, and letting only some of them wrap looked accidental. */
.kan-card .f{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.kan-card .f .badge{ max-width:100%; }
.kan-card .v{ flex:0 0 100%; }
.kan-card .v{ font-size:11.5px; font-weight:800; color:var(--navy); }

/* ============ Stats ============ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:26px 24px; }
.stat .v{ font-size:38px; font-weight:800; color:var(--navy); line-height:1; margin-bottom:12px; letter-spacing:-0.02em; }
.stat p{ font-size:13.5px; line-height:1.6; color:var(--slate); }

/* ============ Founder ============ */
.founder{ display:grid; grid-template-columns:1.25fr 1fr; gap:48px; align-items:start; }
.quote-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; position:relative; }
.quote-card .mark{ font-size:64px; line-height:.7; color:var(--blue-20); font-weight:800; margin-bottom:6px; }
.quote-card blockquote{ margin:0; font-size:17px; line-height:1.62; color:var(--ink); }
.quote-card blockquote em{ color:var(--navy); font-weight:800; font-style:normal; }
.byline{ display:flex; align-items:center; gap:14px; margin-top:26px; padding-top:22px; border-top:1px solid var(--border-soft); }
.avatar-lg{
  width:52px; height:52px; border-radius:50%; background:var(--navy); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:800;
}
.byline .n{ font-size:15px; font-weight:800; color:var(--navy); }
.byline .r{ font-size:12.5px; color:var(--slate); line-height:1.5; margin-top:2px; }

/* ============ Pricing ============ */
.pricing{ display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:start; }
.price-card{ background:#fff; border:1px solid var(--blue-20); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.price-top{ padding:28px 30px 26px; border-bottom:1px solid var(--border-soft); }
.price-name{ font-size:22px; font-weight:800; color:var(--navy); margin:14px 0 6px; }
.price-tag{ font-size:14px; color:var(--slate); line-height:1.55; margin-bottom:22px; }
.price-fig{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.price-fig .amt{ font-size:46px; font-weight:800; color:var(--navy); line-height:1; letter-spacing:-0.02em; }
.price-fig .per{ font-size:14px; font-weight:700; color:var(--slate); }
.price-note{ font-size:12.5px; color:var(--slate); line-height:1.55; margin-bottom:22px; }
.price-list{ padding:24px 30px 28px; display:flex; flex-direction:column; gap:14px; }
.launch-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 30px; }
.launch-card h3{ font-size:20px; margin-bottom:8px; }
.launch-price{ font-size:14px; font-weight:700; color:var(--blue); margin-bottom:14px; }
.launch-card > p{ font-size:14px; line-height:1.6; color:var(--slate); margin-bottom:22px; }
.guarantee{
  background:rgba(46,158,91,.07); border:1px solid rgba(46,158,91,.22); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:14px;
}
.guarantee .check-row{ font-size:13.5px; font-weight:700; color:var(--navy); }
.guarantee .tick{ background:rgba(46,158,91,.16); color:#1f7a45; }
.fineprint{ font-size:12px; line-height:1.6; color:var(--slate); margin-bottom:18px; }

/* ============ FAQ ============ */
.faq-list{ border-top:1px solid var(--border); }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:22px 44px 22px 0;
  font-size:17px; font-weight:800; color:var(--navy); position:relative; font-family:inherit; letter-spacing:-0.01em;
}
.faq-q:hover{ color:var(--blue); }
.faq-q .chev{
  position:absolute; right:6px; top:50%; transform:translateY(-50%); color:var(--slate);
  transition:transform .18s ease; display:flex;
}
.faq-item.open .faq-q .chev{ transform:translateY(-50%) rotate(180deg); }
.faq-a{ display:none; padding:0 48px 24px 0; font-size:14.5px; line-height:1.72; color:var(--slate); }
.faq-item.open .faq-a{ display:block; }
.faq-a a{ font-weight:700; }

/* ============ Form ============ */
.access{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.access-list{ display:flex; flex-direction:column; gap:16px; margin-top:28px; }
.form-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-sm); }
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:12.5px; font-weight:700; color:var(--navy); }
.field input, .field textarea{
  width:100%; height:42px; border:1px solid var(--border); border-radius:9px; padding:0 13px;
  font-size:14px; font-family:inherit; color:var(--ink); background:#fff; outline:none;
}
.field textarea{ height:88px; padding:11px 13px; resize:vertical; line-height:1.5; }
.field input:focus, .field textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-12); }
.consent{ display:flex; gap:11px; margin:20px 0 18px; }
.consent input{ width:17px; height:17px; margin-top:2px; flex-shrink:0; accent-color:var(--blue); }
.consent label{ font-size:11.5px; line-height:1.6; color:var(--slate); }
.consent a{ font-weight:700; }

/* ============ Footer CTA (navy) ============ */
.cta-band{ background:var(--navy); color:#fff; padding:86px 0; position:relative; overflow:hidden; }
.cta-band h2{ color:#fff; font-size:40px; max-width:780px; margin-bottom:16px; }
.cta-band p{ font-size:17px; line-height:1.6; color:rgba(255,255,255,.72); max-width:660px; margin-bottom:32px; }
.cta-band .btns{ display:flex; gap:12px; flex-wrap:wrap; }
.cta-art{ position:absolute; right:-40px; bottom:-30px; width:340px; opacity:.13; pointer-events:none; }

/* ============ Footer ============ */
.footer{ background:var(--white); padding:72px 0 0; position:relative; }
.foot-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; padding-bottom:56px; }
.foot-col h4{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); margin-bottom:16px; }
.foot-col a{ display:block; font-size:13px; font-weight:600; color:var(--navy); padding:6px 0; }
.foot-col a:hover{ color:var(--blue); }
.foot-bottom{
  border-top:1px solid var(--border); padding:26px 0 40px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.foot-bottom .logo svg{ height:24px; width:auto; display:block; }
.foot-legal{ font-size:12.5px; color:var(--slate); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.foot-legal a{ color:var(--slate); font-weight:700; }
.foot-legal a:hover{ color:var(--navy); }
.foot-strip{
  position:absolute; left:0; right:0; bottom:0; height:190px; z-index:-1; pointer-events:none;
  background-repeat:no-repeat; background-position:center bottom; background-size:100% 100%; opacity:.85;
}



/* ---- Hero shot: interactive rail simulation ---- */
.shot-stage{ position:relative; }
.shot-layer{
  position:absolute; top:0; left:0; width:1512px; height:718px;
  transform-origin:0 0; pointer-events:none; z-index:3;
}
.hot{
  position:absolute; width:42px; height:42px; border-radius:12px; padding:0; border:0;
  background:transparent; pointer-events:auto; cursor:pointer;
}
.hot::after{
  content:''; position:absolute; inset:0; border-radius:12px;
  box-shadow:0 0 0 0 rgba(45,159,193,0); transition:box-shadow .15s ease;
}
.hot:hover::after, .hot:focus-visible::after{ box-shadow:0 0 0 2px var(--blue), 0 0 0 7px rgba(45,159,193,.22); }
.hot:focus{ outline:none; }
.sim-pop{
  position:absolute; left:79px; top:64px; width:1080px; background:#fff; border-radius:20px;
  border:1px solid var(--border-soft); padding:22px; pointer-events:auto; z-index:6;
  box-shadow:0 18px 44px rgba(18,33,43,.20), 0 4px 12px rgba(18,33,43,.08);
  opacity:0; transform:translateY(-6px); transition:opacity .14s ease, transform .14s ease;
  visibility:hidden;
}
.sim-pop.show{ opacity:1; transform:none; visibility:visible; }
.sim-pop::before{
  content:''; position:absolute; left:-7px; top:var(--tri-top,30px); width:14px; height:14px; background:#fff;
  border-left:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
  transform:rotate(45deg); border-radius:0 0 0 3px;
}
.sim-head{ margin-bottom:18px; }
.sim-head h3{ font-size:21px; font-weight:800; text-transform:uppercase; letter-spacing:.02em; color:var(--navy); margin-bottom:5px; }
.sim-head p{ font-size:13px; color:var(--slate); line-height:1.45; max-width:480px; }
.sim-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; }
.sim-col{ padding:16px 16px 14px; border-radius:14px; border:1px solid var(--border); display:flex; flex-direction:column; }
.sim-col-label{
  display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:var(--navy); margin-bottom:10px;
}
.sim-col-label .icon{ width:19px; height:19px; color:var(--navy); }
.sim-item{
  display:flex; align-items:center; justify-content:space-between; gap:6px; padding:7px 6px; margin:0 -6px;
  font-size:13.5px; font-weight:600; color:var(--blue); border-radius:7px;
}
.sim-item .icon{ width:14px; height:14px; color:var(--slate); flex-shrink:0; }
.sim-open{ display:inline-flex; align-items:center; gap:5px; margin-top:auto; padding-top:10px; font-size:12px; font-weight:800; color:var(--navy); }
.sim-open .icon{ width:13px; height:13px; }
/* ---- The rail advertising that it is live ----
   A hover target nobody knows is there may as well not exist. Until the first
   real pointer arrives the rail breathes down the column, a tag points at it
   from inside the screenshot, and a ghost cursor opens one menu unprompted.
   All three sit inside .shot-layer, so they are in the screenshot's own
   coordinates and stay locked to the rail at any width. */
@keyframes hotBreathe{
  0%, 62%, 100%{ box-shadow:0 0 0 0 rgba(45,159,193,0), 0 0 0 0 rgba(45,159,193,0); }
  22%          { box-shadow:0 0 0 2px rgba(45,159,193,.9), 0 0 0 9px rgba(45,159,193,.16); }
}
.shot-layer.is-idle .hot::after{
  animation:hotBreathe 3.6s ease-in-out infinite;
  animation-delay:calc(var(--n, 0) * .18s);
}
.sim-tip{
  position:absolute; left:76px; z-index:4; pointer-events:none; white-space:nowrap;
  background:var(--navy); color:#fff; border-radius:100px;
  padding:12px 22px; font-size:16px; font-weight:800; letter-spacing:-.005em;
  box-shadow:0 16px 34px rgba(18,33,43,.30);
  opacity:0; transform:translateX(-8px);
  transition:opacity .34s ease, transform .34s ease;
}
.sim-tip.on{ opacity:1; transform:none; }
.sim-tip b{ color:#7FD6F0; font-weight:800; }
.sim-tip::before{
  content:''; position:absolute; left:-6px; top:50%; margin-top:-7px;
  width:14px; height:14px; background:var(--navy); transform:rotate(45deg); border-radius:2px;
}
.sim-cursor{
  position:absolute; left:0; top:0; width:34px; height:34px; z-index:7; pointer-events:none;
  opacity:0;
  transition:opacity .3s ease, transform .82s cubic-bezier(.38,.02,.2,1);
  filter:drop-shadow(0 4px 9px rgba(18,33,43,.42));
}
.sim-cursor.on{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .shot-layer.is-idle .hot::after{ animation:none; }
  .sim-cursor{ display:none; }
}
/* ---- Narrow screens: the rail cycles itself as the page scrolls ----
   There is no hover on a phone, and the popup is laid out in the
   screenshot's coordinates, so scaled down to phone width its text would be
   about four pixels tall. So the hover machinery is switched off and the same
   menu data is presented at real size in a sheet over the foot of the screen,
   stepping through the six areas as the shot travels up the viewport. */
@media (max-width:900px){
  .hot{ pointer-events:none; }
  .sim-pop, .sim-tip, .sim-cursor{ display:none; }
  .shot-layer.is-idle .hot::after{ animation:none; }
  /* The ring is drawn in shot coordinates, so it stays on its icon. */
  .hot.is-cy::after{ box-shadow:0 0 0 3px var(--blue), 0 0 0 11px rgba(45,159,193,.20); }
}
@media (min-width:901px){ .sim-m{ display:none; } }

.sim-m{
  position:absolute; left:0; right:0; bottom:0; z-index:6; pointer-events:none;
  padding:13px 16px 14px;
  background:linear-gradient(180deg, rgba(11,31,51,0) 0%, rgba(11,31,51,.93) 34%, rgba(11,31,51,.97) 100%);
  color:#fff;
}
.sim-m-bar{ display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.sim-m-eyebrow{
  font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#7FD6F0; white-space:nowrap;
}
.sim-m-dots{ display:flex; gap:5px; margin-left:auto; }
.sim-m-dots i{
  width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.28);
  transition:background .25s ease, width .25s ease;
}
.sim-m-dots i.on{ width:15px; border-radius:3px; background:var(--blue); }
.sim-m-label{
  font-size:15px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  line-height:1.1; margin-bottom:4px;
}
/* Held at two lines whatever the area lists, so the sheet is the same height
   at every step and the screenshot behind it does not jump. */
.sim-m-items{
  font-size:11.5px; line-height:1.45; color:#A8C4D6;
  height:calc(11.5px * 1.45 * 2); overflow:hidden;
}
/* Only the words change between steps, so only the words move. */
.sim-m-label, .sim-m-items{ transition:opacity .2s ease; }
.sim-m.is-turning .sim-m-label, .sim-m.is-turning .sim-m-items{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  .sim-m-label, .sim-m-items, .sim-m-dots i{ transition:none; }
}



/* ---- The end-to-end thread: Gantt ---- */
.gantt-scroll{ overflow-x:auto; overflow-y:visible; padding-bottom:4px; }
.gantt{ min-width:940px; position:relative; }
.gantt-head{ display:flex; border-bottom:1px solid var(--border); }
.gantt-head .gantt-label{ border-bottom:0; }
.gantt-weeks{ flex:1; display:grid; grid-template-columns:repeat(12,1fr); }
.gantt-weeks span{
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--slate);
  text-align:center; padding:0 4px 12px; border-left:1px solid var(--border-soft);
}
.gantt-row{ display:flex; position:relative; }
.gantt-row + .gantt-row .gantt-label,
.gantt-row + .gantt-row .gantt-track{ border-top:1px solid var(--border-soft); }
.gantt-label{
  width:376px; flex-shrink:0; display:flex; align-items:center; gap:16px; padding:18px 24px 18px 0;
  position:sticky; left:0; background:var(--white); z-index:2; border-right:1px solid var(--border);
}
.stage-chip{
  width:48px; height:48px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; background:var(--chip-bg); color:var(--chip-fg);
}
.gantt-label h3{ font-size:15.5px; margin-bottom:5px; }
.gantt-label p{ font-size:12.5px; line-height:1.55; color:var(--slate); }
.gantt-track{ flex:1; position:relative; min-height:86px; }
.gantt-cells{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(12,1fr); }
.gantt-cells i{ border-left:1px solid var(--border-soft); }
.gantt-bar{
  position:absolute; top:50%; transform:translateY(-50%); height:26px; border-radius:100px;
  background:var(--bar); left:var(--x1); width:var(--w);
}
.gantt-dot{
  position:absolute; right:-9px; top:50%; width:15px; height:15px; background:var(--dot);
  transform:translateY(-50%) rotate(45deg); border-radius:3px;
}
.gantt-links{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:visible; }
.gantt-links path{ fill:none; stroke:var(--slate); stroke-opacity:.45; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
.gantt-links path.gantt-arrow{ fill:var(--slate); fill-opacity:.45; stroke:none; }
@media (max-width:900px){
  .gantt-label{ width:250px; padding-right:16px; gap:12px; }
  .stage-chip{ width:40px; height:40px; border-radius:11px; font-size:13.5px; }
  .gantt-label h3{ font-size:14px; }
}
/* Too narrow for a timeline to say anything — fall back to the stage list. */
@media (max-width:700px){
  .gantt-scroll{ overflow:visible; }
  .gantt{ min-width:0; }
  .gantt-head, .gantt-track, .gantt-links{ display:none; }
  .gantt-label{
    width:auto; flex:1 1 auto; min-width:0; position:static; border-right:0;
    padding:18px 0; align-items:flex-start;
  }
  .gantt-label > div{ min-width:0; }
  .gantt-row + .gantt-row .gantt-label{ border-top:1px solid var(--border-soft); }
  .gantt-label p{ font-size:13.5px; }
}

/* ---- Parallax ---- */
[data-par]{ will-change:transform; }
/* No reduced-motion reset here on purpose. The parallax script returns before
   it touches a transform when reduced motion is asked for, so there is never
   an offset to undo, and `transform:none` would instead wipe the centring
   these elements declare in CSS (translateX(-50%)) and shove them off-page. */

/* ---- Toast (concept notice) ---- */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--navy); color:#fff; padding:13px 20px; border-radius:100px;
  font-size:13.5px; font-weight:600; box-shadow:var(--shadow-md); z-index:200;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  display:flex; align-items:center; gap:10px; max-width:calc(100vw - 32px);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .icon{ color:var(--blue); flex-shrink:0; }

/* ============ Responsive ============ */
@media (max-width:1080px){
  .feat-grid{ grid-template-columns:repeat(2,1fr); }
  .thread{ grid-template-columns:repeat(2,1fr); gap:32px 0; }
  .stage:not(:last-child)::after{ display:none; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:repeat(3,1fr); gap:28px; }
  .view-panel.active{ grid-template-columns:1fr; gap:26px; }
  .pricing{ grid-template-columns:1fr; }
  .founder{ grid-template-columns:1fr; gap:32px; }
  .access{ grid-template-columns:1fr; gap:34px; }
}
@media (max-width:860px){
  .nav-links, .nav-login{ display:none; }
  .nav-burger{ display:flex; }
  .wrap, .wrap-narrow, .nav-inner{ padding:0 20px; }
  .sec{ padding:68px 0; }
  .hero{ padding-top:calc(var(--nav-h) + 48px); }
  .hero h1{ font-size:38px; }
  .hero-body{ font-size:15.5px; }
  .sec-head h2, .cta-band h2{ font-size:30px; }
  .hero-art{ width:1100px; opacity:.4; }
  .feat-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:repeat(2,1fr); }
  .fields{ grid-template-columns:1fr; }
  .quote-card{ padding:24px; }
  .nav-right{ gap:8px; }
  .nav-right .btn{ padding:0 12px; }
  .price-top, .price-list, .launch-card{ padding-left:22px; padding-right:22px; }
}
@media (max-width:560px){
  .frame-url{ display:none; }
  .frame-bar{ justify-content:space-between; }
}
@media (max-width:520px){
  .hero h1{ font-size:31px; }
  .stat .v{ font-size:31px; }
  .price-fig .amt{ font-size:38px; }
  /* full-width only where a CTA stands alone — never in the nav */
  .hero-ctas .btn, .cta-band .btn, .founder .btn{ width:100%; }
  .nav-right .btn{ width:auto; }
  .foot-grid{ grid-template-columns:1fr; }
}
/* Reveal-on-scroll */
/* Reveal blocks are parked at opacity:0 only once JavaScript has arrived
   (site.js tags <html> with .js). Without it every block is simply visible. */
html.js .rv{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
html.js .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; transition:none; }
  .nav{ transition:none; }
}


/* ============================================================
   Interior pages — everything the landing page didn't need.
   ============================================================ */

/* --- page hero --- */
.page-hero{ padding:74px 0 46px; }
.page-hero h1{ font-size:48px; line-height:1.08; letter-spacing:-.022em; margin-bottom:18px; max-width:15ch; }
.page-hero h1 em{ font-style:normal; color:var(--blue); }
.page-hero .lede{ max-width:62ch; font-size:17px; }
.page-hero .eyebrow{ margin-bottom:12px; }
.page-hero .hero-ctas{ margin-top:30px; }
@media (max-width:820px){ .page-hero{ padding:52px 0 34px; } .page-hero h1{ font-size:34px; max-width:none; } }

/* --- breadcrumbs --- */
.crumbs{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:12.5px; font-weight:700; color:var(--slate); margin-bottom:22px;
}
.crumbs a{ color:var(--slate); text-decoration:none; }
.crumbs a:hover{ color:var(--blue); }
.crumbs i{ font-style:normal; color:var(--concrete); }
.crumbs span{ color:var(--navy); }

/* --- long-form prose --- */
.prose{ max-width:72ch; }
.prose.wide{ max-width:none; }
.prose > p{ font-size:16px; line-height:1.72; color:var(--slate); margin-bottom:20px; }
.prose > p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--navy); font-weight:800; }
.prose em{ font-style:italic; }
.prose a{ color:var(--blue); font-weight:700; text-decoration:none; border-bottom:1px solid var(--blue-20); }
.prose a:hover{ border-bottom-color:var(--blue); }
.prose h3{ font-size:19px; color:var(--navy); margin:34px 0 12px; }
.prose ul{ list-style:none; margin:0 0 22px; padding:0; }
.prose ul li{
  position:relative; padding-left:26px; margin-bottom:11px;
  font-size:16px; line-height:1.66; color:var(--slate);
}
.prose ul li::before{
  content:""; position:absolute; left:6px; top:10px;
  width:7px; height:7px; border-radius:2px; background:var(--blue); transform:rotate(45deg);
}

/* --- pull-out callout --- */
.callout{
  border-left:3px solid var(--orange); background:var(--orange-08, rgba(244,124,60,.07));
  border-radius:0 var(--radius) var(--radius) 0; padding:20px 24px; margin:28px 0;
  max-width:72ch;
}
.callout p{ font-size:15.5px; line-height:1.68; color:var(--ink); margin:0; }
.callout strong{ color:var(--navy); }

/* --- numbered steps --- */
.steps{ counter-reset:step; max-width:72ch; }
.step-item{ position:relative; padding-left:58px; margin-bottom:30px; }
.step-item::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:-2px; width:40px; height:40px; border-radius:12px;
  background:var(--blue-12); color:#1c7691; font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.step-item h3{ font-size:17.5px; color:var(--navy); margin:8px 0 8px; }
.step-item p{ font-size:15.5px; line-height:1.68; color:var(--slate); margin:0; }

/* --- comparison table --- */
.ctable-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:#fff; }
.ctable{ width:100%; border-collapse:collapse; min-width:620px; }
.ctable th, .ctable td{ padding:14px 18px; text-align:left; border-bottom:1px solid var(--border-soft); font-size:14px; }
.ctable thead th{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--slate); background:var(--navy-08); border-bottom:1px solid var(--border);
}
.ctable thead th:nth-child(2){ color:var(--navy); }
.ctable tbody tr:last-child td{ border-bottom:0; }
.ctable td:first-child{ color:var(--ink); font-weight:600; width:46%; }
.ctable td:nth-child(2){ color:var(--navy); font-weight:700; }
.ctable td:nth-child(3){ color:var(--slate); }
.ctable .yes{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background:rgba(46,158,91,.14); color:#1f7a45; font-weight:800; font-size:12px; }
.ctable-note{ font-size:12.5px; color:var(--slate); font-style:italic; margin-top:14px; }

/* --- keep exploring --- */
.explore{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; }
.explore-link{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px; border:1px solid var(--border); border-radius:var(--radius);
  background:#fff; color:var(--navy); font-size:14.5px; font-weight:700; text-decoration:none;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.explore-link:hover{ border-color:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.explore-link .icon{ color:var(--blue); flex-shrink:0; }

/* --- guides index --- */
.guide-group{ margin-bottom:46px; }
.guide-group > h2{ font-size:22px; margin-bottom:18px; }
.guide-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
.guide-card{
  display:block; padding:24px; border:1px solid var(--border); border-radius:var(--radius);
  background:#fff; text-decoration:none; transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.guide-card:hover{ border-color:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.guide-card h3{ font-size:17px; color:var(--navy); margin-bottom:9px; }
.guide-card p{ font-size:13.5px; line-height:1.6; color:var(--slate); margin:0; }
.guide-card .more{ display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-size:13px; font-weight:800; color:var(--blue); }

/* --- calculator --- */
.calc{
  display:grid; grid-template-columns:1fr 1.05fr; gap:0;
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
  background:#fff; box-shadow:var(--shadow-md);
}
.calc-in{ padding:30px; border-right:1px solid var(--border); }
.calc-out{ padding:30px; background:var(--white); }
.calc-field{ margin-bottom:18px; }
.calc-field label{ display:block; font-size:12.5px; font-weight:800; color:var(--navy); margin-bottom:7px; }
.calc-field input{
  width:100%; padding:12px 14px; font:inherit; font-size:15px; font-weight:700; color:var(--navy);
  border:1px solid var(--border); border-radius:11px; background:#fff;
}
.calc-field input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-12); }
.calc-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--border-soft); }
.calc-row:last-child{ border-bottom:0; }
.calc-row .k{ font-size:13px; font-weight:700; color:var(--slate); }
.calc-row .v{ font-size:20px; font-weight:800; color:var(--navy); white-space:nowrap; }
.calc-row.hero-row .v{ font-size:30px; }
.calc-row.over .v{ color:var(--orange); }
.calc-row.under .v{ color:var(--green, #2E9E5B); }
.calc-note{ font-size:12.5px; line-height:1.6; color:var(--slate); font-style:italic; margin-top:18px; }
@media (max-width:820px){
  .calc{ grid-template-columns:1fr; }
  .calc-in{ border-right:0; border-bottom:1px solid var(--border); }
}

/* --- legal --- */
.legal{ max-width:78ch; }
.legal h2{ font-size:22px; margin:44px 0 14px; }
.legal h2:first-child{ margin-top:0; }
.legal h3{ font-size:16.5px; margin:26px 0 10px; }
.legal p{ font-size:15px; line-height:1.72; color:var(--slate); margin-bottom:16px; }
.legal ul{ list-style:none; padding:0; margin:0 0 20px; }
.legal li{ position:relative; padding-left:22px; margin-bottom:10px; font-size:15px; line-height:1.7; color:var(--slate); }
.legal li::before{ content:""; position:absolute; left:4px; top:10px; width:6px; height:6px;
  border-radius:50%; background:var(--concrete); }
.legal strong{ color:var(--navy); }
.legal a{ color:var(--blue); font-weight:700; text-decoration:none; }
.legal-date{
  display:inline-block; padding:7px 14px; border-radius:100px; background:var(--navy-08);
  font-size:12.5px; font-weight:700; color:var(--navy); margin-bottom:26px;
}

/* --- about --- */
.about-quote{ border-left:3px solid var(--blue); padding-left:26px; margin:30px 0; max-width:70ch; }
.about-quote p{ font-size:18px; line-height:1.62; color:var(--ink); font-style:italic; }

/* --- mobile nav: a drawer off the right edge, not a full-screen takeover --- */
.nav-scrim{
  position:fixed; inset:0; z-index:110; background:rgba(18,43,67,.40);
  opacity:0; visibility:hidden; transition:opacity .26s ease, visibility 0s .26s;
}
.nav-scrim.open{ opacity:1; visibility:visible; transition-delay:0s; }
.nav-sheet{
  position:fixed; top:0; right:0; bottom:0; left:auto; z-index:111;
  width:min(360px, 86vw); max-height:none; background:#fff;
  border-left:1px solid var(--border); box-shadow:-20px 0 52px rgba(18,43,67,.20);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.nav-sheet.open{ transform:none; }
.nav-sheet-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 14px; border-bottom:1px solid var(--border-soft);
  position:sticky; top:0; background:#fff; z-index:1;
}
.nav-sheet-head span{
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--slate);
}
.nav-sheet-close{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:1px solid var(--border); border-radius:10px;
  background:#fff; color:var(--navy); cursor:pointer; padding:0;
}
.nav-sheet-close .icon{ width:16px; height:16px; }
.nav-sheet-close:hover{ background:var(--navy-08); }
body.nav-open{ overflow:hidden; }
.nav-sheet-inner{ padding:4px 0 24px; }
@media (prefers-reduced-motion: reduce){
  .nav-sheet, .nav-scrim{ transition:none; }
}
.nav-sheet a{
  display:block; padding:13px 22px; font-size:15px; font-weight:700;
  color:var(--navy); text-decoration:none; border-bottom:1px solid var(--border-soft);
}
.nav-sheet-inner > .nav-sheet-group:last-child{ border-bottom:0; }
@media (min-width:1081px){ .nav-sheet, .nav-scrim{ display:none; } }

/* --- spacing corrections --- */
.page-hero ~ .sec{ padding:62px 0; }
.page-hero ~ .sec-tight{ padding:48px 0; }
.page-hero + .sec, .page-hero + .sec-tight{ padding-top:10px; }
/* On a hero with art, the hero's own bottom padding is filled by the drawing
   rather than left as white space, so the 10px above would put the next
   heading right against the artwork's cut edge. These pages need the gap
   after the hero instead of inside it. */
.page-hero.has-art + .sec, .page-hero.has-art + .sec-tight{ padding-top:68px; }
@media (max-width:820px){
  .page-hero.has-art + .sec, .page-hero.has-art + .sec-tight{ padding-top:46px; }
}
.page-hero ~ .sec .sec-head{ margin-bottom:26px; }
.page-hero ~ .sec .sec-head h2{ font-size:32px; }
.page-hero ~ .sec-tight .sec-head h2{ font-size:32px; }
.page-hero h1{ max-width:20ch; }
.guide-card{ display:flex; flex-direction:column; }
.guide-card .more{ margin-top:auto; padding-top:14px; }

/* ============================================================
   Navigation — floating mega-menu panels
   ============================================================ */
/* The old flat nav styled every anchor inside .nav-links; the menu rows and the
   promo card are anchors too, so those legacy rules are scoped back out. */
.nav-links a.mm-item, .nav-links a.mm-promo{ padding:0; border-radius:0; }
.nav-links a.mm-item, .nav-links a.mm-item:hover{ background:none; }
.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-item{ position:relative; }
.nav-trigger{
  display:inline-flex; align-items:center; gap:5px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:14.5px; font-weight:700; color:var(--navy);
  padding:10px 13px; border-radius:10px; text-decoration:none;
  transition:background .18s ease, color .18s ease;
}
.nav-trigger .icon{ width:15px; height:15px; color:var(--slate); transition:transform .24s ease; }
.nav-item:hover > .nav-trigger,
.nav-item.open > .nav-trigger{ background:var(--navy-08); }
.nav-item.open > .nav-trigger .icon{ transform:rotate(180deg); }

.mm-panel{
  position:absolute; top:calc(100% + 10px); left:-14px; z-index:60;
  display:flex; gap:14px; padding:14px; overflow:hidden;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:0 18px 48px rgba(18,43,67,.14), 0 2px 8px rgba(18,43,67,.06);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s .24s;
}
.nav-item.open .mm-panel{
  opacity:1; visibility:visible; transform:none; transition-delay:0s;
}
.mm-cols{ display:flex; gap:10px; }
.mm-col{ min-width:258px; }
.mm-wide .mm-col{ min-width:264px; }
.mm-label{
  font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--slate); padding:6px 12px 8px;
}
.nav-links a.mm-item{
  display:flex; align-items:center; gap:11px; padding:9px 12px;
  text-decoration:none; color:var(--navy);
}
.mm-ico{
  width:32px; height:32px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-12); color:#1c7691;
}
.mm-ico .icon{ width:16px; height:16px; }
.mm-txt{ flex:1; min-width:0; }
.mm-t{ display:block; font-size:13.5px; font-weight:700; line-height:1.3; }
.mm-d{ display:block; font-size:11.5px; line-height:1.45; color:var(--slate); margin-top:2px; }
.mm-item > .icon{
  width:14px; height:14px; color:var(--concrete); flex-shrink:0;
  transition:transform .2s ease;
}
.mm-item:hover > .icon{ transform:translateX(3px); }

/* The promo runs to the panel's own edge — flat on the left, bled into the
   top, right and bottom borders. */
.nav-links a.mm-promo{
  display:flex; flex-direction:column; width:302px; flex-shrink:0;
  margin:-14px -14px -14px 0; padding:26px 26px 24px; text-decoration:none;
  color:#fff;
}
.nav-links a.mm-promo,
.nav-links a.mm-promo:hover{
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(45,159,193,.28) 0%, rgba(45,159,193,0) 58%),
    var(--navy);
}
.mm-promo-eyebrow{
  color:#fff; display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  padding:6px 13px; border:1px solid rgba(255,255,255,.22); border-radius:100px;
  font-size:9.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  margin-bottom:18px;
}
.mm-promo-eyebrow::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--yellow);
}
.mm-promo-title{
  display:block; color:#fff; font-size:19px; font-weight:800; line-height:1.28;
  letter-spacing:-.01em; margin-bottom:10px;
}
.mm-promo-body{ display:block; font-size:13px; line-height:1.55; color:rgba(255,255,255,.7); }
.mm-promo-list{ list-style:none; margin:20px 0 0; padding:0; }
.mm-promo-list li{
  display:flex; align-items:center; gap:10px; padding:5px 0;
  font-size:13.5px; font-weight:600; color:rgba(255,255,255,.92);
}
.mm-promo-list .icon{ width:15px; height:15px; color:var(--yellow); flex-shrink:0; }
.mm-promo-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:13.5px; font-weight:800; color:var(--yellow);
}
.mm-promo-cta .icon{ width:15px; height:15px; transition:transform .2s ease; }
.mm-promo:hover .mm-promo-cta .icon{ transform:translateX(3px); }
/* Without a checklist there is nothing to fill the middle, so the block sits
   centred rather than stranding the CTA at the bottom of a tall panel. */
.mm-promo.no-list{ justify-content:center; }
.mm-promo.no-list .mm-promo-cta{ margin-top:22px; }

@media (prefers-reduced-motion: reduce){
  .mm-panel{ transition:none; }
  .nav-trigger .icon, .mm-promo-cta .icon{ transition:none; }
}

/* Below the desktop breakpoint the whole thing collapses into the sheet. */
@media (max-width:1080px){
  .nav-links{ display:none; }
}

/* --- mobile sheet, now with the full map --- */
.nav-sheet-group{ border-bottom:1px solid var(--border-soft); }
.nav-sheet-group > button{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:14px 22px; border:0; background:none; font:inherit;
  font-size:15px; font-weight:800; color:var(--navy); cursor:pointer;
}
.nav-sheet-group > button .icon{ width:16px; height:16px; color:var(--slate); transition:transform .22s ease; }
.nav-sheet-group.open > button .icon{ transform:rotate(180deg); }
.nav-sheet-sub{ display:none; padding:0 22px 14px; }
.nav-sheet-group.open .nav-sheet-sub{ display:block; }
.nav-sheet-sub a{
  display:block; padding:9px 0 9px 12px; border-left:2px solid var(--border);
  font-size:14px; font-weight:700; color:var(--slate); text-decoration:none;
}
.nav-sheet-sub a:hover{ color:var(--blue); border-left-color:var(--blue); }
.nav-sheet-sub .nav-sheet-label{
  font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--slate); padding:12px 0 4px;
}

/* The nav map is wider than the old four links, so it collapses sooner. */
@media (max-width:1080px){
  .nav-links, .nav-login{ display:none !important; }
  .nav-burger{ display:flex !important; }
}
.nav-sheet-flat{
  display:block; padding:14px 22px; font-size:15px; font-weight:800; text-decoration:none;
}

/* ============================================================
   Pricing — one stacked column, price leading the card
   ============================================================ */
/* The launch card sits under the price card at the same width, at every size. */
.pricing{
  grid-template-columns:1fr !important;
  max-width:640px; margin:0 auto; gap:22px;
}
.price-card{
  position:relative; overflow:visible; margin-top:22px;
}
/* The badge flags the top-left corner, straddling the card's own edge. */
.price-card .price-flag{
  position:absolute; top:-15px; left:28px; z-index:2;
  padding:7px 15px; font-size:10.5px; letter-spacing:.1em;
  box-shadow:0 2px 8px rgba(18,43,67,.10);
}
.price-top{ padding:34px 32px 28px; }
.price-name{ margin:0 0 18px; font-size:21px; }
.price-fig{ display:block; margin-bottom:10px; }
.price-fig .amt{
  display:block; font-size:74px; line-height:.98; letter-spacing:-.035em;
}
.price-fig .per{
  display:block; margin-top:12px; font-size:15px; font-weight:600; color:var(--slate);
}
.price-card .price-tag{ margin:0 0 6px; font-size:14.5px; }
.price-card .price-note{ margin-bottom:24px; }
.launch-card{ margin:0; }

@media (max-width:640px){
  .price-fig .amt{ font-size:58px; }
  .price-top{ padding:30px 22px 24px; }
  .price-card .price-flag{ left:20px; }
}

/* ---- Price card on navy ---- */
.price-card{
  background:
    radial-gradient(120% 80% at 88% 4%, rgba(45,159,193,.22) 0%, rgba(45,159,193,0) 60%),
    var(--navy);
  border-color:var(--navy);
  box-shadow:0 18px 44px rgba(18,43,67,.18), 0 3px 10px rgba(18,43,67,.08);
}
.price-card .price-top{ border-bottom-color:rgba(255,255,255,.14); }
.price-card .price-name{ color:#fff; }
.price-card .price-fig .amt{ color:#fff; }
.price-card .price-fig .per{ color:rgba(255,255,255,.74); }
.price-card .price-tag{ color:rgba(255,255,255,.80); }
.price-card .price-note{ color:rgba(255,255,255,.55); }

/* The navy button would vanish here, so the CTA inverts. */
.price-card .btn-primary{
  background:#fff; color:var(--navy); border-color:#fff;
}
.price-card .btn-primary:hover{ background:rgba(255,255,255,.90); border-color:rgba(255,255,255,.90); }
.price-card .btn-primary .icon{ color:var(--navy); }

.price-card .check-row{ color:rgba(255,255,255,.92); }
.price-card .check-row .tick{ background:rgba(255,255,255,.12); color:var(--yellow); }

/* Opaque, so it reads the same over the card and over the section behind it. */
.price-card .price-flag{
  background:#E6F4F8; border:1px solid #CBE7F0; color:#12627A;
}

/* ---- Price card: capsule and order ---- */
.price-card .price-flag{
  font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 16px;
}
.price-card .price-tag{ margin:0 0 22px; }
.price-card .price-fig{ margin-bottom:14px; }

/* ---- Founder quote: typed out on arrival ---- */
/* Characters are laid out from the start and only their visibility flips, so
   the card never changes height and nothing below it moves. */
.q-type .ch{ font-style:inherit; position:relative; }
.q-type.is-typing .ch{ visibility:hidden; }
.q-type.is-typing .ch.on{ visibility:visible; }
.q-type.is-typing .ch.cur::after{
  content:''; position:absolute; left:100%; top:.12em;
  width:2px; height:1.05em; background:var(--blue); border-radius:1px;
  animation:qCaret .9s steps(1) infinite;
}
@keyframes qCaret{ 0%,55%{ opacity:1; } 56%,100%{ opacity:0; } }

/* ============================================================
   Feature ledger — headline left, intro right, hairline grid below
   ============================================================ */
.sec-split{
  display:grid; grid-template-columns:1.05fr 1fr; gap:26px 72px; align-items:start;
  margin-bottom:54px;
}
.sec-split h2{ margin:0; max-width:none; font-size:40px; }
.sec-split .lede{ margin:8px 0 0; max-width:52ch; }
.sec-split .lede strong{ color:var(--navy); font-weight:800; }

@media (max-width:900px){
  .sec-split{ grid-template-columns:1fr; gap:14px; margin-bottom:34px; }
  .sec-split h2{ max-width:none; font-size:30px; }
}

/* ---- Founder section: clear sky up top, the drawing behind the quote ---- */
#founder{ position:relative; overflow:hidden; padding-top:54px; }
.founder{ display:block; }
/* The heading sits on open background rather than across the line work. */
.founder-copy{
  position:relative; z-index:1; max-width:760px; margin:0 auto 8px; text-align:center;
}
.founder-copy h2{ font-size:40px; line-height:1.15; margin-bottom:16px; }
.founder-copy > p{
  font-size:17px; line-height:1.65; color:var(--slate);
  max-width:640px; margin:0 auto 26px;
}

.founder-lower{ position:relative; padding:26px 0 150px; }
/* Bleeds past the wrap to the full width of the section. */
.founder-bg{
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; height:100%; object-fit:cover; object-position:center 55%;
  opacity:.3; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 11%, #000 90%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 11%, #000 90%, transparent 100%);
}
/* Melts the top of the drawing into the open ground above it. */
.founder-lower::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom, var(--white) 0%, rgba(250,249,245,.35) 14%, rgba(250,249,245,0) 38%);
}
.founder-lower .quote-card{
  position:relative; z-index:1; max-width:760px; margin:0 auto;
}

@media (max-width:900px){
  #founder{ padding-top:38px; }
  .founder-copy h2{ font-size:29px; }
  .founder-lower{ padding:18px 0 28px; }
  .founder-bg{ opacity:.22; }
}



/* ============================================================
   Feature boxes — a drawing board.

   The section leaves the page's white and cream for navy, so the grid
   under each plot reads as what it always was: blueprint paper. The
   setting-out line is drawn in cyan on that ground, the box is poured
   as a lighter navy panel, and the fit-out lands on top. Everything
   below is scoped to #features so the rest of the page is untouched.
   ============================================================ */
#features{
  --bp-ground:#0B1F33;      /* the board */
  --bp-panel:#17344E;       /* a poured box standing on it */
  --bp-line:#4FC3E8;        /* setting-out lines and grid */
  --bp-body:#9FB8CC;        /* body copy on the panel */
  background:var(--bp-ground);
}
#features .sec-split h2{ color:#FFF; }
#features .sec-split .lede{ color:var(--bp-body); }
#features .sec-split .lede strong{ color:#FFF; }

.boxes{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.bx{
  position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden;
  --p:0; --c:0;                     /* build progress, then fit-out progress */
}
/* Blueprint paper underneath, visible before the box is poured. The plot is
   a shade lighter than the board so an empty plot still reads as a plot. */
.bx::before{
  content:''; position:absolute; inset:0; border-radius:14px; z-index:0;
  background-color:rgba(79,195,232,.05);
  background-image:
    linear-gradient(to right, rgba(79,195,232,.20) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79,195,232,.20) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:calc(1 - var(--p));
}
/* The setting-out line draws itself around the plot. */
.bx-frame{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.bx-frame rect{
  fill:none; stroke:var(--bp-line); stroke-width:1.6; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--p));
  opacity:calc(1 - (var(--c) * .72));
}
/* Then the box itself rises from the ground. */
.bx-fill{
  position:absolute; inset:0; z-index:1; border-radius:14px;
  /* A shade lighter than the board, with a lit top edge, so the wall going up
     reads against the dark rather than disappearing into it. */
  background:linear-gradient(180deg, #1B3B58 0%, var(--bp-panel) 58%);
  box-shadow:inset 0 0 0 1px rgba(79,195,232,.22), 0 20px 44px rgba(0,0,0,.34);
  clip-path:inset(calc((1 - var(--p)) * 100%) 0 0 0 round 14px);
}
/* Fit-out lands last. */
.bx-body{
  position:relative; z-index:3; height:100%; box-sizing:border-box;
  padding:26px 26px 24px; display:flex; flex-direction:column; justify-content:flex-start;
  opacity:var(--c);
}
/* The row is as tall as the icon whether the title runs one line or two, so
   the body copy below it starts at the same height on every card. */
.bx-head{
  display:flex; align-items:flex-start; gap:16px;
  height:52px; margin-bottom:20px;
  transform:translateY(calc((1 - var(--c)) * 14px));
}
.bx-head h3{ margin:0; flex:1; min-width:0; padding-top:.14em; }
.bx-body > p{ transform:translateY(calc((1 - var(--c)) * 14px)); }
.bx-ico{
  width:52px; height:100%; aspect-ratio:1; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(79,195,232,.14); color:#7FD6F0;
  box-shadow:inset 0 0 0 1px rgba(79,195,232,.22);
  transform:scale(calc(.7 + (var(--c) * .3)));
}
.bx-ico .icon{ width:23px; height:23px; }
.bx-head h3{
  font-size:18.5px; font-weight:800; letter-spacing:-.01em;
  line-height:1.22; color:#FFF;
}
.bx-body > p{ margin:0; font-size:14px; line-height:1.62; color:var(--bp-body); }

@media (max-width:1040px){
  .boxes{ grid-template-columns:repeat(2, 1fr); gap:18px; }
}
@media (max-width:640px){
  .boxes{ grid-template-columns:1fr; gap:16px; }
  .bx{ aspect-ratio:auto; }
  .bx-body{ padding:22px; }
  .bx-head{ height:52px; gap:14px; margin-bottom:18px; }
}
/* Nothing to animate if the visitor would rather it didn't. */
@media (prefers-reduced-motion: reduce){
  .bx{ --p:1 !important; --c:1 !important; }
  .bx::before{ opacity:0; }
}

/* A plot number, the way a site drawing labels each one. */
.bx-no{
  position:absolute; bottom:24px; right:26px;
  font-size:11.5px; font-weight:800; letter-spacing:.12em; color:var(--orange);
}
.bx-body{ position:relative; }

/* The box is square, so as it grows the contents have to grow with it or the
   middle turns into a hole. Sized against the box itself, not the viewport,
   so it holds at every column count. Plain px above are the fallback. */
.bx{ container-type:inline-size; }
.bx-body{ padding:clamp(24px, 7.2cqw, 40px); }
.bx-no{
  bottom:clamp(20px, 6cqw, 34px); right:clamp(24px, 7.2cqw, 40px);
  font-size:clamp(11px, 3.1cqw, 14.5px);
}
.bx-head{
  height:clamp(52px, 19cqw, 96px);
  gap:clamp(14px, 4.2cqw, 24px);
  margin-bottom:clamp(18px, 5.2cqw, 30px);
}
.bx-ico{ width:auto; border-radius:clamp(11px, 3.6cqw, 20px); }
.bx-ico .icon{ width:clamp(21px, 6.4cqw, 33px); height:clamp(21px, 6.4cqw, 33px); }
.bx-head h3{ font-size:clamp(17.5px, 6.2cqw, 29px); }
.bx-body > p{ font-size:clamp(13.5px, 4.8cqw, 20px); }

/* ---- Pricing section: centred header on clean ground, plan below ---- */
#pricing{ position:relative; overflow:hidden; }
#pricing > .wrap{ position:relative; z-index:1; }
.pricing-head{ text-align:center; max-width:820px; margin:0 auto 6px; }
.pricing-head .lede{ margin:0 auto; max-width:660px; }

.pricing-lower{ position:relative; padding-top:48px; }
.pricing-lower > .wrap{ position:relative; z-index:1; }
.pricing-bg{
  /* Overhangs top and bottom by more than the parallax travel, so drifting it
     never uncovers an edge. #pricing clips the overhang. */
  position:absolute; top:-72px; bottom:-72px; left:0; right:0;
  z-index:0; pointer-events:none; width:100%; height:auto;
  will-change:transform;
  /* Scaled, not stretched: the drawing keeps its proportions and fills the space. */
  object-fit:cover; object-position:center top;
  opacity:.34;
}
/* Melts the top of the plan into the clear ground under the subtext. */
.pricing-lower::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.55) 16%, rgba(255,255,255,.3) 46%, rgba(255,255,255,.72) 100%);
}
@media (max-width:900px){
  .pricing-lower{ padding-top:30px; }
  .pricing-bg{ opacity:.22; }
  .pricing-lower::before{ background:rgba(255,255,255,.72); }
}

/* The pricing page leads with this section, so its heading is the page h1. */
.pricing-head h1{ font-size:40px; margin:0 0 14px; line-height:1.14; }
.pricing-page{ padding-top:calc(var(--nav-h) + 72px); }
@media (max-width:860px){
  .pricing-head h1{ font-size:30px; }
  .pricing-page{ padding-top:calc(var(--nav-h) + 40px); }
}

/* ---- Pricing tiers: three columns, one plan ---- */
.tiers{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  max-width:1120px; margin:0 auto; align-items:start;
}
/* Narrower than the single card was, in line with a normal pricing table. */
.tiers .price-card{ margin-top:22px; max-width:none; }
.tiers .price-top{ padding:30px 26px 26px; }
.tiers .price-name{ font-size:16px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--slate); margin:0 0 14px; }
.tiers .price-tag{ font-size:13.5px; margin:0 0 20px; min-height:2.9em; }
.tiers .price-fig{ margin-bottom:12px; }
.tiers .price-fig .amt{ font-size:52px; }
.tiers .price-fig .per{ font-size:13.5px; margin-top:9px; }
.tiers .price-note{ font-size:11.5px; margin-bottom:20px; }
.tiers .price-list{ padding:22px 26px 26px; gap:12px; }
.tiers .check-row{ font-size:13px; line-height:1.5; }
.tiers .btn-lg{ font-size:14.5px; padding:13px 18px; }

/* The two flanking cards are the same plan, so they sit back a step. */
.tiers .tier:not(.tier-main){
  background:#fff; border-color:var(--border);
  box-shadow:var(--shadow-sm);
}
.tiers .tier:not(.tier-main) .price-name{ color:var(--slate); }
.tiers .tier:not(.tier-main) .price-fig .amt{ color:var(--navy); }
.tiers .tier:not(.tier-main) .price-fig .per{ color:var(--slate); }
.tiers .tier:not(.tier-main) .price-tag{ color:var(--slate); }
.tiers .tier:not(.tier-main) .price-note{ color:var(--slate); }
.tiers .tier:not(.tier-main) .price-top{ border-bottom-color:var(--border-soft); }
.tiers .tier:not(.tier-main) .check-row{ color:var(--ink); }
.tiers .tier:not(.tier-main) .check-row .tick{ background:var(--blue-12); color:#1c7691; }
.tiers .tier-main .price-name{ color:rgba(255,255,255,.7); }

.tier-punchline{
  max-width:720px; margin:34px auto 0; text-align:center;
  font-size:15px; line-height:1.65; color:var(--slate);
}
.tier-punchline strong{ color:var(--navy); font-weight:800; }

/* The launch card lines up under the table at the same overall width. */
.pricing-lower .pricing{ max-width:1120px; margin:40px auto 0; }

/* Narrow screens: the three cards become one swipeable row that opens on the
   Founding card, with its neighbours peeking in on both sides. Stacked, you had
   to scroll past all three to notice they were the same, which kills the joke. */
@media (max-width:1000px){
  .tiers{
    display:flex; grid-template-columns:none; max-width:none; gap:14px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-behavior:auto;
    padding:0 calc((100vw - min(330px, 80vw)) / 2) 4px;
    margin-inline:calc(var(--wrap-pad, 20px) * -1);
    scrollbar-width:none;
  }
  .tiers::-webkit-scrollbar{ display:none; }
  .tiers .tier{
    flex:0 0 min(330px, 80vw); scroll-snap-align:center; margin-top:22px;
  }
  .tiers .price-tag{ min-height:0; }
  .pricing-lower .pricing{ max-width:560px; }
}

/* Three columns plus the promo card have to fit the narrowest desktop window
   the menu is shown at, so those columns run tighter. */
.mm-wide3 .mm-col{ min-width:0; width:228px; }
.mm-wide3 .mm-item{ gap:10px; padding:8px 10px; }
.mm-wide3 .mm-ico{ width:30px; height:30px; border-radius:8px; }
.mm-wide3 .mm-ico .icon{ width:15px; height:15px; }
.mm-wide3 .mm-t{ font-size:13px; }
.mm-wide3 .mm-promo{ width:268px; }

/* Swipe indicator for the tier row. Hidden where the grid shows all three. */
.tier-dots{ display:none; }
@media (max-width:1000px){
  .tier-dots{
    display:flex; justify-content:center; align-items:center; gap:9px; margin-top:20px;
  }
  .tier-dot{
    width:9px; height:9px; padding:0; border:0; border-radius:99px; cursor:pointer;
    background:var(--concrete); transition:width .24s cubic-bezier(.22,.61,.36,1), background .2s ease;
  }
  .tier-dot.is-on{ width:26px; background:var(--blue); }
  .tier-dot:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
}
@media (prefers-reduced-motion: reduce){
  .tier-dot{ transition:none; }
}

/* ============================================================
   Hero trade word — slot roll
   ============================================================ */
.hero h1 .rot{
  position:relative; display:inline-block; white-space:nowrap;
  vertical-align:top; text-align:left;
  /* A hard-edged mask instead of overflow:hidden, which would clip the travel
     but cost the line box. The window has to be taller than the line box: the
     h1's 1.08 line-height is tighter than Manrope's ascender-to-descender
     range, so a window at the line box shaves the tail off "roofing" and
     "glazing". Growing the mask past 100% does not help, because mask-clip
     already cuts the element at its border box. So the border box itself is
     padded, and an equal negative margin gives the padding back to the line,
     leaving the text exactly where it sat. */
  padding-block:.34em;  margin-block:-.34em;
  -webkit-mask-image:linear-gradient(#000, #000);
          mask-image:linear-gradient(#000, #000);
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;    mask-size:100% 100%;
  -webkit-mask-position:center;   mask-position:center;
  /* The slot takes each word's own width, set in script. It is not eased:
     the window has to be wide enough for the arriving word before the roll
     starts, or a longer word is clipped on its way in. Nothing follows the
     word on its line, so the width change is not visible as motion. */
}
.hero h1 .h1-line{ display:block; }
/* Narrow enough and the first line wraps inside itself, which moves the line
   under it by a whole line whenever a long trade comes round. Giving the word
   its own line keeps every line one line, so nothing reflows. */
@media (max-width:560px){
  .hero h1 .rot{ display:block; }
}
.rot-ghost{
  position:absolute; left:0; top:0; visibility:hidden; pointer-events:none;
  white-space:pre;
}
.rot-layer{ display:inline-block; white-space:pre; will-change:transform; }
/* Absolute offsets resolve against the padding box, so the leaving layer gives
   back the .34em of padding to sit on the same baseline as the one arriving
   behind it. */
.rot-layer.is-out{ position:absolute; left:0; top:.34em; }

.rot-layer.is-in{ animation:rotRollIn .34s cubic-bezier(.62,.04,.2,1) both; }
.rot-layer.is-out{ animation:rotRollOut .34s cubic-bezier(.62,.04,.2,1) both; }

/* Travel has to exceed the mask band, or the word is still showing when it
   stops. The window is the line box plus .34em top and bottom, so 1.9em clears
   it with room to spare. */
@keyframes rotRollIn{
  from{ transform:translate3d(0,1.9em,0); }
  to  { transform:translate3d(0,0,0); }
}
@keyframes rotRollOut{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(0,-1.9em,0); }
}

@media (prefers-reduced-motion: reduce){
  .rot-layer.is-in, .rot-layer.is-out{ animation:none; }
}

/* ---- Pricing tiers: three columns, one plan ---- */
.tiers{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  max-width:1120px; margin:0 auto; align-items:start;
}
/* Narrower than the single card was, in line with a normal pricing table. */
.tiers .price-card{ margin-top:22px; max-width:none; }
.tiers .price-top{ padding:30px 26px 26px; }
.tiers .price-name{ font-size:16px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--slate); margin:0 0 14px; }
.tiers .price-tag{ font-size:13.5px; margin:0 0 20px; min-height:2.9em; }
.tiers .price-fig{ margin-bottom:12px; }
.tiers .price-fig .amt{ font-size:52px; }
.tiers .price-fig .per{ font-size:13.5px; margin-top:9px; }
.tiers .price-note{ font-size:11.5px; margin-bottom:20px; }
.tiers .price-list{ padding:22px 26px 26px; gap:12px; }
.tiers .check-row{ font-size:13px; line-height:1.5; }
.tiers .btn-lg{ font-size:14.5px; padding:13px 18px; }

/* The two flanking cards are the same plan, so they sit back a step. */
.tiers .tier:not(.tier-main){
  background:#fff; border-color:var(--border);
  box-shadow:var(--shadow-sm);
}
.tiers .tier:not(.tier-main) .price-name{ color:var(--slate); }
.tiers .tier:not(.tier-main) .price-fig .amt{ color:var(--navy); }
.tiers .tier:not(.tier-main) .price-fig .per{ color:var(--slate); }
.tiers .tier:not(.tier-main) .price-tag{ color:var(--slate); }
.tiers .tier:not(.tier-main) .price-note{ color:var(--slate); }
.tiers .tier:not(.tier-main) .price-top{ border-bottom-color:var(--border-soft); }
.tiers .tier:not(.tier-main) .check-row{ color:var(--ink); }
.tiers .tier:not(.tier-main) .check-row .tick{ background:var(--blue-12); color:#1c7691; }
.tiers .tier-main .price-name{ color:rgba(255,255,255,.7); }

.tier-punchline{
  max-width:720px; margin:34px auto 0; text-align:center;
  font-size:15px; line-height:1.65; color:var(--slate);
}
.tier-punchline strong{ color:var(--navy); font-weight:800; }

/* The launch card lines up under the table at the same overall width. */
.pricing-lower .pricing{ max-width:1120px; margin:40px auto 0; }

/* Narrow screens: the three cards become one swipeable row that opens on the
   Founding card, with its neighbours peeking in on both sides. Stacked, you had
   to scroll past all three to notice they were the same, which kills the joke. */
@media (max-width:1000px){
  .tiers{
    display:flex; grid-template-columns:none; max-width:none; gap:14px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-behavior:auto;
    padding:0 calc((100vw - min(330px, 80vw)) / 2) 4px;
    margin-inline:calc(var(--wrap-pad, 20px) * -1);
    scrollbar-width:none;
  }
  .tiers::-webkit-scrollbar{ display:none; }
  .tiers .tier{
    flex:0 0 min(330px, 80vw); scroll-snap-align:center; margin-top:22px;
  }
  .tiers .price-tag{ min-height:0; }
  .pricing-lower .pricing{ max-width:560px; }
}

/* Three columns plus the promo card have to fit the narrowest desktop window
   the menu is shown at, so those columns run tighter. */
.mm-wide3 .mm-col{ min-width:0; width:228px; }
.mm-wide3 .mm-item{ gap:10px; padding:8px 10px; }
.mm-wide3 .mm-ico{ width:30px; height:30px; border-radius:8px; }
.mm-wide3 .mm-ico .icon{ width:15px; height:15px; }
.mm-wide3 .mm-t{ font-size:13px; }
.mm-wide3 .mm-promo{ width:268px; }

/* Swipe indicator for the tier row. Hidden where the grid shows all three. */
.tier-dots{ display:none; }
@media (max-width:1000px){
  .tier-dots{
    display:flex; justify-content:center; align-items:center; gap:9px; margin-top:20px;
  }
  .tier-dot{
    width:9px; height:9px; padding:0; border:0; border-radius:99px; cursor:pointer;
    background:var(--concrete); transition:width .24s cubic-bezier(.22,.61,.36,1), background .2s ease;
  }
  .tier-dot.is-on{ width:26px; background:var(--blue); }
  .tier-dot:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
}
@media (prefers-reduced-motion: reduce){
  .tier-dot{ transition:none; }
}


/* ============================================================
   Timelapse — the site builds itself as the page scrolls

   The section is a tall scroll track with a sticky stage inside it. The page
   never stops scrolling and nothing is intercepted: the stage simply stays
   put while the track runs past it, and the video's time is set from how far
   through the track the page is. Scroll back up and the building comes apart
   again, which a played video could not do.
   ============================================================ */
.tl{
  position:relative;
  /* The stage holds for this much scrolling. Capped against the viewport so a
     phone is not held for two screens of thumb travel. */
  --tl-run:min(1320px, 155vh);
  height:calc(100vh + var(--tl-run));
  padding:0;
}
.tl-stage{
  /* Pinned below the nav, not under it, so the header has clear air. */
  position:sticky; top:var(--nav-h); height:calc(100vh - var(--nav-h));
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
/* Edge to edge: the drawing is the section's background, not a picture
   sitting on it. It escapes the page wrap entirely and runs the full width
   of the viewport. Its own ground is the same off-white as the section, so
   with no card, no border and no shadow there is nothing to mark where the
   video stops and the page starts. */
.tl-inner{ width:100%; max-width:none; margin:0; padding:0; }
.tl-media{ width:100%; margin:0; border-radius:0; overflow:visible; background:none; box-shadow:none; }
.tl-vid, .tl-still{
  display:block; width:100%; height:auto; pointer-events:none;
}
.tl-vid::-webkit-media-controls{ display:none !important; }
/* The frames fade to white at their edges already; this takes the last of the
   seam out where the video meets the section on very wide screens. */
.tl-media{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%);
}
/* The header rides over the top of the drawing rather than above it, because
   the sky is empty in every frame and putting it in flow would cost the video
   the height it needs to run edge to edge. */
.tl-head{
  position:absolute; left:0; right:0; top:clamp(26px, 7vh, 74px); z-index:2;
  padding:0 24px; text-align:center; pointer-events:none;
}
.tl-head h2{ margin:0 0 10px; }
.tl-head .lede{ margin:0; font-size:17px; line-height:1.6; color:var(--slate); }

/* The drawing is 16:9, so on a phone it is only a few hundred pixels tall and
   a full-height stage strands it in the middle of an empty screen. The stage
   is shortened to suit, and the header goes back into flow above it, where
   there is no sky left to sit on. The scrub length is measured from the
   stage, so the hold shortens with it. */
@media (max-width:820px){
  .tl-stage{ height:66vh; flex-direction:column; justify-content:center; gap:22px; }
  .tl-head{ position:static; padding:0 20px; }
  .tl-head h2{ margin-bottom:8px; }
  .tl-head .lede{ font-size:15px; }
}
.tl-still{ display:none; }
/* Pinning a section in order to scrub it is motion. Without it the section is
   the finished building as a still, at its own height, and the page scrolls
   straight past. The video is not fetched at all in that case. */
@media (prefers-reduced-motion: reduce){
  .tl{ height:auto; padding:72px 0; }
  .tl-stage{
    position:static; height:auto; overflow:visible;
    flex-direction:column; gap:26px;
  }
  /* Nothing is pinned, so there is no sky to float the header over. */
  .tl-head{ position:static; padding:0 20px; }
  .tl-vid{ display:none; }
  .tl-still{ display:block; }
}


/* ============================================================
   Interior hero art — the trade's own job site behind the headline

   Same idea as the home page hero: one oversized drawing, centred on the
   page rather than on the text column, dropped back with opacity and faded
   with a mask so the type stays the loudest thing on the page. The home
   page's art carries its weight at the top and fades downward; these
   drawings carry theirs along the bottom edge, so this one is anchored to
   the foot of the hero and fades upward instead. Their left third is sky
   and treeline, which is where the copy sits.
   ============================================================ */
.page-hero.has-art{
  position:relative; overflow:hidden;
  padding-bottom:96px;
  min-height:clamp(400px, 34vw, 520px);
  box-sizing:border-box;
}
.page-hero.has-art .wrap{ position:relative; z-index:1; }
.page-hero-art{
  position:absolute; left:50%; bottom:-16px; transform:translateX(-50%);
  width:1700px; max-width:none; opacity:.46; pointer-events:none; z-index:0;
  /* Two masks intersected: the first fades the sky out at the top, the second
     clears the left of the drawing, which is where the headline and lede sit.
     The home page needs only the first, because its art is empty on the left;
     these five are drawn edge to edge, and the copy has to win. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.30) 32%, #000 76%),
    linear-gradient(to right, transparent 6%, rgba(0,0,0,.22) 27%, #000 54%);
          mask-image:
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.30) 32%, #000 76%),
    linear-gradient(to right, transparent 6%, rgba(0,0,0,.22) 27%, #000 54%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
@media (max-width:820px){
  .page-hero.has-art{ padding-bottom:74px; min-height:0; }
  .page-hero-art{ width:1180px; bottom:-10px; opacity:.4; }
}

/* ============================================================
   SitewideOps generator additions (landing/build.mjs). Everything above
   is the design handoff's stylesheet as shipped; what the generated
   pages need beyond it lives here, on the same tokens.
   ============================================================ */
.prose a.btn, .legal a.btn{ border-bottom:0; }
.prose a.btn-primary{ color:#fff; }
.prose img{ border-radius:var(--radius-lg); }
.field label span{ font-weight:600; color:var(--slate); }
.form-status{ margin-top:12px; font-size:13.5px; line-height:1.5; font-weight:700; min-height:1.5em; }
.form-status.ok{ color:var(--green); }
.form-status.err{ color:var(--red); }
.calc-row.under .v{ color:var(--green); }
.calc-row .v.muted{ color:var(--slate); font-size:15px; }
.calc-note.alert{ font-style:normal; color:var(--orange); }
.calc noscript p{ padding:0 30px 30px; font-size:14px; color:var(--slate); }
.access-head{ font-size:36px; margin-bottom:16px; }
.access-lede{ font-size:16px; line-height:1.65; color:var(--slate); }
.sec-white{ background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.sec-white + .sec-white{ border-top:0; }
.sec-callout + .sec-callout{ padding-top:0; }
.page-hero ~ .sec-callout + .sec-callout{ padding-top:0; }
.page-hero ~ .sec-tight .explore-head{ margin-bottom:22px; }
.page-hero ~ .sec-tight .explore-head h2{ font-size:24px; }
.foot-col .foot-col-then{ margin-top:26px; }
.nav .logo img{ height:28px; width:auto; display:block; }
.foot-bottom .logo img{ height:24px; width:auto; display:block; }
.ctable .no{ color:var(--concrete); }
html:not(.js) .faq-a{ display:block; }
.cta-band .cta-inner .btns{ justify-content:center; }
.cta-band .cta-note{ font-size:14px; margin:24px 0 0; max-width:none; }
.shot img{ border:1px solid var(--border); border-radius:var(--radius-lg); }
.shot figcaption{ font-size:13px; color:var(--slate); padding:10px 2px 0; }
/* Narrow phones: the logo, the demo button and the burger did not fit 320px. */
@media (max-width:380px){
  .nav-inner{ gap:12px; padding:0 16px; }
  .nav .logo img{ height:24px; }
  .nav-right{ gap:6px; }
  .nav-right .btn-sm{ padding:0 12px; font-size:13px; }
}
@media (max-width:350px){ .nav-right .btn-sm{ display:none; } }
/* The demo form's two-column field grid cannot shrink below its inputs; one
   column on narrow phones, and grid items may shrink below their content. */
.access > *{ min-width:0; }
@media (max-width:480px){ .fields{ grid-template-columns:1fr; } .form-card{ padding:22px; } }
.faq-head{ margin-bottom:36px; }
img.avatar-lg{ object-fit:cover; padding:0; }