/* MOTR — the one stylesheet. Every page links this; never inline it again. */
/* ══ TYPE ═════════════════════════════════════════════════════════════════
   Two variable faces, self-hosted, OFL 1.1 — licence + provenance in fonts/LICENSE.md.
   font-display:swap so text is readable immediately and never invisible while a face loads. */
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-latin-var.woff2") format("woff2-variations"),
      url("fonts/archivo-latin-var.woff2") format("woff2");
  font-weight:400 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/jetbrainsmono-latin-var.woff2") format("woff2-variations"),
      url("fonts/jetbrainsmono-latin-var.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

:root{
  /* THE SURFACE LADDER. Five steps, not one flat black. Every panel sits a rung above what it
     sits on, and a hairline catches the light at its top edge — that separation is what reads as
     depth. A single tone reads as an unlit room, which is what "too dark" actually meant. */
  --ink:#0c0e11;         /* the base — the stage, lifted off near-black */
  --pan:#13161b;         /* a panel resting on it */
  --s2:#1a1e25;          /* raised: a card on a panel */
  --s3:#232830;          /* a control, or a hovered card */
  --line:#262b33;
  --hair:rgba(255,255,255,.065);   /* the top-edge specular every raised thing gets */
  --pa:#f2f4f7;
  --soft:#98a1ac;
  --hi:#ff6a1a;          /* one accent. It only ever marks a break, or the ask. */
  --ok:#46c98a;
  --maxw:1240px;
}
@media(min-width:1600px){:root{--maxw:1400px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
[id]{scroll-margin-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html{margin:0;background:var(--ink)}
/* ── the field ───────────────────────────────────────────────────────────
   Four layers, bottom to top: the base colour, a 64px measuring grid in both axes at 3.5% white,
   and a radial wash of the base colour over the top that fades the grid out toward the edges and
   the foot of the viewport. Fixed attachment, so it reads as a surface the page moves across
   rather than wallpaper that scrolls with it. */
body{margin:0;color:var(--pa);
 background:
   radial-gradient(125% 85% at 50% 0%, rgba(12,14,17,0) 0%, rgba(12,14,17,.55) 42%, var(--ink) 78%),
   linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
   linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
   var(--ink);
 background-size: 100% 100%, 64px 64px, 64px 64px, 100% 100%;
 background-attachment: fixed, fixed, fixed, fixed}
/* the grid is a texture, not a feature — it disappears entirely if a visitor has asked for less */
@media (prefers-contrast:more){
  body{background:var(--ink)}
}
body{font:16px/1.6 "Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,
 Arial,sans-serif;overflow-wrap:break-word;font-synthesis:none}
.w{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(20px,4.5vw,46px)}
.mono{font-family:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace;font-size:11px;letter-spacing:.19em;
 text-transform:uppercase;color:var(--soft)}
.cond{font-stretch:76%;font-weight:800;letter-spacing:-.012em;line-height:.98;
 word-spacing:.06em}

/* ══ nav ══ */
nav{position:fixed;top:0;left:0;right:0;z-index:60;
 background:linear-gradient(180deg,rgba(12,14,17,.9),rgba(12,14,17,0));
 transition:background-color .3s}
nav.solid{background:rgba(12,14,17,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav .in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:16px}
.brand{font-stretch:76%;font-weight:800;letter-spacing:-.012em;font-size:19px;
 text-decoration:none;color:var(--pa);line-height:1}
.brand i{font-style:normal;color:var(--hi)}
nav .r{display:flex;gap:clamp(14px,2.4vw,28px);align-items:center}
nav a.l{color:var(--soft);text-decoration:none;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;
 font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;transition:color .2s}
nav a.l:hover,nav a.l:focus-visible{color:var(--pa);outline:none}
@media(max-width:700px){nav .hideS{display:none}}

/* ══ hero ══ */
/* the hero holds up with no footage — phones, save-data and reduced-motion never load it */
.hero{--heroTop:min(88svh,830px);background:
  radial-gradient(90% 70% at 50% 8%,rgba(255,106,26,.10),rgba(255,106,26,0) 60%),
  radial-gradient(70% 55% at 18% 92%,rgba(110,140,190,.10),rgba(110,140,190,0) 64%),
  linear-gradient(180deg,#14181e,#0c0e11 72%);
 position:relative;min-height:var(--heroTop);display:grid;place-items:center;
 text-align:center;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 filter:contrast(1.04) saturate(.72) brightness(.84);transform:scale(1.04)}
.hero .veil{position:absolute;inset:0;background:
 radial-gradient(56% 48% at 50% 45%,rgba(12,14,17,.66) 0%,rgba(12,14,17,.30) 58%,rgba(12,14,17,0) 100%),
 linear-gradient(180deg,rgba(12,14,17,.58) 0%,rgba(12,14,17,.08) 30%,rgba(12,14,17,.12) 56%,
                        rgba(12,14,17,.86) 90%,#0c0e11 100%)}
.hero .in{position:relative;z-index:2;width:100%;max-width:940px;margin-inline:auto;
 padding-block:clamp(76px,9vh,110px) clamp(60px,8vh,96px)}
.hero .mono{color:#e6e9ee;opacity:.92;font-weight:600;
 text-shadow:0 1px 18px rgba(12,14,17,.9),0 0 3px rgba(12,14,17,.6)}
.hero h1{font-size:clamp(46px,9.6vw,132px);margin:16px 0 0;text-wrap:balance;line-height:.855;
 font-stretch:62%;letter-spacing:-.034em;
 text-shadow:0 2px 40px rgba(12,14,17,.55)}
.hero h1 .b{display:block;color:var(--hi)}
.hero .sub{color:#c6ccd4;max-width:60ch;margin:22px auto 0;font-size:clamp(15.5px,1.5vw,18.5px);
 line-height:1.55;text-shadow:0 1px 24px rgba(12,14,17,.6)}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
 margin-top:clamp(28px,4vh,40px)}
.btn{display:inline-block;text-decoration:none;font-weight:650;font-size:14.5px;padding:13px 24px;
 border-radius:2px;border:0;cursor:pointer;font-family:inherit;background:var(--pa);color:#0a0b0d;
 transition:filter .2s}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:none;color:var(--pa);border:1px solid #2c3138}
.btn.ghost:hover{border-color:#4a515b}
.btn.hi{background:var(--hi);color:#1a0c00}

/* ══ the hero phone ══════════════════════════════════════════════════════
   Built to the spec captured from family.co + linear.app. The rules that matter here:
   density over size, crop the object, layer the surfaces, light it from one place.
   Full spec + why: Workspace/Todo/Active-Job--9cfd7100…md */

/* the scene crops the device — a fully visible centred object reads as an icon */
.phone-scene{position:relative;width:min(322px,80vw);height:min(470px,52vh);
 overflow:hidden;isolation:isolate}
/* light source: one ambient lift behind the device, so the base is not flat black */
.scene-glow{position:absolute;inset:-20% -30% 8%;
 background:radial-gradient(58% 46% at 52% 42%,rgba(120,140,170,.16),rgba(120,140,170,0) 70%),
            radial-gradient(40% 30% at 50% 78%,rgba(255,106,26,.14),rgba(255,106,26,0) 72%)}
/* the counter it sits on: three tones + a hairline, not one grey block */
.counter{position:absolute;left:-32%;right:-32%;bottom:0;height:30%;
 background:linear-gradient(180deg,#232830 0%,#161a20 14%,#0e1116 62%,#0b0d11 100%)}
.counter::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
 background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.16) 45%,rgba(255,255,255,0))}

/* the device. The rail is the tell — a titanium edge catches light on two sides and goes
   dark on the others; a single flat border is what makes a drawn phone look drawn. */
.phone{position:absolute;left:50%;top:30px;width:286px;
 transform:translateX(-50%) rotate(-2.4deg);border-radius:46px;padding:3px;
 background:linear-gradient(152deg,#767f8b 0%,#39414a 12%,#1d2127 34%,#171b20 62%,#4a525c 88%,#232830 100%);
 box-shadow:
   0 1px 0 rgba(255,255,255,.10) inset,      /* the rail's top specular */
   0 2px 6px rgba(0,0,0,.55),                /* contact shadow, tight */
   0 26px 44px rgba(0,0,0,.62),              /* ambient, wide */
   0 60px 90px rgba(0,0,0,.45)}
.phone::after{content:"";position:absolute;right:-2px;top:118px;width:2.5px;height:52px;
 border-radius:2px;background:linear-gradient(180deg,#6b737e,#333a42)}
.phone::before{content:"";position:absolute;left:-2px;top:104px;width:2.5px;height:86px;
 border-radius:2px;background:linear-gradient(180deg,#5f6772,#2c333b)}

.screen{position:relative;border-radius:43px;overflow:hidden;height:566px;
 background:#07090c;display:flex;flex-direction:column}
.island{position:absolute;left:50%;top:9px;transform:translateX(-50%);
 width:86px;height:25px;border-radius:99px;background:#000;z-index:3}

/* status bar — small, correct, and present. Its absence is what reads as "mockup". */
.sbar{display:flex;justify-content:space-between;align-items:center;
 padding:15px 24px 0;font-size:12.5px;font-weight:650;color:#eef0f2;letter-spacing:.01em}
.sicons{display:flex;align-items:center;gap:5px;color:#eef0f2}
.sicons svg{height:11px;width:auto;fill:currentColor}
.sicons .bat{height:12px}

.app{flex:1;display:flex;flex-direction:column;min-height:0;padding-top:12px}
.apphead{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
 padding:0 17px 9px;font-size:12px;color:#ff6a1a}
.ah-t{font-size:26px;font-weight:750;color:#f2f4f6;letter-spacing:-.02em;justify-self:center}
.ah-r{justify-self:end;font-size:17px}
/* the segmented control — iOS's own raised-pill treatment, layered off the screen */
.seg{margin:2px 17px 0;padding:2px;display:grid;grid-template-columns:1fr 1fr;
 background:#1a1d22;border-radius:9px;font-size:12.5px;font-weight:600;color:#9aa2ac}
.seg span{padding:5px 0;text-align:center;border-radius:7px;transition:.3s}
.seg .on{background:#3a4049;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.5)}
.daylab{margin:13px 17px 3px;font-size:10.5px;font-weight:600;letter-spacing:.06em;
 text-transform:uppercase;color:#7e8691}

/* the rows. Density lives here: icon, name, subtitle, time, info — five pieces per row,
   at 11–13px, hairline-separated, edge to edge under the status bar. */
.calls{list-style:none;margin:0;padding:0}
.calls li{display:grid;grid-template-columns:16px 1fr auto auto;gap:9px;align-items:center;
 padding:9px 17px;border-top:.5px solid #191d22;
 animation:rowin .42s cubic-bezier(.2,.9,.25,1) both}
.calls li:first-child{border-top:0}
.ci{width:13px;height:13px;color:#ff453a;justify-self:center}
.ci svg{width:100%;height:100%;fill:currentColor;display:block}
.cn{min-width:0;display:flex;flex-direction:column;gap:1px}
.cn b{font-size:14px;font-weight:600;color:#ff453a;letter-spacing:-.01em;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn span{font-size:11px;color:#79818c}
.ct{font-size:12px;color:#79818c;white-space:nowrap}
.cinfo{width:15px;height:15px;border-radius:99px;border:1.2px solid #4b535d;color:#8e96a1;
 font-size:10px;font-weight:700;display:grid;place-items:center}
/* answered state — the same rows, telling a different story */
.calls.ok .ci{color:#30d158}
.calls.ok .cn b{color:#eef0f2}
.calls.ok .cn span{color:#30d158}
.tag{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
 color:#0a0c0e;background:#30d158;border-radius:4px;padding:2px 5px;white-space:nowrap}
@keyframes rowin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* the control. One switch, and it is the whole argument: his phone today, his phone with me. */
.hero-vis{display:grid;justify-items:center;min-width:0}
.flip{margin-top:20px;display:flex;align-items:center;gap:13px;flex-wrap:wrap;max-width:322px}
.flip-btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
 background:#14181d;border:1px solid #2b313a;border-radius:99px;padding:7px 16px 7px 7px;
 color:var(--pa);font:inherit;font-size:13.5px;font-weight:650;transition:.25s}
.flip-btn:hover{border-color:#454e59;background:#181d23}
.flip-btn .knob{width:34px;height:19px;border-radius:99px;background:#333a44;position:relative;
 transition:background .3s}
.flip-btn .knob::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;
 border-radius:99px;background:#e8ebee;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.flip-btn[aria-pressed=true] .knob{background:#30d158}
.flip-btn[aria-pressed=true] .knob::after{transform:translateX(15px)}
.flip-cap{margin:0;font-size:12.5px;color:var(--soft);flex:1;min-width:150px}

@media(max-width:899px){
  .phone-scene{height:min(470px,58vh);width:min(300px,84vw)}
  .phone{width:262px;top:24px}
  .screen{height:520px}
  .flip{justify-self:start}
}
@media (prefers-reduced-motion:reduce){ .calls li{animation:none} }

/* ══ sections ══ */
section{position:relative;padding-block:clamp(54px,7.4vh,98px);border-top:1px solid var(--line);
 background:transparent}
/* a hairline of light on each section's top edge — the same trick that separates Linear's panels,
   applied at page scale so the sections read as stacked planes rather than one continuous void */
section::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
 background:linear-gradient(90deg,rgba(255,255,255,0),var(--hair) 22%,var(--hair) 78%,rgba(255,255,255,0));
 pointer-events:none}
h2{font-size:clamp(28px,4.6vw,60px);margin:14px 0 0;max-width:17ch;text-wrap:balance}
.lede{color:#aab1bb;max-width:58ch;margin:20px 0 0;font-size:clamp(16px,1.55vw,18.5px)}

/* ══ the line ══ */
.rig{margin-top:clamp(34px,6vh,60px)}
.track{position:relative;overflow-x:auto;overflow-y:hidden;padding-bottom:6px}
.stations{display:grid;align-items:stretch;gap:10px;grid-template-columns:repeat(6,minmax(0,1fr));min-width:760px;
 margin-top:14px}
.st{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.st .box{display:block;height:100%;border:1px solid var(--line);border-radius:3px;background:var(--pan);
 padding:13px 13px 15px;transition:border-color .22s,opacity .35s,background-color .22s}
.st b{display:block;font-stretch:76%;font-weight:800;letter-spacing:-.008em;font-size:16px}
.st .k{display:block;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:10px;letter-spacing:.15em;
 text-transform:uppercase;color:var(--soft);margin-bottom:7px}
.st.big .box{background:linear-gradient(180deg,#141a1f,var(--pan));border-color:#2b323a}
.st.big b{font-size:19px}
.st[aria-pressed=true] .box{border-color:var(--hi);background:rgba(255,106,26,.07)}
.st[aria-pressed=true] .k{color:var(--hi)}
.st.dim .box{opacity:.34}
.readout{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;justify-content:space-between;
 margin-top:clamp(26px,4vh,40px);padding-top:22px;border-top:1px solid var(--line)}
.readout .n{font-stretch:76%;font-weight:800;letter-spacing:-.012em;line-height:1;
 font-size:clamp(34px,5.4vw,60px);margin:0}
.readout .n small{display:block;font-stretch:100%;font-weight:500;font-size:11px;
 letter-spacing:.19em;text-transform:uppercase;color:var(--soft);margin-bottom:10px;
 font-family:"JetBrains Mono",ui-monospace,Consolas,monospace}
.readout .say{color:#aab1bb;font-size:14.5px;max-width:46ch;margin:0}
.readout .say b{color:var(--pa)}
.fence{margin-top:18px;color:var(--soft);font-size:12.5px;max-width:64ch}

/* ══ the reveal ══ */
.second{display:grid;gap:clamp(24px,4vw,54px);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.second{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}}
.second .big{font-stretch:76%;font-weight:800;letter-spacing:-.012em;line-height:1;
 font-size:clamp(40px,7vw,88px);margin:0}
.second p{color:#aab1bb;max-width:46ch}

footer{border-top:1px solid var(--line);padding-block:34px 52px;color:var(--soft);font-size:13px}
footer .in{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:baseline}
footer .ph{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;letter-spacing:.15em;text-transform:uppercase;
 font-size:10.5px}

/* ══ THE RECORD — a ledger, not a highlight reel ═══════════════════════════
   Built as a grid rather than a <table> so it can re-flow to stacked cards on a phone without a
   horizontal scroll, which is where data tables usually fail on mobile. */
@media(min-width:900px){
}
.fence{margin-top:20px;color:var(--soft);font-size:13px;max-width:66ch}
.fence b{color:#b7bec7}

/* ══ THE PERFORMANCE SYSTEM — stages, not a service list ══════════════════ */
.stages{display:grid;gap:clamp(14px,2vw,20px);margin-top:clamp(28px,4.5vh,46px);
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
.stage{background:var(--pan);border:1px solid var(--line);border-radius:4px;
 padding:clamp(20px,2.6vw,26px);height:100%;display:flex;flex-direction:column}
.stage.on{border-color:#333a43;background:linear-gradient(180deg,#141920,var(--pan))}
.sg-k{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:10.5px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--soft);margin:0}
.stage.on .sg-k{color:var(--hi)}
.stage h3{font-size:clamp(21px,2.4vw,27px);margin:9px 0 0}
.sg-p{color:#a7aeb8;font-size:14.5px;margin:13px 0 0}
.sg-p b{color:var(--pa)}
.sg-l{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.sg-l li{position:relative;padding-left:18px;color:#a7aeb8;font-size:14px;line-height:1.5}
.sg-l li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--soft)}
.sg-f{margin:auto 0 0;padding-top:18px;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:11px;
 letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.sg-f b{color:var(--pa);font-weight:600}

/* ══ THE WORK ══════════════════════════════════════════════════════════════ */
.tiles{display:grid;align-items:start;gap:clamp(12px,1.8vw,18px);margin-top:clamp(28px,4.5vh,46px);
 grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tile{display:block;text-decoration:none;color:inherit;background:var(--pan);
 border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:border-color .22s}
.client{margin-top:clamp(40px,6vh,70px);padding-top:clamp(30px,4.5vh,48px);
 border-top:1px solid var(--line)}
.client h3{font-size:clamp(26px,3.6vw,42px);margin:12px 0 0}
.ln{color:var(--hi);text-decoration:none;border-bottom:1px solid rgba(255,106,26,.45)}

/* ══ PRICING ══════════════════════════════════════════════════════════════ */
.prices{display:grid;gap:clamp(14px,2vw,20px);margin-top:clamp(28px,4.5vh,46px);
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start}
.pr{background:var(--pan);border:1px solid var(--line);border-radius:4px;padding:22px 22px 26px;display:flex;flex-direction:column}
.pr.best{border-color:var(--hi);background:linear-gradient(180deg,rgba(255,106,26,.07),var(--pan))}
.pr-k{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:10.5px;letter-spacing:.15em;
 text-transform:uppercase;color:var(--hi);margin:0 0 8px}
.pr-n{font-size:15px;font-weight:650;margin:0;color:#b7bec7}
.pr-v{font-stretch:76%;font-weight:800;letter-spacing:-.012em;font-size:clamp(34px,4.6vw,50px);
 line-height:1;margin:11px 0 0}
.pr-v span{font-size:14px;font-weight:500;letter-spacing:0;color:var(--soft);font-stretch:100%}
.pr-d{color:#a7aeb8;font-size:14px;margin:13px 0 0}

/* ══ WHO ══════════════════════════════════════════════════════════════════ */
.who{display:grid;gap:clamp(24px,4vw,50px);grid-template-columns:minmax(0,1fr);
 margin-top:clamp(26px,4vh,42px);align-items:start}
@media(min-width:900px){.who{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.who p{color:#a7aeb8;max-width:50ch}
.who-cta{background:var(--pan);border:1px solid var(--line);border-radius:4px;
 padding:clamp(20px,2.8vw,30px)}
.wc-h{font-size:clamp(21px,2.6vw,30px);margin:0;letter-spacing:-.03em}
.wc-p{font-size:14.5px;margin:14px 0 22px !important;max-width:44ch}

/* ── the line, rotated for a phone ────────────────────────────────────────
   Under 760px the horizontal SVG is retired and the route runs DOWN the left margin with the
   stations hanging off it — same mechanism, native to the axis you actually scroll. A sideways
   strip inside a vertical page is the thing this is here to avoid. */
@media(max-width:899px){
  .track{overflow:visible}
  .stations{grid-template-columns:minmax(0,1fr);min-width:0;gap:0;
   position:relative;padding-left:30px;margin-top:6px}
  /* the spine */
  .stations::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;width:2px;
   background:#22262c}
  .stations::after{content:"";position:absolute;left:8px;top:14px;width:2px;background:var(--pa);
   height:var(--reach,100%);transition:height .8s cubic-bezier(.2,.8,.2,1),background-color .3s}
  .stations.broken::after{background:var(--hi)}
  .st{position:relative;padding-block:9px}
  /* the node on the spine */
  .st::before{content:"";position:absolute;left:-26px;top:26px;width:10px;height:10px;
   border-radius:99px;background:var(--ink);border:2px solid #2c313a;transition:border-color .25s}
  .st[aria-pressed=true]::before{border-color:var(--hi);background:var(--hi)}
  .st .box{padding:14px 15px 16px}
  .st.big .box{padding:17px 16px 19px}
}

/* the position, standing on its own — not an explanation of the headline */
.second-shop{font-size:clamp(16.5px,1.75vw,19.5px);margin:22px 0 0;line-height:1.5;
 color:var(--pa);font-weight:600;max-width:44ch;padding-top:18px;
 border-top:1px solid var(--line)}
.hero .sub{margin-top:14px}
/* the stakes line under each station name */
.st .need{display:block;color:#c3cad3;font-size:13px;margin-top:4px;font-weight:500}
.st.big .need{font-size:14px}

/* ── the ladder, applied ─────────────────────────────────────────────────
   Everything that used to be a flat panel on a flat page now sits a rung up with a lit top edge.
   This is the whole of the "too dark" fix: not a brighter background, but visible separation. */
.pr,.tile,.st .box,.stage{position:relative}
/* an ambient lift behind the two heaviest visuals, so they sit in light rather than on black */
#line,#work{isolation:isolate}
#line::after,#work::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 40% at 50% 30%,rgba(120,140,175,.09),rgba(120,140,175,0) 72%)}

/* ── the station micro-visuals ───────────────────────────────────────────
   One vocabulary, six pictures. Every card is the same height so the row stays a row, and the
   whole thing is drawn with divs — no images, no icons to load, sharp at any density. */
.vwrap{display:block;margin-top:12px}
.v{height:74px;border-radius:8px;border:1px solid var(--line);background:var(--ink);
 padding:9px 10px;display:flex;flex-direction:column;justify-content:center;gap:5px;overflow:hidden}
.vrow{display:flex;align-items:center;gap:6px}
.vrow.sub{padding-left:13px}
.vbar{height:5px;border-radius:99px;background:#2b323b;flex:0 0 auto}
.vbar.w70{width:70%}.vbar.w66{width:66%}.vbar.w62{width:62%}.vbar.w60{width:60%}
.vbar.w54{width:54%}.vbar.w52{width:52%}.vbar.w48{width:48%}.vbar.w44{width:44%}
.vbar.w40{width:40%}.vbar.w38{width:38%}
.vbar.lit{background:#5c6672}
.vbar.ghost{background:#1c2128}
.vnote{margin:1px 0 0;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
 color:#6e7681;font-weight:600}
.vnote.lit{color:var(--ok);text-transform:none;letter-spacing:0;font-size:10.5px}
/* the pack: you are the pin, lit or gone */
.vpin{width:13px;height:13px;border-radius:3px;font-size:8.5px;font-weight:800;color:#0c0e11;
 background:var(--hi);display:grid;place-items:center;flex:0 0 auto}
.vpin.n{background:#2b323b;color:#8b939d}
.vrow.gone .vpin{background:#1c2128}
.vrow.gone .vbar{background:#1c2128}
.vst{width:16px;height:4px;border-radius:99px;background:#2b323b;margin-left:auto;flex:0 0 auto}
.vrow.you .vbar{background:#6b7683}
/* reviews */
.vstars{display:flex;gap:2.5px}
.vstars i{width:7px;height:7px;background:var(--hi);
 clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.vdot{width:9px;height:9px;border-radius:99px;background:#3b434e;flex:0 0 auto}
.vdot.you{background:var(--hi)}
.vdot.gone{background:#1c2128}
.vtick{font-size:9px;color:var(--ok);flex:0 0 auto}
/* the thread */
.v-msg{gap:6px}
.bub{border-radius:9px;padding:7px 9px;display:flex;align-items:center;gap:7px;width:max-content;
 max-width:92%}
/* fixed widths inside the bubbles — a % width against a max-content parent collapses */
.bub .vbar{width:62px;flex:0 0 auto}
.bub.out .vbar{width:46px}
.bub.in{background:#20262e}
.bub.out{background:#2f3a46;align-self:flex-end}
.bub.out em{font-size:9px;font-style:normal;color:var(--ok);font-weight:700}
.bub.out.empty{background:transparent;border:1px dashed #2b323b;align-self:flex-end}
.bub.out.empty .vnote{margin:0}
/* the quote */
.v-quote{align-items:flex-start;justify-content:center;gap:2px}
.vprice{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--pa);line-height:1}
.vprice.off{font-size:13px;font-weight:600;color:#6e7681;letter-spacing:0}
.vsub{font-size:10px;color:#7b838e}
/* the week */
.vweek{display:flex;gap:4px}
.vday{flex:1;height:26px;border-radius:5px;background:#1c2128;display:grid;place-items:center;
 font-size:9px;font-weight:700;color:#5f6873}
.vday.on{background:var(--hi);color:#0c0e11}
.vwhen{font-size:9px;font-style:normal;color:#7b838e;margin-left:auto}
.varr{color:var(--ok);font-size:11px;margin-left:auto}

/* the line reads as an instrument once it has stops on it */

/* the section head is now two columns: the argument on the left, the live scoreboard on the right.
   Below 900 it stacks, and the scoreboard sits under the sentence it answers. */
.linehead{display:grid;gap:clamp(22px,3.4vw,54px);align-items:start;margin-top:22px}
@media(min-width:900px){.linehead{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.linehead .lede{margin-top:0}
.linehead .readout{display:block;padding:18px 20px 20px;border-radius:12px;
 background:var(--pan);border:1px solid var(--line);position:relative}
.linehead .readout::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
 border-radius:inherit;
 background:linear-gradient(90deg,rgba(255,255,255,0),var(--hair) 30%,var(--hair) 70%,rgba(255,255,255,0))}
.linehead .n{margin:0}
.linehead .say{margin:12px 0 0;max-width:46ch}

/* ── the movement cell ───────────────────────────────────────────────────
   The ledger's job is to show travel. Two words in two columns spelled it; this draws it. */
/* a row with nothing measured yet says so, and is not dressed up as movement */
/* the ladder: five stops, the old position hollow, the new one lit */
.ladder::before{content:"";position:absolute;left:3px;right:3px;top:50%;height:1px;
 background:#2b323b}
.ladder .pip{display:block;width:7px;height:7px;border-radius:99px;background:#3a424d;
 flex:0 0 auto;position:relative}
.ladder .pip.from{background:#0c0e11;box-shadow:inset 0 0 0 2px #8c95a0}
.ladder .pip.to{background:var(--hi);box-shadow:0 0 0 3px rgba(255,106,26,.16)}
.ladder .pip.off{margin-left:2px;opacity:.75}
/* the provenance card — the reason to believe the rows, sitting beside them rather than after */

/* ── the coverage map ────────────────────────────────────────────────────
   Six steps across, three stage bars beneath. This is the section's whole argument in one
   object, which is why each card no longer has to spell its coverage out in words. */

/* the same six pips on each card, so the map and the cards speak one language */
.sg-f{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.sgpips{display:flex;gap:4px}
.sgpips .p{display:block;width:100%;min-width:14px;height:5px;border-radius:99px;background:#232830}
.sgpips .p.on{background:#6e7a88}
.stage.on .sgpips .p.on{background:var(--hi)}
.sg-f em{font-style:normal;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:10px;
 letter-spacing:.13em;text-transform:uppercase;color:var(--soft)}
@media(max-width:640px){
}

/* ── the work tiles answer the pointer ───────────────────────────────────
   Eight sites that all move when you use them, sitting in a grid that did not move at all. */
.tile{transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .32s,box-shadow .32s}
@media (prefers-reduced-motion:reduce){
}

/* the label that turns a diagram into information */
.vlab{display:block;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:9px;
 letter-spacing:.15em;text-transform:uppercase;color:#7b838e;margin:0 0 6px}
.st[aria-pressed=true] .vlab{color:var(--hi)}
/* the affordance, where the hand already is rather than in a sentence off to the side */
.taphint{margin:clamp(20px,3vh,30px) 0 10px;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:10px;
 letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}

/* two-up variant of the stage grid, for the differentiation pair */
@media(min-width:820px){.stages.two{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the plans carry their own detail now that the System section is gone */
.pr-l{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.pr-l li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.5;color:#b7bec7}
.pr-l li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:1.5px;
 background:#4d5763;border-radius:2px}
.pr-f{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin:20px 0 0;margin-top:auto;
 padding-top:16px;border-top:1px solid var(--line)}
.pr-f em{font-style:normal;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;
 font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--soft)}
.pr.best .sgpips .p.on{background:var(--hi)}

/* the proof story, so the table lands on a reader who knows the situation */

/* how-it-works cards have no pip strip, so their footer is a plain note */
#how .sg-f{border-top:1px solid var(--line);padding-top:16px;margin-top:auto}


/* ══ THE BENTO ═══════════════════════════════════════════════════════════
   Five tiles, not eight. Steve: "you still cant really tell what it is without reading the entire
   box." The reason was structural — four of the eight were the SAME thing (answering, pricing,
   booking, winning back are one automated sequence cut into four boxes), so the page asked you to
   decode four times what it should have said once.

   They are now one object: a chain with a job running along it and the elapsed time under each
   station. The shape carries the meaning, so no box needs reading — three moments inside a minute,
   the fourth six months later with nobody remembering to do it.

   Scenes are still authored at true size and scaled to contain, so nothing clips. */
.bento{display:grid;gap:10px;margin-top:clamp(28px,4.5vh,46px);
 grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(230px,auto)}
/* Below the desktop grid: ONE column. Of the five tiles only the phone is naturally narrow, so a
   second column has nothing to fill it - two columns produced half-width tiles with holes beside
   them. Definite heights because several scenes size from their content and one of them (the night
   photo, height:100% against an auto-height parent) balloons to 977px without one. */
@media(max-width:899px){
  .bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .bt-site{min-height:440px}
  .bt-night{height:400px}
  .bt-email{min-height:430px}
}
@media(min-width:640px) and (max-width:899px){
  .bt-site{min-height:470px}
  .bt-night{height:430px}
}
@media(min-width:900px){
  .bento{grid-template-columns:repeat(4,minmax(0,1fr));
   grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 338px;
   grid-template-rows:229px 229px 372px 340px;
   grid-template-areas:
     "site  site  site  found"
     "site  site  site  found"
     "night night email email"
     "ads   ads   ads   ads"}
  .bt-ads{grid-area:ads}
  .bt-site{grid-area:site}     .bt-found{grid-area:found}
  .bt-night{grid-area:night}   .bt-email{grid-area:email}
}
.bt{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--line);
 background:var(--pan);padding:17px 19px 0;display:flex;flex-direction:column;
 transition:border-color .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
.bt::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
 background:radial-gradient(120% 90% at 85% 110%,rgba(255,106,26,.12),rgba(255,106,26,0) 60%)}
.bt-found::before,.bt-email::before{background:radial-gradient(120% 90% at 15% 110%,rgba(110,140,190,.11),rgba(110,140,190,0) 60%)}
.bt:hover{border-color:#3d4550;transform:translateY(-2px)}
.bt h3{position:relative;z-index:3;margin:0;font-size:14.5px;font-weight:650;letter-spacing:-.01em;
 color:var(--pa);line-height:1.3;max-width:34ch}
.bt-site h3,.bt-found h3,.bt-night h3{font-size:16px}

.b-v{position:relative;z-index:1;flex:1;min-height:0;margin-top:13px;
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 -webkit-font-smoothing:antialiased}
.b-fr{position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);
 transform:translate(-50%,-50%) scale(var(--k,1));transform-origin:50% 50%}
.b-pane{position:absolute;border-radius:12px;overflow:hidden;
 box-shadow:0 22px 44px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3)}
.b-i{width:1em;height:1em;fill:currentColor;flex:0 0 auto}
.b-av{display:grid;place-items:center;width:30px;height:30px;border-radius:99px;flex:0 0 auto;
 background:#5b6470;color:#fff;font-size:11px;font-weight:700;font-style:normal}
.b-av.sm{width:26px;height:26px;font-size:10px;background:#3f6fd8}
.b-pill{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:5px 11px;
 font-size:12px;font-weight:600;background:#eef1f5;color:#3c4652}
.b-pill.green{background:#e4f6ec;color:#1a7f4b}
.b-pill .b-i{width:12px;height:12px}
.b-star{width:11px;height:11px;fill:#fbbc04}

/* ── 1 · A LAPTOP, AND A REAL CAR IN IT ──────────────────────────────
   Steve: "maybe a laptop ... because we already have a phone in use", and the site inside it should
   be "a cinematic or at least a really nice shot of a car". Both fair — three phones across five
   tiles was where the sameness started, and a screenshot of a type-heavy page is accurate but
   nothing to look at. */
.b-lap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center}
.b-lid{width:100%;flex:1;min-height:0;background:#1b1e23;border-radius:16px 16px 6px 6px;
 padding:13px 13px 15px;box-shadow:0 34px 70px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.09)}
.b-scrn{width:100%;height:100%;border-radius:7px;overflow:hidden;background:#0d0f12;
 display:flex;flex-direction:column;position:relative;container-type:inline-size}
.b-base{width:112%;height:19px;flex:0 0 auto;border-radius:0 0 13px 13px;position:relative;
 background:linear-gradient(180deg,#2a2e35,#15181c 62%,#0f1216);
 box-shadow:0 16px 30px rgba(0,0,0,.55)}
.b-notch{position:absolute;left:50%;top:0;transform:translateX(-50%);width:96px;height:6px;
 border-radius:0 0 7px 7px;background:#0b0d10}

/* the site inside it */
.b-sbar{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
 gap:clamp(8px,2.3cqw,20px);padding:clamp(9px,1.7cqw,15px) clamp(11px,2.9cqw,26px);min-width:0;background:rgba(10,12,15,.55);position:absolute;left:0;right:0;top:0;z-index:2;
 backdrop-filter:blur(6px)}
.b-brand{font-size:clamp(8.5px,1.45cqw,13px);font-weight:700;letter-spacing:.14em;color:#fff;
 flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the nav is what gives way when the bar runs out of room — same as a real site header. It is
   never clipped: below a 420px screen it is dropped whole, further down. */
.b-snav{display:flex;gap:clamp(9px,2.5cqw,22px);flex:0 1 auto;white-space:nowrap}
.b-snav i{font-style:normal;font-size:clamp(8px,1.34cqw,12px);color:rgba(255,255,255,.72)}
.b-scta{font-size:clamp(8px,1.34cqw,12px);font-weight:650;color:#fff;
 border:1px solid rgba(255,255,255,.34);white-space:nowrap;flex:0 0 auto;
 border-radius:99px;padding:clamp(3px,.67cqw,6px) clamp(8px,1.67cqw,15px)}

/* A real site header drops its nav on a narrow screen rather than shrinking it to nothing. Below
   a 420px laptop screen there is only room for who you are and how to ring you — which is also
   the honest answer to what matters on that header. */
@container (max-width:420px){
  .b-snav{display:none}
}
.b-shero{position:relative;flex:1;min-height:0}
.b-shero img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.b-sgrad{position:absolute;inset:0;background:
 linear-gradient(180deg,rgba(8,10,13,.62) 0%,rgba(8,10,13,.12) 34%,rgba(8,10,13,.86) 100%)}
.b-scopy{position:absolute;left:30px;right:30px;bottom:28px;z-index:2}
.b-skick{margin:0 0 9px;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:10.5px;
 letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.76)}
.b-sh1{margin:0;font-family:"Archivo",system-ui,sans-serif;font-stretch:76%;font-weight:800;
 font-size:44px;line-height:.98;letter-spacing:-.02em;color:#fff;
 text-shadow:0 2px 30px rgba(0,0,0,.5)}
.b-ssub{margin:12px 0 0;max-width:46ch;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.b-sbtn{display:inline-block;margin-top:16px;background:#ff6a1a;color:#fff;font-size:13px;
 font-weight:650;border-radius:6px;padding:11px 22px}

/* ── 2 · FOUND IN ALL FOUR PLACES ─────────────────────────────────────
   Being found is not one thing. An assistant's answer, the map pack, the blue link and the paid
   spot are four different doors, and RL's own rule is that a pack-only reading of "are we found"
   is an incomplete one. The phone rotates through all four. */
.b-gphone{inset:0;background:#fff;border-radius:26px;border:8px solid #16181c;
 display:flex;flex-direction:column;overflow:hidden}
.b-surf{flex:1;min-height:0;overflow:hidden}
.b-track{display:flex;width:400%;height:100%;transition:transform .72s cubic-bezier(.65,0,.25,1)}
.b-scr{width:25%;height:100%;flex:0 0 auto;display:flex;flex-direction:column;overflow:hidden}
.b-surfbar{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:11px 15px 13px;
 border-top:1px solid #ececf0}
.b-sdot{width:6px;height:6px;border-radius:99px;background:#d6dade;transition:background .3s}
.b-sdot.on{background:#ff6a1a;width:16px}
.b-surfbar b{margin-left:auto;font-size:11.5px;color:#8b939d;font-weight:600}

/* the assistant's answer */
.b-aihead{display:flex;align-items:center;gap:8px;padding:14px 16px 12px;border-bottom:1px solid #ececf0;
 font-size:13px;font-weight:600;color:#16181c}
.b-aimk{width:18px;height:18px;border-radius:99px;background:#10a37f;flex:0 0 auto}
.b-aibody{flex:1;min-height:0;padding:14px 16px;display:flex;flex-direction:column;gap:12px;
 overflow:hidden}
.b-aiq{margin:0;align-self:flex-end;max-width:82%;background:#f1f3f5;border-radius:14px;
 padding:9px 13px;font-size:13px;color:#16181c;line-height:1.35}
.b-aia p{margin:0 0 9px;font-size:13px;line-height:1.5;color:#2c3238}
.b-aia b{font-weight:700;color:#16181c}
.b-aib{color:#4a525a !important;font-size:12.5px !important}
.b-aisrc{display:inline-block;font-size:11px;color:#5f6b7a;background:#f1f3f5;border-radius:99px;
 padding:4px 10px}

/* the map pack and the blue link share Google's chrome */
.b-glogowrap{display:grid;place-items:center;padding:20px 0 16px}
.b-glogowrap.sm{padding:16px 0 13px}
.b-glogo{width:104px;height:auto}
.b-glogowrap.sm .b-glogo{width:82px}
.b-gsearch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 14px;
 border:1px solid #dfe1e5;border-radius:99px;padding:10px 16px;font-size:13.5px;color:#3c4043;
 box-shadow:0 1px 4px rgba(32,33,36,.12)}
.b-mic{width:17px;height:17px;flex:0 0 auto}
.b-gtabs{display:flex;gap:18px;margin:13px 16px 0;font-size:12.5px;color:#5f6368;
 border-bottom:1px solid #ebecf0;padding-bottom:9px;flex:0 0 auto}
.b-gtabs b{color:#1a73e8;font-weight:500;box-shadow:0 9px 0 -7px #1a73e8}
.b-gmap{position:relative;height:132px;margin:13px 14px 0;border-radius:9px;flex:0 0 auto;
 background:linear-gradient(150deg,#e8eef2,#dde6ec);
 background-image:linear-gradient(150deg,#e8eef2,#dde6ec),
  repeating-linear-gradient(58deg,rgba(255,255,255,.9) 0 2px,transparent 2px 26px),
  repeating-linear-gradient(-32deg,rgba(255,255,255,.9) 0 2px,transparent 2px 34px)}
.b-pin{position:absolute;width:11px;height:11px;border-radius:99px 99px 99px 2px;
 transform:rotate(-45deg);background:#9aa4ae}
.b-pin.on{background:#ea4335;width:15px;height:15px;left:44%;top:32%;
 box-shadow:0 0 0 4px rgba(234,67,53,.2)}
.b-pin.a{left:22%;top:60%}.b-pin.b{left:71%;top:22%}
.b-gres{display:flex;gap:12px;justify-content:space-between;padding:14px 15px;
 border-bottom:1px solid #f1f2f4}
.b-gres.on{background:#f8fbff}
.b-gname{margin:0;font-size:15px;color:#1a0dab;line-height:1.25}
.b-gname.sm{height:11px;width:58%;border-radius:99px;background:#e6e8eb}
.b-grate{margin:4px 0 0;display:flex;align-items:center;gap:3px;font-size:12px;color:#70757a}
.b-grate b{color:#3c4043;font-weight:400;margin-right:2px}
.b-star{width:11px;height:11px;fill:#fbbc04}
.b-gmeta{margin:4px 0 0;font-size:12.5px;color:#70757a}
.b-gopen{margin:3px 0 0;font-size:12.5px;color:#70757a}
.b-gopen b{color:#1e8e3e;font-weight:400}
.b-gthumb{width:62px;height:62px;border-radius:8px;flex:0 0 auto;object-fit:cover}
.b-gthumb.mute{background:#eceef1}
.b-gline{height:9px;border-radius:99px;background:#eceef1;margin:7px 0 0;width:74%}
.b-gline.s{width:46%;height:7px}

/* the blue link, and the paid spot above it */
.b-blue{padding:15px 16px;border-bottom:1px solid #f4f5f7}
.b-burl{margin:0;font-size:12px;color:#202124}
.b-burl span{color:#5f6368}
.b-btitle{margin:3px 0 0;font-size:15.5px;color:#1a0dab;line-height:1.3}
.b-bdesc{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:#4d5156}
.b-adtag{margin:0 0 4px}
.b-adtag b{font-size:11.5px;font-weight:700;color:#202124}
.b-blue.ad{background:#fffaf6;box-shadow:inset 3px 0 0 #ff6a1a}
.b-sitelinks{margin:9px 0 0;display:flex;gap:14px}
.b-sitelinks span{font-size:12px;color:#1a0dab}
.b-burl.mute{height:10px;width:44%;border-radius:99px;background:#eceef1}
.b-btitle.mute{height:13px;width:76%;border-radius:99px;background:#e2e5ea;margin-top:6px}
.b-bdesc.mute{height:8px;width:92%;border-radius:99px;background:#eceef1;margin-top:7px}
.b-bdesc.mute.s{width:64%}

/* ── 3 · THE THREAD, HAPPENING ───────────────────────────────────────
   Steve: "we can build it so its like the process is happening in real time." Messages land one at
   a time behind a typing indicator and the clock beside them lands with the message it belongs to.
   Everything is visible at rest — if the sequence never runs, the whole conversation is simply
   there, which is the rule I broke once already on this section. */
.b-live{left:0;top:0;width:340px;bottom:0;background:#fff;border-radius:26px;
 border:8px solid #16181c;display:flex;flex-direction:column;overflow:hidden}
.b-lhd{display:flex;align-items:center;gap:9px;padding:8px 14px 11px;border-bottom:1px solid #ececf0;
 font-size:13.5px;font-weight:600;color:#16181c;flex:0 0 auto}
.b-lthread{flex:1;min-height:0;padding:12px 12px 8px;display:flex;flex-direction:column;gap:7px;
 justify-content:flex-end;overflow:hidden}
.b-lday{margin:0 auto 2px;font-size:10.5px;color:#8e8e93}
.b-m{max-width:86%;border-radius:17px;padding:9px 13px;font-size:12.5px;line-height:1.36}
.b-m.in{background:#e9e9eb;color:#16181c;align-self:flex-start;border-bottom-left-radius:5px}
.b-m.out{background:#007aff;color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.b-m.auto em{display:block;margin-top:6px;font-style:normal;font-size:9.5px;font-weight:700;
 letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.b-lgap{margin:5px auto;font-size:10.5px;font-weight:700;color:#ff6a1a;letter-spacing:.04em}
.b-lthread.live .b-m,.b-lthread.live .b-lgap{opacity:0;transform:translateY(8px)}
.b-lthread.live .b-m.on,.b-lthread.live .b-lgap.on{opacity:1;transform:none;
 transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.b-typing{align-self:flex-start;display:none;gap:4px;background:#e9e9eb;border-radius:17px;
 padding:11px 14px}
.b-typing.on{display:flex}
.b-typing i{width:6px;height:6px;border-radius:99px;background:#9aa0a6;
 animation:tdot 1.1s ease-in-out infinite}
.b-typing i:nth-child(2){animation-delay:.15s}.b-typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.b-ticks{position:absolute;right:0;top:0;bottom:0;width:200px;display:flex;flex-direction:column;
 justify-content:center;gap:22px}
.b-tk{margin:0;opacity:.28;transition:opacity .4s ease}
.b-tk.on{opacity:1}
.b-tk b{display:block;font-family:"Archivo",system-ui,sans-serif;font-stretch:76%;font-weight:800;
 font-size:26px;letter-spacing:-.015em;line-height:1;color:var(--pa)}
.b-tk span{display:block;margin-top:4px;font-size:12px;color:#8b939d;line-height:1.35}
.b-tk.hot b{color:var(--hi)}

/* ── 4 · THE SCREEN THE SHOP RUNS ON ─────────────────────────────────
   Steve picked the internal board over another quote widget, and asked for the schedule, the quotes
   that went out and the follow-ups chasing themselves. "Only your shop has this" is obvious when it
   is plainly the shop's own software. */
.b-ops{inset:0;background:#fff;display:flex;flex-direction:column}
.b-ophd{display:flex;justify-content:space-between;align-items:center;padding:15px 17px 13px;
 border-bottom:1px solid #ececf0;flex:0 0 auto}
.b-ophd b{display:block;font-size:16px;color:#16181c}
.b-ophd span{display:block;font-size:12px;color:#8b939d;margin-top:1px}
.b-bays{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#eef0f3;flex:0 0 auto}
.b-bay{background:#fff;padding:11px 12px;display:flex;flex-direction:column;gap:7px}
.b-bayt{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#9aa2ac}
.b-job{border-radius:8px;padding:8px 10px;font-size:11.5px;line-height:1.35;color:#5f6b7a;
 background:#f4f5f7;border-left:3px solid #cdd3da}
.b-job b{display:block;font-weight:650;color:#16181c;font-size:12px;margin-bottom:1px}
.b-job.now{background:#fff4ec;border-left-color:#ff6a1a}
.b-job.done{background:#eefaf3;border-left-color:#34a853}
.b-job.done b{color:#5f6b7a}
.b-quotes{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 17px 14px}
.b-qhd{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 10px;
 border-bottom:1px solid #ececf0;flex:0 0 auto}
.b-qhd b{font-size:13.5px;color:#16181c}
.b-qhd span{font-size:11.5px;color:#9aa2ac}
.b-qr{display:grid;grid-template-columns:minmax(0,1fr) 54px 96px auto;gap:12px;align-items:center;
 flex:1 1 0;min-height:0;border-bottom:1px solid #f4f5f7}
.b-qn{font-size:12.5px;color:#16181c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-qr u{text-decoration:none;text-align:right;font-size:12.5px;color:#5f6b7a;
 font-variant-numeric:tabular-nums}
.b-qr em{font-style:normal;font-size:11.5px;color:#8b939d}
.b-qr em.won{color:#1a7f4b;font-weight:600}
.b-qr:last-child{border-bottom:0}

/* ── 5 · the report ──────────────────────────────────────────────────── */
.b-rep{inset:0;background:#fff;padding:17px 20px 20px;display:flex;flex-direction:column}
.b-rhead{display:flex;justify-content:space-between;align-items:center;padding-bottom:11px;
 border-bottom:1px solid #ececf0;flex:0 0 auto}
.b-rhead b{display:block;font-size:16px;color:#16181c}
.b-rhead span{display:block;font-size:12px;color:#8b939d;margin-top:1px}
.b-rbody{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:30px;margin-top:13px;
 flex:1;min-height:0}
.b-rtable{display:flex;flex-direction:column;min-height:0}
.b-rrow{display:grid;grid-template-columns:minmax(0,1fr) 64px 64px;gap:14px;align-items:center;
 padding:5px 0;border-bottom:1px solid #f2f3f5;flex:1 1 0;min-height:0}
.b-rrow span{font-size:13px;color:#3c4652}
.b-rrow u{text-decoration:none;text-align:right;font-size:13px;color:#a8afb8;
 font-variant-numeric:tabular-nums}
.b-rrow b{text-align:right;font-size:16px;font-weight:700;color:#16181c;
 font-variant-numeric:tabular-nums}
.b-rrow.head span,.b-rrow.head u,.b-rrow.head b{font-size:10.5px;font-weight:600;letter-spacing:.06em;
 text-transform:uppercase;color:#9aa2ac}
.b-rchart{position:relative;padding-top:4px}
.b-rgrid{position:absolute;inset:0 0 26px;display:grid;grid-template-rows:repeat(4,1fr)}
.b-rgrid i{border-top:1px solid #f0f2f4}
.b-rbars{position:relative;display:flex;align-items:flex-end;gap:14px;height:100%;padding-bottom:26px}
.b-rbars i{position:relative;flex:1;height:var(--h);border-radius:5px 5px 0 0;background:#dfe3e8}
.b-rbars i.up{background:linear-gradient(180deg,#ff6a1a,#e0530c)}
.b-rbars em{position:absolute;left:0;right:0;bottom:-22px;text-align:center;font-style:normal;
 font-size:10.5px;color:#a8afb8}

@media(max-width:899px){
  .bt h3{font-size:13.5px}
  .b-mob{display:none}
  .b-chain{grid-template-columns:repeat(2,1fr);gap:14px 12px;align-content:center}
  .b-link{display:none}
  .b-when{margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.bt{transition:none}.bt:hover{transform:none}}

/* ══ END THE BENTO ═════════════════════════════════════════════════════
   Every block I own is delimited at BOTH ends. Four times this session a replacement sliced
   from a block's opening comment to the next block's opening comment and deleted whatever
   lived in between. Bounded by its own end, a cut cannot overshoot. */

/* ── the mark: MOTR, unfolding ───────────────────────────────────────────
   Steve's idea, and it beats both of my earlier ones. The mark reads MOTR at all times — four
   letters, the actual name — and a word unrolls out of its letter only while you are inside that
   letter's section, then rolls back before the next one opens.

   Four words standing there permanently stopped being a wordmark and became a glossary. Four bare
   letters were a wordmark that never said anything. This is both, one at a time.

   Mechanism: vertical-rl puts the INLINE axis top-to-bottom, so a word's length is its HEIGHT —
   which means max-height on an inline-block tail makes the word physically unroll out of the letter
   rather than fade in beside it. */
.motrmark{position:fixed;left:clamp(12px,1.6vw,30px);top:50%;transform:translateY(-50%);z-index:1;
 display:grid;gap:clamp(16px,2vh,26px);pointer-events:none;user-select:none;
 font-family:"JetBrains Mono",ui-monospace,Consolas,monospace}
.motrmark span{display:block;writing-mode:vertical-rl;transform:rotate(180deg);
 font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
 color:var(--pa);opacity:.32;white-space:nowrap;
 transition:opacity .45s ease,color .45s ease,letter-spacing .45s ease}
.motrmark b{font-weight:700}
.motrmark i{display:inline-block;font-style:normal;max-height:0;overflow:hidden;opacity:0;
 transform:translateY(-8px);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.motrmark span.on{opacity:1;color:var(--hi);letter-spacing:.26em}
.motrmark span.on i{max-height:none;opacity:1;transform:none}
@media(max-width:1099px){.motrmark{display:none}}
@media(prefers-reduced-motion:reduce){
  .motrmark span,.motrmark i{transition:none}
}

/* the footer says what the letters stand for — once, at the bottom, never as the explainer */
.fwords{font-size:13px;color:var(--soft)}
.fwords b{color:var(--pa);font-weight:700}

/* ══ RESTORED COMPONENTS ═══════════════════════════════════════════════════
   These had no rules in the sheet at all — lost when the one-pager was split into three pages
   sharing an extracted motr.css, and by three later bulk cuts on the home page's own blocks. */

/* ── the big figures (home proof summary + the case study) ─────────────── */
.numrow{display:grid;gap:clamp(16px,2.5vw,30px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){
  .numrow{grid-template-columns:repeat(4,minmax(0,1fr))}
  .numrow.three{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.num{display:grid;gap:5px;align-content:start;padding-top:15px;border-top:1px solid var(--line)}
.num b{font-stretch:70%;font-weight:800;letter-spacing:-.025em;line-height:.92;color:var(--pa);
 font-variant-numeric:tabular-nums;font-size:clamp(34px,4.6vw,54px)}
.num span{font-size:13px;color:#9aa2ac;line-height:1.35}
.num.hi b{color:var(--hi)}
.numnote{margin:clamp(22px,3vh,32px) 0 0;max-width:66ch;color:#aab1bb;font-size:15.5px;
 line-height:1.6}
.numnote b{color:var(--pa)}

.proofsum{display:grid;gap:clamp(26px,4vw,52px);align-items:start}
@media(min-width:900px){.proofsum{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}}
.proofsum .numrow{grid-template-columns:minmax(0,1fr)}
.proofsum .numrow .num{padding-top:13px}
.proofsum .numrow .num b{font-size:clamp(30px,3.4vw,42px)}

/* ── the case-study page header ────────────────────────────────────────── */
.subhead{padding-block:clamp(76px,11vh,132px) clamp(30px,5vh,50px)}
.subhead h1{font-size:clamp(34px,5.2vw,68px);margin:16px 0 0;max-width:19ch;text-wrap:balance;
 line-height:.98}
.subhead .lede{margin-top:22px;max-width:62ch}
.subhead .lede b{color:var(--pa)}

/* ── the two proof cards ───────────────────────────────────────────────── */
.proofgrid{display:grid;gap:14px;margin-top:clamp(30px,4.5vh,46px)}
@media(min-width:900px){.proofgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pcard{background:var(--pan);border:1px solid var(--line);border-radius:4px;
 padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column}
.pcard .mono{color:#79818c}
.pnote,.psrc{color:#9aa2ac;line-height:1.55}
.pnote{margin:18px 0 0;font-size:13.5px}
.pnote b{color:var(--pa)}
.psrc{margin:auto 0 0;padding-top:16px;font-size:12.5px;border-top:1px solid var(--line)}
.psrc b{color:var(--pa);font-variant-numeric:tabular-nums}

/* where the 22 came from — a bar per channel */
.chans{display:grid;gap:11px;margin-top:18px}
.chan{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) 26px;gap:12px;
 align-items:center}
.chan .cn{display:block;font-size:13px;color:#c3cad3}
.chan i{position:relative;height:8px;border-radius:99px;background:#1a2028;display:block}
.chan i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);
 border-radius:99px;background:var(--hi)}
.chan b{font-size:14px;font-weight:700;text-align:right;color:var(--pa);
 font-variant-numeric:tabular-nums}
.chan.dead .cn,.chan.dead b{color:#6d757f}
.chan.dead i::after{background:#39424d}

/* the what-is-22-worth calculator */
.cwrap{display:grid;gap:18px;margin-top:18px}
.crow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:baseline;
 cursor:pointer}
.clab{font-size:13.5px;color:#9aa2ac}
.cval{font-stretch:76%;font-weight:800;font-size:20px;color:var(--pa);text-align:right;
 font-variant-numeric:tabular-nums}
.crow input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--hi);height:22px;
 background:transparent;cursor:pointer}
.crow input[type=range]:focus-visible{outline:2px solid var(--hi);outline-offset:3px}
.cout{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:4px}
.cout b{font-stretch:70%;font-weight:800;letter-spacing:-.025em;line-height:.94;color:var(--hi);
 font-size:clamp(36px,4.4vw,50px);font-variant-numeric:tabular-nums}
.cout span{font-size:13px;color:#9aa2ac}

/* ── what moved on Google ──────────────────────────────────────────────── */
.moves{display:grid;gap:12px;margin-top:clamp(26px,4vh,40px)}
@media(min-width:840px){.moves{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mv{background:var(--pan);border:1px solid var(--line);border-radius:4px;padding:20px;
 display:grid;gap:16px;align-content:start}
.mvh b{display:block;font-size:15px;font-weight:650;color:var(--pa);line-height:1.3}
.mvh span{display:block;margin-top:3px;font-size:12px;color:#79818c}
.mvv{display:flex;align-items:baseline;gap:11px}
.mvv em{font-style:normal;font-size:13.5px;color:#79818c}
.mvv b{font-stretch:74%;font-weight:800;font-size:23px;letter-spacing:-.015em;color:var(--hi)}
/* the arrow between "was" and "now" */
.arw{position:relative;align-self:center;display:block;width:16px;height:1px;background:#4a515b;
 flex:0 0 auto}
.arw::after{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;
 border-top:1px solid #4a515b;border-right:1px solid #4a515b;transform:translateY(-50%) rotate(45deg)}
.ladder.none{display:none}
.srcline{margin:clamp(24px,3.5vh,34px) 0 0;padding-top:18px;border-top:1px solid var(--line);
 max-width:78ch;font-size:12.5px;line-height:1.65;color:#8b939d}
.srcline b{color:#c3cad3}

/* ── the six-step gauge (home) ─────────────────────────────────────────── */
.gauge{position:relative;margin-top:clamp(26px,4vh,38px);padding:26px 0 34px}
.gticks{position:absolute;left:0;right:0;top:26px;height:8px;
 background:repeating-linear-gradient(90deg,#1c222a 0 1px,transparent 1px 16.6667%)}
.grail{position:relative;height:8px;border-radius:99px;background:#151a20;overflow:hidden}
.gfill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;
 background:linear-gradient(90deg,var(--hi),#ff9152);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.gstops{position:relative;height:0}
.gstop{position:absolute;left:var(--at);top:-8.5px;transform:translateX(-50%);display:grid;
 justify-items:center;gap:10px}
.gstop i{display:block;width:9px;height:9px;border-radius:99px;background:#2b323b;
 box-shadow:0 0 0 3px var(--ink)}
.gstop em{font-style:normal;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;
 font-size:10px;letter-spacing:.14em;color:#6d757f}
.gneedle{position:absolute;left:var(--at,50%);top:19px;transform:translateX(-50%);width:2px;
 height:22px;background:var(--pa);border-radius:2px;box-shadow:0 0 0 3px var(--ink)}
/* the states the six-step script toggles — without these the instrument never changes */
.gstop.reached i{background:var(--hi)}
.gstop.reached em{color:#9aa2ac}
.gstop.broke i{background:var(--pa);width:12px;height:12px;box-shadow:0 0 0 3px var(--ink),0 0 0 5px rgba(255,106,26,.35)}
.gstop.broke em{color:var(--pa);font-weight:700}
.gstop.broke ~ .gstop i{background:#232a33}
.gauge.broken .gfill{background:linear-gradient(90deg,var(--hi),var(--hi))}
@media(prefers-reduced-motion:reduce){.gfill,.gstop i{transition:none}}
.gstop i{transition:background .35s ease,width .25s ease,height .25s ease}

/* ── the three tiers on the home page ──────────────────────────────────── */
.tiers{display:grid;gap:12px;margin-top:clamp(28px,4vh,42px)}
/* two plans, not three (2026-09-07) - a repeat(3) grid would leave the removed tier as a hole */
@media(min-width:880px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr));max-width:840px}}
@media(min-width:880px){.tiers.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1120px}}
.tier{position:relative;display:grid;gap:10px;align-content:start;text-decoration:none;
 color:inherit;background:var(--pan);border:1px solid var(--line);border-radius:4px;
 padding:clamp(20px,2.2vw,26px);
 transition:border-color .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
.tier:hover{border-color:#3d4550;transform:translateY(-2px)}
.tier.best{border-color:var(--hi);
 background:linear-gradient(180deg,rgba(255,106,26,.07),var(--pan))}
.tk{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:10px;
 letter-spacing:.16em;text-transform:uppercase;color:var(--hi)}
.tier b{font-size:17px;font-weight:700;color:var(--pa);line-height:1.25}
.tv{font-stretch:74%;font-weight:800;font-size:34px;letter-spacing:-.02em;color:var(--pa);
 line-height:1}
.tv em{font-style:normal;font-stretch:100%;font-weight:500;font-size:13px;color:#79818c;
 letter-spacing:0}
.td{font-size:13.5px;line-height:1.55;color:#9aa2ac}
.td b{font-size:inherit;color:var(--pa)}
@media(prefers-reduced-motion:reduce){.tier{transition:none}.tier:hover{transform:none}}

/* ── Steve's photo ─────────────────────────────────────────────────────── */
.mug{margin:0;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:var(--pan)}
.mug img{display:block;width:100%;height:auto}

/* ── the pricing FAQ ───────────────────────────────────────────────────── */
.qa{display:grid;margin-top:clamp(26px,4vh,40px);border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
 padding:19px 2px;cursor:pointer;list-style:none;font-size:16px;font-weight:600;color:var(--pa)}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--hi)}
.q summary:focus-visible{outline:2px solid var(--hi);outline-offset:2px}
.q summary i{position:relative;flex:0 0 auto;width:11px;height:11px}
.q summary i::before,.q summary i::after{content:"";position:absolute;background:#79818c;
 border-radius:2px;transition:transform .25s ease,background .25s ease}
.q summary i::before{left:0;right:0;top:5px;height:1.5px}
.q summary i::after{top:0;bottom:0;left:5px;width:1.5px}
.q[open] summary i::after{transform:scaleY(0)}
.q[open] summary i::before{background:var(--hi)}
.q p{margin:0 0 20px;max-width:70ch;color:#aab1bb;font-size:14.5px;line-height:1.65}
@media(prefers-reduced-motion:reduce){.q summary i::before,.q summary i::after{transition:none}}

/* ── kept at the FOOT of the file on purpose ─────────────────────────────
   These have now been removed twice by bulk block-cuts that sliced a range containing them.
   Living last, after every marker a removal script anchors on, they cannot be caught again. */
.whead{display:grid;gap:clamp(22px,4vw,54px);align-items:start}
@media(min-width:900px){.whead{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.whead .big{font-stretch:76%;font-weight:800;letter-spacing:-.012em;line-height:1;margin:14px 0 0;
 font-size:clamp(34px,5.4vw,66px)}
.whead p{color:#aab1bb;max-width:52ch}
.whead p + p{margin-top:16px}
.whead b{color:var(--pa)}
.wsub{padding-top:16px;border-top:1px solid var(--line);font-size:14.5px}
.bcta{margin-top:clamp(24px,3.5vh,36px)}

/* the scroll cue — a full-bleed hero with nothing showing below it needs one */
.scroller{position:absolute;left:50%;bottom:clamp(18px,3vh,30px);transform:translateX(-50%);z-index:3;
 width:24px;height:38px;border:1px solid rgba(255,255,255,.24);border-radius:99px;display:grid;
 justify-items:center;padding-top:7px}
.scroller span{display:block;width:3px;height:7px;border-radius:99px;background:rgba(255,255,255,.6);
 animation:scrolldrop 1.9s ease-in-out infinite}
.scroller:hover{border-color:rgba(255,255,255,.45)}
@keyframes scrolldrop{0%,100%{transform:translateY(0);opacity:0}30%{opacity:1}70%{transform:translateY(12px);opacity:0}}
@media(prefers-reduced-motion:reduce){.scroller span{animation:none;opacity:.7}}

/* ── the work: pick your trade ───────────────────────────────────────────
   One large live frame instead of nine small ones. The chips are the WHO question asked out loud,
   and answering it makes the section about the visitor's own shop in a single click. */
.w-picks{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(24px,3.5vh,34px) 0 14px}
.w-pick{background:var(--pan);border:1px solid var(--line);border-radius:99px;padding:9px 17px;
 font:inherit;font-size:13.5px;font-weight:600;color:#9aa2ac;cursor:pointer;
 transition:color .2s,border-color .2s,background .2s}
.w-pick:hover{color:var(--pa);border-color:#3d4550}
.w-pick[aria-pressed=true]{background:var(--hi);border-color:var(--hi);color:#140b05}
.w-pick:focus-visible{outline:2px solid var(--hi);outline-offset:2px}

.w-stage{position:relative;width:100%;border-radius:12px;overflow:hidden;
 transition:height .45s cubic-bezier(.2,.8,.2,1);
 border:1px solid var(--line);background:#0e1116 center top/cover no-repeat;
 box-shadow:0 30px 70px rgba(0,0,0,.45)}
.w-stage iframe{position:absolute;left:50%;top:0;border:0;
 transform:translateX(calc(var(--fw,100%) / -2)) scale(var(--s,1));transform-origin:0 0;
 opacity:0;transition:opacity .45s ease}
/* a real client's site cannot be framed, so that one is its screenshot */
.w-stage.shot iframe{display:none}
.w-stage iframe.on{opacity:1}
/* an iframe swallows clicks, so the whole stage is the link */
.w-open{position:absolute;inset:0;z-index:2;display:grid;place-items:end center;
 padding-bottom:22px;text-decoration:none;
 background:linear-gradient(180deg,rgba(12,14,17,0) 62%,rgba(12,14,17,.72) 100%);
 opacity:0;transition:opacity .28s ease}
.w-stage:hover .w-open,.w-open:focus-visible{opacity:1}
.w-open span{background:var(--pa);color:#0c0e11;font-weight:650;font-size:14px;border-radius:99px;
 padding:11px 22px}
.w-cap{margin:14px 0 0;font-size:14px;color:#9aa2ac}
.w-cap b{color:var(--pa);font-weight:650}
@media(max-width:700px){
  .w-pick{padding:8px 13px;font-size:12.5px}
  .w-open{opacity:1;background:linear-gradient(180deg,rgba(12,14,17,0) 55%,rgba(12,14,17,.8) 100%)}
}
@media(prefers-reduced-motion:reduce){.w-stage iframe,.w-open,.w-pick{transition:none}}

/* ── the night, and the email ────────────────────────────────────────────
   The night tile is the only PHOTOGRAPH in the bento, which is what breaks the five-devices-in-a-row
   sameness. It is also the safest claim of the six directions — things came in overnight, rather
   than a promise about how they came in.

   On alignment: every other tile insets its scene by 19px, matching the title. The photograph
   deliberately does not — a photo held off the tile edge reads as a picture pasted onto a card,
   where one that runs to the edge reads as the tile itself. Its TITLE still sits on the same 19px
   line as every other title, so the type grid holds even though the image ignores it. */
.bt-night{overflow:hidden}
.bt-night h3{position:relative;z-index:3}
.b-night{position:relative;z-index:1;flex:1;min-height:0;margin-top:13px;border-radius:12px;
 overflow:hidden;box-shadow:0 22px 44px rgba(0,0,0,.5)}
.b-night img{width:100%;height:100%;object-fit:cover;filter:brightness(.34) saturate(.55)}
.b-night::after{content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(8,10,13,.74) 0%,rgba(8,10,13,.1) 34%,rgba(8,10,13,.93) 100%)}
/* the one lit thing in a dark shop */
.b-nglow{position:absolute;right:14%;bottom:22%;width:78px;height:150px;border-radius:14px;z-index:2;
 background:linear-gradient(180deg,#e4eaf1,#adb9c7);transform:rotate(-7deg);
 box-shadow:0 0 68px 24px rgba(186,212,244,.26),0 16px 30px rgba(0,0,0,.5)}
.b-nglow i{position:absolute;left:10px;right:10px;height:6px;border-radius:99px;
 background:rgba(20,24,28,.2)}
.b-nglow i:nth-child(1){top:18px}
.b-nglow i:nth-child(2){top:33px;right:30px}
.b-nglow i:nth-child(3){top:48px;right:22px}
.b-ncap{position:absolute;left:20px;right:20px;bottom:18px;z-index:3}
.b-nh{margin:0;font-stretch:76%;font-weight:800;letter-spacing:-.02em;line-height:1.04;
 font-size:clamp(22px,2.6vw,30px);color:#fff}
.b-ns{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:#c9d0d8;max-width:56ch}

/* the email — plain words, from a person, on the first of the month */
.b-mailwrap{position:relative;z-index:1;flex:1;min-height:0;margin-top:13px;display:grid;
 align-content:stretch;
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.b-mail{width:100%;background:#fff;border-radius:12px;overflow:hidden;color:#16181c;
 box-shadow:0 22px 44px rgba(0,0,0,.5)}
.b-mhd{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid #ececf0}
.b-mav{display:grid;place-items:center;width:32px;height:32px;border-radius:99px;flex:0 0 auto;
 background:var(--hi);color:#fff;font-size:13px;font-weight:800}
.b-mhd b{display:block;font-size:13px}
.b-mhd span{display:block;font-size:10.5px;color:#8b939d;margin-top:1px}
.b-mbd{padding:13px 16px 15px}
.b-mlead{margin:0 0 10px;font-size:12px;line-height:1.5;color:#3c4652}
.b-mlead b{color:#16181c;font-weight:700}
.b-ml{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:14px;
 font-size:12px;padding:5px 0;border-bottom:1px solid #f2f3f5;color:#5f6b7a}
.b-ml b{color:#16181c;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.b-ml em{font-style:normal;color:#1a7f4b;font-size:10.5px;font-weight:700;margin-left:7px}
.b-mnx{margin:12px 0 0;background:#fff6f0;border-left:3px solid var(--hi);border-radius:0 6px 6px 0;
 padding:10px 12px;font-size:11.5px;line-height:1.5;color:#3c4652}
.b-mnx b{color:#16181c}
@media(max-width:899px){.b-nglow{display:none}}

/* ── found: the phone at its REAL size ───────────────────────────────────
   Steve: "built terrible, doesnt even fit, hard to read and is tiny, not realistic." The cause was
   arithmetic — one column is 229px of stage and a phone is 375px wide, so contain-fitting scaled it
   to 0.58 and rendered 13px interface text at 7.5. Nothing inside the tile could fix that; a legible
   phone needs phone-width.

   Its own full-width row now, phone at true 375px and scale 1.0, with the four surfaces named
   alongside — which also does the thing the small version never could: show that there are four
   doors while you are looking through one of them. */
.b-fourup{position:absolute;inset:0;display:grid;grid-template-columns:375px minmax(0,1fr);
 gap:clamp(28px,4vw,58px);align-items:stretch}
.b-fphone{position:relative}
.b-fphone .b-gphone{position:absolute;inset:0}
.b-flist{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.b-frow{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;
 padding:13px 0;border-bottom:1px solid var(--line);transition:opacity .4s ease}
.b-frow:last-of-type{border-bottom:0}
.b-frow i{width:9px;height:9px;margin:6px 0 0 6px;border-radius:99px;background:#39424d;
 transition:background .4s ease,box-shadow .4s ease}
.b-frow b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;color:#8b939d;
 transition:color .4s ease}
.b-frow span{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:#79818c;
 max-width:46ch}
.b-frow.on i{background:var(--hi);box-shadow:0 0 0 5px rgba(255,106,26,.16)}
.b-frow.on b{color:var(--pa)}
.b-fnote{margin:16px 0 0;font-size:13px;color:#8b939d;font-style:italic}
@media(max-width:899px){
  .b-fourup{grid-template-columns:minmax(0,1fr)}
  .b-flist{display:none}
}
@media(prefers-reduced-motion:reduce){.b-frow,.b-frow i,.b-frow b{transition:none}}

/* the hero's second line — the deliverables, stated once, before the paragraph */
.hero .subhi{margin:20px auto 0;max-width:62ch;text-wrap:balance;font-size:clamp(16px,1.7vw,20px);font-weight:650;
 color:var(--pa);line-height:1.4;text-shadow:0 1px 24px rgba(12,14,17,.6)}
.hero .sub{margin-top:14px}

/* the audit block now sits under the About copy rather than under the photograph */
.who-cta{margin-top:clamp(24px,3.5vh,34px);padding-top:clamp(22px,3vh,30px);
 border-top:1px solid var(--line)}
.wc-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.wc-fine{margin:12px 0 0;font-size:13px;color:var(--soft)}

/* ══ ONE LINE FOR EVERY TILE ═════════════════════════════════════════════
   Steve's alignment note, correctly understood the second time: he means ACROSS tiles. Every
   content object in the bento now starts on the same vertical line, and the two tiles that share a
   row start on the same horizontal one — so the eye reads a grid rather than four separate cards
   that each happen to have a margin. Nothing here is scaled: each scene is authored at its stage's
   real size, which is the only way slack cannot appear and push an edge out of true. */
.b-fourup{position:absolute;inset:0;display:grid;grid-template-columns:300px minmax(0,1fr);
 gap:20px;align-items:center}
.b-fphone{position:relative;height:100%}

/* the found phone, as an actual device */
.b-gphone{inset:0;background:#fff;border-radius:38px;border:9px solid #16181c;
 box-shadow:0 0 0 2px #2b323b,0 26px 50px rgba(0,0,0,.6);display:flex;flex-direction:column;
 overflow:hidden}
.b-gphone::before{content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%);
 width:86px;height:24px;border-radius:99px;background:#0b0d10;z-index:9}
.b-gphone::after{content:"";position:absolute;left:50%;bottom:7px;transform:translateX(-50%);
 width:104px;height:4px;border-radius:99px;background:rgba(20,24,28,.28);z-index:9}
.b-gphone .b-status{padding:9px 20px 5px;font-size:11px}
.b-glogowrap{padding:16px 0 13px}
.b-glogo{width:88px}
.b-gsearch{margin:0 13px;padding:9px 14px;font-size:12.5px}
.b-gtabs{margin:12px 14px 0;font-size:11.5px;gap:15px}
.b-gmap{height:104px;margin:11px 13px 0}
.b-gres{padding:11px 13px}
.b-gname{font-size:13.5px}
.b-gmeta,.b-gopen{font-size:11.5px}
.b-grate{font-size:11px}
.b-gthumb{width:52px;height:52px}
.b-blue{padding:12px 14px}
.b-btitle{font-size:13.5px}
.b-bdesc,.b-burl{font-size:11.5px}
.b-aihead{padding:13px 15px 11px;font-size:12px}
.b-aibody{padding:12px 14px}
.b-aiq,.b-aia p{font-size:11.5px}
.b-surfbar{padding:9px 14px 12px}

/* the four surfaces, named only — the descriptions moved out with the smaller tile */
.b-flist{display:flex;flex-direction:column;justify-content:center;gap:0;height:100%;min-width:0}
.b-frow{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:center;
 padding:14px 0;border-bottom:1px solid var(--line);transition:opacity .4s ease}
.b-frow:last-of-type{border-bottom:0}
.b-frow i{width:9px;height:9px;margin-left:5px;border-radius:99px;background:#39424d;
 transition:background .4s ease,box-shadow .4s ease}
.b-frow b{font-size:15.5px;font-weight:650;letter-spacing:-.01em;color:#8b939d;
 transition:color .4s ease}
.b-frow.on i{background:var(--hi);box-shadow:0 0 0 5px rgba(255,106,26,.16)}
.b-frow.on b{color:var(--pa)}
.b-fnote{margin:14px 0 0;font-size:12.5px;color:#8b939d;font-style:italic}

/* the email starts on the same line as the phone beside it */
.b-mailwrap{align-content:start}

/* ══ THE NIGHT PHONE — a device, and it rings ════════════════════════════
   Steve: "make that phone shake a little bit when the user hovers or touches the area kinda like
   its ringing. also make it actually look like a phone." It was a rounded rectangle with three grey
   bars on it. Now: bezel, island, home bar, and the two messages that actually arrived overnight —
   so the one lit thing in a dark shop is legible as the point of the tile. */
.b-nphone{position:absolute;right:11%;bottom:16%;width:126px;z-index:2;
 background:#0f1216;border:5px solid #1c2027;border-radius:22px;padding:5px;
 box-shadow:0 0 74px 26px rgba(186,212,244,.2),0 20px 38px rgba(0,0,0,.6);
 transform:rotate(-6deg);transform-origin:50% 50%}
.b-nisland{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:38px;height:9px;
 border-radius:99px;background:#000;z-index:3}
.b-nscreen{background:#eef2f7;border-radius:17px;padding:17px 7px 9px;display:grid;gap:5px}
.b-ntime{margin:0 0 2px;text-align:center;font-size:8px;font-weight:700;color:#5f6b7a}
.b-nmsg{background:#fff;border-radius:8px;padding:6px 7px;box-shadow:0 1px 3px rgba(20,24,28,.14)}
.b-nmsg b{display:block;font-size:7.5px;color:#16181c;line-height:1.25}
.b-nmsg span{display:block;margin-top:2px;font-size:6.5px;line-height:1.35;color:#6b7480}
.b-nmsg.two{background:#e8f7ef}
.b-nmsg.two b{color:#1a7f4b}
.b-nbar{display:block;width:34px;height:3px;border-radius:99px;background:rgba(20,24,28,.3);
 margin:7px auto 0}
/* it rings when you point at the tile */
.bt-night:hover .b-nphone,.bt-night:focus-within .b-nphone{animation:ring .13s linear infinite}
/* A BUZZ, NOT A SWING. This was a pendulum — plus or minus 5 degrees over 0.82s, eased, pivoting
   from 50% 90% like something hanging on a hook. A phone vibrating on a bench is the opposite on
   every axis: tiny amplitude, high frequency, and it judders from its own centre. Rotation is down
   to plus or minus 0.7deg and most of the movement is now a one-pixel translation; linear, because
   an eased vibration reads as a swing. */
@keyframes ring{
  0%,100%{transform:rotate(-6deg) translate(0,0)}
  16%{transform:rotate(-6.7deg) translate(-1px,.5px)}
  33%{transform:rotate(-5.4deg) translate(1px,-.5px)}
  50%{transform:rotate(-6.5deg) translate(-.5px,-1px)}
  66%{transform:rotate(-5.5deg) translate(1px,.5px)}
  83%{transform:rotate(-6.3deg) translate(-1px,0)}
}
@media(prefers-reduced-motion:reduce){
  .bt-night:hover .b-nphone,.bt-night:focus-within .b-nphone{animation:none}
}
@media(max-width:899px){.b-nphone{display:none}}

/* a frame that fills its stage instead of being scaled into it — no slack, so no centred margin */
.b-fr.b-fill{position:absolute;inset:0;width:auto;height:auto;transform:none}

@media(prefers-reduced-motion:reduce){.w-stage{transition:none}}

/* ══ FOUND — the phone, sized to its stage ═══════════════════════════════ */
.b-fourup.one{grid-template-columns:minmax(0,1fr);align-items:stretch}
.bt-found .b-fphone{justify-self:center;align-self:center;height:100%;width:auto;
 aspect-ratio:41/88;max-width:100%}
.bt-found{overflow:hidden}

/* the device, re-proportioned for a 183px body — a 9px bezel at this size reads as a picture
   frame, so it comes down with everything else */
.bt-found .b-gphone{border-radius:24px;border:5px solid #16181c;
 box-shadow:0 0 0 1.5px #2b323b,0 18px 34px rgba(0,0,0,.55)}
.bt-found .b-gphone::before{top:6px;width:52px;height:14px}
.bt-found .b-gphone::after{bottom:5px;width:58px;height:3px}

/* less on the screen, so the rest can be read */
.bt-found .b-gtabs,
.bt-found .b-gmap,
.bt-found .b-gres:not(.on),
.bt-found .b-blue:not(.first){display:none}

.bt-found .b-status{padding:7px 13px 3px;font-size:8.5px}
.bt-found .b-glogowrap,.bt-found .b-glogowrap.sm{padding:11px 0 9px}
.bt-found .b-glogo{width:64px}
.bt-found .b-gsearch{margin:0 10px;padding:7px 11px;font-size:10px}
.bt-found .b-mic{width:11px;height:11px}
.bt-found .b-gres{padding:13px 11px;gap:9px}
.bt-found .b-gname{font-size:11.5px}
.bt-found .b-gmeta,.bt-found .b-gopen{font-size:9.5px}
.bt-found .b-grate{font-size:9px}
.bt-found .b-star{width:9px;height:9px}
.bt-found .b-gthumb{width:44px;height:44px}
.bt-found .b-blue{padding:12px 11px}
.bt-found .b-btitle{font-size:11px;line-height:1.32}
.bt-found .b-bdesc,.bt-found .b-burl{font-size:9.5px;line-height:1.42}
.bt-found .b-adtag,.bt-found .b-sitelinks{font-size:9px}
.bt-found .b-aihead{padding:11px 12px 9px;font-size:10px}
.bt-found .b-aibody{padding:10px 11px}
.bt-found .b-aiq,.bt-found .b-aia p,.bt-found .b-aib{font-size:9.5px;line-height:1.5}
.bt-found .b-aisrc{font-size:8.5px}
.bt-found .b-surfbar{position:absolute;left:0;right:0;bottom:0;z-index:6;border-top:0;
 background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.95) 46%);
 padding:20px 11px 9px;gap:5px}
.bt-found .b-sdot{width:5px;height:5px}
.bt-found .b-surfbar b{font-size:9.5px}

/* ══ THE INTRO OVERLAY ════════════════════════════════════════════════════
   Deliberately plain: the overlay is a black rectangle holding a canvas. Everything anyone will
   look at is drawn inside it by intro.js. The only chrome is the way out. */
/* The intro locks scrolling, which REMOVES the scrollbar — and the scrollbar coming back at the
   end was moving the entire centred layout 22.5px left (half of a 45px gutter) in one frame. It
   was never noticed because nothing was pinned to a specific pixel until the mark started docking
   to the nav logo and landed exactly 22.5px right of it. Reserving the gutter permanently means
   locking and unlocking scroll changes nothing about the layout, so the dock lands and the page
   stops jolting at the handover. */
html{scrollbar-gutter:stable}
html.intro-on{overflow:hidden}
html.intro-on body{overflow:hidden}
/* No CSS transition on opacity here: intro.js animates it directly, and two animators on
   one property means neither is in charge. */
/* #0c0e11 is --ink, the page's own ground, NOT the old #05070a. The canvas is transparent now, so
   this is the dark the visitor actually sees behind the mark — and because it never passes through
   the renderer's ACES tone mapping it is the same value as the page underneath, which is what makes
   the hand-over a dissolve instead of a grey plate lifting off a black one. */
#intro{position:fixed;inset:0;z-index:9999;background:#0c0e11}
#intro canvas{display:block;width:100%;height:100%}
/* Always reachable, never shouting. A skip control that has to be hunted for is not a skip
   control — this one sits where the eye rests after the object, and takes focus first on tab. */
#introSkip{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vh,36px);
 background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#e6e9ee;
 font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
 padding:11px 20px;border-radius:99px;cursor:pointer;
 backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
 transition:background .25s ease,border-color .25s ease,color .25s ease}
#introSkip:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff}
#introSkip:focus-visible{outline:2px solid var(--hi);outline-offset:3px}
@media(prefers-reduced-motion:reduce){#intro,#introSkip{transition:none}}

/* The phone's height comes from its tile, and below 900px the tile falls back to the bento's
   grid-auto-rows floor of 230px. At that height an 0.466 device is 107px wide and its interface
   type lands near 5px — the same arithmetic failure the desktop tile had, arriving through a
   different door. Give the tile the height the device needs on the way down.
   (bt-found on a narrow screen) */
@media(max-width:899px){
  .bt-found{min-height:540px}
}
@media(max-width:639px){
  .bt-found{min-height:500px}
}

/* ══ THE GUIDE ═══════════════════════════════════════════════════════════
   All prefixed g- because this stylesheet is shared by every page and I have already lost an
   afternoon this month to two blocks quietly claiming the same class name.

   The index is a diagnostic, so it is built as a two-column row: what the owner SAYS on the left,
   what that turns out to be on the right. The left column is the thing being scanned, so it gets
   the size and the light; the right column is the answer, and it can be smaller because nobody
   reads it until the left one has already matched. */
.g-list{display:grid;gap:10px;margin-top:clamp(26px,4vh,42px)}
.g-row{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(18px,3vw,44px);
 align-items:start;padding:22px 24px;border:1px solid var(--line);border-radius:14px;
 background:var(--pan);text-decoration:none;color:inherit;position:relative;
 transition:border-color .25s ease,transform .25s cubic-bezier(.2,.8,.2,1),background .25s ease}
.g-row:hover{border-color:#3d4550;transform:translateY(-2px);background:#181c22}
.g-row:focus-visible{outline:2px solid var(--hi);outline-offset:3px}
.g-said{font-size:clamp(17px,1.9vw,21px);font-weight:650;letter-spacing:-.015em;line-height:1.3;
 color:var(--pa);text-wrap:balance}
.g-go b{display:block;font-size:15px;font-weight:650;color:var(--hi);letter-spacing:-.005em}
.g-go em{display:block;margin-top:7px;font-style:normal;font-size:14px;line-height:1.55;
 color:var(--soft);max-width:60ch}
/* the last row is the diagnostic itself, so it reads as a different KIND of thing */
.g-row.wide{background:linear-gradient(150deg,#181c22,#13161a);border-color:#333b45}
.g-row.wide .g-go b{color:var(--pa)}

.g-note{margin:clamp(26px,4vh,40px) 0 0;max-width:70ch;font-size:15px;line-height:1.6;
 color:var(--soft);padding-top:clamp(20px,3vh,28px);border-top:1px solid var(--line)}

@media(max-width:760px){
  .g-row{grid-template-columns:minmax(0,1fr);gap:12px;padding:19px 18px}
  .g-said{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.g-row{transition:none}}

/* ══ A GUIDE ARTICLE ═════════════════════════════════════════════════════
   Long-form, so the rules are the boring ones that actually decide whether it gets read: a measure
   near 65 characters, generous leading, and headings scannable enough that reading only the h2s
   still delivers the argument. Someone who skims straight down them should still come away with
   the point — that is the cadence lesson applied to a page people opted into. */
.g-art h2{font-size:clamp(21px,2.6vw,29px);letter-spacing:-.02em;line-height:1.22;
 margin:clamp(38px,5vh,56px) 0 0;max-width:26ch;text-wrap:balance}
.g-art h2+p{margin-top:16px}
.g-art p{max-width:66ch;font-size:clamp(15.5px,1.7vw,17px);line-height:1.68;color:#c3cad3;
 margin:17px 0 0}
.g-art p b{color:var(--pa);font-weight:650}
.g-art a{color:var(--hi);text-decoration:none;border-bottom:1px solid rgba(255,106,26,.35);
 padding-bottom:1px}
.g-art a:hover{border-bottom-color:var(--hi)}

.g-back{color:var(--soft);border-bottom:0}
.g-back:hover{color:var(--hi)}

/* the do-it-now block — the reader reaches the verdict himself before I have claimed anything */
.g-test{margin-top:clamp(24px,4vh,36px);padding:clamp(20px,3vw,28px);border-radius:14px;
 border:1px solid #333b45;background:linear-gradient(150deg,#181c22,#13161a)}
.g-test-k{margin:0 0 4px !important;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;
 font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--hi)}
.g-test p{margin-top:13px}

/* numbered list — the number is furniture, the bold line is the point, the grey is the reason */
.g-num{list-style:none;counter-reset:g;padding:0;margin:26px 0 0;display:grid;gap:2px}
.g-num li{counter-increment:g;display:grid;grid-template-columns:44px minmax(0,1fr);
 gap:0 18px;padding:20px 0;border-bottom:1px solid var(--line)}
.g-num li:last-child{border-bottom:0}
.g-num li::before{content:counter(g);grid-row:1/span 2;
 font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:13px;font-weight:600;
 color:var(--hi);opacity:.75;padding-top:3px}
.g-num b{font-size:clamp(16px,1.8vw,18.5px);font-weight:650;letter-spacing:-.01em;color:var(--pa);
 line-height:1.35}
.g-num span{display:block;margin-top:7px;font-size:15px;line-height:1.62;color:#98a1ac;
 max-width:62ch}

/* the one link out, at the end — one door, not one per section */
.g-next{margin-top:clamp(40px,5.5vh,60px);padding-top:clamp(22px,3vh,30px);
 border-top:1px solid var(--line)}
.g-next-k{margin:0 0 12px !important;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;
 font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.g-nx{display:block;padding:20px 22px;border:1px solid var(--line);border-radius:14px;
 background:var(--pan);text-decoration:none;
 transition:border-color .25s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.g-art .g-nx{border-bottom:1px solid var(--line)}
.g-art .g-nx:hover{border-color:#3d4550;transform:translateY(-2px)}
.g-nx b{display:block;font-size:17px;font-weight:650;letter-spacing:-.01em;color:var(--hi)}
.g-nx em{display:block;margin-top:6px;font-style:normal;font-size:14.5px;line-height:1.55;
 color:var(--soft);max-width:62ch}

.g-honest{margin-top:clamp(30px,4vh,42px) !important;padding-top:clamp(18px,2.5vh,24px);
 border-top:1px solid var(--line);font-size:14px !important;color:var(--soft) !important}

@media(max-width:760px){
  .g-num li{grid-template-columns:30px minmax(0,1fr);gap:0 12px}
}
@media(prefers-reduced-motion:reduce){.g-nx{transition:none}}

/* a plain bulleted list inside an article — used where the items are advice rather than a
   numbered sequence, so they get a marker instead of a rank */
.g-art .g-plain{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:13px;max-width:66ch}
.g-art .g-plain li{position:relative;padding-left:22px;font-size:clamp(15.5px,1.7vw,17px);
 line-height:1.65;color:#c3cad3}
.g-art .g-plain li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
 border-radius:99px;background:var(--hi);opacity:.8}
.g-art .g-plain li b{color:var(--pa);font-weight:650}

/* the one way out of the bento — quiet on purpose, it sits below four tiles that have
   already made the argument */
.b-guide{margin:clamp(22px,3.5vh,32px) 0 0;font-size:15px;color:var(--soft);text-align:center}
.b-guide a{color:var(--pa);text-decoration:none;border-bottom:1px solid #3d4550;padding-bottom:2px;
 transition:border-color .25s ease,color .25s ease}
.b-guide a:hover{color:var(--hi);border-bottom-color:var(--hi)}

/* the toggle inside a step — the detail is available, not mandatory. Styled quiet on purpose:
   it should read as "there is more if you want it", never as the next thing to do. */
.sg-more{margin-top:13px}
.sg-more summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
 font-size:13px;color:var(--soft);padding:5px 0;transition:color .2s ease}
.sg-more summary::-webkit-details-marker{display:none}
.sg-more summary:hover{color:var(--pa)}
.sg-more summary:focus-visible{outline:2px solid var(--hi);outline-offset:3px;border-radius:4px}
.sg-more summary i{width:7px;height:7px;border-right:1.5px solid currentColor;
 border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;
 transition:transform .22s ease}
.sg-more[open] summary i{transform:rotate(-135deg);margin-top:2px}
.sg-more .sg-l{margin-top:10px}
@media(prefers-reduced-motion:reduce){.sg-more summary,.sg-more summary i{transition:none}}

/* the mark, beside the wordmark. Same silhouette the intro extrudes, so the thing that filled the
   screen a second ago is now sitting in the corner where it belongs. */
.brand{display:inline-flex;align-items:center;gap:0}
.bmark{width:19px;height:auto;flex:0 0 auto;fill:var(--hi);margin-right:9px;
 transform-origin:50% 50%}
@media(max-width:520px){.bmark{width:16px;gap:6px}}

/* ══ ADS — the contact sheet ═════════════════════════════════════════════
   Built after a reference sweep of the companies whose whole product is displaying other people's
   ads. Marpipe and Foreplay both answered the same way and neither uses a device: no phone, no
   browser chrome, no perspective mock. Marpipe's labelled grid is the thing stolen here — five
   equal cells, a plain word under each, on a bare ground. The cells match and the shapes inside
   them do not, and that mismatch IS the argument: one offer, five formats.

   Card scales are fixed constants, not measured. Three earlier versions of this measured in a
   requestAnimationFrame and wrote the result back into layout; all three froze the renderer. The
   card dimensions are known, so there is nothing to measure. */
.bt-ads .b-v{margin-top:11px}
.b-pxwrap{position:absolute;inset:0;display:flex;flex-direction:column}
.b-pxtop{flex:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;
 gap:20px;padding-bottom:11px}
.b-pxnums{display:flex;gap:26px;flex:0 0 auto}
.b-pxnums div b{font-size:19px;font-weight:750;letter-spacing:-.025em;line-height:1;
 font-variant-numeric:tabular-nums;color:var(--pa)}
.b-pxnums div.win b{color:var(--hi)}
.b-pxnums div span{margin-left:7px;font-size:11px;color:var(--soft)}

.b-pxsheet{flex:1 1 auto;min-height:0;display:grid;
 grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
 background:#22272e;border:1px solid #22272e;border-radius:10px;overflow:hidden}
.b-pxcell{position:relative;background:#0f1216;overflow:hidden}
.b-pxcell .b-pxshot{position:absolute;left:50%;top:calc(50% - 12px);transform-origin:50% 50%}
.b-pxcell .b-pxlbl{position:absolute;left:0;right:0;bottom:0;text-align:center;
 font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:8.5px;letter-spacing:.11em;
 text-transform:uppercase;color:var(--soft);padding:4px 2px 6px;
 background:linear-gradient(180deg,rgba(15,18,22,0),rgba(15,18,22,.95) 45%)}

/* the five, at true size, scaled by a constant */
/* Measured per cell by the fit() block in index.html, not hand-tuned: a constant chosen for the
   desktop cell width cropped every card on a phone, where the cells are a fixed 168px. The
   fallback is deliberately small so a card is never CUT if the script fails — too small is
   legible, too big is missing words. */
.b-pxcell .b-pxshot{transform:translate(-50%,-50%) scale(var(--pxs,.5))}

.b-pxc{border-radius:7px;overflow:hidden;background:#fff;color:#202124;position:relative;
 box-shadow:0 10px 22px rgba(0,0,0,.5);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
/* 1 search — text, no picture */
.b-pxc.s1{width:330px;padding:14px 15px 15px}
.b-pxc.s1 .px-sp{font-size:12px;font-weight:700;margin:0 0 2px}
.b-pxc.s1 .px-u{font-size:12px;color:#4d5156;margin:0}
.b-pxc.s1 .px-t{font-size:16px;color:#1a0dab;margin:3px 0 4px;line-height:1.24}
.b-pxc.s1 .px-d{font-size:12px;color:#4d5156;margin:0;line-height:1.46}
/* 2 maps */
.b-pxc.s2{width:250px;display:flex;flex-direction:column;background:#e8eaed}
.b-pxc.s2 .px-mv{height:80px;position:relative;background:
 linear-gradient(#dfe3e6 0 0) 0 34%/100% 5px no-repeat,
 linear-gradient(#dfe3e6 0 0) 0 72%/100% 4px no-repeat,
 linear-gradient(#dfe3e6 0 0) 30% 0/5px 100% no-repeat,
 linear-gradient(#dfe3e6 0 0) 74% 0/4px 100% no-repeat,#eef1f3}
.b-pxc.s2 i{position:absolute;width:13px;height:13px;border-radius:99px 99px 99px 2px;
 transform:rotate(-45deg);background:#c5221f}
.b-pxc.s2 i.px-on{background:#1a73e8;width:17px;height:17px;box-shadow:0 0 0 4px rgba(26,115,232,.2)}
.b-pxc.s2 .px-c2{background:#fff;padding:9px 11px 11px}
.b-pxc.s2 .px-adtag{display:inline-block;font-size:9px;font-weight:700;border:1px solid #dadce0;
 border-radius:3px;padding:1px 5px;margin-bottom:4px}
.b-pxc.s2 .px-nm{font-size:13px;font-weight:600;margin:0}
.b-pxc.s2 .px-rt{font-size:11px;color:#5f6368;margin:3px 0 0}
.b-pxc.s2 .px-rt b{color:#e37400}
/* 3 feed — square */
.b-pxc.s3{width:220px}
.b-pxc.s3 .px-hd{display:flex;align-items:center;gap:8px;padding:8px 10px}
.b-pxc.s3 .px-av{width:23px;height:23px;border-radius:99px;flex:0 0 auto;
 background:conic-gradient(from 210deg,#f9ce34,#ee2a7b,#6228d7,#f9ce34);padding:1.5px}
.b-pxc.s3 .px-av em{display:grid;place-items:center;width:100%;height:100%;border-radius:99px;
 background:#16181c;color:#fff;font-style:normal;font-size:8px;font-weight:800}
.b-pxc.s3 .px-who{font-size:11.5px;font-weight:600;line-height:1.15}
.b-pxc.s3 .px-who em{display:block;font-style:normal;font-size:10px;color:#8e8e8e;font-weight:400}
.b-pxc.s3 img{display:block;width:100%;height:220px;object-fit:cover}
.b-pxc.s3 .px-cap{padding:8px 11px 11px;font-size:11px;line-height:1.4;margin:0}
.b-pxc.s3 .px-cap b{font-weight:600}
/* 4 story — 9:16, no white chrome at all */
.b-pxc.s4{width:158px;height:281px;background:#000}
.b-pxc.s4 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.86}
.b-pxc.s4 .px-veil{position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 36%,rgba(0,0,0,.78) 100%)}
.b-pxc.s4 .px-bars{position:absolute;top:8px;left:9px;right:9px;display:flex;gap:3px}
.b-pxc.s4 .px-bars i{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.35)}
.b-pxc.s4 .px-bars i:first-child{background:#fff}
.b-pxc.s4 .px-msg{position:absolute;left:11px;right:11px;bottom:44px;color:#fff;font-size:17px;
 font-weight:750;line-height:1.14;letter-spacing:-.015em;margin:0}
.b-pxc.s4 .px-msg em{display:block;font-style:normal;font-size:10.5px;font-weight:500;margin-top:6px;
 opacity:.9}
.b-pxc.s4 .px-swipe{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;
 background:rgba(255,255,255,.95);color:#111;font-size:10px;font-weight:700;border-radius:99px;
 padding:6px 16px;white-space:nowrap}
/* 5 youtube — the countdown is the character of the format */
.b-pxc.s5{width:300px;background:#0f0f0f;color:#fff}
.b-pxc.s5 .px-fr{position:relative;height:169px;overflow:hidden;background:#000}
.b-pxc.s5 .px-fr img{width:100%;height:100%;object-fit:cover;opacity:.9}
.b-pxc.s5 .px-badge{position:absolute;left:9px;bottom:10px;background:#ffd400;color:#111;
 font-size:9.5px;font-weight:800;border-radius:2px;padding:2px 6px}
.b-pxc.s5 .px-skip{position:absolute;right:0;bottom:18px;background:rgba(0,0,0,.72);color:#fff;
 border:1px solid rgba(255,255,255,.35);border-right:0;border-radius:2px 0 0 2px;
 font-size:10.5px;padding:6px 10px;white-space:nowrap}
.b-pxc.s5 .px-un{padding:9px 11px 12px;font-size:11.5px;line-height:1.3;margin:0}
.b-pxc.s5 .px-un em{display:block;font-style:normal;font-size:10px;color:#aaa;margin-top:3px}

/* below the desktop grid the sheet cannot hold five across */
/* Below the desktop grid the sheet cannot hold five across — but HIDING them was the wrong answer:
   the tile's whole argument is "one offer, five shapes," and two shapes is not an argument. It
   scrolls sideways instead, so every format survives and the point with it. */
@media(max-width:1060px){
  .b-pxtop{flex-direction:column;align-items:flex-start;gap:9px}
  .b-pxsheet{display:flex;overflow-x:auto;overflow-y:hidden;gap:1px;
   scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .b-pxsheet::-webkit-scrollbar{display:none}
  .b-pxcell{flex:0 0 168px;scroll-snap-align:start}
  .bt-ads{min-height:330px}
}

.bt-ads h3.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
 white-space:nowrap}
.b-pxh{margin:0;font-size:15.5px;font-weight:650;letter-spacing:-.01em;line-height:1.35;
 color:var(--pa);max-width:52ch}

/* ══ HOW IT WORKS — the diagram and its controls ══════════════════════════
   The visual carries the model; the three steps are the controls that drive it. That is the whole
   idea — reading drops to one line per step because the diagram is doing the explaining.

   All hw- prefixed. This stylesheet has already cost an afternoon to two components quietly
   claiming the same class name, and the collision gate caught two more on the ads tile today. */
.hw{display:grid;gap:clamp(22px,3.5vh,34px);margin-top:clamp(26px,4vh,42px)}

/* ── the diagram ─────────────────────────────────────────────────────── */
.hw-vis{border:1px solid var(--line);border-radius:14px;background:var(--pan);
 padding:clamp(16px,2.4vw,22px) clamp(16px,2.4vw,24px) clamp(12px,2vw,18px);position:relative;
 overflow:hidden}
.hw-vis::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(120% 90% at 88% 108%,rgba(255,106,26,.09),rgba(255,106,26,0) 58%)}
.hw-month{position:relative;z-index:2;margin:0 0 13px;
 font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:11px;letter-spacing:.16em;
 text-transform:uppercase;color:var(--hi)}

.hw-rows{position:relative;z-index:2;list-style:none;margin:0;padding:0;display:grid;gap:1px}
.hw-row{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:0 13px;
 padding:11px 2px;border-bottom:1px solid var(--line)}
.hw-row:last-child{border-bottom:0}

.hw-dot{width:9px;height:9px;border-radius:99px;background:#39424d;justify-self:center;
 transition:background .3s ease,box-shadow .3s ease,transform .3s ease}
.hw-lbl{font-size:clamp(14.5px,1.6vw,16.5px);font-weight:600;letter-spacing:-.01em;color:#79818c;
 transition:color .3s ease}
.hw-state{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:10.5px;
 letter-spacing:.12em;text-transform:uppercase;color:#59626d;white-space:nowrap;
 transition:color .3s ease,opacity .3s ease;opacity:0}
.hw-row.checking .hw-dot,.hw-row.ok .hw-dot,.hw-row.bad .hw-dot,.hw-row.fixed .hw-dot{}

.hw-row.checking .hw-dot{background:#8b939d;transform:scale(1.25);
 box-shadow:0 0 0 5px rgba(139,147,157,.14)}
.hw-row.checking .hw-lbl{color:var(--pa)}

.hw-row.ok .hw-dot{background:#3f4a56}
.hw-row.ok .hw-lbl{color:#8b939d}
.hw-row.ok .hw-state{opacity:1;color:#59626d}

.hw-row.bad .hw-dot{background:var(--hi);box-shadow:0 0 0 5px rgba(255,106,26,.16)}
.hw-row.bad .hw-lbl{color:var(--pa)}
.hw-row.bad .hw-state{opacity:1;color:var(--hi)}

.hw-row.fixed .hw-dot{background:#2ea36a;box-shadow:0 0 0 5px rgba(46,163,106,.16)}
.hw-row.fixed .hw-lbl{color:var(--pa)}
.hw-row.fixed .hw-state{opacity:1;color:#3fbe7f}

/* ── the controls ────────────────────────────────────────────────────── */
.hw-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hw-step{display:block;text-align:left;font:inherit;color:inherit;cursor:pointer;
 background:var(--pan);border:1px solid var(--line);border-radius:14px;
 padding:15px 17px 16px;position:relative;overflow:hidden;
 transition:border-color .25s ease,transform .25s cubic-bezier(.2,.8,.2,1),background .25s ease}
.hw-step::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--hi);
 transform:scaleX(0);transform-origin:0 50%;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.hw-step:hover{border-color:#3d4550;transform:translateY(-2px)}
.hw-step:focus-visible{outline:2px solid var(--hi);outline-offset:3px}
.hw-step.on{background:#181c22;border-color:#3d4550}
.hw-step.on::after{transform:scaleX(1)}

.hw-k{display:block;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:10.5px;
 letter-spacing:.16em;text-transform:uppercase;color:var(--soft);transition:color .25s ease}
.hw-step.on .hw-k{color:var(--hi)}
.hw-step b{display:block;margin-top:7px;font-size:clamp(15.5px,1.8vw,18px);font-weight:650;
 letter-spacing:-.015em;line-height:1.28;color:var(--pa)}
.hw-step em{display:block;margin-top:8px;font-style:normal;font-size:13.5px;line-height:1.55;
 color:#98a1ac}
.hw-f{display:block;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);
 font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:10px;letter-spacing:.1em;
 text-transform:uppercase;color:#59626d}

@media(max-width:760px){
  .hw-steps{grid-template-columns:minmax(0,1fr)}
  .hw-step em{display:none}          /* on a phone the diagram is the message; the line is spare */
  .hw-step.on em{display:block}
}
@media(prefers-reduced-motion:reduce){
  .hw-dot,.hw-lbl,.hw-state,.hw-step,.hw-step::after{transition:none}
}

/* a sub-heading inside a tier list - the lists are long on purpose now, and length only
   works if the eye can jump to the part the owner cares about */
.pr-l li.pr-g{list-style:none;margin:18px 0 7px;padding:0;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;
 font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--hi);opacity:.9}
.pr-l li.pr-g:first-child{margin-top:0}
.pr-l li.pr-g::before{content:none}

/* ══ MOBILE ══════════════════════════════════════════════════════════════
   Measured at 390px before any of this was written. The nav was hiding four destinations — two of
   them separate pages with no other route — behind a media query, and the two links that survived
   were 18px tall against a 44px minimum. */
.burger{display:none;background:none;border:0;padding:11px 4px;cursor:pointer;
 width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;align-items:flex-end}
.burger i{display:block;width:22px;height:2px;background:var(--pa);border-radius:2px;
 transition:transform .25s ease,width .25s ease}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg);width:22px}
.burger:focus-visible{outline:2px solid var(--hi);outline-offset:2px;border-radius:6px}

.navmenu{display:none}
@media(max-width:900px){
  nav .r{display:none}
  .burger{display:flex}
  .navmenu{display:block;position:absolute;left:0;right:0;top:100%;
   background:rgba(12,14,17,.98);backdrop-filter:blur(14px);
   border-top:1px solid var(--line);border-bottom:1px solid var(--line);
   padding:6px clamp(20px,4.5vw,46px) 14px}
  .navmenu[hidden]{display:none}
  .navmenu a.m{display:block;padding:15px 2px;min-height:48px;
   font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:13.5px;
   letter-spacing:.1em;text-transform:uppercase;color:var(--pa);text-decoration:none;
   border-bottom:1px solid var(--line)}
  .navmenu a.m:last-child{border-bottom:0;color:var(--hi)}
  .navmenu a.m:active{background:#181c22}
  /* the wordmark is a link too — give it a real target */
  .brand{padding:11px 0;min-height:44px}
}

/* the pricing lists, collapsed on a phone — 5,410px of stacked cards is not a comparison */
@media(max-width:760px){
  .pr-l.capped{max-height:190px;overflow:hidden;
   -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);
   mask-image:linear-gradient(180deg,#000 60%,transparent)}
  .pr-l.capped.open{max-height:none;-webkit-mask-image:none;mask-image:none}
  .prToggle{display:block;width:100%;margin-top:14px;min-height:46px;
   background:#181c22;border:1px solid var(--line);border-radius:10px;color:var(--pa);
   font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:13px}
  .prToggle:active{background:#1e242b}
  .prToggle:focus-visible{outline:2px solid var(--hi);outline-offset:2px}
}

/* ══ THE OFFER ═══════════════════════════════════════════════════════════
   A price with nothing beside it is a number. These three blocks are what turn it into a deal:
   the reason it can be this low, what the same thing costs bought separately, and what happens if
   it does not work out. Every figure is the CHEAPEST price anyone charges, per Market-Comps' own
   value-anchor rule — a defensibly low comparison cannot be argued down by an owner who knows the
   real prices, and an inflated one is dismissed on sight. */
.whycheap{max-width:74ch;margin:0 0 clamp(24px,3.5vh,34px);font-size:15.5px;line-height:1.65;
 color:var(--soft);padding:16px 18px;border-left:2px solid var(--hi);background:#14171c;
 border-radius:0 10px 10px 0}
.whycheap b{color:var(--pa);font-weight:650}

.pr-deal{margin:14px 0 0;padding:14px 15px;border-radius:10px;background:#101318;
 border:1px solid var(--line);font-size:13.5px;line-height:1.6;color:#98a1ac}
.pr-deal b{color:var(--pa);font-weight:650}
.pr-parts{display:block;margin:11px 0;padding:0}
.pr-parts span{display:flex;justify-content:space-between;gap:12px;padding:5px 0;
 border-bottom:1px dotted #2b323b;font-size:13px;color:#8b939d}
.pr-parts span:last-child{border-bottom:0}
.pr-parts span b{color:#c3cad3;font-variant-numeric:tabular-nums;font-weight:650}
b.pr-sum{display:block;margin-top:9px;padding-top:9px;border-top:1px solid #333b45;
 font-size:14.5px;color:var(--hi) !important;letter-spacing:-.01em}

.pr-risk{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--soft);
 padding-top:12px;border-top:1px solid var(--line)}

@media(max-width:760px){
  .pr-deal{font-size:13px}
  .pr-parts span{font-size:12.5px}
}


/* ≤360: the two rows that still ran out of width at 320px. Found by Layout-Sweep, which is the
   only reason anyone knows they existed — nothing narrower than 390 had ever been measured. */
@media(max-width:360px){
  .b-ml{flex-wrap:wrap;row-gap:1px}
  .b-ml span{flex:1 1 100%}
  .b-ml b{margin-left:0}
  .b-pxnums{flex-wrap:wrap;gap:5px 18px}
}

/* ══ THE AD CELLS — the native furniture that makes them read as real ═════
   Added when the five creatives were rewritten to the Ad-Engine gate. Everything here is px-
   prefixed: this stylesheet has already lost an afternoon to two components claiming one class
   name, and the collision gate caught two more on this same tile. */

/* search — sitelinks. A real search ad spends the extension slot on something USEFUL rather than
   restating the headline, which is also why one of these is the legal-limits page. */
.b-pxc.s1 .px-sl{display:flex;gap:14px;margin:9px 0 0;padding-top:8px;border-top:1px solid #ebecef}
.b-pxc.s1 .px-sl span{font-size:11.5px;color:#1a0dab;white-space:nowrap}

/* maps — drive time is the most native thing on the surface and the strongest denominator there is:
   it answers "how far" before they have to ask. */
.b-pxc.s2 .px-eta{margin:5px 0 0;font-size:11px;color:#5f6368}
.b-pxc.s2 .px-eta b{color:#1a73e8;font-weight:600}
.b-pxc.s2 .px-off{margin:5px 0 0;padding-top:6px;border-top:1px solid #ecedef;
 font-size:11px;font-weight:600;color:#202124}

/* feed + pre-roll — the hook burned into the creative, because both surfaces are judged with the
   sound off and the caption unread */
.b-pxc.s3 .px-im{position:relative}
.b-pxc.s3 .px-im::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
 background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.62))}
.px-hook{position:absolute;left:12px;right:12px;bottom:11px;z-index:2;margin:0;color:#fff;
 font-stretch:76%;font-weight:800;letter-spacing:-.02em;line-height:1.06;font-size:21px;
 text-shadow:0 2px 14px rgba(0,0,0,.5)}
.px-hook em{font-style:normal;color:var(--hi)}
.b-pxc.s5 .px-hk5{bottom:44px;font-size:23px}

/* ══ THE AD CARDS, RESIZED FOR THE SIZE THEY ARE ACTUALLY SHOWN AT ═══════
   Steve: "those ads suck". The copy was not the problem the second time — the SCALE was. These
   render in a ~219px cell on a desktop and a fixed 168px one on a phone, so a card authored 330px
   wide with 12px body copy shows that copy at about 7px. Nobody has ever read a 7px ad.

   So each card is authored narrower with much larger relative type: less said, bigger, legible at
   the size it is actually seen. An ad shown as a thumbnail has to work as a thumbnail — which is
   also true of the real ones, where the feed is scrolled at arm's length. */
.b-pxc.s1{width:236px;padding:13px 14px 14px}
.b-pxc.s1 .px-sp{font-size:11.5px;font-weight:700;margin:0 0 3px;color:#202124}
.b-pxc.s1 .px-t{font-size:17px;line-height:1.2;margin:0 0 6px}
.b-pxc.s1 .px-d{font-size:13px;line-height:1.42}

.b-pxc.s2{width:208px}
.b-pxc.s2 .px-mv{height:72px}
.b-pxc.s2 .px-c2{padding:9px 10px 11px}
.b-pxc.s2 .px-nm{font-size:15px}
.b-pxc.s2 .px-rt{font-size:12.5px;margin-top:3px}
.b-pxc.s2 .px-off{font-size:12.5px;margin-top:6px;padding-top:6px}

.b-pxc.s3{width:186px}
.b-pxc.s3 img{height:186px}
.b-pxc.s3 .px-cap{font-size:12px;padding:8px 10px 10px}
.b-pxc.s3 .px-hook{font-size:23px;left:10px;right:10px;bottom:9px}

.b-pxc.s4{width:146px;height:252px}
.b-pxc.s4 .px-msg{font-size:19px;left:10px;right:10px;bottom:46px}
.b-pxc.s4 .px-msg em{font-size:12px;margin-top:7px}

.b-pxc.s5{width:238px}
.b-pxc.s5 .px-fr{height:134px}
.b-pxc.s5 .px-un{font-size:12.5px;padding:9px 10px 11px}
.b-pxc.s5 .px-hk5{font-size:24px;bottom:40px;left:10px;right:10px}

/* ══ HOW IT WORKS, after the diagram came out ════════════════════════════
   The six-row visual was a second telling of the six steps the rig above already teaches by letting
   you tap them, so it went. The three steps are plain cards now rather than tab controls — nothing
   left to control — and they get to be the section instead of the caption under a widget. */
.hw-steps{list-style:none;margin:0;padding:0}
.hw-step{cursor:default;display:flex;flex-direction:column}
.hw-step .hw-f{margin-top:auto}
.hw-step:hover{transform:none}


/* ══ THE TAP INSTRUCTION ══════════════════════════════════════════════════
   It was a 10px mono caption in muted grey — footnote treatment on the one instruction the whole
   section depends on. If nobody taps, the diagnostic never runs and the six steps are just a list.
   Orange, bigger, with an arrow that keeps nudging until someone does. */
.taphint{text-align:center}
.taphint-b{display:inline-flex;align-items:center;gap:9px;
 font-family:"Archivo",ui-sans-serif,system-ui,sans-serif;font-size:14px;font-weight:650;
 letter-spacing:-.01em;text-transform:none;color:var(--hi);
 padding:9px 16px;border-radius:99px;border:1px solid rgba(255,106,26,.42);
 background:rgba(255,106,26,.08)}
.taphint-b svg{width:16px;height:16px;flex:0 0 auto;animation:tapnudge 1.9s ease-in-out infinite}
@keyframes tapnudge{
  0%,58%,100%{transform:translateY(0)}
  72%{transform:translateY(4px)}
  86%{transform:translateY(0)}
}
/* it has done its job once a step is open — stop nagging */
.rig.touched .taphint{opacity:0;transition:opacity .4s ease;pointer-events:none}
@media(prefers-reduced-motion:reduce){.taphint-b svg{animation:none}}

/* ══ THE DECK — direction C ══════════════════════════════════════════════
   Five ads in a strip is an inventory: it says there are five of these. The deck says all five are
   HERE, stacked, and hands you one at a time. You can see there are more behind it, which the strip
   had to tell you with dots — and because only one is on screen it gets to be big, instead of five
   thumbnails at 168px each.

   Everything is transform and opacity, on five nodes, with no measurement in the loop. Every heavier
   version of an animated block in this project has frozen a renderer. */
.b-pxsheet.b-deck{display:grid;place-items:center;position:relative;
 perspective:1200px;overflow:visible;gap:0;grid-template-columns:none}
.b-deck .b-pxcell{position:absolute;background:none;overflow:visible;
 transition:transform .66s cubic-bezier(.34,0,.2,1), opacity .5s ease;
 transform-style:preserve-3d;will-change:transform,opacity}
.b-deck .b-pxcell .b-pxshot{position:static;transform:none;left:auto;top:auto}
.b-deck .b-pxcell .b-pxlbl{display:none}          /* one caption under the deck now, not five */
.b-deck .b-pxc{box-shadow:0 30px 60px rgba(0,0,0,.62),0 2px 8px rgba(0,0,0,.4)}

/* the stack, by distance from the top card */
.b-deck .b-pxcell[data-d="0"]{transform:translate3d(0,0,0) rotate(0deg);opacity:1;z-index:6}
.b-deck .b-pxcell[data-d="1"]{transform:translate3d(0,15px,-95px) rotate(-2.4deg);opacity:.62;z-index:5}
.b-deck .b-pxcell[data-d="2"]{transform:translate3d(0,28px,-190px) rotate(1.9deg);opacity:.36;z-index:4}
.b-deck .b-pxcell[data-d="3"]{transform:translate3d(0,39px,-275px) rotate(-1.3deg);opacity:.18;z-index:3}
.b-deck .b-pxcell[data-d="4"]{transform:translate3d(0,48px,-350px) rotate(.9deg);opacity:.08;z-index:2}
/* the throw */
.b-deck .b-pxcell.gone{transform:translate3d(0,-46px,270px) rotate(-7deg);opacity:0;z-index:7}

.b-decknav{position:absolute;left:0;right:0;bottom:2px;z-index:9;
 display:flex;align-items:center;justify-content:center;gap:12px;pointer-events:none}
.b-deckl{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:10px;
 letter-spacing:.16em;text-transform:uppercase;color:var(--soft);min-width:74px;text-align:right}
.b-deckd{display:flex;gap:5px}
.b-deckd i{width:5px;height:5px;border-radius:99px;background:#2b323b;transition:background .3s}
.b-deckd i.on{background:var(--hi)}

@media(prefers-reduced-motion:reduce){
  .b-deck .b-pxcell{transition:none}
}

/* ══ THE ADS TILE, SPLIT FOR THE DECK ════════════════════════════════════
   A strip wanted a wide short box. A deck wants a squarish one — stacked cards need depth to read,
   and depth needs height. So above 900 the tile becomes two columns: the sentence and the ad maths
   on the left, the deck on the right with room to be a real size. Below that it stacks and the deck
   sits under the copy, which is the same arrangement a phone would force anyway. */
@media(min-width:900px){
  .bt-ads .b-pxwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,36%);
   gap:clamp(18px,2.4vw,34px);align-items:stretch}
  .bt-ads .b-pxtop{flex-direction:column;align-items:flex-start;justify-content:center;
   gap:clamp(12px,2vh,20px);align-self:center}
  .bt-ads .b-pxh{font-size:clamp(16px,1.55vw,19px);max-width:none;text-wrap:balance}
  .bt-ads .b-pxnums{flex-wrap:wrap;gap:6px 22px}
  .b-pxsheet.b-deck{height:100%;min-height:250px}
}

/* the second beat under the ads heading — the shapes argument, demoted from headline to support
   now that the deck says it visually */
.b-pxh span{display:block;margin-top:9px;font-size:13.5px;font-weight:400;line-height:1.5;
 color:#79818c;max-width:44ch}

/* ══ THE HERO'S OWN CUT ══════════════════════════════════════════════════
   The h1 was 108px against 60px section headings — 1.8x — and identical in every other respect:
   same weight, same 76% width, same tracking. The eye reads shape before scale, so that reads as a
   large h2. The hero now uses a narrower cut of the same family (62%), tighter tracking and leading
   set under the cap height so the two lines lock into a single block. Different order of type, not
   just more of it.

   Below 640 the cut opens back up: a 62% width at 46px on a phone is cramped rather than
   authoritative, and the hero has no competition on that screen anyway. */
@media(max-width:640px){
  .hero h1{font-stretch:70%;letter-spacing:-.026em;line-height:.9}
}
/* the accent line sits tight under the first, as one mass */
.hero h1 .b{margin-top:-.02em}

/* ══ THE NIGHT TILE — words and phone stop sharing the same space ════════
   The caption ran the full width of the tile while the phone sat at right:11%, so the headline was
   printed under it — 31px of overlap in the live layout, 62px in a narrower one. Found by measuring
   the bento board; it had been shipping. Horizontal clearance rather than vertical, because the
   tile is 300-470px tall depending on the arrangement and only one of those heights would have been
   fixed by moving the phone up. */
.b-night{container-type:inline-size}
@container (max-width:430px){
  /* too narrow for a phone AND a sentence — the sentence wins, and the words get the whole tile */
  .b-nphone{display:none}
}
@container (min-width:430.01px){
  /* the phone is there, so the caption yields exactly the width it occupies — no more */
  .b-ncap{right:calc(11% + 146px)}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   2026-09-07 · THE CONVERSION PASS
   Four things the site explained but never SHOWED, plus the one claim that had to come out.
   Everything below sits on the existing surface ladder and the single --hi accent; no new palette,
   no new type scale, no animation that has to finish before the page makes sense.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── DOES THIS SOUND FAMILIAR ──────────────────────────────────────────────────────────────────
   Recognition, not fear. Six sentences in an owner's own words, set as quotes so it is obvious
   they are HIS lines and not mine. Deliberately undecorated: the whole job is "that's me". */
.fam{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:26px}
.fam q{display:block;background:var(--pan);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;font-size:1.02rem;line-height:1.55;color:var(--pa);quotes:none;
  box-shadow:inset 0 1px 0 var(--hair)}
.fam q::before{content:"“";color:var(--hi);font-size:2.2rem;line-height:0;vertical-align:-.35em;
  margin-right:.12em}
.fam-note{margin-top:22px;color:var(--soft);max-width:62ch}

/* ── THE LEAK PATH ─────────────────────────────────────────────────────────────────────────────
   Search → Trust → Quote → Response → Booking → Repeat, readable without touching anything.
   A visitor should get the whole idea from a glance on a phone, which is where these arrive. */
.leak{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin-top:26px}
.leak-step{flex:1 1 150px;background:var(--s2);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;box-shadow:inset 0 1px 0 var(--hair);position:relative}
.leak-step b{display:block;font-size:.95rem;color:var(--pa);margin-bottom:4px}
.leak-step span{display:block;font-size:.85rem;color:var(--soft);line-height:1.45}
.leak-step::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);
  color:var(--hi);font-size:1rem;opacity:.75}
.leak-step:last-child::after{display:none}
@media (max-width:640px){
  .leak{flex-direction:column}
  .leak-step::after{content:"↓";right:auto;left:50%;top:auto;bottom:-14px;transform:translateX(-50%)}
}

/* ── THE SAMPLE AUDIT ──────────────────────────────────────────────────────────────────────────
   The single most persuasive thing available: not a description of the free audit, the audit.
   ⛔ It is labelled ILLUSTRATIVE in the markup and in the visible copy, because inventing a
   client is the one thing that would cost more than it earns. */
.aud{margin-top:26px;background:var(--pan);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;box-shadow:inset 0 1px 0 var(--hair)}
.aud-top{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line);background:var(--s2)}
.aud-top h3{margin:0;font-size:1.15rem;color:var(--pa)}
.aud-tag{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  background:var(--hi);border-radius:999px;padding:4px 10px;font-weight:700}
.aud-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
  background:var(--line)}
.aud-cell{background:var(--pan);padding:18px 22px}
.aud-cell p.k{margin:0 0 8px;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--soft)}
.aud-cell p.v{margin:0;font-size:1.5rem;font-weight:700;color:var(--pa);line-height:1.15}
.aud-cell p.s{margin:6px 0 0;font-size:.86rem;color:var(--soft)}
.aud-leaks{padding:18px 22px;border-top:1px solid var(--line)}
.aud-leaks ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px}
.aud-leaks li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;color:var(--pa)}
.aud-leaks i{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:.45em}
.aud-leaks i.red{background:#ef4d4d}
.aud-leaks i.amb{background:#e2a33a}
.aud-foot{padding:18px 22px;border-top:1px solid var(--line);background:var(--s2);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.aud-foot p{margin:0;color:var(--soft);font-size:.92rem}

/* ── WHAT HAPPENS NEXT ─────────────────────────────────────────────────────────────────────────
   Four steps, and the fourth is the one that matters: "if there is nothing worth fixing, I'll
   tell you." That line removes more pressure than any guarantee badge would. */
.after{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:26px}
.after-step{background:var(--pan);border:1px solid var(--line);border-radius:14px;padding:20px 22px;
  box-shadow:inset 0 1px 0 var(--hair)}
.after-step b.n{display:block;font-size:.75rem;letter-spacing:.1em;color:var(--hi);margin-bottom:8px}
.after-step h4{margin:0 0 7px;font-size:1.02rem;color:var(--pa);font-weight:600}
.after-step p{margin:0;color:var(--soft);font-size:.92rem;line-height:1.55}

/* ── CAPACITY ──────────────────────────────────────────────────────────────────────────────────
   Real scarcity, and only the true kind: one person can carry a handful of shops properly. No
   counter, no deadline, no "3 spots left" — the constraint is structural and says so. */
.cap{margin-top:26px;background:var(--s2);border:1px solid var(--line);border-left:3px solid var(--hi);
  border-radius:14px;padding:22px 24px;box-shadow:inset 0 1px 0 var(--hair)}
.cap h3{margin:0 0 10px;font-size:1.1rem;color:var(--pa)}
.cap p{margin:0 0 10px;color:var(--soft);line-height:1.6;max-width:66ch}
.cap p:last-child{margin-bottom:0}

/* ── STICKY MOBILE CTA ─────────────────────────────────────────────────────────────────────────
   These arrive from a cold email on a phone, so the ask is never more than a thumb away. Phone
   only: on a desktop it would be a nag, and the page already carries the CTA five times. */
.sticky-cta{display:none}
@media (max-width:760px){
  .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(12,14,17,.94);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .sticky-cta a{display:block;text-align:center;background:var(--hi);color:#120a04;font-weight:700;
    text-decoration:none;border-radius:12px;padding:14px 16px;font-size:1rem}
  body{padding-bottom:74px}
}

/* Sample audit v2 (2026-09-29): the owner-only numbers. Blanks on purpose: they are the call. */
.aud-ask li{justify-content:space-between;border-bottom:1px dashed var(--line);padding-bottom:7px}
.aud-ask li b{color:var(--hi);font-variant-numeric:tabular-nums;white-space:nowrap}
.aud-note{margin:12px 0 0;font-size:.88rem;color:var(--soft)}

/* About (2026-09-29): copied from riselocalgrowth.com #about at Steve's ask. */
.who-lede{font-size:1.15rem;color:var(--pa);font-weight:600}
.who-sign{color:var(--pa);font-weight:600;margin-top:4px}
.who-personal{color:var(--soft);font-size:.92rem}

/* Phones (2026-09-30, Steve: "the hero is blocked by the header"). The hero's top padding equalled the
   fixed header's height, so the eyebrow sat ~11px under it and slid beneath it on short screens. And the
   scroll cue collided with the sticky audit bar. */
@media(max-width:700px){
  .hero .in{padding-top:124px}
  .hero .scroller{display:none}
}