:root{
  --ink:#0B1220;
  --navy:#002550;
  --yale:#003B82;
  --azure:#0073FE;
  --signal:#C9F73E;
  --bone:#EAEEF3;
  --paper:#F7F5EF;
  --lightgray:#E9EAEB;
  --charcoal:#54585C;
  --white:#F8FAFC;

  --display:"Space Grotesk","Inter",-apple-system,Helvetica,Arial,sans-serif;
  --heavy:"Archivo Black","Space Grotesk",Arial,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;

  --line:rgba(11,18,32,.12);
  --line-d:rgba(255,255,255,.14);
}
*{ box-sizing:border-box; margin:0; min-width:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; scroll-padding-top:72px; }
body{
  font-family:var(--sans); background:var(--paper); color:var(--ink);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:var(--signal); color:var(--ink); }
a{ color:inherit; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 40px; }

/* ---------- Type: light display, bold key nouns ---------- */
h1,h2,h3{ font-family:var(--display); font-weight:300; letter-spacing:-.02em; line-height:1.1; }
h1{ font-size:clamp(34px,4.9vw,64px); }
h2{ font-size:clamp(28px,3.7vw,48px); }
h3{ font-size:20px; font-weight:500; letter-spacing:-.01em; line-height:1.35; }
strong,b{ font-weight:700; }
.lead{ font-size:18px; color:var(--charcoal); max-width:640px; margin-top:24px; line-height:1.7; }
.dark .lead{ color:rgba(255,255,255,.66); }

.eyebrow{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.18em; color:var(--charcoal); margin-bottom:28px; }
.eyebrow .num{ color:var(--ink); font-weight:500; }
.eyebrow .sl{ color:var(--azure); }
.dark .eyebrow{ color:rgba(255,255,255,.5); }
.dark .eyebrow .num,.dark .eyebrow .sl{ color:var(--signal); }

.cap{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--charcoal); margin-top:14px; }
.dark .cap{ color:rgba(255,255,255,.42); }

section{ padding:112px 0; }
.dark{ background:var(--ink); color:#fff; }
.bone{ background:var(--bone); }

.rv{ opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1); }
.rv.on{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } *{ animation:none !important; } }

/* ================= SAGUR LOGO =================
   Drawn as SVG, not CSS. textLength on both lines pins "YOUR LEASING AGENT" to the
   exact width of "SAGUR" above it, which is what makes the lockup read as a logo.
   currentColor lets the ink parts flip to white on dark backgrounds; the lime chip
   and the dark "s" inside it never change. */
.brand{ display:inline-flex; align-items:center; text-decoration:none; color:var(--ink); }
.logo{ height:38px; width:auto; display:block; overflow:visible; }
nav .brand,footer .brand,.dark .brand{ color:#fff; }
nav .logo{ height:34px; }
footer .logo{ height:40px; }
.brand:hover .logo rect{ fill:#D8FF55; }
.logo rect{ transition:fill .18s ease; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.01em; text-decoration:none; padding:15px 26px; border:1px solid transparent; transition:background .18s ease, color .18s ease, border-color .18s ease; }
.btn .ar{ transition:transform .18s ease; }
.btn:hover .ar{ transform:translateX(4px); }
.btn-signal{ background:var(--signal); color:var(--ink) !important; }
.btn-signal:hover{ background:#D8FF55; }
.btn-line{ background:transparent; color:#fff !important; border-color:rgba(255,255,255,.28); }
.btn-line:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.btn-ghost{ background:transparent; color:var(--ink) !important; border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }

/* ---------- Nav ---------- */
nav{ position:sticky; top:0; z-index:60; background:rgba(11,18,32,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-d); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:78px; gap:24px; }
.nav-r{ display:flex; align-items:center; gap:30px; }
.nav-r a:not(.btn){ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em; text-decoration:none; color:rgba(255,255,255,.62); }
.nav-r a:not(.btn):hover{ color:var(--signal); }
.nav-r a.here{ color:var(--signal); }
.nav-r .btn{ padding:11px 20px; font-size:13px; white-space:nowrap; }

/* The nav CTA must never wrap. On a 390px screen it is the only control, so it
   shrinks with the bar instead of growing into a two-line block. */
@media (max-width:900px){
  .nav-in{ height:66px; gap:14px; }
  nav .logo{ height:30px; }
  .nav-r{ gap:18px; }
  .nav-r .btn{ padding:10px 16px; font-size:12.5px; }
}
@media (max-width:680px){
  .nav-in{ height:60px; gap:10px; }
  nav .logo{ height:26px; }
  .nav-r .btn{ padding:9px 14px; font-size:12px; gap:7px; }
  .nav-r .btn .ar{ display:none; }   /* the arrow is decoration; the label is the affordance */
}
@media (max-width:380px){
  nav .logo{ height:23px; }
  .nav-r .btn{ padding:8px 12px; font-size:11.5px; }
}

/* ---------- Hero ---------- */
.hero{ background:var(--ink); color:#fff; position:relative; overflow:hidden; padding:132px 0 84px; }
/* The old radial gradients muddied the middle of the screen; the swarm is the
   hero's texture now, on a flat ink ground. */
.hero-swarm{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.swarm-hint{ margin-top:22px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.35); }
.swarm-hint b{ color:var(--signal); font-weight:500; }

/* The thread is a cursor toy. On a phone there is no cursor, so the prompt and
   the stage it pointed at are both gone; the drifting field stays as texture. */
@media (max-width:900px){ .swarm-hint{ display:none; } }
.hero-in{ position:relative; z-index:2; }
.hero h1{ max-width:960px; }
.hero h1 .sig{ color:var(--signal); font-weight:700; }
.hero .sub{ font-size:19px; color:rgba(255,255,255,.68); max-width:620px; margin-top:28px; line-height:1.7; }
.hero .cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:40px; }
.hero-foot{ margin-top:88px; border-top:1px solid var(--line-d); }

/* Typewriter headline + blinking block caret */
.typer{ position:relative; display:block; }
.typer .ghost{ visibility:hidden; }
.typer .live{ position:absolute; inset:0; }
.caret{
  display:inline-block; width:.46em; height:.74em;
  background:var(--azure); margin-left:.06em;
  transform:translateY(.06em);
  animation:caret 1.05s step-end infinite;
}
.caret.done{ background:var(--signal); }
@keyframes caret{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .caret{ animation:none; } }

.metrics-cap{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.35); padding:22px 0 0; }
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); }
.metric{ padding:32px 32px 32px 0; border-right:1px solid var(--line-d); }
.metric:last-child{ border-right:none; }
.metric b{ display:block; font-family:var(--display); font-weight:300; font-size:clamp(30px,3vw,42px); letter-spacing:-.02em; line-height:1; }
.metric span{ display:block; margin-top:10px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.5); }
.tagstrip{ background:var(--signal); color:var(--ink); }
.tagstrip div{ font-family:var(--mono); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.3em; padding:14px 0; }

/* ---------- Position ---------- */
.position h2{ max-width:1000px; }
.position h2 em{ font-style:normal; font-weight:700; border-bottom:2px solid var(--signal); }
.alt{ margin-top:44px; padding-top:28px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.16em; }
.alt span{ color:var(--azure); }
.dark .alt{ border-color:var(--line-d); }
.dark .alt span{ color:var(--signal); }

/* With the dashboard gone there is nothing riding the rule, so the head is just a head. */
.see-head-solo{ border-bottom:none; }
.see-head-solo .see-title{ padding-bottom:0; }

/* ---------- Section 02 head: the tabs ride the same rule as the headline ---------- */
.see-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:56px;
  border-bottom:1px solid var(--line-d);
  scroll-margin-top:92px;
}
.see-title{ padding-bottom:26px; }
.see-title .eyebrow{ margin-bottom:20px; }
.tabs{ display:flex; gap:0; flex:none; }
.tab{
  font-family:var(--display); font-size:17px; font-weight:500; letter-spacing:-.01em;
  background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px;
  color:rgba(255,255,255,.45); padding:16px 0 22px; margin-left:34px; cursor:pointer;
  transition:color .16s ease, border-color .16s ease; white-space:nowrap;
}
.tab:hover{ color:#fff; }
.tab.on{ color:var(--signal); border-bottom-color:var(--signal); }
.panel{ display:none; padding-top:52px; }
.panel.on{ display:block; animation:panelin .35s ease; }
@keyframes panelin{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---------- Scenario chips ---------- */
.scen{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; justify-content:center; }
.scen-b{
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;
  padding:9px 13px; cursor:pointer; transition:all .16s ease;
  background:transparent; color:rgba(255,255,255,.55); border:1px solid var(--line-d);
}
.scen-b:hover{ color:#fff; border-color:rgba(255,255,255,.4); }
.scen-b.on{ background:var(--signal); color:var(--ink); border-color:var(--signal); font-weight:500; }

/* ---------- Contact ---------- */
.contact{ display:grid; grid-template-columns:1.25fr .75fr; gap:88px; align-items:start; }
.field{ margin-bottom:30px; }
.field label{ display:block; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--charcoal); margin-bottom:10px; }
.field input,.field select,.field textarea{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--ink);
  background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:10px 0; outline:none; transition:border-color .16s;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus,.field select:focus,.field textarea:focus{ border-bottom-color:var(--azure); }
.field input::placeholder,.field textarea::placeholder{ color:#A8A8A5; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.send{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:8px; }
.send .btn{ background:var(--azure); color:#fff !important; }
.send .btn:hover{ background:#0060D8; }
.send em{ font-style:italic; font-size:14.5px; color:var(--charcoal); }
.chan .k{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--charcoal); margin-bottom:10px; }
.chan .v{ font-family:var(--display); font-weight:500; font-size:21px; letter-spacing:-.01em; margin-bottom:30px; }
.chan .v a{ text-decoration:none; color:var(--navy); }
.chan .v a:hover{ color:var(--azure); }
.chan .book{ display:block; background:var(--ink); color:#fff; padding:24px 26px; text-decoration:none; margin-bottom:30px; transition:background .18s; }
.chan .book:hover{ background:var(--navy); }
.chan .book .k{ color:rgba(255,255,255,.5); margin-bottom:8px; }
.chan .book b{ display:block; font-family:var(--display); font-weight:500; font-size:20px; letter-spacing:-.01em; color:var(--signal); }
.chan .book span{ display:block; font-size:14px; color:rgba(255,255,255,.6); margin-top:8px; }
.chan .hr{ height:1px; background:var(--line); margin:34px 0; }
.chan .ids{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; }
.chan .ids .a{ color:var(--charcoal); text-transform:uppercase; }
.chan .ids .b{ color:var(--ink); }

/* ---------- Product console frame ---------- */
.console{ border:1px solid var(--line); background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.console-bar{ display:flex; align-items:center; gap:14px; padding:12px 16px; background:#1C1C1E; }
.console-bar .dots{ display:flex; gap:6px; }
.console-bar .dots i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22); }
.console-bar .url{
  flex:1; font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.07); padding:6px 12px; text-align:center;
}
.console-body{ background:#FBF9F0; padding:32px; }

.app-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:20px; border-bottom:3px solid #111; }
.app-id{ display:flex; align-items:center; gap:14px; }
.app-id .sq{ width:44px; height:44px; background:var(--signal); border:3px solid #111; display:flex; align-items:center; justify-content:center; font-family:var(--heavy); font-size:20px; color:#111; }
.app-id b{ display:block; font-family:var(--heavy); font-size:20px; text-transform:uppercase; color:#111; }
.app-id span{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:#666; }
.app-live{ display:flex; align-items:center; gap:8px; border:2px solid #111; background:#fff; padding:8px 14px; font-family:var(--heavy); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#111; }
.app-live i{ width:8px; height:8px; border-radius:50%; background:#3FBF5F; animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.app-kick{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:#777; margin:32px 0 12px; }
.app-h{ font-family:var(--heavy); font-size:24px; text-transform:uppercase; color:#111; margin-bottom:18px; }

.today{ background:var(--signal); border:3px solid #111; box-shadow:7px 7px 0 #111; padding:26px 28px; margin-top:10px; }
.today ul{ list-style:none; padding:0; }
.today li{ display:flex; gap:12px; font-size:16px; color:#111; padding:5px 0; }
.today li::before{ content:"\2605"; }
.today .next{ margin-top:18px; padding-top:16px; border-top:2px solid #111; font-size:15px; font-weight:700; color:#111; }

.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tile{ background:#fff; border:3px solid #111; box-shadow:5px 5px 0 #111; padding:20px 18px; }
.tile b{ display:block; font-family:var(--heavy); font-size:32px; color:#111; line-height:1; }
.tile span{ display:block; margin-top:8px; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#666; }
.tile.lime{ background:var(--signal); }
.tile.gold{ background:#F7D060; }

.pills{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.pill{ font-size:13px; font-weight:600; padding:7px 15px; border-radius:999px; background:#F7D060; color:#111; border:none; cursor:pointer; transition:all .14s; }
.pill:hover{ transform:translateY(-1px); }
.pill.on{ background:#111; color:#fff; }

.search{ display:flex; margin-top:8px; }
.search input{ flex:1; font-family:var(--sans); font-size:15px; padding:13px 16px; border:3px solid #111; border-right:none; background:#fff; color:#111; outline:none; }
.search input::placeholder{ color:#999; }
.search button{ font-family:var(--sans); font-size:15px; font-weight:600; padding:13px 24px; border:3px solid #111; background:#EDEDED; color:#111; cursor:pointer; }

.leads{ border:3px solid #111; background:#fff; margin-top:18px; }
.leads-h{ display:grid; grid-template-columns:1.5fr 1fr 1fr 110px; gap:16px; padding:16px 20px; border-bottom:2px solid #E5E2D8; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:#777; }
.lead-r{ display:grid; grid-template-columns:1.5fr 1fr 1fr 110px; gap:16px; padding:16px 20px; border-bottom:1px solid #EDEAE0; align-items:center; }
.lead-r:last-child{ border-bottom:none; }
.lead-r:hover{ background:#FDFCF5; }
.lead-r .nm{ font-weight:700; font-size:15px; color:#111; }
.lead-r .nm em{ display:block; font-style:normal; font-family:var(--mono); font-size:10.5px; color:#888; margin-top:3px; letter-spacing:.04em; }
.lead-r .ago{ font-size:14px; color:#888; }
.tag{ display:inline-block; font-family:var(--heavy); font-size:10px; text-transform:uppercase; letter-spacing:.06em; padding:5px 11px; border-radius:999px; color:#fff; white-space:nowrap; }
.tag.new{ background:#9A9A9A; }
.tag.contacted{ background:#6B5A17; }
.tag.booked{ background:#2C6EA8; }
.tag.toured{ background:#111; }
.tag.applied{ background:#7A3FBF; }
.tag.leased{ background:#2E8B45; }
.tag.handoff{ background:#0073FE; }
.view{ font-family:var(--sans); font-size:13px; font-weight:700; padding:9px 14px; background:#111; color:#fff; border:2px solid #111; box-shadow:3px 3px 0 rgba(17,17,17,.35); cursor:pointer; white-space:nowrap; }
.view:hover{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(17,17,17,.35); }

.detail{ border:3px solid #111; background:#fff; margin-top:24px; display:grid; grid-template-columns:1.15fr .85fr; }
.detail-l{ border-right:3px solid #111; }
.detail-h{ padding:18px 22px; border-bottom:3px solid #111; background:#FBF9F0; }
.detail-h b{ display:block; font-family:var(--heavy); font-size:18px; text-transform:uppercase; color:#111; }
.detail-h span{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:#777; }
.detail-meta{ display:grid; grid-template-columns:1fr 1fr; border-bottom:3px solid #111; }
.detail-meta div{ padding:14px 22px; border-right:1px solid #EDEAE0; border-bottom:1px solid #EDEAE0; }
.detail-meta div:nth-child(2n){ border-right:none; }
.detail-meta .k{ font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.12em; color:#888; }
.detail-meta .v{ font-size:14.5px; font-weight:600; color:#111; margin-top:4px; }
.log{ padding:18px 22px; max-height:420px; overflow-y:auto; }
.log-row{ display:grid; grid-template-columns:96px 1fr; gap:14px; padding:11px 0; border-bottom:1px solid #F0EDE3; align-items:start; }
.log-row:last-child{ border-bottom:none; }
.log-row .ts{ font-family:var(--mono); font-size:10.5px; color:#999; padding-top:3px; }
.log-row .ev{ font-size:14px; color:#222; line-height:1.55; }
.log-row.ai .ev::before{ content:"AI"; display:inline-block; font-family:var(--mono); font-size:9px; letter-spacing:.1em; background:var(--signal); color:#111; padding:2px 6px; margin-right:8px; vertical-align:1px; }
.log-row.them .ev::before{ content:"LEAD"; display:inline-block; font-family:var(--mono); font-size:9px; letter-spacing:.1em; background:#E9E6DA; color:#555; padding:2px 6px; margin-right:8px; vertical-align:1px; }
.log-row.sys .ev::before{ content:"RULE"; display:inline-block; font-family:var(--mono); font-size:9px; letter-spacing:.1em; background:#0073FE; color:#fff; padding:2px 6px; margin-right:8px; vertical-align:1px; }
.log-row.hum .ev::before{ content:"LEIVI"; display:inline-block; font-family:var(--mono); font-size:9px; letter-spacing:.1em; background:#111; color:#fff; padding:2px 6px; margin-right:8px; vertical-align:1px; }

.detail-r{ padding:22px; background:#FBF9F0; }
.mini{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:#888; margin-bottom:12px; }
.mini-card{ background:#fff; border:2px solid #111; padding:16px 18px; margin-bottom:20px; }
.mini-card .row{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:6px 0; }
.mini-card .row span{ color:#888; }
.mini-card .row b{ color:#111; font-weight:600; }

.rulecard{ background:#fff; border:2px solid #111; padding:16px 18px; margin-bottom:12px; }
.rulecard .top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.rulecard .trg{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#0073FE; }
.rulecard .sw{ width:36px; height:20px; background:var(--signal); border:2px solid #111; position:relative; flex:none; }
.rulecard .sw::after{ content:""; position:absolute; top:1px; right:1px; width:14px; height:14px; background:#111; }
.rulecard .sw.off{ background:#E5E2D8; }
.rulecard .sw.off::after{ right:auto; left:1px; }
.rulecard p{ font-size:13.5px; color:#333; line-height:1.55; }
.rulecard p em{ font-style:normal; background:var(--signal); padding:0 3px; }
.prompt{ background:#0B1220; border:2px solid #111; padding:18px; }
.prompt .k{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.45); margin-bottom:12px; }
.prompt code{ display:block; font-family:var(--mono); font-size:12.5px; line-height:1.7; color:#D9F58A; white-space:pre-wrap; }
.prompt .cur{ display:inline-block; width:8px; height:14px; background:var(--signal); vertical-align:-2px; animation:caret 1.05s step-end infinite; }

/* ---------- The conversation: a real iPhone Messages thread ---------- */
.conv{
  display:grid; grid-template-columns:1fr .92fr; column-gap:88px;
  grid-template-areas:"intro chat" "facts chat";
  grid-template-rows:auto 1fr;   /* facts sit right under the intro, not floated to the bottom */
  align-items:start;
}
.conv-intro{ grid-area:intro; }
.conv-facts{ grid-area:facts; align-self:start; }
.conv-chat{ grid-area:chat; }

.facts{ margin-top:36px; border-top:1px solid var(--line-d); }
.fact{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line-d); font-size:15px; color:rgba(255,255,255,.78); }
.fact::before{ content:"→"; color:var(--signal); flex:none; }

/* The device */
.iphone{
  width:100%; max-width:392px; margin:0 auto;
  background:#1C1C1E; border-radius:54px; padding:11px;
  box-shadow:0 0 0 2px #3A3A3C, 0 34px 70px rgba(0,0,0,.55);
}
.screen{
  background:#fff; border-radius:44px; overflow:hidden;
  height:660px; display:flex; flex-direction:column; position:relative;
  font-family:-apple-system,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* Status bar + Dynamic Island */
.ios-status{
  flex:none; height:52px; padding:14px 30px 0;
  display:flex; align-items:center; justify-content:space-between;
  font-size:15px; font-weight:600; color:#000; letter-spacing:.01em; position:relative; z-index:3;
}
.island{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:112px; height:32px; background:#000; border-radius:20px; z-index:4;
}
.ios-status .right{ display:flex; align-items:center; gap:6px; }
.ios-status svg{ display:block; }

/* Conversation header */
.ios-head{
  flex:none; position:relative; z-index:2;
  background:rgba(249,249,249,.92); backdrop-filter:blur(20px);
  border-bottom:.5px solid #C6C6C8;
  padding:2px 12px 8px; text-align:center;
}
.ios-back{
  position:absolute; left:14px; top:12px;
  display:flex; align-items:center; gap:2px; color:#007AFF; font-size:17px;
}
.ios-back .badge{ background:#007AFF; color:#fff; font-size:12px; font-weight:600; border-radius:10px; padding:1px 6px; }
.ios-av{
  width:44px; height:44px; border-radius:50%; margin:0 auto 3px;
  background:linear-gradient(180deg,#C9F73E,#A9D92B); color:#0B1220;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:600; letter-spacing:.02em;
}
.ios-name{ font-size:11px; color:#000; display:inline-flex; align-items:center; gap:3px; }
.ios-name svg{ opacity:.35; }

/* Messages */
#feed{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:12px 16px 8px; background:#fff;
  scrollbar-width:none; overflow-anchor:none;
}
#feed::-webkit-scrollbar{ display:none; }

.msg{
  position:relative; max-width:74%; width:fit-content;
  padding:8px 14px 9px; margin-bottom:4px;
  font-size:16.5px; line-height:1.3; letter-spacing:-.01em;
  border-radius:19px; word-wrap:break-word;
  animation:pop .26s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes pop{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:none; } }

/* Outgoing: SMS green, right, with the tail */
.msg.us{ background:#34C759; color:#fff; margin-left:auto; border-bottom-right-radius:6px; }
.msg.us::before{
  content:""; position:absolute; z-index:0; bottom:0; right:-7px;
  width:20px; height:20px; background:#34C759; border-bottom-left-radius:16px;
}
.msg.us::after{
  content:""; position:absolute; z-index:1; bottom:0; right:-11px;
  width:12px; height:20px; background:#fff; border-bottom-left-radius:12px;
}
.msg.us u{ color:#fff; text-decoration:underline; text-underline-offset:2px; }

/* A human taking over reads as iMessage blue */
.msg.human{ background:#007AFF; color:#fff; margin-left:auto; border-bottom-right-radius:6px; }
.msg.human::before{
  content:""; position:absolute; z-index:0; bottom:0; right:-7px;
  width:20px; height:20px; background:#007AFF; border-bottom-left-radius:16px;
}
.msg.human::after{
  content:""; position:absolute; z-index:1; bottom:0; right:-11px;
  width:12px; height:20px; background:#fff; border-bottom-left-radius:12px;
}
.msg.human .who{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:3px;
}

/* Incoming: iOS grey, left, with the tail */
.msg.them{ background:#E9E9EB; color:#000; border-bottom-left-radius:6px; }
.msg.them::before{
  content:""; position:absolute; z-index:0; bottom:0; left:-7px;
  width:20px; height:20px; background:#E9E9EB; border-bottom-right-radius:16px;
}
.msg.them::after{
  content:""; position:absolute; z-index:1; bottom:0; left:-11px;
  width:12px; height:20px; background:#fff; border-bottom-right-radius:12px;
}

/* Date separator, exactly the iOS treatment */
.msg-t{
  text-align:center; font-size:11px; color:#8E8E93;
  margin:16px 0 8px; letter-spacing:-.01em;
}
.msg-t b{ color:#8E8E93; font-weight:600; }

/* Our milestone markers, kept quiet so they read as system lines */
.stampline{ display:flex; align-items:center; justify-content:center; gap:7px; margin:12px 0 10px; }
.stampline b{
  font-size:11px; font-weight:600; color:#8E8E93; letter-spacing:.02em;
}
.stampline .ln{ display:none; }
.stampline b::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#34C759; margin-right:6px; vertical-align:0;
}
.stampline.rule b::before{ background:#007AFF; }

.delivered{ text-align:right; font-size:11px; color:#8E8E93; margin:-1px 2px 6px; font-weight:500; }

/* Typing bubble */
.typing{
  display:inline-flex; gap:5px; align-items:center;
  padding:13px 15px; background:#E9E9EB; border-radius:19px;
  border-bottom-left-radius:6px; margin-bottom:4px;
}
.typing i{ width:8px; height:8px; border-radius:50%; background:#A3A3A8; animation:blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s; } .typing i:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,60%,100%{ opacity:.45; transform:scale(.85); } 30%{ opacity:1; transform:scale(1); } }

/* Input bar + home indicator */
.ios-input{
  flex:none; background:rgba(249,249,249,.92); backdrop-filter:blur(20px);
  border-top:.5px solid #C6C6C8; padding:8px 10px 2px;
  display:flex; align-items:center; gap:9px;
}
.ios-plus{
  width:32px; height:32px; border-radius:50%; background:#E9E9EB; color:#7C7C81;
  display:flex; align-items:center; justify-content:center; font-size:21px; flex:none; line-height:1;
}
.ios-field{
  flex:1; border:.5px solid #C6C6C8; border-radius:18px; height:34px;
  display:flex; align-items:center; justify-content:space-between; padding:0 6px 0 13px;
  color:#AEAEB2; font-size:16px;
}
.ios-mic{ width:24px; height:24px; border-radius:50%; background:#E9E9EB; display:flex; align-items:center; justify-content:center; }
.ios-home{ flex:none; height:24px; display:flex; align-items:center; justify-content:center; background:rgba(249,249,249,.92); }
.ios-home i{ width:140px; height:5px; border-radius:3px; background:#000; opacity:.85; }

/* Replay control lives outside the device */
.chat-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; }
.chat-foot span{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.45); }
.chat-foot button{
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--signal); background:none; border:1px solid rgba(201,247,62,.35);
  padding:7px 13px; cursor:pointer; transition:background .18s;
}
.chat-foot button:hover{ background:rgba(201,247,62,.12); }
.chat-foot button[disabled]{ opacity:.35; cursor:default; }

/* ---------- Guest card ---------- *//* ---------- Guest card ---------- */
.proof{ display:grid; grid-template-columns:1fr 1.05fr; gap:88px; align-items:center; }
.card{ background:#fff; border:1px solid var(--line); }
.card .head{ display:flex; align-items:center; gap:14px; padding:20px 22px; border-bottom:1px solid var(--line); }
.avatar{ width:40px; height:40px; background:var(--ink); color:var(--signal); font-family:var(--mono); font-size:13px; display:flex; align-items:center; justify-content:center; }
.card .head b{ display:block; font-size:16px; font-weight:600; }
.card .head span{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--charcoal); }
.strip{ display:flex; align-items:center; padding:26px 22px 20px; background:var(--bone); border-bottom:1px solid var(--line); }
.dot{ text-align:center; }
.dot i{ display:block; width:9px; height:9px; background:var(--ink); border-radius:50%; margin:0 auto 9px; }
.dot b{ font-family:var(--mono); font-size:9.5px; font-weight:500; text-transform:uppercase; letter-spacing:.1em; }
.bar{ flex:1; height:1px; background:var(--ink); margin:0 8px 18px; }
.trail{ padding:8px 22px 12px; }
.trail div{ display:flex; align-items:flex-start; gap:12px; padding:11px 0; font-size:14.5px; border-bottom:1px solid var(--line); }
.trail div:last-child{ border-bottom:none; }
.trail i{ width:7px; height:7px; background:var(--signal); border:1px solid var(--ink); margin-top:7px; flex:none; }
.trail span{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--charcoal); white-space:nowrap; }
.comm{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 22px; background:var(--ink); color:#fff; }
.comm span{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.6); }
.comm b{ font-family:var(--mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--signal); }

/* ---------- Numbered pods ---------- */
.pods{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); margin-top:60px; }
.pods-3{ grid-template-columns:repeat(3,1fr); }
.pod{ padding:34px 32px 40px 0; border-right:1px solid var(--line); }
.pod:last-child{ border-right:none; padding-right:0; }
.pod .n{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--azure); }
.pod h3{ margin:18px 0 12px; }
.pod p{ font-size:14.5px; color:var(--charcoal); line-height:1.65; overflow-wrap:break-word; }

/* ---------- Split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:88px; align-items:start; }
.tour ul{ list-style:none; padding:0; margin-top:34px; }
.tour li{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); font-size:15.5px; }
.tour li::before{ content:"→"; color:var(--azure); flex:none; }
.tour li em{ font-style:normal; color:var(--charcoal); }
.rules{ margin-top:34px; }
.rule-item{ padding:24px 0; border-top:1px solid var(--line); }
.rule-item:last-child{ border-bottom:1px solid var(--line); }
.rule-item b{ display:flex; align-items:center; gap:11px; font-size:16px; font-weight:600; margin-bottom:9px; }
.rule-item b::before{ content:""; width:8px; height:8px; background:var(--signal); flex:none; }
.rule-item p{ font-size:14.5px; color:var(--charcoal); line-height:1.65; }

/* ---------- Comparison ---------- */
.vs{ margin-top:56px; border:1px solid var(--line-d); }
.vs-head{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line-d); }
.vs-head div{ padding:18px 24px; font-family:var(--mono); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.16em; }
.vs-head div:first-child{ color:var(--signal); border-right:1px solid var(--line-d); }
.vs-head div:last-child{ color:rgba(255,255,255,.45); }
.vs-label{ padding:20px 24px 6px; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.38); border-top:1px solid var(--line-d); }
.vs-row{ display:grid; grid-template-columns:1fr 1fr; }
.vs-row div{ padding:2px 24px 22px; font-size:15px; }
.vs-row div:first-child{ border-right:1px solid var(--line-d); color:#fff; }
.vs-row div:last-child{ color:rgba(255,255,255,.5); }

.band{ display:grid; grid-template-columns:1fr 1fr; gap:88px; align-items:center; }

/* ---------- FAQ ---------- */
.faq-grid{ display:grid; grid-template-columns:.75fr 1.25fr; gap:88px; align-items:start; }
details{ border-bottom:1px solid var(--line); }
details:first-of-type{ border-top:1px solid var(--line); }
summary{ display:flex; justify-content:space-between; align-items:center; gap:24px; padding:22px 0; cursor:pointer; list-style:none; font-size:17px; font-weight:600; font-family:var(--display); letter-spacing:-.01em; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; font-family:var(--mono); font-weight:400; color:var(--azure); font-size:18px; }
details[open] summary::after{ content:"–"; }
details p{ padding:0 0 24px; font-size:15.5px; color:var(--charcoal); max-width:660px; line-height:1.7; }

/* ---------- Engage ---------- */
.engage{ background:var(--navy); color:#fff; position:relative; overflow:hidden; }
.engage-in{ position:relative; z-index:2; display:grid; grid-template-columns:1.2fr .8fr; gap:80px; align-items:center; }
.engage h2 .sig{ color:var(--signal); font-weight:700; }
.engage .cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:36px; }
.engage-side{ border-left:1px solid var(--line-d); padding-left:40px; }
.engage-side b{ display:block; font-family:var(--display); font-weight:300; font-size:42px; letter-spacing:-.02em; }
.engage-side span{ display:block; margin-top:12px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.5); }
.engage-side .rl{ margin:26px 0; height:1px; background:var(--line-d); }

/* ================= ABOUT PAGE ================= */
.about-hero{ background:var(--ink); color:#fff; position:relative; overflow:hidden; padding:120px 0 96px; }
.about-hero-in{ position:relative; z-index:2; }
.about-hero h1{ max-width:900px; }
.about-hero h1 .sig{ color:var(--signal); font-weight:700; }

/* The need: cost-of-vacancy ledger */
.need{ display:grid; grid-template-columns:1fr 1fr; gap:88px; align-items:start; }
.ledger{ border:1px solid var(--line); background:#fff; }
.ledger-head{ display:flex; justify-content:space-between; align-items:center; padding:16px 22px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--charcoal); }
.ledger-row{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:20px 22px; border-bottom:1px solid var(--line); }
.ledger-row div{ font-size:15px; }
.ledger-row div span{ display:block; font-size:13px; color:var(--charcoal); margin-top:3px; }
.ledger-row b{ font-family:var(--display); font-weight:300; font-size:26px; letter-spacing:-.02em; white-space:nowrap; }
.ledger-row.bad b{ color:#C0392B; }
.ledger-foot{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 22px; background:var(--ink); color:#fff; }
.ledger-foot span{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.6); }
.ledger-foot b{ font-family:var(--display); font-weight:300; font-size:26px; color:var(--signal); letter-spacing:-.02em; }

.clock{ margin-top:34px; border-top:1px solid var(--line-d); }
.clock-row{ display:grid; grid-template-columns:88px 1fr; gap:20px; padding:18px 0; border-bottom:1px solid var(--line-d); align-items:baseline; }
.clock-row .t{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--signal); }
.clock-row .e{ font-size:15px; color:rgba(255,255,255,.78); }
.clock-row.dead .t{ color:#E8705F; }

/* Leadership */
.leader{ display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; }
.portrait{ position:relative; }
.portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; filter:grayscale(1) contrast(1.06); background:var(--lightgray); }
.portrait::after{
  content:""; position:absolute; left:-14px; bottom:-14px; width:88px; height:88px;
  background:var(--signal); z-index:-1;
}
/* Until shalom.jpg exists, the frame holds its shape instead of collapsing. */
.portrait.noimg::before{
  content:"PHOTO"; display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:4/5; background:var(--lightgray);
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--charcoal);
}
.portrait .pcap{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--charcoal); margin-top:16px; display:flex; justify-content:space-between; gap:12px; }
.leader .role{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--azure); margin-bottom:16px; }
.leader h2{ margin-bottom:8px; }
.leader .bio p{ font-size:16.5px; color:var(--charcoal); line-height:1.75; margin-top:20px; }
.leader .bio p strong{ color:var(--ink); }
.pull{ margin-top:32px; padding:22px 0 22px 26px; border-left:2px solid var(--signal); font-family:var(--display); font-weight:300; font-size:21px; line-height:1.45; letter-spacing:-.01em; color:var(--ink); }

/* Team roles */
.roles{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-d); margin-top:60px; }
.role-card{ padding:34px 32px 40px 0; border-right:1px solid var(--line-d); }
.role-card:last-child{ border-right:none; padding-right:0; }
.role-card .n{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--signal); }
.role-card h3{ margin:18px 0 12px; color:#fff; }
.role-card p{ font-size:14.5px; color:rgba(255,255,255,.6); line-height:1.65; }

/* Principles */
.creed{ margin-top:56px; }
.creed-row{ display:grid; grid-template-columns:60px 1fr 1.4fr; gap:32px; padding:30px 0; border-top:1px solid var(--line); align-items:start; }
.creed-row:last-child{ border-bottom:1px solid var(--line); }
.creed-row .n{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--azure); padding-top:5px; }
.creed-row h3{ font-weight:600; }
.creed-row p{ font-size:15.5px; color:var(--charcoal); line-height:1.7; }

/* ---------- Footer ---------- */
footer{ background:var(--ink); color:#fff; padding:80px 0 0; }
.f-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:64px; padding-bottom:56px; border-bottom:1px solid var(--line-d); }
.f-top p{ font-size:15px; color:rgba(255,255,255,.55); max-width:420px; margin-top:22px; line-height:1.7; }
.f-col h4{ font-family:var(--mono); font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.42); margin-bottom:20px; }
.f-col a{ display:block; text-decoration:none; font-size:15px; color:rgba(255,255,255,.78); padding:6px 0; }
.f-col a:hover{ color:var(--signal); }
.f-bot{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:28px 0 34px; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.42); }
.f-bot a{ text-decoration:none; }
.f-bot a:hover{ color:var(--signal); }

@media (max-width:1000px){
  .wrap{ padding:0 28px; }
  section{ padding:84px 0; }
  .proof,.split,.band,.faq-grid,.engage-in,.need,.leader{ grid-template-columns:1fr; gap:52px; }
  /* Stacked: intro, then the phone, then the facts. The facts are a payoff for
     what you just watched, so they must not sit above it. */
  .conv{ grid-template-columns:1fr; grid-template-areas:"intro" "chat" "facts"; row-gap:44px; }
  .conv-facts .facts{ margin-top:0; }
  .pods,.pods-3{ grid-template-columns:1fr 1fr; }
  .roles{ grid-template-columns:1fr 1fr; }
  .pod,.role-card{ padding:28px 28px 32px 0; }
  .pod:nth-child(2),.role-card:nth-child(2){ border-right:none; padding-right:0; }
  .pod:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .role-card:nth-child(-n+2){ border-bottom:1px solid var(--line-d); }
  .pod:nth-child(3),.pod:nth-child(4),.role-card:nth-child(3){ padding-top:28px; }
  .metrics{ grid-template-columns:1fr 1fr; }
  .metric{ padding:24px 24px 24px 0; }
  .metric:nth-child(2){ border-right:none; }
  .metric:nth-child(-n+2){ border-bottom:1px solid var(--line-d); }
  .engage-side{ border-left:none; border-top:1px solid var(--line-d); padding-left:0; padding-top:36px; }
  .f-top{ grid-template-columns:1fr; gap:40px; }
  .creed-row{ grid-template-columns:40px 1fr; gap:20px; }
  .creed-row p{ grid-column:2; }
  .portrait{ max-width:420px; }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .wrap{ padding:0 20px; }
  section{ padding:64px 0; }
  .hero{ padding-top:76px; }
  .about-hero{ padding:72px 0 64px; }
  .hero{ padding:76px 0 64px; }
  .hero-foot{ margin-top:56px; }
  .nav-r a:not(.btn){ display:none; }
  .pods,.pods-3,.roles{ grid-template-columns:1fr; }
  .pod,.pod:nth-child(2),.role-card,.role-card:nth-child(2){ border-right:none; padding:26px 0; }
  .pod{ border-bottom:1px solid var(--line); }
  .role-card{ border-bottom:1px solid var(--line-d); }
  .pod:last-child,.role-card:last-child{ border-bottom:none; }
  .vs-head div,.vs-row div,.vs-label{ padding-left:16px; padding-right:16px; }
  .vs-row div{ font-size:14px; }
  .hero .cta .btn,.engage .cta .btn{ flex:1 1 auto; justify-content:center; }
  #feed{ height:420px; }
  .tagstrip div{ letter-spacing:.18em; font-size:9.5px; }
  .ledger-row b,.ledger-foot b{ font-size:22px; }
  .clock-row{ grid-template-columns:76px 1fr; gap:14px; }
}

/* ---------- Console + contact responsive ---------- */
@media (max-width:1000px){
  .console-body{ padding:20px; }
  .tiles{ grid-template-columns:1fr 1fr; }
  .detail{ grid-template-columns:1fr; }
  .detail-l{ border-right:none; border-bottom:3px solid #111; }
  .contact{ grid-template-columns:1fr; gap:56px; }
}

/* ---------- Mobile ---------- */
@media (max-width:680px){
  /* Headline stacks above the tabs; tabs go full width as a segmented control */
  .see-head{ display:block; border-bottom:none; }
  .see-title{ padding-bottom:0; }
  .tabs{ display:flex; margin-top:28px; border-bottom:1px solid var(--line-d); }
  .tab{ flex:1; margin-left:0; padding:14px 6px 16px; font-size:14.5px; text-align:center; }
  .panel{ padding-top:36px; }

  /* Scenario chips scroll sideways instead of stacking four deep */
  .scen{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -20px 14px; padding:0 20px; }
  .scen::-webkit-scrollbar{ display:none; }
  .scen-b{ flex:none; font-size:9.5px; padding:8px 11px; }

  .iphone{ max-width:340px; border-radius:46px; padding:9px; }
  .screen{ height:600px; border-radius:38px; }
  .msg{ font-size:15.5px; max-width:78%; }
  .chat-foot span{ font-size:9px; }

  /* The product console: a real phone-width app view */
  .console-bar .url{ font-size:9px; padding:5px 8px; }
  .console-body{ padding:14px; }
  .app-head{ padding-bottom:14px; }
  .app-id .sq{ width:36px; height:36px; font-size:16px; border-width:2px; }
  .app-id b{ font-size:15px; }
  .app-id span{ font-size:9px; }
  .app-live{ font-size:10px; padding:6px 10px; }
  .app-kick{ font-size:9.5px; margin:22px 0 10px; }
  .app-h{ font-size:17px; }
  .today{ padding:16px; box-shadow:4px 4px 0 #111; border-width:2px; }
  .today li{ font-size:14px; }
  .today .next{ font-size:13px; }
  .tiles{ grid-template-columns:1fr 1fr; gap:10px; }
  .tile{ padding:14px; box-shadow:3px 3px 0 #111; border-width:2px; }
  .tile b{ font-size:24px; }
  .tile span{ font-size:9px; }
  .pills{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:14px -14px; padding:0 14px; }
  .pills::-webkit-scrollbar{ display:none; }
  .pill{ flex:none; font-size:12px; padding:6px 12px; }
  .search input,.search button{ font-size:14px; padding:11px 12px; border-width:2px; }
  .leads{ border-width:2px; }
  .leads-h{ display:none; }
  .lead-r{ grid-template-columns:1fr auto; gap:8px 12px; padding:14px; }
  .lead-r .nm{ font-size:14px; }
  .lead-r > div:nth-child(2){ grid-column:1; }
  .lead-r .ago{ grid-column:1; font-size:12px; }
  .lead-r > div:last-child{ grid-row:1 / span 3; grid-column:2; align-self:center; }
  .view{ font-size:12px; padding:8px 11px; }
  .detail{ border-width:2px; }
  .detail-meta{ grid-template-columns:1fr; }
  .detail-meta div{ border-right:none; }
  .log{ padding:14px; max-height:none; }
  .log-row{ grid-template-columns:1fr; gap:4px; padding:12px 0; }
  .log-row .ts{ font-size:9.5px; }
  .log-row .ev{ font-size:13.5px; }
  .detail-r{ padding:16px; }
  .prompt code{ font-size:11px; }

  /* Contact */
  .f2{ grid-template-columns:1fr; gap:0; }
  .field{ margin-bottom:24px; }
  .send{ gap:12px; }
  .send .btn{ width:100%; justify-content:center; }
  .chan .v{ font-size:18px; margin-bottom:24px; }
  .chan .book{ padding:20px; }
}

/* Rules grid stacks on mobile */
@media (max-width:900px){
  .rulegrid{ grid-template-columns:1fr !important; }
}

/* ---------- Homepage "who built it": text only, no portrait ---------- */
.who{ display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:start; }
@media (max-width:900px){ .who{ grid-template-columns:1fr; gap:28px; } }

/* ---------- Setup steps: a swipeable rail on phones ----------
   Three stacked cards ate a full screen of scroll. On mobile they become one
   horizontal rail with snap points, so the whole process is one gesture. */
@media (max-width:680px){
  .pods.rail{
    display:flex;
    grid-template-columns:none !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:0;
    margin:26px -20px 0;
    padding:0 20px;
    border-top:1px solid var(--line);
  }
  .pods.rail::-webkit-scrollbar{ display:none; }
  .pods.rail{ scroll-padding-left:20px; }
  .pods.rail .pod{
    flex:0 0 76%;
    scroll-snap-align:start;
    border-right:1px solid var(--line);
    border-bottom:none;
    padding:24px 22px 28px 0;
    margin-right:22px;
  }
  .pods.rail .pod:last-child{
    border-right:none;
    margin-right:0;
    flex-basis:82%;
    padding-right:20px;   /* the rail must not end flush against the screen */
  }
  .pods.rail .pod p{ font-size:14px; }
}


/* ── LIGHT THEME ─────────────────────────────────────────────────────────────
   A token swap only. Same layout, same type, same particle thread; warm paper
   ground, ink type, and the lime pulled down to a shade that survives on paper.
   The engage band and footer stay ink: they anchor the page and make the
   lime read as a signal instead of decoration.                              */
:root{
  --ink:#141310;              /* type, not ground */
  --paper:#F5F2EC;
  --signal:#7AA614;           /* lime at full strength vanishes on paper */
  --signal-chip:#C9F73E;      /* the brand lime, kept for fills */
  --azure:#2F6BFF;
  --charcoal:#6B6559;
  --bone:#EDE9DF;
  --line:rgba(20,19,16,.14);
  --line-d:rgba(20,19,16,.14);
}
body{ background:var(--paper); color:var(--ink); }

/* Nav: paper, not ink */
nav{ background:rgba(245,242,236,.90); border-bottom:1px solid var(--line); }
nav .brand,footer .brand{ color:var(--ink); }
.nav-r a:not(.btn){ color:var(--charcoal); }
.nav-r a:not(.btn):hover,.nav-r a.here{ color:var(--ink); }
.btn-signal{ background:var(--signal-chip); color:var(--ink) !important; }
.btn-signal:hover{ background:#D8FF55; }
.btn-line{ color:var(--ink) !important; border-color:var(--line); }
.btn-line:hover{ border-color:var(--ink); background:rgba(20,19,16,.04); }

/* Hero on paper */
.hero{ background:var(--paper); color:var(--ink); }
.hero .sub{ color:var(--charcoal); }
.hero h1 .sig{ color:var(--signal); }
.caret{ background:var(--azure); }
.caret.done{ background:var(--signal); }
.eyebrow{ color:var(--charcoal); }
.eyebrow .num,.eyebrow .sl{ color:var(--signal); }
.swarm-hint{ color:var(--charcoal); }
.swarm-hint b{ color:var(--signal); }
.metrics-cap{ color:var(--charcoal); }
.metric span{ color:var(--charcoal); }
.hero-foot,.metric{ border-color:var(--line); }

/* Dark sections become paper-on-bone */
.dark{ background:var(--bone); color:var(--ink); }
.dark .lead{ color:var(--charcoal); }
.dark .eyebrow{ color:var(--charcoal); }
.dark .eyebrow .num,.dark .eyebrow .sl{ color:var(--signal); }
.dark .cap{ color:var(--charcoal); }
.dark h2,.dark h3{ color:var(--ink); }
.dark .alt{ border-color:var(--line); }
.dark .alt span{ color:var(--signal); }
.see-head{ border-bottom-color:var(--line); }
.tab{ color:var(--charcoal); }
.tab:hover{ color:var(--ink); }
.tab.on{ color:var(--ink); border-bottom-color:var(--signal); }
.scen-b{ color:var(--charcoal); border-color:var(--line); }
.scen-b:hover{ color:var(--ink); border-color:var(--ink); }
.scen-b.on{ background:var(--signal-chip); color:var(--ink); border-color:var(--signal-chip); }
.facts{ border-top-color:var(--line); }
.fact{ color:var(--charcoal); border-bottom-color:var(--line); }
.fact::before{ color:var(--signal); }
.chat-foot span{ color:var(--charcoal); }
.chat-foot button{ color:var(--signal); border-color:var(--line); }

/* Engage + footer */
.engage{ background:var(--ink); color:#F5F2EC; }
.engage .lead{ color:rgba(245,242,236,.7); }
.engage .eyebrow,.engage .eyebrow .num,.engage .eyebrow .sl{ color:var(--signal-chip); }
.engage h2 .sig{ color:var(--signal-chip); }
.engage-side{ border-left-color:rgba(255,255,255,.16); }
.engage-side span{ color:rgba(245,242,236,.55); }
footer{ background:var(--ink); color:#F5F2EC; }
footer .brand{ color:#F5F2EC; }
footer .f-col a{ color:rgba(245,242,236,.78); }
footer .f-col a:hover{ color:var(--signal-chip); }
.f-top,.f-bot{ border-color:rgba(255,255,255,.14); }

/* ── Light theme: the pieces the preview never covered ───────────────────── */

/* The about + contact heroes were ink; they follow the homepage onto paper. */
.about-hero{ background:var(--paper); color:var(--ink); }
.about-hero h1 .sig{ color:var(--signal); }
.about-hero .lead{ color:var(--charcoal) !important; }

/* Section 02's dark panels sit on bone now, so their innards must invert. */
.dark .term,.dark .console{ border-color:var(--line); }
.dark .conv-intro h3{ color:var(--ink) !important; }
.dark .conv-intro h3 strong{ color:var(--ink) !important; }
.dark .vs{ border-color:var(--line); }
.dark .vs-head div:first-child{ color:var(--ink); border-right-color:var(--line); }
.dark .vs-head div:last-child{ color:var(--charcoal); }
.dark .vs-head{ border-bottom-color:var(--line); }
.dark .vs-label{ color:var(--charcoal); border-top-color:var(--line); }
.dark .vs-row div:first-child{ color:var(--ink); border-right-color:var(--line); }
.dark .vs-row div:last-child{ color:var(--charcoal); }
.dark .clock,.dark .clock-row{ border-color:var(--line); }
.dark .clock-row .t{ color:var(--signal); }
.dark .clock-row .e{ color:var(--charcoal); }
.dark .roles,.dark .role-card{ border-color:var(--line); }
.dark .role-card .n{ color:var(--signal); }
.dark .role-card h3{ color:var(--ink); }
.dark .role-card p{ color:var(--charcoal); }

/* Guest card + ledger + rules read on paper */
.strip{ background:var(--bone); }
.ledger,.ledger-row,.ledger-head{ border-color:var(--line); }

/* Nav on paper needs a real edge, not a hairline of light */
nav{ border-bottom:1px solid var(--line); }
.tagstrip{ background:var(--signal-chip); color:var(--ink); }

/* Portrait block */
.portrait::after{ background:var(--signal-chip); }
.pull{ border-left-color:var(--signal-chip); }

/* The engage band and footer stayed ink, so anything inside them that the light
   theme turned to ink text has to turn back. This is the classic light-theme
   trap: a global token flip blanks out every element on a surviving dark panel. */
.engage .btn-line{ color:#F5F2EC !important; border-color:rgba(255,255,255,.30); }
.engage .btn-line:hover{ border-color:#fff; background:rgba(255,255,255,.07); }
.engage .btn-ghost{ color:#F5F2EC !important; border-color:rgba(255,255,255,.24); }

/* Section 02's captions were tuned for white-on-ink and washed out on bone. */
.dark .cap,.chat-foot span{ color:#6B6559; }
.chat-foot button{ color:#4E6B0F; border-color:rgba(20,19,16,.28); }
.chat-foot button:hover{ background:rgba(122,166,20,.10); }
.term-foot span{ color:#6B6559; }

/* ---------- Contact: an action, not a link ----------
   It sat in the same mono row as the section anchors, so it read as navigation.
   Given its own outline it becomes the second half of a CTA pair: book now, or
   talk to us first. Both are ways in. */
.nav-r a.nav-contact{
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  border:1.5px solid var(--ink);
  padding:10px 18px;
  margin-left:6px;
  transition:background .18s ease, color .18s ease;
}
.nav-r a.nav-contact:hover{ background:var(--ink); color:var(--paper); }
.nav-r a.nav-contact.here{ background:var(--ink); color:var(--paper); }
@media (max-width:900px){
  .nav-r a.nav-contact{ font-size:13px; padding:9px 14px; }
}
@media (max-width:680px){
  /* the phone shows only the primary; two buttons would crowd the bar */
  .nav-r a.nav-contact{ display:none; }
}


/* Stat block on paper: the hero is proof-led, the numbers are the headline act */
.metric b{ color:var(--ink); }
.metric span{ color:var(--charcoal); }
.hero-foot{ border-top:1px solid var(--line); }

/* ---------- The stat block: the hero's headline act ----------
   Three numbers, set big enough to be read across a room. The hero is
   proof-led, so these outweigh everything except the H1 itself. */
.metrics-3{ grid-template-columns:repeat(3,1fr); }
.metrics-3 .metric b{
  font-size:clamp(46px,5.4vw,84px);
  font-weight:300;
  letter-spacing:-.035em;
  line-height:.95;
  font-variant-numeric:tabular-nums;
}
.metrics-3 .metric span{
  font-size:11px;
  letter-spacing:.16em;
  margin-top:16px;
}
.metrics-3 .metric{ padding:38px 32px 38px 0; }
@media (max-width:900px){
  .metrics-3{ grid-template-columns:1fr 1fr; }
  .metrics-3 .metric:nth-child(3){ border-right:none; }
  .metrics-3 .metric:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}
@media (max-width:680px){
  .metrics-3 .metric b{ font-size:clamp(40px,13vw,58px); }
  .metrics-3 .metric{ padding:26px 18px 26px 0; }
  .metrics-3 .metric span{ font-size:9.5px; letter-spacing:.13em; margin-top:10px; }
}