/* ============================================================
   JobParrot v10 — "The Paper City"
   The city is a quiet paper sculpture; everything alive is
   drawn in ink; color exists only where a brand or a success lives.
   ============================================================ */

:root{
  --paper:#FAF9F5;
  --paper-deep:#F3F1EA;
  --ink:#191918;
  --ink-2:#454440;
  --ink-3:#6E6A63;
  --hairline:#E7E3DB;
  --roof:#FFFFFF;
  --wall-l:#F0EDE6;
  --wall-r:#D8D4CB;
  --wall-d:#C1BCB1;
  --glass:#CFCAC0;
  --road:#CDC8BF;
  --sidewalk:#EDEAE2;
  --curb:#DCD8CF;
  --far:#E8E4DC;
  --ok:#2E7D4C;
  --ok-tint:#E4EFE5;
  --shadow:rgba(25,25,24,0.08);
  --shadow-strong:rgba(25,25,24,0.12);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  font-family:var(--sans); font-size:16px; line-height:1.65; color:var(--ink-2);
  background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.container{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.container-narrow{max-width:760px}

/* ---------------- NAV ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,3.4vw,48px);
  transition:background .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(250,249,245,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom-color:var(--hairline)}
.brand{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--ink); text-decoration:none}
.brand-mark{display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--ink)}
.brand-mark svg{width:16px; height:16px}
.nav-right{display:flex; align-items:center; gap:clamp(12px,2.2vw,30px)}
.nav-links{display:contents}
.nav-right a{color:var(--ink-2); text-decoration:none; font-size:14.5px; font-weight:500; transition:color .2s; white-space:nowrap}
.nav-right a:hover{color:var(--ink)}
.nav-cta{
  font-weight:600; font-size:14px; color:var(--paper)!important; background:var(--ink);
  padding:9px 18px; border-radius:999px; transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(25,25,24,.18)}
@media (max-width:760px){ .nav-links{display:none} }

/* ---------------- HERO ---------------- */
.hero{position:relative; width:100%; height:100vh; height:100svh; min-height:640px; max-height:1400px; overflow:hidden; background:var(--paper)}
#scene{position:absolute; inset:0; width:100%; height:100%; display:block}

.lede{
  position:absolute; left:clamp(22px,4vw,60px); top:clamp(96px,15vh,190px);
  z-index:12; max-width:min(48vw,600px); pointer-events:none;
}
.eyebrow{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:20px;
}
.lede h1{
  margin:0 0 18px; font-family:var(--serif); font-weight:500;
  font-size:clamp(46px,5.4vw,84px); line-height:1.02; letter-spacing:-.015em; color:var(--ink);
  text-shadow:0 1px 0 rgba(250,249,245,.65), 0 0 24px rgba(250,249,245,.9);
}
.lede h1 em{font-style:italic; font-weight:500}
.lede p{
  margin:0 0 22px; font-size:clamp(15px,1.2vw,18px); line-height:1.6; color:var(--ink-2);
  max-width:44ch; text-shadow:0 0 16px rgba(250,249,245,.9), 0 0 6px rgba(250,249,245,.9);
}
.counter{
  pointer-events:auto; display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500;
  color:var(--ink-2); background:rgba(255,255,255,.72); border:1px solid var(--hairline);
  border-radius:999px; padding:8px 15px; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.counter .dot, .card-live .dot{
  width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none;
  box-shadow:0 0 0 0 rgba(46,125,76,.45); animation:livePulse 2.6s ease-out infinite;
}
.counter b{font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(46,125,76,.4)}70%{box-shadow:0 0 0 9px rgba(46,125,76,0)}100%{box-shadow:0 0 0 0 rgba(46,125,76,0)}}

.lede-cta{
  display:none; pointer-events:auto; margin-top:22px; flex-direction:column; align-items:flex-start; gap:3px;
  font-size:15.5px; font-weight:600; letter-spacing:-.01em; color:var(--paper); background:var(--ink);
  padding:14px 24px; border-radius:12px; text-decoration:none; width:max-content;
  box-shadow:0 8px 24px rgba(25,25,24,.18); transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.lede-cta:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(25,25,24,.24)}
.lede-cta small{font-weight:500; font-size:11.5px; opacity:.72; letter-spacing:.01em}
@media (max-aspect-ratio:8/5){ .lede-cta{display:inline-flex} .bb-cta-hit{display:none!important} }
@media (max-width:760px){ .lede{max-width:min(92vw,560px)} }

/* real link laid over the SVG billboard button */
.bb-cta-hit{
  position:absolute; z-index:14; display:block; border-radius:12px;
  color:transparent; font-size:0; text-decoration:none;
  outline-offset:3px;
}
.bb-cta-hit[hidden]{display:none!important}
.bb-cta-hit:focus-visible{outline:2.5px solid var(--ink)}

.scrollhint{
  position:absolute; left:clamp(24px,4vw,62px); bottom:24px; z-index:12;
  font-size:11px; letter-spacing:.2em; font-weight:600; color:var(--ink-3); text-transform:uppercase;
  display:flex; align-items:center; gap:12px; pointer-events:none;
}
.scrollhint .bar{width:32px; height:1px; background:var(--ink-3); animation:sink 2s ease-in-out infinite; transform-origin:left center}
@keyframes sink{0%,100%{opacity:.3; transform:scaleX(.55)}50%{opacity:.75; transform:scaleX(1)}}

/* ============================================================
   SVG SCENE CLASSES
   Architecture: stroke-less flat fills + paper seams.
   Living things: 1.5px ink strokes.
   ============================================================ */
.f-roof{fill:var(--roof)} .f-wallL{fill:var(--wall-l)} .f-wallR{fill:var(--wall-r)} .f-wallD{fill:var(--wall-d)}
.seam{fill:none; stroke:var(--paper); stroke-width:2.5; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.gshadow{fill:var(--shadow)}
.ao{fill:var(--shadow-strong)}
.win{fill:var(--glass)}
.win.lit{fill:#FFFFFF}
.win.blind{fill:#BDB8AD}
.win.tw{animation:twinkle 4.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.4}50%{opacity:1}}
.road{fill:var(--road)} .sidewalk{fill:var(--sidewalk)} .curbf{fill:var(--curb)}
.dash,.zebra{fill:var(--paper)}
.plaza{fill:var(--sidewalk)}
.manhole{fill:#C1BCB1}
.far-sil{fill:var(--far)}
.ground-plane{fill:var(--paper-deep)}
.sky{fill:var(--paper)}

/* ink-drawn living things */
.live{stroke:var(--ink); stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round}
.live-thin{stroke:var(--ink); stroke-width:1.1; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round}

/* sky life: clouds drift, birds glide + flap, one plane tows a banner.
   Wrappers animate; inner groups hold static positions so the
   reduced-motion frame still shows a composed sky. */
.cloud{animation:cloudDrift linear infinite}
@keyframes cloudDrift{from{transform:translateX(-2150px)}to{transform:translateX(2150px)}}
.skybird{animation:birdFly linear infinite}
@keyframes birdFly{from{transform:translate(-2150px,26px)}to{transform:translate(2150px,-38px)}}
.skybird path{fill:none; stroke:var(--ink); stroke-width:1.6; vector-effect:non-scaling-stroke;
  stroke-linecap:round; transform-box:fill-box; transform-origin:center; animation:flap .55s ease-in-out infinite}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}
.plane-wrap{animation:planeFly 70s linear infinite}
@keyframes planeFly{from{transform:translateX(-2400px)}to{transform:translateX(2400px)}}
.plane-bob{animation:planeBob 4.6s ease-in-out infinite}
@keyframes planeBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5px)}}
.banner-swing{transform-box:fill-box; transform-origin:right center; animation:bannerSwing 3.4s ease-in-out infinite}
@keyframes bannerSwing{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.2deg)}}
.banner-tx{fill:var(--ink); font:700 11px var(--sans); letter-spacing:.08em}

.tree-trunk{fill:#CFCAC0}
.tree-canopy{fill:#FFFFFF}
.puff{transform-box:fill-box; transform-origin:center; animation:steamRise linear infinite; opacity:0; fill:#DEDAD1}
@keyframes steamRise{0%{opacity:0; transform:translateY(0) scale(.5)}25%{opacity:.55}100%{opacity:0; transform:translateY(-34px) scale(1.45)}}
.beacon{animation:beacon 2.8s steps(1,end) infinite}
@keyframes beacon{0%,55%{opacity:1}56%,100%{opacity:.15}}

/* traffic lights: JS toggles .on; monochrome (green is reserved) */
.tl-lamp{fill:#C6C1B7; stroke:#191918; stroke-width:0.7; transition:fill .2s}
.tl-lamp.on{fill:#FFFFFF}
.tl-lamp.on-stop{fill:#191918}

/* sign panels */
.sign-panel{fill:#FFFFFF; stroke:var(--ink); stroke-width:1.2; vector-effect:non-scaling-stroke}
.sign-depth{fill:var(--wall-d)}
.sign-strut{fill:var(--ink)}
.sign-shadow{fill:var(--shadow)}
.sign{transform-box:fill-box; transform-origin:center bottom}
.sign.bounce{animation:signBounce .5s var(--spring)}
@keyframes signBounce{0%{transform:translateY(0)}35%{transform:translateY(3px)}100%{transform:translateY(0)}}

/* delivery papers */
.env-face{fill:#FFFFFF}
.env-line{stroke:#B9B4AB; stroke-width:1; vector-effect:non-scaling-stroke}
.plane-face{fill:#FFFFFF}
.plane-fold{fill:#EAE7E0}

/* APPLIED stamp — the one green moment */
.stampG{opacity:0; pointer-events:none}
.stampG.show{opacity:1}
.stampG.fade{opacity:0; transition:opacity .5s ease}
.stampG .inner{transform-box:fill-box; transform-origin:center; transform:scale(.25) rotate(-8deg)}
.stampG.show .inner{animation:stampPop .5s var(--spring) forwards}
@keyframes stampPop{0%{transform:scale(.25) rotate(-8deg)}100%{transform:scale(1) rotate(-8deg)}}
.stampG .ring{fill:none; stroke:var(--ok); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center}
.stampG.show .ring{animation:stampRing .7s ease-out forwards}
@keyframes stampRing{0%{opacity:.65; transform:scale(.5)}100%{opacity:0; transform:scale(1.9)}}
.stamp-bg{fill:var(--ok)}
.stamp-chk{stroke:#fff; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round}
.stamp-tx{fill:#fff; font:700 11.5px var(--sans); letter-spacing:.09em}

/* ---------------- POSTMAN ---------------- */
.pm-fill{fill:#37352F}
.pm-skin{fill:#F3F1EC}
.pm-bagf{fill:#D8D4CB}
.pm-pants{fill:#5C5952}
.pm-limb{stroke:#37352F; stroke-width:4.6; stroke-linecap:round; fill:none}
.pm-limb-leg{stroke:#5C5952; stroke-width:4.6; stroke-linecap:round; fill:none}
.pm-limb-arm{stroke:#37352F; stroke-width:4.2; stroke-linecap:round; fill:none}
.pm-shoe{fill:#191918}

.pm-thigh{transform-box:fill-box; transform-origin:center top}
.pm-shin{transform-box:fill-box; transform-origin:center top}
.pm-arm{transform-box:fill-box; transform-origin:center top}
.pm-body{transform-box:fill-box; transform-origin:center bottom}
.pm-bag{transform-box:fill-box; transform-origin:center top}
.pm-headGrp{transform-box:fill-box; transform-origin:center bottom; transition:transform .35s var(--ease)}
.pm-cap{transform-box:fill-box; transform-origin:center bottom}
.pm-env{opacity:0}

/* walk cycle — 0.7s, stride-locked to ground speed in actors.js */
.pm.walk .pm-thigh.l{animation:pmThigh .7s cubic-bezier(.37,0,.63,1) infinite}
.pm.walk .pm-thigh.r{animation:pmThigh .7s cubic-bezier(.37,0,.63,1) -0.35s infinite}
.pm.walk .pm-shin.l{animation:pmShin .7s linear infinite}
.pm.walk .pm-shin.r{animation:pmShin .7s linear -0.35s infinite}
.pm.walk .pm-arm.f{animation:pmArm .7s cubic-bezier(.37,0,.63,1) infinite}
.pm.walk .pm-arm.b{animation:pmArm .7s cubic-bezier(.37,0,.63,1) -0.35s infinite}
.pm.walk .pm-body{animation:pmBob .35s ease-in-out infinite}
.pm.walk .pm-bag{animation:pmBag .7s ease-in-out .06s infinite}
@keyframes pmThigh{0%{transform:rotate(24deg)}50%{transform:rotate(-24deg)}100%{transform:rotate(24deg)}}
@keyframes pmShin{0%{transform:rotate(-3deg)}30%{transform:rotate(7deg)}50%{transform:rotate(14deg)}72%{transform:rotate(52deg)}88%{transform:rotate(10deg)}100%{transform:rotate(-3deg)}}
@keyframes pmArm{0%{transform:rotate(-20deg)}50%{transform:rotate(20deg)}100%{transform:rotate(-20deg)}}
@keyframes pmBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.7px)}}
@keyframes pmBag{0%,100%{transform:rotate(3.5deg)}50%{transform:rotate(-3.5deg)}}

/* delivery poses */
.pm.reach .pm-arm.f{animation:none; transform:rotate(38deg)}
.pm.reach .pm-arm.b{animation:none; transform:rotate(-6deg)}
.pm.hand .pm-arm.f{animation:none; transform:rotate(-58deg)}
.pm.hand .pm-arm.b{animation:none; transform:rotate(4deg)}
.pm.reach .pm-thigh,.pm.hand .pm-thigh,.pm.idle .pm-thigh{animation:none; transform:rotate(3deg)}
.pm.reach .pm-thigh.r,.pm.hand .pm-thigh.r,.pm.idle .pm-thigh.r{transform:rotate(-5deg)}
.pm.reach .pm-shin,.pm.hand .pm-shin,.pm.idle .pm-shin{animation:none; transform:rotate(1deg)}
.pm.reach .pm-body,.pm.hand .pm-body,.pm.idle .pm-body{animation:none}
.pm.reach .pm-bag,.pm.hand .pm-bag,.pm.idle .pm-bag{animation:none}
.pm.idle .pm-arm{animation:none; transform:rotate(4deg)}
.pm.idle .pm-arm.b{transform:rotate(-4deg)}
.pm.hand .pm-env{opacity:1}
.pm.lookup .pm-headGrp{transform:rotate(-10deg) translateY(-.5px)}
.pm-cap.tip{animation:capTip .6s ease-in-out 1}
@keyframes capTip{0%,100%{transform:rotate(0)}42%{transform:rotate(-22deg) translateY(-1.6px)}}

/* pedestrians */
.ped .ped-leg{stroke:#454440; stroke-width:2.6; stroke-linecap:round; transform-box:fill-box; transform-origin:center top}
.ped.pwalk .ped-leg.a{animation:pedLeg .6s cubic-bezier(.37,0,.63,1) infinite}
.ped.pwalk .ped-leg.b{animation:pedLeg .6s cubic-bezier(.37,0,.63,1) -0.3s infinite}
.ped.pwalk .ped-up{animation:pmBob .3s ease-in-out infinite; transform-box:fill-box; transform-origin:center bottom}
@keyframes pedLeg{0%{transform:rotate(20deg)}50%{transform:rotate(-20deg)}100%{transform:rotate(20deg)}}

/* pigeons */
.pigeon{transform-box:fill-box; transform-origin:center bottom}
.pigeon.hop-a{animation:pigeonHop 9s ease-in-out infinite}
.pigeon.hop-b{animation:pigeonHop 13s ease-in-out -5s infinite}
@keyframes pigeonHop{0%,90%,100%{transform:translate(0,0)}92%{transform:translate(2.5px,-3.5px)}94%{transform:translate(5px,0)}96%{transform:translate(5px,0)}}
.pigeon .peck{transform-box:fill-box; transform-origin:center bottom; animation:peck 4s ease-in-out infinite}
@keyframes peck{0%,80%,100%{transform:rotate(0)}85%,92%{transform:rotate(28deg)}}

/* ---------------- BILLBOARD ---------------- */
.bb-post{fill:#DAD6CD; stroke:var(--ink); stroke-width:1.3; vector-effect:non-scaling-stroke}
.bb-post-d{fill:var(--wall-d); stroke:var(--ink); stroke-width:1.3; vector-effect:non-scaling-stroke}
.bb-brace{stroke:var(--ink); stroke-width:1.3; vector-effect:non-scaling-stroke}
.bb-frame{fill:var(--ink)}
.bb-frame-d{fill:#3A3936}
.bb-inner{fill:#FFFFFF}
.bb-brand-tx{fill:var(--ink); font:700 26px var(--sans); letter-spacing:-.02em}
.bb-eyebrow{fill:var(--ink-3); font:600 11.5px var(--sans); letter-spacing:.18em}
.bb-flap-tx{fill:var(--ink); font:800 34px var(--sans); letter-spacing:.01em}
.bb-flap-line{transform-box:fill-box; transform-origin:center center}
.bb-flap-seam{stroke:#EDEAE2; stroke-width:1.2}
.bb-divider{stroke:var(--hairline); stroke-width:1.2}
.bb-btn-bg{fill:var(--ink)}
.bb-btn-tx{fill:var(--paper); font:600 19px var(--sans); letter-spacing:-.01em}
.bb-btn{transform-box:fill-box; transform-origin:center; transition:transform .18s var(--ease)}
.bb-btn.hover{transform:translateY(-2px)}
.bb-sub{fill:var(--ink-3); font:500 13px var(--sans)}
.bb-sheen{fill:#fff; opacity:.18; animation:btnSheen 7s ease-in-out infinite}
@keyframes btnSheen{0%{transform:translateX(-120px)}10%,100%{transform:translateX(560px)}}
.bb-lamp{fill:var(--ok); animation:bbBlink 2.2s steps(1,end) infinite}
@keyframes bbBlink{0%,60%{opacity:1}61%,100%{opacity:.15}}
.bb-spot{fill:#DAD6CD; stroke:var(--ink); stroke-width:1.2; vector-effect:non-scaling-stroke}

/* entrance choreography */
.bld{transform-box:fill-box; transform-origin:center bottom}
.enter .bld{animation:bldGrow .55s var(--ease) both}
.enter .sign{animation:signPop .45s var(--spring) both}
@keyframes bldGrow{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@keyframes signPop{0%{transform:scale(0)}100%{transform:scale(1)}}
.lede>*{opacity:0; transform:translateY(12px); animation:ledeIn .7s var(--ease) forwards}
.lede>.eyebrow{animation-delay:.15s}
.lede>h1{animation-delay:.25s}
.lede>p{animation-delay:.4s}
.lede>.counter{animation-delay:.55s}
.lede>.lede-cta{animation-delay:.62s}
@keyframes ledeIn{to{opacity:1; transform:none}}

.paused *{animation-play-state:paused!important}

/* ============================================================
   BELOW THE FOLD
   ============================================================ */
.section{padding:clamp(80px,9vw,128px) 0; background:var(--paper)}
.section-deep{background:var(--paper-deep)}
.kicker{
  display:block; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:14px;
}
.section h2, .final h2{
  margin:0 0 20px; font-family:var(--serif); font-weight:500;
  font-size:clamp(32px,3.4vw,46px); line-height:1.15; letter-spacing:-.01em; color:var(--ink);
  max-width:22ch;
}

/* reveal on scroll */
.rv{opacity:0; transform:translateY(16px); transition:opacity .65s var(--ease), transform .65s var(--ease)}
.rv.in{opacity:1; transform:none}

/* ---------------- MARQUEE ---------------- */
.marquee-band{padding:44px 0 52px; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); background:var(--paper)}
.marquee-label{margin:0 0 26px; text-align:center; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.marquee{overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex; align-items:center; gap:64px; width:max-content; animation:marquee 52s linear infinite}
.marquee:hover .marquee-track, .marquee.is-paused .marquee-track{animation-play-state:paused}
.marquee-toggle{
  display:block; margin:18px auto 0; padding:5px 14px; font:600 11.5px var(--sans);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  background:none; border:1px solid var(--hairline); border-radius:999px; cursor:pointer;
}
.marquee-toggle:hover{color:var(--ink); border-color:var(--ink-3)}
.marquee-toggle:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-item{display:flex; align-items:center; gap:10px; flex:none; color:var(--ink-3); font-weight:600; font-size:15px}
.mq-item svg{width:26px; height:26px; filter:grayscale(1); opacity:.55; transition:filter .25s ease, opacity .25s ease}
.mq-item:hover svg{filter:none; opacity:1}
.mq-item:hover{color:var(--ink-2)}

/* ---------------- HOW IT WORKS ---------------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:48px}
.step{position:relative; background:#FFFFFF; border:1px solid var(--hairline); border-radius:12px; padding:30px 28px 26px}
.stamp-num{
  position:absolute; top:-16px; right:22px; display:grid; place-items:center;
  width:52px; height:60px; background:#fff; border:1px solid var(--hairline);
  box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 5px var(--hairline);
  font-family:var(--serif); font-style:italic; font-size:22px; color:var(--ink);
  transform:rotate(2.5deg);
}
.step:nth-child(2) .stamp-num{transform:rotate(-2deg)}
.step-art{height:104px; margin:6px 0 18px; display:grid; place-items:center}
.step-art svg{height:100%; max-width:100%}
.step h3, .card h3{margin:0 0 8px; font-size:18px; font-weight:600; color:var(--ink); line-height:1.35}
.step p, .card p{margin:0; font-size:15px; color:var(--ink-2)}
@media (max-width:900px){ .steps{grid-template-columns:1fr; max-width:520px} }

/* ---------------- FEATURES BENTO ---------------- */
.bento{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px}
.card{background:#FFFFFF; border:1px solid var(--hairline); border-radius:12px; padding:28px; box-shadow:0 1px 2px rgba(25,25,24,.04)}
.card-wide{grid-column:span 2}
.card-icon{width:40px; height:40px; margin-bottom:16px}
.card-icon svg{width:100%; height:100%; stroke:var(--ink); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round}
.card-live{display:flex; align-items:center; gap:9px; margin-top:18px!important; padding-top:16px; border-top:1px solid var(--hairline); font-size:14px}
.card-live b{color:var(--ink); font-variant-numeric:tabular-nums}
@media (max-width:900px){ .bento{grid-template-columns:1fr} .card-wide{grid-column:span 1} }

/* ---------------- STATS ---------------- */
.stats{background:var(--paper); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); padding-top:56px; padding-bottom:56px}
.stat{text-align:center; padding:6px 12px; border-left:1px solid var(--hairline)}
.stat:first-child{border-left:none}
.stat b{display:block; font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(34px,4.2vw,56px); line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums}
.stat span{font-size:13.5px; color:var(--ink-3)}
@media (max-width:900px){ .stats-row{grid-template-columns:1fr 1fr; gap:26px 0} .stat:nth-child(3){border-left:none} }

/* ---------------- TESTIMONIALS ---------------- */
.postcards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:52px}
.postcard{
  position:relative; margin:0; background:#FFFFFF; border:1px solid var(--hairline); border-radius:6px;
  padding:30px 26px 24px; box-shadow:0 1px 3px rgba(25,25,24,.06);
}
.pc-a{transform:rotate(-1.2deg)} .pc-b{transform:rotate(.8deg)} .pc-c{transform:rotate(-.6deg)}
.postmark{
  position:absolute; top:14px; right:14px; display:grid; place-items:center;
  width:74px; height:74px; border:1.6px dashed var(--ok); border-radius:50%;
  color:var(--ok); font-size:9.5px; font-weight:700; letter-spacing:.1em; text-align:center;
  transform:rotate(-12deg); opacity:.85;
}
.postcard blockquote{margin:0 0 20px; font-family:var(--serif); font-size:17.5px; line-height:1.5; color:var(--ink); padding-right:74px}
.postcard figcaption{border-top:1px solid var(--hairline); padding-top:14px; font-size:13.5px}
.postcard figcaption b{display:block; color:var(--ink); font-weight:600}
.postcard figcaption span{color:var(--ink-3)}
@media (max-width:900px){ .postcards{grid-template-columns:1fr; max-width:520px} }

/* ---------------- PRICING ---------------- */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; align-items:stretch}
.tier{position:relative; background:#FFFFFF; border:1px solid var(--hairline); border-radius:14px; padding:34px 30px; display:flex; flex-direction:column}
.tier-popular{border-color:var(--ink); box-shadow:0 10px 32px rgba(25,25,24,.08)}
.tier-stamp{
  position:absolute; top:-13px; left:26px; padding:5px 12px; background:var(--ok); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.1em; transform:rotate(-2deg); border-radius:3px;
}
.tier h3{margin:0 0 8px; font-size:17px; font-weight:600; color:var(--ink)}
.price{margin:0 0 22px; display:flex; align-items:baseline; gap:7px}
.price b{font-family:var(--serif); font-weight:500; font-size:46px; color:var(--ink); letter-spacing:-.01em}
.price span{color:var(--ink-3); font-size:14px}
.tier ul{list-style:none; margin:0 0 28px; padding:0; flex:1}
.tier li{position:relative; padding:7px 0 7px 26px; font-size:14.5px; border-bottom:1px solid var(--paper-deep)}
.tier li::before{content:"✓"; position:absolute; left:2px; top:7px; color:var(--ink); font-weight:700; font-size:12.5px}
.tiers-note{margin:30px 0 0; text-align:center; font-size:13.5px; color:var(--ink-3)}
.btn{
  display:inline-block; text-align:center; text-decoration:none; font-weight:600; font-size:15px;
  padding:13px 26px; border-radius:11px; transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-ink{background:var(--ink); color:var(--paper); box-shadow:0 4px 14px rgba(25,25,24,.16)}
.btn-ink:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(25,25,24,.22)}
.btn-ghost{border:1px solid var(--ink); color:var(--ink)}
.btn-ghost:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(25,25,24,.10)}
@media (max-width:900px){ .tiers{grid-template-columns:1fr; max-width:440px} }

/* ---------------- FAQ ---------------- */
#faq details{border-bottom:1px solid var(--hairline)}
#faq details:first-of-type{margin-top:40px; border-top:1px solid var(--hairline)}
#faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:20px 2px; font-weight:600; font-size:16.5px; color:var(--ink);
}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"+"; font-size:22px; font-weight:400; color:var(--ink-3); transition:transform .2s ease; flex:none}
#faq details[open] summary::after{transform:rotate(45deg)}
#faq details p{margin:0; padding:0 2px 22px; max-width:62ch}

/* ---------------- FINAL CTA ---------------- */
.final{position:relative; background:var(--paper-deep); padding:clamp(90px,10vw,150px) 0 190px; overflow:hidden; border-top:1px solid var(--hairline)}
.final-inner{position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center}
.final h2{max-width:none}
.final p{margin:0 0 30px; color:var(--ink-2)}
.final-scene{position:absolute; left:0; right:0; bottom:0; width:100%; height:160px; z-index:1; pointer-events:none}
.capture{display:flex; gap:10px; width:min(480px,92vw)}
.capture input{
  flex:1; min-width:0; font:500 16px var(--sans); color:var(--ink); background:#fff;
  border:1px solid var(--hairline); border-radius:11px; padding:13px 16px; outline-offset:2px;
}
.capture input:focus-visible{outline:2px solid var(--ink)}
.capture .btn{flex:none}
.capture-note{margin:14px 0 0; font-size:12.5px; color:var(--ink-3)}
.capture-note.ok{color:#276B41; font-weight:600}
@media (max-width:560px){ .capture{flex-direction:column} }

/* ---------------- FOOTER ---------------- */
.footer{position:relative; background:var(--paper); padding:76px 0 0; border-top:1px solid var(--hairline)}
.footer-grid{display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:36px; padding-bottom:48px}
.footer-brand p{margin:14px 0 0; font-size:14px; color:var(--ink-3); max-width:34ch}
.footer h4{margin:2px 0 14px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.footer nav a{display:block; padding:5px 0; color:var(--ink-2); text-decoration:none; font-size:14.5px}
.footer nav a:hover{color:var(--ink)}
.footer-soon{display:block; padding:5px 0; color:var(--ink-3); font-size:14.5px; cursor:default}
.footer-soon::after{content:" · soon"; font-size:11px; letter-spacing:.04em; opacity:.75}
.footer-foot{border-top:1px solid var(--hairline); padding-top:22px; padding-bottom:26px}
.footer-foot p{margin:0; font-size:12.5px; color:var(--ink-3); max-width:80ch}
.footer-skyline{display:block; width:100%; height:72px; margin-top:10px}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr} }

/* final CTA walking postman */
.final-walker{animation:finalWalk 30s linear infinite}
@keyframes finalWalk{from{transform:translateX(-90px)}to{transform:translateX(1300px)}}

/* ---------------- DEBUG / WORKBENCH ---------------- */
.debug-grid line{stroke:rgba(200,60,60,.25); stroke-width:1; vector-effect:non-scaling-stroke}
.debug-safe{fill:none; stroke:rgba(200,60,60,.7); stroke-width:2; stroke-dasharray:8 6; vector-effect:non-scaling-stroke}
body.workbench main > :not(.hero), body.workbench .footer{display:none}
body.workbench .lede, body.workbench .scrollhint, body.workbench .bb-cta-hit{display:none}

/* ---------------- REDUCED MOTION ---------------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
  .lede>*{opacity:1; transform:none}
  .rv{opacity:1; transform:none}
  .stampG.show .inner{transform:scale(1) rotate(-8deg)}
}