/* ============================================================
   Small Fish — home page
   Spacing scale: 8 16 24 32 48 64 96 128 160
   Grid: 12 cols, 24px gutter, content max 1320, page gutter 64
   ============================================================ */
.sf-site{
  --ink:#0E1520; --ink-2:#1B2533; --ink-3:#36404C; --muted:#5B6470; --muted-d:#8A929B;
  --paper:#EEF0EC; --paper-2:#F6F7F4; --surface:#FFFFFF; --fill:#E3E6E0; --line:#D5D9D2; --line-2:#B9BFB6;
  --lure:#C8F03C; --lure-d:#B5DE28; --lure-ink:#4A6508; --lure-tint:#E9F7B5;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --gutter:64px; --max:1320px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
.sf-site{background:var(--paper);color:var(--ink);font-family:'Libre Franklin',system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6}
.sf-site img,.sf-site svg{display:block}
:where(.sf-site) a{color:inherit}
:focus-visible{outline:2px solid var(--lure);outline-offset:3px}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter) * 2);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3)}
section{padding-top:112px;padding-bottom:112px}
section.tight{padding-top:var(--s7);padding-bottom:var(--s7)}
.sechead .note>*+*{margin-top:var(--s3)}
.rule{height:1px;background:var(--line);width:100%}
.rule-strong{height:2px;background:var(--ink);width:100%}

/* ---------- type ---------- */
.dsp{font-family:'Literata',Georgia,serif;font-weight:700;letter-spacing:-0.009em;line-height:1.02;margin:0;}
.h-hero{font-size:clamp(46px,7.4vw,104px);line-height:1.0}
.h-sec{font-size:clamp(34px,3.6vw,52px);line-height:1.08;max-width:15ch}
.h-sec.wide{max-width:20ch}
.lede{font-size:19px;line-height:1.6;margin:0;color:var(--ink-3)}
.lede.light{color:var(--line-2)}
.small{font-size:15px;line-height:1.6;margin:0;color:var(--muted)}
.kicker{font:500 11px/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s3)}
.kicker.on-dark{color:var(--muted-d)}
.mono{font-family:'DM Mono',ui-monospace,monospace}
.hilite{background:var(--lure);color:var(--ink);padding:.02em .1em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---------- buttons ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:58px;padding:0 28px;border-radius:999px;background:var(--lure);color:var(--ink);font:500 17px 'Libre Franklin',system-ui,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.3,1),background .2s}
.cta:hover{background:var(--lure-d);transform:translateY(-3px)}
.cta.ink{background:var(--ink);color:var(--lure)}
.cta.ink:hover{background:var(--ink-2)}
.cta.sm{height:44px;font-size:14px;padding:0 20px}
.navlink{font-size:15px;color:var(--line-2);text-decoration:none;position:relative}
.navlink:hover{color:var(--lure)}
.navlink::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--lure);transition:right .35s ease}
.navlink:hover::after{right:0}
.arrowlink{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;font:500 16px 'Libre Franklin',system-ui,sans-serif;text-decoration:none;color:var(--lure);padding-bottom:6px;border-bottom:1px solid rgba(200,240,60,.45);transition:border-color .25s}
.arrowlink:hover{border-color:var(--lure)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;padding:0}
.hero nav{position:relative;height:96px;display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.navwrap{display:flex;align-items:center;gap:var(--s4)}
.hero-body{position:relative;padding-top:var(--s7);padding-bottom:var(--s7)}
.hero h1{max-width:17ch}
.hero .sub{margin-top:var(--s5);max-width:46ch;font-size:21px;line-height:1.6;color:#D8DCD6}
.hero .actions{margin-top:var(--s5);display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.ticker{position:relative;background:var(--lure);color:var(--ink);padding:14px 0;overflow:hidden;transform:rotate(-1.1deg);width:104%;margin-left:-2%}

/* ---------- section header (kicker + head + side note) ---------- */
.sechead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);align-items:start;row-gap:var(--s4)}
.sechead .head{grid-column:1 / span 7}
.sechead .note{grid-column:9 / span 4}

/* ---------- problem callout ---------- */
.callout{margin-top:var(--s4);font-family:'Literata',Georgia,serif;font-size:24px;line-height:1.35;letter-spacing:-0.005em}

/* ---------- ask / get ---------- */
.askget{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:var(--surface);margin-top:var(--s6)}
.askget>div{padding:var(--s5)}
.askget .ask{background:var(--paper-2);border-right:1px solid var(--line)}
.askget p.val{font-family:'Literata',Georgia,serif;font-size:30px;line-height:1.2;letter-spacing:-0.006em;margin:var(--s2) 0 0;max-width:20ch}

/* ---------- dot field ---------- */
.dots{margin-top:var(--s3);background:var(--surface);border:1px solid var(--line);padding:var(--s5)}
.dotkey{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.dotkey span{display:inline-flex;align-items:center;gap:10px;font:400 13px 'DM Mono',ui-monospace,monospace;color:var(--ink-3)}
.dotkey i{width:11px;height:11px;border-radius:50%;display:inline-block;flex-shrink:0}
.dotfield circle{animation:dotin .5s ease-out both}
@keyframes dotin{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* ---------- the row card ---------- */
.rowcard{background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 60px rgba(14,21,32,.07)}
.rowcard .head{display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:start;padding:var(--s5);border-bottom:1px solid var(--line)}
.rowcard .name{font-family:'Literata',Georgia,serif;font-size:32px;letter-spacing:-0.006em;line-height:1.1;margin:0}
.rowcard .place{font:400 14px 'DM Mono',ui-monospace,monospace;color:var(--muted);margin:10px 0 0}
.contacts{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.contacts a{display:inline-flex;align-items:center;gap:10px;font:400 14px 'DM Mono',ui-monospace,monospace;color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent}
.contacts a:hover{border-color:var(--line-2);color:var(--ink)}
.contacts svg{opacity:.55;flex-shrink:0}
.mailwrap{padding:var(--s5);background:var(--paper-2)}
.mailbody{font-family:'Literata',Georgia,serif;font-size:21px;line-height:1.6;margin:var(--s3) 0 0;max-width:62ch}
.mailmeta{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line)}

/* ---------- measured strip ---------- */
.strip{margin-top:var(--s6);background:var(--ink);color:var(--paper);display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:center;padding:var(--s4) var(--s5)}
.stripnums{display:flex;gap:var(--s6);justify-content:flex-end;flex-wrap:wrap}
.stripnums span{font:400 15px 'DM Mono',ui-monospace,monospace;color:var(--line-2);display:inline-flex;align-items:baseline;gap:10px}
.stripnums b{font:500 26px 'DM Mono',ui-monospace,monospace;color:#fff;letter-spacing:-.02em}
.stripnums b.lime{color:var(--lure)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s6);counter-reset:s}
.step{border-top:2px solid var(--ink);padding-top:var(--s3);display:flex;flex-direction:column;gap:var(--s2);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.step:hover{transform:translateY(-6px)}
.stepnum{font:500 15px 'DM Mono',ui-monospace,monospace;color:var(--lure-ink)}
.step h3{font-family:'Literata',Georgia,serif;font-size:25px;line-height:1.2;letter-spacing:-0.005em;font-weight:700;margin:0;max-width:16ch}
.step p{margin:0;font-size:15px;color:var(--muted)}

/* ---------- industry marquee ---------- */
.mqband{margin-top:var(--s6);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);padding:18px 0;overflow:hidden;transform:rotate(-1.4deg);width:104%;margin-left:-2%}
.mq{display:inline-block;white-space:nowrap;animation:drift 38s linear infinite}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- video ---------- */
.video{margin-top:var(--s6);border:1px solid var(--line);background:var(--surface)}
.video .bar{display:flex;justify-content:space-between;align-items:center;padding:14px var(--s4);border-bottom:1px solid var(--line)}
.player{position:relative;aspect-ratio:16/9;background:var(--ink);overflow:hidden;display:flex;align-items:center;justify-content:center}
.poster{position:absolute;inset:0;padding:var(--s6) var(--s7);display:flex;flex-direction:column;gap:var(--s3);opacity:.85}
.plist{display:grid;grid-template-columns:1fr auto auto;gap:var(--s2) var(--s5);align-items:center;font:400 15px 'DM Mono',ui-monospace,monospace;color:var(--line-2)}
.plist .row{display:contents}
.plist .row>*{padding:12px 0;border-bottom:1px solid #263041}
.plist .bad{color:#8A929B}
.playbtn{position:relative;width:84px;height:84px;border-radius:50%;background:var(--lure);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .25s}
.playbtn:hover{transform:scale(1.06)}
.controls{display:flex;align-items:center;gap:var(--s3);padding:12px var(--s4);border-top:1px solid var(--line);background:var(--paper-2)}
.progress{flex:1;height:3px;background:var(--line);position:relative;overflow:hidden}
.progress i{position:absolute;inset:0;width:38%;background:var(--lure-ink);display:block}

/* ---------- price slab ---------- */
.slab{background:var(--ink);color:var(--paper)}
.prices{display:flex;gap:var(--s3);margin-top:var(--s5);flex-wrap:wrap}
.price{border:1px solid #2A3648;padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:6px;min-width:150px;transition:border-color .25s,transform .25s}
.price:hover{border-color:var(--lure);transform:translateY(-4px)}
.price b{font:500 34px 'DM Mono',ui-monospace,monospace;letter-spacing:-.03em}
.price span{font:400 13px 'DM Mono',ui-monospace,monospace;color:var(--muted-d)}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:17px;color:var(--line-2)}
.ticks svg{margin-top:5px}

/* ---------- close ---------- */
.close{position:relative;background:var(--lure);color:var(--ink);overflow:hidden}
.close .grid{align-items:center;position:relative}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--line-2);padding-top:var(--s7);position:relative;overflow:hidden}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s5);position:relative}
footer h4{font:500 11px/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s3)}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.tagline{font-family:'Literata',Georgia,serif;font-style:italic;font-size:19px;line-height:1.5;color:var(--muted-d);margin:var(--s3) 0 0;max-width:34ch}
.ghostword{font-family:'Literata',Georgia,serif;font-size:clamp(90px,17vw,240px);font-weight:700;letter-spacing:-0.011em;line-height:.8;color:#18212E;;margin-top:var(--s7)}
.legal{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s4) 0;border-top:1px solid #1E2836;font:400 13px 'DM Mono',ui-monospace,monospace;color:var(--muted);flex-wrap:wrap}

/* ---------- brand motion ---------- */
@keyframes swim{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-30px,-22px) rotate(-2deg)}}
@keyframes schooldrift{from{transform:translateX(0)}to{transform:translateX(-72px)}}
@keyframes bubble{0%{transform:translate(0,0) scale(.35);opacity:0}10%{opacity:.85}55%{opacity:.5}100%{transform:translate(-120px,-320px) scale(1.15);opacity:0}}
@keyframes bubble2{0%{transform:translate(0,0) scale(.3);opacity:0}14%{opacity:.7}100%{transform:translate(-54px,-360px) scale(1.3);opacity:0}}
@keyframes bubble3{0%{transform:translate(0,0) scale(.45);opacity:0}16%{opacity:.75}100%{transform:translate(-176px,-250px) scale(1);opacity:0}}
.swim{animation:swim 9s ease-in-out infinite}
.schoolmove{animation:schooldrift 9s linear infinite}
.bub{position:absolute;border-radius:50%;opacity:0;animation-timing-function:cubic-bezier(.35,.1,.5,1);animation-iteration-count:infinite;animation-name:bubble}
.bub.b2{animation-name:bubble2}
.bub.b3{animation-name:bubble3}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .sf-site{--gutter:40px}
  .sechead .head{grid-column:1 / span 12}
  .sechead .note{grid-column:1 / span 12;margin-top:var(--s3)}
}
@media (max-width:820px){
  .sf-site{--gutter:20px;--s7:64px;--s8:72px}
  .sf-site{font-size:16px}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px}
  .grid>*{grid-column:1 / -1 !important}
  .hero .swim,.hero .schoolmove,.close .swim,footer .schoolmove{display:none}
  .hero nav{height:72px}
  .navwrap .navlink{display:none}
  .askget{grid-template-columns:1fr}
  .askget .ask{border-right:0;border-bottom:1px solid var(--line)}
  .askget>div{padding:var(--s4)}
  .askget p.val{font-size:26px}
  .steps{grid-template-columns:1fr;gap:var(--s4)}
  .rowcard .head{grid-template-columns:1fr;gap:var(--s3)}
  .contacts{align-items:flex-start}
  .strip{grid-template-columns:1fr;gap:var(--s3)}
  .stripnums{justify-content:flex-start;gap:var(--s4)}
  .mailbody{font-size:18px}
  .poster{display:none}
  footer .cols{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .legal{flex-direction:column;gap:10px}
}

/* ============================================================
   Small Fish — motion, tilt and explanatory diagrams
   Loaded after home.css. Everything degrades: no JS = no hiding.
   ============================================================ */

body{overflow-x:hidden}

/* ---------- reveal on scroll (only armed when JS is present) ---------- */
.js .rise{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.js .rise.in{opacity:1;transform:translateY(0)}
.js .stagger>*{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.js .stagger.in>*{opacity:1;transform:translateY(0)}
.js .stagger.in>*:nth-child(1){transition-delay:.02s}
.js .stagger.in>*:nth-child(2){transition-delay:.09s}
.js .stagger.in>*:nth-child(3){transition-delay:.16s}
.js .stagger.in>*:nth-child(4){transition-delay:.23s}
.js .stagger.in>*:nth-child(5){transition-delay:.30s}
.js .stagger.in>*:nth-child(6){transition-delay:.37s}
.js .stagger.in>*:nth-child(7){transition-delay:.44s}
.js .stagger.in>*:nth-child(8){transition-delay:.51s}
.js .stagger.in>*:nth-child(9){transition-delay:.58s}
.js .stagger.in>*:nth-child(10){transition-delay:.65s}

/* ---------- off-axis: nothing important is perfectly straight ---------- */
.tilt{transform:rotate(var(--rot,0deg))}

/* pointer-reactive cards — they lean toward your cursor */
.scene{perspective:1500px}
[data-tilt]{
  transform:rotate(var(--rot,0deg)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s ease;
  transform-style:preserve-3d;will-change:transform}
[data-tilt]:hover{--ty:-6px}

/* plain lift for things that aren't pointer-tracked */
.lift{transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease,border-color .3s ease}
.lift:hover{transform:rotate(var(--rot,0deg)) translateY(-7px);box-shadow:0 28px 56px rgba(14,21,32,.13)}

/* ---------- 1. the junk-list diagram (problem section) ---------- */
.junkwrap{margin-top:var(--s6)}
.junk{--rot:1deg;background:var(--surface);border:1px solid var(--line);box-shadow:0 26px 60px rgba(14,21,32,.08)}
.jhead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:2px solid var(--ink);flex-wrap:wrap}
.jhead .t{font-family:'Literata',Georgia,serif;font-size:21px;letter-spacing:-0.005em}
.jrow{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:center;padding:13px var(--s4);border-bottom:1px solid var(--line);transition:background .3s ease,padding-left .3s ease}
.jrow:hover{background:var(--paper-2);padding-left:calc(var(--s4) + 10px)}
.jrow .nm{font-size:17px;color:var(--ink);justify-self:start}
.jrow .why{font:400 13px 'DM Mono',ui-monospace,monospace;color:var(--muted);white-space:nowrap}
.jrow .lead{align-self:center;height:0;border-bottom:1px dotted var(--line-2);margin:0 16px}
.jrow.keep .lead{border-color:#A9C95E}
.jrow.out .nm{color:var(--muted-d);
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-position:0 58%;background-size:100% 1px}
.js .jrow.out .nm{background-size:0 1px;transition:background-size .55s cubic-bezier(.4,0,.2,1)}
.js .stagger.in .jrow.out .nm{background-size:100% 1px}
.js .stagger.in>.jrow:nth-child(1) .nm{transition-delay:.20s}
.js .stagger.in>.jrow:nth-child(2) .nm{transition-delay:.27s}
.js .stagger.in>.jrow:nth-child(3) .nm{transition-delay:.34s}
.js .stagger.in>.jrow:nth-child(4) .nm{transition-delay:.41s}
.js .stagger.in>.jrow:nth-child(5) .nm{transition-delay:.48s}
.js .stagger.in>.jrow:nth-child(6) .nm{transition-delay:.55s}
.jrow.keep{background:var(--lure-tint)}
.jrow.keep:hover{background:#E1F49E}
.jrow.keep .why{color:var(--lure-ink);font-weight:500}
.jrow.keep .nm{font-weight:500}
.jfoot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--ink);color:var(--line-2);flex-wrap:wrap}
.jfoot b{color:#fff;font:500 22px 'DM Mono',ui-monospace,monospace;letter-spacing:-.02em}
.jfoot .lime{color:var(--lure)}

/* ---------- 2. the reader: what we take off a website ---------- */
.readergrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);row-gap:var(--s6);margin-top:var(--s6);align-items:center}
.readergrid .browsercol{grid-column:1 / span 7}
.readergrid .findcol{grid-column:8 / span 5}

.browser{--rot:-1.1deg;background:var(--surface);border:1px solid var(--line);box-shadow:0 34px 74px rgba(14,21,32,.12)}
.chrome{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.chrome i{width:9px;height:9px;border-radius:50%;background:var(--line-2);display:block;flex-shrink:0}
.urlpill{flex:1;height:26px;border-radius:999px;background:var(--fill);display:flex;align-items:center;gap:8px;padding:0 12px;font:400 12px 'DM Mono',ui-monospace,monospace;color:var(--muted);overflow:hidden}
.site{position:relative;background:var(--surface)}
.zone{position:relative;transition:background .3s ease,box-shadow .3s ease}
.zone.hot{background:var(--lure-tint);box-shadow:inset 0 0 0 2px var(--lure)}
.pin{position:absolute;top:-13px;right:-13px;width:25px;height:25px;border-radius:50%;background:var(--lure);color:var(--ink);
  font:500 12px/1 'DM Mono',ui-monospace,monospace;display:grid;place-items:center;border:2px solid var(--ink);
  cursor:pointer;padding:0;z-index:4;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.pin:hover,.pin.on{transform:scale(1.22)}
.pin::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--lure);opacity:0;animation:ping 3.4s ease-out infinite}
.pin.p2::after{animation-delay:1.1s}
.pin.p3::after{animation-delay:2.2s}
@keyframes ping{0%{transform:scale(.8);opacity:.9}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}

.sitenav{display:flex;align-items:center;gap:16px;padding:15px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.sitelogo{font-family:'Literata',Georgia,serif;font-size:16px;font-weight:700;letter-spacing:-0.006em;margin-right:auto}
.sitemenu{display:flex;gap:14px;font-size:12px;color:var(--ink-3);padding:4px 6px}
.sitephone{font:500 12px 'DM Mono',ui-monospace,monospace;color:var(--ink);padding:4px 6px;margin-right:16px}
.sitemenu .pin{left:-15px;right:auto}
.sitehero{padding:34px 20px 30px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.sitehero h4{font-family:'Literata',Georgia,serif;font-size:24px;line-height:1.16;letter-spacing:-0.006em;font-weight:700;margin:0;max-width:18ch}
.sitehero .btnrow{display:flex;gap:10px;margin-top:18px;align-items:center}
.fakebtn{display:inline-flex;align-items:center;height:32px;padding:0 15px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:12px}
.fakebtn.ghost{background:transparent;border:1px solid var(--line-2);color:var(--ink-3)}
.sitecards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px 20px}
.sitecards div{border:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:7px}
.sitecards b{font-size:12px;font-weight:500}
.sitecards i{display:block;height:5px;background:var(--fill)}
.sitefoot{padding:13px 20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;font:400 11px 'DM Mono',ui-monospace,monospace;color:var(--muted);flex-wrap:wrap}

.finds{border-top:2px solid var(--ink)}
.find{display:grid;grid-template-columns:24px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);
  transition:padding-left .32s cubic-bezier(.2,.7,.3,1),background .32s ease;cursor:default}
.find:hover,.find.on{padding-left:14px;background:var(--surface)}
.find .n{width:24px;height:24px;border-radius:50%;background:var(--lure);color:var(--ink);font:500 11px/1 'DM Mono',ui-monospace,monospace;display:grid;place-items:center;margin-top:2px}
.find .k{font:500 11px/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:block}
.find b{font-family:'Literata',Georgia,serif;font-size:22px;font-weight:700;letter-spacing:-0.005em;display:block;margin-top:5px;line-height:1.2}
.find p{margin:7px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
.src{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font:400 12px 'DM Mono',ui-monospace,monospace;color:var(--lure-ink);background:var(--lure-tint);padding:4px 10px;border-radius:999px}
.find.blank .n{background:var(--fill);color:var(--muted)}
.find.blank b{color:var(--muted)}
.find.blank .src{color:var(--muted);background:var(--fill)}

/* ---------- 3. the flow diagram (how it works) ---------- */
.flow{position:relative;margin-top:var(--s6)}
.flowarrow{position:absolute;top:76px;width:26px;height:26px;border-radius:50%;background:var(--surface);
  border:1px solid var(--line);display:grid;place-items:center;z-index:3;color:var(--lure-ink);
  animation:nudge 2.8s ease-in-out infinite}
.flowarrow.a{left:calc(33.333% - 13px)}
.flowarrow.b{left:calc(66.666% - 13px);animation-delay:.5s}
@keyframes nudge{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
.steps{position:relative;z-index:2;margin-top:0}
.step{border-top:0;padding-top:0;gap:var(--s3)}
.step:nth-child(1) .stepart{--rot:-.8deg}
.step:nth-child(2) .stepart{--rot:.5deg}
.step:nth-child(3) .stepart{--rot:-.5deg}
.stepart{height:176px;background:var(--paper-2);border:1px solid var(--line);position:relative;overflow:hidden;
  display:grid;place-items:center;transform:rotate(var(--rot,0deg));
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s,background .3s}
.step:hover .stepart{transform:rotate(var(--rot,0deg)) translateY(-8px);box-shadow:0 22px 44px rgba(14,21,32,.11);background:var(--surface)}
.step .stepbody{display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s1);border-top:2px solid var(--ink)}
.step:hover{transform:none}

/* step 1 — the ask */
.miniform{display:flex;flex-direction:column;gap:9px;width:186px}
.miniform .fld{height:31px;border:1px solid var(--line-2);background:var(--surface);border-radius:4px;display:flex;align-items:center;padding:0 11px;font:400 13px 'DM Mono',ui-monospace,monospace;color:var(--ink-3);gap:8px}
.miniform .fld span.lab{color:var(--muted-d);font-size:11px}
.miniform .go{height:31px;border-radius:4px;background:var(--lure);display:grid;place-items:center;font-size:12px;font-weight:500;color:var(--ink)}
.caret{width:1px;height:14px;background:var(--ink);animation:blink 1.2s steps(1) infinite;display:inline-block}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* step 2 — the read */
.sheets{position:relative;width:150px;height:112px}
.sheet{position:absolute;background:var(--surface);border:1px solid var(--line-2);width:96px;height:112px;padding:11px 10px;display:flex;flex-direction:column;gap:6px}
.sheet i{display:block;height:4px;background:var(--fill)}
.sheet i.s{width:58%}
.sheet.a{left:0;top:0;transform:rotate(-6deg)}
.sheet.b{left:22px;top:0;transform:rotate(1.5deg)}
.sheet.c{left:44px;top:0;transform:rotate(7deg);border-color:var(--ink)}
.scanline{position:absolute;left:44px;width:96px;height:2px;background:var(--lure);box-shadow:0 0 12px rgba(200,240,60,.9);
  transform:rotate(7deg);animation:scan 3.6s ease-in-out infinite;z-index:3}
@keyframes scan{0%,100%{top:6px}50%{top:100px}}

/* step 3 — the row */
.minirow{width:206px;background:var(--surface);border:1px solid var(--line-2);padding:12px;display:flex;flex-direction:column;gap:9px}
.minirow .top{display:flex;align-items:center;gap:8px}
.minirow .dot{width:8px;height:8px;border-radius:50%;background:var(--lure);flex-shrink:0;box-shadow:0 0 0 0 rgba(200,240,60,.7);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,240,60,.75)}70%{box-shadow:0 0 0 9px rgba(200,240,60,0)}100%{box-shadow:0 0 0 0 rgba(200,240,60,0)}}
.minirow .nm2{font-size:12px;font-weight:500}
.minirow .ln{height:4px;background:var(--fill);display:block}
.minirow .ln.s{width:64%}
.minirow .mail{display:flex;align-items:center;gap:7px;margin-top:3px;font:400 11px 'DM Mono',ui-monospace,monospace;color:var(--lure-ink);background:var(--lure-tint);padding:5px 8px}

/* ---------- 4. the coverage map ---------- */
.mapgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);row-gap:var(--s5);margin-top:var(--s6);align-items:center}
.mapgrid .mapcol{grid-column:1 / span 8}
.mapgrid .legcol{grid-column:9 / span 4}
.usmap{width:100%;height:auto;transform:rotate(-.8deg)}
.usmap .live{animation:livepulse 3.2s ease-in-out infinite}
.usmap .live.b{animation-delay:1s}
.usmap .live.c{animation-delay:2s}
@keyframes livepulse{0%,100%{r:2.1;opacity:1}50%{r:2.9;opacity:.82}}
.usmap .ring{transform-origin:center;animation:ringout 3.2s ease-out infinite}
@keyframes ringout{0%{opacity:.85;stroke-width:.7}100%{opacity:0;stroke-width:.2}}
.legend{display:flex;flex-direction:column;gap:var(--s3)}
.legrow{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.legrow:last-child{border-bottom:0}
.legrow i{width:11px;height:11px;border-radius:50%;margin-top:7px;flex-shrink:0}
.legrow b{display:block;font-size:17px;font-weight:500}
.legrow span{display:block;font-size:14px;color:var(--muted);margin-top:3px}

/* ---------- tilted price slab ---------- */
.slab{background:transparent;position:relative;isolation:isolate;overflow:hidden;padding-top:132px;padding-bottom:132px}
.slab::before{content:"";position:absolute;left:-7%;right:-7%;top:26px;bottom:26px;background:var(--ink);transform:rotate(-1.35deg);z-index:-1}
.price{cursor:default}
.price:hover{border-color:var(--lure);transform:translateY(-6px) rotate(-1deg)}
.ticks li{transition:transform .3s cubic-bezier(.2,.7,.3,1),color .3s}
.ticks li:hover{transform:translateX(8px);color:#fff}

/* ---------- small interactive polish ---------- */
.contacts a{transition:transform .3s cubic-bezier(.2,.7,.3,1),color .25s,border-color .25s}
.contacts a:hover{transform:translateX(-6px)}
.rowcard{--rot:-.6deg}
.strip{transform:rotate(.55deg)}
.stripnums b{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.strip:hover .stripnums b{transform:translateY(-3px)}
.mq{animation-play-state:running}
.mqband:hover .mq,.ticker:hover .mq{animation-play-state:paused}
.cta{transition:transform .35s cubic-bezier(.2,.7,.3,1),background .2s}
.callout .hilite{transition:box-shadow .3s}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .js .rise,.js .stagger>*{opacity:1!important;transform:none!important}
  .js .jrow.out .nm{background-size:100% 1px!important}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .readergrid .browsercol,.readergrid .findcol{grid-column:1 / span 12}
  .mapgrid .mapcol,.mapgrid .legcol{grid-column:1 / span 12}
  .flowarrow{display:none}
}
@media (max-width:820px){
  .browser,.junk,.rowcard{--rot:0deg}
  .strip,.usmap{transform:none}
  .slab{padding-top:110px;padding-bottom:110px}
  .slab::before{left:-14%;right:-14%;transform:rotate(-1deg)}
  .jrow{grid-template-columns:1fr;gap:5px;align-items:start}
  .jrow .lead{display:none}
  .jrow .why{white-space:normal}
  .sitecards{grid-template-columns:1fr 1fr}
  .stepart{height:158px}
  .pin{top:-11px;right:-8px}
  .sitemenu .pin{left:auto;right:-8px}
  .chrome .kicker{display:none}
  [data-tilt]{transform:none!important}
}

/* ============================================================
   v6 — hero that explains the product on the first screen,
   plus the /how-we-check page. Loaded last.
   ============================================================ */

/* ---------- small label (alias of .kicker, used across v6 markup) ---------- */
.kick{font:500 11px/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 var(--s3)}
.kick.on-dark{color:var(--muted-d)}
.kick.lime{color:var(--lure-ink)}

/* ---------- header ---------- */
.hero nav.topnav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  position:relative;z-index:3}
.topnav .navwrap{display:flex;align-items:center;gap:30px}
.topnav .navwrap{gap:26px}
.topnav .navlink{font-size:14px;color:#8A939C;letter-spacing:.01em}
.topnav .navlink:hover{color:var(--lure)}
.topnav .cta.sm{height:40px;padding:0 20px;font-size:14px}
.cta.outline{background:transparent;border:1px solid rgba(200,240,60,.55);color:var(--lure)}
.cta.outline:hover{background:var(--lure);color:var(--ink);border-color:var(--lure)}

/* ---------- hero ---------- */
.hero{padding:0}
.hero .herobg{position:absolute;left:0;top:0;width:1700px;opacity:.13;pointer-events:none}
.herogrid{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;
  column-gap:72px;align-items:start;padding-top:58px;padding-bottom:176px}
.hcopy h1{font-size:clamp(40px,4.5vw,64px);line-height:1.03;letter-spacing:-.038em;margin:0}
.hcopy .hilite{padding:.02em .12em}
.hcopy .sub{margin-top:26px;max-width:40ch;font-size:19px;line-height:1.58;color:#D2D7D0}
.hcopy .cta{margin-top:34px}
.hcopy .undercta{margin:16px 0 0;color:var(--muted-d)}

/* the product card */
.hcard{display:flex;flex-direction:column;gap:var(--s3)}
.qbox{display:flex;flex-direction:column;gap:9px}
.qline{display:grid;grid-template-columns:76px 1fr;align-items:baseline;gap:14px;margin:0}
.qk{font:500 11px/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d);white-space:nowrap}
.qv{font:400 16px 'DM Mono',ui-monospace,monospace;color:#E4E8E1}
.hres{font-family:'Literata',Georgia,serif;font-size:clamp(34px,3.2vw,46px);line-height:1.1;
  letter-spacing:-0.007em;font-weight:700;color:#fff;margin:2px 0 0}
.hnum{background:var(--lure);color:var(--ink);padding:.005em .09em;margin-right:.14em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hbiz{background:var(--surface);color:var(--ink);box-shadow:0 30px 70px rgba(0,0,0,.34)}
.hbiz .top{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:start;padding:20px 24px}
.hbiz .nm{font-family:'Literata',Georgia,serif;font-size:24px;font-weight:700;letter-spacing:-0.006em;line-height:1.1;margin:0}
.hbiz .pl{font:400 13px 'DM Mono',ui-monospace,monospace;color:var(--muted);margin:6px 0 0}
.hbiz .cts{display:flex;flex-direction:column;gap:7px;align-items:flex-end;text-align:right}
.hbiz .cts span{font:400 12.5px 'DM Mono',ui-monospace,monospace;color:var(--ink-3);white-space:nowrap}
.hbiz .ml{padding:18px 24px 0;background:var(--paper-2);border-top:1px solid var(--line)}
.hbiz .fade{position:relative;max-height:62px;overflow:hidden;margin-top:12px}
.hbiz .fade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;
  background:linear-gradient(to bottom,rgba(246,247,244,0),var(--paper-2))}
.hbiz .fade p{font-family:'Literata',Georgia,serif;font-size:17.5px;line-height:1.55;margin:0;color:var(--ink-2)}
.hbiz .foot{padding:14px 24px 16px;background:var(--paper-2);display:flex;justify-content:flex-end}

/* ---------- quiet inline link ---------- */
.quiet{display:inline-flex;align-items:center;gap:9px;margin-top:var(--s5);font-size:16px;color:var(--ink-3);
  border-bottom:1px solid var(--line-2);padding-bottom:5px;transition:border-color .25s,gap .25s}
.quiet:hover{border-color:var(--ink);gap:14px}

/* ---------- stakes block (three lines) ---------- */
.stakes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s6)}
.stake{border-top:2px solid var(--ink);padding-top:var(--s3);display:flex;flex-direction:column;gap:10px;
  transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.stake:hover{transform:translateY(-6px)}
.stake b{font-family:'Literata',Georgia,serif;font-size:21px;font-weight:700;letter-spacing:-0.005em;line-height:1.25}
.stake p{margin:0;font-size:15.5px;color:var(--muted)}
.closer{margin-top:var(--s6);font-family:'Literata',Georgia,serif;font-size:clamp(24px,2.3vw,32px);
  line-height:1.3;letter-spacing:-0.005em;max-width:30ch}

/* ---------- trades row (replaces the second marquee) ---------- */
.trades{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s5)}
.trade{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;
  border:1px solid var(--line-2);font-family:'Literata',Georgia,serif;font-size:19px;letter-spacing:-0.004em;
  background:var(--surface);transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s}
.trade:nth-child(odd){transform:rotate(-1deg)}
.trade:nth-child(even){transform:rotate(.8deg)}
.trade:hover{border-color:var(--ink);transform:rotate(0) translateY(-3px)}

/* ---------- how we check ---------- */
.pagehead{background:var(--ink);color:var(--paper);padding:0;position:relative;overflow:hidden}
.pagehead .wrap{position:relative;z-index:2}
.pagehead .body{padding-top:var(--s7);padding-bottom:var(--s7);display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);row-gap:var(--s4);align-items:end}
.pagehead h1{grid-column:1 / span 7;font-size:clamp(38px,4.4vw,62px);line-height:1.04}
.pagehead .note{grid-column:9 / span 4}
.crumb{display:flex;gap:10px;align-items:center;margin-bottom:var(--s3)}

/* the exclusion ledger */
.ledger{margin-top:var(--s6);background:var(--surface);border:1px solid var(--line);
  box-shadow:0 26px 60px rgba(14,21,32,.07)}
.ledger .lhead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:2px solid var(--ink);flex-wrap:wrap}
.lrow{display:grid;grid-template-columns:auto 1fr auto;gap:0;align-items:center;
  padding:15px var(--s4);border-bottom:1px solid var(--line);transition:background .3s,padding-left .3s}
.lrow:hover{background:var(--paper-2);padding-left:calc(var(--s4) + 10px)}
.lrow .lbl{font-size:17px}
.lrow .lead2{align-self:center;height:0;border-bottom:1px dotted var(--line-2);margin:0 18px}
.lrow .num{font:500 20px 'DM Mono',ui-monospace,monospace;letter-spacing:-.02em;min-width:72px;text-align:right}
.lrow.keep{background:var(--lure-tint)}
.lrow.keep:hover{background:#E1F49E}
.lrow.keep .num{color:var(--lure-ink)}
.lrow.keep .lead2{border-color:#A9C95E}
.ltot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);background:var(--ink);color:var(--line-2);flex-wrap:wrap}
.ltot b{color:#fff;font:500 22px 'DM Mono',ui-monospace,monospace;letter-spacing:-.02em}
.ltot b.lime{color:var(--lure)}

/* three-way outcome strip */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:var(--s6);
  background:var(--line);border:1px solid var(--line)}
.three>div{background:var(--surface);padding:var(--s4);display:flex;flex-direction:column;gap:8px}
.three b{font:500 42px 'DM Mono',ui-monospace,monospace;letter-spacing:-.03em;line-height:1}
.three b.lime{color:var(--lure-ink)}
.three p{margin:0;font-size:15px;color:var(--muted);max-width:28ch}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .herogrid{grid-template-columns:1fr;row-gap:var(--s6);padding-top:40px}
  .hcopy .sub{max-width:52ch}
  .pagehead h1{grid-column:1 / span 12}
  .pagehead .note{grid-column:1 / span 12}
  .stakes{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .hero nav.topnav{height:68px}
  .hero .herobg{display:none}
  .herogrid{padding-top:28px;padding-bottom:40px;row-gap:var(--s5)}
  .hcopy .cta{width:100%;justify-content:center}
  .hcopy .undercta{text-align:center}
  .qline{grid-template-columns:62px 1fr;gap:10px}
  .hbiz .top{grid-template-columns:1fr;gap:12px}
  .hbiz .cts{align-items:flex-start;text-align:left}
  .stakes{grid-template-columns:1fr}
  .three{grid-template-columns:1fr}
  .lrow{grid-template-columns:1fr auto}
  .lrow .lead2{display:none}
}
/* ============================================================
   v7 — the fish is back, and five components that react
   ============================================================ */

/* ---------- the big fish, blowing bubbles, behind the card ---------- */
.herofish{position:absolute;right:-97px;bottom:-204px;z-index:1;pointer-events:none;opacity:.66;
  transform:translate(var(--fx,0px),var(--fy,0px));transition:transform 1.6s cubic-bezier(.2,.7,.3,1)}
.herofish .finner{animation:swim 11s ease-in-out infinite}
.herofish .bub{opacity:0}
.herogrid{position:relative;z-index:2}
.hcard,.hcopy{position:relative;z-index:2}
@keyframes bubble{0%{transform:translate(0,0) scale(.3);opacity:0}
  12%{opacity:.9}60%{opacity:.55}100%{transform:translate(-150px,-430px) scale(1.25);opacity:0}}
@keyframes bubble2{0%{transform:translate(0,0) scale(.25);opacity:0}
  14%{opacity:.75}100%{transform:translate(-70px,-470px) scale(1.4);opacity:0}}
@keyframes bubble3{0%{transform:translate(0,0) scale(.4);opacity:0}
  16%{opacity:.8}100%{transform:translate(-212px,-360px) scale(1.1);opacity:0}}

/* ---------- the hero card, cycling three markets ---------- */
.hcard [data-h]{transition:opacity .45s ease}
.hcard.swapping [data-h]{opacity:0}
.hcard .hbiz,.hcard .hres{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.hcard.swapping .hbiz,.hcard.swapping .hres{transform:translateY(7px)}
.tcaret{display:none;width:1.5px;height:15px;background:var(--lure);margin-left:3px;
  vertical-align:-2px;animation:blink 1s steps(1) infinite}
.typing .tcaret{display:inline-block}
.hdots{display:flex;align-items:center;gap:8px;margin-top:4px}
.hdot{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:#394454;cursor:pointer;
  transition:width .35s cubic-bezier(.2,.7,.3,1),background .3s}
.hdot:hover{background:#56637a}
.hdot.on{width:28px;background:var(--lure)}

/* ---------- the row card rewrites its own email ---------- */
.tonebar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.tones{display:flex;gap:7px;flex-wrap:wrap}
.tone{height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font:400 13px 'Libre Franklin',system-ui,sans-serif;color:var(--ink-3);cursor:pointer;
  transition:background .25s,border-color .25s,color .25s,transform .25s}
.tone:hover{border-color:var(--line-2);transform:translateY(-2px)}
.tone.on{background:var(--ink);border-color:var(--ink);color:var(--lure)}
.mailbody{transition:opacity .3s ease}
.mailbody.out{opacity:0}

/* ---------- the coverage picker ---------- */
.picker{margin-top:var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
.pickrow{display:grid;grid-template-columns:62px 1fr;gap:var(--s3);align-items:start}
.pickrow .kick{padding-top:11px}
.trade{cursor:pointer;font-family:'Literata',Georgia,serif}
.trade.on{background:var(--ink);border-color:var(--ink);color:var(--lure);transform:rotate(0)}
.trade.on:hover{transform:rotate(0) translateY(-3px)}
.pickout{margin-top:var(--s2);padding-top:var(--s4);border-top:2px solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.pickout p{font-size:clamp(25px,2.6vw,36px);line-height:1.2;letter-spacing:-.025em;max-width:22ch}
.pickout [data-k="fit"],.pickout [data-k="total"]{font-family:'DM Mono',ui-monospace,monospace;font-weight:500}
.picker .small{margin:0}

/* ---------- the pricing slider ---------- */
.plan{margin-top:var(--s5);display:flex;flex-direction:column;gap:var(--s3);max-width:520px}
.planhead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.planval b{font:500 30px 'DM Mono',ui-monospace,monospace;letter-spacing:-.03em;color:var(--lure)}
.prange{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:pointer}
.prange::-webkit-slider-runnable-track{height:4px;background:#2A3648;border-radius:2px}
.prange::-moz-range-track{height:4px;background:#2A3648;border-radius:2px}
.prange::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--lure);border:2px solid var(--ink);margin-top:-10px;
  box-shadow:0 0 0 0 rgba(200,240,60,.35);transition:box-shadow .25s}
.prange::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--lure);border:2px solid var(--ink)}
.prange:hover::-webkit-slider-thumb,.prange:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 9px rgba(200,240,60,.18)}
.price i{font:400 12px 'DM Mono',ui-monospace,monospace;color:var(--muted);font-style:normal;margin-top:4px}
.price.on{border-color:var(--lure);background:rgba(200,240,60,.07)}
.price.on b{color:var(--lure)}

@media (max-width:1100px){
  .herofish{right:-420px;bottom:-200px;opacity:.34}
}
@media (max-width:820px){
  .herofish{display:none}
  .pickrow{grid-template-columns:1fr;gap:10px}
  .pickrow .kick{padding-top:0}
  .pickout{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .tonebar{align-items:flex-start}
  .plan{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .herofish .finner,.herofish .bub{animation:none}
  .hcard.swapping [data-h]{opacity:1}
}


/* ============================================================
   v8 — the coverage reel (replaces the chip picker)
   ============================================================ */
.reelgrid{display:grid;grid-template-columns:1.1fr .9fr;column-gap:var(--s7);row-gap:var(--s6);
  margin-top:var(--s6);align-items:center}
.reelcol{display:flex;flex-direction:column}

.reelline{font-size:clamp(28px,3.3vw,48px);line-height:1.2;letter-spacing:-.03em;margin:0;
  font-weight:500;}
.reel{display:inline-block;background:none;border:0;padding:0;margin:0 .04em;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;vertical-align:baseline}
.reelmask{position:relative;display:inline-block;height:1.2em;overflow:hidden;vertical-align:bottom;
  border-bottom:4px solid var(--lure);transition:border-color .3s,width .5s cubic-bezier(.2,.85,.25,1)}
.reelsize{display:block;height:1.2em;line-height:1.2em;white-space:nowrap;visibility:hidden}
.reel:hover .reelmask,.reel:focus-visible .reelmask{border-color:var(--ink)}
.reeltrack{position:absolute;left:0;top:0;display:block;transition:transform .62s cubic-bezier(.2,.85,.25,1)}
.reeltrack>span{display:block;width:max-content;height:1.2em;line-height:1.2em;white-space:nowrap;text-align:left}

.reelbig{display:flex;align-items:baseline;gap:.26em;margin-top:var(--s5)}
.reelnum{font-family:'Literata',Georgia,serif;font-size:clamp(66px,8.4vw,124px);line-height:.88;
  letter-spacing:-0.014em;font-weight:700;;
  font-variant-numeric:tabular-nums}
.reelfit{font-family:'Literata',Georgia,serif;font-size:clamp(28px,2.9vw,42px);letter-spacing:-0.007em;color:var(--lure-ink)}
.reelbar{display:block;height:5px;background:var(--lure);width:100%;max-width:420px;margin-top:var(--s3);
  transform-origin:left;animation:barin .7s cubic-bezier(.2,.8,.25,1) both}
@keyframes barin{from{transform:scaleX(.2)}to{transform:scaleX(1)}}
.reelsub{margin-top:var(--s3);font:400 14.5px 'DM Mono',ui-monospace,monospace;color:var(--muted);max-width:46ch;line-height:1.6}
.reelacts{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s5);flex-wrap:wrap}

.reelgrid .mapcol .usmap{transform:rotate(-.8deg)}
.reelgrid .legend{margin-top:var(--s4)}

@media (max-width:1100px){
  .reelgrid{grid-template-columns:1fr;column-gap:0}
}
@media (max-width:820px){
  .reelline{font-size:clamp(25px,7.2vw,34px)}
  .reelnum{font-size:clamp(58px,17vw,78px)}
  .reelacts{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .reelacts .cta{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .reeltrack{transition:none}
  .reelbar{animation:none}
}

/* ============================================================
   v9 — hero is the demo on the left, the fish owns the right
   ============================================================ */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.herogrid{display:grid;grid-template-columns:minmax(0,600px) 1fr;column-gap:var(--s7);
  align-items:start;padding-top:22px;padding-bottom:30px}
.demowrap{display:flex;flex-direction:column;gap:24px}

.demo{background:#131C29;border:1px solid #27313F;border-radius:14px;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.52);display:flex;flex-direction:column}
.demohead{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid #212B39;background:#0F1824}
.dmark{display:flex}
.dlive{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font:500 10.5px 'DM Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--lure)}
.dlive i{width:7px;height:7px;border-radius:50%;background:var(--lure);display:block;animation:pulse 2s ease-out infinite}

.demoq{padding:14px 20px 12px;display:flex;flex-direction:column;gap:8px}
.demoscan{padding:0 20px 16px;display:flex;flex-direction:column;gap:9px}
.scanbar{display:block;height:3px;background:#242F3E;border-radius:2px;overflow:hidden}
.scanbar i{display:block;height:100%;width:100%;background:var(--lure);transform-origin:left;
  transform:scaleX(1);transition:transform .1s linear}
.scantext{margin:0;font:400 12.5px 'DM Mono',ui-monospace,monospace;color:#7C8694}
.scantext span{color:#D7DCD4}

.demo .hres{padding:0 20px;margin:0 0 13px;font-size:clamp(30px,2.9vw,40px)}
/* two stages, cross-faded, so the card never changes height */
.demostage{position:relative;height:344px}
.demostage .stage{position:absolute;inset:0;
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.75,.25,1)}
.demostage .sweep{opacity:0;transform:translateY(-10px);pointer-events:none}
.demostage .result{opacity:1}
.demo.step0 .sweep,.demo.step1 .sweep{opacity:1;transform:none}
.demo.step0 .result,.demo.step1 .result{opacity:0;transform:translateY(14px);pointer-events:none}
.demo [data-d="biz"]{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.75,.25,1)}
.demo.step1 [data-d="biz"]{opacity:0;transform:translateY(14px)}

.demo .hbiz{box-shadow:none;border-top:1px solid #27313F;border-radius:0}
.demo .hbiz .top{padding:14px 20px}
.demo .hbiz .nm{font-size:22px}
.demo .hbiz .ml{padding:12px 20px 2px}
.mlbody{margin-top:9px;display:flex;flex-direction:column;gap:8px}
.mlbody p{margin:0;font-family:'Literata',Georgia,serif;font-size:16px;line-height:1.46;color:var(--ink-2)}
.mlbody p{opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.75,.25,1)}
.mlbody p.in{opacity:1;transform:none}
.js .mlbody p{opacity:0}
.mlbody.ready p{opacity:1;transform:none}
.demo .hbiz .foot{padding:12px 20px 14px;justify-content:space-between;align-items:center}


.heroacts{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.heroacts .undercta{margin:0}

/* the fish owns the right half */
.herofish{position:absolute;right:118px;top:244px;bottom:auto;z-index:1;pointer-events:none;opacity:.9;
  transform:translate(var(--fx,0px),var(--fy,0px));transition:transform 1.6s cubic-bezier(.2,.7,.3,1)}

@media (max-width:1180px){
  .herogrid{grid-template-columns:minmax(0,560px) 1fr;column-gap:var(--s5)}
  .herofish{right:-40px;top:250px;opacity:.7}
}
@media (max-width:900px){
  .herogrid{grid-template-columns:1fr}
  .herofish{display:none}
}
@media (max-width:820px){
  .herogrid{padding-top:24px;padding-bottom:34px}
  .demo .hres{font-size:30px}
  .heroacts{flex-direction:column;align-items:stretch;gap:12px}
  .heroacts .cta{width:100%;justify-content:center}
  .heroacts .undercta{text-align:center}
}

.dcopy{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;
  background:var(--ink);color:var(--lure);font:400 12px 'DM Mono',ui-monospace,monospace;cursor:pointer;
  border:0;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.dcopy:hover{transform:translateY(-2px)}

/* ============================================================
   v10 — flowing currents, and the sweep across every website
   ============================================================ */

/* --- currents (ported from the FloatingPaths component) --- */
.currents{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.currents .paths{position:absolute;inset:0;width:100%;height:100%}
.currents .paths.b{transform:scaleX(-1)}
.paths path{stroke-dasharray:2400;stroke-dashoffset:2400;
  animation-name:flow;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes flow{0%{stroke-dashoffset:2400}100%{stroke-dashoffset:-2400}}
.hero-currents{opacity:.5;z-index:0}
.cta-currents{opacity:.42;z-index:0}
.close .wrap{position:relative;z-index:2}

/* --- the sweep --- */
.sweep{padding:0 20px 14px;display:flex;flex-direction:column;gap:10px}

.swticks{display:flex;gap:2px;height:18px;align-items:flex-end;opacity:.95}
.swticks i{flex:1;height:4px;background:#2B384A;border-radius:1px;display:block;
  transition:height .25s cubic-bezier(.2,.8,.3,1),background .25s}
.swticks i.on{height:10px;background:#56657A}
.swticks i.hit{height:18px;background:var(--lure)}

.feedmask{height:272px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 74%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 74%,transparent)}
.feed{display:flex;flex-direction:column;transition:transform .18s linear}
.sfrow{display:grid;grid-template-columns:8px 1fr auto;gap:10px;align-items:center;height:19px;
  font:400 11.5px 'DM Mono',ui-monospace,monospace;color:#6F7987}
.sfd{width:6px;height:6px;border-radius:50%;background:#39434F}
.sfrow.hit .sfd{background:var(--lure)}
.sfrow.hit .sfu{color:#DDE3DA}
.sfrow.hit .sfv{color:var(--lure)}
.sfu{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sfv{color:#59636F}

@media (max-width:820px){
  .feedmask{height:57px}
  .swticks i:nth-child(n+41){display:none}
}
@media (prefers-reduced-motion:reduce){
  .paths path{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
  .feed{transition:none}
}


/* ============================================================
   v11 — the school comes back (facing the other way), the
   geography keeps moving, and the benchmark numbers are gone
   ============================================================ */
.hero .herobg{position:absolute;left:-70px;top:-60px;width:1900px;opacity:.6;pointer-events:none;
  transform:scaleX(-1);transform-origin:center;z-index:0}
.hero .herobg svg{animation:schooldrift 11s linear infinite}
.herofish .finner{animation:swim 12s ease-in-out infinite}

/* the three promises that replaced the measured strip */
.promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s6)}
.promise{border-top:2px solid var(--ink);padding-top:var(--s3);display:flex;flex-direction:column;gap:9px;
  transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.promise:hover{transform:translateY(-6px)}
.promise b{font-family:'Literata',Georgia,serif;font-size:21px;font-weight:700;letter-spacing:-0.005em;line-height:1.25}
.promise p{margin:0;font-size:15.5px;color:var(--muted)}

/* the map answers the reel */
.usmap .city{transition:opacity .45s ease}
.usmap .city{opacity:.16}
.usmap .city .ring{opacity:0}
.usmap .city.on{opacity:1}
.usmap .city.on .ring{animation:ringout 3.2s ease-out infinite}
.usmap .city.on .live{animation:livepulse 3.2s ease-in-out infinite}
.usmap .city:not(.on) .live{r:1.25;fill:#9AA394;stroke:none}
.usmap .city:not(.on) text{opacity:0}

@media (max-width:820px){
  .promises{grid-template-columns:1fr}
  .hero .herobg{display:none}
}


/* what never makes the list */
.outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3) var(--s4);margin-top:var(--s6)}
.out{border-top:1px solid var(--line-2);padding-top:var(--s3);display:flex;flex-direction:column;gap:8px;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .3s}
.out:hover{transform:translateY(-5px);border-color:var(--ink)}
.out b{font-family:'Literata',Georgia,serif;font-size:20px;font-weight:700;letter-spacing:-0.005em}
.out p{margin:0;font-size:15px;color:var(--muted)}
.three b{font-family:'Literata',Georgia,serif;font-size:53px;line-height:1;letter-spacing:-0.005em}
@media (max-width:1100px){.outs{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.outs{grid-template-columns:1fr}}

/* ============================================================
   v12 — the words come back, the hero card loses the email,
   and light falls through the water
   ============================================================ */
.herohead{font-size:clamp(36px,3.8vw,54px);line-height:1.04;letter-spacing:-.036em;margin:0}
.herohead .hilite{padding:.02em .1em}
.herosub{margin:18px 0 0;max-width:44ch;font-size:17.5px;line-height:1.6;color:#C9CFC8}
.demowrap{gap:22px}

/* the hero card is now ask → sweep → who fits; the email itself lives below */
.demostage{height:206px}
.feedmask{height:132px}
.demo .hbiz .foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 20px 14px;background:var(--paper-2);border-top:1px solid var(--line)}
.mailchip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:999px;
  background:var(--lure-tint);color:var(--lure-ink);font:400 12px 'DM Mono',ui-monospace,monospace}

/* light through water */
.herorays{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;
  transition:opacity 1.4s ease}
.herorays.lit{opacity:.9}
.herorays canvas{display:block;width:100%;height:100%}
.hero .herobg{z-index:1}
.herofish{z-index:1}

@media (max-width:900px){
  .herohead{font-size:clamp(32px,8.4vw,42px)}
  .herosub{font-size:16.5px;max-width:none}
  .herorays{display:none}
}

/* the market dots live under the card now, not inside it */
.demowrap > .hdots{padding:0;margin-top:-6px}
.demowrap > .hdots .kick{color:var(--muted)}

/* ============ v7 ============ */

/* ---- hero: the card is gone; three short proofs carry the left ---- */
.heropts{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.heropts li{display:flex;align-items:flex-start;gap:11px;font:400 16px/1.45 'Libre Franklin',system-ui,sans-serif;
  color:#D4DACF;letter-spacing:-.005em}
.hp-g{flex:0 0 20px;width:20px;height:20px;margin-top:1px;border-radius:50%;
  background:rgba(200,240,60,.14);border:1px solid rgba(200,240,60,.42);
  color:var(--lure);font:400 11px/18px 'DM Mono',ui-monospace,monospace;text-align:center}
.herohead{font-size:clamp(38px,4.3vw,60px)}
.herosub{max-width:46ch}
.herogrid{align-items:center}
.demowrap{gap:0}
@media (max-width:900px){
  .heropts{margin-top:20px;gap:9px}
  .heropts li{font-size:15px}
  .herohead{font-size:clamp(32px,8.6vw,44px)}
}

/* ---- the itemised bill (replaces the three stakes) ---- */
.bill{margin-top:var(--s6);background:var(--surface);border:1px solid var(--line)}
.billhead{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:0;
  padding:12px var(--s5);border-bottom:1px solid var(--line);background:var(--paper-2)}
.billhead span{font:400 11px 'DM Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-d)}
.billrow{display:grid;grid-template-columns:118px 1fr;align-items:baseline;gap:0 var(--s5);
  padding:20px var(--s5);border-bottom:1px solid var(--fill);position:relative}
.billrow .bq{font:400 24px 'DM Mono',ui-monospace,monospace;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.billrow .bt b{display:block;font:700 19px/1.28 'Literata',Georgia,serif;;
  letter-spacing:-0.004em;color:var(--ink)}
.billrow .bt p{margin:6px 0 0;font:400 15.5px/1.55 'Libre Franklin',system-ui,sans-serif;color:var(--muted);
  max-width:62ch}
.billrow.out .bq{color:var(--muted-d)}
.billrow.out .bt b{color:var(--ink-3)}
.billrow.out .bt b{text-decoration:line-through;text-decoration-color:var(--line-2);
  text-decoration-thickness:1px}
.billrow.keep{background:var(--lure-tint);border-bottom:0}
.billrow.keep .bq{color:var(--lure-ink);font-size:30px}
.billrow.keep .bt b{color:var(--ink)}
.billrow.keep .bt p{color:var(--lure-ink);opacity:.92}
.billtotal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);
  padding:22px var(--s5) 24px;border-top:2px solid var(--ink);background:var(--paper-2)}
.billtotal .bcol .kick{margin:0 0 7px}
.billtotal .bval{margin:0;font:700 25px/1.1 'Literata',Georgia,serif;;
  letter-spacing:-0.007em;color:var(--ink)}
@media (max-width:900px){
  .billhead{display:none}
  .billrow{grid-template-columns:1fr;gap:10px;padding:18px var(--s4)}
  .billrow .bq{font-size:20px}
  .billrow.keep .bq{font-size:24px}
  .billrow .bt b{font-size:17.5px}
  .billtotal{grid-template-columns:1fr;gap:18px;padding:20px var(--s4)}
  .billtotal .bval{font-size:23px}
}

/* ---- the running demo, in a frame, where the fake video used to be ---- */
.reel2{margin-top:var(--s6)}
.r2rail{display:flex;align-items:stretch;gap:0;border:1px solid var(--line);border-bottom:0;
  background:var(--surface)}
.r2ch{flex:1;display:flex;align-items:center;gap:10px;padding:14px var(--s4);
  font:400 13.5px 'Libre Franklin',system-ui,sans-serif;color:var(--muted);
  border-right:1px solid var(--fill)}
.r2ch:last-child{border-right:0}
.r2ch b{font:400 11px 'DM Mono',ui-monospace,monospace;letter-spacing:.1em;color:var(--muted-d)}
.r2ch.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--lure)}
.r2ch.on b{color:var(--lure-ink)}
.r2stage{position:relative;background:var(--ink);border:1px solid var(--ink-2);
  padding:var(--s6) var(--s6) var(--s5);overflow:hidden}
.r2glow{position:absolute;left:50%;top:-180px;width:720px;height:420px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(200,240,60,.16),transparent 68%);
  pointer-events:none}
.r2stage .demo{position:relative;z-index:1;max-width:700px;margin:0 auto}
.r2foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  padding:14px var(--s4);border:1px solid var(--line);border-top:0;background:var(--paper-2)}
.r2foot .hdots{margin:0;padding:0}
.r2foot .hdots .kick{color:var(--muted)}
.r2link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);
  font:400 14px 'Libre Franklin',system-ui,sans-serif;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.r2link:hover{border-bottom-color:var(--ink)}
.r2link svg{transition:transform .2s}
.r2link:hover svg{transform:translateX(3px)}
@media (max-width:900px){
  .r2rail{flex-direction:column}
  .r2ch{border-right:0;border-bottom:1px solid var(--fill);padding:11px var(--s4)}
  .r2ch.on{box-shadow:inset 2px 0 0 var(--lure)}
  .r2stage{padding:var(--s5) var(--s4)}
  .r2glow{width:420px}
  .r2foot{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---- hero proportions now that the card has moved out ---- */
.hero{min-height:min(96vh,880px);display:flex;flex-direction:column}
.hero > .wrap:has(.topnav){flex:0 0 auto}
.herogrid{flex:1 1 auto;padding-top:var(--s5);padding-bottom:var(--s7);align-items:center}
.heroacts{margin-top:34px}
.heroacts .undercta{color:var(--muted-d)}
.hero .ticker{margin-top:auto}
.herofish{right:70px;top:50%;transform:translateY(-54%);bottom:auto;opacity:.92}
@media (max-width:1180px){ .herofish{right:-30px} }
@media (max-width:900px){
  .hero{min-height:0;display:block}
  .herogrid{padding-top:24px}
  .heroacts{margin-top:26px}
}

/* ---- v7 trims ---- */
.billrow .bq,.billhead span:first-child{text-align:right;padding-right:var(--s3)}
.billhead{grid-template-columns:118px 1fr}
.hero{min-height:min(90vh,824px)}
.heroacts .undercta{color:#9AA3A9}
.r2stage{padding:var(--s6) var(--s5);display:flex;align-items:center;justify-content:center}
.r2stage .demo{max-width:880px;width:100%;margin:0}
@media (max-width:900px){
  .billrow .bq{text-align:left;padding-right:0}
  .r2stage{padding:var(--s5) var(--s4)}
}
@keyframes mapfade{0%,100%{opacity:1}50%{opacity:.35}}
.sf-site{min-height:100vh}

/* ---------------------------------------------------------------------------
   Mobile addendum — generated by stage0/src/site/port_handoff.py. Everything
   above this line is the designer's, untouched.

   HANDOFF §11 claims "Touch targets >= 44px" and §13 asks for 390px to be
   clean. Measured with `check_mobile.mjs`, the handoff ships 9x9 market dots,
   25x25 annotation pins and a 26px wordmark.

   The box is grown with transparent borders and `background-clip:
   content-box`, so the drawn dot and circle keep their exact size. Not with
   `::after`: `.pin::after` is already the designer's ping ring, and a pseudo
   element grows what a finger can hit without growing the element's own box,
   which reads as passing an audit rather than fixing a control.
   --------------------------------------------------------------------------- */
/* Set when the headline was "Find the businesses that", which overflowed the
   600px hero column at the designer's 60px. Kept for "Stop working from /
   junk lists.": HANDOFF §6 wants the highlight on its own line, and measured
   at 1440 and 390 it is two lines at both. */
.sf-site .herohead { font-size: clamp(32px, 3.3vw, 49px); }

/* Literata (2026-10-06) is wider than Fraunces, so display type tracks at
   about -.016em. The handoff converted `.dsp` but left three display rules on
   their Fraunces tracking, and `.herohead` overrides `.dsp`. */
.sf-site .herohead, .sf-site .hcopy h1, .sf-site .pickout p { letter-spacing: -.016em; }
/* Literata's font box is much taller than its glyphs, and an inline
   background paints the whole box: at the designer's 1.04 the lime highlight
   on line two covered the descenders of line one. Line-height alone cannot
   clear it without pulling the two lines apart, so the highlight is painted
   over the glyph band only. */
.sf-site .herohead { line-height: 1.12; }
.sf-site .herohead .hilite {
  background: linear-gradient(var(--lure), var(--lure)) no-repeat 0 72% / 100% 76%;
}

/* The steps are four (2026-10-07): the grid, the arrows between the cards,
   and the new step 2's picture, a block of the area with a few that fit. */
.sf-site .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-site .flowarrow.a { left: calc(25% - 13px); }
.sf-site .flowarrow.c { left: calc(50% - 13px); animation-delay: .25s; }
.sf-site .flowarrow.b { left: calc(75% - 13px); }
.sf-site .step:nth-child(4) .stepart { --rot: .6deg; }
.sf-site .step h3 { font-size: 22px; }
.sf-site .areamap { display: grid; grid-template-columns: repeat(8, 10px); gap: 14px 16px; }
.sf-site .areamap i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2, #c9cfc8); }
.sf-site .areamap i.on { background: var(--lure); box-shadow: 0 0 0 4px rgba(200, 240, 60, .25); }
@media (max-width: 1100px) {
  .sf-site .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-site .flowarrow { display: none; }
}
@media (max-width: 820px) {
  .sf-site .steps { grid-template-columns: 1fr; }
}

/* The USP that leads the hero's sub-line (owner, 2026-10-04: "should be on
   top"). Brighter and heavier than the rest of the paragraph, on its own line,
   so it reads as the claim and the sentence after it as the how. */
.sf-site .herousp { display: block; margin-bottom: 10px; color: #fff; font-weight: 600; font-size: 1.12em; line-height: 1.4; }

/* The film section added by the port. Sized like the other dark stages on the
   page so it sits in the same rhythm. */
.sf-site .filmframe {
  margin-top: var(--s5);
  border: 1px solid var(--line);
  background: var(--ink);
  overflow: hidden;
}
.sf-site .filmframe video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

@media (max-width: 760px) {
  .sf-site .hdot,
  .sf-site .pin {
    box-sizing: content-box;
    background-clip: content-box;
    border-style: solid;
    border-color: transparent;
  }
  .sf-site .hdot { border-width: 18px; }
  .sf-site .pin  { border-width: 10px; }
  .sf-site .hdots { gap: 2px; }

  /* The wordmark carries no class; it is the anchor wrapping the mark. */
  .sf-site a:has(> svg[aria-label="Small Fish"]),
  .sf-site .quiet,
  .sf-site .arrowlink,
  .sf-site .r2link,
  .sf-site .crumb a,
  .sf-site .demo a,
  .sf-site .rowcard a,
  .sf-site button[aria-label="Pause"],
  .sf-site button[aria-label="Play"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The 12px floor, on phones only. Desktop keeps the designer's 10.5-11.5px
     label scale exactly as drawn. The handoff does not claim a text floor
     (§11 is touch targets and input size), so this is the repo's standard
     meeting the designer's type, not a defect on their side. */
  .sf-site .billhead span,
  .sf-site .dlive,
  .sf-site .find .k,
  .sf-site .find .n,
  .sf-site .hp-g,
  .sf-site .kick,
  .sf-site .kicker,
  .sf-site .miniform .fld span.lab,
  .sf-site .minirow .mail,
  .sf-site .qk,
  .sf-site .r2ch b,
  .sf-site .sfrow,
  .sf-site .sitefoot,
  .sf-site footer h4,
  .sf-site .sfu,
  .sf-site .sfv,
  .sf-site .find .k,
  .sf-site footer h4 { font-size: 12px; }
}