/* ============================================================
   site.css — the shared HeyBob design system.
   One ground (cream), one ink, one accent (orange), two greys.
   Every page links this. Page-specific rules go in the page.
   ============================================================ */
/* ============================================================
   PAGE SHELL — tokens lifted verbatim from heybob.ai so this
   prototype reads as production, not as a separate design.
   ============================================================ */
:root{
  /* ground and ink -------------------------------------------------
     The cream is the brand. Everything else is restraint: one accent,
     one ink, two greys. The orange is spent on the rotating line, the
     buttons and small marks, and nowhere else. */
  --cream:#FFF8F0;
  --cream-dim:#FCEEDE;
  --surface:#FFFFFF;
  --espresso:#17110C;
  --muted:#6E5A49;
  --muted-2:#9A8570;
  --line:rgba(23,17,12,0.07);
  --line-2:rgba(23,17,12,0.12);

  --orange:#FF6A1F;
  --orange-deep:#C4460B;
  --amber:#FFB03A;
  --coral:#F53D5A;
  --ok:#1E9E6A;

  --grad-accent:linear-gradient(96deg,#FF8A2B 0%,#FF6A1F 34%,#F53D5A 68%,#C4460B 100%);

  --r-section:32px;
  --r-md:20px;
  --r-sm:14px;

  --font:"Schibsted Grotesk","Helvetica Neue",-apple-system,Arial,sans-serif;
  --display:"Figtree","Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;

  /* one vertical rhythm, used everywhere */
  --gap-section:112px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  background:var(--cream); color:var(--espresso);
  font-family:var(--font); font-size:18.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--orange-deep); text-underline-offset:3px; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
img,svg{ max-width:100%; }
.wrap{ max-width:1240px; margin:0 auto; padding:0 22px; }
@media (min-width:768px){ .wrap{ padding:0 40px; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; font-family:var(--display); font-weight:700; font-size:16px;
  letter-spacing:-0.01em; text-decoration:none; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  height:54px; padding:0 30px;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s, border-color .16s;
}
@media (prefers-reduced-motion: reduce){ .btn{ transition:none; } }
.btn-primary-dark{
  background:var(--espresso); color:#fff; border-color:var(--espresso);
  box-shadow:0 10px 26px -14px rgba(23,17,12,.65);
}
.btn-primary-dark:hover{ transform:translateY(-1px); box-shadow:0 16px 32px -16px rgba(23,17,12,.7); }
.btn-ghost-light{ background:transparent; border-color:var(--line-2); color:var(--espresso); }
.btn-ghost-light:hover{ background:rgba(23,17,12,.045); border-color:var(--line-2); }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.cta-note{ color:var(--muted); font-size:15px; margin-top:16px; }
.cta-link{
  color:var(--muted); font-size:15.5px; text-decoration:none;
  border-bottom:1px solid var(--line-2); padding-bottom:2px;
}
.cta-link:hover{ color:var(--espresso); border-color:var(--espresso); }

/* the offer, given real weight without a second accent colour */
.cta-offer{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-top:22px; font-size:15.5px;
}
.cta-offer b{
  font-family:var(--display); font-weight:800; font-size:20px;
  letter-spacing:-0.02em; color:var(--espresso);
}
.cta-offer span{ color:var(--muted); }

/* ---------- type scale ----------
   Display sizes are Figtree, tracked in hard. Body is Schibsted
   Grotesk, held near 65 characters so it stays readable. */
h1,h2,h3{ font-family:var(--display); font-weight:800; text-wrap:balance; }
h1{
  font-size:clamp(42px,6.1vw,74px); line-height:1.01; letter-spacing:-0.038em;
  margin-bottom:22px; max-width:15ch;
}
h2{
  font-size:clamp(32px,4.2vw,52px); line-height:1.06; letter-spacing:-0.032em;
  max-width:18ch; margin:0 0 16px;
}
h3{ font-size:21.5px; line-height:1.25; letter-spacing:-0.018em; font-weight:700; }
p{ max-width:66ch; }

section{ padding:var(--gap-section) 0; }
@media (max-width:920px){ :root{ --gap-section:76px; } }

/* ---------- small labels ----------
   No pill, no border. A hollow orange dot and a tracked-out word: the
   quietest way to say "this section starts here". */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-size:12.5px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
  margin-bottom:22px;
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--orange); flex:none;
}

.lede{ color:var(--muted); font-size:20.5px; line-height:1.55; max-width:52ch; }
.section-lede{ color:var(--muted); font-size:19.5px; line-height:1.6; max-width:58ch; margin-bottom:48px; }

/* ---------- generic page cards ----------
   No border. A white surface on cream, lifted a millimetre, with room
   inside it. Borders on every card were most of the visual noise. */
/* --- Top bar --- */
header.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(255,248,240,.86); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{ display:flex; align-items:center; gap:16px; height:68px; }
.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.brand img{ width:30px; height:30px; border-radius:8px; display:block; box-shadow:0 2px 8px -3px rgba(196,70,11,.55); }
.brand span{
  font-family:var(--display); font-weight:800; font-size:19.5px;
  letter-spacing:-0.028em; color:var(--espresso);
}
.brand span i{ font-style:normal; color:var(--orange); }
.topnav{ display:flex; gap:2px; margin-left:auto; align-items:center; }
.topnav a{
  color:var(--espresso); opacity:.68; text-decoration:none;
  font-size:14.5px; font-weight:500; padding:8px 12px; border-radius:9px;
  transition:background-color .15s, opacity .15s;
}
.topnav a:hover{ background:rgba(23,17,12,.055); opacity:1; }
.topbar .btn{ height:42px; padding:0 20px; font-size:14.5px; flex:none; }
@media (max-width:900px){ .topnav{ display:none; } .topbar .btn{ margin-left:auto; } }
@media (max-width:520px){ .topbar .btn{ display:none; } }

/* --- ChatGPT vs Bob --- */
.versus{ border-top:1px solid var(--line-2); }
.vrow{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.35fr);
  gap:24px; align-items:baseline;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.vrow.vhead{ padding:14px 0; border-bottom:1px solid var(--line-2); }
.vhead span{
  font-family:var(--display); font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
}
.vjob{ font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-0.02em; }
.vthem{ color:var(--muted-2); font-size:17px; }
.vbob{ color:var(--espresso); font-size:17px; font-weight:500; }
.vbob b{ font-weight:700; }
@media (max-width:820px){
  .vrow{ grid-template-columns:1fr; gap:6px; }
  .vrow.vhead{ display:none; }
  .vthem::before{ content:"ChatGPT: "; font-weight:600; }
  .vbob::before{ content:"Bob: "; font-weight:700; color:var(--orange-deep); }
}

/* --- Why he feels like a hire --- */
.hires{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width:820px){ .hires{ grid-template-columns:1fr; } }
.hire{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 28px 30px;
  box-shadow:0 1px 2px rgba(23,17,12,.03), 0 14px 34px -26px rgba(23,17,12,.30);
}
.hire-say{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--cream-dim); border-radius:var(--r-sm);
  padding:12px 14px; margin:0 0 22px; max-width:none;
  font-size:15px; line-height:1.45; color:var(--espresso);
}
.hire-say b{
  flex:none; font-family:var(--display); font-weight:800; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--orange-deep);
  padding-top:3px;
}
.hire h3{ margin-bottom:9px; }
.hire p{ color:var(--muted); font-size:16px; max-width:none; }
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
@media (max-width:920px){ .cards{ grid-template-columns:1fr; } }
.cards > div,
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:32px 30px; box-shadow:0 1px 2px rgba(23,17,12,.03), 0 14px 34px -26px rgba(23,17,12,.30);
}
.card h3{ margin-bottom:12px; }
.card p{ color:var(--muted); font-size:17.5px; line-height:1.6; }

/* ---------- the five-minute steps ---------- */
.step{ position:relative; }
.step-time{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:16px;
  font-family:var(--display); font-size:12px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--orange-deep);
  font-variant-numeric:tabular-nums;
}
.step-time::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--orange); flex:none;
}
.step-say{
  margin-top:16px; background:var(--cream); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:12px 15px; font-size:15px; color:var(--espresso);
}
.step-total{
  margin-top:34px; margin-bottom:64px; font-size:17px; color:var(--muted); max-width:70ch;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}

/* ---------- the one place a gradient still earns its keep ---------- */
.grad{
  background:linear-gradient(150deg,#1F1610 0%,#241812 55%,#2E1B10 100%);
  color:#fff; border-radius:var(--r-section); padding:52px 48px;
  box-shadow:0 30px 70px -40px rgba(23,17,12,.6);
}
@media (max-width:920px){ .grad{ padding:36px 28px; } }
.grad h2{ color:#fff; }
.grad h3{ color:#fff; }
.grad p{ color:rgba(255,255,255,.80); }
.grad .btn-primary-dark{
  background:#fff; color:var(--espresso); border-color:#fff; box-shadow:none;
}
.grad .btn-ghost-light{ color:#fff; border-color:rgba(255,255,255,.30); }
.grad .btn-ghost-light:hover{ background:rgba(255,255,255,.12); }

.verify{
  margin-top:34px; font-size:15.5px; color:var(--muted);
  border-left:2px solid var(--orange); padding-left:16px; max-width:70ch;
}
.split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
@media (max-width:920px){ .split{ grid-template-columns:1fr; gap:26px; } }
.beforeafter{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:920px){ .beforeafter{ grid-template-columns:1fr; } }
.ba-cap{ color:var(--muted); font-size:14px; margin-top:14px; text-align:center; }

footer{
  border-top:1px solid var(--line); padding:52px 0 72px;
  color:var(--muted); font-size:15px;
}

/* ============================================================
   SHARED PAGE FURNITURE
   Rules the inner pages need that the homepage never did.
   ============================================================ */

/* ---------- a simple one-column page hero ----------
   The homepage hero is two columns; every other page uses this. */
.page-hero{ padding:72px 0 8px; }
.page-hero h1{ max-width:17ch; }
.page-hero .lede{ margin-top:6px; max-width:56ch; font-size:21px; }
.page-hero .cta-row{ margin-top:30px; }

/* ---------- running prose ----------
   Articles, legal pages, guides. Anything that is read top to bottom. */
.prose p, .prose li{ color:var(--muted); font-size:18.5px; line-height:1.7; }
.prose p{ margin-bottom:18px; }
.prose h2{ font-size:clamp(26px,3.2vw,34px); margin:52px 0 14px; max-width:22ch; }
.prose h3{ font-size:21px; margin:34px 0 10px; }
.prose ul, .prose ol{ margin:0 0 18px 22px; display:grid; gap:9px; }
.prose blockquote{
  margin:26px 0; padding-left:18px; border-left:2px solid var(--orange);
  color:var(--muted); font-size:17.5px;
}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14.5px;
  background:var(--cream-dim); border-radius:6px; padding:2px 6px;
}
.prose pre{
  background:#17110C; color:#F2EAE2; border-radius:var(--r-sm);
  padding:18px 20px; overflow-x:auto; margin:0 0 20px;
}
.prose pre code{ background:none; padding:0; color:inherit; }
.prose img{ border-radius:var(--r-sm); }
.muted{ color:var(--muted); }

/* ---------- FAQ accordions ---------- */
details{ border-bottom:1px solid var(--line-2); }
summary{
  font-family:var(--display); font-weight:700; font-size:17.5px;
  letter-spacing:-0.015em; cursor:pointer; padding:18px 0;
  list-style:none; display:flex; justify-content:space-between; gap:14px;
}
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; color:var(--orange-deep); font-weight:700; font-size:21px; line-height:1; }
details[open] summary::after{ content:"\2013"; }
details > *:not(summary){ color:var(--muted); font-size:16.5px; padding-bottom:20px; max-width:70ch; }

/* ---------- tables ---------- */
.table-scroll{ overflow-x:auto; }
table{ border-collapse:collapse; width:100%; font-size:16px; }
th, td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
th{
  font-family:var(--display); font-size:12.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2);
  border-bottom:1px solid var(--line-2); white-space:nowrap;
}
td{ color:var(--muted); }
td:first-child{ color:var(--espresso); font-weight:600; }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); padding:52px 0 72px; color:var(--muted); font-size:15px; }
footer a{ color:var(--muted); text-decoration:none; }
footer a:hover{ color:var(--espresso); }
.foot-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:32px; margin-bottom:36px; }
.foot-cols h4{
  font-family:var(--display); font-size:12.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px;
}
.foot-cols ul{ list-style:none; display:grid; gap:9px; }

/* ---------- utility ---------- */
.center{ text-align:center; }
.center h1, .center h2, .center p{ margin-left:auto; margin-right:auto; }
.narrow{ max-width:760px; margin:0 auto; }

/* ---------- the receipt proof strip (SEO pages) ---------- */
.receipt-proof{
  display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  margin-top:30px; padding:14px 16px; max-width:640px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:0 1px 2px rgba(23,17,12,.03), 0 12px 30px -24px rgba(23,17,12,.3);
}
.receipt-proof .avatar{
  width:32px; height:32px; border-radius:8px; flex:none;
  display:grid; place-items:center; background:var(--grad-accent);
  color:#fff; font-family:var(--display); font-weight:800; font-size:16px;
}
.receipt-proof .copy{ font-size:14.5px; flex:1; min-width:200px; color:var(--muted); }
.receipt-proof .copy b{ color:var(--espresso); }
.receipt-proof strong{
  font-size:12.5px; color:var(--muted-2); font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ---------- plain lists used as example prompts ---------- */
ul.plain{ list-style:none; display:grid; gap:12px; margin:0 0 8px; max-width:70ch; }
ul.plain li{
  color:var(--espresso); font-size:18.5px; padding-left:18px; position:relative;
}
ul.plain li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--orange);
}

/* ---------- the dark card as a page-closing CTA ---------- */
.grad{ margin:64px 0 8px; }
.grad h2{ max-width:20ch; margin-bottom:12px; }
.grad p{ max-width:52ch; }
.btn-on-dark{ background:#fff; color:var(--espresso); border-color:#fff; margin-top:22px; }
.btn-on-dark:hover{ transform:translateY(-1px); }
.grad a.alt{
  color:#fff; text-decoration:none; font-weight:600; font-size:15.5px;
  margin-left:20px; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:2px;
}
@media (max-width:560px){ .grad a.alt{ display:block; margin:18px 0 0; } }


/* ============================================================
   MARKETING COMPONENTS
   Ported verbatim from prototype/v3.html. Safe on any page.
   See DESIGN.md for what each block is for.
   ============================================================ */
/* ---------- hero ----------
   Cream ground, ink headline, orange spent only on the accent word and
   the small marks. The Slack panel below is the loud thing now, which is
   the right thing for it to be. */
.hero{ padding:44px 0 8px; position:relative; isolation:isolate; }
#amb{
  position:absolute; inset:-120px 0 -180px; width:100%; height:calc(100% + 300px);
  z-index:-1; pointer-events:none; opacity:1;
  -webkit-mask-image:radial-gradient(120% 85% at 50% 30%,#000 35%,transparent 78%);
  mask-image:radial-gradient(120% 85% at 50% 30%,#000 35%,transparent 78%);
}
@media (max-width:920px){ .hero{ padding:34px 0 4px; } }
.hero-grid{ display:grid; gap:0; justify-items:center; text-align:center; }
.hero h1{ max-width:17ch; margin:0 auto; font-size:clamp(44px,7.4vw,96px); line-height:0.98; letter-spacing:-0.045em; }
.hero-side{ display:grid; gap:18px; padding-top:22px; justify-items:center; }
.hero-side .cta-row, .hero-side .cta-offer{ margin-top:0; }
.hero h1 .hi{
  background-image:linear-gradient(180deg,#FF6A1F 0%,#DC4A0C 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lede{ font-size:clamp(19px,2.05vw,25px); max-width:44ch; margin:0 auto; text-align:center; }
.hero .lede b{ color:var(--espresso); font-weight:600; }

/* the three promises, as a hairline list rather than a row of pills */
.proof-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 26px;
  margin-top:30px; padding-top:24px; border-top:1px solid var(--line);
  color:var(--muted); font-size:15.5px;
}
.proof-row span{ display:inline-flex; align-items:center; gap:9px; padding:6px 0; }
.proof-row span::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--orange); flex:none; opacity:.9;
}

/* ---------- job tabs ---------- */
.jobs-section{ padding-top:18px; padding-bottom:var(--gap-section); }
.jobs{ margin-top:0; }
.jobs-section .jobs{ margin-top:0; }
.jobs-section .wrap{ text-align:center; }
.jobs-section .panel{ text-align:left; }
.tablist{
  display:inline-flex; gap:4px; flex-wrap:wrap; margin-bottom:18px;
  background:rgba(23,17,12,.045); border:1px solid var(--line);
  border-radius:999px; padding:5px;
}
.tab{
  font-family:var(--display); font-weight:600; font-size:16px; padding:10px 20px;
  border-radius:999px; border:1px solid transparent; background:transparent;
  color:var(--muted); cursor:pointer;
  transition:color .15s, background-color .15s, box-shadow .15s;
}
.tab:hover{ color:var(--espresso); }
.tab[aria-selected="true"]{
  color:var(--espresso); background:var(--surface);
  box-shadow:0 1px 2px rgba(23,17,12,.06), 0 6px 16px -10px rgba(23,17,12,.4);
}
.panel{
  background:linear-gradient(168deg,rgba(255,138,43,.14),rgba(245,61,90,.07) 46%,rgba(23,17,12,.035));
  border:1px solid var(--line); border-radius:26px; padding:16px;
  box-shadow:0 1px 2px rgba(23,17,12,.04), 0 40px 90px -50px rgba(23,17,12,.45);
}
.shot{ display:block; width:100%; height:auto; border-radius:10px; }
.panel[hidden]{ display:none; }
@media (max-width:700px){ .panel{ padding:8px; border-radius:18px; } }
.panel-caption{
  color:var(--muted); font-size:14px; margin-top:24px; max-width:none;
  display:flex; gap:10px; justify-content:center; align-items:center;
  flex-wrap:wrap; text-align:center;
}
.flag{
  font-family:var(--display); font-size:11px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; border-radius:999px; padding:4px 10px;
  border:1px solid currentColor;
}
.flag.real{ color:var(--ok); }
.flag.illus{ color:var(--muted-2); }

/* ---------- the stack wall ---------- */
.stack{ padding:96px 0 8px; }
@media (max-width:920px){ .stack{ padding:64px 0 4px; } }
.stack-head{ display:grid; gap:14px; margin-bottom:34px; }
.stack-head h2{ max-width:18ch; margin:0; }
.stack-count{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.stack-count b{
  font-family:var(--display); font-weight:900; letter-spacing:-0.04em;
  font-size:clamp(40px,5vw,58px); line-height:1;
  background-image:linear-gradient(180deg,#FF6A1F 0%,#DC4A0C 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.stack-count span{ color:var(--muted); font-size:18.5px; }
.mq{
  overflow:hidden; padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.mq + .mq{ margin-top:14px; }
.mq-track{ display:flex; gap:14px; width:max-content; animation:mq 64s linear infinite; }
.mq.rev .mq-track{ animation-direction:reverse; animation-duration:78s; }
.mq:hover .mq-track{ animation-play-state:paused; }
@keyframes mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .mq-track{ animation:none; } }
.tile{
  flex:none; width:66px; height:66px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 1px 2px rgba(23,17,12,.04), 0 10px 24px -20px rgba(23,17,12,.5);
}
.tile img{ width:34px; height:34px; object-fit:contain; display:block; }
.stack-note{ margin-top:26px; color:var(--muted); font-size:17px; max-width:62ch; }

/* ---------- the annotated receipt ---------- */
.rcpt-wrap{
  background:#1A1D21; border-radius:22px; padding:34px 30px 28px; margin:0 0 34px;
  box-shadow:0 1px 2px rgba(23,17,12,.05), 0 40px 90px -50px rgba(23,17,12,.55);
  overflow-x:auto;
}
.rcpt{
  display:grid; grid-auto-flow:column; justify-content:start; align-items:start;
  gap:0 20px; min-width:min-content;
  font-family:"Lato","Slack-Lato","Helvetica Neue",Arial,sans-serif;
}
.rcpt > div{ display:grid; gap:10px; justify-items:start; }
.rcpt .val{
  color:#D1D2D3; font-size:15px; line-height:1.4; white-space:nowrap;
  display:flex; align-items:center; gap:8px;
}
.rcpt .val em{ font-style:normal; color:#8D8D8E; }
.rcpt .val .men{ color:#2BA5CE; background:rgba(29,155,209,.12); border-radius:4px; padding:0 2px; }
.rcpt .tick{ width:100%; height:1px; background:rgba(248,248,248,.16); position:relative; }
.rcpt .tick::before{
  content:""; position:absolute; left:0; top:-4px; width:1px; height:9px;
  background:var(--orange);
}
.rcpt .lab{
  font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:#ABABAD; white-space:nowrap;
}
.rcpt-note{
  margin-top:26px; padding-top:18px; border-top:1px solid rgba(248,248,248,.10);
  color:#ABABAD; font-size:14.5px; max-width:64ch;
  font-family:var(--font);
}
.rcpt-note b{ color:#F8F8F8; font-weight:600; }

/* ---------- the "make this recurring" modal ---------- */
.recur{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:40px; align-items:start; }
@media (max-width:960px){ .recur{ grid-template-columns:1fr; gap:32px; } }
.recur .cards{ grid-template-columns:1fr; }
.skm{
  font-family:"Lato","Slack-Lato","Helvetica Neue",Arial,sans-serif;
  background:#1A1D21; color:#D1D2D3; border-radius:12px; overflow:hidden;
  box-shadow:0 1px 2px rgba(23,17,12,.05), 0 44px 90px -46px rgba(23,17,12,.62);
  border:1px solid rgba(248,248,248,.10);
}
.skm-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:17px 20px 15px; border-bottom:1px solid rgba(248,248,248,.13);
}
.skm-top b{ color:#F8F8F8; font-weight:900; font-size:19px; letter-spacing:-0.01em; }
.skm-x{ color:#ABABAD; font-size:20px; line-height:1; }
.skm-body{ padding:20px 20px 22px; display:grid; gap:6px; }
.skm-q{ color:#D1D2D3; font-size:15px; margin:0 0 12px; max-width:none; }
.skm-lab{ color:#F8F8F8; font-weight:700; font-size:15px; margin-top:12px; }
.skm-field{
  border:1px solid rgba(248,248,248,.30); border-radius:4px;
  padding:9px 12px; font-size:15px; color:#D1D2D3; background:transparent;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.skm-field.ph{ color:#8D8D8E; }
.skm-field svg{ width:13px; height:13px; stroke:#ABABAD; fill:none; stroke-width:2.2; flex:none; }
.skm-hint{ color:#ABABAD; font-size:13px; margin:2px 0 0; max-width:none; }
.skm-foot{
  display:flex; justify-content:flex-end; gap:12px; align-items:center;
  padding:16px 20px 18px; border-top:1px solid rgba(248,248,248,.13);
}
.skm-cancel{
  font-size:15px; font-weight:700; color:#D1D2D3;
  border:1px solid rgba(121,124,129,.5); border-radius:4px; padding:7px 14px;
}
.skm-go{
  font-size:15px; font-weight:700; color:#fff; background:var(--green);
  border-radius:4px; padding:8px 15px;
}
.skm-after{
  display:flex; gap:10px; align-items:flex-start;
  margin-top:16px; padding:14px 16px; border-radius:12px;
  background:var(--cream-dim); border:1px solid var(--line);
  color:var(--muted); font-size:14.5px; line-height:1.5;
}
.skm-after b{ color:var(--espresso); font-weight:600; }
.skm-only{ font-size:12.5px; color:var(--muted-2); margin-top:12px; }

/* ---------- the closing card ---------- */
.closer{ padding-top:0; }
.closer .grad{ padding:76px 60px 66px; text-align:center; }
@media (max-width:920px){ .closer .grad{ padding:48px 26px 44px; } }
.closer h2{
  font-size:clamp(34px,5.2vw,64px); letter-spacing:-0.042em; line-height:1.02;
  max-width:16ch; margin:0 auto 16px;
}
.closer p{ margin:0 auto; max-width:40ch; font-size:clamp(18px,1.9vw,22px); }
.closer .cta-row{ margin-top:34px; justify-content:center; }
.closer-note{ color:rgba(255,255,255,.62); font-size:16px; }
.closer-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px;
  margin-top:40px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.72); font-size:15.5px;
}
.closer-row span{ display:inline-flex; align-items:center; gap:9px; }
.closer-row span::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--amber); flex:none;
}

/* ---------- illustrated feature cards ---------- */
.fc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
@media (max-width:900px){ .fc-grid{ grid-template-columns:1fr; } }
.fc-card{
  background:var(--surface); border:1px solid var(--line); border-radius:26px; overflow:hidden;
  box-shadow:0 1px 2px rgba(23,17,12,.03), 0 30px 70px -46px rgba(23,17,12,.55);
  display:grid; grid-template-rows:auto 1fr;
}
.fc-canvas{
  position:relative; height:352px; padding:26px 28px; overflow:hidden;
  background:
    radial-gradient(90% 70% at 88% 6%, rgba(255,208,120,.55), transparent 58%),
    linear-gradient(154deg,#FFA12E 0%,#FF6A1F 34%,#F0400F 68%,#C22A12 100%);
  display:grid; grid-template-rows:auto 1fr; gap:18px;
}
@media (max-width:900px){ .fc-canvas{ height:auto; min-height:320px; } }
.fc-canvas::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 -90px 110px -80px rgba(120,20,0,.55), inset 0 0 0 1px rgba(255,255,255,.14);
}
.fc-say{
  color:#fff; margin:0; max-width:20ch; position:relative; z-index:2;
  font-family:var(--display); font-weight:900;
  font-size:clamp(23px,2.35vw,31px); line-height:1.08; letter-spacing:-0.035em;
  text-shadow:0 2px 18px rgba(140,30,0,.28);
}
.fc-art{ position:relative; z-index:1; align-self:center; display:grid; gap:14px; width:100%; }

/* the white app tile */
.fc-tile{
  width:92px; height:92px; border-radius:26px; background:#fff;
  display:grid; place-items:center; position:relative; flex:none;
  box-shadow:0 2px 0 rgba(255,255,255,.9) inset, 0 24px 46px -18px rgba(120,24,0,.62);
}
.fc-tile img{ width:46px; height:46px; border-radius:12px; display:block; }
.fc-tile > svg{ width:40px; height:40px; stroke:#E1550F; fill:none; stroke-width:1.7; stroke-linecap:round; }
.fc-tile .tick{
  position:absolute; right:-7px; bottom:-7px; width:28px; height:28px; border-radius:50%;
  background:#1E9E6A; border:3px solid #fff; display:grid; place-items:center;
  box-shadow:0 6px 14px -6px rgba(0,60,30,.9);
}
.fc-tile .tick svg{ width:14px; height:14px; stroke:#fff; stroke-width:3.2; fill:none; stroke-linecap:round; }
.fc-tile.sm{ width:60px; height:60px; border-radius:18px; }
.fc-tile.sm img{ width:30px; height:30px; border-radius:8px; }

/* glass chips */
.fc-chip{
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.11));
  border:1px solid rgba(255,255,255,.42); border-radius:18px; padding:15px 19px; color:#fff;
  box-shadow:0 18px 34px -24px rgba(120,24,0,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.fc-chip b{ display:block; font-family:var(--display); font-size:17.5px; font-weight:800; letter-spacing:-0.018em; }
.fc-chip span{ display:block; margin-top:5px; font-size:14px; font-weight:500; color:rgba(255,255,255,.86); }

/* row / column helpers */
.fc-row{ display:flex; align-items:center; gap:0; }
.fc-col{ display:grid; gap:11px; min-width:0; }
.fc-wire{ height:1px; flex:0 0 34px; background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.9)); }
.fc-wire.rev{ background:linear-gradient(90deg,rgba(255,200,150,.95),rgba(255,200,150,.25)); }

/* card 1: the file, chip bleeding off the right edge */
.fc-file{ display:flex; align-items:center; margin-right:-30px; }
.fc-file .fc-chip{ flex:1; }

/* card 2: hub and spokes */
.fc-orbit{ position:relative; height:206px; }
.fc-orbit svg.spokes{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.fc-orbit .hub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; }
.fc-orbit .sat{ position:absolute; z-index:1; }
.fc-orbit .sat.a{ left:2%;  top:4%; }
.fc-orbit .sat.b{ right:4%; top:0; }
.fc-orbit .sat.c{ left:0;   bottom:2%; }
.fc-orbit .sat.d{ right:2%; bottom:6%; }
.fc-orbit .more{
  position:absolute; right:-10px; top:50%; transform:translateY(-50%);
  font-size:13.5px; font-weight:700; color:rgba(255,255,255,.92);
}

/* card 3: the week strip */
.fc-week{ display:flex; gap:8px; }
.fc-day{
  flex:1; text-align:center; border-radius:10px; padding:7px 0 8px;
  border:1px solid rgba(255,255,255,.32); color:rgba(255,255,255,.74); font-size:12px; font-weight:700;
}
.fc-day.on{
  background:#fff; color:#D8360D; border-color:#fff;
  box-shadow:0 14px 26px -14px rgba(120,24,0,.7);
}

/* card 4: the cap meter */
.fc-meter{ margin:0; }
.fc-meter .bar{
  height:10px; border-radius:999px; background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.38); overflow:hidden;
}
.fc-meter .bar i{
  display:block; height:100%; width:34%;
  background:linear-gradient(90deg,#FFF1DC,#FFD9A0);
}
.fc-meter .lab{
  display:flex; justify-content:space-between; margin-top:8px;
  font-size:12.5px; color:rgba(255,255,255,.85); font-weight:600;
}
.fc-body{ padding:28px 30px 32px; }
.fc-body h3{ margin-bottom:9px; font-size:24px; font-weight:800; letter-spacing:-0.024em; }
.fc-body p{ color:var(--muted); font-size:17.5px; max-width:none; margin:0; }

/* the rotating statement */
.statement{ padding:96px 0 88px; text-align:center; }
@media (max-width:920px){ .statement{ padding:64px 0 60px; } }
.statement-h{
  max-width:none; margin:0 auto;
  font-size:clamp(32px,5.2vw,60px); line-height:1.08; letter-spacing:-0.05em;
  color:var(--espresso);
}
/* The gradient lives on each word, not on the line: background-clip:text
   only clips to an element's OWN text, and the line's text sits in child
   spans. Each word is given the full-line gradient, offset by its own
   position, so the ramp still reads as one continuous sweep. */
.rotator{
  display:inline-block; min-height:1.1em;
  background-image:linear-gradient(96deg,#FF8A2B 0%,#FF6A1F 34%,#F53D5A 68%,#C4460B 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rotator .w{
  display:inline-block; white-space:pre; will-change:filter,opacity,transform;
  background-image:linear-gradient(96deg,#FF8A2B 0%,#FF6A1F 34%,#F53D5A 68%,#C4460B 100%); background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rotator .w.in{ animation:wordIn .52s cubic-bezier(.22,.68,.28,1) both; }
.rotator .w.out{ animation:wordOut .34s ease-in both; }
@keyframes wordIn{
  from{ opacity:0; filter:blur(11px); transform:translateY(7px); }
  to{ opacity:1; filter:blur(0); transform:none; }
}
@keyframes wordOut{
  from{ opacity:1; filter:blur(0); }
  to{ opacity:0; filter:blur(9px); }
}
.statement-cta{ margin-top:46px; display:flex; justify-content:center; }
@media (prefers-reduced-motion: reduce){
  .rotator .w.in, .rotator .w.out{ animation:none; opacity:1; filter:none; transform:none; }
}

/* --- ChatGPT vs Bob --- */
.versus{ border-top:1px solid var(--line-2); }
.vrow{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.35fr);
  gap:24px; align-items:baseline;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.vrow.vhead{ padding:14px 0; border-bottom:1px solid var(--line-2); }
.vhead span{
  font-family:var(--display); font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
}
.vjob{ font-family:var(--display); font-weight:800; font-size:20.5px; letter-spacing:-0.02em; }
.vthem{ color:var(--muted-2); font-size:18.5px; }
.vbob{ color:var(--espresso); font-size:18.5px; font-weight:500; }
.vbob b{ font-weight:700; }
@media (max-width:820px){
  .vrow{ grid-template-columns:1fr; gap:6px; }
  .vrow.vhead{ display:none; }
  .vthem::before{ content:"ChatGPT: "; font-weight:600; }
  .vbob::before{ content:"Bob: "; font-weight:700; color:var(--orange-deep); }
}

/* ============================================================
   PRICING
   ============================================================ */
/* Every card shares one row track set, so the price, the control, the
   button and the list line up straight across even though the Flex card
   carries a slider the other two do not. Falls back to a plain column
   where subgrid is missing. */
.plans{
  display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:22px;
  grid-template-rows:auto auto auto;
}
@media (max-width:1000px){ .plans{ grid-template-columns:1fr; } }
.plan{
  background:var(--surface); border:1px solid var(--line); border-radius:26px;
  padding:32px 30px 34px;
  display:grid; grid-row:span 3; grid-template-rows:subgrid; gap:0;
  box-shadow:0 1px 2px rgba(23,17,12,.03), 0 26px 60px -46px rgba(23,17,12,.45);
}
.plan-lead{ border-color:rgba(255,106,31,.35); box-shadow:0 1px 2px rgba(23,17,12,.03), 0 30px 70px -44px rgba(196,70,11,.55); }
.plan-name{
  display:block;
  font-family:var(--display); font-weight:800; font-size:27px;
  letter-spacing:-0.028em; line-height:1.1; color:var(--espresso);
}
.plan-sub{ color:var(--muted); font-size:16.5px; margin:9px 0 0; max-width:32ch; }
.plan-top{ margin-bottom:26px; }
.plan-price{ display:flex; align-items:baseline; gap:6px; }
.plan-price b{
  font-family:var(--display); font-weight:900; letter-spacing:-0.045em;
  font-size:clamp(44px,4.4vw,60px); line-height:1; color:var(--espresso);
  font-variant-numeric:tabular-nums;
}
.plan-price span{ color:var(--muted-2); font-size:19px; font-weight:600; }
.plan-vol{ color:var(--muted); font-size:16.5px; margin:10px 0 0; }
.plan-vol b{ color:var(--espresso); font-weight:700; }
.plan-note{ color:var(--muted); font-size:15.5px; line-height:1.55; margin:16px 0 0; max-width:38ch; }
.plan-head{ align-self:start; }
@supports not (grid-template-rows: subgrid){
  .plans{ grid-template-rows:none; align-items:stretch; }
  .plan{ display:flex; flex-direction:column; }
  .plan-list{ margin-top:auto; }
}
.plan-cta{ margin-top:26px; width:100%; align-self:start; }
.plan-control{ margin-top:0; }
.plan-list{ margin-top:26px; padding-top:24px; border-top:1px solid var(--line); align-content:start; }
.plan > .plan-list{ margin-bottom:0; }
.plan-list li{ font-size:16px; color:var(--muted); }
.plan-list li::before{ top:.58em; }

.slider-wrap{ display:block; margin-top:22px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:8px;
  border-radius:999px; background:var(--cream-dim);
  border:1px solid var(--line-2); outline:none; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--grad-accent); border:3px solid #fff; cursor:grab;
  box-shadow:0 4px 14px -4px rgba(196,70,11,.7);
}
input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:#FF6A1F; border:3px solid #fff; cursor:grab;
  box-shadow:0 4px 14px -4px rgba(196,70,11,.7);
}
input[type="range"]:focus-visible{ outline:2px solid var(--orange); outline-offset:4px; }
.slider-ends{
  display:flex; justify-content:space-between; margin-top:10px;
  font-size:13.5px; font-weight:600; color:var(--muted-2);
}

.faq{ max-width:820px; }
.faq details{ border-bottom:1px solid var(--line-2); }
.faq p{ color:var(--muted); font-size:17px; line-height:1.65; padding:0 0 20px; max-width:66ch; }
.faq p b{ color:var(--espresso); font-weight:600; }

/* ============================================================
   BLOG AND GUIDES
   ============================================================ */
.article-meta{
  color:var(--muted-2); font-size:15.5px; margin:-6px 0 0;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.takeaways{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 28px; margin:0 0 40px;
  box-shadow:0 1px 2px rgba(23,17,12,.03), 0 18px 44px -34px rgba(23,17,12,.4);
}
.takeaways p, .takeaways li{ color:var(--muted); font-size:17px; line-height:1.62; }
.takeaways > p{ margin:0; }
.takeaways strong{ color:var(--espresso); font-weight:700; }
.takeaways ul{ margin:10px 0 0 20px; display:grid; gap:8px; }
.prose blockquote{ font-style:normal; }
.prose blockquote p{ margin:0; }
.prose ol{ margin:0 0 18px 22px; display:grid; gap:9px; }
.prose h2:first-child{ margin-top:0; }
.prose > h3 + p{ margin-top:0; }
/* The article column keeps the page gutter, so its first character lines
   up with the headline above it. Capping .wrap itself would re-centre the
   box and push the text inward. */
.article-body > *{ max-width:800px; }
.article-body > h2{ max-width:22ch; }
.updated{ color:var(--muted-2); font-size:15.5px; margin:-6px 0 34px; }
.note{ color:var(--muted); font-size:15.5px; background:var(--cream-dim); border-radius:var(--r-sm); padding:16px 18px; margin:0 0 22px; }
.foot-links{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-bottom:10px; }
.contact{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:24px 26px; margin:0 0 26px; box-shadow:0 1px 2px rgba(23,17,12,.03), 0 18px 44px -34px rgba(23,17,12,.4); }

/* A single illustrated card, canvas beside the copy rather than above it.
   Used on the connection guides, where one scene carries the whole page. */
.fc-solo{ margin:0 0 44px; }
.fc-solo .fc-card{ display:grid; grid-template-columns:1.15fr 1fr; grid-template-rows:none; }
.fc-solo .fc-canvas{ height:auto; min-height:290px; }
.fc-solo .fc-body{ align-self:center; }
@media (max-width:820px){
  .fc-solo .fc-card{ grid-template-columns:1fr; }
  .fc-solo .fc-canvas{ min-height:260px; }
}

/* .prose sets a muted colour on every p and li, which outranks the card's
   own rules by specificity. Re-assert the card's palette inside prose. */
.prose .fc-say{
  color:#fff; font-family:var(--display); font-weight:900;
  font-size:clamp(23px,2.1vw,29px); line-height:1.08; letter-spacing:-0.035em;
}
.prose .fc-chip b, .prose .fc-chip span, .prose .fc-day, .prose .fc-meter .lab{ color:#fff; }
.prose .fc-chip span{ color:rgba(255,255,255,.86); font-size:14px; }
.prose .fc-body p{ color:var(--muted); font-size:17.5px; }
.prose .fc-body h3{ margin-top:0; }
.prose .rcpt-note{ color:#ABABAD; font-size:14.5px; }
.prose .rcpt-note b{ color:#F8F8F8; }
.prose .rcpt .val{ color:#D1D2D3; }
.prose .rcpt-wrap{ margin:0 0 40px; }
.prose .panel{ margin:0 0 40px; }
.prose figure{ margin:0 0 40px; }
.prose figcaption{ color:var(--muted-2); font-size:14.5px; margin-top:12px; max-width:60ch; }

/* ============================================================
   BLOG INDEX
   ============================================================ */
.blog-hero{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:12px 0 12px; }
@media (max-width:960px){ .blog-hero{ grid-template-columns:1fr; gap:32px; } }
.blog-hero h1{ font-size:clamp(36px,4.6vw,58px); max-width:16ch; }
.post-list{ display:grid; gap:20px; margin-top:64px; }
.post-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:28px 30px 30px;
  box-shadow:0 1px 2px rgba(23,17,12,.03), 0 18px 44px -36px rgba(23,17,12,.4);
  transition:transform .16s ease, box-shadow .16s ease;
}
.post-card:hover{ transform:translateY(-2px); box-shadow:0 1px 2px rgba(23,17,12,.03), 0 26px 56px -36px rgba(23,17,12,.5); }
.post-date{
  font-family:var(--display); font-size:12.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted-2);
}
.post-card h2{
  font-size:25px; line-height:1.2; letter-spacing:-0.025em; margin:10px 0 10px; max-width:30ch;
}
.post-card h2 a{ color:var(--espresso); text-decoration:none; }
.post-card h2 a:hover{ color:var(--orange-deep); }
.post-card p{ color:var(--muted); font-size:17px; max-width:72ch; margin:0 0 14px; }
.read-more{
  font-family:var(--display); font-weight:700; font-size:15.5px;
  color:var(--orange-deep); text-decoration:none;
}
.read-more:hover{ text-decoration:underline; }
@media (min-width:900px){
  .post-list{ grid-template-columns:1fr 1fr; }
}


/* ============================================================
   PAGE-SPECIFIC ADDITIONS
   Written per page, merged here so every page loads one stylesheet.
   ============================================================ */

/* ---- from site-additions/integrations.css ---- */
/* integrations/index.html additions — prefix int- to avoid collisions
   (see DESIGN.md .vrow trap). Search-result tiles must NOT reuse the
   bare .tile class: .stack already owns .tile for the app-wall marquee. */

/* ---------- hero stat row ---------- */
.int-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2); border-radius:20px;
  overflow:hidden; margin-top:34px;
}
.int-stat{ background:var(--surface); padding:22px 24px; }
.int-stat b{
  display:block; font-family:var(--display); font-weight:900; letter-spacing:-0.03em;
  font-size:clamp(26px,2.6vw,34px); color:var(--espresso); margin-bottom:4px;
}
.int-stat span{ color:var(--muted); font-size:14.5px; }
@media (max-width:700px){ .int-stats{ grid-template-columns:1fr; } }

/* ---------- sticky search controls ---------- */
.int-controls{
  position:sticky; top:68px; z-index:55;
  background:rgba(255,248,240,.94); backdrop-filter:saturate(1.6) blur(14px);
  padding:22px 0 16px; border-bottom:1px solid var(--line);
}
.int-search-wrap{ position:relative; max-width:520px; }
.int-search-wrap svg{ position:absolute; left:17px; top:50%; transform:translateY(-50%); opacity:.42; pointer-events:none; }
.int-search{
  width:100%; height:52px; border-radius:999px; border:1px solid var(--line-2);
  background:var(--surface); padding:0 20px 0 46px; font-family:var(--font);
  font-size:15.5px; color:var(--espresso);
}
.int-search::placeholder{ color:var(--muted-2); }
.int-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.int-chip{
  border:1px solid var(--line-2); background:var(--surface); color:var(--espresso);
  border-radius:999px; padding:8px 15px; font-size:13.5px; font-weight:600; cursor:pointer;
  font-family:var(--font); white-space:nowrap;
  transition:background-color .12s, border-color .12s, color .12s;
}
.int-chip:hover{ background:rgba(23,17,12,.05); }
.int-chip.int-chip-active{ background:var(--espresso); color:#fff; border-color:var(--espresso); }
.int-chip.int-chip-oneclick.int-chip-active{ background:var(--ok); border-color:var(--ok); }
.int-result-meta{ color:var(--muted); font-size:14px; margin:18px 0 4px; }

/* ---------- result grid ---------- */
.int-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:14px; padding-bottom:6px; }
.int-tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px; display:flex; flex-direction:column; gap:10px; min-height:150px;
  box-shadow:0 1px 2px rgba(23,17,12,.03), 0 14px 34px -26px rgba(23,17,12,.30);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.int-tile:hover{ transform:translateY(-2px); border-color:rgba(255,106,31,.32); }
.int-tile-head{ display:flex; align-items:center; gap:12px; }
.int-tile-logo{
  width:40px; height:40px; border-radius:10px; object-fit:contain;
  background:var(--cream-dim); border:1px solid var(--line); flex:none;
}
.int-tile-logo.int-ph{ display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--orange-deep); font-size:18px; font-family:var(--display); }
.int-tile h3{ font-size:16px; margin:0; }
.int-desc{
  color:var(--muted); font-size:13.5px; line-height:1.5; flex:1; margin:0; max-width:none;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.int-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:auto; }
.int-pill{ font-size:11.5px; font-weight:700; letter-spacing:.02em; padding:4px 9px; border-radius:999px; }
.int-pill-oneclick{ background:rgba(30,158,106,.12); color:#137a51; }
.int-pill-setup{ background:var(--cream-dim); color:var(--muted); }
.int-pill-tools{ background:rgba(23,17,12,.05); color:var(--muted); }
.int-empty{ display:none; color:var(--muted); padding:40px 0; font-size:15px; }
.int-more-wrap{ text-align:center; padding:8px 0 10px; }
@media (prefers-reduced-motion:reduce){ .int-tile{ transition:none; } .int-tile:hover{ transform:none; } }

/* ---- from site-additions/security.css ---- */
/* ============================================================
   security/index.html — page-specific additions.
   Every class here is prefixed sec- so it cannot collide with
   another component. To be merged into site.css.
   ============================================================ */

/* Small monospace "last updated" line under the hero lede. */
.sec-updated{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;
  margin-top:14px;
}

/* Tighter, smaller follow-up line under a table (the scope-reading
   note, the "questions about this page" line). */
.sec-note-line{
  font-size:14.5px;
  max-width:66ch;
  margin-top:14px;
}

/* Compliance table status colours. */
.sec-status-ok{ color:var(--ok); font-weight:700; }
.sec-status-progress{ color:var(--muted); font-weight:700; }

/* ---- from site-additions/talk.css ---- */
/* talk/index.html additions — prefix talk- to avoid collisions (see DESIGN.md .vrow trap) */

.talk-offer{
  color:var(--muted); font-size:17px; line-height:1.6; max-width:56ch; margin-top:10px;
}
.talk-offer b{ color:var(--espresso); font-weight:700; }

.talk-email-line{
  font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:15px;
  background:var(--cream-dim); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; display:inline-block; margin-top:4px;
}
.talk-email-line a{ color:var(--orange-deep); text-decoration:none; }

.talk-closer-email{ color:#fff; text-decoration:underline; }

/* ---- from site-additions/viktor.css ---- */
/* vs/viktor/index.html — page-scoped additions only.
   Every class here is prefixed vk- so it cannot collide with a shared
   component. Do not redefine .vrow/.vhead/.vjob/.vthem/.vbob here — they
   belong to the shared .versus component in site.css. This file only
   scopes overrides onto them via a wrapper class, which wins on
   specificity without touching the shared rule. */

/* The shared .versus component's mobile view injects "ChatGPT: " / "Bob: "
   prefixes, because its only other use on the site is a chatbot
   comparison. This page compares Bob to Viktor, so the label needs to say
   Viktor instead. Scoped to this page's wrapper only. */
@media (max-width:820px){
  .vk-versus .vthem::before{ content:"Viktor: "; }
}

/* Marks the rows where Bob is the clear differentiator, the same signal
   the old inline table used with a green highlight. */
.vk-versus .vbob.vk-win{ color:var(--ok); font-weight:700; }

/* The directory heading and its controls are one unit; the section's own
   bottom padding plus the lede's margin was opening a 160px void. */
.directory{ padding-bottom:0; }
.directory-head .section-lede{ margin-bottom:0; }

/* ---- from site-additions/dust.css ---- */
/* vs/dust/index.html — page-scoped additions only.
   Every class here is prefixed dst- so it cannot collide with a shared
   component. Do not redefine .vrow/.vhead/.vjob/.vthem/.vbob here — they
   belong to the shared .versus component in site.css. This file only
   scopes overrides onto them via a wrapper class, which wins on
   specificity without touching the shared rule. */

/* The shared .versus component's mobile view injects "ChatGPT: " / "Bob: "
   prefixes, because its only other use on the site is a chatbot
   comparison. This page compares Bob to Dust, so the label needs to say
   Dust instead. Scoped to this page's wrapper only. */
@media (max-width:820px){
  .dst-versus .vthem::before{ content:"Dust: "; }
}

/* Marks the rows where Bob is the clear differentiator, the same signal
   the vk-win rule uses on the Viktor page. */
.dst-versus .vbob.dst-win{ color:var(--ok); font-weight:700; }

/* Unlike the Viktor page, this comparison has a few rows where Dust is
   the stronger, verified option (webhook filtering, agents-as-tools,
   compliance certifications). Same treatment, applied to the Dust column
   instead, so the page can concede honestly without inventing a new
   visual language. */
.dst-versus .vthem.dst-win{ color:var(--ok); font-weight:700; }

/* ---- from site-additions/tasklet.css ---- */
/* vs/tasklet/index.html — page-scoped additions only.
   Every class here is prefixed tk- so it cannot collide with a shared
   component. Do not redefine .vrow/.vhead/.vjob/.vthem/.vbob here — they
   belong to the shared .versus component in site.css. This file only
   scopes overrides onto them via a wrapper class, which wins on
   specificity without touching the shared rule. */

/* The shared .versus component's mobile view injects "ChatGPT: " / "Bob: "
   prefixes, because its only other use on the site is a chatbot
   comparison. This page compares Bob to Tasklet, so the label needs to say
   Tasklet instead. Scoped to this page's wrapper only. */
@media (max-width:820px){
  .tk-versus .vthem::before{ content:"Tasklet: "; }
}

/* Marks the rows where Bob is the clear differentiator, the same signal
   the viktor page uses with a green highlight. */
.tk-versus .vbob.tk-win{ color:var(--ok); font-weight:700; }

/* ---- from site-additions/coworker.css ---- */
/* vs/coworker/index.html — page-scoped additions only.
   Every class here is prefixed cw- so it cannot collide with a shared
   component. Do not redefine .vrow/.vhead/.vjob/.vthem/.vbob here — they
   belong to the shared .versus component in site.css. This file only
   scopes overrides onto them via a wrapper class, which wins on
   specificity without touching the shared rule.

   Per project convention (see the tasklet/viktor/dust blocks already
   merged into site.css), this file is NOT linked from the page. Its rules
   are meant to be folded into site.css by hand the same way the earlier
   comparison pages' additions were. */

/* The shared .versus component's mobile view injects "ChatGPT: " / "Bob: "
   prefixes, because its only other use on the site is a chatbot
   comparison. This page compares Bob to Coworker, so the label needs to
   say Coworker instead. Scoped to this page's wrapper only. */
@media (max-width:820px){
  .cw-versus .vthem::before{ content:"Coworker: "; }
}

/* Marks the rows where Bob is the clear differentiator, the same signal
   the viktor and dust pages use with a green highlight. */
.cw-versus .vbob.cw-win{ color:var(--ok); font-weight:700; }

/* This comparison has one row, memory, where Coworker's Organizational
   Memory is the stronger, verified option. Same treatment, applied to the
   Coworker column instead, so the page can concede honestly without
   inventing a new visual language. */
.cw-versus .vthem.cw-win{ color:var(--ok); font-weight:700; }

/* ---- from site-additions/ema.css ---- */
/* vs/ema/index.html — page-scoped additions only.
   Every class here is prefixed em- so it cannot collide with a shared
   component. Do not redefine .vrow/.vhead/.vjob/.vthem/.vbob here — they
   belong to the shared .versus component in site.css. This file only
   scopes overrides onto them via a wrapper class, which wins on
   specificity without touching the shared rule.

   Not linked from vs/ema/index.html. Follows the same pattern as
   site-additions/dust.css and site-additions/viktor.css, which were
   later folded into site.css by hand; this file is meant to be folded in
   the same way. */

/* The shared .versus component's mobile view injects "ChatGPT: " / "Bob: "
   prefixes, because its only other use on the site is a chatbot
   comparison. This page compares Bob to Ema, so the label needs to say
   Ema instead. Scoped to this page's wrapper only. */
@media (max-width:820px){
  .em-versus .vthem::before{ content:"Ema: "; }
}

/* Marks the rows where Bob is the clear differentiator, the same signal
   the dst-win/vk-win rules use on the Dust and Viktor pages. */
.em-versus .vbob.em-win{ color:var(--ok); font-weight:700; }

/* Ema is ahead on two rows (compliance certifications, VPC/on-prem
   deployment). Same treatment, applied to the Ema column instead, so the
   page can concede honestly without inventing a new visual language. */
.em-versus .vthem.em-win{ color:var(--ok); font-weight:700; }

/* ---- from site-additions/junior.css ---- */
/* vs/junior/index.html — page-scoped additions only.
   Every class here is prefixed jr- so it cannot collide with a shared
   component. Do not redefine .vrow/.vhead/.vjob/.vthem/.vbob here — they
   belong to the shared .versus component in site.css. This file only
   scopes overrides onto them via a wrapper class, which wins on
   specificity without touching the shared rule.

   This file is NOT linked from vs/junior/index.html. It exists so the
   page-scoped rules are ready to be merged into site.css later, the same
   way site-additions/tasklet.css, viktor.css and dust.css were merged in.
   Until that merge happens, the jr- prefixed classes below have no
   effect and the page renders with the shared .versus defaults. */

/* The shared .versus component's mobile view injects "ChatGPT: " / "Bob: "
   prefixes, because its only other use on the site is a chatbot
   comparison. This page compares Bob to Junior, so the label needs to say
   Junior instead. Scoped to this page's wrapper only. */
@media (max-width:820px){
  .jr-versus .vthem::before{ content:"Junior: "; }
}

/* Marks the rows where Bob is the clear differentiator, the same signal
   the viktor and tasklet pages use with a green highlight. */
.jr-versus .vbob.jr-win{ color:var(--ok); font-weight:700; }

/* This comparison has a couple of rows where Junior matches or is ahead
   (pre-built roles, proactive idle-time work). Same treatment, applied to
   the Junior column instead, so the page can concede honestly without
   inventing a new visual language. */
.jr-versus .vthem.jr-win{ color:var(--ok); font-weight:700; }