/* Colossal Reach V4: the phone design. Loaded only on screens up to 760px wide (see the <link media> in index.html), after
   v4.css, so it overrides the desktop layout without touching it. 20px side gutters, phone-sized type, 44px+ tap targets. */
:root{--gut:20px}
/* nothing may stick out sideways: on a phone that zooms the whole page out and throws off every scroll measurement.
   clip (not hidden) so position:sticky keeps working */
html,body{overflow-x:clip}

/* ---------- 1. hero ---------- */
.reach .inner{gap:min(40px,4.4svh);padding:0 var(--gut)}
.reach p.pre{font-size:11px;letter-spacing:.2em;margin-bottom:12px}
.reach h1{font-size:min(12.4vw,7.4svh);line-height:.96}
.reach p.hero-sub{font-size:17px;line-height:1.35;max-width:28ch;padding:0}
.reach a.word{padding:16px 28px;font-size:16px}

/* ---------- 2. hard hit: the headline up top; the dashed jar is cut out below it (placed by v4.js) ---------- */
.hit{justify-content:flex-start;padding:16svh var(--gut) 0}
.hit .ln{font-size:min(15.5vw,10.5svh)}
.hit .ln.o{-webkit-text-stroke-width:3px}
.hit .hit-sub{font-size:19px;margin-top:2.4svh}

/* ---------- 3. the jar on phones. One measurement drives everything: --jb is the jar's square box (the jar, the pour film and
   the dashed cutout are the same box (--jb), so the jar lands in the cutout and hands off to the film pixel for pixel). It's as big as
   the screen allows by width AND height, and the jar's centre (--jc) sits just under the title, leaving room for the question
   above the glass and the answer under its reflection. In the 1080 box: glass 242–856, reflection to ~918, centre 540. ---------- */
@media (max-aspect-ratio:1/1){
  :root{--jb:min(140vw,70svh);
    --titleEnd:calc(14svh + min(12.6vw,13svh) * .95 + 33px);      /* the second dotted rule under the title (v4.css) */
    --jc:calc(var(--titleEnd) + 118px + var(--jb) * .2759)}        /* room for the question + its callout, then glass-top-to-centre */
  .jarwrap,#sauceFilm,.jarcut{width:var(--jb);height:var(--jb)}
  .jarwrap{top:var(--jc)}
  .jarcut .q{font-size:calc(var(--jb) * .05)}
}

.film .blurb.sa b{white-space:normal}
.film .blurb.sq,.film .blurb.sa{display:block}   /* sauce.css hides .blurb on narrow screens; the jar's call and response stays */
/* (2026-10-15) only on upright screens: --jc/--jb exist only there. A narrow but wide window (zoomed browser, phone on its
   side) keeps the desktop side-by-side call and response instead of piling both lines at the top. */
@media (max-aspect-ratio:1/1){
/* jar landing: the call and response goes vertical — the question above the jar, the answer under it, callouts point at it */
.film .blurb.sq,.film .blurb.sa{display:block;left:var(--gut);right:var(--gut);max-width:none;transform:none;text-align:center;letter-spacing:0}
.film .blurb.sq{top:auto;bottom:calc(100svh - var(--jc) + var(--jb) * .2759 + 34px);font-size:27px;line-height:1.05}
.film .blurb.sa{top:calc(var(--jc) + var(--jb) * .35 + 6px);font-size:12px;line-height:1.5;letter-spacing:.06em}
.film .blurb.sa b{white-space:normal}
.film .blurb::after{top:auto;left:50%;right:auto;width:0;height:20px;border-top:0;border-left:2px dotted rgba(189,239,249,.45)}
.film .blurb.sq::after{top:calc(100% + 6px);left:50%;right:auto}
.film .blurb.sa::after{top:auto;bottom:calc(100% + 4px);left:50%;right:auto}
.film .blurb::before{left:50%;right:auto;margin:0 0 0 -3.5px}
.film .blurb.sq::before{top:calc(100% + 27px);left:50%;right:auto}
.film .blurb.sa::before{top:auto;bottom:calc(100% + 25px);left:50%;right:auto}
}

/* an open recipe card dims the tucked-away jar so the card reads clean */
#jar .jar{transition:opacity .35s}
body.rx-open #jar .jar{opacity:.12}

/* ---------- 4. ingredients: the jar tucks into the top corner (index.html), the list gets the full width ---------- */
.inside{left:var(--gut);right:var(--gut);bottom:max(28px,4svh)}
.inside .nudge{font-size:13px;margin-top:8px}
.inside .nudge .desk{display:none}
.inside .nudge .ph{display:inline}
.inside h2{font-size:30px}
.inside ul{margin-top:12px}
.inside li{padding:11px 0;gap:12px;grid-template-columns:30px 1fr auto}
.inside li small{font-size:10px;letter-spacing:.14em}
.inside li b{font-size:15.5px;line-height:1.25}
.inside li .open{width:30px;height:30px}                       /* with the row's padding: a 44px+ tap target */
.inside .hint{font-size:10px!important}
.nofill{font-size:20px}
.rx-card ol{font-size:13.5px}

/* ---------- 5. "Watch the sauce go to work." — phone sizes; "Same lead." / "Two endings." on their own lines ---------- */
.sys-intro{padding:0 var(--gut)}
.sys-intro h2{font-size:min(11vw,6svh);line-height:1}
.sys-intro .two{font-size:min(9.5vw,5.2svh)}
.sys-intro .two span,.sys-intro .two em{display:block}

/* ---------- 6. the Dana story, one moment at a time (v4.js buildPhone) ----------
   trade chips (swipe) · a clock strip that lights up as the story moves · the current moment: its time, then your business
   today (grey, quiet) and with the sauce (teal, glowing) · the verdict keeps Dana's last word above the money */
.sp-stage{padding:64px var(--gut) max(18px,2.4svh);justify-content:center}
.sp-pick{display:block;white-space:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--gut)) 0;padding:0 var(--gut) 4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;text-align:left}
.sp-pick::-webkit-scrollbar{display:none}
.sp-pick span{display:block;margin:0 0 10px;font-size:11px}
.sp-pick button{display:inline-block;margin-right:8px;padding:12px 18px;font-size:15px}   /* 44px tall */
.sp-labs{display:none}
.sp-clock{display:flex;justify-content:space-between;align-items:center;margin:min(18px,2.4svh) 0 0;padding:10px 0;
  border-top:1px solid rgba(189,239,249,.15);border-bottom:1px solid rgba(189,239,249,.15)}
.sp-clock i{font-style:normal;font-size:13px;font-weight:800;letter-spacing:.02em;color:#BDEFF9;opacity:.45}
.sp-rows{position:relative;flex:0 0 auto;height:min(60svh,500px);margin-top:min(18px,2.4svh);display:block}   /* compact: the block sits centred */
.sp-row{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.sp-row time{order:-1;text-align:left;font-size:24px;font-weight:800;letter-spacing:-.01em;opacity:1;color:var(--teal);grid-column:auto}
.sp-row .c{min-height:0;padding:12px 14px;border-radius:14px}
.sp-row .c.l{font-size:13.5px}
.sp-row .c.r{font-size:15.5px;padding:15px 16px;border-width:2px;box-shadow:0 0 26px rgba(34,199,234,.22)}
.sp-row .c::before{display:block;margin-bottom:6px;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-style:normal}
.sp-row .c.l::before{content:'Your business today';color:#8a94a6}
.sp-row .c.r::before{content:'With the sauce';color:var(--teal);text-shadow:0 0 12px rgba(34,199,234,.6)}
.sp-row .c.cal{flex-wrap:wrap}
.sp-row .c.cal::before{flex-basis:100%}                        /* the tag gets its own line above the calendar chip */
/* the verdict sits at the bottom of the story area, under Dana's last message */
.sp-row.verdict{top:auto;bottom:0;margin:0;gap:10px}
.sp-row.verdict time{display:none}
.sp-row.verdict .c{font-size:30px;padding:12px}
.sp-row.verdict .c::before{content:none}
/* short phones (iPhone SE and the like): LOST and BOOKED side by side, so the verdict fits under Dana's last word */
@media (max-height:740px){
  .sp-row.verdict{flex-direction:row}
  .sp-row.verdict .c{flex:1;font-size:24px;padding:10px 8px}
  .sp-row.verdict .c small{font-size:8.5px;letter-spacing:.12em}
}

/* ---------- 7. Your rules ---------- */
.payoff.lane{padding:0 var(--gut)}
.lane h2{font-size:min(9.4vw,5.4svh)!important;max-width:none}
.lane > p{font-size:16px}
.rules{gap:12px}
.rules li{font-size:15.5px;align-items:flex-start}
.rules i{width:28px;height:28px;font-size:13px}
.lane p.rules-end{font-size:18px}

/* ---------- 8. trust ---------- */
.trust{padding:72px var(--gut) 40px}
.trust h2{font-size:min(10vw,5.6svh)}
.tr-grid{gap:10px;margin-top:min(22px,3svh)}
.tr-grid div{padding:14px 16px;border-radius:14px}
.tr-grid b{font-size:18px}
.tr-grid span{font-size:14px}
.tr-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;width:fit-content;margin:min(24px,3svh) auto 0}
.tr-steps li{font-size:15px}
.tr-steps li+li::before{display:none}                          /* no connector dashes: a clean 2 × 2 */

/* ---------- 9. the close + form ---------- */
.close .cl-in{padding:72px var(--gut) 24px}
.close h2{font-size:min(11vw,6.2svh)}
.close p{font-size:16px}
.cl-btn{width:100%;max-width:360px;padding:18px 24px}
.review input,.review select,.review textarea{padding:14px}  /* 16px text: no zoom-in on focus */

/* ---------- 10. footer: stacked and centred, with room for the bottom bar ---------- */
.site-foot .foot{flex-direction:column;align-items:center;text-align:center;gap:12px;padding:28px var(--gut) 104px}
.ft-brand{flex-direction:column;gap:6px}
.ft-contact,.ft-legal{justify-content:center}

/* ---------- 11. the bottom bar + the back-to-top button above it ---------- */
.m-bar{display:flex;gap:10px;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:85;
  padding:8px;border-radius:999px;background:rgba(4,31,39,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(34,199,234,.3);box-shadow:0 10px 30px rgba(0,0,0,.45);
  transform:translateY(140%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.m-bar.show{transform:none}
.m-bar a[data-review]{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;
  background:var(--teal);color:var(--ink);font-weight:800;font-size:16px;text-decoration:none}
.m-bar .m-call{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--teal);color:var(--teal)}
.m-bar .m-call svg{width:22px;height:22px;fill:currentColor}
.to-top{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 76px);right:16px;width:44px;height:44px}
/* headlines break at the sentence, never leaving one word alone */
.lane h2 em,.trust h2 em,.close h2 em{display:block}
.lane h2{font-size:min(8.6vw,5svh)!important}
.trust h2{font-size:min(10.5vw,5.8svh)}
.close h2{font-size:min(9.2vw,5.4svh)}
body.close-on .to-top{opacity:0;pointer-events:none}
.site-foot .foot{padding-bottom:156px}
.lane h2{font-size:min(7.4vw,4.6svh)!important}
.lane p.rules-end{font-size:16.5px}
.trust{padding-top:64px}
.trust{padding-bottom:104px}                                   /* clear of the bottom bar (short phones then scroll to it) */
.tr-steps li{text-align:left;line-height:1.2}
@media (max-height:740px){                                     /* short phones: trust fits above the bar with room to spare */
  .trust{padding-top:58px}
  .trust h2{font-size:min(9.4vw,5.6svh)}
  .tr-grid div{padding:10px 14px}
  .tr-grid b{font-size:16.5px}
  .tr-grid span{font-size:13px}
  .tr-steps{margin-top:14px}
}

/* hard hit (Gerald 2026-10-08): fills the screen, text centred; the dashed jar is still cut out below it */
.hit{text-align:center;align-items:center;padding-top:14svh}
.hit .ln{font-size:min(16.5vw,10.5svh);width:100%}
.hit .tag{justify-content:center}
.hit .hit-sub{margin-left:auto;margin-right:auto}
/* the 9:50 thread on phones: stacked like texts — Dana on the left, the sauce on the right */
.sp-row .c.chat{flex-direction:column;align-items:stretch;gap:6px}
.sp-row .c.chat .bub{max-width:82%;padding:7px 12px;border-radius:14px}
.sp-row .c.chat .bub.d{align-self:flex-start}
.sp-row .c.chat .bub.s{align-self:flex-end}
body.scenes-on .to-top{opacity:0;pointer-events:none}   /* the jar scenes + the Dana story use the whole screen */

/* ---------- 12. the jar menu: a swipeable row of cards. The Website Sauce (the one they watched) comes first; the next card
   peeks in from the right so it's obvious there's more. Same lid pop + glow on tap; padding above the jars keeps the lid in. */
.sauces{height:auto;min-height:100svh;padding:72px 0 112px;justify-content:flex-start}
.sauces .kick,.sauces h2,.sauces .sj-lead,.sj-swipe{padding:0 var(--gut)}
.sauces h2{font-size:min(8.6vw,5svh)}
.sauces .sj-lead{font-size:15px;line-height:1.45;margin-top:12px}
.sauces .sj-row{--jh:min(34svh,64vw);display:flex;flex-wrap:nowrap;align-items:stretch;gap:14px;margin-top:6px;
  padding:calc(var(--jh) * .2) var(--gut) 8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-padding:0 var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sauces .sj-row::-webkit-scrollbar{display:none}
.sauces .sj{flex:0 0 78%;scroll-snap-align:start;padding:18px 16px 20px;border-radius:20px;
  background:linear-gradient(180deg,rgba(34,199,234,.07),rgba(34,199,234,.02));border:1px solid rgba(34,199,234,.18)}
.sauces .sj:not(.house) .sj-jar{height:var(--jh);margin-top:0}   /* every jar full size in its own card */
.sauces .sj figcaption{max-width:none;margin-top:calc(var(--jh) * .11)}
.sauces .sj figcaption i{font-size:11px}
.sauces .sj figcaption b{font-size:19px;margin-top:6px}
.sauces .sj figcaption span{font-size:14px;line-height:1.45;margin-top:6px}
.sauces .sj.house{border-color:rgba(34,199,234,.45);box-shadow:0 0 30px rgba(34,199,234,.12)}
.sj-swipe{display:block;margin-top:14px;text-align:right;font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--teal)}
.sauces .sj-row{justify-content:flex-start;--jh:min(27svh,52vw)}   /* start at the first card (centring pushed it off the left edge) */
.sauces h2{font-size:min(7.4vw,4.4svh)}
.sauces .sj{min-width:0}
.sauces .sj figcaption{width:100%}
.sauces h2{font-size:min(6.5vw,4svh)}
.sj-swipe{text-align:center}
@media (max-height:740px){ .sauces .sj-row{--jh:min(21svh,44vw)} .sauces{padding-top:64px} }

/* ---------- 2026-10-10: the text-thread phone, phones: the line above, the phone under it ---------- */
.sms{flex-direction:column;gap:min(16px,2svh);width:100%}
.sms-side{width:100%;text-align:center;min-height:min(120px,15svh)}
.sms-set{font-size:min(6.6vw,3.6svh);margin-top:6px}
.sms-set b{display:inline}
.sms-verdict{transform-origin:50% 50%}
.sms-verdict strong{font-size:min(14vw,7.5svh)}
.sms-verdict>span{font-size:min(5vw,2.6svh)}
.phone{--ph:calc(100svh - 64px - 96px - min(120px,15svh) - 44px);--pw:min(calc(100vw - 72px),calc(var(--ph) * .58))}

/* 2026-10-15: keep "You write the rules. It follows them." clear of the back-to-top button (right 16px, 44px wide) */
.lane p.rules-end{padding:0 56px}

/* the "you can scroll now" chevron sits just above the bottom bar */
.cr-more{bottom:max(6px,env(safe-area-inset-bottom))}
.m-bar.show ~ .cr-more{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 70px)}   /* clears the bottom bar when it shows */
.cr-more svg{width:48px;height:48px}
.cr-more .lbl{font-size:11px}

/* capitals run wider (2026-10-17) */
.sys-intro h2{font-size:min(9.2vw,5.2svh)}
.sys-intro .two{font-size:min(7.6vw,4.4svh)}