/* Colossal Reach V2: loader, tab nav, service spread, recipe cards, closing CTA */

/* ---------- loader: full-screen panel, big logo, then it flies up into the nav tab ---------- */
.loader{position:fixed;inset:0;z-index:90;background:var(--teal-2);display:grid;place-items:center;
  clip-path:inset(0 0 0 0 round 0);will-change:clip-path}
.loader .lg{display:flex;flex-direction:column;align-items:center;gap:22px}
.loader img{width:clamp(120px,16vw,220px);display:block}
.loader .wm{font-size:clamp(34px,6.4vw,96px);font-weight:800;letter-spacing:-.045em;line-height:.9;color:#fff;text-align:center}
.loader .wm small{display:block;font-size:.2em;letter-spacing:.32em;font-weight:700;margin-top:.9em;color:var(--pale)}
.loader .pct{position:absolute;bottom:6vh;left:0;right:0;text-align:center;font-weight:700;font-size:13px;letter-spacing:.3em;color:var(--pale)}
body.loading{overflow:hidden}

/* ---------- nav: hanging tab (top-centre) + CTA pill ---------- */
.tab{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:80;width:42px;height:52px;background:var(--teal-2);
  border-radius:0 0 10px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  box-shadow:0 6px 16px rgba(0,0,0,.3);text-decoration:none;opacity:0;transition:opacity .3s}
.tab:hover,.tab:focus-visible{opacity:1!important}   /* sits back at 50% (set in v2.js), full on hover */
.tab img{width:20px}
.tab i{display:block;width:12px;height:1.5px;background:#fff;box-shadow:0 3.5px 0 #fff;margin-bottom:3.5px}
.pill{position:fixed;top:22px;right:22px;z-index:80;background:var(--teal);color:var(--ink);padding:12px 18px;border-radius:999px;
  font-weight:800;font-size:14px;text-decoration:none;opacity:0}
@media (max-width:640px){.pill{display:none}}

/* ---------- 2. the service spread (three fanned cards) ---------- */
.spread{padding:16vh 16px 18vh;text-align:center;background:linear-gradient(#0C0B0C,#071d24 60%,#0C0B0C)}
.spread .kick{font-size:12px;letter-spacing:.24em;color:var(--teal);font-weight:800}
.spread h2{margin-top:14px;font-size:clamp(34px,5.4vw,84px);letter-spacing:-.045em;line-height:.95;font-weight:800}
.spread h2 em{font-style:normal;color:var(--teal)}
.fan{position:relative;display:flex;justify-content:center;align-items:flex-start;margin:9vh auto 0;max-width:1180px;perspective:1400px}
.svc{position:relative;width:min(370px,32vw);aspect-ratio:3/4.15;border-radius:26px;overflow:hidden;text-decoration:none;color:#fff;
  display:flex;flex-direction:column;text-align:left;background:linear-gradient(165deg,#0e3d49,#071a20 70%);
  border:1px solid rgba(34,199,234,.28);box-shadow:0 30px 60px rgba(0,0,0,.45);transition:box-shadow .3s}
.svc.c{z-index:3;background:linear-gradient(165deg,#22C7EA 0%,#189DBB 45%,#0F6F86 100%);border-color:#BDEFF9;color:var(--ink)}
.svc.l{z-index:2;margin-right:-2vw;margin-top:4vh}
.svc.r{z-index:2;margin-left:-2vw;margin-top:4vh}
.svc:hover{box-shadow:0 40px 80px rgba(0,0,0,.55),0 0 0 2px var(--teal)}
.svc .scene{flex:1;position:relative;margin:14px;border-radius:16px;background:rgba(12,11,12,.55);overflow:hidden}
.svc.c .scene{background:rgba(6,48,59,.85)}
.svc .meta{padding:6px 22px 24px}
.svc .meta i{font-style:normal;font-size:11px;letter-spacing:.22em;font-weight:800;opacity:.75}
.svc .meta b{display:block;font-size:clamp(22px,2.2vw,32px);letter-spacing:-.035em;line-height:1;margin-top:6px}
.svc .meta span{display:block;font-size:14px;line-height:1.4;margin-top:8px;opacity:.85}
.svc .meta u{display:inline-block;text-decoration:none;font-weight:800;font-size:14px;margin-top:12px}
@media (max-width:820px){
  .fan{flex-direction:column;align-items:center;gap:18px}
  .svc{width:min(380px,92vw)}.svc.l,.svc.r{margin:0}
  .svc.c{order:-1}
}

/* mini-scene: website being built */
.sc-web .bar{height:22px;background:rgba(255,255,255,.08);display:flex;gap:5px;align-items:center;padding:0 10px}
.sc-web .bar s{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35)}
.sc-web .blk{position:absolute;left:12px;right:12px;border-radius:8px;background:rgba(189,239,249,.16)}
.sc-web .blk.h{top:36px;height:22%;background:linear-gradient(90deg,#22C7EA,#BDEFF9)}
.sc-web .blk.t1{top:calc(36px + 24%);height:8px;right:40%}
.sc-web .blk.t2{top:calc(36px + 24% + 14px);height:8px;right:58%}
.sc-web .row3{position:absolute;left:12px;right:12px;bottom:12px;height:30%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sc-web .row3 i{border-radius:8px;background:rgba(189,239,249,.14)}
.sc-web .cur{position:absolute;width:14px;height:14px;left:60%;top:60%;
  background:conic-gradient(from 200deg,#fff 0 40deg,transparent 0);clip-path:polygon(0 0,100% 55%,45% 60%,30% 100%)}

/* mini-scene: automation flow */
.sc-auto svg{position:absolute;inset:0;width:100%;height:100%}
.sc-auto .lbl{font:700 9px 'Wix Madefor Display',sans-serif;fill:#BDEFF9;letter-spacing:.08em}

/* mini-scene: call center (team first, Super Intelligence as backup) */
.sc-call{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:14px}
.sc-call .ring{width:62px;height:62px;border-radius:50%;background:#22C7EA;display:grid;place-items:center;position:relative}
.sc-call .ring::before,.sc-call .ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #22C7EA;animation:ring 1.6s infinite}
.sc-call .ring::after{animation-delay:.8s}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}
.sc-call .ring svg{width:28px;height:28px}
.sc-call .st{font-size:12px;font-weight:800;letter-spacing:.06em;color:#BDEFF9;text-align:center;min-height:2.6em}
.sc-call .wave{display:flex;gap:3px;align-items:center;height:26px}
.sc-call .wave i{width:4px;border-radius:2px;background:#22C7EA;height:30%}

/* ---------- hard hit, now mid-page ---------- */
.hit .hit-sub{margin-top:26px;font-size:clamp(18px,2vw,28px);font-weight:700;color:var(--g1);letter-spacing:-.02em;max-width:30ch}
.hit .hit-sub b{color:#fff}

/* ---------- ingredients become buttons ---------- */
.inside li{cursor:pointer;transition:background .2s,padding .2s}
.inside li:hover{background:rgba(34,199,234,.08);padding-left:8px}
.inside li .open{margin-left:auto;align-self:center;font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--teal);white-space:nowrap}
.inside li{grid-template-columns:44px 1fr auto}

/* ---------- recipe index cards: tossed onto the ingredient list, piling up a little crooked ---------- */
.pile{position:absolute;left:4%;width:min(340px,82%);height:0;z-index:7;pointer-events:none}
.ic{position:absolute;left:0;top:0;width:100%;pointer-events:auto;cursor:pointer;color:#0b3a46;border-radius:4px;
  padding:min(16px,2.2svh) 20px min(14px,1.9svh);margin-top:18px;
  background:repeating-linear-gradient(transparent 0 min(23px,3.2svh),rgba(15,111,134,.16) min(23px,3.2svh) calc(min(23px,3.2svh) + 1px)),
    radial-gradient(130% 100% at 25% 15%,#f8efdb 0%,#efe1c1 75%,#e6d3aa 100%);
  border-top:4px solid #0F6F86;box-shadow:0 16px 34px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.25)}
.ic .ic-tab{position:absolute;left:14px;bottom:100%;margin-bottom:4px;padding:5px 12px 4px;border-radius:6px 6px 0 0;
  background:#0F6F86;color:#f6ecd6;font-size:min(10.5px,1.6svh);font-weight:800;letter-spacing:.2em;white-space:nowrap}
.ic .toss{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:2px solid #0F6F86;background:transparent;
  color:#0F6F86;font:800 13px/1 'Wix Madefor Display',sans-serif;cursor:pointer}
.ic .toss:hover{background:#0F6F86;color:#f6ecd6}
.ic h3{font-size:min(24px,3.4svh);line-height:1;letter-spacing:-.035em;font-weight:800;color:#06303B;padding-right:30px}
.ic .ic-tl{margin-top:min(5px,.7svh);font-size:min(13.5px,1.95svh);font-weight:700;color:#0F6F86}
.ic ol{margin:min(10px,1.4svh) 0 0;padding-left:18px;font-size:min(13.5px,1.95svh);line-height:1.38;font-weight:600}
.inside .ic li{display:list-item;padding:0;border:0;grid-template-columns:none;gap:0}   /* undo the ingredient-list row styles */
.ic ol li+li{margin-top:min(4px,.5svh)}
.ic .ft{margin-top:min(10px,1.4svh);padding-top:min(7px,1svh);border-top:2px dotted rgba(15,111,134,.5);
  font-size:min(10.5px,1.55svh);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#0F6F86}
.inside li.got .open{color:var(--teal)}

/* ---------- closing CTA ---------- */
.close{min-height:90svh;display:grid;place-items:center;text-align:center;padding:12vh 16px;
  background:radial-gradient(60% 50% at 50% 50%,#06303B 0%,#0C0B0C 70%)}
.close h2{font-size:clamp(40px,7vw,112px);letter-spacing:-.05em;line-height:.92;font-weight:800}
.close h2 em{font-style:normal;color:var(--teal)}
.close p{margin:20px auto 0;color:var(--g1);max-width:520px;line-height:1.5}
.close a{display:inline-block;margin-top:30px;background:var(--teal);color:var(--ink);padding:18px 30px;border-radius:999px;font-weight:800;text-decoration:none;font-size:17px}

/* ---------- service stub pages ---------- */
.stub{min-height:100svh;display:grid;place-items:center;text-align:center;padding:18vh 16px 12vh;
  background:radial-gradient(60% 50% at 50% 40%,#06303B 0%,#0C0B0C 72%)}
.stub .kick{font-size:12px;letter-spacing:.24em;color:var(--teal);font-weight:800}
.stub h1{margin-top:16px;font-size:clamp(44px,8vw,128px);letter-spacing:-.05em;line-height:.9;font-weight:800}
.stub h1 em{font-style:normal;color:var(--teal)}
.stub p{margin:22px auto 0;max-width:620px;font-size:clamp(16px,1.5vw,21px);line-height:1.5;color:var(--g1)}
.stub .big{margin:26px auto 0;max-width:720px;font-size:clamp(20px,2.4vw,32px);line-height:1.25;font-weight:800;letter-spacing:-.02em;color:#fff}
.stub .acts{margin-top:34px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.stub .acts a{padding:16px 24px;border-radius:999px;font-weight:800;text-decoration:none}
.stub .acts a.p{background:var(--teal);color:var(--ink)}
.stub .acts a.g{border:2px solid var(--teal);color:var(--teal)}
.stub .soon{margin-top:46px;font-size:11px;letter-spacing:.24em;color:var(--g2);font-weight:800}

/* =====================================================================
   ONE SCREEN PER SECTION: every section is exactly 100svh and its type and
   cards scale with the SMALLER of width and height, so each message fits in
   one view on any screen shape. (Phones stack instead: see the bottom.)
   ===================================================================== */
.reach,.spread,.hit,.close,.payoff{height:100svh;min-height:0;box-sizing:border-box;overflow:hidden}

/* 1. hero */
.reach .inner{gap:min(52px,5svh)}
.reach h1{font-size:min(8.4vw,12svh)}
.reach p{font-size:clamp(14px,min(1.3vw,2.2svh),20px);margin-top:min(18px,2svh)}
.reach a{margin-top:min(28px,3svh)}

/* 2. service spread */
.spread{display:flex;flex-direction:column;justify-content:center;padding:max(6svh,112px) 16px 4svh}   /* clears the hanging tab */
.spread .kick{font-size:clamp(10px,1.4svh,13px)}
.spread h2{font-size:min(5.4vw,7.5svh);margin-top:1.4svh}
.fan{margin-top:4svh}
.svc{--ch:min(56svh,46vw);height:var(--ch);width:calc(var(--ch) * .72);aspect-ratio:auto}
.svc .scene{margin:min(14px,1.6svh)}
.svc .meta{padding:.4svh min(22px,2.4svh) min(24px,2.6svh)}
.svc .meta i{font-size:clamp(9px,1.2svh,11px)}
.svc .meta b{font-size:min(2.2vw,3.5svh)}
.svc .meta span{font-size:clamp(11px,1.6svh,14px)}
.svc .meta u{font-size:clamp(11px,1.6svh,14px);margin-top:1.2svh}
.svc.l,.svc.r{margin-top:3svh}

/* 3. hard hit */
.hit{padding:10svh clamp(16px,4vw,60px) 8svh}
.hit .ln{font-size:min(15.5vw,21svh)}
.hit .hit-sub{font-size:min(2vw,3.4svh);margin-top:2svh}
.hit .tag{margin-top:2svh}

/* 4. secret sauce (stage is already one sticky screen) */
.inside h2{font-size:min(5.6vw,8svh)}
.inside ul{margin-top:2svh}
.inside li{padding:min(13px,1.3svh) 0}
.inside li b{font-size:min(1.5vw,2.5svh)}
.inside li span{font-size:clamp(11px,1.6svh,13px)}
.inside .hint{margin-top:1.4svh!important;font-size:clamp(10px,1.3svh,12px)!important}
.nofill{font-size:min(2.2vw,3.4svh);margin-top:1.4svh}
/* the cue under the list: shown after a first scroll that did not leave (people read here); while it shows, the next one leaves */
.inside .nudge{margin-top:1.2svh;font-size:min(1.35vw,2.1svh);font-weight:700;letter-spacing:.03em;color:var(--teal);opacity:0;pointer-events:none}
.inside .nudge i{display:inline-block;font-style:normal;margin-left:.2em}
.inside .nudge .ph{display:none}

/* 5. timeline intro, cards, payoff */
.system{padding-top:12svh}
.system h2{font-size:min(6vw,9svh)}
.system p.lead{font-size:clamp(14px,2svh,18px)}
.card{padding:min(22px,2.4svh) min(24px,2.6svh)}
.card h3{font-size:min(2vw,3.2svh)}
.card p,.ui{font-size:clamp(12px,1.7svh,14px)}
.payoff{display:flex;flex-direction:column;justify-content:center;padding:6svh 0}
.payoff h2{font-size:min(4.6vw,7.5svh)}
.proof{margin-top:4svh}
.proof div{padding:min(20px,2.2svh) min(22px,2.4svh)}
.proof b{font-size:min(1.4vw,2.4svh)}
.proof span{font-size:clamp(12px,1.7svh,14px)}
.how{margin-top:3svh}
.payoff:has(.how[aria-expanded="true"]){height:auto;min-height:100svh}   /* opening the details may grow past one screen */

/* 6. close */
.close{padding:0 16px}
.close h2{font-size:min(7vw,12svh)}
.close p{font-size:clamp(14px,2svh,18px)}

/* phones: stacked layouts can't be one screen, so they flow naturally */
@media (max-width:820px){
  .spread,.payoff{height:auto;min-height:100svh;overflow:visible}
  .svc{--ch:auto;height:auto;width:min(380px,92vw);aspect-ratio:3/4.15}
  .svc .meta b{font-size:24px}.svc .meta span{font-size:14px}
  .hit .ln{font-size:min(15.5vw,13svh)}
  .hit .hit-sub{font-size:18px}.inside li b{font-size:16px}.proof b{font-size:18px}
}

/* 4b. secret sauce pour film
   The jar layers are full 1080² frame-0 cutouts in a box the exact size of the film canvas, so when the jar
   moves back to (0,0) it sits on the video pixel for pixel. 0–4.2 screens land + ingredients, 4.2–5 handoff,
   5–10 pour, 7–10 the next section creeps up, 10–11 it slides over. */
.film{height:950svh}   /* V4 (svh, so the script's screen unit matches on Android): land + ingredients (4.2) · handoff (to 5) · pour (to 7.5) · next section slides over (to 8.5) */
.jarwrap,#sauceFilm{width:100svh;height:100svh}
@media (max-aspect-ratio:1/1){.jarwrap,#sauceFilm{width:100vw;height:100vw}}
.jarwrap{top:calc(50% + 16svh)}
.jar.photo{-webkit-mask-image:none;mask-image:none}
.jar.photo .jbody,.jar.photo .jlid{left:0;top:0;width:100%;height:100%}
/* the glow sits behind the whole jar (jar centre is 50.5% down the frame) */
.jarwrap .energy{width:72%;left:14%;top:14.5%;bottom:auto;transform:none;z-index:0}
.jar.photo{z-index:1}
.filmbg{position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 50%,#062a33 0%,#03141a 70%,#020b0e 100%);opacity:0;z-index:4;pointer-events:none}
#sauceFilm{position:absolute;left:50%;top:50%;max-width:none;transform:translate(-50%,-50%);opacity:0;z-index:5;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
.film+.system{position:relative;z-index:20;margin-top:-100svh;border-radius:28px 28px 0 0;
  box-shadow:0 -30px 60px rgba(0,0,0,.55),0 -1px 0 rgba(189,239,249,.25)}

/* hard hit: outlined "hit hard." — the font's glyphs are built from overlapping contours, so a plain text-stroke draws
   rectangles inside the letters. Stroke first, then fill with the page colour on top: only the outer edge shows. */
.hit .ln.o{color:var(--ink);-webkit-text-stroke:4px var(--g1);paint-order:stroke fill}

/* hard hit → secret sauce: dashed jar cutout. Fixed box the size of the jar box (#jar), so it lines up with the landing jar. */
.jarcut{position:fixed;left:0;top:0;width:100svh;height:100svh;z-index:60;pointer-events:none;opacity:0;will-change:transform}
@media (max-aspect-ratio:1/1){.jarcut{width:100vw;height:100vw}}
.jarcut svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.jarcut .dash{fill:none;stroke:var(--pale);stroke-width:3.5;stroke-dasharray:16 11;stroke-linecap:round}
.jarcut .ghost{fill:rgba(189,239,249,.035)}
.jarcut .snip{fill:none;stroke:var(--teal);stroke-width:5;stroke-linecap:round}
.jarcut .q{position:absolute;left:33%;width:34%;top:39%;height:33%;display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:800;letter-spacing:-.03em;line-height:.92;color:var(--pale);font-size:calc(min(100svh,100vw) * .052);text-transform:uppercase}
.jarcut .q em{font-style:normal;color:var(--teal)}
.jarcut .q .q-how{display:block;font-size:1.3em;font-weight:800}
.jarcut .q .q-sm{display:block;font-size:.6em;line-height:1;margin-top:.3em}
.hit{z-index:61}   /* the headline stays in front of the cutout where they meet (.hit has no background, so the cutout shows through) */

/* ---------- V3: same lead, two outcomes ----------
   One sticky screen; rows reveal as you scroll (both sides together), then the verdict stamps slam in. */
.split{height:420svh;position:relative;text-align:left}
.sp-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:min(70px,9svh) clamp(16px,4vw,60px) 3svh;box-sizing:border-box;max-width:1240px;margin:0 auto}
.sp-pick{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:min(18px,2.4svh)}
.sp-pick span{font-size:min(12px,1.7svh);letter-spacing:.2em;font-weight:800;text-transform:uppercase;color:var(--g1);margin-right:6px}
.sp-pick button{font:700 min(15px,2.1svh)/1 'Wix Madefor Display',sans-serif;padding:min(10px,1.4svh) 18px;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--pale);border:2px solid rgba(189,239,249,.35);transition:background .25s,color .25s,border-color .25s}
.sp-pick button:hover{border-color:var(--teal)}
.sp-pick button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--ink)}
.sp-labs,.sp-row{display:grid;grid-template-columns:1fr min(92px,13vw) 1fr;gap:0 min(18px,1.6vw);align-items:center}
.sp-labs div{font-size:min(13px,1.8svh);font-weight:800;letter-spacing:.22em;text-transform:uppercase;padding-bottom:min(10px,1.3svh);
  border-bottom:2px solid currentColor}
.sp-labs .sp-today{color:#8a94a6}.sp-labs .sp-sauce{color:var(--teal)}
.sp-rows{display:flex;flex-direction:column;gap:min(10px,1.3svh);margin-top:min(12px,1.6svh)}
.sp-row time{text-align:center;font-size:min(13px,1.8svh);font-weight:800;letter-spacing:.06em;color:var(--pale);opacity:.8;white-space:nowrap}
.sp-row .c{border-radius:12px;padding:min(10px,1.3svh) 14px;font-size:min(14px,1.95svh);line-height:1.35;min-height:min(46px,6svh);
  display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
.sp-row .c b{display:block;font-size:min(11px,1.55svh);letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}
.sp-row .l{background:rgba(110,122,142,.12);border:1px solid rgba(110,122,142,.3);color:#b8c0cc}
.sp-row .l b{color:#8a94a6}
.sp-row .r{background:rgba(34,199,234,.1);border:1px solid rgba(34,199,234,.4);color:#e6f8fc}
.sp-row .r b{color:var(--teal)}
.sp-row .c.quiet{background:transparent;border-style:dashed;color:#6E7A8E;font-style:italic}
.sp-row .c.mail{background:#10161c;border-color:rgba(189,239,249,.25);color:#dfe8ee}
.sp-row .c.bad{border-color:rgba(224,96,90,.55);background:rgba(224,96,90,.1);color:#f1c9c6}
.sp-row .c.bad b{color:#e0605a}
.sp-row .c.cal{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}
.sp-row .c.cal i{flex:none;width:min(34px,4.6svh);height:min(34px,4.6svh);border-radius:8px;background:var(--teal);color:var(--ink);
  font:800 min(11px,1.5svh)/1.05 'Wix Madefor Display',sans-serif;font-style:normal;display:grid;place-items:center;text-align:center}
.sp-row.verdict{margin-top:min(6px,.8svh)}
.sp-row.verdict .c{min-height:0;align-items:center;text-align:center;font-size:min(30px,4.4svh);font-weight:800;letter-spacing:-.02em;padding:min(12px,1.6svh)}
.sp-row.verdict .l{color:#e0605a;border:3px solid #e0605a;background:rgba(224,96,90,.08)}
.sp-row.verdict .r{color:var(--ink);background:var(--teal);border:3px solid var(--teal)}
.sp-row.verdict .c small{display:block;font-size:min(11px,1.5svh);letter-spacing:.2em;font-weight:800;text-transform:uppercase;opacity:.85}
@media (max-width:760px){
  .sp-labs,.sp-row{grid-template-columns:1fr 1fr;gap:6px}
  .sp-row time{grid-column:1/-1;order:-1;text-align:left;opacity:.6}
  .sp-row .c{padding:8px 10px}
}

/* safeguard: the SECRET SAUCE title is sized by screen height too, so the title block always ends above where the
   jar's lid lands (lid ≈ 38svh down); the jar never covers the name on any screen */
.film{--T:min(12.6vw,13svh,210px)}
.film .big{font-size:var(--T)}
.film .sub{top:calc(14vh + var(--T) * .95)}
.film .rule.r2{top:calc(14vh + var(--T) * .95 + clamp(22px,3vw,44px) * 1.5)!important}

/* ingredients: two halves under the title. The block is centred in the right half and on 55% of the screen height
   (same line as the jar); GSAP owns the centring (xPercent/yPercent) so its fade-out tween can't knock it off. */
@media (min-width:761px){ .inside{left:75%;right:auto;top:55%;transform:none;width:min(540px,42vw)} }

/* forward-only story: fade-cut veil + back-to-top button */
.cr-veil{position:fixed;inset:0;z-index:300;background:#041f27;opacity:0;pointer-events:none}
.to-top{position:fixed;right:22px;bottom:22px;z-index:90;width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:rgba(4,31,39,.7);border:2px solid var(--teal);color:var(--teal);display:grid;place-items:center;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s,background .2s,color .2s;backdrop-filter:blur(6px)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--teal);color:var(--ink)}
.to-top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- V3 re-order ---------- */
/* hero: the page is the proof */
.reach p.built{display:block;max-width:none;margin-top:min(16px,2svh);font-size:clamp(15px,min(1.5vw,2.4svh),22px);font-weight:800;letter-spacing:-.01em;color:#fff}
.reach p.built em{font-style:normal;color:var(--teal)}

/* "Add a second sauce": the house jar + two add-on jars, one screen */
.sauces{height:100svh;box-sizing:border-box;padding:clamp(64px,8svh,90px) clamp(16px,4vw,60px) 4svh;text-align:center;overflow:hidden;
  background:radial-gradient(60% 55% at 50% 62%,#073846 0%,#041f27 65%,#03161c 100%);display:flex;flex-direction:column;justify-content:center}
.sauces .kick{font-size:min(13px,1.8svh);letter-spacing:.22em;font-weight:800;text-transform:uppercase;color:var(--teal)}
.sauces h2{margin-top:min(8px,1svh);font-size:min(6vw,9svh);line-height:.95;letter-spacing:-.05em;font-weight:800;color:var(--pale)}
.sauces h2 em{font-style:normal;color:var(--teal)}
.sauces .lead{margin-top:min(10px,1.4svh);font-size:clamp(14px,2svh,19px);color:var(--g1)}
.sj-row{margin-top:min(26px,3.4svh);display:flex;justify-content:center;align-items:flex-end;gap:clamp(20px,6vw,110px)}
.sj{margin:0;display:flex;flex-direction:column;align-items:center}
/* the jar is cropped out of the full 1080² frame-0 layers: jar area is x 370–710, y 242–856 */
.sj-jar{position:relative;height:min(44svh,42vw);aspect-ratio:340/614;container-type:inline-size}
.sj-jar img{position:absolute;width:317.65%;left:-108.82%;top:-39.41%;max-width:none;pointer-events:none}
.sj figcaption{margin-top:min(14px,1.8svh);max-width:min(260px,26vw)}
.sj figcaption i{display:block;font-style:normal;font-size:min(11px,1.6svh);letter-spacing:.2em;font-weight:800;text-transform:uppercase;color:var(--g1)}
.sj figcaption b{display:block;margin-top:4px;font-size:min(22px,3.2svh);font-weight:800;letter-spacing:-.02em;color:#fff}
.sj figcaption span{display:block;margin-top:3px;font-size:min(14px,2svh);color:var(--g1)}
.sj.house figcaption i{color:var(--teal)}
@media (max-width:760px){
  .sauces{height:auto;min-height:100svh}
  .sj-row{flex-wrap:wrap;gap:24px 18px}
  .sj-jar{height:34svh}
  .sj figcaption{max-width:42vw}
}

/* the close: one move */
.close a{font-size:clamp(17px,2.4svh,20px);padding:min(20px,2.6svh) 34px}

/* ---------- V4 chunk 1 ---------- */
/* Screen 1 hero: small brand line, the promise as the headline, the proof as the subhead */
.reach p.pre{display:block;max-width:none;margin:0 0 min(14px,1.8svh);font-size:clamp(13px,min(1.2vw,2svh),17px);font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:var(--pale)}
.reach p.pre em{font-style:normal;color:var(--teal)}
.reach p.hero-sub{display:block;max-width:640px;margin:min(18px,2.2svh) auto 0;font-size:clamp(16px,min(1.6vw,2.6svh),24px);font-weight:700;color:#fff}
.reach a.word{display:inline-block}

/* Screen 3: the plain line leads (bold), the sauce name sits small above it */
.inside li small{display:block;font-size:min(11px,1.55svh);letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--teal);margin-bottom:3px}
.inside li b{color:#fff;line-height:1.2}
.inside li[data-recipe]{cursor:pointer;align-items:center}
.inside li .open{width:26px;height:26px;border-radius:50%;border:2px solid var(--teal);display:grid;place-items:center;
  font-size:16px;letter-spacing:0;line-height:1;transition:transform .3s,background .2s,color .2s}
.inside li[data-recipe]:hover .open{background:var(--teal);color:var(--ink)}
.inside li.on .open{transform:rotate(45deg);background:var(--teal);color:var(--ink)}
/* the recipe opens right under its line: a cream recipe strip */
.inside li.rx{display:block;padding:0;border:0;overflow:hidden}
.rx-card{margin:2px 0 min(10px,1.4svh);border-radius:6px;padding:min(12px,1.6svh) 16px min(10px,1.4svh);color:#0b3a46;
  background:repeating-linear-gradient(transparent 0 min(21px,3svh),rgba(15,111,134,.15) min(21px,3svh) calc(min(21px,3svh) + 1px)),
    radial-gradient(130% 100% at 25% 15%,#f8efdb 0%,#efe1c1 75%,#e6d3aa 100%);border-left:4px solid #0F6F86}
.rx-top{display:flex;justify-content:space-between;font-size:min(10.5px,1.5svh);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#0F6F86}
.rx-card ol{margin:min(6px,.8svh) 0 0;padding-left:18px;font-size:min(13.5px,1.9svh);line-height:1.38;font-weight:600}
.inside .rx-card li{display:list-item;padding:0;border:0;grid-template-columns:none}
.rx-card ol li+li{margin-top:min(3px,.4svh)}
.rx-ft{margin-top:min(8px,1.1svh);padding-top:min(6px,.8svh);border-top:2px dotted rgba(15,111,134,.5);font-size:min(10px,1.45svh);
  font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#0F6F86}

/* ---------- V4 chunk 2 ---------- */
/* Screen 4 intro: its own screen. "Watch the sauce go to work." slams in, then "Same lead. Two endings." (v4.js) */
.film+.system{padding-top:0}
.sys-intro{height:100svh;display:flex;justify-content:center;align-items:center}
.si-in{display:flex;flex-direction:column;align-items:center;gap:min(26px,3.4svh);will-change:transform,opacity}
.split{z-index:1}   /* the tables rise over the title (parallax hand-off in v4.js) */
.sys-intro h2{font-size:min(7vw,11svh);max-width:none}
.sys-intro .two{font-size:min(4.6vw,7.4svh);line-height:1;letter-spacing:-.045em;font-weight:800;color:#fff}
.sys-intro .two span,.sys-intro .two em{display:inline-block}
.sys-intro .two em{font-style:normal;color:var(--teal)}

/* Screen 4: the V3 split (restored 2026-10-06) */
/* "With the sauce" is the side to watch: bigger, glowing header; its cards carry a brighter teal edge */
.sp-labs .sp-sauce{font-size:min(19px,2.7svh);letter-spacing:.16em;border-bottom-width:3px;
  text-shadow:0 0 18px rgba(34,199,234,.65);box-shadow:0 10px 18px -12px rgba(34,199,234,.9)}
.sp-row .r{border-color:rgba(34,199,234,.75);box-shadow:0 0 22px rgba(34,199,234,.16)}
.sp-row .r.mail{border-color:rgba(34,199,234,.5)}
.sp-row.verdict .c small{margin-bottom:4px}
.sp-row .c.cal i{width:min(40px,5.4svh);height:min(40px,5.4svh);font-size:min(10px,1.4svh)}
/* Screen 5: one message, one screen */
.payoff.lane{text-align:center;align-items:center;justify-content:center}
.lane .kick{font-size:min(13px,1.8svh);letter-spacing:.22em;font-weight:800;text-transform:uppercase;color:var(--teal)}
.lane h2{margin-top:min(10px,1.4svh);font-size:min(5.4vw,8.6svh)!important;line-height:.98;letter-spacing:-.045em;max-width:16ch;margin-left:auto;margin-right:auto}
.lane p{margin:min(22px,3svh) auto 0;max-width:680px;font-size:clamp(17px,min(2vw,3.2svh),28px);line-height:1.35;color:var(--g1);font-weight:600}
.lane p b{color:#fff}

/* ---------- V4 chunk 3 ---------- */
/* Screen 6: three jars, tap one to pour */
.sauces h2{font-size:min(5.4vw,8.5svh)}
.sj{cursor:pointer;position:relative}
.sj:focus-visible{outline:2px solid var(--teal);outline-offset:8px;border-radius:12px}
.sj-jar{height:min(40svh,40vw)}
.sj figcaption{max-width:min(300px,28vw)}
.sj figcaption i{font-size:min(12px,1.7svh)}
.sj figcaption b{font-size:min(19px,2.7svh)}
.sj figcaption span{font-size:min(14px,1.95svh)}
.sj-note{margin-top:min(22px,2.8svh);font-size:clamp(14px,2svh,18px);color:var(--g1)}
.sj-note b{color:#fff}

/* Screen 7: trust */
.trust{height:100svh;box-sizing:border-box;padding:min(90px,11svh) clamp(16px,4vw,60px) 5svh;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;background:#0C0B0C}
.trust .kick{font-size:min(13px,1.8svh);letter-spacing:.22em;font-weight:800;text-transform:uppercase;color:var(--teal)}
.trust h2{margin-top:min(10px,1.4svh);font-size:min(6.4vw,10svh);line-height:.95;letter-spacing:-.05em;font-weight:800;color:#fff}
.trust h2 em{font-style:normal;color:var(--teal)}
.tr-grid{margin-top:min(34px,4.4svh);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,26px);max-width:1080px;width:100%}
.tr-grid div{text-align:left;border:1px solid rgba(34,199,234,.25);background:rgba(34,199,234,.05);border-radius:16px;padding:min(22px,3svh) min(24px,2vw)}
.tr-grid b{display:block;font-size:min(22px,3.2svh);font-weight:800;letter-spacing:-.02em;color:#fff}
.tr-grid span{display:block;margin-top:min(8px,1svh);font-size:min(15px,2.1svh);line-height:1.45;color:var(--g1)}
.tr-steps{list-style:none;margin:min(34px,4.4svh) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0}
.tr-steps li{display:flex;align-items:center;gap:10px;font-size:min(16px,2.3svh);font-weight:800;color:var(--pale)}
.tr-steps li+li::before{content:"";width:clamp(18px,3vw,46px);height:2px;margin:0 clamp(8px,1vw,14px);background:rgba(34,199,234,.45)}
.tr-steps i{font-style:normal;width:min(30px,4svh);height:min(30px,4svh);border-radius:50%;display:grid;place-items:center;background:var(--teal);color:var(--ink);font-size:min(13px,1.8svh)}
@media (max-width:760px){ .trust{height:auto;min-height:100svh}.tr-grid{grid-template-columns:1fr} }

/* Screen 8: the close, its form, the footer */
.close{display:flex!important;flex-direction:column;padding:0!important}
.close .cl-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:min(90px,11svh) 16px 2svh;text-align:center}
.close h2{font-size:min(7vw,11svh)}
.cl-btn{margin-top:min(30px,3.6svh);background:var(--teal);color:var(--ink);border:0;cursor:pointer;padding:min(20px,2.6svh) 34px;border-radius:999px;
  font:800 clamp(17px,2.4svh,20px)/1 'Wix Madefor Display',sans-serif}
.cl-btn:hover{background:var(--pale)}
.close.form-open{height:auto!important;min-height:100svh;overflow:visible!important}
.review{width:min(640px,100%);margin-top:min(26px,3.4svh);overflow:hidden;text-align:left}
.rv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.review label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--g1)}
.review label.wide{grid-column:1/-1}
.review input,.review select,.review textarea{font:600 16px/1.3 'Wix Madefor Display',sans-serif;color:#fff;background:#10161c;border:1px solid rgba(189,239,249,.25);
  border-radius:10px;padding:12px 14px;letter-spacing:0;text-transform:none}
.review input:focus,.review select:focus,.review textarea:focus{outline:none;border-color:var(--teal)}
.review button[type=submit]{margin-top:16px;width:100%;background:var(--teal);color:var(--ink);border:0;border-radius:999px;padding:16px;cursor:pointer;font:800 17px/1 'Wix Madefor Display',sans-serif}
.rv-small{margin-top:10px!important;font-size:13px!important;text-align:center;color:var(--g2)}
.rv-consent{margin-top:8px!important;font-size:12px!important;line-height:1.45!important;text-align:center;color:var(--g2);max-width:46em;margin-left:auto!important;margin-right:auto!important}
.close .rv-consent a,.close .rv-err a{display:inline;background:none;padding:0;margin:0;border-radius:0;font-size:inherit;font-weight:700;color:var(--g1);text-decoration:underline}   /* not the big .close a button */
.rv-err{margin-top:10px!important;font-size:14px!important;text-align:center;color:#ffb4a8}
.rv-err a{color:#fff}
.rv-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}   /* honeypot: off screen, never seen */
.rv-thanks{margin-top:26px!important;font-size:clamp(17px,2.6svh,22px)!important;font-weight:800;color:var(--teal)!important}
@media (max-width:620px){ .rv-grid{grid-template-columns:1fr} }
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 30px;padding:min(22px,2.8svh) clamp(16px,4vw,60px);
  border-top:1px solid rgba(189,239,249,.12);font-size:14px;color:var(--g1);text-align:left}
.foot{padding-right:max(clamp(16px,4vw,60px),92px)}   /* clears the fixed back-to-top button (22px + 48px + gap) */
@media (max-width:640px){ .foot{padding-right:16px;padding-bottom:84px} }
.ft-brand{display:flex;align-items:center;gap:10px}
.ft-brand img{width:30px}
.ft-brand b{color:#fff;font-size:16px}
.ft-brand span{color:var(--g2)}
.ft-contact,.ft-legal{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.foot a{color:var(--pale);text-decoration:none}
.foot a:hover{color:var(--teal)}
/* footer links are plain links, not the close section's big button */
.close .foot a{display:inline;background:none;padding:0;margin:0;border-radius:0;font-size:14px;font-weight:600;color:var(--pale)}
.close .foot a:hover{color:var(--teal)}

/* ---------- four sauces: Website (house) + Speed to Lead (green) + Automation (purple) + Integration (orange) ---------- */
/* --jh: jar height. The reflection runs ~10% of it below the glass, so the caption starts under it. Jars top-align: one shelf */
/* headroom above the jars (27% of --jh) covers a tapped jar's hop + lid pop + hover lift, so the lid never hits the headline */
.sj-row{--jh:min(36svh,30vw);gap:clamp(14px,3.4vw,64px);align-items:flex-start;margin-top:calc(var(--jh) * .27)}
.sj-jar{height:var(--jh)}
.sj figcaption{max-width:min(250px,21vw);margin-top:calc(var(--jh) * .1)}
.sj.speed figcaption i{color:#4ade80}.sj.auto figcaption i{color:#a98bf0}.sj.integ figcaption i{color:#fb923c}
/* tap an add-on jar: its own colour glows behind it */
.sj-glow{position:absolute;left:50%;top:55%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;opacity:0;pointer-events:none;z-index:-1;filter:blur(18px)}
.sj.house .sj-glow{background:radial-gradient(circle,rgba(34,199,234,.75),transparent 62%)}
.sj.speed .sj-glow{background:radial-gradient(circle,rgba(74,222,128,.75),transparent 62%)}
.sj.auto .sj-glow{background:radial-gradient(circle,rgba(169,139,240,.8),transparent 62%)}
.sj.integ .sj-glow{background:radial-gradient(circle,rgba(251,146,60,.8),transparent 62%)}
@media (max-width:760px){ .sj-row{--jh:34svh} .sj figcaption{max-width:42vw} }

/* the jar and its reflection are two layers of the same image, split at the bottom of the glass (y 856 of the 1080² layer):
   the jar lifts (hover, tap); the reflection stays on the shelf, slides the other way and fades, like a real one */
.sj-lift{position:absolute;inset:0}
.sj-lift img:first-child{clip-path:inset(0 0 20.74% 0)}
.sj-refl{clip-path:inset(79.26% 0 0 0)}

/* Your rules: the claim, after the proof (Dana asked for a price in the demo; it booked the visit instead) */
.lane > p{max-width:640px}
.rules{list-style:none;margin:min(24px,3.2svh) auto 0;padding:0;display:flex;flex-direction:column;gap:min(10px,1.4svh);width:fit-content;text-align:left}
.rules li{display:flex;align-items:center;gap:14px;font-size:clamp(15px,min(1.7vw,2.6svh),22px);font-weight:700;color:#fff}
.rules i{flex:none;width:min(30px,4.2svh);height:min(30px,4.2svh);border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:min(14px,2svh);font-weight:800;
  color:#e0605a;border:2px solid #e0605a;background:rgba(224,96,90,.1)}
.rules li:last-child i{color:var(--ink);background:var(--teal);border-color:var(--teal);font-size:min(19px,2.8svh)}
.lane p.rules-end{margin-top:min(24px,3.2svh);font-size:clamp(17px,min(2vw,3.2svh),26px)}
.lane p.rules-end b{color:var(--teal)}

/* the close: a person to reach at the moment they decide */
.close p.cl-talk{margin-top:min(16px,2svh);font-size:clamp(14px,2svh,17px)}
.close .cl-talk a{display:inline;background:none;padding:0;margin:0;border-radius:0;font-size:inherit;font-weight:800;color:var(--teal);text-decoration:none}
.close .cl-talk a:hover{color:var(--pale)}

/* ---------- the menu, after the ask (piece 2, 2026-10-07) ----------
   The jar they watched is full size; the other three are 72% and sit on the same shelf (their tops drop by the difference),
   so every caption starts on one line. */
.sauces .sj-lead{margin:min(12px,1.6svh) auto 0;max-width:620px;font-size:clamp(14px,min(1.5vw,2.3svh),19px);line-height:1.4;color:var(--g1)}
.sauces .sj-row{--jh:min(34svh,26vw);margin-top:calc(var(--jh) * .2)}
.sj:not(.house) .sj-jar{height:calc(var(--jh) * .72);margin-top:calc(var(--jh) * .28)}
.sj.house figcaption b{color:var(--pale)}
@media (max-width:760px){ .sauces .sj-row{--jh:30svh} }

/* the close: a nudge down to the menu */
.close a.cl-more{display:inline-block;margin-top:min(26px,3.4svh);background:none;padding:0;border-radius:0;font-size:clamp(13px,1.9svh,16px);font-weight:600;color:var(--g1)}
.close a.cl-more b{color:var(--teal);font-weight:800}
.close a.cl-more:hover b{color:var(--pale)}

/* footer: its own block after the menu */
.site-foot{background:#0C0B0C}
.site-foot .foot a{font-size:14px;font-weight:600}
.sauces h2{font-size:min(4.6vw,7svh)}
.sauces h2 em{display:block}                                   /* two clean lines: the jar they watched / three more */
.sauces .sj-row{--jh:min(30svh,25vw)}
.sauces .sj figcaption{max-width:min(280px,22vw)}
/* centre the menu, but never past the top padding (a 2026-10-14 fix: plain justify-content:center let a tall layout slide its
   "THE MENU" line up under the hanging logo tab). Auto margins give up gracefully when there is no free space. */
@media (min-width:761px){ .sauces{justify-content:flex-start} .sauces .kick{margin-top:auto} .sauces .sj-row{margin-bottom:auto} }

/* call and response across the landed jar. The jar box is 100svh square, centred; the glass's edges are 15.7% of it either
   side of centre, so both sides track the jar on any screen. Each side has a dotted callout line ending in a dot at the jar. */
.film{--gap:clamp(22px,3vw,56px);--half:15.7svh}
@media (max-aspect-ratio:1/1){ .film{--half:15.7vw} }
.film .blurb{top:50svh;bottom:auto;transform:translateY(-50%);max-width:min(310px,calc(50% - var(--half) - var(--gap) - 3vw));letter-spacing:0}
.film .blurb.sq{left:auto;right:calc(50% + var(--half) + var(--gap));text-align:right;
  font-size:clamp(20px,min(2.3vw,4svh),40px);line-height:1.02;letter-spacing:-.03em;font-weight:800;color:#fff}
.film .blurb.sq em{font-style:normal;color:var(--teal)}
.film .blurb.sa{left:calc(50% + var(--half) + var(--gap));text-align:left;
  font-size:clamp(13px,min(1.2vw,2.1svh),18px);line-height:1.5;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--pale)}
.film .blurb.sa b{color:var(--teal)}
.film .blurb span{display:block}
.film .blurb::after{content:'';position:absolute;top:50%;width:calc(var(--gap) - 8px);border-top:2px dotted rgba(189,239,249,.45)}
.film .blurb.sq::after{left:calc(100% + 6px)}
.film .blurb.sa::after{right:calc(100% + 6px)}
.film .blurb::before{content:'';position:absolute;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal)}
.film .blurb.sq::before{left:calc(100% + var(--gap) - 4px)}
.film .blurb.sa::before{right:calc(100% + var(--gap) - 4px)}
.film .blurb.sq em{white-space:nowrap}                         /* "secret sauce" never splits */
.film .blurb.sa b{display:block;margin-bottom:.2em}            /* the answer's headline on its own line */
.film .blurb.sa{max-width:min(400px,calc(50% - var(--half) - var(--gap) - 3vw))}
.film .blurb.sa b{white-space:nowrap}
@media (max-width:760px){ .film .kicker .k-more{display:none} }   /* phones: the kicker stays one line, clear of the title */
.sp-clock{display:none}   /* the phone story's clock strip (v4-mobile.css) */
.m-bar{display:none}   /* the phones-only bottom bar (v4-mobile.css) */

/* the Dana story's 9:50 card: Dana moves the time — a little text thread (desktop: one row of bubbles; phones stack them) */
.sp-row .c.chat{flex-direction:row;flex-wrap:wrap;align-items:center;gap:5px 6px}
.sp-row .c.chat b{flex-basis:100%;margin-bottom:1px}
.sp-row .c.chat .bub{display:inline-block;padding:3px 10px;border-radius:12px;line-height:1.35}
.sp-row .c.chat .bub.d{background:rgba(255,255,255,.08);color:#dfe8ee}
.sp-row .c.chat .bub.s{background:rgba(34,199,234,.2);color:#e6f8fc}
.sp-row .c.chat{justify-content:flex-start}
.sp-row .c.chat .bub{padding:2px 9px}
/* desktop screens that aren't tall: the 7-row story + verdict still fits one screen (design floor 1280×650) */
@media (min-width:761px) and (max-height:820px){
  .sp-stage{padding-top:min(64px,9svh);padding-bottom:2svh}
  .sp-pick{margin-bottom:min(10px,1.4svh)}
  .sp-labs div{padding-bottom:min(6px,.9svh)}
  .sp-rows{gap:min(6px,.85svh);margin-top:min(8px,1.1svh)}
  .sp-row .c{padding:min(7px,1svh) 12px;font-size:min(13.5px,1.95svh);line-height:1.3;min-height:min(38px,5.6svh)}
  .sp-row .c b{margin-bottom:1px}
  .sp-row.verdict{margin-top:min(4px,.6svh)}
  .sp-row.verdict .c{padding:min(8px,1.2svh);font-size:min(26px,3.7svh)}
  .sp-row .c.cal i{width:min(36px,5svh);height:min(36px,5svh)}
}

/* ingredients: the hand-drawn hint at line #2 (desktop), placed just left of the list, between it and the jar */
.rx-hint{position:absolute;right:calc(100% + 18px);transform:translateY(-62%);display:flex;align-items:flex-end;gap:2px;pointer-events:none;z-index:3}
.rx-hint span{font:700 clamp(22px,2.6svh,30px)/1 'Caveat',cursive;color:var(--pale);text-align:right;transform:rotate(-4deg);margin-bottom:26px;white-space:nowrap}
.rx-hint svg{width:clamp(90px,10svh,130px);height:auto;overflow:visible}
.rx-hint path{fill:none;stroke:var(--teal);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
/* phones: #2's (+) pulses instead */
.inside li .open.pulse{animation:rxPulse 1.1s ease-out 3}
@keyframes rxPulse{0%{box-shadow:0 0 0 0 rgba(34,199,234,.7)}100%{box-shadow:0 0 0 14px rgba(34,199,234,0)}}
.rx-hint span{font-size:clamp(24px,3.3svh,36px)}
.rx-hint svg{width:clamp(100px,12svh,150px)}
/* the ingredients block: wide enough that "What's inside the jar" stays on one line */
@media (min-width:761px){ .inside{width:min(640px,44vw)} .inside h2{white-space:nowrap;font-size:min(4.6vw,7.4svh)} }
.sj-swipe{display:none}   /* phones only (v4-mobile.css) */

/* desktop: "Watch the sauce go to work." under the jar on the pour-start screen, riding up into the headline (v4.js) */
.sauce-teaser{position:fixed;left:0;top:0;z-index:25;pointer-events:none;white-space:nowrap;
  font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--pale);text-align:center}
.sauce-teaser em{font-style:normal;color:var(--teal)}

/* 2026-10-10: plain ingredients, nothing to tap (the recipes are gone) */
.inside li{cursor:default}
.inside li:hover{background:none;padding-left:0}
.inside li b{display:block;text-wrap:balance}

/* ---------- 2026-10-10: "Watch the sauce go to work" = one text thread on a phone (v4.js) ---------- */
.split{height:100svh}                                                  /* one stop: the thread plays by itself */
.sms{display:flex;align-items:center;justify-content:center;gap:min(90px,7vw);width:min(1100px,92vw);margin:0 auto}
.sms-side{display:grid;width:min(440px,38vw);text-align:left}
.sms-side>*{grid-area:1/1;align-self:center}
.sms-kick{font-size:min(13px,1.9svh);letter-spacing:.2em;font-weight:800;text-transform:uppercase;color:var(--teal)}
.sms-set{margin:min(14px,2svh) 0 0;font-size:min(3.4vw,6svh);line-height:1.04;letter-spacing:-.035em;font-weight:700;color:#fff;text-wrap:balance}
.sms-set b{display:block;color:var(--g1);font-weight:700}
.sms-verdict{transform-origin:0 50%}
.sms-verdict small{display:block;font-size:min(13px,1.9svh);letter-spacing:.2em;font-weight:800;text-transform:uppercase;color:var(--teal)}
.sms-verdict strong{display:block;font-size:min(8vw,15svh);line-height:.95;letter-spacing:-.05em;font-weight:800;color:#fff;margin-top:.08em}
.sms-verdict>span{display:block;font-size:min(2.4vw,4.4svh);font-weight:700;color:var(--g1);margin-top:.25em}
.phone{--ph:min(600px,calc(100svh - 150px));--pw:calc(var(--ph) * .5);position:relative;flex:none;width:var(--pw);height:var(--ph);
  border-radius:calc(var(--pw) * .14);border:2px solid #3A4152;background:#090c10;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 0 0 calc(var(--pw) * .025) #14181f,0 30px 90px rgba(34,199,234,.22)}
.ph-notch{position:absolute;top:calc(var(--pw) * .035);left:50%;width:28%;height:calc(var(--pw) * .07);transform:translateX(-50%);border-radius:99px;background:#000;z-index:3}
.ph-top{display:flex;flex-direction:column;align-items:center;gap:2px;padding:calc(var(--pw) * .15) 10px 8px;border-bottom:1px solid rgba(174,185,199,.14);flex:none}
.ph-top i{width:calc(var(--pw) * .15);height:calc(var(--pw) * .15);border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#189DBB,#0F6F86);
  color:#fff;font-style:normal;font-weight:800;font-size:calc(var(--pw) * .05)}
.ph-top b{font-size:clamp(11px,calc(var(--pw) * .052),15px);color:#fff}
.ph-top small{font-size:clamp(9px,calc(var(--pw) * .038),11px);color:var(--g2)}
.ph-chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:10px calc(var(--pw) * .045) calc(var(--pw) * .07);overflow:hidden;min-height:0}
.ph-ts{align-self:center;font-size:clamp(9px,calc(var(--pw) * .038),11px);color:var(--g2);font-weight:600;margin-bottom:2px}
.bb{max-width:80%;padding:.5em .8em;border-radius:1.15em;font-size:clamp(11px,calc(var(--pw) * .05),14.5px);line-height:1.3;flex:none}
.bb.out{align-self:flex-end;background:var(--teal);color:#06303B;border-bottom-right-radius:.3em;font-weight:600}
.bb.in{align-self:flex-start;background:#262c36;color:#fff;border-bottom-left-radius:.3em}
.bb.typing{display:flex;gap:4px;padding:.75em .9em}
.bb.typing i{width:6px;height:6px;border-radius:50%;background:var(--g1);animation:bbDot 1s infinite ease-in-out}
.bb.typing i:nth-child(2){animation-delay:.15s}.bb.typing i:nth-child(3){animation-delay:.3s}
@keyframes bbDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.bb-meta{align-self:flex-start;margin:-2px 0 2px 4px;font-size:clamp(9px,calc(var(--pw) * .036),11px);font-weight:800;letter-spacing:.06em;color:var(--teal)}
.ph-banner{position:absolute;z-index:4;top:calc(var(--pw) * .13);left:5%;right:5%;display:flex;flex-direction:column;gap:1px;padding:.6em .8em;border-radius:1em;
  background:rgba(238,248,251,.96);color:#06303B;box-shadow:0 10px 30px rgba(0,0,0,.45);font-size:clamp(10px,calc(var(--pw) * .046),13px);line-height:1.25}
.ph-banner b{font-size:.8em;letter-spacing:.14em;text-transform:uppercase;color:#0F6F86}

/* 2026-10-15: the question sits on the jar's RIGHT (the answer line is gone); the jar glides left by --d (set by crPair() in
   index.html) so the pair is centred. Upright phones keep their stacked layout (v4-mobile.css overrides all of this). */
.film .blurb.sq{left:calc(50% + var(--half) + var(--gap) - var(--d,0px));right:auto;text-align:left;
  max-width:min(360px,calc(50% - var(--half) - var(--gap) - 3vw + var(--d,0px)))}
.film .blurb.sq::after{left:auto;right:calc(100% + 6px)}
.film .blurb.sq::before{left:auto;right:calc(100% + var(--gap) - 4px)}
/* 2026-10-15: the ingredients heading is now "So what's the secret sauce?" (longer): one line that fits the panel on desktop,
   and "secret sauce" never splits on phones */
@media (min-width:761px){ .inside h2{font-size:min(3.5vw,6.4svh,50px)} }
.inside h2 em{white-space:nowrap}

/* 2026-10-16: "you can scroll now" chevron (v4.js adds .cr-more and toggles .on when the visitor is free to move on) */
.cr-more{position:fixed;left:0;right:0;margin:0 auto;bottom:max(10px,1.8svh);z-index:85;width:max-content;display:flex;flex-direction:column;align-items:center;gap:2px;
  pointer-events:none;padding:6px 10px;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font:inherit;
  opacity:0;transform:translateY(-6px);transition:opacity .5s,transform .5s}
.cr-more.on{opacity:1;transform:none;pointer-events:auto}
.cr-more:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:14px}
.cr-more .lbl{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pale);text-shadow:0 2px 12px rgba(0,0,0,.8)}
.cr-more .tc{display:none}
@media (pointer:coarse){ .cr-more .dk{display:none} .cr-more .tc{display:inline} }
.cr-more svg{width:60px;height:60px;fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(34,199,234,.6))}
.cr-more.on svg{animation:crMore 1.8s ease-in-out infinite}
.cr-more:hover svg{stroke:var(--pale)}
@keyframes crMore{0%,100%{opacity:.35;transform:translateY(-5px)}50%{opacity:1;transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.cr-more.on svg{animation:none}}

/* 2026-10-16: no in-between beat after the landing: the question by the jar is gone (the list's heading asks it) */
.film .blurb.sq{display:none!important}

/* 2026-10-17: "Answered instantly." stays on one line */
.sys-intro .two em{white-space:nowrap}

/* 2026-10-17 (Gerald): every headline in capitals. Capitals need a little less negative tracking than lowercase. */
.reach h1,.p-qs,.p-a h2,.inside h2,.sys-intro h2,.sys-intro .two,.sms-set,.sms-verdict>span,.lane h2,.trust h2,.close h2,.sauces h2{
  text-transform:uppercase;letter-spacing:-.025em}
/* capitals run ~15% wider: the three headlines that needed room */
@media (min-width:761px){
  .sys-intro h2{font-size:min(6vw,9.4svh)}
  .sys-intro .two{font-size:min(3.9vw,6.3svh)}
  .inside h2{font-size:min(2.7vw,5vw,39px)}
}