/* milo-v4 overlay — loads after milo.css + ab-fix-milo-v3.css + ab-chrome-v3.css.
   Only the hero and the log-in popup change in this cut; every other fold is milo-v2.
   Sizes from ~/.milo-landing/v4/review/DESIGN-REVIEW.md (measured at 1440 x 900 and 390 x 844). */

/* ── hero: one static H1, one byline ─────────────────────────────── */
.fold.ctr .headlines{display:grid;justify-items:center;gap:0}
.fold.ctr .headlines .rot{display:none!important}
/* one line at full size (Vishal, 29 Sep: "reduce words in title"). 64px holds ~45 characters in the 1200 column;
   below 1200 the size follows the window so the line never wraps */
.fold.ctr .hl.v4-h1{display:block;margin:0 auto;max-width:none;font-family:'Doppio',system-ui,sans-serif;font-weight:500;
  font-size:min(64px, calc((100vw - 96px) / 16.6));line-height:1.04;letter-spacing:-.03em;color:var(--ink,#231B10);text-align:center;white-space:nowrap}
.fold.ctr .v4-by{margin:16px auto 0;max-width:640px;font:400 18px/1.5 var(--sans,"Inter",system-ui,sans-serif);letter-spacing:0;color:rgba(35,27,16,.74);text-align:center;text-wrap:balance}
.fold.ctr .ask{margin-top:26px!important;width:min(800px,100%);max-width:800px}
.fold.ctr .ask .field{max-width:800px;width:100%}

/* ── chips: four, static. milo.js still fills its own track; it stays hidden ── */
.fold.ctr .chiprail{width:auto!important;margin:14px auto 0!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important}
.fold.ctr .chiprail .chiptrack{display:none!important}
.v4-chips{display:flex;justify-content:center;gap:8px;flex-wrap:nowrap}
.v4-chip{appearance:none;cursor:pointer;white-space:nowrap;font:500 13px/1.2 var(--sans,"Inter",system-ui,sans-serif);color:#231B10;
  padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.9);border:1px solid rgba(35,27,16,.09);
  box-shadow:inset 0 1px 0 #fff,0 4px 14px rgba(35,27,16,.06);transition:transform .35s var(--ease,cubic-bezier(.16,1,.3,1)),background .2s}
.v4-chip:hover{transform:translateY(-1px);background:#fff}
.v4-chip:focus-visible{outline:2px solid #0033A0;outline-offset:2px}

/* ── trust line ── */
.fold.ctr .bfs .v4-trust .sep{margin:0 .7em;opacity:.6}
/* the endorsement sits under the chips, not at the foot of the fold (milo.css gives it 199px of quiet) */
/* the endorsement sits at the foot of the first fold, on the seam's white (r15: no pill), 32px above the fold's edge */
.fold.ctr .bfs{position:absolute;left:0;right:0;bottom:32px;margin:0;opacity:1}
.fold.ctr .bfs .bfs-in{font-size:11.5px;color:#231B10;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important;border-radius:0}
.v4-rate{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.v4-5s{display:inline-flex;gap:1px;color:#231B10}
.v4-5s svg{width:11px;height:11px}

/* ── nav: Log in for merchants who already have an app ── */
.v4-login{display:inline-flex;align-items:center;height:42px;padding:0 14px;margin-right:4px;font:500 14px/1 "Inter",system-ui,sans-serif;
  color:rgba(35,27,16,.78)!important;text-decoration:none!important;border-radius:12px}
.v4-login:hover{color:#231B10!important;background:rgba(35,27,16,.05)}

/* ── phone hero ── */
@media (max-width:640px){
  .fold.ctr .hl.v4-h1{font-size:38px;line-height:1.06;max-width:342px;white-space:normal;text-wrap:balance}
  .fold.ctr .v4-by{font-size:16px;max-width:342px;margin-top:14px;text-wrap:pretty}
  .fold.ctr .bfs{position:absolute;left:0;right:0;bottom:28px;margin:0;white-space:normal}
  .fold.ctr .bfs .bfs-in{flex-wrap:wrap;justify-content:center}
  /* two lines on a phone: the endorsement, then the rating on its own row (no stray separator) */
  .fold.ctr .bfs .v4-trust .sep{display:none}
  .fold.ctr .bfs .v4-rate{flex-basis:100%;justify-content:center;margin-top:4px}
  .fold.ctr .ask{margin-top:22px}
  /* the trust line is pinned 28px off the fold's foot and is ~48px tall; the fold grows with its content on short phones,
     so keep its 76px plus 20px of air free, or the chips run into it (375x667 overlapped by 49px) */
  .fold.ctr .cstage{padding-bottom:96px}
  .fold.ctr .chiprail{align-self:flex-start;width:100vw!important;margin:14px 0 0 calc(50% - 50vw)!important;overflow-x:auto!important;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent)!important;mask-image:linear-gradient(90deg,#000 82%,transparent)!important}
  .fold.ctr .chiprail::-webkit-scrollbar{display:none}
  .v4-chips{justify-content:flex-start;padding:0 24px;width:max-content}
  .v4-login{height:36px;padding:0 6px;margin-right:2px;white-space:nowrap;font-size:14px}
  /* phone nav = logo · Sign in · menu (copy deck). The composer and the popup carry the install. */
  .navbar_component .navbar_left-wrapper .button.is-navbar{display:none!important}
}

/* ── the log-in popup ────────────────────────────────────────────── */
html.v4p-open{overflow:hidden}
html.v4p-open .mrail{visibility:hidden}
.v4p{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:24px}
.v4p[hidden]{display:none}
.v4p-back{position:absolute;inset:0;background:rgba(250,248,245,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:v4pFade .24s var(--ease,cubic-bezier(.16,1,.3,1)) both}
.v4p-card{position:relative;width:460px;max-width:100%;padding:78px 26px 24px;border-radius:22px;display:grid;gap:16px;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(255,255,255,.95));
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(35,27,16,.07),0 30px 80px rgba(35,27,16,.18);
  font-family:"Inter",system-ui,sans-serif;color:#231B10;animation:v4pRise .26s var(--ease,cubic-bezier(.16,1,.3,1)) both}
.v4p-x{position:absolute;right:16px;top:16px;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(35,27,16,.05);color:rgba(35,27,16,.6);cursor:pointer;padding:0}
.v4p-x:hover{background:rgba(35,27,16,.1);color:#231B10}
.v4p-x svg{display:block}
/* Milo sits on the card, half above its top edge */
.v4p-hd{display:grid;gap:6px;justify-items:center;text-align:center;padding:0 12px}
.v4p-av{position:absolute;left:50%;top:-66px;width:150px;height:auto;margin-left:-75px;filter:drop-shadow(0 18px 22px rgba(35,27,16,.18));pointer-events:none}
.v4p-t{margin:0;font-family:'Doppio',system-ui,sans-serif;font-weight:500;font-size:28px;line-height:1.1;letter-spacing:-.02em;color:#231B10}
.v4p-sub{margin:0;max-width:340px;font-size:14.5px;line-height:1.45;color:rgba(35,27,16,.66)}
/* the request, as a recessed tile: its label and Edit on one line, the words, then what happens to them */
.v4p-req{display:grid;gap:8px;padding:14px 16px;border-radius:14px;background:#F4F2EE;
  box-shadow:inset 0 0 0 1px #fff,inset 1px 1px 4px rgba(35,27,16,.10),inset -2px -2px 3px rgba(255,255,255,.7)}
.v4p-req-top{display:flex;justify-content:space-between;align-items:center}
.v4p-lbl{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(35,27,16,.55)}
.v4p-edit{appearance:none;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border:0;border-radius:8px;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(35,27,16,.12);font:500 12.5px/1 "Inter",system-ui,sans-serif;color:#231B10;cursor:pointer}
.v4p-edit:hover{box-shadow:inset 0 0 0 1px rgba(35,27,16,.26)}
.v4p-q{margin:0;font-family:'Doppio',system-ui,sans-serif;font-weight:500;font-size:19px;line-height:1.3;letter-spacing:-.01em;color:#231B10;overflow-wrap:anywhere}
.v4p-note{margin:2px 0 0;padding-top:9px;border-top:1px solid rgba(35,27,16,.08);display:flex;align-items:center;gap:7px;font-size:12.5px;line-height:1.35;color:rgba(35,27,16,.62)}
.v4p-note svg{flex:none}
.v4p-pri{margin-top:2px;height:48px;border-radius:12px;background:#0033A0;color:#fff!important;text-decoration:none!important;
  display:flex;align-items:center;justify-content:center;gap:10px;font:500 15px/1 "Inter",system-ui,sans-serif;box-shadow:0 8px 20px rgba(0,51,160,.24)}
.v4p-pri:hover{background:#062265}
.v4p-shop{display:grid;place-items:center;color:#fff}
.v4p-shop svg{display:block}
.v4p-fine{margin:-6px 0 0;text-align:center;font-size:12.5px;line-height:1.45;color:rgba(35,27,16,.62)}
.v4p-or{margin:2px 0 0;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;font-size:12.5px;color:rgba(35,27,16,.6)}
.v4p-or::before,.v4p-or::after{content:"";height:1px;background:rgba(35,27,16,.12)}
.v4p-sec{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v4p-sec a{height:44px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(35,27,16,.14);display:flex;align-items:center;justify-content:center;gap:8px;
  font:500 14px/1 "Inter",system-ui,sans-serif;color:#231B10!important;text-decoration:none!important}
.v4p-sec a:hover{box-shadow:inset 0 0 0 1px rgba(35,27,16,.3);background:#FCFBF9}
.v4p-sec svg{flex:none;color:rgba(35,27,16,.72)}
.v4p a:focus-visible,.v4p button:focus-visible{outline:2px solid #0033A0;outline-offset:2px}
@keyframes v4pFade{from{opacity:0}to{opacity:1}}
@keyframes v4pRise{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .v4p{place-items:end stretch;padding:0}
  .v4p-card{width:100%;border-radius:22px 22px 0 0;padding:64px 20px calc(24px + env(safe-area-inset-bottom,0px));animation-name:v4pSheet}
  .v4p-av{width:118px;margin-left:-59px;top:-54px}
  .v4p-card::before{content:"";position:absolute;left:50%;top:8px;width:36px;height:4px;border-radius:4px;background:rgba(35,27,16,.18);transform:translateX(-50%)}
  .v4p-x{display:none}
  .v4p-hd{padding:0}
  .v4p-t{font-size:22px}
  .v4p-pri,.v4p-sec a{height:48px}
  .v4p-sec{grid-template-columns:1fr}
}
@keyframes v4pSheet{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){ .v4p-back,.v4p-card{animation:none} .v4-chip{transition:none} }

/* ═════════════ milo-v4 folds 2–11 ═════════════
   Values measured off live milo-v2 (29 Sep): 1200 column, sections 104/112, H2 Doppio 500 52/1.08
   -.024em, eyebrows Inter 500 14/1.6 +.08em blue, cards r16 + ink shadow, chips r12, cream ground.
   Colour rule: blue = Appbrew, orange = Milo (his marks, his finished steps, his send button). */
.v4s,.v4-band,.v4-gate{--v4-ink:#231B10;--v4-ink2:rgba(35,27,16,.74);--v4-ink3:rgba(35,27,16,.69);--v4-hair:rgba(35,27,16,.14);
  --v4-blue:#0033A0;--v4-or:#FC401F;--v4-sh:0 10px 30px rgba(35,27,16,.10);--v4-ease:cubic-bezier(.16,1,.3,1);
  position:relative;background:#FAF8F5;color:var(--v4-ink);font:400 17px/1.5 "Inter",system-ui,sans-serif}
.v4s *,.v4-band *,.v4-gate *{box-sizing:border-box}
.v4s{padding:152px 40px 152px}
.v4-in{max-width:1200px;margin:0 auto}
.v4-head{display:grid;gap:18px;max-width:720px;margin:0 0 72px}
/* a head that is also the column (.v4-in.v4-head) must keep the column's auto margins, or it lands on
   the section padding (x=40) instead of the 1200 column (x=120 at 1440) */
.v4-in.v4-head{max-width:1200px;margin-left:auto;margin-right:auto}
.v4-in.v4-head > *{max-width:720px}
.v4-in.v4-head > .v4-lede{max-width:560px}
.v4-in.v4-head > .v4-h2-wide{max-width:1200px}
.v4-eb{margin:0;font:500 14px/1.6 "Inter",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--v4-blue)}
.v4-h2{margin:0;font-family:'Doppio',system-ui,sans-serif;font-weight:500;font-size:52px;line-height:1.08;letter-spacing:-.024em;color:var(--v4-ink);text-wrap:balance}
.v4-h2-wide{max-width:1200px}
.v4-lede{margin:0;max-width:560px;font:400 18px/1.6 "Inter",system-ui,sans-serif;color:var(--v4-ink2)}
.v4s ul,.v4s ol,.v4-band ul,.v4-gate ul{margin:0;padding:0}
.v4s p,.v4s figure,.v4s blockquote,.v4s dl,.v4s dd{margin:0}
.v4s a{color:var(--v4-blue)}

/* ── 2 · brands band ── */
.v4-band{padding:80px 0 32px;overflow:hidden}
.v4-band .v4-in{max-width:none}
.v4-band .v4-eb{text-align:center;color:var(--v4-blue);font-size:13px;letter-spacing:.1em}
.v4-logos-run{margin-top:26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.v4-band .v4-logos{list-style:none;margin:0!important;display:flex;align-items:center;gap:64px;width:max-content;animation:v4-marq 105s linear infinite}
.v4-logos-run:hover .v4-logos{animation-play-state:paused}
/* the track (transformed) and its wrapper (masked) are both stacking contexts, so the logos cannot multiply
   through them: the outermost one blends with the band instead */
.v4-logos-run{mix-blend-mode:multiply}
@media (prefers-reduced-motion:reduce){ .v4-band .v4-logos{animation:none;flex-wrap:wrap;justify-content:center;width:auto} .v4-logos li[aria-hidden]{display:none} }
.v4-logos li{flex:none;display:flex;justify-content:center;align-items:center;height:72px}
.v4-logos img{display:block;height:64px;max-width:190px;width:auto;object-fit:contain;filter:grayscale(1) contrast(1.2);mix-blend-mode:multiply;opacity:.82}

/* ── 3 · shipped with Milo (sample entries: staging only) ── */
.v4-shipped[data-dummy]{display:none}
html.v4-stg .v4-shipped[data-dummy]{display:block}
.v4-shipped{padding-top:128px;overflow-x:clip}
.v4-stg-tag{display:inline-block;margin-left:10px;padding:3px 9px;border-radius:999px;background:rgba(252,64,31,.10);color:#9E2A14;
  font:600 11px/1.5 "Inter",system-ui,sans-serif;letter-spacing:.06em;vertical-align:2px}
.v4-sh-top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.v4-sh-nav{display:flex;gap:10px;margin-bottom:72px}
.v4-sh-nav button{all:unset;box-sizing:border-box;cursor:pointer;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.9);border:1px solid rgba(35,27,16,.12);color:var(--v4-ink);box-shadow:0 4px 14px rgba(35,27,16,.06);transition:background .2s,opacity .2s,transform .3s var(--v4-ease)}
.v4-sh-nav button svg{width:18px;height:18px}
.v4-sh-nav button:hover:not([disabled]){background:#fff;transform:translateY(-1px)}
.v4-sh-nav button[disabled]{opacity:.35;cursor:default}
.v4-sh-nav button:focus-visible{outline:2px solid var(--v4-blue);outline-offset:3px}
/* one row that scrolls: starts on the column's left edge, runs off the right edge of the window */
.v4-sh-grid{--gut:max(40px,calc((100vw - 1200px) / 2));display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:24px;
  margin:-32px calc(50% - 50vw) -44px;padding:40px var(--gut) 88px;scroll-padding-inline:var(--gut);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.v4-sh-grid::-webkit-scrollbar{display:none}
.v4-sh-grid.is-drag{cursor:grabbing;scroll-snap-type:none}
.v4-sh-grid.is-drag *{user-select:none}
.v4-sh-grid:focus-visible{outline:2px solid var(--v4-blue);outline-offset:-2px}
.v4-sh-grid .v4-sc{scroll-snap-align:start}
/* the card is the resources-v2 mount: near-white body, the one lift, a plate recessed by an inset
   shadow (r12, 10px frame). In the plate the app stands as a phone, cropped by the plate's foot */
.v4-sc{display:flex;flex-direction:column;padding:10px 10px 18px;border-radius:16px;background:#FCFBF9;box-shadow:var(--v4-sh);
  transition:box-shadow .5s var(--v4-ease)}
/* the plate is a piece of nature, held back to half strength so the app stays the subject */
.v4-sc-plate{position:relative;aspect-ratio:1/1.08;border-radius:12px;overflow:hidden;isolation:isolate;background:#EEEAE3;
  box-shadow:inset 2px 3px 5px rgba(35,27,16,.10)}
.v4-sc-plate::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--nat) center/cover no-repeat;opacity:.86;filter:saturate(.95);transition:opacity .6s var(--v4-ease),transform 1.2s var(--v4-ease)}
.v4-sc-plate::after{content:"";position:absolute;inset:0;z-index:-1;box-shadow:inset 2px 3px 5px rgba(35,27,16,.10);border-radius:inherit;pointer-events:none}
.v4-sc-plate .v4-scr{position:absolute;left:12%;right:12%;top:9%;aspect-ratio:9/19.5;border:0;border-radius:28px;padding-bottom:0;
  box-shadow:0 0 0 5px #FCFBF9,0 0 0 6px rgba(35,27,16,.10),0 22px 44px rgba(35,27,16,.18);transition:transform .6s var(--v4-ease)}
.v4-sc-plate .v4-scr-lock.v4-scr > :first-child{margin-top:17cqw}
@media (hover:hover) and (pointer:fine){
  .v4-sc:hover{box-shadow:0 20px 56px rgba(35,27,16,.14)}
  .v4-sc:hover .v4-scr{transform:translateY(-6px)}
  .v4-sc:hover .v4-sc-plate::before{opacity:1;transform:scale(1.04)}
}
.v4-sc-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:18px 8px 0}
.v4-sc-eb{font:500 12.5px/1.4 "Inter",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--v4-blue)}
.v4-sc-q{margin-bottom:14px!important;font:500 20px/1.25 'Doppio',system-ui,sans-serif;letter-spacing:-.015em;color:var(--v4-ink)}
.v4-sc-meta{margin-top:auto!important;padding-top:13px;border-top:1px solid var(--v4-hair);display:flex;align-items:center;gap:8px;
  font:500 13.5px/1.2 "Inter",system-ui,sans-serif;color:var(--v4-ink2)}
.v4-sc-meta i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--v4-or)}

/* ── the mini app screen: every inner size is a share of the screen's own width (cqw),
      so the same markup reads at 282px in the gallery and at 150px in a thumbnail ── */
.v4-scr{--bg:#F4F2EE;--fg:#231B10;--ac:#8A7E6C;container-type:inline-size;position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:var(--bg);color:var(--fg);border:1px solid rgba(35,27,16,.10);box-shadow:var(--v4-sh);
  display:flex;flex-direction:column;gap:3.4cqw;padding-bottom:5cqw;font-family:"Inter",system-ui,sans-serif;isolation:isolate}
.v4-scr p{margin:0}
.v4-scr > *{flex-shrink:0}
/* a container cannot query itself: cqw in .v4-scr's own gap/padding resolved against the VIEWPORT
   (3.4cqw = 49px at 1440). Its rhythm lives on the children, whose cqw is the screen's width. */
.v4-scr.v4-scr{gap:0;padding-bottom:0}
.v4-scr.v4-scr > * + *{margin-top:3.4cqw}
.v4-scr.v4-scr > :last-child{margin-bottom:5cqw}
.v4-sb{display:flex;justify-content:space-between;align-items:center;padding:4.4cqw 6cqw 0;font:600 4cqw/1 "Inter",system-ui,sans-serif}
.v4-sb i{font-style:normal}
.v4-sb b{display:block;width:10cqw;height:3.4cqw;border-radius:1.2cqw;background:currentColor;opacity:.55}
.v4-apptop{display:flex;justify-content:center;align-items:center;height:9cqw;padding:0 6cqw}
.v4-wm{font:700 5.4cqw/1 "Inter",system-ui,sans-serif;letter-spacing:-.02em}
.v4-wm-serif{font-family:'Doppio',system-ui,sans-serif;font-weight:500;font-size:6.4cqw;letter-spacing:.01em}
.v4-wm-wide{font-weight:600;font-size:4.2cqw;letter-spacing:.3em}
.v4-hero-img{position:relative;margin:0 5cqw;aspect-ratio:16/11;border-radius:3.4cqw;overflow:hidden;background:var(--img) center/cover no-repeat;
  display:flex;flex-direction:column;justify-content:flex-end;gap:2.4cqw;padding:4.4cqw}
.v4-hero-img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(20,14,8,.46))}
.v4-hero-tall{aspect-ratio:1/0.92}
.v4-hero-img em{position:relative;font:500 7.4cqw/1.04 'Doppio',system-ui,sans-serif;font-style:normal;color:#fff;letter-spacing:-.01em}
.v4-hero-img u{position:relative;width:max-content;text-decoration:none;font:600 3.6cqw/1 "Inter",system-ui,sans-serif;color:#fff;
  padding:2.2cqw 3.6cqw;border-radius:999px;background:rgba(255,255,255,.24);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.v4-chiprow{display:flex;gap:2cqw;padding:0 5cqw;overflow:hidden}
.v4-chiprow span{flex:none;font:500 3.5cqw/1 "Inter",system-ui,sans-serif;padding:2.4cqw 3.6cqw;border-radius:999px;background:color-mix(in srgb,var(--fg) 8%,transparent)}
.v4-tiles{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;padding:0 5cqw}
.v4-tiles-4{margin-top:1cqw}
.v4-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;padding:0 5cqw}
.v4-t{position:relative;display:block;aspect-ratio:1;border-radius:3.4cqw;overflow:hidden;background:color-mix(in srgb,var(--ac) 20%,var(--bg))}
.v4-t::after{content:"";position:absolute;left:50%;bottom:13%;transform:translateX(-50%);
  background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 70%,#fff),var(--ac) 55%,color-mix(in srgb,var(--ac) 80%,#000))}
.v4-t-bottle::after{width:26%;height:60%;border-radius:22% 22% 12% 12%}
.v4-t-bottle::before{content:"";position:absolute;left:50%;bottom:73%;transform:translateX(-50%);width:13%;height:12%;border-radius:18%;background:color-mix(in srgb,var(--fg) 70%,var(--ac));z-index:1}
.v4-t-jar::after{width:50%;height:36%;border-radius:16%}
.v4-t-suit::after{width:36%;height:64%;border-radius:46% 46% 24% 24%/30% 30% 20% 20%}
.v4-t-candle::after{width:36%;height:46%;border-radius:10%}
.v4-t-throw::after{width:64%;height:34%;border-radius:12%}
.v4-t-pillow::after{width:66%;height:36%;border-radius:40%}
.v4-t-dress::after{width:44%;height:70%;clip-path:polygon(34% 0,66% 0,72% 28%,100% 100%,0 100%,28% 28%)}
.v4-t-shirt::after{width:60%;height:54%;clip-path:polygon(25% 0,40% 8%,60% 8%,75% 0,100% 18%,88% 40%,80% 34%,80% 100%,20% 100%,20% 34%,12% 40%,0 18%)}
.v4-pimg{position:relative;margin:0 5cqw;aspect-ratio:1/0.8;border-radius:3.4cqw;background:color-mix(in srgb,var(--ac) 16%,var(--bg));display:grid;place-items:center}
.v4-pimg .v4-t{width:66%;background:transparent}
.v4-pname{padding:0 5cqw;font:500 5.4cqw/1.1 'Doppio',system-ui,sans-serif}
.v4-sizes{display:flex;gap:2cqw;padding:0 5cqw}
.v4-sizes span{width:9.4cqw;height:9.4cqw;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--fg) 24%,transparent);border-radius:2.4cqw;font:600 3.2cqw/1 "Inter",system-ui,sans-serif}
.v4-sizes .on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.v4-buy{margin:auto 5cqw 0;padding:3.2cqw;border-radius:3cqw;background:var(--fg);color:var(--bg);text-align:center;font:600 3.6cqw/1 "Inter",system-ui,sans-serif}
/* Milo's change, wherever it shows: a 2px orange outline */
.v4-new{outline:2px solid var(--v4-or,#FC401F);outline-offset:1.2cqw}
.v4-sizeguide{margin:1.4cqw 5cqw 0;padding:3.2cqw;border-radius:3cqw;background:#fff;display:grid;gap:1.8cqw;font:500 3.3cqw/1 "Inter",system-ui,sans-serif}
.v4-sizeguide b{font-size:3.7cqw}
.v4-sizeguide span{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr}
.v4-sizeguide i{font-style:normal;opacity:.78}
.v4-cart-h{padding:0 5cqw;font:500 5.4cqw/1.1 'Doppio',system-ui,sans-serif}
.v4-ship{margin:0 5cqw;padding:3.4cqw;border-radius:3cqw;background:#fff;display:grid;gap:2.4cqw;font:600 3.5cqw/1.2 "Inter",system-ui,sans-serif}
.v4-ship span{display:block;height:1.9cqw;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--ac) 20%,#fff)}
.v4-ship i{display:block;height:100%;border-radius:999px;background:var(--ac)}
.v4-line{display:grid;grid-template-columns:22cqw 1fr;gap:3.4cqw;align-items:center;padding:0 5cqw}
.v4-line p{display:grid;gap:1.4cqw}
.v4-line b{font:600 3.8cqw/1.1 "Inter",system-ui,sans-serif}
.v4-line i{font:500 3.4cqw/1 "Inter",system-ui,sans-serif;font-style:normal;opacity:.7}
.v4-scr-lock{background:var(--img) center 70%/cover no-repeat;color:#fff;border-color:transparent}
.v4-scr-lock.v4-scr > *{margin-left:5cqw;margin-right:5cqw}
.v4-scr-lock.v4-scr > :first-child{margin-top:12cqw}
.v4-scr-lock.v4-scr > * + *{margin-top:1.4cqw}
.v4-scr-lock::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(24,40,30,.42),rgba(24,40,30,.10) 55%,rgba(24,40,30,.30))}
.v4-lk-t{text-align:center;font:500 17cqw/1 "Inter",system-ui,sans-serif;letter-spacing:-.03em}
.v4-lk-d{text-align:center;font:500 4cqw/1.2 "Inter",system-ui,sans-serif;opacity:.92}
.v4-push{display:grid;grid-template-columns:9.4cqw 1fr;gap:3cqw;align-items:start;padding:3.6cqw;border-radius:4.6cqw;
  background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#1B1712}
.v4-scr-lock.v4-scr > .v4-push{margin-top:auto}
.v4-appic{width:9.4cqw;height:9.4cqw;border-radius:2.6cqw;background:var(--ac);color:#fff;display:grid;place-items:center;font:700 4.4cqw/1 "Inter",system-ui,sans-serif;font-style:normal}
.v4-push p{display:grid;gap:.9cqw}
.v4-push b{display:flex;justify-content:space-between;font:600 3.4cqw/1.2 "Inter",system-ui,sans-serif}
.v4-push b em{font-style:normal;font-weight:400;opacity:.6}
.v4-push strong{font:600 3.8cqw/1.2 "Inter",system-ui,sans-serif}
.v4-push span{font:400 3.4cqw/1.3 "Inter",system-ui,sans-serif;opacity:.86}
.v4-scr-dark{border-color:transparent}
.v4-bf{margin:0 5cqw;aspect-ratio:1/0.92;border-radius:3.4cqw;background:linear-gradient(160deg,#34453A,#141C17);display:flex;flex-direction:column;justify-content:flex-end;gap:2.4cqw;padding:5cqw}
.v4-bf small{font:600 3.3cqw/1 "Inter",system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ac)}
.v4-bf strong{font:500 10.4cqw/1 'Doppio',system-ui,sans-serif;color:#F2EFE6;letter-spacing:-.01em}
.v4-bf u{width:max-content;text-decoration:none;font:600 3.6cqw/1 "Inter",system-ui,sans-serif;background:var(--ac);color:#1F2A24;padding:2.4cqw 3.8cqw;border-radius:999px}
.v4-reviews{margin:0 5cqw;padding:2.8cqw 3.2cqw;border-radius:3cqw;background:#fff;display:flex;gap:2.4cqw;align-items:center;font:500 3.4cqw/1 "Inter",system-ui,sans-serif}
.v4-reviews b{color:var(--ac);letter-spacing:.08em}
.v4-rv{padding:0 5cqw;font:italic 400 3.6cqw/1.3 "Inter",system-ui,sans-serif;opacity:.8}
.v4-menu{list-style:none;margin:1cqw 5cqw 0!important;padding:0!important}
.v4-menu li{padding:3.6cqw 1.4cqw;border-bottom:1px solid color-mix(in srgb,var(--fg) 12%,transparent);font:500 4.8cqw/1 'Doppio',system-ui,sans-serif}
.v4-menu li.v4-new{padding-left:3cqw;border-radius:2.4cqw;border-bottom-color:transparent;margin:1cqw 0}
.v4-menu li.gone{text-decoration:line-through;opacity:.32}
.v4-banner-plain{margin:0 5cqw;aspect-ratio:16/11;border-radius:3.4cqw;background:color-mix(in srgb,var(--ac) 26%,var(--bg));display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2.6cqw}
.v4-banner-plain em{font:500 7.4cqw/1 'Doppio',system-ui,sans-serif;font-style:normal}
.v4-banner-plain u{text-decoration:none;font:600 3.6cqw/1 "Inter",system-ui,sans-serif;border:1px solid currentColor;padding:2.2cqw 3.6cqw;border-radius:999px}

/* ── 4 · the race: one clock, two lanes, drawn like a calendar ──
      Rows are "who asked" (label column) and "what happened" (track). Blocks are coloured by
      who does the work (Milo orange-tint, you white, your dev team grey), are drawn only up to
      the now line, and hide their words once they are too narrow to hold them. */
.v4-race{padding-bottom:120px}
.v4-race-head{margin-bottom:72px}
.v4-rc-run{display:none}
.v4-cal{padding:26px 30px 32px;border-radius:18px;background:rgba(255,255,255,.78);box-shadow:inset 0 0 0 1px rgba(35,27,16,.07),0 18px 50px rgba(35,27,16,.08)}
.v4-rc-top{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--v4-hair)}
.v4-rc-clock{font:400 38px/1 'Doppio',system-ui,sans-serif;letter-spacing:-.02em;color:var(--v4-ink)}
.v4-rc-key{display:flex;align-items:center;gap:18px;padding-bottom:4px;font:500 12.5px/1 "Inter",system-ui,sans-serif;color:var(--v4-ink2)}
.v4-rc-key span{display:inline-flex;align-items:center;gap:7px}
.v4-rc-key span::before{content:"";width:16px;height:10px;border-radius:3px}
.v4-rc-key .k-milo::before{background:#0033A0}
.v4-rc-key .k-you::before{background:#fff;box-shadow:inset 0 0 0 1px rgba(35,27,16,.18)}
.v4-rc-key .k-team::before{background:#E6E2DB}
.v4-rc-key em{font-style:normal;padding-left:18px;border-left:1px solid var(--v4-hair);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--v4-ink3)}
.v4-rc-grid{--z:0;position:relative;display:grid;grid-template-columns:236px minmax(0,1fr);column-gap:28px;row-gap:26px;align-items:center}
.v4-rc-axis{grid-column:2;grid-row:1;position:relative;height:28px;border-bottom:1px solid var(--v4-hair)}
.v4-ax{position:absolute;inset:0}
.v4-ax span{position:absolute;top:0;transform:translateX(-50%);font:500 12px/1 "Inter",system-ui,sans-serif;color:var(--v4-ink3);white-space:nowrap}
.v4-ax span:first-child{transform:none}
.v4-ax span:last-child{transform:translateX(-100%)}
.v4-ax-d{opacity:0}
.v4-lane{display:contents}
.v4-lane-a > *{grid-row:2}
.v4-lane-b > *{grid-row:3}
.v4-lane-lab{grid-column:1;display:grid;gap:8px;align-content:center;justify-items:start}
.v4-lane-who{display:flex;align-items:center;gap:10px}
.v4-lane-av{display:inline-flex;align-items:center}
.v4-lane-av img{display:block;width:34px;height:30px}
.v4-lane-av-team i{display:grid;place-items:center;width:30px;height:30px;margin-left:-4px;border-radius:50%;background:#E6E2DB;box-shadow:0 0 0 2px #fff;font:600 9px/1 "Inter",system-ui,sans-serif;font-style:normal;letter-spacing:-.01em;color:var(--v4-ink2)}
.v4-lane-av-team i:first-child{margin-left:0;background:#fff;box-shadow:0 0 0 2px #fff,inset 0 0 0 1px rgba(35,27,16,.18)}
.v4-lane-eb{font:500 12.5px/1.2 "Inter",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--v4-ink3)}
.v4-lane-b .v4-lane-eb,.v4-lane-eb-milo{color:var(--v4-blue)}
.v4-lane-q{font:500 17px/1.3 'Doppio',system-ui,sans-serif;letter-spacing:-.01em;color:var(--v4-ink);text-wrap:pretty}
.v4-lane-st{display:inline-flex;align-items:center;gap:7px;margin-top:4px!important;padding:6px 11px 6px 9px;border-radius:999px;background:rgba(35,27,16,.05);
  font:500 12.5px/1 "Inter",system-ui,sans-serif;color:var(--v4-ink2);white-space:nowrap}
.v4-lane-st::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:rgba(35,27,16,.32)}
.v4-lane-st.is-live{background:#fff;box-shadow:inset 0 0 0 1px var(--v4-hair);color:var(--v4-ink)}
.v4-lane-st.is-live::before{background:var(--v4-ink)}
.v4-lane-b .v4-lane-st.is-live::before{background:#0033A0}
.v4-lane-b .v4-lane-st.is-live{color:#0033A0}
.v4-track{grid-column:2;position:relative;height:76px;border-radius:12px;background:#F6F4F0;box-shadow:inset 0 0 0 1px rgba(35,27,16,.05);overflow:hidden}
.v4-track::before,.v4-track::after{content:"";position:absolute;inset:0;pointer-events:none}
.v4-track::before{background:repeating-linear-gradient(90deg,rgba(35,27,16,.07) 0 1px,transparent 1px calc(100% / 9));opacity:calc(1 - var(--z) * 2)}
.v4-track::after{background:repeating-linear-gradient(90deg,rgba(35,27,16,.06) 0 1px,transparent 1px calc(100% / 22)),
  repeating-linear-gradient(90deg,transparent 0 calc(100% / 22 * 5),rgba(35,27,16,.035) calc(100% / 22 * 5) calc(100% / 22 * 7));opacity:calc(var(--z) * 2 - 1)}
.v4-seg,.v4-live{position:absolute;z-index:1;top:8px;bottom:8px;left:0;width:0;opacity:0;border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 12px;white-space:nowrap}
.v4-seg b,.v4-live b{font:600 13px/1.1 "Inter",system-ui,sans-serif;color:var(--v4-ink);transition:opacity .2s}
.v4-seg i,.v4-live i{font:500 11.5px/1.1 "Inter",system-ui,sans-serif;font-style:normal;color:var(--v4-ink3);transition:opacity .2s}
.v4-seg.is-tight b,.v4-seg.is-tight i,.v4-live.is-tight b,.v4-live.is-tight i{opacity:0}
/* once a block is a sliver it is only a colour: no rim, no seams */
.v4-seg.is-tight{box-shadow:none;border-radius:3px}
/* and no padding, or a sliver keeps 24px of it and spills into the next block (the "Live" overlap) */
.v4-seg.is-tight,.v4-live.is-tight{padding:0}
/* the words size to themselves (not stretched to the block), so the fit test in race() reads the text's own width */
.v4-seg b,.v4-seg i,.v4-live b,.v4-live i{align-self:flex-start}
.v4-lane-b .v4-seg.is-tight.o-you{background:rgba(0,51,160,.28)}
.o-team{background:#E8E5DF}
.o-you{background:#fff;box-shadow:inset 0 0 0 1px rgba(35,27,16,.14)}
.o-milo{background:#0033A0;box-shadow:0 4px 12px rgba(0,51,160,.22)}
.v4-seg.o-milo b{color:#fff}
.v4-seg.o-milo i{color:rgba(255,255,255,.74)}
.v4-live{background:repeating-linear-gradient(135deg,rgba(35,27,16,.08) 0 6px,rgba(35,27,16,.03) 6px 12px);box-shadow:inset 2px 0 0 rgba(35,27,16,.55)}
.v4-live-milo{background:repeating-linear-gradient(135deg,rgba(0,51,160,.10) 0 6px,rgba(0,51,160,.035) 6px 12px);box-shadow:inset 2px 0 0 #0033A0}
.v4-live-milo b{color:#0033A0}
.v4-live-milo b::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#0033A0;vertical-align:1px}
.v4-now{grid-column:2;grid-row:1 / 4;align-self:stretch;position:relative;z-index:3;pointer-events:none}
.v4-now i{position:absolute;top:24px;bottom:-6px;left:0;border-left:1.5px solid var(--v4-ink)}
.v4-now i::before{content:"";position:absolute;top:-4px;left:-5.25px;width:9px;height:9px;border-radius:50%;background:var(--v4-ink)}

/* the end frame: what each lane shipped, as two cards in the resources-v2 mount */
.v4-rc-end{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.v4-rc-say{display:grid;gap:16px;align-content:center;padding-right:8px}
.v4-rc-h3{font:500 34px/1.12 'Doppio',system-ui,sans-serif;letter-spacing:-.02em;color:var(--v4-ink);text-wrap:balance}
.v4-rc-p{font:400 16px/1.55 "Inter",system-ui,sans-serif;color:var(--v4-ink2)}
.v4-res{--ph:500px;display:flex;flex-direction:column;padding:10px 10px 20px;border-radius:16px;background:#F4F2EE;box-shadow:inset 0 0 0 1px rgba(35,27,16,.07)}
.v4-res-milo{background:#FCFBF9;box-shadow:0 26px 64px rgba(35,27,16,.16),0 0 0 1px rgba(0,51,160,.16)}
.v4-res-plate{position:relative;display:grid;place-items:center;padding:58px 0 26px;border-radius:12px;overflow:hidden;background:#E9E6E1;box-shadow:inset 2px 3px 5px rgba(35,27,16,.10)}
.v4-res:not(.v4-res-milo) .v4-scr-phone{filter:saturate(.2) contrast(.96);opacity:.78}
.v4-res-milo .v4-res-plate{background:#EDEFEA url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6abc096c7f2ef125b7b73d02_v4-race-tall.jpg') center 70%/cover no-repeat}
.v4-res-milo .v4-res-plate::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,248,245,.35),rgba(250,248,245,0) 60%)}
.v4-res-milo .v4-scr-phone{position:relative}
.v4-res-tag{position:absolute;left:50%;top:16px;transform:translateX(-50%);white-space:nowrap;z-index:4;display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.86);font:600 12px/1 "Inter",system-ui,sans-serif;color:var(--v4-ink3)}
.v4-res-milo .v4-res-tag{background:#0033A0;color:#fff;box-shadow:0 6px 16px rgba(0,51,160,.28)}
.v4-res-tag i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.v4-res figcaption{display:grid;gap:6px;justify-items:center;padding:18px 10px 0;text-align:center}
.v4-res-bar{justify-self:stretch}
.v4-res-eb{font:500 12.5px/1.2 "Inter",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--v4-ink3)}
.v4-res-milo .v4-res-eb{color:var(--v4-blue)}
.v4-res:not(.v4-res-milo) .v4-res-cap{color:rgba(35,27,16,.55)}
.v4-res-milo .v4-res-cap{color:var(--v4-ink2)}
.v4-rn{margin-top:2px!important;display:flex;align-items:flex-end;justify-content:center;height:66px;font:400 44px/1 'Doppio',system-ui,sans-serif;letter-spacing:-.02em;color:rgba(35,27,16,.5);white-space:nowrap}
.v4-rn.v4-rn-milo{font-size:66px;font-weight:500;letter-spacing:-.03em;color:var(--v4-or)}
.v4-res-cap{font:400 15px/1.4 "Inter",system-ui,sans-serif;color:var(--v4-ink3)}
.v4-res-bar{margin-top:10px!important;height:6px;border-radius:999px;background:rgba(35,27,16,.07);overflow:hidden}
.v4-res-bar i{display:block;height:100%;min-width:6px;border-radius:999px;background:rgba(35,27,16,.34)}
.v4-res-milo .v4-res-bar i{background:var(--v4-or)}
.v4-push-drop{position:absolute;left:4cqw;right:4cqw;top:13cqw;z-index:3;box-shadow:0 8px 24px rgba(20,14,8,.18);transition:transform .7s var(--v4-ease),opacity .4s}

/* a whole phone: 9:19.5, island, tab bar, home indicator. Content sizes are shares of its width */
.v4-scr.v4-scr-phone{width:calc(var(--ph) * 9 / 19.5);height:var(--ph);aspect-ratio:auto;border:0;border-radius:30px;
  box-shadow:0 0 0 5px #FCFBF9,0 0 0 6px rgba(35,27,16,.10),0 24px 48px rgba(35,27,16,.16)}
.v4-scr-phone::after{content:"";position:absolute;left:50%;bottom:2.4cqw;width:34cqw;height:1.3cqw;margin-left:-17cqw;border-radius:99px;background:var(--fg);opacity:.8}
.v4-scr-phone .v4-sb,.v4-sc-plate .v4-sb{position:relative;padding-top:5.4cqw}
.v4-scr-phone .v4-ly-h{margin-top:5cqw!important}
.v4-scr-phone .v4-sb::after,.v4-sc-plate .v4-sb::after,.v4-sc-plate .v4-scr-lock::after{content:"";position:absolute;left:50%;top:3.2cqw;width:27cqw;height:7.4cqw;margin-left:-13.5cqw;border-radius:99px;background:#15110C}
.v4-ly-h{padding:0 6cqw;font:500 8.4cqw/1 'Doppio',system-ui,sans-serif;letter-spacing:-.01em}
.v4-ly-card{margin:0 5cqw;padding:5cqw;border-radius:4.4cqw;background:var(--fg);color:var(--bg);display:grid;gap:2.4cqw}
.v4-ly-card small{font:600 3.2cqw/1 "Inter",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.v4-ly-card small,.v4-ly-card strong,.v4-ly-card em{color:inherit}
.v4-ly-card strong{font:500 10cqw/1 'Doppio',system-ui,sans-serif;letter-spacing:-.02em}
.v4-ly-card strong em{font:500 4cqw/1 "Inter",system-ui,sans-serif;font-style:normal;letter-spacing:0;opacity:.75}
.v4-ly-bar{display:block;height:2.2cqw;border-radius:99px;background:color-mix(in srgb,var(--bg) 22%,transparent);overflow:hidden}
.v4-ly-bar i{display:block;height:100%;border-radius:99px;background:var(--ac)}
.v4-ly-gold i{background:#D9AE45}
.v4-ly-next{font:500 3.3cqw/1 "Inter",system-ui,sans-serif;opacity:.8}
.v4-ly-sub{padding:1cqw 6cqw 0;font:600 3.3cqw/1 "Inter",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.v4-scr .v4-ly-list{list-style:none;margin:0 5cqw;padding:0;display:grid;gap:2.4cqw}
.v4-ly-list li{display:grid;grid-template-columns:9cqw minmax(0,1fr) auto;gap:3cqw;align-items:center;padding:3cqw;border-radius:3.4cqw;background:#fff}
.v4-ly-ic{width:9cqw;height:9cqw;border-radius:2.6cqw;display:grid;place-items:center;background:color-mix(in srgb,var(--ac) 22%,var(--bg));font:600 4cqw/1 "Inter",system-ui,sans-serif}
.v4-ly-list p{display:grid;gap:1.3cqw;min-width:0}
.v4-ly-list b{font:600 3.6cqw/1.1 "Inter",system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-ly-list i{font:500 3.2cqw/1 "Inter",system-ui,sans-serif;font-style:normal;opacity:.65}
.v4-ly-list u{text-decoration:none;font:600 3.1cqw/1 "Inter",system-ui,sans-serif;padding:2cqw 3cqw;border-radius:99px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 25%,transparent)}
.v4-ly-earn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4cqw;padding:0 5cqw}
.v4-ly-earn span{display:grid;gap:1.2cqw;padding:3cqw 2.6cqw;border-radius:3.4cqw;background:color-mix(in srgb,var(--ac) 14%,#fff);font:500 3cqw/1.2 "Inter",system-ui,sans-serif;opacity:.9}
.v4-ly-earn b{font:600 3.6cqw/1 "Inter",system-ui,sans-serif}
.v4-scr.v4-scr > .v4-tabbar{margin:auto 0 0;display:grid;grid-template-columns:repeat(4,1fr);padding:3.2cqw 3cqw 8cqw;border-top:1px solid color-mix(in srgb,var(--fg) 10%,transparent);background:color-mix(in srgb,#fff 50%,var(--bg))}
.v4-tabbar span{display:grid;justify-items:center;gap:1.6cqw;font:500 3cqw/1 "Inter",system-ui,sans-serif;opacity:.5}
.v4-tabbar span::before{content:"";width:5.2cqw;height:5.2cqw;border-radius:1.6cqw;box-shadow:inset 0 0 0 .55cqw currentColor}
.v4-tabbar .on{opacity:1;color:var(--ac)}
.v4-tabbar .on::before{background:currentColor}

.v4-race-lists{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:48px}
.v4-race-lists ol{margin-top:12px!important;padding-left:20px!important;display:grid;gap:8px;font:400 16px/1.5 "Inter",system-ui,sans-serif;color:var(--v4-ink2)}
.v4-race-lists b{color:var(--v4-ink);font-weight:600}
.v4-foot{margin-top:28px!important;max-width:760px;font:400 13px/1.5 "Inter",system-ui,sans-serif;color:var(--v4-ink3)}
/* pinned: the stage holds; the run and the end frame share one cell and cross-fade */
html.v4-race-pin .v4-race-scroll{height:240vh}
/* the stage is its own height and pins where it is centred under the nav (race() sets top), so before it pins it
   follows the head at the page's usual 72px instead of floating in a screen-tall box */
html.v4-race-pin .v4-race-stage{position:sticky;top:120px}
html.v4-race-pin .v4-rc{display:grid;width:100%}
html.v4-race-pin .v4-rc > *{grid-area:1 / 1;align-self:start}
html.v4-race-pin .v4-race .v4-rc-run{display:block}
html.v4-race-pin .v4-res{--ph:clamp(300px, calc(100vh - 462px), 460px)}
html.v4-race-pin .v4-rc-end{opacity:0;pointer-events:none;transform:translateY(24px)}
html.v4-race-pin .v4-race-lists{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.v4-race-pin .v4-race:not(.is-end) .v4-push-drop{transform:translateY(-140%);opacity:0}
html.v4-race-on .mrail,html.v4-jobs-on .mrail,html.v4-race-on .mtrail,html.v4-jobs-on .mtrail{opacity:0!important;pointer-events:none!important;transition:opacity .25s}
@media (max-width:1023px){
  .v4-rc-end{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .v4-rc-say{grid-column:1 / -1;max-width:600px;padding:0 0 8px}
  .v4-res{--ph:460px}
}
@media (max-width:640px){
  .v4-rc-end{gap:12px}
  .v4-rc-h3{font-size:27px}
  .v4-rc-p{font-size:15px}
  .v4-res{--ph:280px;padding:6px 6px 14px}
  .v4-res-plate{padding:18px 0}
  .v4-scr.v4-scr-phone{border-radius:20px;box-shadow:0 0 0 3px #FCFBF9,0 0 0 4px rgba(35,27,16,.10),0 14px 28px rgba(35,27,16,.14)}
  .v4-res figcaption{padding:14px 6px 0;gap:4px}
  .v4-res-eb{font-size:11px}
  .v4-rn{font-size:26px;height:40px}
  .v4-rn.v4-rn-milo{font-size:36px}
  .v4-res-tag{top:10px;padding:5px 8px;font-size:10px}
  .v4-res-plate{padding-top:42px}
  .v4-cal{padding:16px}
  .v4-res-cap{font-size:13px}
  .v4-race-lists{grid-template-columns:1fr;gap:28px}
}

/* ── 5 · six jobs: scroll-driven ──
   Static (phones, tablets, reduced motion): the six jobs stack, text then its card.
   Pinned (html.v4-jobs-pin, >=1024px): one sticky stage; each 60vh of scroll is one job;
   only the active job's words and card are shown; the page moves on after the sixth. */
.v4-jobs{padding-bottom:120px}
.v4-jobs-count,.v4-jobs-prog,.v4-jobs-plate{display:none}
.v4-jobs-list{list-style:none;display:grid;gap:80px}
.v4-job{display:grid;gap:24px}
.v4-job-text h3{margin:0 0 10px;font:500 30px/1.12 'Doppio',system-ui,sans-serif;letter-spacing:-.02em;color:var(--v4-ink)}
.v4-job-text p{font:400 17px/1.6 "Inter",system-ui,sans-serif;color:var(--v4-ink2);max-width:34ch}
.v4-job-text .v4-job-foot{margin-top:16px;font-size:14.5px;line-height:1.55;color:var(--v4-ink3);max-width:42ch}
/* the plate is the meadow in both modes; the cards over it are glass (the composer recipe:
   white 72→58% for your message, 84→74% for Milo's card, blur 24–30 sat 1.35, white-top/ink-bottom rim) */
.v4-job .v4-panel{position:relative;display:grid;gap:12px;padding:28px 22px;border-radius:16px;overflow:hidden;
  background:#EDEFEA url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ac5f2b333227d4f65ee1ecb_final-jobs-rise.webp') center 100%/cover no-repeat}
.v4-job .v4-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(250,248,245,.66),rgba(250,248,245,.3) 58%,rgba(250,248,245,0) 82%)}
.v4-job .v4-panel > *{position:relative}
.v4-pc{justify-self:end;max-width:88%;display:grid;gap:5px;padding:13px 18px 15px;border-radius:16px 16px 4px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.60));-webkit-backdrop-filter:blur(24px) saturate(1.35);backdrop-filter:blur(24px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(35,27,16,.06),0 10px 30px rgba(35,27,16,.10);
  font:500 20px/1.3 'Doppio',system-ui,sans-serif;letter-spacing:-.01em;color:var(--v4-ink)}
.v4-pc-who{font:600 11px/1 "Inter",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--v4-ink3)}
.v4-oc{container-type:inline-size;display:grid;gap:14px;padding:16px 18px 18px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.76));-webkit-backdrop-filter:blur(30px) saturate(1.35);backdrop-filter:blur(30px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(35,27,16,.06),0 18px 44px rgba(35,27,16,.14)}
.v4-oc-hd{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center}
.v4-av{position:relative;display:block;width:40px;height:35px}
.v4-av img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .35s}
.v4-av .av-h{opacity:0}
.v4-oc[data-state="done"] .av-w{opacity:0}
.v4-oc[data-state="done"] .av-h{opacity:1}
.v4-oc-who{display:grid;gap:4px}
.v4-oc-who b{font:600 14px/1 "Inter",system-ui,sans-serif;color:var(--v4-ink)}
.v4-oc-st{position:relative;display:block;height:16px;font:500 13px/16px "Inter",system-ui,sans-serif}
.v4-oc-st i{position:absolute;left:0;top:0;font-style:normal;white-space:nowrap;transition:opacity .3s}
.v4-oc-st .st-run{color:var(--v4-ink3)}
.v4-oc-st .st-done{opacity:0;color:var(--v4-ink)}
.v4-oc-st .st-done::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--v4-or);vertical-align:1px}
.v4-oc[data-state="run"] .st-run{background:linear-gradient(90deg,rgba(35,27,16,.45) 0%,#231B10 45%,rgba(35,27,16,.45) 90%) 0 0/220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:v4-shim 1.5s linear infinite}
.v4-oc[data-state="done"] .st-run{opacity:0}
.v4-oc[data-state="done"] .st-done{opacity:1}
.v4-oc-st .st-after{opacity:0;color:var(--v4-ink)}
.v4-oc-st .st-after::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#0033A0;vertical-align:1px}
.v4-oc[data-state="approved"] .st-run,.v4-oc[data-state="approved"] .st-done{opacity:0}
.v4-oc[data-state="approved"] .st-after{opacity:1}
.v4-oc[data-state="approved"] .av-w{opacity:0}
.v4-oc[data-state="approved"] .av-h{opacity:1}
.v4-oc[data-state="approved"] .v4-oc-act .pri{background:#2B2419}
/* the cursor that says yes for you: arrives, clicks, leaves */
.v4-oc{position:relative}
.v4-cursor{position:absolute;left:0;top:0;z-index:20;width:26px;height:31px;pointer-events:none;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.30))}
.v4-cursor svg{display:block;width:26px;height:31px;transition:transform .12s;transform-origin:3px 2px}
.v4-cursor.is-click svg{transform:scale(.86)}
.v4-oc-act span{transition:transform .12s,background .3s}
.v4-oc-act span.is-press{transform:scale(.95)}
@keyframes v4-shim{from{background-position:120% 0}to{background-position:-100% 0}}
.v4-oc-scope{padding:6px 10px;border-radius:999px;background:rgba(35,27,16,.05);font:500 11.5px/1 "Inter",system-ui,sans-serif;color:var(--v4-ink2);white-space:nowrap}
.v4s .v4-steps{list-style:none;display:grid;gap:9px;padding:13px 0 2px;border-top:1px solid var(--v4-hair)}
/* each step is a tool call: its own icon, dim until Milo reaches it, lit while he uses it, quiet once done */
.v4-steps li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:center;font:400 14px/1.35 "Inter",system-ui,sans-serif;color:var(--v4-ink2);transition:opacity .3s,color .3s}
.v4-steps li > i{position:relative;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(252,64,31,.10);color:#FC401F;transition:background .3s,color .3s}
.v4-steps li > i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.v4-oc[data-state="idle"] .v4-steps li,.v4-oc[data-state="run"] .v4-steps li:not(.is-run):not(.is-done){opacity:.4}
.v4-steps li.is-run{color:var(--v4-ink)}
.v4-steps li.is-run > i{background:#FC401F;color:#fff}
.v4-steps li.is-run > i::after{content:"";position:absolute;inset:-3px;border-radius:10px;box-shadow:0 0 0 2px rgba(252,64,31,.32);animation:v4-tool 1.1s ease-out infinite}
@keyframes v4-tool{from{opacity:1;transform:scale(.9)}to{opacity:0;transform:scale(1.25)}}
.v4-steps li.is-run{background:linear-gradient(90deg,rgba(35,27,16,.5) 0%,#231B10 40%,rgba(35,27,16,.5) 80%) 0 0/220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:v4-shim 1.5s linear infinite}
.v4-steps li.is-run > i{-webkit-background-clip:border-box;background-clip:border-box}
.v4-steps li.is-done{color:var(--v4-ink2)}
.v4-steps li.is-done > i{background:rgba(252,64,31,.12);color:#E5391A}
/* while he works the result is there but unresolved; it sharpens when he's done */
.v4-oc-out{display:grid;gap:12px;transition:opacity .6s var(--v4-ease),filter .7s var(--v4-ease),transform .7s var(--v4-ease)}
.v4-oc[data-state="idle"] .v4-oc-out{opacity:.18;filter:blur(10px) saturate(.3);transform:translateY(6px)}
.v4-oc[data-state="run"] .v4-oc-out{opacity:.4;filter:blur(7px) saturate(.5);transform:translateY(3px)}
.v4-oc-act{display:flex;justify-content:flex-end;gap:8px;transition:opacity .4s .1s}
.v4-oc[data-state="idle"] .v4-oc-act,.v4-oc[data-state="run"] .v4-oc-act{opacity:0}
.v4-oc-act span{padding:10px 14px;border-radius:12px;font:500 13.5px/1 "Inter",system-ui,sans-serif;color:var(--v4-ink);background:rgba(255,255,255,.92);box-shadow:inset 0 0 0 1px var(--v4-hair)}
/* one blue button per screen is the nav's; inside Milo's cards the yes is ink */
.v4-oc-act .pri{background:#231B10;color:#fff;box-shadow:0 4px 12px rgba(35,27,16,.18)}
.v4-oc-t{font:500 20px/1.3 'Doppio',system-ui,sans-serif;color:var(--v4-ink)}
.v4-oc-b{font:400 15px/1.5 "Inter",system-ui,sans-serif;color:var(--v4-ink)}
.v4-oc-f{font:400 13px/1.5 "Inter",system-ui,sans-serif;color:var(--v4-ink3)}
.v4-thumbs,.v4-ba{display:grid;gap:10px}
.v4-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
.v4-ba{grid-template-columns:repeat(2,minmax(0,1fr));max-width:340px}
.v4-thumbs figure,.v4-ba figure{display:grid;gap:7px}
.v4-thumbs figcaption,.v4-ba figcaption{font:500 12px/1 "Inter",system-ui,sans-serif;color:var(--v4-ink3);text-align:center}
.v4-mini{aspect-ratio:3/4;box-shadow:0 1px 2px rgba(35,27,16,.06);padding-top:4cqw}
.v4-rel{display:grid;grid-template-columns:62px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border-radius:14px;background:rgba(255,255,255,.94);box-shadow:inset 0 0 0 1px var(--v4-hair)}
.v4-rel-d{display:grid;justify-items:center;gap:3px;padding:9px 0;border-radius:10px;background:rgba(0,51,160,.06)}
.v4-rel-d small{font:600 10.5px/1 "Inter",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--v4-blue)}
.v4-rel-d b{font:500 26px/1 'Doppio',system-ui,sans-serif;color:var(--v4-ink)}
.v4-rel-t{display:grid;gap:4px;min-width:0}
.v4-rel-t b{font:600 15px/1.2 "Inter",system-ui,sans-serif;color:var(--v4-ink)}
.v4-rel-t > span{font:400 13.5px/1.3 "Inter",system-ui,sans-serif;color:var(--v4-ink2)}
.v4-rel-path{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:4px}
.v4-rel-path i{white-space:nowrap}
.v4-rel-path i{font:500 11.5px/1 "Inter",system-ui,sans-serif;font-style:normal;padding:5px 8px;border-radius:999px;background:rgba(35,27,16,.05);color:var(--v4-ink2)}
.v4-rel-path i:first-child::after{content:"→";margin-left:8px;color:var(--v4-ink3)}
.v4-rel-note{font:400 13px/1.45 "Inter",system-ui,sans-serif;color:var(--v4-ink3)}
.v4-lockmini{display:grid;align-content:center;padding:16px;min-height:138px;border-radius:14px;background:var(--img) center 65%/cover no-repeat}
.v4-push-card{grid-template-columns:40px 1fr;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 20px rgba(20,14,8,.14)}
.v4-push-card .v4-appic{width:40px;height:40px;border-radius:11px;font-size:17px}
.v4-push-card b{font-size:13px}
.v4-push-card strong{font-size:14.5px}
.v4-push-card span{font-size:13px}
.v4-kv{display:grid}
.v4-kv div,.v4-rows div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--v4-hair)}
.v4-kv dt,.v4-rows dt{font:500 11.5px/1.6 "Inter",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--v4-ink3)}
.v4-kv dd,.v4-rows dd{font:400 14.5px/1.45 "Inter",system-ui,sans-serif;color:var(--v4-ink)}
.v4-rows{display:grid}
.v4-rows .ok dt::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--v4-or);vertical-align:1px}
.v4-funnel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;height:176px;padding:12px 12px 10px;border-radius:14px;background:rgba(255,255,255,.7)}
.v4-funnel div{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:6px;min-width:0}
.v4-funnel b{font:600 13px/1 "Inter",system-ui,sans-serif;color:var(--v4-ink);text-align:center;white-space:nowrap}
.v4-funnel b em{margin-left:5px;padding:2px 5px;border-radius:6px;background:rgba(252,64,31,.12);font:600 10.5px/1 "Inter",system-ui,sans-serif;font-style:normal;color:#A42A12}
.v4-funnel span{align-self:end;height:var(--h);min-height:8px;border-radius:10px 10px 4px 4px;background:rgba(35,27,16,.18)}
.v4-funnel .leak span{background:var(--v4-or)}
.v4-funnel i{font:500 11.5px/1.2 "Inter",system-ui,sans-serif;font-style:normal;color:var(--v4-ink3);text-align:center}
/* pinned */
html.v4-jobs-pin .v4-jobs{padding-bottom:40px}
html.v4-jobs-pin .v4-jobs-scroll{height:380vh}
html.v4-jobs-pin .v4-jobs-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:64px}
html.v4-jobs-pin .v4-jobs-grid{width:100%;height:min(640px,calc(100vh - 150px));display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:88px}
html.v4-jobs-pin .v4-jobs-count{display:block;grid-area:2/1;margin-bottom:22px;font:500 13px/1 "Inter",system-ui,sans-serif;letter-spacing:.1em;color:var(--v4-ink3);font-variant-numeric:tabular-nums}
html.v4-jobs-pin .v4-jobs-count span{color:var(--v4-ink)}
html.v4-jobs-pin .v4-jobs-plate{display:block;grid-area:1/2/6/3;position:relative;border-radius:16px;overflow:hidden;
  background:#EDEFEA url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ac5f2b333227d4f65ee1ecb_final-jobs-rise.webp') center 100%/cover no-repeat}
html.v4-jobs-pin .v4-jobs-plate::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,248,245,.66),rgba(250,248,245,.3) 58%,rgba(250,248,245,0) 82%)}
html.v4-jobs-pin .v4-jobs-milo{position:absolute;right:28px;bottom:20px;width:96px;height:96px}
html.v4-jobs-pin .v4-jobs-list,html.v4-jobs-pin .v4-job{display:contents}
html.v4-jobs-pin .v4-job-text{grid-area:3/1;opacity:0;transform:translateY(16px);transition:opacity .45s var(--v4-ease),transform .7s var(--v4-ease)}
html.v4-jobs-pin .v4-job-text h3{font-size:48px;line-height:1.06;margin-bottom:16px}
html.v4-jobs-pin .v4-job-text p{font-size:19px;line-height:1.55}
html.v4-jobs-pin .v4-job-text .v4-job-foot{font-size:15px;margin-top:20px}
html.v4-jobs-pin .v4-job .v4-panel::before{display:none}
html.v4-jobs-pin .v4-job .v4-panel{grid-area:1/2/6/3;align-self:center;justify-self:center;z-index:1;width:min(548px,calc(100% - 80px));padding:0;background:none;overflow:visible;
  opacity:0;transform:translateY(16px);transition:opacity .45s var(--v4-ease),transform .7s var(--v4-ease)}
html.v4-jobs-pin .v4-job.is-on .v4-job-text,html.v4-jobs-pin .v4-job.is-on .v4-panel{opacity:1;transform:none}
html.v4-jobs-pin .v4-job:not(.is-on) .v4-panel{pointer-events:none}
html.v4-jobs-pin .v4-jobs-prog{display:flex;grid-area:4/1;gap:8px;margin-top:40px}
.v4-jobs-prog button{all:unset;cursor:pointer;flex:1;max-width:52px;height:24px;display:flex;align-items:center;border-radius:4px}
.v4-jobs-prog button:focus-visible{outline:2px solid var(--v4-blue);outline-offset:3px}
.v4-jobs-prog i{position:relative;display:block;width:100%;height:2px;border-radius:2px;overflow:hidden;background:rgba(35,27,16,.14)}
.v4-jobs-prog i::after{content:"";position:absolute;inset:0;background:var(--v4-blue);transform-origin:left;transform:scaleX(var(--f,0))}
.v4-jobs-prog button:hover i{background:rgba(35,27,16,.28)}

/* ── 6 · the gate: the claim, and the card that waits for your yes ── */
.v4-gate{padding:168px 40px 176px}
.v4-gate p,.v4-gate figure{margin:0}
.v4-gate-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:72px;align-items:center}
.v4-gate-say{display:grid;gap:20px;justify-items:start}
.v4-gate .v4-h2{text-wrap:balance}
.v4-gate-line{max-width:480px;font:400 18px/1.6 "Inter",system-ui,sans-serif;color:var(--v4-ink2)}
.v4-tmarks{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:14px!important}
.v4-tmarks li{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px var(--v4-hair),0 4px 14px rgba(35,27,16,.05);font:500 13.5px/1 "Inter",system-ui,sans-serif;color:var(--v4-ink)}
.v4-tmarks svg{width:15px;height:16px;color:var(--v4-ink)}
.v4-tmarks .v4-tmarks-link{background:none;box-shadow:none;padding:0 6px}
.v4-tmarks a{color:var(--v4-blue);text-decoration:none}
.v4-tmarks a:hover{text-decoration:underline}
.v4-gate-plate{position:relative;display:grid;place-items:center;min-height:500px;padding:40px;border-radius:16px;overflow:hidden;
  background:#EDEFEA url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ac5f2b3011a5ea8638d03ef_final-gate-hill.webp') center 80%/cover no-repeat}
.v4-gate-plate::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(250,248,245,.6),rgba(250,248,245,.22) 60%,rgba(250,248,245,0))}
.v4-gate-card{position:relative;width:100%;max-width:440px;text-align:left}
.v4-gate-t{padding-top:12px;border-top:1px solid var(--v4-hair);font:500 22px/1.25 'Doppio',system-ui,sans-serif;letter-spacing:-.01em;color:var(--v4-ink)}
.v4s .v4-diff,.v4-gate .v4-diff{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.v4-diff li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:center;font:400 14.5px/1.35 "Inter",system-ui,sans-serif;color:var(--v4-ink2)}
.v4-diff li::before{content:"+";display:grid;place-items:center;width:18px;height:18px;border-radius:6px;background:rgba(35,27,16,.06);font:600 12px/1 "Inter",system-ui,sans-serif;color:var(--v4-ink)}
.v4-gate-prev{display:flex;align-items:center;gap:8px;font:500 13px/1 "Inter",system-ui,sans-serif;color:var(--v4-ink3)}
.v4-gate-prev i{width:9px;height:15px;border-radius:2.5px;box-shadow:inset 0 0 0 1.4px currentColor}
.v4-yes{position:relative}
.v4-gate-card.is-published .v4-yes{background:#2B2419}
.v4-gate-card.is-published .v4-yes::after{animation:none;opacity:0}
.v4-gate-card .st-done{transition:color .3s}
.v4-gate-card.is-published .st-done::before{background:#0033A0}
.v4-gate-card.is-published .v4-diff li::before{content:"\2713";background:#0033A0;color:#fff}
.v4-yes::after{content:"";position:absolute;inset:-4px;border-radius:15px;box-shadow:0 0 0 2px rgba(35,27,16,.22);animation:v4-yes 2.4s var(--v4-ease) infinite}
@keyframes v4-yes{0%{opacity:0;transform:scale(.96)}30%{opacity:1}100%{opacity:0;transform:scale(1.08)}}
html.v4-gate-on .mrail,html.v4-gate-on .mtrail{opacity:0!important;pointer-events:none!important;transition:opacity .25s}
@media (max-width:991px){ .v4-gate-in{grid-template-columns:1fr;gap:44px} .v4-gate-plate{min-height:0;padding:28px 18px} }
@media (prefers-reduced-motion:reduce){ .v4-yes::after{animation:none;opacity:0} }

/* ── 7 · why an app + the marquee ── */
.v4-why{padding-bottom:36px}
.v4-why .v4-head{margin-bottom:64px}
.v4-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.v4-fig{display:grid;gap:14px;align-content:start;padding:4px 28px 8px 0}
.v4-fig+.v4-fig{padding-left:28px;border-left:1px solid var(--v4-hair)}
.v4-fig b{font:400 58px/1 'Doppio',system-ui,sans-serif;letter-spacing:-.025em;color:var(--v4-or)}
.v4-fig span{font:400 16px/1.5 "Inter",system-ui,sans-serif;color:var(--v4-ink2);max-width:22ch}
.cases.v4-cases{padding-top:176px!important}
.v4-cases .cases-head{display:grid;gap:18px;margin-bottom:44px}
.v4-cases .cases-head .v4-h2{max-width:720px;font-family:'Doppio',system-ui,sans-serif;font-weight:500;font-size:52px;line-height:1.08;letter-spacing:-.024em}
/* the brand is its logo, on a white chip so it reads over any plate */
.mcard .mbrand.v4-logo{display:inline-flex;align-items:center;align-self:flex-start;height:44px;overflow:hidden;background:none;box-shadow:none;padding:0;opacity:1}
.mcard .mbrand.v4-logo img{display:block;height:var(--lh,24px);width:auto;max-width:150px;object-fit:contain;mix-blend-mode:multiply}
.mcard .mbrand.v4-logo-sq{margin-left:-12px}
/* the card body is its own stacking context, so a logo cannot multiply through it; the body multiplies instead
   (white logo grounds vanish into the plate, ink stays ink) */
.v4-cases .mcard .body{mix-blend-mode:multiply}
/* the photo comes through on hover; the numbers keep their ground */
.v4-cases .mcard .wash{background:linear-gradient(180deg,rgba(250,248,245,.62) 0%,rgba(250,248,245,.28) 34%,rgba(250,248,245,.18) 100%)!important;transition:opacity .45s cubic-bezier(.16,1,.3,1)!important}
@media (hover:hover) and (pointer:fine){ .v4-cases .mcard:hover .wash{opacity:0!important} }
.v4-cases .mcard::after{background:linear-gradient(0deg,rgba(250,248,245,.96) 0%,rgba(250,248,245,.9) 30%,rgba(250,248,245,.55) 50%,rgba(250,248,245,0) 68%)!important}
.v4-cases .mnum{font-size:54px!important;font-weight:400;letter-spacing:-.03em;color:#231B10!important}
.v4-cases .mlabel{font-size:15px!important;line-height:1.35;color:rgba(35,27,16,.8)!important;opacity:1}
.mcard .mbrand.v4-logo-sq img{mix-blend-mode:multiply;max-width:none}

/* ── 8 · integrations: the stack in space (cosmos.so's first fold, on our cream) — one fold high ── */
.v4-int{padding:0;overflow-x:clip}
.v4-space{position:relative;height:100vh;min-height:680px;max-height:960px;margin:0 calc(50% - 50vw);overflow:hidden;isolation:isolate;
  display:grid;place-items:center}
.v4-space::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,#FAF8F5,rgba(250,248,245,0) 12%,rgba(250,248,245,0) 80%,rgba(250,248,245,.8) 90%,#FAF8F5)}
.v4s .v4-otiles{list-style:none;position:absolute;inset:0;z-index:1;margin:0;padding:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,transparent 0 50%,#000 88%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,transparent 0 50%,#000 88%)}
.v4-otile{position:absolute;left:50%;top:50%;width:96px;height:104px;margin:-52px 0 0 -48px;display:grid;justify-items:center;align-content:center;gap:9px;border-radius:14px;opacity:0;will-change:transform,opacity;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(35,27,16,.08),0 10px 24px rgba(35,27,16,.10),0 0 32px rgba(35,27,16,.03)}
.v4-otile .lg{width:40px;height:40px;filter:none;border-radius:9px}
.v4-otile b{font:500 11.5px/1 "Inter",system-ui,sans-serif;color:var(--v4-ink2);white-space:nowrap}
.v4-int-center{position:relative;z-index:3;display:grid;justify-items:center;gap:6px;padding:0 24px}
.v4-orbit-core{position:relative;width:132px;height:116px;display:grid;place-items:center}
.v4-core-fb{display:block;width:132px;height:auto;filter:drop-shadow(0 16px 24px rgba(35,27,16,.16))}
html.v4-core-live .v4-core-fb{visibility:hidden}
.v4-int-head{max-width:560px;margin:0!important;justify-items:center;text-align:center}
.v4-int-head .v4-h2{max-width:520px}
.v4-int-head .v4-lede{max-width:480px}
.v4-int-list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v4-int-all{margin-top:2px;font:500 15px/1.4 "Inter",system-ui,sans-serif;color:var(--v4-blue);text-decoration:none}
.v4-int-all:hover{text-decoration:underline}
@media (max-width:899px){
  .v4-space{height:auto;min-height:0;max-height:none;padding:120px 0}
  .v4-otile{width:72px;height:80px;margin:-40px 0 0 -36px;gap:6px}
  .v4-otile .lg{width:30px;height:30px}
  .v4-otile b{font-size:10px}
  html.v4-core-live .v4-core-fb{visibility:visible}
  .v4-core-fb{width:104px}
  .v4-orbit-core{width:104px;height:92px}
}
@keyframes v4-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── 9 · the people (Milo TV), the reviews (the pile, Milo in each card), and — after "You stay in charge" — the
      security fold. Ported 30 Sep from explore/final.html, as approved; every name is namespaced (v4tv / v4rv / v4sec). ── */
.v4x,.v4rv-sec,.v4sec-root{--ink:#231B10;--ink2:rgba(35,27,16,.74);--ink3:rgba(35,27,16,.64);--hair:rgba(35,27,16,.12);--blue:#0033A0;--or:#FC401F;--or-ink:#C2330E;--ease:cubic-bezier(.16,1,.3,1)}
.v4x,.v4x *,.v4rv-sec *,.v4sec-root *{box-sizing:border-box}
/* :where, not :is — the reset must beat Webflow's element rules (0,0,1) but lose to every class below it; as :is it
   was 0,1,1 and zeroed the channel pill's own padding */
.v4x :where(p,h2,h3,figure,blockquote,ul,ol),.v4rv-sec :where(p,h2,h3,figure,blockquote,ul,ol),.v4sec-root :where(p,h2,h3,figure,blockquote,ul,ol){margin:0;padding:0;border:0}
.v4x button,.v4rv-sec button{font:inherit;color:inherit}
.v4s.v4x{padding:0}
html.v4-norail .mrail,html.v4-norail .mtrail{opacity:0!important;pointer-events:none!important;transition:opacity .25s}

/* ════════ PEOPLE · Milo TV. A big compact Milo in the middle of the meadow (about 35% of the width, capped so the
   fold stays one screen). The videos are a carousel that runs BEHIND him; a clipped copy of the same carousel runs
   inside his screen, so the next video slides behind his head and comes out on his screen, where it plays.
   The carousel is the control: scroll sideways, drag, swipe, click the video peeking out beside him, or the arrow
   keys. Each change is an old set's: the picture collapses to a line and opens on the new channel, and the channel
   number comes up in green. ════════ */
.v4tv-field{position:relative;overflow:hidden;isolation:isolate;background:#DDE6EE var(--wall) center bottom/cover no-repeat}
.v4tv-field::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#FAF8F5 0%,rgba(250,248,245,.55) 9%,rgba(250,248,245,0) 24%)}
.v4tv-field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(250,248,245,0),rgba(250,248,245,.6) 55%,#FAF8F5)}
/* the head's visible body is x 25–275 of its 420-wide box, so 35% of the width = a 58.8vw box, capped by height so the
   caption stays in the fold; the var lives here so the caption under him can use it too */
.v4tv-in{--w:max(440px,min(860px,58.8vw,calc((100vh - 440px) * 1.826)));position:relative;z-index:2;display:grid;justify-items:center;padding:72px 0 96px}
.v4tv-head{display:grid;gap:16px;justify-items:center;text-align:center;max-width:640px;padding:0 24px}
.v4tv-head .v4-lede{max-width:520px}
.v4tv-tap{display:none}
@media (hover:none){ .v4tv-hov{display:none} .v4tv-tap{display:inline} }

.v4tv-stage{position:relative;width:100%;display:grid;justify-items:center;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.v4tv-stage:focus-visible{outline:none}
.v4tv-stage:focus-visible .v4tv-scr{outline:3px solid var(--blue);outline-offset:4px}
.v4tv-stage{cursor:grab}
.v4tv-stage.is-drag{cursor:grabbing}
.v4tv-arw{all:unset;box-sizing:border-box;position:absolute;top:calc(var(--w) * .2858 - 4px);z-index:6;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 10px 26px rgba(35,27,16,.14);color:var(--ink);transition:transform .25s var(--ease),background .2s}
.v4tv-arw svg{width:20px;height:20px}
.v4tv-arw:hover{background:#fff;transform:scale(1.06)}
.v4tv-arw:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.v4tv-arw.l{left:calc(50% - var(--w) * .86)}
.v4tv-arw.r{right:calc(50% - var(--w) * .86)}
.v4tv-in.is-hint .v4tv-arw.r{animation:v4tv-nudge 1.4s var(--ease) 2}
@keyframes v4tv-nudge{0%,100%{transform:none}40%{transform:translateX(6px)}}
.v4tv{position:relative;width:var(--w);aspect-ratio:420/332;margin-top:calc(var(--w) * -.0952 + 22px)}
.v4tv-body{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;pointer-events:none;filter:drop-shadow(0 30px 40px rgba(35,27,16,.14))}
/* the screen, exactly over the head's glass (x62 y54 w176 h132 r16 in a -60 -40 420 332 box) */
.v4tv-rect{position:absolute;left:29.048%;top:28.313%;width:41.905%;height:39.759%}
.v4tv-back{z-index:1;perspective:calc(var(--w) * 1.7);perspective-origin:50% 50%}
.v4tv-scr{z-index:3;overflow:hidden;border-radius:calc(var(--w) * 16 / 420);background:#0E0B08;cursor:pointer}
.v4tv-scr::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px),radial-gradient(120% 95% at 50% 40%,transparent 58%,rgba(0,0,0,.32));
  box-shadow:inset 0 0 0 1.2px rgba(0,0,0,.4),inset 0 12px 22px rgba(255,255,255,.16)}
.v4tv-front{position:absolute;inset:0;transform-origin:50% 50%;perspective:calc(var(--w) * 1.7);perspective-origin:50% 50%}
.v4tv-card{position:absolute;inset:0;border-radius:calc(var(--w) * 14 / 420);will-change:transform;backface-visibility:hidden;transform-origin:50% 50%}
/* a 16:9 picture in a 4:3 set: full width, 75% of the height, centred — letterboxed like widescreen on an old TV */
.v4tv-card .v4tv-pic{position:absolute;left:0;right:0;top:12.5%;height:75%;overflow:hidden;border-radius:calc(var(--w) * 10 / 420);background:#15110C}
.v4tv-front .v4tv-card .v4tv-pic{border-radius:0}
.v4tv-card img,.v4tv-card iframe{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover;border:0;display:block}
.v4tv-card iframe{opacity:0;transition:opacity .4s;pointer-events:none}
.v4tv-card iframe.is-in{opacity:1}
/* the videos beside him: a pointer, a lift on hover, their channel and name underneath */
.v4tv-back .v4tv-card{cursor:pointer}
.v4tv-back .v4tv-card .v4tv-pic{box-shadow:0 18px 40px rgba(20,24,30,.22);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.v4tv-back .v4tv-card:hover .v4tv-pic{transform:translateY(-4px);box-shadow:0 24px 50px rgba(20,24,30,.26)}
.v4tv-cap{position:absolute;top:calc(87.5% + 12px);left:0;display:flex;align-items:center;gap:9px;max-width:100%;padding:7px 11px 7px 7px;border-radius:10px;white-space:nowrap;
  background:rgba(250,248,245,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .3s}
.v4tv-cap em{font:700 10.5px/1 ui-monospace,Menlo,monospace;font-style:normal;padding:4px 5px;border-radius:5px;background:#15110C;color:#7CFF6B}
.v4tv-cap b{font:600 12.5px/1.2 "Inter",system-ui,sans-serif;color:var(--ink)}
.v4tv-cap span{overflow:hidden;text-overflow:ellipsis;font:400 12px/1.2 "Inter",system-ui,sans-serif;color:var(--ink2)}
.v4tv-card.is-r .v4tv-cap{left:auto;right:0}
/* channel change: the picture collapses to a bright line, holds, and opens on the new channel */
.v4tv.is-flip .v4tv-front{animation:v4tv-crt .58s cubic-bezier(.4,0,.2,1) both}
@keyframes v4tv-crt{0%{transform:scaleY(1);filter:none}28%{transform:scaleY(.012) scaleX(1.02);filter:brightness(3)}64%{transform:scaleY(.012) scaleX(.9);filter:brightness(3)}100%{transform:none;filter:none}}
.v4tv-osd{position:absolute;right:6%;top:7%;z-index:5;font:700 calc(var(--w) * .046)/1 ui-monospace,Menlo,monospace;letter-spacing:.04em;color:#7CFF6B;
  text-shadow:0 0 8px rgba(124,255,107,.55),0 2px 0 rgba(0,0,0,.4);opacity:0;transition:opacity .25s}
.v4tv.is-osd .v4tv-osd{opacity:1}
/* while a clip plays silently, the sound switch under him glows (YouTube draws its own title over the picture for a few
   seconds, so no hint of ours goes on the screen) */
.v4tv-in.is-quiet .v4tv-snd{background:rgba(252,64,31,.12);color:var(--ink)}
.v4tv-in.is-quiet .v4tv-snd::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--or);box-shadow:0 0 0 0 rgba(252,64,31,.5);animation:v4tv-ping 1.6s ease-out infinite}
@keyframes v4tv-ping{to{box-shadow:0 0 0 7px rgba(252,64,31,0)}}

/* what's on: one piece, the sound switch inside it, so they share one height */
.v4tv-now{display:inline-flex;align-items:center;gap:10px;height:46px;margin-top:calc(var(--w) * -.1286 + 40px);padding:0 6px 0 14px;border-radius:14px;
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 10px 26px rgba(35,27,16,.10);position:relative;z-index:3}
.v4tv-now em{font:700 12px/1 ui-monospace,Menlo,monospace;font-style:normal;padding:6px 7px;border-radius:7px;background:#15110C;color:#7CFF6B}
.v4tv-now b{font:600 14px/1.2 "Inter",system-ui,sans-serif;color:var(--ink);white-space:nowrap}
.v4tv-now span{font:400 13.5px/1.2 "Inter",system-ui,sans-serif;color:var(--ink2);white-space:nowrap}
.v4tv-now i{width:1px;height:22px;margin:0 2px 0 6px;background:var(--hair)}
.v4tv-snd{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:10px;cursor:pointer;
  font:600 13px/1 "Inter",system-ui,sans-serif;color:var(--ink);transition:background .2s,color .2s}
.v4tv-snd:hover{background:rgba(35,27,16,.06)}
.v4tv-snd:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.v4tv-snd svg{width:15px;height:15px}
.v4tv-now .v4tv-snd span{font:inherit;color:inherit;white-space:nowrap}
.v4tv-snd .w{display:none}
.v4tv-snd[aria-pressed="true"]{background:#231B10;color:#fff}
.v4tv-snd[aria-pressed="true"] .w{display:inline}.v4tv-snd[aria-pressed="true"] .x{display:none}

@media (max-width:760px){
  .v4tv-in{padding:72px 0 96px}
  .v4tv-head{justify-items:start;text-align:left;padding:0 24px;width:100%}
  .v4tv-in{--w:520px}
  .v4tv{justify-self:start;margin-top:calc(var(--w) * -.0952 + 14px);margin-left:calc(50% - var(--w) / 2)}
  .v4tv-cap{display:none}
  .v4tv-arw{width:44px;height:44px;top:calc(var(--w) * .2858 - 8px)}
  .v4tv-arw.l{left:8px}.v4tv-arw.r{right:8px}
  .v4tv-now{max-width:calc(100% - 32px);height:auto;min-height:46px;flex-wrap:wrap;justify-content:center;padding:6px 8px;row-gap:4px}
  .v4tv-now span{white-space:normal;text-align:center}
  .v4tv-now i{display:none}
}

/* ════════ REVIEWS · the pile (paper, grain, slide-off), and Milo INSIDE each card, like the postcard's two halves:
   the brand's words on the left, a hairline, Milo on the right. As a card comes to the top his face shows for a beat,
   then the part that matters is highlighted in the quote and typed on his screen. He leaves with his card. ════════ */
.v4rv-sec{overflow-x:clip}
.v4rv-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:56px;align-items:center}
.v4rv-pile{position:relative;width:100%;max-width:820px;justify-self:end;padding-top:12px}
.v4rv-cards{list-style:none;position:relative;height:360px;margin:0;padding:0}
.v4rv-card{--rw:440px;position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:auto 1fr auto;column-gap:30px;row-gap:14px;
  padding:26px 28px 24px 30px;border-radius:8px;cursor:pointer;
  background:#FFFDF8 radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.9),rgba(247,241,229,.6));
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 0 0 1px rgba(35,27,16,.07),0 18px 40px rgba(35,27,16,.12),0 2px 6px rgba(35,27,16,.06);
  transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--rot,0deg));transition:transform .75s cubic-bezier(.16,1,.3,1),opacity .5s;z-index:var(--z,1)}
.v4rv-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* the postcard's dividing rule */
.v4rv-card::after{content:"";position:absolute;top:28px;bottom:28px;right:calc(28px + 280px + 15px);width:1px;background:rgba(35,27,16,.12)}
.v4rv-card.is-out{transform:translate(-18%,-150%) rotate(-7deg);opacity:0}
.v4rv-card:not(.is-top){cursor:default}
/* only the top card shows its words and its Milo; the ones under it are paper */
.v4rv-card > *{transition:opacity .35s}
.v4rv-card:not(.is-top) > *{opacity:0}
.v4rv-card:not(.is-top)::after{opacity:0}
.v4rv-top{grid-column:1;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px}
.v4rv-top img{display:block;height:var(--lh,22px);width:auto;max-width:160px;object-fit:contain;mix-blend-mode:multiply}
.v4rv-top small{font:600 10.5px/1 "Inter",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.v4rv-card blockquote{grid-column:1;position:relative;align-self:center;font:500 21px/1.42 'Doppio',system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.v4rv-card mark,.v4rv-msay mark{color:inherit;background:none;padding:0}
.v4rv-foot{grid-column:1}
.v4rv-foot b{display:block;font:600 14px/1.3 "Inter",system-ui,sans-serif;color:var(--ink)}
.v4rv-foot span{font:400 13.5px/1.4 "Inter",system-ui,sans-serif;color:var(--ink2)}
/* Milo in the card: a 440 box whose visible body (262) sits in the 280 column; the rest of the box is transparent */
.v4rv-milo{grid-column:2;grid-row:1 / 4;align-self:center;justify-self:center;position:relative;width:var(--rw);aspect-ratio:420/332;margin:-30px calc((280px - var(--rw)) / 2) -34px;pointer-events:none}
.v4rv-milo > img{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .3s;filter:drop-shadow(0 18px 24px rgba(35,27,16,.12))}
.v4rv-milo .h{opacity:0}
.v4rv-milo.is-happy .h{opacity:1}.v4rv-milo.is-happy .i{opacity:0}
.v4rv-mscr{position:absolute;left:29.048%;top:28.313%;width:41.905%;height:39.759%;border-radius:calc(var(--rw) * 16 / 420);overflow:hidden;
  background:#EDEAE1;display:grid;align-content:center;padding:0 calc(var(--rw) * .03);transition:opacity .26s,transform .26s}
.v4rv-mscr::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px),radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.14))}
.v4rv-mscr::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 1.2px rgba(0,0,0,.3),inset 0 10px 18px rgba(255,255,255,.35)}
.v4rv-milo.is-off .v4rv-mscr{opacity:0;transform:scaleY(.03)}
.v4rv-msay{position:relative;z-index:1;display:grid;gap:calc(var(--rw) * .012);font:500 calc(var(--rw) * .04)/1.18 'Doppio',system-ui,sans-serif;letter-spacing:-.01em;color:#17120E;text-wrap:balance}
.v4rv-msay.is-long{font-size:calc(var(--rw) * .035)}
.v4rv-msay p:last-child::after{content:"";display:inline-block;width:.45em;height:.9em;margin-left:.1em;vertical-align:-.1em;background:#17120E;animation:v4rv-mcaret 1s steps(1) infinite}
.v4rv-milo.is-done .v4rv-msay p:last-child::after{opacity:0;animation:none}
@keyframes v4rv-mcaret{50%{opacity:0}}
/* controls: their own layer, clear of the pile's offsets */
.v4rv-ctl{position:relative;z-index:20;display:flex;align-items:center;gap:10px;margin-top:48px}
.v4rv-ctl button{all:unset;box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(35,27,16,.14),0 4px 12px rgba(35,27,16,.06);transition:transform .2s}
.v4rv-ctl button:hover{transform:translateY(-1px)}
.v4rv-ctl button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.v4rv-ctl button svg{width:17px;height:17px}
.v4rv-n{margin-left:6px;font:500 14px/1 "Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink)}
.v4rv-n span{color:var(--ink3)}
.v4rv-bar{flex:1;max-width:200px;height:3px;border-radius:3px;background:rgba(35,27,16,.10);overflow:hidden;margin-left:8px}
.v4rv-bar i{display:block;height:100%;width:0;background:var(--blue)}
@media (max-width:1100px){ .v4rv-grid{grid-template-columns:1fr;gap:40px} .v4rv-pile{justify-self:stretch;max-width:none} }
@media (max-width:760px){
  .v4rv-cards{height:600px}
  .v4rv-card{--rw:330px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;padding:20px 20px 20px}
  .v4rv-card::after{display:none}
  .v4rv-top{grid-row:1}
  .v4rv-milo{grid-column:1;grid-row:2;margin:-24px auto -26px}
  .v4rv-card blockquote{grid-row:4;font-size:19px}
  .v4rv-foot{grid-row:5}
}

/* ════════ SECURITY · one small fold after "You stay in charge". Fixes from review: the seals are white with ink
   type (the beige ring sat under the words), the trust-center row is one line, the plate is a placeholder until the
   new image lands. The plate follows the recessed-plate guideline. ════════ */
.v4sec-head{margin:0 auto 56px;justify-items:center;text-align:center}
.v4sec-head .v4-lede{max-width:560px}
/* the garden shown whole — sky, hedge, flowers — as a recessed 21:9 plate; the three tiles overlap only its foot */
.v4sec-plate{position:relative;aspect-ratio:21/9;border-radius:16px;overflow:hidden;background:#DDE6EE var(--img) center/cover no-repeat}
.v4sec-plate::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 2px 3px 5px rgba(35,27,16,.10)}
.v4sec-tiles{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:16px;align-items:stretch;margin:-150px 36px 0}
.v4sec-tile{position:relative;z-index:1;display:grid;gap:14px;align-content:start;min-height:260px;padding:24px 24px 22px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.72));-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.55),0 18px 44px rgba(35,27,16,.14)}
.v4sec-cert{justify-items:center;text-align:center;align-content:center}
.v4sec-seal{position:relative;display:grid;place-items:center;width:140px;height:140px}
/* a white disc; the words run between two hairlines, on white */
.v4sec-ring{position:absolute;inset:0;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(35,27,16,.14),0 10px 24px rgba(35,27,16,.10)}
.v4sec-ring::after{content:"";position:absolute;inset:26px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(35,27,16,.12)}
.v4sec-seal > svg{position:absolute;inset:0;width:100%;height:100%;animation:v4sec-turn 60s linear infinite}
.v4sec-seal > svg text{font:600 8.6px/1 "Inter",system-ui,sans-serif;letter-spacing:.14em;fill:#231B10}
.v4sec-core{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#0033A0;color:#fff;box-shadow:0 8px 18px rgba(0,51,160,.3)}
.v4sec-core svg{width:22px;height:22px}
@keyframes v4sec-turn{to{transform:rotate(360deg)}}
.v4sec-cert b{font:500 26px/1.1 'Doppio',system-ui,sans-serif;letter-spacing:-.015em;color:var(--ink)}
.v4sec-st{font:500 13px/1.3 "Inter",system-ui,sans-serif;color:var(--ink2)}
.v4sec-st::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--blue);vertical-align:1px}
.v4sec-milo-hd{display:flex;align-items:center;gap:12px}
.v4sec-milo-hd img{width:52px;height:auto}
.v4sec-milo-hd b{display:block;font:500 22px/1.2 'Doppio',system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.v4sec-milo-hd span{font:500 12px/1 "Inter",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--or-ink)}
.v4sec-rules{list-style:none;display:grid;gap:12px;padding-top:14px;border-top:1px solid var(--hair)}
.v4sec-rules li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:11px;align-items:start;font:400 15px/1.45 "Inter",system-ui,sans-serif;color:var(--ink)}
.v4sec-rules i{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(252,64,31,.12);color:#E5391A}
.v4sec-rules i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.v4sec-controls{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin-top:22px;white-space:nowrap}
.v4sec-controls > p{margin-right:6px;font:500 12px/1 "Inter",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.v4sec-controls > span{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px rgba(35,27,16,.10);
  font:500 13px/1 "Inter",system-ui,sans-serif;color:var(--ink)}
.v4sec-controls > span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.v4sec-controls > span.v4sec-c4{}
@media (max-width:1279px){ .v4sec-controls > span.v4sec-c4{display:none} }
.v4sec-controls a{margin-left:auto;font:500 15px/1.4 "Inter",system-ui,sans-serif;color:var(--blue);text-decoration:none}
.v4sec-controls a:hover{text-decoration:underline}
@media (max-width:1023px){
  .v4sec-plate{aspect-ratio:16/9}
  .v4sec-tiles{grid-template-columns:1fr 1fr;margin:-80px 16px 0}
  .v4sec-milo{grid-column:1 / -1}
  .v4sec-tile{min-height:0}
  .v4sec-controls{flex-wrap:wrap;white-space:normal}
  .v4sec-controls a{margin-left:0;flex-basis:100%;margin-top:6px}
}
@media (max-width:560px){ .v4sec-plate{aspect-ratio:4/3} .v4sec-tiles{grid-template-columns:1fr;margin:-60px 12px 0} .v4sec-seal{width:120px;height:120px} .v4sec-ring::after{inset:22px} }
@media (prefers-reduced-motion:reduce){ .v4sec-seal > svg{animation:none} }


/* one star, drawn at the numeral's own scale (its cap height), not a row of five small ones beside a 120px figure */
.v4rv-stars{display:inline-flex;color:var(--ink)}
.v4rv-stars svg{width:.62em;height:.62em;font-size:120px}
.v4rv-score{display:grid;gap:18px;align-content:center}
.v4rv-score-n{display:flex;align-items:center;gap:18px}
.v4rv-score-n b{font:400 120px/.9 'Doppio',system-ui,sans-serif;letter-spacing:-.04em;color:var(--ink)}
.v4rv-score-l{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font:500 17px/1.4 "Inter",system-ui,sans-serif;color:var(--ink)}
.v4rv-score-l span{color:var(--ink3)}
.v4rv-score-p{max-width:360px;font:400 17px/1.55 "Inter",system-ui,sans-serif;color:var(--ink2)}
.v4rv-score-a{font:500 15px/1.4 "Inter",system-ui,sans-serif;color:var(--blue);text-decoration:none}
.v4rv-score-a:hover{text-decoration:underline}
.v4rv-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1023px){ .v4rv-score-n b,.v4rv-stars svg{font-size:88px} }

/* the footer ends in the meadow: milo-v3's band (19vw of daisies fading in from nothing), "built by asking" just above it */
footer.abf{position:relative;overflow:hidden;padding-bottom:calc(19vw - 5vw)}
footer.abf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:19vw;z-index:0;pointer-events:none;
  background:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ac5f2b31ee65d7e707e35e2_final-footer-band.webp') 50% 72%/cover no-repeat;
  -webkit-mask-image:linear-gradient(transparent 0%,rgba(0,0,0,.45) 24%,#000 60%);mask-image:linear-gradient(transparent 0%,rgba(0,0,0,.45) 24%,#000 60%)}
footer.abf .abf-in,footer.abf .abf-sign{position:relative;z-index:1}
@media (max-width:640px){ footer.abf{padding-bottom:calc(30vw - 6vw)} footer.abf::after{height:30vw} }

/* ── DESIGN GUIDELINE (Vishal, 29 Sep, r14): every photograph used as a card surface is a RECESSED PLATE — no border,
      no drop shadow of its own, radius 16 (12 when it sits inside a card), and one inset shadow drawn ABOVE the photo:
      inset 2px 3px 5px rgba(35,27,16,.10). Cards that sit ON a plate carry the lift (glass + drop shadow), the plate
      never does. The same mount as the shipped cards, the race end cards and the security plate. ── */
html.v4-jobs-pin .v4-jobs-plate::after,.v4-gate-plate::after,.v4-lockmini::after,.v4-cases .mcard::before{content:"";position:absolute;inset:0;
  border-radius:inherit;box-shadow:inset 2px 3px 5px rgba(35,27,16,.10);pointer-events:none}
.v4-lockmini{position:relative;border-radius:12px}
.v4-cases .mcard{border:0!important;box-shadow:none!important}
.v4-cases .mcard::before{z-index:6}

/* ── 10 · questions ── */
.v4-faq-in{display:grid;grid-template-columns:380px minmax(0,1fr);gap:112px;align-items:start}
.v4-faq .v4-head{position:sticky;top:120px;margin:0}
.v4-qa{border-top:1px solid var(--v4-hair)}
.v4-qa details{border-bottom:1px solid var(--v4-hair)}
.v4-qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px 0;border-radius:12px}
.v4-qa summary::-webkit-details-marker{display:none}
.v4-qa summary:focus-visible{outline:2px solid var(--v4-blue);outline-offset:4px}
.v4-qa summary h3{margin:0;font:500 22px/1.3 'Doppio',system-ui,sans-serif;letter-spacing:-.01em;color:var(--v4-ink)}
.v4-qa summary::after{content:"";flex:none;width:10px;height:10px;margin-right:6px;border-right:1.6px solid var(--v4-ink);border-bottom:1.6px solid var(--v4-ink);transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--v4-ease)}
.v4-qa details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.v4-qa details>div{padding:0 64px 32px 0}
.v4-qa details p{font:400 17px/1.7 "Inter",system-ui,sans-serif;color:var(--v4-ink2)}

/* ── 11 · close ── */
.close.v4-close .close-body h2{margin-bottom:0}
/* r18: the close has its own meadow (a daisy knoll under a big cloud), no longer the hero's K1 — the page ends somewhere
   new instead of back where it started. The class stays: milo.js keys the plate Milo off it. */
.close.v4-close .close-plate span{background-image:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ac5f2b31d0e0a5fbda720cf_final-close-knoll.webp');background-position:30% 44%}
/* the close composer is the hero's: a tall glass field, the words top-left, the send bottom-right, three asks under it */
.v4-cfield{position:relative;margin:28px 0 14px;max-width:560px;height:118px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.9));-webkit-backdrop-filter:blur(30px) saturate(1.35);backdrop-filter:blur(30px) saturate(1.35);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(35,27,16,.06),0 0 0 1px rgba(35,27,16,.06),0 14px 40px rgba(35,27,16,.12)}
.v4-cfield input{all:unset;box-sizing:border-box;width:100%;height:60px;padding:22px 22px 0;font:400 17px/1.3 "Inter",system-ui,sans-serif;color:#231B10}
.v4-cfield input::placeholder{color:rgba(35,27,16,.5)}
.v4-cfield .go{all:unset;position:absolute;right:12px;bottom:12px;width:42px;height:42px;border-radius:12px;background:#FC401F;color:#fff;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 6px 16px rgba(252,64,31,.28);transition:transform .3s var(--v4-ease)}
.v4-cfield .go:hover{transform:translateY(-1px)}
.v4-cfield .go svg{width:18px;height:18px}
.v4-cfield .go:focus-visible{outline:2px solid #0033A0;outline-offset:2px}
.v4-cchips{display:flex;flex-wrap:wrap;gap:8px;max-width:560px}
.v4-cchips .v4-chip{font-size:12.5px;padding:9px 12px}
.close .v4-csmall{margin:16px 0 0;font:400 13px/1.4 "Inter",system-ui,sans-serif;color:rgba(35,27,16,.66)}

/* ── phones and small tablets ── */
@media (max-width:991px){
  .v4-faq-in{grid-template-columns:1fr;gap:32px}
  .v4-faq .v4-head{position:static}
  .v4-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v4-fig:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:640px){
  .v4s{padding:96px 24px 104px}
  .v4-band{padding:44px 24px 56px}
  .v4-gate{padding:96px 24px 104px}
  .v4-h2{font-size:34px;line-height:1.1}
  .v4-head{margin-bottom:44px}
  .v4-band .v4-logos{gap:36px;animation-duration:75s}
  .v4-logos li{height:52px}
  .v4-logos img{height:46px;max-width:130px}
  .v4-sh-grid{--gut:24px;grid-auto-columns:76%;gap:16px}
  .v4-sh-nav{display:none}
  .v4-jobs-list{gap:64px}
  .v4-job-text h3{font-size:26px}
  .v4-job .v4-panel{padding:18px 12px}
  .v4-pc{font-size:17px;max-width:94%}
  .v4-oc{padding:14px}
  .v4-oc-scope{display:none}
  .v4-thumbs{gap:8px}
  .v4-ba{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v4-gate .v4-h2{font-size:30px}
  .v4-fig b{font-size:44px}
  .cases.v4-cases{padding-top:104px!important}
  .v4-cases .cases-head .v4-h2{font-size:34px;line-height:1.1}
  .mcard .mbrand.v4-logo{height:38px;padding:0 11px}
  .v4-fig{padding:22px 14px 8px 0}
  .v4-fig+.v4-fig{padding-left:14px}
  .v4-backed{flex-direction:column;align-items:flex-start;gap:20px}
  .v4-inv{gap:32px}
  .v4-qa summary h3{font-size:19px}
  .v4-qa details>div{padding-right:0}
  .v4-cfield{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .v4-job-text,.v4-job .v4-panel,.v4-oc-out,.v4-oc-act,.v4-steps li{transition:none!important}
  .v4-steps li,.v4-steps li > i::after,.v4-oc .st-run{animation:none!important}
  .v4-cursor{display:none}
  .v4-sc,.v4-sc .v4-scr,.v4-push-drop{transition:none}
}

/* ── the page flows: blocks below the fold rise in once, gently ── */
html.v4-reveal .v4-rvx{opacity:0;transform:translateY(20px);transition:opacity .9s var(--v4-ease,cubic-bezier(.16,1,.3,1)),transform 1.1s var(--v4-ease,cubic-bezier(.16,1,.3,1))}
html.v4-reveal .v4-rvx.is-in{opacity:1;transform:none}

/* ════════ v5 (1 Oct): the team's Figma "Home v2" — copy, order and placement. Everything below overrides v4. ════════ */

/* ── statement: the three app-vs-web figures under the copy (moved up from the retired "Why an app") ── */
.statement .v5-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:64px;padding-top:30px;border-top:1px solid rgba(35,27,16,.12)}
.v5-fig{display:grid;gap:10px;align-content:start;padding:0 24px 0 0}
.v5-fig+.v5-fig{padding-left:28px;border-left:1px solid rgba(35,27,16,.12)}
.v5-fig b{font:400 58px/1 'Doppio',system-ui,sans-serif;letter-spacing:-.025em;color:#FC401F}
.v5-fig span{font:400 16px/1.45 "Inter",system-ui,sans-serif;color:rgba(35,27,16,.74);max-width:17ch}
@media (max-width:640px){ .statement .v5-figs{margin-top:44px;padding-top:22px} .v5-fig b{font-size:38px} .v5-fig{padding-right:10px} .v5-fig+.v5-fig{padding-left:12px} .v5-fig span{font-size:14px} }

/* ── race "Quick" (r2: v4's layout, title on top). At the end the clock gives way to the two results, centred ── */
.v4-race .v4-rc-end{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;width:100%;max-width:800px;justify-self:center;margin-inline:auto}
/* the human lane is grey and lifeless (team note); Milo's live block is the one bold thing on the clock */
.v4-lane-a .v4-seg,.v4-lane-a .v4-seg.o-you{background:#E3E1DD!important;box-shadow:none!important}
.v4-lane-a .v4-seg b{color:rgba(35,27,16,.46)!important;font-weight:500}
.v4-lane-a .v4-seg i{color:rgba(35,27,16,.36)!important}
.v4-lane-a .v4-live{background:repeating-linear-gradient(135deg,rgba(35,27,16,.06) 0 6px,rgba(35,27,16,.02) 6px 12px);box-shadow:inset 2px 0 0 rgba(35,27,16,.28)}
.v4-lane-a .v4-lane-eb,.v4-lane-a .v4-lane-q{color:rgba(35,27,16,.5)!important}
.v4-lane-a .v4-lane-av{filter:grayscale(1);opacity:.7}
.v4-rc-key .k-team::before{background:#E3E1DD}
.v4-lane-b .v4-live-milo{background:#0033A0;box-shadow:0 6px 18px rgba(0,51,160,.32)}
.v4-lane-b .v4-live-milo b{color:#fff}
.v4-lane-b .v4-live-milo i{color:rgba(255,255,255,.8)}
.v4-lane-b .v4-live-milo b::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28);vertical-align:1px}


/* ── reviews and "Loved by shoppers": the score is the H2, with a line under it ── */
.v4rv-score-h{display:grid;gap:12px;font:inherit;margin:0}
.v4rv-score-h .v4rv-score-l{display:block;font:500 17px/1.4 "Inter",system-ui,sans-serif;color:var(--ink);max-width:260px}
.v4rv-score-t{font:500 26px/1.15 'Doppio',system-ui,sans-serif;letter-spacing:-.015em;color:var(--ink2)}
.v4rv-score{gap:20px}

/* Milo's screen on the top review card: the words he picked, then the brand, then the words again */
.v4rv-mlogo{position:absolute;inset:0;z-index:1;display:grid;place-items:center;opacity:0;transition:opacity .45s var(--ease)}
.v4rv-mlogo img{display:block;max-width:74%;max-height:48%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.v4rv-msay{transition:opacity .45s var(--ease)}
.v4rv-mscr.is-logo .v4rv-msay{opacity:0}
.v4rv-mscr.is-logo .v4rv-mlogo{opacity:1}


/* ── "Loved by shoppers" (r2): v4's brand-stories fold, with the rating as its title and a line under it ── */
.cases.v4-cases.v5-shop{padding-top:152px!important}
.v4-cases .cases-head .v5-cases-h{max-width:820px}
.v5-cases-h .v4rv-stars{display:inline-flex;margin:0 .14em 0 .1em;vertical-align:-.02em;color:#231B10}
.v5-cases-h .v4rv-stars svg{font-size:inherit;width:.62em;height:.62em}
.v4-cases .cases-head .v5-cases-lede{margin:0;font:400 18px/1.55 "Inter",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:rgba(35,27,16,.74)}
@media (max-width:640px){ .cases.v4-cases.v5-shop{padding-top:96px!important} .v4-cases .cases-head .v5-cases-lede{font-size:16px} }

/* ── the close: Milo stands on the crest of the knoll in the plate. The plate is cover-sized into a box 108% of the
      section, positioned 30% 44%; the crest sits at x .18 / y .423 of the image (2200x1244, aspect 1.7685), which works
      out to left 15.44% and top 43.52% - 1.04vw of the section while the section is wider than the image's aspect, and
      to left 28.4% - 0.229 x height when it is narrower. His feet sink 8px into the flowers. Phones keep milo-v2's spot. ── */
@media (min-width:981px){
  .close.v4-close .close-milo{--mw:clamp(78px,7.4vw,104px);left:calc(15.44% - var(--mw) / 2);right:auto;bottom:auto;
    top:calc(43.52% - 1.04vw - var(--mw) * .82 + 8px)}
}
@media (min-width:981px) and (max-width:1273px){
  .close.v4-close .close-milo{left:calc(28.4% - 165px - var(--mw) / 2);top:calc(41.7% - var(--mw) * .82 + 8px)}
}

/* ── security "Secure. Always.": one screen (team note: too much blank space) ── */
.v4sec-root.v4s{padding-top:104px;padding-bottom:104px}
.v4sec-root .v4sec-head{margin-bottom:36px}
.v4sec-root .v4sec-plate{aspect-ratio:auto;height:clamp(220px,30vh,290px)}
.v4sec-root .v4sec-tiles{margin-top:-132px}
.v4sec-root .v4sec-tile{min-height:224px;padding:20px 22px 20px}
.v4sec-root .v4sec-seal{width:118px;height:118px}
.v4sec-root .v4sec-ring::after{inset:22px}
.v4sec-root .v4sec-controls{margin-top:18px}
@media (max-width:1023px){ .v4sec-root .v4sec-plate{height:auto;aspect-ratio:16/9} .v4sec-root .v4sec-tiles{margin-top:-80px} .v4sec-root .v4sec-tile{min-height:0} }
@media (max-width:560px){ .v4sec-root .v4sec-plate{aspect-ratio:4/3} .v4sec-root .v4sec-tiles{margin-top:-60px} }

/* ── v5 · Milo's last stop: the ground box over the footer's flower band (19vw; 30vw on phones) + 80px above it ── */
footer.abf .v5-foot-ground{position:absolute;left:0;right:0;bottom:0;height:calc(19vw + 80px);z-index:0;pointer-events:none;visibility:hidden}
@media (max-width:640px){ footer.abf .v5-foot-ground{height:calc(30vw + 80px)} }
.mrail{transition:opacity .25s ease}
html.v5-foot-wait .mrail,html.v5-foot-wait .mtrail{opacity:0!important;pointer-events:none!important}

/* the brand-story cards link to their case studies (the current home page linked five of them) */
.v5-shop a.mcard{color:inherit;text-decoration:none}
.v5-shop a.mcard:focus-visible{outline:2px solid #0033A0;outline-offset:3px}


/* r6 (4 Oct review): the headline, subtitle, composer, chips and trust line are there at first paint; only Milo's slot
   waits for his rise (milo.js keeps .intro on #fold1 for ~2.3s and then staggers .cstage>* in, which left a
   visitor ~4s of bare meadow). */
.fold.ctr.intro .cstage>*:not(.faceslot){opacity:1!important}
.fold.ctr.arrive .cstage>*:not(.faceslot){animation:none!important}

/* ══ motion edition · round 3 (5 Oct 2026) — round 2 + round-1 set-pieces (fixed) + living meadow + Editions transitions.
   (round 2 header follows) ══
/* ══ motion edition · round 2 (4 Oct 2026) ═══════════════════════════════════════════════════════════════
   Motion is gated on html.m-on (GSAP present, no reduced-motion preference). The SwimOutlet section and the nav
   states also work without it: static app + listing screens, and the pill/phone CTA (layout, not motion). */

/* the site sets html{scroll-behavior:smooth}; with it every ScrollTrigger start is mis-measured by the current scroll
   after a resize or a late refresh (the close pin landed on the jobs section). Found by the 4 Oct review. */
html.m-on{scroll-behavior:auto!important}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}

/* split text */
.m-w{display:inline-block;white-space:nowrap}
.m-mask{overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin:0 -.04em -.12em}
.m-wi,.m-c{display:inline-block}

/* petals and pollen on fast scrolls */
.m-field{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:35}

/* Milo steps out only while the closing window is still opening */
html.m-closing .mrail{opacity:0!important;transition:opacity .35s ease!important}

/* ── nav. Desktop: past the hero the bar's own glass pane draws in to a floating pill around its 1200px container (the
   contents never move). Phone: "Sign in" makes room for a compact install button between the two composers. ── */
@media (min-width:992px){
  html .navbar_component::before{transition:opacity .28s ease,left .55s cubic-bezier(.16,1,.3,1),right .55s cubic-bezier(.16,1,.3,1),top .55s cubic-bezier(.16,1,.3,1),bottom .55s cubic-bezier(.16,1,.3,1),border-radius .55s cubic-bezier(.16,1,.3,1),box-shadow .55s ease}
  html.m-pill .navbar_component::before{opacity:1;left:max(48px,calc(50% - 616px));right:max(48px,calc(50% - 616px));top:6px;bottom:6px;border-radius:16px;
    -webkit-mask-image:none;mask-image:none;background-color:rgba(250,248,245,.8);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),inset 0 -1px 0 rgba(35,27,16,.05),0 1px 2px rgba(35,27,16,.05),0 14px 34px rgba(35,27,16,.10)}
  html .navbar_component{transition:transform .5s cubic-bezier(.16,1,.3,1)}
  html.m-pill .navbar_component{transform:translateY(4px)}
  html.m-pill.m-closing .navbar_component{transform:translateY(-120%)}
  html.m-pill.m-closing .navbar_component:focus-within,html.m-pill.m-closing .navbar_component:hover{transform:translateY(4px)}
}
@media (max-width:640px){
  html.m-cta .navbar_component .navbar_left-wrapper .button.is-navbar{display:inline-flex!important;align-items:center;height:40px;min-height:0;padding:0 14px!important;border-radius:10px!important;font-size:14px}
  html.m-cta .navbar_component .navbar_left-wrapper .button.is-navbar .button_content{font-size:14px;line-height:1}
  html.m-cta .navbar_component .v4-login{display:none!important}
}
@media (prefers-reduced-motion:reduce){html .navbar_component,html .navbar_component::before{transition:none!important}}

/* ── the left index, ≥1500px only ── */
.m-idx{position:fixed;left:26px;top:50%;z-index:30;display:flex;flex-direction:column;gap:11px;transform:translate(-14px,-50%);opacity:0;pointer-events:none;transition:opacity .45s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.m-idx.is-on{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.m-idx a{display:grid;grid-template-columns:18px auto;align-items:center;column-gap:8px;row-gap:6px;font:500 12px/1 'Inter',system-ui,sans-serif;letter-spacing:.01em;color:rgba(28,28,26,.42);text-decoration:none;transition:color .3s}
.m-idx a:hover,.m-idx a.is-cur{color:#1C1C1A}
.m-idx-n{font-size:10px;font-variant-numeric:tabular-nums;opacity:.75}
.m-idx i{grid-column:2;display:block;width:36px;height:2px;border-radius:2px;background:rgba(28,28,26,.1);overflow:hidden}
.m-idx b{display:block;height:100%;background:#0033A0;transform:scaleX(0);transform-origin:0 50%}
.m-idx a.is-past b{transform:scaleX(1);background:rgba(28,28,26,.3)}
.m-idx a:focus-visible{outline:2px solid #0033A0;outline-offset:4px;border-radius:4px}

/* ── six jobs: panels turn like pages ── */
html.m-on.v4-jobs-pin .v4-job .v4-panel{transform:perspective(1600px) rotateY(-30deg) translate3d(80px,0,-120px);transform-origin:0 50%;transition:opacity .5s var(--v4-ease),transform 1s cubic-bezier(.2,.75,.15,1)}
html.m-on.v4-jobs-pin .v4-job:has(~ .v4-job.is-on) .v4-panel{transform:perspective(1600px) rotateY(30deg) translate3d(-80px,0,-120px);transform-origin:100% 50%}
html.m-on.v4-jobs-pin .v4-job.is-on .v4-panel{transform:none}

/* ── TV power-on ── */
.m-crt{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;border-radius:inherit;background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.9),rgba(255,255,255,0) 62%)}

/* ── close: the window sits on the page ground until it opens ── */
html.m-on .close.v4-close{background:#FAF8F5}

/* ── SwimOutlet: from store to app ───────────────────────────────────────────────────────────────────────── */
.m-swim{--ph:min(560px,calc(100vh - 330px));--pw:calc(var(--ph) * 9 / 19.5);padding-bottom:120px}
.m-swim-head{text-align:center;justify-items:center;margin-bottom:40px!important}
.m-swim-head .v4-lede{max-width:560px}
.m-swim-scene{position:relative;height:var(--ph);display:flex;justify-content:center;align-items:center}
.m-swim-phone{position:relative;z-index:3;flex:none;width:var(--pw);height:var(--ph);border-radius:calc(var(--ph) * .074);background:#121212;
  box-shadow:inset 0 0 0 1.5px #3a3a3a,inset 0 0 0 3px #0c0c0c,0 2px 3px rgba(35,27,16,.12),0 30px 64px rgba(35,27,16,.20)}
.m-swim-screen{position:absolute;inset:calc(var(--ph) * .016);border-radius:calc(var(--ph) * .06);overflow:hidden;background:#fff;isolation:isolate}
.m-swim-screen>img,.m-swim-gl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.m-swim-a{opacity:0}
.m-swim-gl{opacity:0}
.m-swim.is-gl .m-swim-gl{opacity:1}
.m-swim-island{position:absolute;z-index:5;top:calc(var(--ph) * .03);left:50%;width:31%;height:calc(var(--ph) * .045);transform:translateX(-50%);border-radius:999px;background:#000}
.m-swim-sb{position:absolute;z-index:4;left:0;right:0;top:0;height:6.8%;display:flex;align-items:center;justify-content:space-between;padding:0 9% 0 11%;
  font:600 calc(var(--ph) * .024)/1 'Inter',system-ui,sans-serif;letter-spacing:-.01em;color:#1C1C1A;transition:color .3s}
.m-swim-sb i{width:calc(var(--ph) * .05);height:calc(var(--ph) * .018);border-radius:3px;border:1.5px solid currentColor;opacity:.9}
.m-swim-url{position:absolute;z-index:4;left:50%;bottom:3.4%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:0 14px;height:5.2%;border-radius:999px;
  background:rgba(250,250,250,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 6px rgba(0,0,0,.14);
  font:500 calc(var(--ph) * .022)/1 'Inter',system-ui,sans-serif;color:#1C1C1A;white-space:nowrap;opacity:0}
.m-swim-url svg{width:.85em;height:.85em}
.m-swim-lab{position:absolute;top:50%;z-index:1;transform:translateY(-50%);display:grid;gap:6px;font:500 15px/1.2 'Inter',system-ui,sans-serif;color:rgba(28,28,26,.4);transition:color .35s}
.m-swim-lab i{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.m-swim-lab.is-on{color:#1C1C1A}
.m-swim-lab.is-on i{color:#0033A0}
.m-swim-lab-a{right:calc(50% + var(--pw) * .5 + var(--ph) * .62);text-align:right}
.m-swim-lab-b{left:calc(50% + var(--pw) * .5 + var(--ph) * .62)}
.m-swim-card{--t:1;position:absolute;z-index:1;left:50%;top:50%;width:calc(var(--ph) * .3);aspect-ratio:420/909;margin:0;border-radius:14px;overflow:hidden;background:#2F8DE0;
  box-shadow:0 18px 40px rgba(35,27,16,.16);opacity:var(--t);
  transform:translate(-50%,-50%) translate(calc(var(--x) * var(--t)),calc(var(--y) * var(--t))) rotate(calc(var(--r) * var(--t))) scale(calc(.82 + .18 * var(--t)))}
.m-swim-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 2px 3px 5px rgba(28,28,26,.10);pointer-events:none}
.m-swim-card img{width:100%;height:100%;object-fit:cover;display:block}
.m-swim-card[data-k="0"]{--x:calc(var(--ph) * -.56);--y:calc(var(--ph) * .05);--r:-8deg}
.m-swim-card[data-k="1"]{--x:calc(var(--ph) * -.33);--y:calc(var(--ph) * -.03);--r:-3.5deg;z-index:2}
.m-swim-card[data-k="2"]{--x:calc(var(--ph) * .33);--y:calc(var(--ph) * -.03);--r:3.5deg;z-index:2}
.m-swim-card[data-k="3"]{--x:calc(var(--ph) * .56);--y:calc(var(--ph) * .05);--r:8deg}
.m-swim-note{margin:22px auto 0;max-width:620px;text-align:center;font:400 12px/1.5 'Inter',system-ui,sans-serif;color:rgba(28,28,26,.5)}
/* motion: a sticky stage with a runway; the phone starts as the web store */
html.m-swim-live .m-swim{padding-top:0;padding-bottom:0}
html.m-swim-live .m-swim-run{height:290vh}
html.m-swim-live .m-swim-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:76px 40px 20px;overflow:hidden}
html.m-swim-live .m-swim-a{opacity:1}
html.m-swim-live .m-swim-b{opacity:0}
html.m-swim-live .m-swim.is-gl .m-swim-b,html.m-swim-live .m-swim.is-gl .m-swim-a{opacity:0}
html.m-swim-live .m-swim-url{opacity:1}
html.m-swim-live .m-swim-sb{color:#fff}
html.m-swim-live .m-swim-phone.is-app .m-swim-sb{color:#1C1C1A}
html.m-swim-live .m-swim-card{--t:0}
@media (max-width:1180px){.m-swim-lab{display:none}}
@media (max-width:640px){
  .m-swim{--ph:min(470px,calc(100vh - 360px))}
  .m-swim-card[data-k="0"],.m-swim-card[data-k="3"]{display:none}
  .m-swim-card[data-k="1"]{--x:calc(var(--ph) * -.3)}
  .m-swim-card[data-k="2"]{--x:calc(var(--ph) * .3)}
  html.m-swim-live .m-swim-run{height:230vh}
  html.m-swim-live .m-swim-stage{padding:72px 20px 16px}
  .m-swim-head{margin-bottom:24px!important}
  .m-swim-note{margin-top:14px;font-size:11px}
}

/* ══ round 3 additions ══ */
/* chapter openers — Build. / Launch. / Grow. A giant word cut out of the meadow; the camera flies into its
   full stop until the photo fills the screen, then the next page tears up over it (Shopify Editions' paper). */
.m-chap{display:none}
html.m-on .m-chap{display:block;position:relative;height:235vh;background:#FAF8F5}
html.m-on .m-chap-in{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate}
.m-chap-ph{position:absolute;inset:0;background:#CFE0EE var(--ph) center/cover no-repeat;transform:scale(1.12);transform-origin:50% 62%}
.m-chap-ko{position:absolute;inset:0;background:#FAF8F5;mix-blend-mode:screen;display:flex;align-items:center;justify-content:center}
.m-chap-w{margin:0;font-family:'Doppio',system-ui,sans-serif;font-weight:500;line-height:1;letter-spacing:-.045em;color:#000;white-space:nowrap;font-size:30vw;transform-origin:50% 50%}
.m-chap-w .m-c{display:inline-block;transform-origin:50% 100%}
.m-bl{display:inline-block;width:0;height:0;vertical-align:baseline}
.m-chap-tear{position:absolute;left:0;right:0;bottom:0;height:52vh;z-index:3;pointer-events:none;filter:drop-shadow(0 -8px 16px rgba(46,40,26,.13))}
.m-chap-tear::before,.m-chap-tear::after{content:"";position:absolute;inset:0}
.m-chap-tear::before{background:#FFFFFF;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 72' preserveAspectRatio='none'%3E%3Cpath d='M0 28.9 L4.2 54.6 L14.3 17.4 L22.2 16.2 L30.7 28.6 L35.1 22.1 L42.2 42.7 L51.3 26.5 L55.2 23.7 L63.9 30.7 L68.7 23.4 L73.4 41.6 L77.0 26.4 L80.3 27.7 L84.3 32.9 L91.9 41.9 L95.1 17.5 L98.4 17.5 L108.7 27.6 L116.7 17.8 L121.2 33.3 L124.8 31.7 L129.1 23.0 L139.9 18.6 L150.4 22.1 L153.9 26.0 L161.5 44.9 L171.4 32.5 L177.6 44.6 L180.9 39.0 L187.4 21.4 L193.0 17.7 L197.0 64.0 L206.3 29.9 L211.4 37.1 L216.3 43.9 L222.4 40.8 L230.6 20.1 L235.8 16.5 L240.3 43.4 L248.1 15.7 L254.2 33.3 L260.1 19.2 L264.3 17.6 L272.8 17.0 L281.4 37.9 L291.4 20.1 L300.5 41.4 L304.4 16.5 L308.9 60.0 L313.7 15.4 L320.4 31.8 L324.9 29.5 L332.2 64.0 L342.1 31.3 L349.4 62.2 L356.8 24.0 L365.5 18.1 L372.1 29.7 L375.7 33.1 L385.6 21.9 L394.3 33.7 L397.8 32.9 L406.1 26.7 L414.0 27.4 L420.7 57.0 L426.5 64.0 L434.2 44.3 L443.7 18.2 L448.7 38.4 L453.5 18.3 L463.9 44.3 L472.7 29.0 L478.7 34.0 L483.9 30.5 L490.4 39.0 L499.7 16.7 L509.4 33.2 L513.0 23.3 L522.3 44.3 L532.4 42.9 L542.6 49.3 L547.7 33.1 L553.5 40.1 L558.3 23.3 L566.1 32.1 L570.7 27.1 L575.2 31.3 L583.8 34.8 L591.8 25.1 L599.6 37.8 L608.4 21.3 L614.1 15.6 L620.9 41.0 L630.5 53.7 L635.8 22.5 L646.0 16.3 L650.5 17.9 L661.3 34.5 L671.3 30.2 L679.7 25.8 L685.3 26.6 L693.2 41.1 L696.4 48.1 L706.2 35.3 L715.2 23.2 L721.8 35.4 L727.5 37.4 L735.3 31.4 L738.7 20.6 L747.0 17.9 L751.7 31.3 L756.6 21.1 L763.0 40.4 L773.3 36.5 L776.9 39.2 L783.7 34.0 L791.1 42.5 L794.9 25.6 L804.0 44.1 L811.2 43.0 L819.5 44.2 L823.1 40.6 L827.8 40.0 L831.9 33.2 L841.1 28.6 L844.6 20.2 L852.1 21.0 L859.3 32.4 L868.5 42.7 L874.6 43.8 L880.0 29.5 L889.6 64.0 L896.8 22.6 L907.3 25.3 L910.9 30.9 L920.6 33.1 L924.7 24.3 L929.2 34.1 L935.2 34.2 L945.4 56.0 L950.2 45.2 L958.8 25.7 L967.4 17.3 L976.0 60.0 L983.0 40.4 L991.3 41.9 L998.4 64.0 L1004.0 28.7 L1013.2 31.0 L1017.2 41.4 L1025.6 21.7 L1032.2 17.0 L1038.5 43.6 L1046.6 39.0 L1053.1 15.6 L1059.2 43.3 L1069.7 44.4 L1073.1 20.1 L1080.7 21.0 L1086.8 23.2 L1091.4 41.5 L1099.6 19.3 L1109.6 20.9 L1117.8 29.2 L1125.9 24.4 L1135.0 28.9 L1143.0 38.7 L1152.2 49.2 L1159.9 31.0 L1168.0 35.9 L1178.4 36.1 L1186.9 17.4 L1195.5 37.9 L1198.7 41.2 L1205.2 30.5 L1211.2 38.2 L1221.9 35.9 L1228.8 41.4 L1237.3 42.3 L1242.4 38.8 L1251.8 17.1 L1258.4 39.4 L1261.9 21.3 L1271.8 58.0 L1281.7 23.6 L1287.0 16.6 L1291.4 17.6 L1295.3 37.8 L1300.4 26.2 L1309.0 44.2 L1315.9 31.1 L1324.6 23.1 L1333.1 22.6 L1341.9 38.4 L1346.0 30.0 L1355.4 26.6 L1364.8 19.0 L1374.2 25.7 L1378.0 17.5 L1384.7 26.0 L1391.3 41.8 L1400.0 28.9 L1400 72 L0 72 Z'/%3E%3C/svg%3E") 0 0/1400px 72px repeat-x,linear-gradient(#000,#000) 0 66px/100% calc(100% - 66px) no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 72' preserveAspectRatio='none'%3E%3Cpath d='M0 28.9 L4.2 54.6 L14.3 17.4 L22.2 16.2 L30.7 28.6 L35.1 22.1 L42.2 42.7 L51.3 26.5 L55.2 23.7 L63.9 30.7 L68.7 23.4 L73.4 41.6 L77.0 26.4 L80.3 27.7 L84.3 32.9 L91.9 41.9 L95.1 17.5 L98.4 17.5 L108.7 27.6 L116.7 17.8 L121.2 33.3 L124.8 31.7 L129.1 23.0 L139.9 18.6 L150.4 22.1 L153.9 26.0 L161.5 44.9 L171.4 32.5 L177.6 44.6 L180.9 39.0 L187.4 21.4 L193.0 17.7 L197.0 64.0 L206.3 29.9 L211.4 37.1 L216.3 43.9 L222.4 40.8 L230.6 20.1 L235.8 16.5 L240.3 43.4 L248.1 15.7 L254.2 33.3 L260.1 19.2 L264.3 17.6 L272.8 17.0 L281.4 37.9 L291.4 20.1 L300.5 41.4 L304.4 16.5 L308.9 60.0 L313.7 15.4 L320.4 31.8 L324.9 29.5 L332.2 64.0 L342.1 31.3 L349.4 62.2 L356.8 24.0 L365.5 18.1 L372.1 29.7 L375.7 33.1 L385.6 21.9 L394.3 33.7 L397.8 32.9 L406.1 26.7 L414.0 27.4 L420.7 57.0 L426.5 64.0 L434.2 44.3 L443.7 18.2 L448.7 38.4 L453.5 18.3 L463.9 44.3 L472.7 29.0 L478.7 34.0 L483.9 30.5 L490.4 39.0 L499.7 16.7 L509.4 33.2 L513.0 23.3 L522.3 44.3 L532.4 42.9 L542.6 49.3 L547.7 33.1 L553.5 40.1 L558.3 23.3 L566.1 32.1 L570.7 27.1 L575.2 31.3 L583.8 34.8 L591.8 25.1 L599.6 37.8 L608.4 21.3 L614.1 15.6 L620.9 41.0 L630.5 53.7 L635.8 22.5 L646.0 16.3 L650.5 17.9 L661.3 34.5 L671.3 30.2 L679.7 25.8 L685.3 26.6 L693.2 41.1 L696.4 48.1 L706.2 35.3 L715.2 23.2 L721.8 35.4 L727.5 37.4 L735.3 31.4 L738.7 20.6 L747.0 17.9 L751.7 31.3 L756.6 21.1 L763.0 40.4 L773.3 36.5 L776.9 39.2 L783.7 34.0 L791.1 42.5 L794.9 25.6 L804.0 44.1 L811.2 43.0 L819.5 44.2 L823.1 40.6 L827.8 40.0 L831.9 33.2 L841.1 28.6 L844.6 20.2 L852.1 21.0 L859.3 32.4 L868.5 42.7 L874.6 43.8 L880.0 29.5 L889.6 64.0 L896.8 22.6 L907.3 25.3 L910.9 30.9 L920.6 33.1 L924.7 24.3 L929.2 34.1 L935.2 34.2 L945.4 56.0 L950.2 45.2 L958.8 25.7 L967.4 17.3 L976.0 60.0 L983.0 40.4 L991.3 41.9 L998.4 64.0 L1004.0 28.7 L1013.2 31.0 L1017.2 41.4 L1025.6 21.7 L1032.2 17.0 L1038.5 43.6 L1046.6 39.0 L1053.1 15.6 L1059.2 43.3 L1069.7 44.4 L1073.1 20.1 L1080.7 21.0 L1086.8 23.2 L1091.4 41.5 L1099.6 19.3 L1109.6 20.9 L1117.8 29.2 L1125.9 24.4 L1135.0 28.9 L1143.0 38.7 L1152.2 49.2 L1159.9 31.0 L1168.0 35.9 L1178.4 36.1 L1186.9 17.4 L1195.5 37.9 L1198.7 41.2 L1205.2 30.5 L1211.2 38.2 L1221.9 35.9 L1228.8 41.4 L1237.3 42.3 L1242.4 38.8 L1251.8 17.1 L1258.4 39.4 L1261.9 21.3 L1271.8 58.0 L1281.7 23.6 L1287.0 16.6 L1291.4 17.6 L1295.3 37.8 L1300.4 26.2 L1309.0 44.2 L1315.9 31.1 L1324.6 23.1 L1333.1 22.6 L1341.9 38.4 L1346.0 30.0 L1355.4 26.6 L1364.8 19.0 L1374.2 25.7 L1378.0 17.5 L1384.7 26.0 L1391.3 41.8 L1400.0 28.9 L1400 72 L0 72 Z'/%3E%3C/svg%3E") 0 0/1400px 72px repeat-x,linear-gradient(#000,#000) 0 66px/100% calc(100% - 66px) no-repeat}
.m-chap-tear::after{top:5px;background:#FAF8F5;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 72' preserveAspectRatio='none'%3E%3Cpath d='M0 31.2 L10.3 40.7 L16.5 25.3 L25.4 31.1 L37.0 46.7 L50.8 28.9 L67.7 38.6 L81.9 26.7 L95.1 58.8 L106.8 43.7 L121.6 48.9 L137.6 36.6 L154.6 27.5 L162.8 50.1 L176.5 32.8 L187.0 34.1 L200.1 48.5 L217.8 47.3 L232.0 29.2 L250.2 48.5 L265.0 30.5 L278.0 57.9 L296.4 27.3 L307.3 28.9 L322.8 63.9 L328.8 43.7 L345.8 50.5 L364.4 48.6 L370.2 30.1 L383.7 55.1 L393.2 49.9 L403.6 37.0 L417.5 40.5 L431.1 49.5 L442.2 43.7 L451.6 50.4 L464.2 25.3 L477.2 25.5 L491.0 26.6 L502.5 42.7 L517.3 38.8 L531.6 50.0 L543.0 40.4 L553.2 33.1 L566.5 32.8 L582.1 25.7 L597.2 33.1 L613.2 31.2 L624.3 43.1 L634.0 33.7 L645.2 47.2 L655.0 41.9 L666.4 30.9 L678.8 30.0 L695.2 29.8 L711.3 41.7 L721.3 28.4 L737.1 32.1 L748.0 35.9 L765.6 58.0 L782.6 50.7 L800.5 49.1 L815.8 46.8 L828.0 32.5 L836.4 26.8 L845.6 64.0 L860.2 49.0 L877.5 61.3 L885.1 32.8 L897.5 35.8 L910.9 33.9 L927.7 37.4 L937.8 30.1 L953.9 29.5 L971.5 46.0 L977.0 41.3 L983.1 32.1 L995.4 36.0 L1011.1 22.2 L1018.1 26.8 L1034.8 27.2 L1044.4 33.2 L1058.3 40.3 L1066.2 33.5 L1079.0 43.6 L1085.4 29.6 L1098.8 45.3 L1114.8 41.2 L1125.1 37.9 L1136.0 43.0 L1144.7 38.9 L1151.0 36.0 L1168.0 49.3 L1185.3 45.6 L1196.8 28.2 L1211.0 48.1 L1225.2 44.1 L1231.9 38.1 L1247.5 22.2 L1264.6 54.7 L1271.6 46.9 L1288.0 49.8 L1304.0 25.9 L1316.1 43.6 L1331.4 54.1 L1344.2 46.5 L1352.0 31.5 L1367.4 35.2 L1378.0 34.1 L1384.5 38.0 L1400.0 31.2 L1400 72 L0 72 Z'/%3E%3C/svg%3E") 0 0/1400px 72px repeat-x,linear-gradient(#000,#000) 0 66px/100% calc(100% - 66px) no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 72' preserveAspectRatio='none'%3E%3Cpath d='M0 31.2 L10.3 40.7 L16.5 25.3 L25.4 31.1 L37.0 46.7 L50.8 28.9 L67.7 38.6 L81.9 26.7 L95.1 58.8 L106.8 43.7 L121.6 48.9 L137.6 36.6 L154.6 27.5 L162.8 50.1 L176.5 32.8 L187.0 34.1 L200.1 48.5 L217.8 47.3 L232.0 29.2 L250.2 48.5 L265.0 30.5 L278.0 57.9 L296.4 27.3 L307.3 28.9 L322.8 63.9 L328.8 43.7 L345.8 50.5 L364.4 48.6 L370.2 30.1 L383.7 55.1 L393.2 49.9 L403.6 37.0 L417.5 40.5 L431.1 49.5 L442.2 43.7 L451.6 50.4 L464.2 25.3 L477.2 25.5 L491.0 26.6 L502.5 42.7 L517.3 38.8 L531.6 50.0 L543.0 40.4 L553.2 33.1 L566.5 32.8 L582.1 25.7 L597.2 33.1 L613.2 31.2 L624.3 43.1 L634.0 33.7 L645.2 47.2 L655.0 41.9 L666.4 30.9 L678.8 30.0 L695.2 29.8 L711.3 41.7 L721.3 28.4 L737.1 32.1 L748.0 35.9 L765.6 58.0 L782.6 50.7 L800.5 49.1 L815.8 46.8 L828.0 32.5 L836.4 26.8 L845.6 64.0 L860.2 49.0 L877.5 61.3 L885.1 32.8 L897.5 35.8 L910.9 33.9 L927.7 37.4 L937.8 30.1 L953.9 29.5 L971.5 46.0 L977.0 41.3 L983.1 32.1 L995.4 36.0 L1011.1 22.2 L1018.1 26.8 L1034.8 27.2 L1044.4 33.2 L1058.3 40.3 L1066.2 33.5 L1079.0 43.6 L1085.4 29.6 L1098.8 45.3 L1114.8 41.2 L1125.1 37.9 L1136.0 43.0 L1144.7 38.9 L1151.0 36.0 L1168.0 49.3 L1185.3 45.6 L1196.8 28.2 L1211.0 48.1 L1225.2 44.1 L1231.9 38.1 L1247.5 22.2 L1264.6 54.7 L1271.6 46.9 L1288.0 49.8 L1304.0 25.9 L1316.1 43.6 L1331.4 54.1 L1344.2 46.5 L1352.0 31.5 L1367.4 35.2 L1378.0 34.1 L1384.5 38.0 L1400.0 31.2 L1400 72 L0 72 Z'/%3E%3C/svg%3E") 0 0/1400px 72px repeat-x,linear-gradient(#000,#000) 0 66px/100% calc(100% - 66px) no-repeat}
@media(max-width:640px){html.m-on .m-chap{height:195vh}.m-chap .m-chap-tear{height:40vh}}


/* the opener owns the screen: Milo and the pill nav step out */
html.m-chap-on .mrail{opacity:0!important;transition:opacity .35s ease!important}
@media (min-width:992px){html.m-pill.m-chap-on .navbar_component{transform:translateY(-120%)}}

/* security: the valley opens like a vault */
html.m-on .v4sec-root .v4-in{position:relative}
.m-vwrap{position:absolute;pointer-events:none;overflow:hidden;z-index:2}
.m-vring{position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(0,51,160,.6) 0 .8deg,transparent .8deg 6deg);box-shadow:inset 0 0 0 1.5px rgba(0,51,160,.45);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 10px));mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 10px))}


/* the living meadow: a canvas over each photo plate, the CSS photo underneath until its first frame */
.m-mead{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .45s ease}
.m-mead.is-on{opacity:1}
.m-mead-band{position:absolute;left:0;right:0;bottom:0;z-index:0;pointer-events:none;overflow:hidden}
footer.abf.m-mead-live::after{background-image:none!important}

/* people: the meadow burns in at the top and the close's paper tears up over it at the bottom */
.v4tv-field>.m-chap-tear{height:120px;z-index:2}
html.m-on .v4tv-field::after{opacity:0}

/* ══ round 4 (5 Oct): chapters lead INTO their sections; nothing flies; Editions' chapter list ══ */
html.m-on .m-chap{height:250vh}
@media(max-width:640px){html.m-on .m-chap{height:215vh}}
.m-chap-veil{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(180deg,rgba(250,248,245,.82) 0%,rgba(250,248,245,.6) 30%,rgba(250,248,245,0) 64%)}
.m-chap-head{position:absolute;z-index:3;left:50%;top:clamp(96px,17vh,170px);width:min(860px,calc(100% - 48px));transform:translateX(-50%);display:grid;justify-items:center;gap:16px;text-align:center;visibility:hidden}
.m-chap-eb{display:inline-flex;align-items:center;gap:10px;margin:0}
.m-chap-eb span{font-variant-numeric:normal;letter-spacing:.06em;opacity:.7}
.m-chap-h2{margin:0;font-family:'Doppio',system-ui,sans-serif;font-weight:500;font-size:clamp(40px,4.4vw,64px);line-height:1.06;letter-spacing:-.025em;color:#1C1C1A;text-wrap:balance}
.m-chap-lede{margin:0;max-width:600px;font:400 clamp(16px,1.35vw,19px)/1.5 'Inter',system-ui,sans-serif;color:rgba(28,28,26,.72)}
@media(max-width:640px){.m-chap-head{top:96px;gap:12px}.m-chap-h2{font-size:34px}}
/* the section's own head now lives on the scene: the sections start straight with their content */
html.m-on.m-chaps .m-swim-head,html.m-on.m-chaps .v4-race-head,html.m-on.m-chaps #v5-shoppers .cases-head{display:none!important}
html.m-on.m-chaps .m-swim{--ph:min(640px,calc(100vh - 170px))}
html.m-on.m-chaps .v4-race{padding-top:24px}
html.m-on.m-chaps #v5-shoppers{padding-top:56px!important}
/* Editions' chapter list */
.m-idx{gap:14px}
.m-idx a{grid-template-columns:26px auto;font:500 13px/1 'Inter',system-ui,sans-serif}
.m-idx-n{font:500 11px/1 'Doppio',Georgia,serif;letter-spacing:.04em;opacity:.8}
.m-idx a.is-cur .m-idx-t{font-weight:600}
/* the paper's drop shadow belongs to its torn TOP edge only: below the paper it drew a 2px line into the next section */
.m-chap-tear{clip-path:inset(-80px 0 0 0)}

/* ══ round 5 (5 Oct): Editions' chapter rhythm — opener → pinned beats → "Also in …" table. No side index. ══ */
/* SwimOutlet: three beats. Static: a row under the phone. Live: one at a time, beside the phone; the App Store screens
   fan out on the other side. */
.m-swim-beats{list-style:none;margin:44px auto 0;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:left}
.m-swim-beats li{display:grid;gap:10px;align-content:start}
.m-beat-n{font:500 12px/1 'Inter',system-ui,sans-serif;letter-spacing:.12em;color:#0033A0}
.m-swim-beats h3{margin:0;font-family:'Doppio',system-ui,sans-serif;font-weight:500;font-size:30px;line-height:1.08;letter-spacing:-.022em;color:#1C1C1A}
.m-swim-beats p{margin:0;font:400 16px/1.55 'Inter',system-ui,sans-serif;color:rgba(28,28,26,.7)}
.m-beat-a{margin-top:2px;font:500 15px/1.4 'Inter',system-ui,sans-serif;color:#0033A0!important;text-decoration:none!important}
.m-beat-a:hover{text-decoration:underline!important}
html.m-swim-live .m-swim-phone{z-index:6}
.m-swim-card[data-k="0"]{--x:calc(var(--ph) * .36);--y:calc(var(--ph) * -.02);--r:3deg;z-index:5}
.m-swim-card[data-k="1"]{--x:calc(var(--ph) * .53);--y:calc(var(--ph) * .02);--r:7deg;z-index:4}
.m-swim-card[data-k="2"]{--x:calc(var(--ph) * .69);--y:calc(var(--ph) * .06);--r:11deg;z-index:3}
.m-swim-card[data-k="3"]{--x:calc(var(--ph) * .84);--y:calc(var(--ph) * .11);--r:15deg;z-index:2}
@media (min-width:981px){
  html.m-swim-live .m-swim-beats{position:absolute;z-index:7;left:max(32px,calc(50% - var(--pw) * .5 - 400px));top:50%;width:330px;margin:0;transform:translateY(-50%);grid-template-columns:1fr;gap:0}
  html.m-swim-live .m-swim-beats li{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
  html.m-swim-live .m-swim-beats li.is-on{opacity:1;transform:none;pointer-events:auto}
  html.m-swim-live .m-swim-stage{position:sticky}
  html.m-swim-live .m-swim-scene{position:static}
}
@media (max-width:980px){
  html.m-on.m-chaps .m-swim{--ph:min(460px,calc(100vh - 330px))}
  html.m-swim-live .m-swim-beats{position:relative;max-width:440px;margin:18px auto 0;grid-template-columns:1fr;gap:0;text-align:center}
  html.m-swim-live .m-swim-beats li{grid-area:1/1;justify-items:center;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .6s cubic-bezier(.16,1,.3,1);pointer-events:none}
  html.m-swim-live .m-swim-beats li.is-on{opacity:1;transform:none;pointer-events:auto}
  .m-swim-beats h3{font-size:24px}.m-swim-beats p{font-size:15px}
  .m-swim-card[data-k="2"],.m-swim-card[data-k="3"]{display:none}
}
@media (max-width:640px){.m-swim-beats{grid-template-columns:1fr;gap:24px}}

/* "Also in …": Editions' updates table that closes each chapter */
.m-more{padding:16px 40px 128px}
.m-more .v4-in{max-width:1200px;margin:0 auto;border-top:1px solid rgba(28,28,26,.12);padding-top:30px}
.m-more-h{margin:0 0 6px;display:flex;align-items:center;gap:12px;font:500 13px/1 'Inter',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#0033A0}
.m-more-h span{font-family:'Doppio',Georgia,serif;letter-spacing:.04em;color:rgba(28,28,26,.42)}
.m-more-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:44px}
.m-more-grid li{display:grid;gap:6px;align-content:start;padding:22px 0 24px;border-bottom:1px solid rgba(28,28,26,.08)}
.m-more-grid b{font:600 15.5px/1.35 'Inter',system-ui,sans-serif;color:#1C1C1A}
.m-more-grid span{font:400 14.5px/1.55 'Inter',system-ui,sans-serif;color:rgba(28,28,26,.62)}
@media(max-width:980px){.m-more-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.m-more{padding:8px 24px 88px}.m-more-grid{grid-template-columns:1fr}}

/* Grow: one brand result at a time on a full-width recessed plate, the numbers on white glass */
.m-grow-run{height:260vh}
.m-grow-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;padding:84px 40px 32px}
.m-grow-plate{position:relative;width:min(1200px,100%);height:min(660px,calc(100vh - 140px));border-radius:16px;overflow:hidden;background:#E9E4DA}
.m-grow-plate::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 2px 3px 5px rgba(28,28,26,.10);pointer-events:none}
.m-grow-beat{position:absolute;inset:0;display:block;color:inherit!important;text-decoration:none!important;opacity:0;transition:opacity .7s ease;pointer-events:none}
.m-grow-beat.is-on{opacity:1;pointer-events:auto}
.m-grow-shot{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.07);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.m-grow-beat.is-on .m-grow-shot{transform:scale(1)}
.m-grow-card{position:absolute;left:28px;bottom:28px;z-index:2;display:grid;gap:8px;justify-items:start;min-width:300px;max-width:400px;padding:22px 28px 24px;border-radius:16px;
  background:rgba(250,248,245,.8);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 14px 34px rgba(35,27,16,.12);opacity:0;transform:translateY(18px);transition:opacity .5s ease .12s,transform .8s cubic-bezier(.16,1,.3,1) .12s}
.m-grow-beat.is-on .m-grow-card{opacity:1;transform:none}
.m-grow-logo img{display:block;height:26px;width:auto;max-width:150px;object-fit:contain;filter:brightness(0);opacity:.85}
.m-grow-num{margin-top:6px;font-family:'Doppio',system-ui,sans-serif;font-weight:500;font-size:clamp(64px,7vw,108px);line-height:.92;letter-spacing:-.045em;color:#1C1C1A}
.m-grow-lab{font:500 17px/1.35 'Inter',system-ui,sans-serif;color:rgba(28,28,26,.78)}
.m-grow-go{margin-top:6px;font:500 14px/1 'Inter',system-ui,sans-serif;color:#0033A0}
.m-grow-prog{position:absolute;z-index:4;top:24px;right:24px;display:flex;gap:6px;margin:0}
.m-grow-prog i{display:block;width:40px;height:3px;border-radius:3px;background:rgba(255,255,255,.5);overflow:hidden}
.m-grow-prog b{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.m-grow-more{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;max-width:1200px;margin:8px auto 0;padding:0 40px}
#v5-shoppers.m-grow-on .mrow{display:none}
@media(max-width:640px){
  .m-grow-run{height:230vh}.m-grow-stage{padding:72px 16px 20px}.m-grow-plate{height:calc(100vh - 116px)}
  .m-grow-card{left:12px;right:12px;bottom:12px;min-width:0;max-width:none;padding:18px 20px}
  .m-grow-more{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:0 16px;scrollbar-width:none}
}
/* the results section clipped overflow for its marquee, and overflow:hidden makes a scroll container that stops the
   stage sticking. clip still clips but is not a scroll container. */
#v5-shoppers.m-grow-on{overflow:clip!important}
.m-grow-brand{font:600 12.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(28,28,26,.7)}
.m-grow-more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.m-grow-more .mcard{width:auto!important}
@media(max-width:640px){.m-grow-more{display:flex}.m-grow-more .mcard{flex:none;width:210px!important}}

/* ══ round 6: one ground. The chapter word is cut out of a canvas filled with the page cream (no blend), the chapter
   titles stand alone, SwimOutlet's beats are a few words each, and the "Also in" tables are gone (no new sections). ══ */
.m-chap-cv{position:absolute;inset:0;z-index:1;display:block;pointer-events:none}
.m-chap-ko{display:none}
.m-swim-beats li{gap:8px}
.m-swim-beats h3{font-size:34px}
.m-swim-beats p{font-size:15px}
@media(max-width:980px){.m-swim-beats h3{font-size:26px}}

/* ══ brand canon (5 Oct, ~/appbrew-brand tokens + R21) ══
   Cards and panels use the ONE glass (--ab-glass-base); the pill nav uses the sanctioned "nav veil" (R21: the Navbar's
   own scroll pane, cream .72 / blur 18 / saturate 180%), never a third value. App Store screen cards take radius 12. */
.m-grow-card{background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.92));-webkit-backdrop-filter:blur(30px) saturate(1.35);backdrop-filter:blur(30px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(35,27,16,.06),0 14px 40px rgba(35,27,16,.12)}
@media (min-width:992px){
  html.m-pill .navbar_component::before{background-color:rgba(250,248,245,.72);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
    box-shadow:0 14px 40px rgba(35,27,16,.12)}
}
.m-swim-card{border-radius:12px}

/* ═════════ final (7 Oct 2026) · Vishal's 15 notes on r6 ═════════════════════════════════════════════════════════════
   Appended after motion.css. Static by default (reduced motion, no JS): every section reads top to bottom.
   html.f-on (set by final.js) switches the scroll stories on. */

:root{--f-cream:#FAF8F5;--f-ink:#231B10;--f-ink2:rgba(35,27,16,.74);--f-ink3:rgba(35,27,16,.56);--f-blue:#0033A0;--f-or:#FC401F;
  --f-hl:#D2D8E7;--f-ease:cubic-bezier(.16,1,.3,1);
  --f-glass:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.92));
  --f-glass-sh:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(35,27,16,.06),0 24px 60px -18px rgba(35,27,16,.22),0 6px 16px -6px rgba(35,27,16,.10)}

/* ── 1 · hero: one centred block, a shorter title, a subtitle as wide as the title ───────────────────────────────── */
#fold1.fold{padding-top:68px!important;min-height:max(100svh,700px)}
#fold1 .cstage{justify-content:center!important;padding:0 0 9vh!important}
#fold1 .faceslot{margin-bottom:6px}
#fold1 h1.hl.v4-h1{font-size:clamp(44px,5.6vw,76px)!important;line-height:1.04!important;letter-spacing:-.03em!important;max-width:none!important;white-space:nowrap}   /* r6: two lines, "your app" in it */
#fold1 .v4-by{max-width:none!important;width:auto;font-size:clamp(17px,1.45vw,20px)!important;line-height:1.5!important;margin-top:18px!important;text-wrap:wrap}
#fold1 .v4-by .f-br{display:block}
#fold1 .ask{margin-top:24px!important}
#fold1 .headlines{margin-bottom:0!important}
#fold1 .v4-by{margin-bottom:0!important}
@media (max-width:760px){
  #fold1 h1.hl.v4-h1{white-space:normal;text-wrap:balance;font-size:clamp(38px,10.5vw,52px)!important}
  #fold1 h1.hl.v4-h1 .f-br2{display:none}
  #fold1 .v4-by .f-br{display:inline}
  #fold1 .cstage{padding-bottom:12vh!important}
}

/* ── 15 · the opening: Milo is drawn, wakes up, and the camera goes through his screen into the page ─────────────── */
.f-intro{position:fixed;inset:0;z-index:2147483000;pointer-events:auto;cursor:default}
.f-intro{overflow:hidden}
.f-intro .fi-cam{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;will-change:transform}
.f-intro .fi-frame,.f-intro .fi-lines{display:block}
.f-intro .fi-line{fill:none;stroke:var(--f-blue);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.f-intro .fi-guide{fill:none;stroke:var(--f-blue);stroke-width:.9;stroke-dasharray:3 5;vector-effect:non-scaling-stroke;opacity:.6}
.f-intro .fi-word{position:absolute;left:0;right:0;text-align:center;font:500 15px/1 "Inter",system-ui,sans-serif;letter-spacing:.32em;
  text-transform:uppercase;color:var(--f-ink);opacity:0;transform:translateY(8px);transition:opacity .5s var(--f-ease),transform .7s var(--f-ease)}
.f-intro .fi-word.is-on{opacity:1;transform:none}
.f-intro .fi-word b{font-weight:600;letter-spacing:.32em}
.f-intro .fi-word span{color:var(--f-blue)}
.f-intro .fi-skip{position:absolute;right:20px;bottom:18px;font:500 12px/1 "Inter",system-ui,sans-serif;color:var(--f-ink3);letter-spacing:.04em;
  background:none;border:0;padding:10px;cursor:pointer;opacity:0;transition:opacity .4s}
.f-intro.is-ready .fi-skip{opacity:1}
.f-intro .fi-milo{position:absolute;pointer-events:none}
.f-intro .fi-milo > *{width:100%;height:100%}
html.f-intro-on,html.f-intro-on body{overflow:hidden!important}
html.f-intro-on .mrail{opacity:0!important}

/* ── shared: the chapter eyebrow ("I · Build") ── */
.fb-eb{margin:0;display:inline-flex;align-items:center;gap:12px;font:600 13px/1 "Inter",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--f-blue)}
.fb-eb span{font:600 13px/1 "Inter",system-ui,sans-serif;letter-spacing:.14em;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:12px}
.fb-eb span::after{content:"";width:28px;height:1px;background:rgba(0,51,160,.35)}

/* ════════ 4 · I · BUILD — r6's chapter opener (motion.js mChapters), then six scroll beats on two phones ════════ */
.fb3{position:relative;background:var(--f-cream)}
.fb3-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fb3-in{max-width:1240px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:center}
.fb3-beats{list-style:none;margin:0;padding:0;display:grid;gap:40px}
.fb3-beats li{max-width:420px}
.fb3-n{margin:0 0 18px;font:600 13px/1 "Inter",system-ui,sans-serif;letter-spacing:.14em;color:var(--f-blue);font-variant-numeric:tabular-nums}
.fb3-beats h3{margin:0;font:500 clamp(32px,3vw,46px)/1.06 'Doppio',system-ui,serif;letter-spacing:-.028em;color:var(--f-ink);text-wrap:balance}
.fb3-beats h3 + p{margin:18px 0 0;font:400 18px/1.55 "Inter",system-ui,sans-serif;color:var(--f-ink2);max-width:380px}
.fb3-a{display:inline-block;margin-top:20px;font:500 15px/1 "Inter",system-ui,sans-serif;color:var(--f-blue);text-decoration:none}
.fb3-ask{display:flex;align-items:center;gap:12px;margin-top:28px;padding:12px 16px 12px 12px;border-radius:14px;background:var(--f-glass);box-shadow:var(--f-glass-sh);
  font:400 16px/1.3 "Inter",system-ui,sans-serif;color:var(--f-ink);max-width:400px}
.fb3-av{flex:none;width:38px;height:32px;display:block;position:relative}
.fb3-av img{width:100%;height:100%}
.fb3-caret{display:inline-block;width:2px;height:1.1em;margin-left:-8px;background:var(--f-blue);animation:fbBlink 1.05s steps(1) infinite}
@keyframes fbBlink{50%{opacity:0}}
.fb3-hint{display:none}
.fb3-scene{position:relative;display:flex;justify-content:center;align-items:center;gap:clamp(28px,4vw,64px);min-height:560px}
.fb3-ph{--pw:min(250px,calc(62vh * .47));position:relative;z-index:2;width:var(--pw);aspect-ratio:.486;padding:8px;border-radius:40px;background:#16130E;
  box-shadow:0 0 0 1.5px #3a352c inset,0 40px 80px -30px rgba(35,27,16,.42),0 10px 24px -8px rgba(35,27,16,.22)}
.fb3-app{--pw:min(280px,calc(68vh * .47))}
.fb3-tag{position:absolute;left:50%;top:-40px;transform:translateX(-50%);margin:0;padding:7px 12px;border-radius:999px;background:rgba(35,27,16,.06);
  font:600 11.5px/1 "Inter",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--f-ink2);white-space:nowrap}
.fb3-tag-app{background:var(--f-blue);color:#fff}
.fb3-scr{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;background:#fff;isolation:isolate}
.fb3-island{position:absolute;left:50%;top:15px;width:30%;height:21px;transform:translateX(-50%);border-radius:14px;background:#000;z-index:5}
.fb3-l{position:absolute;inset:0;overflow:hidden}
.fb3-l > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
/* website layers */
.w-site{background:#fff}
.w-site > img{top:38px;height:calc(100% - 38px - 46px)}
.w-top{position:absolute;left:0;right:0;top:0;height:38px;display:flex;align-items:flex-end;justify-content:center;gap:5px;padding-bottom:6px;background:#F2F2F4;
  font:500 10.5px/1 "Inter",system-ui,sans-serif;color:#333}
.w-top svg{width:9px;height:9px}
.w-bot{position:absolute;left:0;right:0;bottom:0;height:46px;display:flex;justify-content:space-around;align-items:center;padding:0 14px 8px;background:#F2F2F4;border-top:1px solid rgba(0,0,0,.08)}
.w-bot i{width:16px;height:3px;border-radius:2px;background:#9a9aa0}
.w-hl{position:absolute;left:3px;right:3px;border:2px solid var(--f-or);border-radius:10px;opacity:0;transition:opacity .4s}
.w-hl-top{top:2px;height:36px}
.w-hl-bot{bottom:2px;height:44px}
.w-tabs{background:#E8E8ED;display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px;padding:46px 12px 12px}
.w-tab{display:block;flex:0 0 calc(50% - 5px);height:clamp(64px,10.5vh,96px);border-radius:10px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);position:relative;overflow:hidden}
.w-tab::before{content:"";position:absolute;left:8px;right:18px;top:9px;height:5px;border-radius:3px;background:#E3E3E8}
.w-tab::after{content:"";position:absolute;left:8px;right:8px;top:22px;bottom:8px;border-radius:5px;background:#F1F1F4}
.w-tab-so img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;z-index:1}
.w-tabs em{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:500 11px/1 "Inter",system-ui,sans-serif;font-style:normal;color:#6b6b70}
.w-quiet,.a-lock{background:linear-gradient(170deg,#3a86d8 0%,#1d5fae 46%,#0e3d78 100%)}
.w-quiet span{display:none}
.w-quiet::before,.a-lock::before{content:"9:41";position:absolute;left:0;right:0;top:18%;text-align:center;font:600 clamp(40px,5.4vh,58px)/1 "Inter",system-ui,sans-serif;color:rgba(255,255,255,.94);letter-spacing:-.02em}
.w-quiet::after{content:"Tuesday, 7 October";position:absolute;left:0;right:0;top:12%;text-align:center;font:500 12px/1 "Inter",system-ui,sans-serif;color:rgba(255,255,255,.85)}
.ls-time,.ls-date{display:none}
.a-lock::after{content:"Tuesday, 7 October";position:absolute;left:0;right:0;top:12%;text-align:center;font:500 12px/1 "Inter",system-ui,sans-serif;color:rgba(255,255,255,.85)}
.ls-push{position:absolute;left:8px;right:8px;top:40%;display:flex;gap:9px;padding:10px 11px;border-radius:16px;background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 8px 20px -8px rgba(0,0,0,.35)}
.ls-push img{flex:none;width:30px;height:30px;border-radius:7px}
.ls-push > span{display:grid;grid-template-columns:1fr auto;gap:2px 6px;font:400 11px/1.3 "Inter",system-ui,sans-serif;color:#111}
.ls-push b{font-weight:600}
.ls-push em{font-style:normal;color:#6b6b70}
.ls-push > span > span{grid-column:1 / -1}
/* app layers */
.a-build{background:#fff;padding:44px 12px 0;display:flex;flex-direction:column;gap:9px}
.sk{display:block;border-radius:9px;background:#EAF1F8}
.sk-top{height:22px;width:60%}
.sk-hero{height:30%}
.sk-row{display:flex;gap:8px;background:none}
.sk-row i{flex:1;aspect-ratio:1;border-radius:50%;background:#EAF1F8}
.sk-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:none;flex:1}
.sk-grid i{border-radius:9px;background:#EAF1F8}
.sk-tab{position:absolute;left:0;right:0;bottom:0;height:46px;border-radius:0;background:#F4F7FA}
.a-done{opacity:0}
.a-home{background:linear-gradient(170deg,#4aa0ec 0%,#2273c9 50%,#0f4a92 100%)}
.hs-time{position:absolute;left:22px;top:17px;font:600 11px/1 "Inter",system-ui,sans-serif;color:#fff}
.hs-grid{position:absolute;left:14px;right:14px;top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 12px}
.hs-grid i{display:block;aspect-ratio:1;border-radius:22%;background:rgba(255,255,255,.22);position:relative}
.hs-grid i.hs-so{background:none}
.hs-so img{width:100%;height:100%;border-radius:22%;display:block;box-shadow:0 4px 10px -3px rgba(0,0,0,.35)}
.hs-so em{position:absolute;left:50%;top:104%;transform:translateX(-50%);font:500 8.5px/1.2 "Inter",system-ui,sans-serif;font-style:normal;color:#fff;white-space:nowrap}
.hs-dock{position:absolute;left:8px;right:8px;bottom:8px;height:62px;border-radius:22px;background:rgba(255,255,255,.22);display:flex;justify-content:space-around;align-items:center;padding:0 10px}
.hs-dock i{width:40px;aspect-ratio:1;border-radius:22%;background:rgba(255,255,255,.3)}
.a-hl{position:absolute;left:3px;right:3px;bottom:2px;height:13%;border:2px solid var(--f-blue);border-radius:10px;opacity:0;transition:opacity .4s}
.fb3-live{position:absolute;z-index:3;left:50%;bottom:-44px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:11px 16px;border-radius:999px;
  background:var(--f-glass);box-shadow:var(--f-glass-sh);font:500 14px/1 "Inter",system-ui,sans-serif;color:var(--f-ink)}
.fb3-live svg{width:14px;height:14px;color:var(--f-or)}
.fb-card{position:absolute;z-index:1;margin:0;width:min(150px,calc(42vh * .3));aspect-ratio:.462;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -20px rgba(35,27,16,.4);background:#fff;
  transition:transform .9s var(--f-ease),opacity .6s var(--f-ease)}
.fb-card img{width:100%;height:100%;object-fit:cover;display:block}
.fb-card[data-k="0"]{transform:translate(78%,-6%) rotate(5deg)}
.fb-card[data-k="1"]{transform:translate(150%,6%) rotate(9deg)}
.fb-card[data-k="2"]{transform:translate(-78%,-4%) rotate(-5deg)}
.fb-card[data-k="3"]{transform:translate(-150%,8%) rotate(-9deg)}
.fb-card[data-k="1"],.fb-card[data-k="3"]{transition-delay:.08s}
.fb3 .fb-card{z-index:1;top:50%;left:50%;width:min(140px,calc(40vh * .3));margin:calc(min(140px,calc(40vh * .3)) / -.924) 0 0 calc(min(140px,calc(40vh * .3)) / -2);aspect-ratio:.4615;border-radius:20px}
/* static: the finished app beside the site, the beats as a list */
html:not(.f-on) .fb3-in{padding-top:8vh;padding-bottom:10vh}
html:not(.f-on) .fb3-l:not(.w-site):not(.a-home){display:none}
html:not(.f-on) .fb3 .fb-card{display:none}

/* live: one beat at a time (r5: three beats, SwimOutlet's own screens) */
html.f-on .fb3-run{height:calc(100vh + 3 * 92vh)}
html.f-on .fb3-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
html.f-on .fb3-in{width:100%}
html.f-on .fb3-copy{position:relative;min-height:420px;display:flex;flex-direction:column;justify-content:center}
html.f-on .fb3-beats{display:block;position:relative;min-height:340px}
html.f-on .fb3-beats li{position:absolute;left:0;right:0;top:50%;opacity:0;filter:blur(8px);transform:translateY(calc(-50% + 18px));pointer-events:none;
  transition:opacity .5s var(--f-ease),filter .5s var(--f-ease),transform .8s var(--f-ease)}
html.f-on .fb3-beats li.is-on{opacity:1;filter:none;transform:translateY(-50%);pointer-events:auto}
html.f-on .fb3-beats li.is-past{transform:translateY(calc(-50% - 18px))}
html.f-on .fb3-prog{display:flex;gap:6px;margin:0 0 30px;padding:0;list-style:none}
html.f-on .fb3-prog i{display:block;width:44px;height:3px;border-radius:2px;background:rgba(35,27,16,.12);overflow:hidden;position:relative}
html.f-on .fb3-prog i b{position:absolute;inset:0;background:var(--f-blue);transform-origin:0 50%;transform:scaleX(var(--f,0))}
html.f-on .fb3-hint{display:flex;align-items:center;gap:10px;margin:30px 0 0;font:500 12.5px/1 "Inter",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--f-ink3);transition:opacity .4s}
html.f-on .fb3-hint i{width:16px;height:24px;border-radius:9px;border:1.5px solid currentColor;position:relative}
html.f-on .fb3-hint i::after{content:"";position:absolute;left:50%;top:5px;width:2px;height:5px;margin-left:-1px;border-radius:1px;background:currentColor;animation:fb3Wheel 1.6s ease-in-out infinite}
@keyframes fb3Wheel{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}100%{opacity:0;transform:translateY(7px)}}
html.f-on .fb3[data-b="2"] .fb3-hint{opacity:0}
html.f-on .fb3-l{opacity:0;transition:opacity .5s var(--f-ease)}
html.f-on .fb3 .w-site{opacity:1}
/* the website: the same page throughout; dimmed while the app shows who is shopping; its bars outlined last */
html.f-on .fb3-web{transition:filter .6s,opacity .6s,transform .8s var(--f-ease)}
html.f-on .fb3[data-b="1"] .fb3-web{filter:saturate(.35);opacity:.7}
html.f-on .fb3[data-b="2"] .w-hl{opacity:1;transition-delay:.5s}
/* 0 · builds → the welcome screen → home */
html.f-on .fb3[data-b="0"] .a-build{opacity:1}
html.f-on .fb3[data-b="0"] .sk{animation:fb3Sk .5s var(--f-ease) both}
html.f-on .fb3[data-b="0"] .sk-hero{animation-delay:.1s}html.f-on .fb3[data-b="0"] .sk-row{animation-delay:.2s}
html.f-on .fb3[data-b="0"] .sk-grid{animation-delay:.3s}html.f-on .fb3[data-b="0"] .sk-tab{animation-delay:.4s}
@keyframes fb3Sk{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
html.f-on .fb3[data-b="0"] .a-splash{animation:fb3In .55s var(--f-ease) 1.1s both}
html.f-on .fb3[data-b="0"] .a-home{animation:fb3Up .7s var(--f-ease) 2.4s both}
@keyframes fb3In{from{opacity:0}to{opacity:1}}
@keyframes fb3Up{from{opacity:0;transform:translateY(6%)}to{opacity:1;transform:none}}
/* 1 · My Teams → the member's account */
html.f-on .fb3[data-b="1"] .a-teams{animation:fb3Slide .6s var(--f-ease) both}
html.f-on .fb3[data-b="1"] .a-account{animation:fb3Slide .6s var(--f-ease) 1.9s both}
@keyframes fb3Slide{from{opacity:0;transform:translateX(16%)}to{opacity:1;transform:none}}
/* 2 · Categories → Women's Bikinis; the other screens fan out behind */
html.f-on .fb3[data-b="2"] .a-cats{animation:fb3In .45s var(--f-ease) both}
html.f-on .fb3[data-b="2"] .a-plp{animation:fb3Slide .6s var(--f-ease) 1.5s both}
html.f-on .fb3 .fb-card{opacity:0;transform:translate(0,0) rotate(0) scale(.86)}
html.f-on .fb3[data-b="2"] .fb-card{opacity:1;transition-delay:.35s}
html.f-on .fb3[data-b="2"] .fb-card[data-k="0"]{transform:translate(118%,-7%) rotate(7deg)}
html.f-on .fb3[data-b="2"] .fb-card[data-k="1"]{transform:translate(205%,5%) rotate(12deg)}
html.f-on .fb3[data-b="2"] .fb-card[data-k="2"]{transform:translate(-118%,-6%) rotate(-7deg)}
html.f-on .fb3[data-b="2"] .fb-card[data-k="3"]{transform:translate(-205%,7%) rotate(-12deg)}
html.f-on .fb3[data-b="2"] .fb3-web{opacity:0;transform:translateX(30%) scale(.9)}
html.f-on .fb3[data-b="2"] .fb3-app{transform:translateX(calc(-50% - clamp(14px,2vw,32px)))}
html.f-on .fb3-app{transition:transform .8s var(--f-ease)}
html.f-on .fb3-live{opacity:0;transform:translate(-50%,12px);transition:opacity .6s var(--f-ease),transform .8s var(--f-ease)}
html.f-on .fb3[data-b="2"] .fb3-live{opacity:1;transform:translate(-50%,0);transition-delay:.9s}

/* ════════ 5 · II · LAUNCH ════════ */
.fl{position:relative;background:var(--f-cream)}
.fl-stage{position:relative;min-height:100vh;overflow:hidden;padding:12vh 24px 10vh}
.fl-plate{position:absolute;inset:0;overflow:hidden}
.fl-img{position:absolute;inset:-4% -2%;background:url(https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ac5f2b333227d4f65ee1ecb_final-jobs-rise.webp) center 42%/cover no-repeat}
.fl-plate::after{content:"";position:absolute;inset:auto 0 0;height:26vh;background:linear-gradient(rgba(250,248,245,0),var(--f-cream));z-index:2}
.fl-plate::before{content:"";position:absolute;inset:0 0 auto;height:44vh;background:linear-gradient(rgba(250,248,245,.62),rgba(250,248,245,0));z-index:2}
.fl-burn{position:absolute;inset:0;width:100%;height:100%;display:none;z-index:1}
.fl-head{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.fl-h{margin:0;font:500 clamp(40px,5vw,76px)/1.02 'Doppio',system-ui,serif;letter-spacing:-.03em;color:var(--f-ink);text-wrap:balance}
.fl-glass{position:relative;z-index:3;margin:7vh auto 0;width:min(1000px,100%);display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;align-items:center;
  padding:34px 40px;border-radius:16px;background:var(--f-glass);box-shadow:var(--f-glass-sh);-webkit-backdrop-filter:blur(30px) saturate(1.35);backdrop-filter:blur(30px) saturate(1.35)}
.fl-count{display:flex;flex-direction:column;gap:14px}
.fl-big{margin:0;font:500 64px/1 'Doppio',system-ui,serif;letter-spacing:-.03em;color:var(--f-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.fl-big b{font-weight:500}
.fl-big small{display:block;margin-top:10px;font:500 15px/1.2 "Inter",system-ui,sans-serif;letter-spacing:0;color:var(--f-ink3)}
.fl-big small s{text-decoration-thickness:1.5px}
.fl-who{position:relative;margin:0;height:16px;font:600 12px/16px "Inter",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.fl-who span{position:absolute;left:0;top:0;white-space:nowrap;transition:opacity .4s,transform .6s var(--f-ease)}
.fl-who-a{color:var(--f-ink3)}
.fl-who-b{color:var(--f-blue);opacity:0;transform:translateY(8px)}
.fl.is-milo .fl-who-a{opacity:0;transform:translateY(-8px)}
.fl.is-milo .fl-who-b{opacity:1;transform:none}
.fl-board{position:relative;min-height:270px}
.fl-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.fl-tile{position:relative;aspect-ratio:1.18;border-radius:10px;background:rgba(35,27,16,.05);display:grid;place-items:center;will-change:transform,opacity}
.fl-tile i{font:500 10px/1 "Inter",system-ui,sans-serif;position:absolute;left:8px;top:7px;color:rgba(35,27,16,.38);font-style:normal;font-variant-numeric:tabular-nums}
.fl-tile svg{width:18px;height:18px;fill:none;stroke:rgba(35,27,16,.34);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fl-tile.is-on{background:#D9D3C8}
.fl-tile.is-on svg{stroke:rgba(35,27,16,.7)}
.fl-tile.is-now{box-shadow:0 0 0 2px rgba(35,27,16,.55) inset}
.fl-dial{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none}
.fl-dial svg{width:250px;height:250px;overflow:visible}
.fl-ring{fill:#fff;stroke:rgba(35,27,16,.12);stroke-width:1.5}
.fl-ticks line{stroke:rgba(35,27,16,.3);stroke-width:1.5;stroke-linecap:round}
.fl-ticks line.big{stroke:rgba(35,27,16,.55);stroke-width:2}
.fl-arc{fill:none;stroke:var(--f-blue);stroke-width:12;stroke-linecap:round}
.fl-hand{stroke:var(--f-ink);stroke-width:2.5;stroke-linecap:round;transform-origin:120px 120px}
.fl-pin{fill:var(--f-ink)}
.fl-dots circle{fill:#fff;stroke:var(--f-blue);stroke-width:3}
.fl-dlab{position:absolute;margin:0;font:500 13px/1.2 "Inter",system-ui,sans-serif;color:var(--f-ink2);white-space:nowrap;opacity:0;transition:opacity .4s,transform .6s var(--f-ease);transform:translateY(6px)}
.fl-dlab.is-on{opacity:1;transform:none}
.fl-d0{left:calc(50% - 125px - 16px);top:50%;translate:-100% -50%}
.fl-d1{left:50%;top:calc(50% - 125px - 26px);translate:-50% 0}
.fl-d2{left:calc(50% + 125px + 16px);top:50%;translate:0 -50%;color:var(--f-blue);font-weight:600}
.fl-toast{position:absolute;right:22px;top:-26px;margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:12px 18px 12px 12px;border-radius:16px;
  background:var(--f-glass);box-shadow:var(--f-glass-sh);opacity:0;transform:translateY(-14px) scale(.96);transition:opacity .5s var(--f-ease),transform .7s var(--f-ease)}
.fl-toast-i{grid-row:span 2;width:34px;height:34px;border-radius:9px;background:var(--f-or) url(https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ac5f2b41ee65d7e707e3692_final-milo-icon-orange.webp) center/cover}
.fl-toast b{font:600 14px/1.2 "Inter",system-ui,sans-serif;color:var(--f-ink)}
.fl-toast span:last-child{font:400 12.5px/1.3 "Inter",system-ui,sans-serif;color:var(--f-ink2)}
.fl.is-live .fl-toast{opacity:1;transform:none}
.fl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* static (no motion): the finished state */
html:not(.f-on) .fl-grid{display:none}
html:not(.f-on) .fl-dial{opacity:1}
html:not(.f-on) .fl-dlab{opacity:1;transform:none}
html:not(.f-on) .fl-who-a{display:none}
html:not(.f-on) .fl-who-b{opacity:1;transform:none}
html:not(.f-on) .fl-toast{opacity:1;transform:none}

html.f-on .fl-run{height:560vh}
html.f-on .fl-stage{position:sticky;top:0;height:100vh;height:100svh;min-height:0;padding:0}
html.f-on .fl-head{position:absolute;left:24px;right:24px;top:15vh}
html.f-on .fl-head > *{opacity:0;transform:translateY(22px)}
html.f-on .fl-glass{position:absolute;left:50%;top:35vh;margin:0;transform:translate(-50%,0);width:min(1000px,calc(100% - 48px));opacity:0}
html.f-on .fl.is-gl .fl-burn{display:block}
html.f-on .fl.is-gl .fl-img{visibility:hidden}

/* ════════ 6 · six jobs, stacked cards ════════ */
.fj-wrap{display:grid;grid-template-columns:minmax(260px,.78fr) minmax(0,1.45fr);gap:clamp(32px,5vw,80px);margin-top:56px;align-items:start}
.fj-left{align-self:stretch}
.fj-sticky{position:sticky;top:calc(50vh - 170px)}
.fj-milo{position:relative;width:72px;height:60px;margin:0 0 18px}
.fj-caps{position:relative;list-style:none;margin:0;padding:0;min-height:300px}
.fj-cap{position:absolute;inset:0 0 auto;opacity:0;filter:blur(10px);transform:translateY(14px);transition:opacity .55s var(--f-ease),filter .55s var(--f-ease),transform .8s var(--f-ease);pointer-events:none}
.fj-cap.is-on{opacity:1;filter:none;transform:none;pointer-events:auto}
.fj-cap.is-past{transform:translateY(-14px)}
.fj-n{margin:0 0 16px;font:600 13px/1 "Inter",system-ui,sans-serif;letter-spacing:.14em;color:var(--f-blue);font-variant-numeric:tabular-nums}
.fj-n span{color:var(--f-ink3);font-weight:500}
.fj-cap h3{margin:0;font:500 clamp(34px,3.4vw,50px)/1.04 'Doppio',system-ui,serif;letter-spacing:-.028em;color:var(--f-ink);text-wrap:balance}
.fj-p{margin:16px 0 0;max-width:380px;font:400 18px/1.55 "Inter",system-ui,sans-serif;color:var(--f-ink2)}
.fj-note{display:none}
.fj-cards{list-style:none;margin:0;padding:0 0 10vh}
.fj-card{--ch:min(620px,74vh);position:sticky;top:calc(50vh - var(--ch) / 2);height:var(--ch);margin:0 0 26vh;border-radius:16px;overflow:hidden;transform-origin:50% 0;
  box-shadow:0 30px 70px -30px rgba(35,27,16,.35),0 8px 20px -10px rgba(35,27,16,.16);background:#dfe6ee;will-change:transform}
.fj-card:last-child{margin-bottom:0}
.fj-plate{position:absolute;inset:0;background:var(--img) center/cover no-repeat}
.fj-plate::after{content:"";position:absolute;inset:0;box-shadow:inset 2px 3px 5px rgba(35,27,16,.10);border-radius:inherit}
.fj-dim{position:absolute;inset:0;background:#231B10;opacity:0;pointer-events:none;z-index:3;border-radius:inherit;will-change:opacity}
.fj-in .v4-panel,.fj-in .v4-panel *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.fj-in .v4-pc,.fj-in .v4-oc{background:rgba(255,255,255,.96)!important}
.fj-in{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(18px,4%,44px);z-index:2}
.fj-in .v4-panel{width:min(470px,100%);margin:0;position:relative;opacity:1!important;transform:none!important;visibility:visible!important}
.fj .v4-jobs-scroll,.fj .v4-jobs-prog{display:none}
@media (max-width:900px){
  .fj-wrap{grid-template-columns:1fr;gap:0;margin-top:32px}
  .fj-left{position:sticky;top:64px;z-index:5;background:linear-gradient(var(--f-cream) 80%,rgba(250,248,245,0));padding:12px 0 18px}
  .fj-sticky{position:static}
  .fj-milo{display:none}
  .fj-caps{min-height:108px}
  .fj-cap h3{font-size:30px}
  .fj-p{font-size:15px;margin-top:8px}
  .fj-card{--ch:min(600px,70vh);top:calc(64px + 140px)}
  .fj-in{padding:10px;place-items:start center}
  .fj-in .v4-panel{zoom:.86}
}

/* ════════ 7 · III · GROW ════════ */
.fg{position:relative;background:var(--f-cream)}
.fg-stage{position:relative;padding:14vh 24px 10vh}
.fg-mid{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.fg-h{margin:0;font:500 clamp(40px,5vw,76px)/1 'Doppio',system-ui,serif;letter-spacing:-.034em;color:var(--f-ink);text-wrap:balance}
.fg-rate{display:inline-flex;align-items:center;gap:10px;font:500 15px/1 "Inter",system-ui,sans-serif;color:var(--f-ink2);text-decoration:none}
.fg-rate:hover{color:var(--f-blue)}
.fg-stars{color:var(--f-or);letter-spacing:.12em;font-size:14px}
.fg-cards{list-style:none;margin:8vh auto 0;padding:0;max-width:1200px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.fg-card a{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#fff;text-decoration:none;color:var(--f-ink);
  box-shadow:0 0 0 1px rgba(35,27,16,.05),0 26px 60px -24px rgba(35,27,16,.32),0 6px 14px -6px rgba(35,27,16,.12)}
.fg-shot{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#EEE9E1}
.fg-shot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fg-shot::after{content:"";position:absolute;inset:0;box-shadow:inset 2px 3px 5px rgba(35,27,16,.10)}
.fg-body{display:flex;flex-direction:column;gap:4px;padding:14px 18px 16px}
.fg-brand{font:600 12px/1 "Inter",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--f-ink2)}

.fg-num{display:block;margin-top:2px}
.fg-num b{display:inline;font:500 56px/1.06 'Doppio',system-ui,serif;letter-spacing:-.035em;color:var(--f-blue);padding:0 .08em;margin-left:-.08em;border-radius:3px;
  background:linear-gradient(var(--f-hl),var(--f-hl)) no-repeat 0 78%/var(--hl,100%) 46%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fg-lab{font:500 16px/1.35 "Inter",system-ui,sans-serif;color:var(--f-ink)}
.fg-more{margin-top:6px;font:500 13.5px/1 "Inter",system-ui,sans-serif;color:var(--f-ink3)}
.fg-card a:hover .fg-more{color:var(--f-blue)}

html.f-on .fg-run{height:620vh}
html.f-on .fg.has-int .fg-run{height:760vh}
html.f-on .fg-stage > .fg-int{position:absolute!important;inset:0;z-index:6;margin:0!important;padding-top:0!important;background:transparent!important;min-height:0!important;height:100%}
html.f-on .fg-stage > .fg-int .v4-space{height:100%!important;min-height:0!important}
html.f-on .fg-stage{position:sticky;top:0;height:100vh;height:100svh;padding:0;overflow:hidden;perspective:1100px;perspective-origin:50% 50%}
html.f-on .fg-mid{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-50%);z-index:7}
html.f-on .fg-mid > *{opacity:0;transform:translateY(20px);transition:opacity .7s var(--f-ease),transform 1s var(--f-ease)}
html.f-on .fg.is-in .fg-mid > *{opacity:1;transform:none}
html.f-on .fg.is-in .fg-mid > :nth-child(2){transition-delay:.08s}
html.f-on .fg.is-in .fg-mid > :nth-child(3){transition-delay:.18s}
html.f-on .fg-cards{position:absolute;inset:0;margin:0;max-width:none;display:block;transform-style:preserve-3d;pointer-events:none}
html.f-on .fg-card{position:absolute;left:50%;top:50%;width:clamp(204px,15.5vw,240px);opacity:0;will-change:transform,opacity}
html.f-on .fg-card.is-held{pointer-events:auto}
html.f-on .fg-num b{--hl:0%;transition:background-size .7s var(--f-ease)}
html.f-on .fg-card.is-held .fg-num b{--hl:100%}
html.f-on .fg-card .fg-num b{background-size:var(--hl) 46%}
@media (max-width:980px){                                   /* r6: matches fGrow's own cut-off (the fly-through is ≥981px); 761–980 used to show no cards */
  html.f-on .fg-run,html.f-on .fg.has-int .fg-run{height:auto}
  html.f-on .fg-stage{position:relative;height:auto;padding:12vh 20px 8vh;overflow:visible;perspective:none}
  html.f-on .fg-mid{position:relative;left:auto;right:auto;top:auto;transform:none}
  html.f-on .fg-cards{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:40px;pointer-events:auto;max-width:1200px;margin-left:auto;margin-right:auto}
  html.f-on .fg-card{position:relative;left:auto;top:auto;width:auto;opacity:1;transform:none!important}
  html.f-on .fg-card .fg-num b{--hl:100%}
}

/* phones: Build and Launch keep their stories, laid out in one column */
@media (max-width:760px){
  .fb3-in{grid-template-columns:1fr;gap:0;padding:0 18px}
  html.f-on .fb3-stage{align-items:flex-start;padding-top:72px}
  html.f-on .fb3-copy{min-height:0;order:2}
  html.f-on .fb3-beats{min-height:200px}
  .fb3-beats h3{font-size:26px}
  .fb3-beats h3 + p{font-size:15px;margin-top:10px}
  .fb3-n{margin-bottom:10px}
  .fb3-ask{margin-top:14px;font-size:14px}
  html.f-on .fb3-prog{margin-bottom:14px}
  html.f-on .fb3-hint{display:none}
  .fb3-scene{min-height:0;gap:14px;padding-top:40px;order:1}
  .fb3-ph{--pw:min(150px,calc(40vh * .47))}
  .fb3-app{--pw:min(166px,calc(44vh * .47))}
  .fb3-tag{top:-30px;font-size:10px}
  .fb3 .fb-card{display:none}
  .fb3-live{display:none}
  .ls-push{left:6px;right:6px;padding:7px 8px;gap:6px;border-radius:12px}
  .ls-push img{width:20px;height:20px;border-radius:5px}
  .ls-push > span{font-size:8.5px}
  .w-quiet::before,.a-lock::before{font-size:34px}
  .fl-glass{grid-template-columns:1fr;gap:18px;padding:20px}
  html.f-on .fl-glass{top:31vh}
  .fl-big{font-size:44px}
  .fl-board{min-height:230px;margin-top:22px}
  .fl-grid{gap:5px}
  .fl-tile i{display:none}
  .fl-tile svg{width:14px;height:14px}
  .fl-dial svg{width:190px;height:190px}
  .fl-d0{left:6px;top:auto;bottom:-6px;translate:none}
  .fl-d1{top:-14px}
  .fl-d2{left:auto;right:6px;top:auto;bottom:-6px;translate:none}
  .fl-toast{right:12px;top:-60px}
}

html:not(.f-on) .fb-ph{display:none}

/* ── 7 · people: room between the channel/sound controls and the torn paper ── */
html.m-on .v4tv-field{padding-bottom:26vh!important}
@media (max-width:760px){html.m-on .v4tv-field{padding-bottom:16vh!important}}

/* ── 8 · security: Milo's card, with the new character and no "he" ── */
.v4sec-milo-hd{display:flex!important;align-items:center;gap:16px}
.v4sec-milo-hd .f-mn{position:relative;flex:none;width:84px;height:72px;display:block}
.v4sec-milo-hd p span{color:var(--f-blue)!important}
.v4sec-milo-hd p b{font:500 24px/1.12 'Doppio',system-ui,serif!important;letter-spacing:-.02em;color:var(--f-ink)}
.v4sec-rules li{font-size:14.5px!important;line-height:1.45!important}

/* ── the close: as it was, the line in two ── */
.close.v4-close .close-body{max-width:none}
.close.v4-close .close-body h2 .f-l{display:block;white-space:nowrap}
@media (max-width:760px){.close.v4-close .close-body h2 .f-l{white-space:normal;display:inline}}
/* ── cookie toast: room after "Accept" ── */
aside.abc{padding-right:22px!important;width:auto!important;max-width:min(680px,calc(100vw - 32px))!important}
aside.abc .abc-acts{flex:none}
aside.abc .abc-line{min-width:0}
aside.abc .abc-acts button{padding-left:6px!important;padding-right:6px!important}
/* ── six jobs: no section head; Milo, the count and the title get room ── */
.fj > .v4-head{display:none!important}
.fj .fj-wrap{margin-top:0}
.fj-milo{margin-bottom:40px!important}
.fj-n{margin-bottom:26px!important}
.fj-p{margin-top:22px!important}


/* ── 6 · breathing room: a deliberate pause at each chapter break, not more padding everywhere ── */
.v4-band{padding:clamp(96px,16vh,170px) 0 clamp(120px,22vh,240px)!important}
.fj.v4s{padding-top:clamp(150px,24vh,260px)!important;padding-bottom:clamp(120px,16vh,190px)!important}
#v4-people{margin-top:clamp(80px,14vh,170px)}
.v4sec-root.v4s{padding-top:clamp(150px,22vh,250px)!important;padding-bottom:clamp(140px,20vh,230px)!important}
.v4sec-root .v4sec-head{margin-bottom:56px!important}
.v4-faq.v4s{padding-top:clamp(140px,18vh,220px)!important;padding-bottom:clamp(160px,22vh,250px)!important}
@media (max-width:760px){
  .v4-band{padding:72px 0 96px!important}
  .fj.v4s{padding-top:96px!important}
  #v4-people{margin-top:48px}
  .v4sec-root.v4s,.v4-faq.v4s{padding-top:96px!important;padding-bottom:96px!important}
}
html:not(.f-on) .fb3-scene{position:sticky;top:14vh;align-self:start;padding-top:48px}
html:not(.f-on) .fb3-av,html:not(.f-on) .fb3-caret{display:none}
@media (max-width:760px){html:not(.f-on) .fb3-scene{position:relative;top:auto}}

/* the site-wide exit popup is not part of this page (the flag in intro.js stops it opening; this is the backstop) */
.feature_modal-wrap{display:none!important}

/* r5 · Grow cards: the brand's own picture and logo, the number as the hero */
.fg-brand{display:none}
/* r6: a shorter card, so a row of them fits above and below the title. The brand's real logo rides on its own photo in a
   white tag, the number and its line sit under it, and "Read the story" is an arrow on the photo (the whole card is the link) */
.fg-shot{aspect-ratio:2/1}
.fg-logo{position:absolute;left:10px;bottom:10px;z-index:1;display:flex;align-items:center;height:34px;padding:0 10px;border-radius:9px;background:#fff;
  box-shadow:0 1px 2px rgba(35,27,16,.10),0 6px 14px -6px rgba(35,27,16,.28)}
.fg-logo img{height:var(--lh,20px);width:auto;max-width:118px;object-fit:contain;display:block}
.fg-go{position:absolute;right:10px;top:10px;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--f-ink);font:500 14px/1 "Inter",system-ui,sans-serif;transition:background-color .2s,color .2s}
.fg-card a:hover .fg-go{background:var(--f-blue);color:#fff}
.fg-body{gap:2px;padding:10px 16px 14px}
.fg-num b{font-size:46px}
.fg-lab{font-size:14px;line-height:1.3}
html.f-on .fg-card .fg-num b{--hl:0%;background-size:var(--hl) 46%;transition:background-size .8s var(--f-ease)}
html.f-on .fg-card.is-lit .fg-num b{--hl:100%}
html.f-on .fg-card{will-change:transform,opacity;backface-visibility:hidden}

/* r7 (7 Oct): speed. The hero meadow is a Squoosh WebP (153 KB, was a 518 KB JPEG), preloaded from the head, with a 0.2 KB blurred
   copy painted under it so the meadow is there on the first frame. Every other photograph waits until the reader is a screen and a
   half away: html.lzbg (set by a one-line script in the head) holds their backgrounds back and fLazy() adds .lz-in as they near.
   Without that script nothing is held back, so a page whose JS fails still shows every photo. */
html .pl-K1-hero{background-image:url('https://cdn.prod.website-files.com/671c75aea252ba8250473e86/6ac5f2b254cfab3693ed1f7c_final-K1-hero.webp'),url('data:image/webp;base64,UklGRsIAAABXRUJQVlA4ILYAAABQBgCdASooABIAPtFSpEuoJKOhsBVdUQAaCWUAuwALKhVBntQ+98vYAm4VgZoX13KzbX4JAlqjRCeaAAD+6DmwKDlYsG23sJFeIE1XxTSttB5MTMFRj3RnuxF3KYITCbCXYZQ76s/rSLCbvUW+gHs4dzuruyhAnvGlbIBHXesVfUyTAg+QWAh4CLCk9jf/iIaPd8Mxj4W/6KaL3zJE/sKDEZ4R35KtWDc0FlzAsx+/Um5PnwAAAA==')}
html.lzbg :is(.m-chap-ph, .fl-img, .fj-plate, .v4-panel, .v4-hero-img, .v4-lockmini, .v4tv-field, .v4sec-plate, .close-plate span):not(.lz-in),html.lzbg footer.abf:not(.lz-in)::after{background-image:none!important}

/* r8 (8 Oct): phone fixes from Vishal's recording and a 390px audit of the live page */
@media (max-width:900px){
  .fj-card{top:calc(64px + var(--fj-top, 150px) - 10px)}            /* below the caption box (fJobs measures it); its last 10px is the fade */
  .mtrail{display:none!important}                                   /* the travelling Milo's trail read as stray lines across the sections */
}
@media (max-width:760px){
  .fl-toast{top:calc(100% + 14px);bottom:auto;left:12px;right:12px;margin:0 auto;width:max-content;max-width:calc(100% - 24px)}   /* under the panel, not on the headline */
  .close .v4-csmall{display:inline-block;margin-top:14px;padding:5px 12px;border-radius:999px;color:var(--f-ink);background:rgba(250,248,245,.86);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}  /* it sat on the daisies, unreadable */
}