/* Friendly Fish x YAMI Studios: content proposal.
   Brand values from brand/tokens.json and brand/brand.css. Agrandir text is typed in caps
   with a lowercase i (BRAND.md section 4): never text-transform it. */

/* ---------- fonts: Friendly Fish's own webfont files */
@font-face { font-family: "Agrandir"; src: url("fonts/agrandir-narrow-black.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Rebond Grotesque"; src: url("fonts/rebond-semibold.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rebond Grotesque"; src: url("fonts/rebond-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- tokens */
:root {
  --blue: #0078ff;
  --green: #02cb67;
  --green-ink: #00a252;       /* green darkened only for small caps labels on grey (contrast) */
  --ground: #e9eae8;
  --panel: #f6f6f6;
  --white: #fff;
  --ink: #000;
  --muted: #55595e;
  --signal-red: #ba3636;
  --line: rgba(0, 0, 0, .12);

  --f-head: "Agrandir", "Arial Narrow", sans-serif;
  --f-body: "Rebond Grotesque", "Helvetica Neue", Arial, sans-serif;

  /* --s is the site's own root unit: 14.4px at 1440 wide (friendlyfish.com root = 1vw).
     In deck mode it also respects height so every screen fits one viewport. */
  --s: min(1vw, 1.6vh);
  --gut: calc(var(--s) * 4.2);

  --t-mega: calc(var(--s) * 12);
  --t-huge: calc(var(--s) * 9.375);
  --t-xl: calc(var(--s) * 6.25);
  --t-seed: calc(var(--s) * 7.2);
  --t-hero: calc(var(--s) * 5.625);
  --t-4xl: calc(var(--s) * 3.125);
  --t-3xl: calc(var(--s) * 2.5);
  --t-nav: calc(var(--s) * 1.875);
  --t-kick: calc(var(--s) * 1.6);
  --b-lead: max(19px, calc(var(--s) * 2.05));
  --b-base: max(17px, calc(var(--s) * 1.5));
  --b-small: max(14px, calc(var(--s) * 1.15));
  --b-cap: max(12px, calc(var(--s) * .95));

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-ui: cubic-bezier(.4, 0, .2, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --ease-close: cubic-bezier(.36, .14, .16, 1);

  --radius-card: calc(var(--s) * 1.5);
  --radius-big: 2vw;
  --shadow-card: 0 calc(var(--s) * (1.1 + var(--h, 0) * .9)) calc(var(--s) * (3 + var(--h, 0) * 2.2)) calc(var(--s) * -1.1) rgba(18, 28, 45, calc(.15 + var(--h, 0) * .09)), 0 1px 2px rgba(18, 28, 45, .06);
}
@supports (color: color(display-p3 0 0 0)) {
  @media (color-gamut: p3) {
    :root { --blue: color(display-p3 0 .468 .995); --green: color(display-p3 0 .796 .404); }
  }
}

/* ---------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground); font-variant-numeric: tabular-nums; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--f-body); font-weight: 400; font-size: var(--b-base); line-height: 1.2;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  cursor: url("logo/cursor-arrow.svg") 4 3, auto;
  overflow-x: hidden;
}
a, button, [role="button"], .is-morph, label { cursor: url("logo/cursor-arrow-hover-blue.svg") 4 3, pointer; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--blue); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.s-goal :focus-visible { outline-color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 999px; transform: translateY(-160%); transition: transform .2s var(--ease-ui); }
.skip:focus { transform: none; }

.c-blue { color: var(--blue); }
.c-green { color: var(--green); }
.c-green-ink { color: var(--green-ink); }

/* type */
.kicker, .h-xl, .h-hero, .h-seed, .cover-title, .goal-title, .allin-title, .step-n, .step-t, .pillar-n, .pillar-t,
.num-label, .tag, .big-num, .board, .countdown, .addon-t, .pack-name, .pack-term, .pack-month, .save-chip, .pick-badge,
.close-line, .sheet-title, .sheet-kicker, .sheet-label, .setup-label, .views-chip, .phone-tag, .chrome-progress, .chrome-x,
.index-menu a, .pill--lg, .format-list span, .gb-card, .sum-total, .sheet-list b {
  font-family: var(--f-head); font-weight: 400; font-synthesis: none; letter-spacing: 0; text-transform: none;
}
.kicker { font-size: var(--t-kick); line-height: 1; margin-bottom: calc(var(--s) * 1.4); }
.kicker--white { color: #fff; }
.h-xl { font-size: var(--t-xl); line-height: .9; }
.h-hero { font-size: var(--t-hero); line-height: .9; }
.h-seed { font-size: var(--t-seed); line-height: .88; }
.ln { display: block; padding-block: .06em; margin-block: -.06em; clip-path: inset(-.5em -.3em -.08em -.3em); }
.ln > span { display: inline-block; }
[data-fitblock] .ln > span { white-space: nowrap; }
.lead { font-size: var(--b-lead); line-height: 1.12; max-width: 30ch; }
.body { font-size: var(--b-base); line-height: 1.22; max-width: 34ch; }

/* ---------- chrome */
.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, calc(var(--s) * 1.6)) var(--gut) 0; pointer-events: none; color: var(--ink);
  transition: color .4s var(--ease-ui), opacity .4s var(--ease-ui);
}
.chrome > * { pointer-events: auto; }
.chrome-brand { display: flex; align-items: center; gap: calc(var(--s) * .9); transition: opacity .4s var(--ease-ui), transform .5s var(--ease-out); }
.chrome-wm { width: clamp(118px, calc(var(--s) * 12), 190px); height: auto; }
.chrome-wm--white { display: none; }
.chrome-times { font-family: var(--f-body); font-weight: 700; margin-right: .1em; }
.chrome-x { font-size: clamp(13px, calc(var(--s) * 1.15), 18px); line-height: 1; padding-top: .18em; white-space: nowrap; }
body[data-chrome="light"] .chrome { color: #fff; }
.chrome::before { content: ""; position: absolute; inset: 0 0 -14px; z-index: -1; background: rgba(233, 234, 232, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s; pointer-events: none; }
body.chrome-solid .chrome::before { opacity: 1; }
body[data-chrome="light"] .chrome-wm--black { display: none; }
body[data-chrome="light"] .chrome-wm--white { display: block; }
body[data-at="cover"] .pager { opacity: 0; pointer-events: none; }
body[data-at="cover"] .chrome-brand { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.chrome-progress { position: relative; font-size: clamp(18px, var(--t-nav), 27px); line-height: 1; padding: 6px 0 8px; }
.chrome-progress::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; border-bottom: 4px solid var(--blue); transition: width .2s var(--ease-ui); }
body[data-chrome="light"] .chrome-progress::after { border-color: #fff; }
.chrome-progress:hover::after, .chrome-progress[aria-expanded="true"]::after { width: 100%; }

.index-menu {
  position: absolute; right: calc(var(--gut) - 14px); top: calc(100% + 8px); width: 330px;
  background: #fff; border-radius: 22px; padding: 18px 22px 20px; color: var(--ink);
  box-shadow: 0 24px 60px -18px rgba(18, 28, 45, .35), 0 2px 6px rgba(18, 28, 45, .08);
  transform-origin: 85% 0; animation: menu-in .42s var(--ease-out); max-height: calc(100vh - 90px); overflow-y: auto;
}
.index-menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-10px) scale(.94); } }
.index-menu ol { display: grid; gap: 2px; }
.index-menu a { position: relative; display: inline-flex; align-items: baseline; gap: 10px; font-size: 20px; line-height: 1.1; padding: 3px 0 4px; white-space: nowrap; }
.index-menu a span { font-size: 13px; color: var(--blue); min-width: 18px; }
.index-menu a::after { content: ""; position: absolute; left: 28px; bottom: 0; width: 0; border-bottom: 3px solid var(--blue); transition: width .2s var(--ease-ui); }
.index-menu a:hover::after, .index-menu a[aria-current="true"]::after { width: calc(100% - 28px); }
.index-menu a[aria-current="true"] { color: var(--blue); }

.pager { position: fixed; right: var(--gut); bottom: max(16px, calc(var(--s) * 1.8)); z-index: 50; display: flex; gap: 8px; }
.pager-btn {
  width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 16px -6px rgba(18, 28, 45, .3); transition: transform .3s var(--ease-out), background .2s var(--ease-ui), opacity .3s;
}
.pager-btn svg { width: 14px; height: auto; fill: var(--blue); transition: fill .2s var(--ease-ui); }
.pager-btn--up svg { transform: rotate(180deg); }
.pager-btn:hover { background: var(--blue); transform: translateY(-2px); }
.pager-btn:hover svg { fill: #fff; }
.pager-btn:disabled { opacity: .35; pointer-events: none; }

/* ---------- face symbol (inline SVG built by site.js) */
.face { display: inline-block; width: 1em; line-height: 0; }
.face svg { width: 100%; height: auto; overflow: visible; }
.face--blue { color: var(--blue); }
.face--white { color: #fff; }
.face .fin-l { transform-origin: 4.7px 14.2px; }
.face .fin-r { transform-origin: 16.3px 14.2px; }
@media (prefers-reduced-motion: no-preference) {
  .face svg { animation: ff-swim 1.6s ease-in-out infinite; }
  .face .fin-l { animation: fin-l .44s ease-in-out infinite alternate; }
  .face .fin-r { animation: fin-r .44s ease-in-out infinite alternate; }
  .is-deck .screen:not(.is-active) .face svg, .is-deck .screen:not(.is-active) .face path { animation-play-state: paused; }
}
@keyframes ff-swim { 0%, 50%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-4px) rotate(1.4deg); } 75% { transform: translateY(4px) rotate(-1.4deg); } }
@keyframes fin-l { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@keyframes fin-r { from { transform: rotate(10deg); } to { transform: rotate(-10deg); } }

/* ---------- buttons */
.pill {
  display: inline-flex; align-items: center; gap: .45em; border-radius: 999px; background: var(--blue); color: #fff;
  font-size: max(18px, calc(var(--s) * 1.7)); line-height: 1.1; padding: .42em 1em .48em; white-space: nowrap;
  transition: background-color .2s var(--ease-ui), transform .35s var(--ease-out);
}
.pill:hover { background: var(--green); }
.pill:active { transform: scale(.97); }
.pill--green { background: var(--green); color: #000; }
.pill--green:hover { background: var(--blue); color: #fff; }
.pill--lg { font-size: max(19px, var(--t-nav)); padding: .5em 1.05em .52em; }
.pill--sm { font-size: max(16px, calc(var(--s) * 1.3)); padding: .38em .9em .42em; }
.pill .ext { width: .62em; height: .62em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.blob-btn {
  position: relative; isolation: isolate; display: inline-grid; place-items: center;
  width: max(168px, calc(var(--s) * 13)); aspect-ratio: 134 / 56; color: #fff;
  font-size: max(22px, calc(var(--s) * 1.85)); line-height: 1; transition: transform .45s var(--ease-pop);
}
.blob-btn span { position: relative; top: -.04em; }
.blob-btn::before, .blob-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("logo/order-blob-blue.svg") center / contain no-repeat; transition: opacity .2s var(--ease-ui); }
.blob-btn::after { background-image: url("logo/order-blob-green.svg"); opacity: 0; }
.blob-btn:hover::after, .blob-btn:focus-visible::after { opacity: 1; }
.blob-btn:hover { transform: rotate(-3deg) scale(1.04); }
.blob-btn:active { transform: scale(.96); }

.more { font-size: max(15px, calc(var(--s) * 1.2)); color: var(--blue); position: relative; align-self: flex-start; padding-bottom: 3px; }
.more::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; border-bottom: 2px solid currentColor; transform-origin: left; transform: scaleX(.35); transition: transform .3s var(--ease-out); }
.more:hover::after, .is-morph:hover .more::after { transform: scaleX(1); }

.ph {
  font-family: var(--f-body); font-weight: 400; font-size: max(13px, .62em); letter-spacing: 0; color: var(--muted);
  border: 1.5px dashed rgba(0, 0, 0, .32); border-radius: .5em; padding: .12em .5em .16em; white-space: nowrap; line-height: 1.2;
  display: inline-block; vertical-align: middle; transition: background-color .3s, color .3s, border-color .3s;
}
.ph-line { margin-top: calc(var(--s) * .9); font-size: var(--b-small); }
.ph-line .ph { font-size: var(--b-small); }
.ph.is-flash { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ---------- cards: floating, tilting, lit */
.card {
  position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); color: var(--ink); text-align: left; width: 100%;
}
[data-tilt] {
  --h: 0; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  transform: perspective(1100px) translateY(calc(var(--h) * -6px)) scale(calc(1 + var(--h) * .018)) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d; will-change: transform;
}
.light {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(0, 120, 255, .09), rgba(0, 120, 255, .02) 38%, transparent 62%);
  opacity: var(--h);
}
.pc-card .light, .phone-body .light, .addon-photo .light {
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .5), rgba(255, 255, 255, .12) 36%, transparent 62%);
  mix-blend-mode: soft-light;
}
.is-morph { transition: box-shadow .3s var(--ease-ui); }
.is-morph.is-hidden { visibility: hidden; }

.bob { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .bob { animation: bob var(--bob, 7s) ease-in-out var(--bd, 0s) infinite alternate; }
  .is-deck .screen:not(.is-active) .bob { animation-play-state: paused; }
}
@keyframes bob { from { transform: translate3d(0, calc(var(--s) * -.55), 0) rotate(-.6deg); } to { transform: translate3d(0, calc(var(--s) * .55), 0) rotate(.6deg); } }

/* ---------- phone mockup */
.phone { --pw: calc(var(--s) * 21); width: var(--pw); position: relative; }
.phone--lg { --pw: calc(var(--s) * 21.5); }
.s-premium .phone--lg { --pw: calc(var(--s) * 24); }
.phone--md { --pw: calc(var(--s) * 13.5); }
.phone--sm { --pw: calc(var(--s) * 8.9); }
.phone-body {
  position: relative; padding: calc(var(--pw) * .032); border-radius: calc(var(--pw) * .16); background: #0b0b0c;
  box-shadow:
    inset 0 0 0 max(1px, calc(var(--pw) * .006)) #48484c,
    inset 0 0 0 max(2px, calc(var(--pw) * .013)) #161618,
    0 calc(var(--pw) * (.06 + var(--h) * .03)) calc(var(--pw) * (.16 + var(--h) * .08)) calc(var(--pw) * -.05) rgba(18, 28, 45, calc(.32 + var(--h) * .1)),
    0 calc(var(--pw) * .01) calc(var(--pw) * .02) rgba(18, 28, 45, .14);
}
.phone-body::before { content: ""; position: absolute; left: calc(var(--pw) * -.009); top: 20%; width: calc(var(--pw) * .012); height: 7%; border-radius: 2px 0 0 2px; background: #2b2b2e; box-shadow: 0 calc(var(--pw) * .16) 0 #2b2b2e; }
.phone-body::after { content: ""; position: absolute; right: calc(var(--pw) * -.009); top: 27%; width: calc(var(--pw) * .012); height: 11%; border-radius: 0 2px 2px 0; background: #2b2b2e; }
.phone-screen { position: relative; aspect-ratio: 9 / 16; border-radius: calc(var(--pw) * .128); overflow: hidden; background: #1a1a1c; isolation: isolate; transform: translateZ(0); }
.phone-screen video, .phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-island { position: absolute; z-index: 2; top: calc(var(--pw) * .062); left: 50%; width: calc(var(--pw) * .27); height: calc(var(--pw) * .078); border-radius: 99px; background: #000; transform: translateX(-50%); }
.phone--sm .phone-island { display: none; }
.phone-body .light { border-radius: calc(var(--pw) * .16); }
.credit { margin: calc(var(--s) * 1.1) auto 0; font-size: var(--b-cap); line-height: 1.25; color: var(--muted); text-align: center; max-width: calc(var(--pw) * 1.25); text-wrap: balance; }
.phone--sm .credit { font-size: max(11px, calc(var(--s) * .78)); margin-top: calc(var(--s) * .7); max-width: none; }
.phone-tag {
  position: absolute; z-index: 2; left: calc(var(--pw) * .07); bottom: calc(var(--pw) * .08); padding: .32em .6em .36em;
  background: var(--blue); color: #fff; border-radius: 999px; font-size: max(13px, calc(var(--pw) * .062)); line-height: 1; transition: opacity .3s;
}
.play-btn {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(0, 0, 0, .12);
}
.play-btn i { width: 56px; height: 56px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; }
.play-btn i::before { content: ""; width: 0; height: 0; border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.play-btn.is-playing { background: transparent; }
.play-btn.is-playing i { opacity: 0; }

/* ======================================================================
   DECK ENGINE
   ====================================================================== */
.screen { --gc: var(--ground); position: relative; background: var(--gc); }
.screen[data-ground="blue"] { --gc: var(--blue); color: #fff; }
.screen::before {
  content: ""; position: absolute; z-index: 1; left: -5%; width: 110%; height: 2.25vw; top: calc(-2.25vw + 1px);
  background: var(--gc); transform: rotate(180deg); pointer-events: none;
  -webkit-mask: url("logo/wave-section-blue.svg") top / 100% 100% no-repeat; mask: url("logo/wave-section-blue.svg") top / 100% 100% no-repeat;
}
.screen-clip { position: relative; }
.shade { position: absolute; inset: 0; z-index: 40; background: #0a1220; opacity: 0; pointer-events: none; }

.is-deck body { overflow: hidden; height: 100%; }
.is-deck, .is-deck body { overscroll-behavior: none; }
.is-deck .deck { position: fixed; inset: 0; }
.is-deck .screen { position: absolute; inset: 0; visibility: hidden; transform: translate3d(0, 100%, 0); }
.is-deck .screen.is-active { visibility: visible; transform: none; z-index: 2; }
.is-deck .screen.is-moving { visibility: visible; }
.is-deck .screen-clip { position: absolute; inset: 0; overflow: hidden; }
.is-deck .screen[data-tall] .screen-clip { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--blue) transparent; }
.is-deck .screen[data-tall] .screen-clip::-webkit-scrollbar { width: 8px; }
.is-deck .screen[data-tall] .screen-clip::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 8px; }
.wrap { position: relative; height: 100%; padding: calc(var(--s) * 6.6) var(--gut) calc(var(--s) * 3.4); }

/* ---------- entrance motion (only with JS; content is visible without it) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-a] { transition: opacity .9s var(--ease-out), transform 1.15s var(--ease-out), clip-path 1.15s var(--ease-out); transition-delay: calc(var(--d, 0) * 75ms + var(--base, 180ms)); }
  .js .screen:not(.is-shown) [data-a] { transition: none; }
  .js .screen:not(.is-shown) [data-a="rise"] { opacity: 0; transform: translate3d(0, calc(var(--s) * 2.4), 0); }
  .js [data-a="line"] > span { transition: transform 1.1s var(--ease-out); transition-delay: inherit; }
  .js .screen:not(.is-shown) [data-a="line"] > span { transform: translate3d(0, 108%, 0); transition: none; }
  .js .screen:not(.is-shown) [data-a="pop"] { opacity: 0; transform: scale(.55); }
  .js .screen.is-shown [data-a="pop"] { transition: opacity .5s var(--ease-out), transform .8s var(--ease-pop); transition-delay: calc(var(--d, 0) * 75ms + var(--base, 180ms)); }
  .js .screen:not(.is-shown) [data-a="card"] { opacity: 0; transform: translate3d(0, calc(var(--s) * 6), 0) rotate(var(--r0, 2deg)); }
  .js .screen:not(.is-shown) [data-a="phone"] { opacity: 0; transform: translate3d(calc(var(--s) * 2), calc(var(--s) * 10), 0) rotate(5deg); }
  .js .screen:not(.is-shown) [data-a="drift"] { opacity: 0; transform: translate3d(var(--dx, 0), calc(var(--s) * 7), 0) scale(.86) rotate(var(--dr, -6deg)); }
  .js .screen:not(.is-shown) [data-a="num"] { transform: translate3d(0, 42%, 0); opacity: 0; }
  .js .screen:not(.is-shown) [data-a="panel"] { clip-path: inset(100% 0 0 0 round var(--radius-big)); }
  .js [data-a="panel"] { clip-path: inset(0 0 0 0 round var(--radius-big)); transition-duration: 1.3s; }
}

/* ======================================================================
   01 COVER
   ====================================================================== */
.s-cover .screen-clip { min-height: 100%; }
.cover-center {
  position: absolute; left: 50%; top: calc(var(--s) * 4.2); width: 92%; transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cover-face { font-size: calc(var(--s) * 5.6); margin-bottom: calc(var(--s) * 1.3); }
.cover-title { font-family: var(--f-head); font-weight: 400; font-size: var(--t-mega); line-height: .86; color: var(--blue); }
.cover-title .ln { padding-block: .08em; margin-block: -.08em; }
.cover-sub { margin: calc(var(--s) * 1.7) 0 calc(var(--s) * 1.6); font-size: var(--b-base); line-height: 1.2; }
.cover-floats { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cf { position: absolute; will-change: transform; }
.cf img { width: 100%; height: auto; filter: drop-shadow(calc(var(--s) * .9) calc(var(--s) * 1.2) calc(var(--s) * .7) rgba(20, 22, 28, .16)); }
.cf .bob > img { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(calc(var(--rot, 0deg) + var(--pr, 0deg))); }
.cf-box { width: calc(var(--s) * 29); right: -9%; top: 3%; --rot: -14deg; --dx: 10vw; }
.cf-orange { width: calc(var(--s) * 14.5); left: 1%; top: 49%; --rot: 14deg; --dx: -6vw; z-index: 2; }
.cf-katsu { width: calc(var(--s) * 15.5); left: 3.5%; top: 9%; --rot: -9deg; --dx: -6vw; }
.cf-straw { width: calc(var(--s) * 12.5); right: 4.5%; top: 47%; --rot: 11deg; --dx: 6vw; }
.cf-avo { width: calc(var(--s) * 9.5); left: 7.5%; top: 33%; --rot: 6deg; z-index: 1; }
.cf-nigiri { width: calc(var(--s) * 20); right: 9%; top: 63%; --rot: -4deg; z-index: 6; }

/* ======================================================================
   02 PROBLEM
   ====================================================================== */
.problem-grid { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: calc(var(--s) * 3); align-items: center; }
.problem-copy .h-xl { font-size: calc(var(--s) * 6.4); margin-bottom: calc(var(--s) * 2.4); text-wrap: balance; }
.problem-copy .lead { margin-bottom: calc(var(--s) * 2.4); }
.chips { display: flex; flex-wrap: wrap; gap: calc(var(--s) * .8); }
.chip { background: #fff; border-radius: 999px; padding: .5em .95em .55em; font-size: var(--b-small); line-height: 1.1; box-shadow: 0 6px 18px -10px rgba(18, 28, 45, .25); }
.problem-signals { flex-direction: column; align-items: flex-start; gap: 10px; }
.problem-signals .chip { display: flex; align-items: center; gap: 10px; padding: 10px 17px 10px 10px; line-height: 1.25; }
.signal-cross { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: #fbeaea; fill: none; stroke: var(--signal-red); stroke-width: 2.3; stroke-linecap: round; }
.problem-cluster { position: relative; height: calc(var(--s) * 46); }
.pc { position: absolute; width: calc(var(--s) * 13.4); z-index: 1; transition: z-index 0s .3s; }
.pc:hover { z-index: 10; transition-delay: 0s; }
.pc-card { position: relative; border-radius: calc(var(--s) * 1.3); overflow: hidden; background: #ccc; aspect-ratio: 9 / 16; box-shadow: var(--shadow-card); transform-origin: 50% 60%; transition: filter .3s var(--ease-ui); }
.pc-card img { width: 100%; height: 100%; object-fit: cover; }
.pc-cap { position: absolute; z-index: 2; left: 8%; bottom: 5%; max-width: 84%; background: #fff; color: #000; border-radius: 999px; padding: .38em .7em .42em; font-size: max(11.5px, calc(var(--s) * .9)); line-height: 1.1; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .4); transition: transform .4s var(--ease-out); transform-origin: left bottom; }
.pc:hover .pc-cap { transform: scale(1.08); }
.pc .bob > .pc-card { rotate: var(--r, 0deg); }
.pc-1 { left: 0; top: 20%; --r: -7deg; --r0: -12deg; }
.pc-2 { left: 18%; top: 1%; --r: 4deg; --r0: 9deg; z-index: 2; }
.pc-3 { left: 36%; top: 23%; --r: -3deg; --r0: -8deg; z-index: 3; }
.pc-4 { left: 54%; top: 3%; --r: 5deg; --r0: 11deg; z-index: 2; }
.pc-5 { left: 72%; top: 21%; --r: -5deg; --r0: -10deg; }
.problem-cluster:hover .pc:not(:hover) .pc-card { filter: saturate(.7) brightness(.95); }
.pc-face {
  position: absolute; z-index: 12; left: 44%; bottom: -3%; transform: translateX(-50%);
  width: calc(var(--s) * 7.6); aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px -10px rgba(18, 28, 45, .35);
}
.pc-face .face { font-size: calc(var(--s) * 4.4); }

/* ======================================================================
   03 WHY US
   ====================================================================== */
.why-wrap { display: flex; flex-direction: column; gap: calc(var(--s) * 1.7); padding-top: calc(var(--s) * 7); padding-bottom: calc(var(--s) * 3); }
.why-head .h-xl { font-size: calc(var(--s) * 6.2); margin-bottom: calc(var(--s) * .9); }
.why-head .lead { max-width: 70ch; font-size: var(--b-base); }
.why-stats { display: flex; gap: calc(var(--s) * 5); }
.why-stats > div { display: flex; flex-direction: column-reverse; gap: 5px; }
.why-stats dd { margin: 0; font-family: var(--f-head); font-size: calc(var(--s) * 5.2); line-height: .9; color: var(--blue); }
.why-stats dt { font-size: var(--b-small); }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--s) * 4.4); align-items: start; }
.step { position: relative; }
.step:nth-child(2) { --r0: -2deg; translate: 0 calc(var(--s) * -1.4); }
.step:nth-child(3) { translate: 0 calc(var(--s) * .8); }
.step:nth-child(4) { translate: 0 calc(var(--s) * -.6); }
.step-card { min-height: calc(var(--s) * 19.5); padding: calc(var(--s) * 2.2) calc(var(--s) * 2.2) calc(var(--s) * 2.3); gap: calc(var(--s) * .9); }
.step-n { font-size: calc(var(--s) * 5.6); line-height: .8; color: var(--blue); margin-bottom: calc(var(--s) * 1.2); }
.step-t { font-size: calc(var(--s) * 2.9); line-height: .92; }
.step-card p, .step-p { font-size: max(16px, calc(var(--s) * 1.3)); line-height: 1.24; color: #1d1f22; }
.step-card .more { margin-top: auto; padding-top: calc(var(--s) * 1); }
.step-arrow { position: absolute; z-index: 5; right: calc(var(--s) * -4.3); top: calc(var(--s) * 4); width: calc(var(--s) * 4.2); height: auto; overflow: visible; pointer-events: none; }
.step-arrow path, .ghost-arrow path { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.why-cta { display: flex; flex-direction: column; align-items: flex-start; }

/* ======================================================================
   04 GOAL
   ====================================================================== */
.s-goal .screen-clip { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; }
.goal-wave { position: absolute; z-index: 1; left: -5%; width: 110%; height: 2.25vw; background: var(--ground); pointer-events: none;
  -webkit-mask: url("logo/wave-section-blue.svg") top / 100% 100% no-repeat; mask: url("logo/wave-section-blue.svg") top / 100% 100% no-repeat; }
.goal-wave--bottom { bottom: -1px; transform: rotate(180deg); }
.goal-wave--top { top: -1px; transition: opacity .6s var(--ease-ui) .5s; }
.is-deck .s-goal:not(.is-shown) .goal-wave--top { opacity: 0; transition: none; }
.goal-center { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(var(--s) * 4) var(--gut); }
.goal-face { font-size: calc(var(--s) * 13); margin-bottom: calc(var(--s) * 2.6); }
.goal-title { font-family: var(--f-head); font-weight: 400; font-size: var(--t-huge); line-height: .87; color: #fff; }
.goal-lines { margin-top: calc(var(--s) * 3); display: grid; gap: calc(var(--s) * .7); }
.goal-line { font-size: max(24px, calc(var(--s) * 2.3)); line-height: 1.1; color: #fff; }


/* ======================================================================
   05 ALL IN
   ====================================================================== */
.allin-wrap { display: flex; flex-direction: column; }
.allin-title { font-family: var(--f-head); font-weight: 400; line-height: .86; }
.allin-title .ln > span { white-space: nowrap; font-size: calc(var(--s) * 10); }
.ln-crazy { clip-path: none; overflow: visible; margin: .04em 0 .1em; }
.allin-title .ln-crazy > span { padding-left: .7em; }
.crazy { position: relative; display: inline-block; }
.burst { max-width: none; position: absolute; width: 150%; height: 160%; left: -24%; top: -30%; fill: var(--green); overflow: visible; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .burst { transform: scale(.4) rotate(-14deg); opacity: 0; transition: transform .7s var(--ease-pop), opacity .25s; }
  .js .screen.is-shown .burst { transform: none; opacity: 1; transition-delay: .95s; }
}
.allin-body { margin-top: calc(var(--s) * 2.6); display: grid; gap: calc(var(--s) * .6); }
.allin-p { font-size: var(--b-lead); }
.allin-last { font-size: max(26px, calc(var(--s) * 3.4)); line-height: 1.05; }

/* ======================================================================
   06 PILLARS
   ====================================================================== */
.pillars-wrap { display: flex; flex-direction: column; gap: calc(var(--s) * 6); }
.pillars-head { text-align: center; }
.pillars-head .h-xl { font-size: calc(var(--s) * 8.2); }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--s) * 2.2); align-items: start; }
.pillar:nth-child(2) { translate: 0 calc(var(--s) * 1.8); }
.pillar:nth-child(3) { translate: 0 calc(var(--s) * -.8); }
.pillar:nth-child(4) { translate: 0 calc(var(--s) * 1.2); }
.pillar-card { min-height: calc(var(--s) * 25); padding: calc(var(--s) * 2) calc(var(--s) * 2) calc(var(--s) * 2.2); gap: calc(var(--s) * .9); }
.pillar-n { font-size: calc(var(--s) * 9.6); line-height: .78; margin-bottom: calc(var(--s) * 2); }
.pillar-t { font-size: calc(var(--s) * 2.6); line-height: .92; }
.pillar-card p { font-size: max(16px, calc(var(--s) * 1.3)); line-height: 1.25; color: #1d1f22; margin-bottom: calc(var(--s) * 1.2); }
.pillar-card .more { margin-top: auto; }
.pillar-cut { position: absolute; z-index: 4; pointer-events: none; height: auto; filter: drop-shadow(calc(var(--s) * .6) calc(var(--s) * .8) calc(var(--s) * .5) rgba(20, 22, 28, .16)); transform: translateZ(30px); }
.pc-avo { width: 46%; right: -9%; top: -11%; rotate: 10deg; }
.pc-box { width: 64%; right: -13%; top: -9%; rotate: -12deg; }
.pc-sando { width: 54%; right: -12%; top: -6%; rotate: 9deg; }
.pc-bag { width: 44%; right: -8%; top: -14%; rotate: 7deg; }

/* ======================================================================
   07 + 08 FORMATS
   ====================================================================== */
.formats-grid { display: grid; grid-template-columns: auto minmax(calc(var(--s) * 30), 1fr) auto; gap: calc(var(--s) * 3.4); align-items: center; }
.big-num { font-size: calc(var(--s) * 46); line-height: .74; padding-top: .06em; clip-path: inset(-.1em -.1em 0 -.1em); margin-left: calc(var(--s) * -1); }
.big-num span { display: block; }
.formats-copy .h-hero { margin-bottom: calc(var(--s) * 1); }
.num-label { font-size: var(--t-nav); line-height: 1; margin-bottom: calc(var(--s) * 2.2); }
.formats-copy .body { margin-bottom: calc(var(--s) * 1.6); }
.proof { font-size: var(--b-small); line-height: 1.3; color: #1d1f22; padding-left: calc(var(--s) * 1.1); border-left: 2px solid currentColor; max-width: 36ch; margin-bottom: calc(var(--s) * 2.4); }
.s-premium .proof { border-color: var(--blue); }
.s-everyday .proof { border-color: var(--green); }
.formats-stage { padding-right: calc(var(--s) * 2); }
.stage-phone { position: relative; }
.s-everyday .big-num { font-size: calc(var(--s) * 29); }
.s-everyday .formats-grid { grid-template-columns: auto minmax(calc(var(--s) * 25), 1fr) auto; }
.s-everyday .formats-grid { gap: calc(var(--s) * 2.6); }
.mini-phones { display: grid; grid-template-columns: repeat(4, auto); gap: calc(var(--s) * 1.6) calc(var(--s) * 1.5); align-items: start; }
.mp:nth-child(4n+1) { translate: 0 calc(var(--s) * 1.4); }
.mp:nth-child(4n+3) { translate: 0 calc(var(--s) * .8); }
.mp:nth-child(4n+2) { translate: 0 calc(var(--s) * -.6); }
.mp .phone-body { transition: box-shadow .3s; }

/* ======================================================================
   09 SEEDS
   ====================================================================== */
.seed-grid { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); gap: calc(var(--s) * 3); align-items: center; }
.seed-copy { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; }
.seed-copy .kicker { margin-bottom: calc(var(--s) * 1); }
.tag { display: inline-flex; align-items: center; gap: .42em; font-size: calc(var(--s) * 1.45); line-height: 1; margin-bottom: calc(var(--s) * 2.2); background: #fff; padding: .45em .75em .45em .6em; border-radius: 999px; }
.dot { width: .72em; height: .72em; border-radius: 50%; display: inline-block; margin-top: -.08em; }
.dot--blue { background: var(--blue); }
.dot--green { background: var(--green); }
.seed-copy .h-seed { margin-bottom: calc(var(--s) * 2.2); }
.seed-copy .body { font-size: var(--b-lead); line-height: 1.14; max-width: 24ch; }
.seed-foot { margin-top: calc(var(--s) * 3.4); font-size: var(--b-small); color: var(--muted); max-width: 32ch; }
.seed-stage { position: relative; height: calc(var(--s) * 52); display: flex; align-items: center; justify-content: center; }
.sp-main { z-index: 3; }
.sp-second { position: absolute; z-index: 2; }
.float-cut { position: absolute; z-index: 4; pointer-events: none; }
.float-cut img { width: 100%; height: auto; filter: drop-shadow(calc(var(--s) * .8) calc(var(--s) * 1.1) calc(var(--s) * .6) rgba(20, 22, 28, .17)); }
.seed-bg { position: absolute; z-index: 0; overflow: hidden; border-radius: var(--radius-big); }
.seed-bg img { width: 100%; height: 100%; object-fit: cover; }

/* 9.1 picnic */
.seed-bg--gingham { right: -3vw; top: 11%; width: 44%; height: 80%; }
.s-seed-picnic .sp-main { translate: calc(var(--s) * 3) 0; }
.s-seed-picnic .sp-second { left: 2%; bottom: 4%; }
.s-seed-picnic .sp-second .phone-body { rotate: -7deg; }
.fc-picnic-1 { width: calc(var(--s) * 15); right: -1%; bottom: -3%; --dx: 6vw; rotate: -10deg; }
.fc-picnic-2 { width: calc(var(--s) * 16); left: 6%; top: 4%; --dx: -6vw; rotate: 8deg; }
.s-seed-picnic .sp-second .credit, .s-seed-picnic .sp-main .credit { background: #fff; color: #000; border-radius: 999px; padding: .4em .8em .45em; width: max-content; max-width: none; box-shadow: 0 6px 16px -8px rgba(0,0,0,.3); }

/* 9.2 leaderboard */
.s-seed-board .sp-main { translate: calc(var(--s) * -8) 0; }
.board-wrap { position: absolute; z-index: 4; right: 2%; top: 18%; }
.board {
  position: relative; width: calc(var(--s) * 25); background: #fff; border-radius: var(--radius-card); padding: calc(var(--s) * 2) calc(var(--s) * 2.2) calc(var(--s) * 2.2);
  box-shadow: var(--shadow-card); rotate: 4deg;
}
.board-title { font-size: calc(var(--s) * 1.4); color: var(--blue); margin-bottom: calc(var(--s) * 1.3); display: flex; align-items: center; gap: .5em; }
.board-title::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--green); }
.board-rows { display: grid; gap: calc(var(--s) * .55); }
.board-rows li { display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--s) * .9); align-items: baseline; font-size: calc(var(--s) * 2.6); line-height: 1; padding-bottom: calc(var(--s) * .55); border-bottom: 1px solid var(--line); }
.board-rows li > :first-child { color: var(--blue); }
.board-rows li > :last-child { font-size: .72em; }
.board-next { margin-top: calc(var(--s) * 1.3); font-size: calc(var(--s) * 2.6); line-height: 1; color: var(--green-ink); }
.flap { display: inline-block; transform-origin: 50% 50%; backface-visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .js .s-seed-board .flap { transition: transform .55s var(--ease-pop), opacity .3s; }
  .js .s-seed-board:not(.is-shown) .flap { transform: perspective(300px) rotateX(-95deg); opacity: 0; transition: none; }
}
.fc-board-1 { width: calc(var(--s) * 11); left: 0; bottom: 2%; rotate: -12deg; --dx: -5vw; }
.fc-board-2 { width: calc(var(--s) * 9); right: 12%; bottom: 3%; rotate: 14deg; --dx: 5vw; }

/* 9.3 who wants sushi */
.fc-bag { width: calc(var(--s) * 27); right: -7%; top: 0; z-index: 1; rotate: 8deg; --dx: 8vw; }
.s-seed-sushi .sp-main { translate: calc(var(--s) * -4) 0; }
.s-seed-sushi .sp-second { right: 3%; bottom: 6%; }
.s-seed-sushi .sp-second .phone-body { rotate: 7deg; }
.views-chip {
  position: absolute; z-index: 6; left: calc(var(--s) * -3.5); top: -3%; background: var(--blue); color: #fff; border-radius: 999px;
  font-size: max(24px, calc(var(--s) * 2.4)); line-height: 1; padding: .36em .7em .4em; rotate: -6deg; box-shadow: 0 12px 24px -12px rgba(0, 60, 140, .55);
}

/* 9.4 one minute */
.countdown { position: absolute; z-index: 1; right: -1.5%; top: 1%; font-size: calc(var(--s) * 11.5); line-height: .8; color: var(--blue); font-variant-numeric: tabular-nums; }
.countdown span { display: block; }
.countdown.is-done span { color: var(--green); }
.s-seed-minute .sp-main { translate: calc(var(--s) * -10) calc(var(--s) * 1.5); }
.fc-minute { width: calc(var(--s) * 12); right: 8%; bottom: 8%; rotate: 9deg; --dx: 5vw; }
.ghost-board { position: relative; display: flex; align-items: flex-end; gap: calc(var(--s) * .4); margin-top: calc(var(--s) * 1.8); }
.ghost-arrow { width: calc(var(--s) * 8); height: auto; overflow: visible; margin-bottom: calc(var(--s) * 2); }
.gb-card { display: grid; gap: calc(var(--s) * .3); background: rgba(255, 255, 255, .55); border: 1.5px dashed rgba(0, 120, 255, .55); border-radius: calc(var(--s) * 1); padding: calc(var(--s) * .9) calc(var(--s) * 1.2); font-size: max(13px, calc(var(--s) * 1.1)); line-height: 1; color: rgba(0, 0, 0, .55); rotate: 3deg; transition: background .25s, rotate .4s var(--ease-pop), color .25s; }
.gb-title { color: var(--blue); }
.gb-row b { font-weight: 400; color: var(--blue); }
.ghost-board:hover .gb-card { background: #fff; rotate: 0deg; color: #000; }

/* ======================================================================
   10 ADD-ONS
   ====================================================================== */
.addons-wrap { display: grid; grid-template-columns: minmax(0, 31fr) minmax(0, 69fr); gap: calc(var(--s) * 3.4); align-items: center; }
.addons-head .h-xl { font-size: calc(var(--s) * 7.4); margin-bottom: calc(var(--s) * 1.8); }
.addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--s) * 2.2); align-items: start; }
.addon-a { translate: 0 calc(var(--s) * 2.4); }
.addon-b { translate: 0 calc(var(--s) * -1.4); }
.addon-c { translate: 0 calc(var(--s) * 1); }
.addon-card { padding: calc(var(--s) * .9) calc(var(--s) * .9) calc(var(--s) * 1.8); gap: calc(var(--s) * .8); }
.addon-photo { position: relative; border-radius: calc(var(--s) * 1); overflow: hidden; aspect-ratio: 4 / 4.6; margin-bottom: calc(var(--s) * .8); background: #ddd; }
.addon-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.addon-card:hover .addon-photo img { transform: scale(1.04); }
.addon-t { font-size: calc(var(--s) * 2.35); line-height: .92; padding-inline: calc(var(--s) * .9); }
.addon-card p { font-size: var(--b-small); line-height: 1.25; padding-inline: calc(var(--s) * .9); min-height: 2.5em; }
.addon-card .pill { align-self: flex-start; margin: calc(var(--s) * .4) calc(var(--s) * .9) 0; }

/* ======================================================================
   11 PACKAGES + CLOSE
   ====================================================================== */
.s-packages .wrap { height: auto; min-height: 100%; }
.packages-wrap { display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--s) * 5.4); }
.packages-head { text-align: center; margin-bottom: calc(var(--s) * 3.4); }
.packages-head .kicker { margin-bottom: calc(var(--s) * 1); }
.packages-head .h-xl { font-size: calc(var(--s) * 5.6); }
.packs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: calc(var(--s) * 2.2); align-items: center; width: min(100%, calc(var(--s) * 84)); }
.pack-card { padding: calc(var(--s) * 2.2) calc(var(--s) * 2.2) calc(var(--s) * 2.3); gap: calc(var(--s) * .55); min-height: calc(var(--s) * 33); }
.pack-name { font-size: calc(var(--s) * 3.5); line-height: .9; margin-bottom: calc(var(--s) * .3); }
.pack-term { font-size: calc(var(--s) * 1.45); line-height: 1; color: var(--blue); margin-bottom: calc(var(--s) * 1.1); }
.pack-vol { font-size: var(--b-small); line-height: 1.2; }
.pack-rates { font-size: var(--b-small); line-height: 1.3; color: #303338; padding-bottom: calc(var(--s) * 1.1); border-bottom: 1px solid var(--line); margin-bottom: calc(var(--s) * .8); display: grid; gap: .3em; }
.pack-rates .ph { font-size: max(13px, calc(var(--s) * 1)); }
.pack-month { font-size: calc(var(--s) * 3.2); line-height: .95; white-space: nowrap; }
.pack-month .per { font-size: .42em; }
.pack-month .ph { font-size: max(13px, calc(var(--s) * 1)); }
.pack-total { font-size: var(--b-cap); color: var(--muted); }
.pack-total > span { display: block; margin-top: .3em; }
.pack-ghost, .pack-events { font-size: var(--b-small); line-height: 1.3; }
.pack-ghost { margin-bottom: calc(var(--s) * 1); }
.pack-ghost p + p, .pack-events p + p { margin-top: .3em; }
.pack-events { border-top: 1px solid var(--line); margin-top: calc(var(--s) * .9); padding-top: calc(var(--s) * 1.1); }
.sheet-package-rates { display: grid; gap: .4em; font-size: var(--b-base); margin-bottom: calc(var(--s) * 1.3); }
.sheet-package-extra { display: grid; gap: .4em; font-size: var(--b-base); margin-block: calc(var(--s) * 1.3); }
.pack-line { margin-top: auto; padding-top: calc(var(--s) * 1); font-size: var(--b-small); line-height: 1.2; }
.pack-card--pick { background: var(--blue); color: #fff; min-height: calc(var(--s) * 40); padding-top: calc(var(--s) * 3.4); box-shadow: 0 calc(var(--s) * (2 + var(--h) * 1)) calc(var(--s) * (4.6 + var(--h) * 2.2)) calc(var(--s) * -1.4) rgba(0, 70, 170, calc(.42 + var(--h) * .14)), 0 1px 2px rgba(0, 40, 100, .2); }
.pack-card--pick .pack-term { color: #fff; }
.pack-card--pick .pack-vol, .pack-card--pick .pack-rates, .pack-card--pick .pack-line, .pack-card--pick .pack-note { color: #fff; font-size: max(17px, calc(var(--s) * 1.25)); }
.pack-card--pick .pack-rates { border-color: rgba(255, 255, 255, .3); }
.pack-card--pick .pack-total { color: #fff; font-size: max(16px, calc(var(--s) * 1.1)); }
.pack-card--pick .pack-month { font-size: calc(var(--s) * 3.6); }
.pack-card--pick .light { background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .28), rgba(255, 255, 255, .06) 40%, transparent 65%); }
.pack-note { font-size: var(--b-cap); }
.save-chip { align-self: flex-start; margin-top: calc(var(--s) * .6); background: #fff; color: var(--blue); border-radius: 999px; font-size: max(16px, calc(var(--s) * 1.35)); line-height: 1; padding: .4em .7em .44em; }
.pick-badge { position: absolute; z-index: 5; top: calc(var(--s) * -2.4); right: calc(var(--s) * -1.6); width: calc(var(--s) * 12); aspect-ratio: 134 / 56; display: grid; place-items: center; color: #fff; font-size: max(17px, calc(var(--s) * 1.7)); line-height: 1; rotate: 8deg; background: url("logo/order-blob-green.svg") center / contain no-repeat; filter: drop-shadow(0 8px 12px rgba(0, 60, 30, .25)); transform: translateZ(40px); }
.pick-badge span { position: relative; top: -.04em; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .js .s-packages:not(.is-shown) .pick-badge { scale: .3; opacity: 0; }
  .js .s-packages.is-shown .pick-badge { transition: scale .8s var(--ease-pop) 1.1s, opacity .3s 1.1s; }
}
.pack-show { z-index: 2; }
.packs-extra { width: min(100%, calc(var(--s) * 84)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: calc(var(--s) * 1.4) calc(var(--s) * 4); margin-top: calc(var(--s) * 3.6); padding-top: calc(var(--s) * 2); border-top: 1px solid var(--line); }
.setup-fee { display: flex; align-items: center; gap: calc(var(--s) * 1); flex-wrap: wrap; margin-bottom: calc(var(--s) * .6); }
.setup-label { font-size: calc(var(--s) * 2.4); line-height: 1; }
.setup-fee .ph { font-size: max(14px, calc(var(--s) * 1.1)); }
.setup-text, .addon-lines { font-size: var(--b-small); line-height: 1.3; }
.addon-lines { display: grid; gap: .35em; color: #1d1f22; }
.addon-lines b { font-weight: 700; }
.small-print { grid-column: 1 / -1; font-size: var(--b-cap); color: var(--muted); }
.setup-row.is-flash { animation: flash 1.4s var(--ease-ui); border-radius: 12px; }
@keyframes flash { 0%, 60% { background: rgba(0, 120, 255, .12); box-shadow: 0 0 0 10px rgba(0, 120, 255, .12); } 100% { background: transparent; box-shadow: 0 0 0 10px transparent; } }

.close { position: relative; margin-top: calc(var(--s) * 8); }
.close-top { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--gut) calc(var(--s) * 9); }
.close-face { font-size: calc(var(--s) * 5.6); margin-bottom: calc(var(--s) * 2); }
.close-line { font-size: var(--t-huge); line-height: .86; color: var(--blue); max-width: 9.5em; margin-bottom: calc(var(--s) * 3); }
.close-cta { display: flex; flex-direction: column; align-items: center; }
.footer-band { position: relative; background: var(--blue); padding: calc(var(--s) * 10) 2vw calc(var(--s) * 1.6); }
.footer-band::before { content: ""; position: absolute; left: -5%; width: 110%; height: 2.25vw; top: calc(-2.25vw + 1px); background: var(--blue); transform: rotate(180deg);
  -webkit-mask: url("logo/wave-section-blue.svg") top / 100% 100% no-repeat; mask: url("logo/wave-section-blue.svg") top / 100% 100% no-repeat; }
.footer-wordmark { width: 100%; height: auto; }

/* ======================================================================
   SHEET (card to sheet morph)
   ====================================================================== */
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(233, 234, 232, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .46s var(--ease-sheet); }
.scrim.is-on { opacity: 1; }
.sheet {
  position: fixed; z-index: 71; left: 0; top: 0; width: 0; height: 0; overflow: hidden; background: #fff; color: var(--ink);
  border-radius: var(--radius-card); box-shadow: 0 30px 80px -20px rgba(18, 28, 45, .35), 0 2px 6px rgba(18, 28, 45, .08);
}
.sheet[hidden] { display: none; }
.sheet.is-anim { transition: left .48s var(--ease-sheet), top .48s var(--ease-sheet), width .48s var(--ease-sheet), height .48s var(--ease-sheet), border-radius .48s var(--ease-sheet); }
.sheet.is-closing { transition-timing-function: var(--ease-close); transition-duration: .42s; }
.sheet.is-blue { background: var(--blue); color: #fff; }
.sheet-ghost { position: absolute; left: 0; top: 0; pointer-events: none; }
.sheet-ghost > * { box-shadow: none !important; transform: none !important; translate: none !important; }
.sheet-body { position: absolute; left: 0; top: 0; padding: calc(var(--s) * 3.2) calc(var(--s) * 3.4) calc(var(--s) * 3.4); opacity: 0; overflow-y: auto; max-height: 100%; }
.sheet.is-open .sheet-body { opacity: 1; transition: opacity .3s var(--ease-ui) .14s; }
.sheet.is-closing .sheet-body { opacity: 0; transition: opacity .12s linear; }
.sheet-ghost { transition: opacity .2s linear .08s; }
.sheet.is-open .sheet-ghost { opacity: 0; }
.sheet.is-closing .sheet-ghost { opacity: 1; transition: opacity .25s linear .12s; }
.sheet-close { position: absolute; z-index: 3; right: calc(var(--s) * 1.4); top: calc(var(--s) * 1.4); width: 44px; height: 44px; border-radius: 50%; background: var(--ground); display: grid; place-items: center; opacity: 0; transition: opacity .25s, background .2s, transform .3s var(--ease-out); }
.sheet-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.sheet-close:hover { background: var(--blue); color: #fff; transform: rotate(90deg); }
.sheet.is-blue .sheet-close { background: rgba(255, 255, 255, .2); color: #fff; }
.sheet.is-blue .sheet-close:hover { background: #fff; color: var(--blue); }
.sheet.is-open .sheet-close { opacity: 1; transition-delay: .2s; }
.sheet-handle { display: none; }

.sheet-kicker { font-size: calc(var(--s) * 1.8); line-height: 1; color: var(--blue); margin-bottom: calc(var(--s) * 1); }
.sheet.is-blue .sheet-kicker { color: #fff; }
.sheet-title { font-size: calc(var(--s) * 4.6); line-height: .9; margin-bottom: calc(var(--s) * 1.6); padding-right: 48px; }
.sheet-text { font-size: var(--b-base); line-height: 1.25; max-width: 40ch; margin-bottom: calc(var(--s) * 2); }
.sheet-front { font-size: var(--b-lead); line-height: 1.15; margin-bottom: calc(var(--s) * 1.6); color: var(--blue); }
.sheet-small { font-size: var(--b-small); line-height: 1.3; color: var(--muted); margin-bottom: calc(var(--s) * .6); }
.sheet.is-blue .sheet-small { color: #fff; }
.sheet-row { display: flex; align-items: center; gap: calc(var(--s) * 1); flex-wrap: wrap; margin-bottom: calc(var(--s) * .6); }
.sheet-label { font-size: calc(var(--s) * 2.4); line-height: 1; }
.sheet-body > .pill { margin-top: calc(var(--s) * 1.6); }
.format-list { display: grid; gap: calc(var(--s) * .8); margin-top: calc(var(--s) * .4); }
.format-list li { display: flex; align-items: center; gap: calc(var(--s) * 1.2); font-size: var(--b-lead); padding: calc(var(--s) * 1) calc(var(--s) * 1.3); background: var(--ground); border-radius: calc(var(--s) * 1); }
.format-list span { width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: .8em; flex: none; }
.sheet-seeds { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--s) * 1.4); margin-bottom: calc(var(--s) * .4); }
.sheet-seeds a { display: grid; grid-template-columns: calc(var(--s) * 6) 1fr; align-items: center; gap: calc(var(--s) * 1.1); background: var(--ground); border-radius: calc(var(--s) * 1.1); padding: calc(var(--s) * .7); transition: background .2s; }
.sheet-seeds a:hover { background: #dfe8f5; }
.sheet-seeds img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: calc(var(--s) * .7); }
.sheet-seeds span { font-family: var(--f-head); font-size: calc(var(--s) * 1.9); line-height: .95; }
.sheet-list { display: grid; gap: calc(var(--s) * .8); }
.sheet-list li { display: grid; gap: .25em; font-size: var(--b-small); line-height: 1.25; padding: calc(var(--s) * 1) calc(var(--s) * 1.2); background: var(--ground); border-radius: calc(var(--s) * 1); }
.sheet-list b { font-size: calc(var(--s) * 1.9); line-height: 1; }
.sheet-body.has-media { display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); gap: calc(var(--s) * 3); align-items: center; }
.sheet-media { border-radius: calc(var(--s) * 1.1); overflow: hidden; aspect-ratio: 4 / 5; }
.sheet-media img { width: 100%; height: 100%; object-fit: cover; }
.sum { display: grid; gap: 0; margin: calc(var(--s) * .6) 0 calc(var(--s) * 1.8); font-size: var(--b-lead); }
.sum p { display: flex; justify-content: space-between; gap: 1em; padding: calc(var(--s) * .85) 0; border-bottom: 1px solid var(--line); }
.sheet.is-blue .sum p { border-color: rgba(255, 255, 255, .3); }
.sum .sum-total { font-size: calc(var(--s) * 3.6); line-height: 1; border-bottom-width: 2px; border-color: currentColor; }
.sheet.is-blue .sum .sum-total { border-color: #fff; }
.sum .sum-sub { color: var(--muted); font-size: var(--b-base); }
.sheet.is-blue .sum .sum-sub { color: #fff; }
.pick-badge--static { position: static; display: inline-grid; margin: 0 0 calc(var(--s) * 1.2); rotate: -4deg; transform: none; }

/* ======================================================================
   NARROW / SCROLL MODE (phones, portrait tablets, short windows)
   ====================================================================== */
@media not all and (min-width: 900px) and (min-height: 560px) {
  :root {
    --s: clamp(10px, 2.6vw, 13px);
    --gut: max(16px, 5vw);
    --t-mega: clamp(64px, 21vw, 120px);
    --t-huge: clamp(52px, 15vw, 96px);
    --t-xl: clamp(40px, 11.6vw, 72px);
    --t-seed: clamp(46px, 13.6vw, 84px);
    --t-hero: clamp(40px, 11vw, 64px);
    --t-kick: clamp(16px, 4.6vw, 22px);
    --t-nav: clamp(18px, 5vw, 24px);
    --t-3xl: clamp(28px, 8vw, 40px);
    --b-lead: clamp(19px, 5.2vw, 24px);
    --b-base: clamp(17px, 4.5vw, 20px);
    --b-small: clamp(15px, 4vw, 17px);
    --b-cap: 12.5px;
    --radius-big: 7vw;
  }
  .pager { display: none; }
  .chrome { padding-top: max(12px, env(safe-area-inset-top)); padding-left: max(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); background: linear-gradient(var(--chrome-bg, rgba(233, 234, 232, .92)), var(--chrome-bg, rgba(233, 234, 232, .92))); padding-bottom: 10px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .3s, color .3s; }
  body[data-chrome="light"] .chrome { --chrome-bg: rgba(0, 120, 255, .92); }
  body[data-at="cover"] .chrome { --chrome-bg: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .index-menu { right: -6px; width: min(320px, calc(100vw - 24px)); }
  .index-menu a { font-size: 17px; }
  .screen { min-height: 100svh; }
  .screen-clip { overflow-x: clip; }
  .screen + .screen { margin-top: 0; }
  .wrap { height: auto; padding: 92px var(--gut) 64px; }
  .ln { clip-path: none; }
  .js [data-a="line"] > span { clip-path: inset(-.5em -.3em -.1em -.3em); }

  /* cover */
  .s-cover .screen-clip { min-height: 100svh; display: flex; flex-direction: column; }
  .cover-center { position: relative; left: auto; top: auto; transform: none; width: 100%; padding: max(88px, 16svh) var(--gut) 0; flex: 1; }
  .cover-face { font-size: 54px; }
  .cover-title { font-size: var(--t-mega); }
  .cover-sub { max-width: 26ch; }
  .cf-box { width: min(56vw, 330px); right: -16vw; top: 5svh; }
  @media (min-width: 600px) { .cf-box { top: 2svh; right: -12vw; } .cf-katsu { top: 6svh; } }
  .cf-orange { width: min(30vw, 200px); left: -9vw; top: auto; bottom: 21svh; }
  .cf-katsu { width: min(30vw, 210px); left: -6vw; top: 9svh; }
  .cf-straw { width: min(25vw, 170px); right: -5vw; top: auto; bottom: 25svh; }
  .cf-avo { display: none; }
  .cf-nigiri { width: min(40vw, 260px); right: 10vw; top: auto; bottom: 9svh; }

  /* problem */
  .problem-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .problem-cluster { height: auto; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gut)); padding: 18px var(--gut) 72px; scrollbar-width: none; }
  .problem-cluster::-webkit-scrollbar { display: none; }
  .pc { position: relative; left: auto; top: auto; flex: none; width: 42vw; max-width: 200px; scroll-snap-align: center; }
  .pc:nth-child(even) { translate: 0 14px; }
  .pc-face { left: auto; right: var(--gut); bottom: 6px; transform: none; width: 64px; }
  .pc-face .face { font-size: 38px; }

  /* why */
  .why-wrap { gap: 40px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 0; }
  .step { translate: none !important; }
  .step-card { min-height: 0; padding: 18px 16px 20px; }
  .step-n { font-size: 40px; margin-bottom: 10px; }
  .step-t { font-size: 24px; }
  .step-arrow { display: none; }

  /* goal */
  .s-goal .screen-clip { min-height: 100svh; }
  .goal-center { padding: 110px var(--gut) 90px; }
  .goal-face { font-size: 110px; }

  /* all in */
  .allin-wrap { min-height: 100svh; }
  .allin-title .ln > span { white-space: nowrap; }

  /* pillars */
  .pillars-wrap { gap: 36px; }
  .pillars-head { text-align: left; }
  .pillars-head .h-xl { font-size: var(--t-xl); }
  .pillars { grid-template-columns: 1fr; gap: 18px; }
  .pillar { translate: none !important; }
  .pillar-card { min-height: 0; padding: 20px 20px 22px; }
  .pillar-n { font-size: 64px; margin-bottom: 10px; }
  .pillar-t { font-size: 30px; padding-right: 30%; }
  .pillar-card p { padding-right: 22%; }
  .pc-avo { width: 30%; right: -2%; top: -12%; }
  .pc-box { width: 52%; right: -10%; top: -16%; }
  .pc-sando { width: 34%; right: -4%; top: -12%; }
  .pc-bag { width: 28%; right: 0; top: -16%; }

  /* formats */
  .formats-grid, .formats-grid--everyday, .s-everyday .formats-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .s-everyday .big-num { font-size: clamp(170px, 52vw, 300px); }
  .s-premium .phone--lg { --pw: min(62vw, 300px); }
  .big-num { font-size: clamp(170px, 52vw, 300px); margin: 0 0 -10px -6px; }
  .formats-stage { padding: 0; display: flex; justify-content: center; }
  .phone--lg { --pw: min(62vw, 280px); }
  .phone--md { --pw: min(40vw, 190px); }
  .phone--sm { --pw: 30vw; }
  .mini-phones { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gut)); padding: 18px var(--gut) 24px; scrollbar-width: none; }
  .mini-phones::-webkit-scrollbar { display: none; }
  .mp { flex: none; scroll-snap-align: start; translate: none !important; }
  .mp .phone--sm { --pw: 36vw; }

  /* seeds: phone first, copy under it */
  .seed-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .seed-stage .credit { max-width: var(--pw); }
  .s-seed-picnic .sp-main .credit { max-width: var(--pw); width: auto; }
  .s-seed-picnic .sp-main { translate: 12vw 0; }
  .s-seed-picnic .sp-second { left: -3vw; bottom: 20px; }
  .s-seed-picnic .sp-second .credit { background: #fff; color: #000; border-radius: 10px; padding: .35em .6em; }
  .seed-stage { order: -1; height: auto; min-height: 0; padding: 8px 0 12px; }
  .seed-copy .body { max-width: none; }
  .seed-foot { margin-top: 26px; }
  .seed-bg--gingham { right: -8vw; top: 70px; width: 70vw; height: 92vw; }
  .s-seed-board .sp-main, .s-seed-sushi .sp-main, .s-seed-minute .sp-main { translate: 6vw 0; }
  .s-seed-sushi .sp-second { bottom: -8px; }
  .s-seed-sushi .sp-second { left: auto; right: -3vw; }
  .s-seed-sushi .sp-main { translate: -6vw 0; }
  .fc-picnic-1 { width: 26vw; right: -6vw; bottom: 30%; }
  .fc-picnic-2 { width: 30vw; left: -6vw; top: 0; }
  .board-wrap { right: 0; top: auto; bottom: 10%; }
  .board { width: 48vw; padding: 12px 14px 14px; rotate: 3deg; }
  .board-title { font-size: 13px; margin-bottom: 8px; }
  .board-rows li { font-size: 19px; gap: 6px; }
  .board-next { font-size: 22px; margin-top: 10px; }
  .s-seed-board .sp-main { translate: -14vw 0; }
  .fc-board-1 { width: 24vw; left: auto; right: 2vw; top: 2%; bottom: auto; }
  .fc-board-2 { display: none; }
  .fc-bag { width: 54vw; right: -12vw; top: 0; }
  .views-chip { left: -12vw; top: 10%; font-size: 22px; }
  .countdown { font-size: 19vw; left: 0; right: auto; top: -6px; z-index: 5; }
  .s-seed-minute .sp-main { translate: 12vw 64px; }
  .s-seed-sushi .sp-second { display: none; }
  .s-seed-sushi .sp-main { translate: 0 0 !important; }
  .s-seed-minute .seed-stage { padding-top: 0; padding-bottom: 72px; }
  .fc-minute { width: 26vw; right: auto; left: 0; bottom: 6%; }
  .ghost-arrow { width: 70px; }

  /* add-ons */
  .addons-wrap { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .addons-head .h-xl { font-size: var(--t-xl); }
  .addons { grid-template-columns: 1fr; gap: 20px; }
  .addon { translate: none !important; }
  .addon-card { display: grid; grid-template-columns: 38% 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; row-gap: 6px; padding: 10px 14px 10px 10px; }
  .addon-photo { grid-row: 1 / 4; margin: 0; aspect-ratio: 4 / 5; }
  .addon-t { font-size: 24px; padding: 8px 0 0; }
  .addon-card p { padding: 0; min-height: 0; }
  .addon-card .pill { margin: 4px 0 6px; align-self: end; justify-self: start; }

  /* packages */
  .packages-wrap { padding-top: 92px; align-items: stretch; }
  .packages-head { text-align: left; }
  .packages-head .h-xl { font-size: var(--t-xl); }
  .packs { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gut)); padding: 36px var(--gut) 30px; width: auto; scrollbar-width: none; align-items: stretch; }
  .packs::-webkit-scrollbar { display: none; }
  .pack { flex: none; width: 78vw; max-width: 340px; scroll-snap-align: center; }
  .pack .bob { height: 100%; }
  .pack-card, .pack-card--pick { min-height: 100%; padding: 26px 22px 24px; }
  .pack-show { order: -1; }
  .pack-name { font-size: 40px; }
  .pack-term { font-size: 18px; }
  .pack-month { font-size: 38px; }
  .pack-card--pick .pack-month { font-size: clamp(34px, 11vw, 46px); }
  .pack-month { font-size: clamp(30px, 9.5vw, 38px); }
  .save-chip { font-size: 14px; white-space: nowrap; }
  .pick-badge { width: 130px; top: -24px; right: 10px; font-size: 19px; }
  .packs-extra { grid-template-columns: 1fr; width: 100%; margin-top: 18px; gap: 22px; }
  .setup-label { font-size: 28px; }
  .close { margin-top: 70px; }
  .close-line { font-size: clamp(48px, 14vw, 80px); }
  .close-face { font-size: 54px; }
  .close-top { padding-bottom: 80px; }
  .footer-band { padding: 70px 4vw max(18px, env(safe-area-inset-bottom)); }

  /* bottom sheet */
  .sheet { border-radius: 24px 24px 0 0; }
  .sheet-body { padding: 34px 22px max(28px, env(safe-area-inset-bottom)); }
  .sheet-handle { display: block; position: absolute; z-index: 4; left: 50%; top: 0; width: 120px; height: 28px; transform: translateX(-50%); touch-action: none; }
  .sheet-handle::before { content: ""; position: absolute; left: 50%; top: 10px; width: 44px; height: 5px; border-radius: 5px; background: rgba(0, 0, 0, .2); transform: translateX(-50%); }
  .sheet.is-blue .sheet-handle::before { background: rgba(255, 255, 255, .45); }
  .sheet-title { font-size: 40px; }
  .sheet-kicker { font-size: 18px; }
  .sheet-label { font-size: 26px; }
  .sheet-seeds { grid-template-columns: 1fr; }
  .sheet-seeds a { grid-template-columns: 64px 1fr; }
  .sheet-seeds span { font-size: 22px; }
  .sheet-list b { font-size: 20px; }
  .sheet-body.has-media { grid-template-columns: 1fr; gap: 18px; }
  .sheet-media { aspect-ratio: 16 / 10; }
  .sum .sum-total { font-size: 34px; }
  .format-list span { font-size: 16px; }
}

/* very small phones */
@media (max-width: 370px) {
  .chrome-x { display: none; }
}

/* ---------- reduced motion: everything visible, nothing drifts */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  [data-tilt] { transform: none !important; }
  .sheet.is-anim { transition-duration: .001ms !important; }
}

/* safe vertical centring: centred when it fits, top-aligned when it does not */
.why-wrap > :first-child, .allin-wrap > :first-child, .pillars-wrap > :first-child { margin-top: auto; }
.why-wrap > :last-child, .allin-wrap > :last-child, .pillars-wrap > :last-child { margin-bottom: auto; }

.deck { overflow-x: clip; }
.sum .ph { font-size: max(13px, calc(var(--s) * 1.1)); }
.sum .sum-total span:first-child { white-space: nowrap; }

/* ======================================================================
   REVIEW PASS (qa/REVIEW.md, 5 Nov 2026). Later rules win on purpose.
   ====================================================================== */

/* S6: only the cover cut-outs and the face idle. Everything else is still until touched. */
.bob { animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .s-cover .bob { animation: bob var(--bob, 7s) ease-in-out var(--bd, 0s) infinite alternate !important; }
}

/* S3: hard cast shadow falling lower right, as in their studio shots */
.cf img, .float-cut img, .pillar-cut { filter: drop-shadow(calc(var(--s) * .9) calc(var(--s) * 1.1) 1px rgba(20, 22, 28, .14)); }

/* S9: their wordmark leads the chrome */
.chrome-wm { width: clamp(130px, calc(var(--s) * 16), 240px); }
.chrome-x { font-size: clamp(11px, calc(var(--s) * .95), 15px); opacity: .7; }

/* M1: the nav buttons step aside for the footer; tall screen keeps headlines clear of the chrome */
body.footer-in .pager { opacity: 0; pointer-events: none; }
.pager { transition: opacity .3s var(--ease-ui); }
.is-deck .screen[data-tall] .screen-clip { scroll-padding-top: 110px; }

/* M6: real phone proportions (about 0.48 wide for its height, with the island) */
.phone-body { border-radius: calc(var(--pw) * .17); }
.phone-body .light { border-radius: calc(var(--pw) * .17); }
.phone-screen { aspect-ratio: 9 / 19.5; border-radius: calc(var(--pw) * .14); }
.phone--lg { --pw: calc(var(--s) * 19); }
.s-premium .phone--lg { --pw: calc(var(--s) * 19.5); }
.phone--md { --pw: calc(var(--s) * 12.5); }
.crop-top video { transform: scale(1.3); transform-origin: 50% 100%; }

/* S10: the seed label sits under the phone, not on the reference footage */
.phone-tag { position: static; display: table; margin: calc(var(--s) * 1.2) auto 0; font-size: max(13px, calc(var(--s) * 1.05)); transition: opacity .3s; }
.phone-tag + .credit { margin-top: calc(var(--s) * .7); }

/* S2: one action style inside cards */
.card-pill, .step-pill { margin-top: auto; align-self: flex-start; }
.pillar-card p { margin-bottom: calc(var(--s) * 1.4); }

/* ---------- S5 cover */
.cover-face { font-size: calc(var(--s) * 4.4); margin-bottom: calc(var(--s) * 1); }
.cover-title { font-size: calc(var(--s) * 14.6); line-height: .84; }
.cover-sub { margin: calc(var(--s) * 1.4) 0 calc(var(--s) * 1.3); }
.cf-katsu { width: calc(var(--s) * 14); left: 3%; top: 15%; }
.cf-orange { width: calc(var(--s) * 13); left: 7%; top: 47%; }
.cf-straw { width: calc(var(--s) * 13); right: 4%; top: 19%; }
.cf-nigiri { width: calc(var(--s) * 18); right: 5%; top: 55%; z-index: 2; }

/* ---------- M3 problem */
.problem-grid { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
.problem-cluster { height: calc(var(--s) * 40); display: flex; justify-content: center; align-items: flex-start; gap: calc(var(--s) * 1.2); padding-top: calc(var(--s) * 1); }
.pc { position: relative; left: auto !important; top: auto !important; width: calc(var(--s) * 10); flex: none; z-index: 1; }
.pc:nth-child(odd) { margin-top: calc(var(--s) * 3.4); }
.pc .pc-card { rotate: var(--r, 0deg); transition: filter .3s var(--ease-ui), scale .45s var(--ease-out); }
.pc:hover { z-index: 20; }
.pc:hover .pc-card { scale: 1.04; }
.pc-1 { --r: -5deg; } .pc-2 { --r: 4deg; } .pc-3 { --r: -2deg; } .pc-4 { --r: 5deg; } .pc-5 { --r: -4deg; }
.pc-cap { position: static; display: block; max-width: none; background: none; box-shadow: none; padding: 0; margin-top: calc(var(--s) * 1.1); text-align: center; white-space: nowrap; font-size: 12px; line-height: 1.2; color: #000; transform: none !important; }
.pc-face { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--s) * -.5); width: auto; aspect-ratio: auto; background: none; box-shadow: none; border-radius: 0; font-size: calc(var(--s) * 6.6); translate: -50% 0; transform: none; }
.problem-cluster:hover .pc:not(:hover) .pc-card { filter: saturate(.75) brightness(.96); }

/* ---------- S4 why us: equal cards, one-line titles */
.steps { align-items: stretch; }
.step { translate: none !important; }
.step > .bob, .step-card { height: 100%; }
.step-card { min-height: calc(var(--s) * 17); }
.step-t { font-size: calc(var(--s) * 1.8); white-space: nowrap; }
.step-arrow { top: calc(var(--s) * 3.4); }

/* ---------- S7 goal: blue runs to the top edge */
.m-br { display: none; }

/* ---------- M5 all in: flush left, even pitch, ticks only to the right of CRAZY */
.allin-title { line-height: .95; }
.allin-title .ln { padding-block: 0; margin-block: 0; }
.allin-title .ln-crazy { margin: 0; }
.allin-title .ln-crazy > span { padding-left: 0; }
.crazy .burst { left: calc(100% + .14em); top: .02em; width: auto; height: .8em; max-width: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .burst { transform-origin: 0 50%; }
}

/* ---------- pillars */
.pc-tuna { width: 42%; right: -8%; top: -14%; rotate: 8deg; }

/* ---------- M9 everyday: one clean 4 x 2 grid */
.s-everyday .big-num { font-size: calc(var(--s) * 24); }
.s-everyday .formats-grid { grid-template-columns: auto minmax(calc(var(--s) * 24), 1fr) auto; }
.ev-grid { display: grid; grid-template-columns: repeat(4, calc(var(--s) * 10.5)); gap: 14px; }
.ec-card { position: relative; aspect-ratio: 9 / 16; border-radius: calc(var(--s) * 1.1); overflow: hidden; background: #ccc; box-shadow: var(--shadow-card); }
.ec-card video, .ec-card img { width: 100%; height: 100%; object-fit: cover; }
.ec-card .light { background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .5), rgba(255, 255, 255, .12) 36%, transparent 62%); mix-blend-mode: soft-light; }
.ec figcaption { margin-top: 8px; font-size: 13px; line-height: 1.2; color: #000; white-space: nowrap; }
.play-hint { position: absolute; z-index: 2; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; transition: opacity .25s; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4); }
.play-hint::before { content: ""; border-left: 8px solid var(--blue); border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }
.ec-card.is-playing .play-hint { opacity: 0; }

/* ---------- 9.1 picnic */
.fc-picnic-1 { right: 12%; bottom: 10%; width: calc(var(--s) * 13); }
.stage-credits { display: none; }

/* ---------- S1 + M1: 9.2 the board is the hero */
.board-grid { display: grid; grid-template-columns: minmax(0, 33fr) minmax(0, 67fr); gap: calc(var(--s) * 2); align-items: center; }
.board-copy { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; }
.board-copy .kicker { margin-bottom: calc(var(--s) * 1); }
.board-copy .h-seed { margin-bottom: calc(var(--s) * 2.2); }
.board-copy .body { font-size: var(--b-lead); line-height: 1.14; max-width: 22ch; }
.board-stage { position: relative; height: calc(var(--s) * 52); display: grid; place-items: center; }
.board-wrap { position: relative; z-index: 3; right: auto; top: auto; translate: calc(var(--s) * 5) calc(var(--s) * -2); }
.board { width: calc(var(--s) * 38); padding: calc(var(--s) * 2.8) calc(var(--s) * 3.2) calc(var(--s) * 3); rotate: 2deg; }
.board-title { font-size: calc(var(--s) * 1.7); margin-bottom: calc(var(--s) * 1.8); }
.board-rows { gap: calc(var(--s) * .9); }
.board-rows li { font-size: calc(var(--s) * 4.6); gap: calc(var(--s) * 1.4); padding-bottom: calc(var(--s) * .9); }
.board-next { font-size: calc(var(--s) * 4.6); margin-top: calc(var(--s) * 1.8); }
.sp-tucked { position: absolute; z-index: 1; left: 0; bottom: calc(var(--s) * 1); }
.sp-tucked .phone-body { rotate: -7deg; }
.fc-board-1 { width: calc(var(--s) * 10); left: auto; right: 2%; top: 4%; bottom: auto; rotate: 12deg; }

/* ---------- M2: 9.3 their real bag photo as a panel; the slogan stays clear */
.seed-bg--bag { right: -3vw; top: 9%; width: 40%; height: 82%; }
.seed-bg--bag img { object-position: 72% 62%; }
.s-seed-sushi .sp-main { translate: calc(var(--s) * -8) 0; }
.s-seed-sushi .sp-second { left: 0; right: auto; bottom: 4%; }
.s-seed-sushi .sp-second .phone-body { rotate: -7deg; }
.s-seed-sushi .sp-main .credit { background: #fff; color: #000; border-radius: 999px; padding: .4em .8em .45em; width: max-content; max-width: none; }

/* ---------- S1 + S8: 9.4 centred around a huge 1:00 */
.minute-grid { display: grid; grid-template-columns: minmax(0, 27fr) minmax(0, 42fr) minmax(0, 25fr); gap: calc(var(--s) * 2.4); align-items: center; }
.minute-head, .minute-copy { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; }
.minute-head .kicker { margin-bottom: calc(var(--s) * 1); }
.minute-copy .body { font-size: var(--b-lead); line-height: 1.14; }
.minute-copy .seed-foot { margin-top: calc(var(--s) * 2.4); }
.minute-stage { position: relative; height: calc(var(--s) * 52); display: grid; place-items: center; }
.minute-stage .countdown { position: absolute; z-index: 1; left: 50%; right: auto; top: 3%; translate: -50% 0; font-size: calc(var(--s) * 15); line-height: .8; }
.minute-stage .sp-main { z-index: 3; translate: 0 calc(var(--s) * 4); }
.fc-minute { width: calc(var(--s) * 11); right: 0; left: auto; bottom: 10%; rotate: 9deg; }

/* ---------- M4 add-ons: titles fit their cards */
.addons-wrap { grid-template-columns: minmax(0, 27fr) minmax(0, 73fr); }
.addon-t { font-size: calc(var(--s) * 2.05); }

/* ---------- M7 card to sheet: one photo flies, text never doubles */
.sheet-ghost { transition: opacity .12s linear; }
.sheet.is-open .sheet-ghost { opacity: 0; }
.sheet.is-open .sheet-body { transition: opacity .26s var(--ease-ui) .12s; }
.sheet.is-closing .sheet-ghost { opacity: 1; transition: opacity .18s linear .2s; }
.fly { position: fixed; z-index: 72; overflow: hidden; pointer-events: none; }
.fly img { width: 100%; height: 100%; object-fit: cover; }
.fly.is-anim { transition: left .48s var(--ease-sheet), top .48s var(--ease-sheet), width .48s var(--ease-sheet), height .48s var(--ease-sheet), border-radius .48s var(--ease-sheet); }
.slot { color: rgba(0, 0, 0, .45); }
.sum .slot { font-size: var(--b-small); }

/* ---------- M8 packages */
.pack-card, .pack-card--pick { min-height: 0; }
.pack-card--pick { padding-top: calc(var(--s) * 3.4); padding-bottom: calc(var(--s) * 2.8); }
.pack-line { margin-top: calc(var(--s) * 1.2); padding-top: 0; }
.pack-card--open .slot { line-height: 1.15; }
.pack-card--open .pack-term.slot { text-transform: none; }
.pack-card--open .pack-month.slot { font-size: calc(var(--s) * 2.3); white-space: normal; line-height: 1; }
.pack-card--open .pack-rates.slot { color: rgba(0, 0, 0, .45); }
.tbs-tag { position: absolute; top: calc(var(--s) * 1.6); right: calc(var(--s) * 1.6); font-family: var(--f-head); font-size: max(12px, calc(var(--s) * 1)); line-height: 1; padding: .45em .7em .45em; border-radius: 999px; background: var(--ground); color: #000; }
.packs-extra { grid-template-columns: 1fr; border-top: 0; padding-top: 0; margin-top: calc(var(--s) * 3); gap: calc(var(--s) * 1.6); }
.setup-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: calc(var(--s) * 2.6); background: #fff; border-radius: var(--radius-card); padding: calc(var(--s) * 2.2) calc(var(--s) * 2.8); box-shadow: var(--shadow-card); }
.setup-row .setup-label { font-family: var(--f-head); font-size: var(--t-4xl); line-height: .9; }
.setup-price { font-family: var(--f-body); font-size: max(17px, calc(var(--s) * 1.6)); }
.setup-row .setup-text { font-size: var(--b-small); max-width: 32ch; }
.addon-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); display: grid; gap: calc(var(--s) * 2.6); padding: 0 calc(var(--s) * 1); font-size: max(14px, calc(var(--s) * 1.1)); }
.addon-lines a { font-weight: 700; color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.addon-lines a:hover { color: var(--green-ink); }
.small-print { padding: 0 calc(var(--s) * 1); }
.close { min-height: 100vh; display: flex; flex-direction: column; margin-top: calc(var(--s) * 4); }
.close-top { flex: 1; justify-content: center; padding-top: 110px; }

/* ---------- narrow mode overrides for the review pass */
@media not all and (min-width: 900px) and (min-height: 560px) {
  .phone--lg, .s-premium .phone--lg { --pw: min(58vw, 270px); }
  .phone--md { --pw: min(38vw, 180px); }
  .cover-title { font-size: var(--t-mega); }
  .cf-katsu { width: min(30vw, 210px); left: -6vw; top: 9svh; }
  .cf-orange { width: min(30vw, 200px); left: -9vw; top: auto; bottom: 21svh; }
  .cf-straw { width: min(25vw, 170px); right: -5vw; top: auto; bottom: 25svh; }
  .cf-nigiri { width: min(40vw, 260px); right: 10vw; top: auto; bottom: 9svh; }
  .problem-grid { grid-template-columns: minmax(0, 1fr); }
  .problem-cluster { height: auto; display: flex; justify-content: flex-start; gap: 14px; overflow-x: auto; padding: 18px var(--gut) 110px; }
  .pc { width: 40vw; max-width: 190px; margin-top: 0 !important; }
  .pc:nth-child(even) { margin-top: 18px !important; }
  .pc-face { position: static; translate: none; align-self: center; flex: none; font-size: 64px; margin: 0 8px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step-t { font-size: 22px; white-space: normal; }
  .m-br { display: inline; }
  .goal-title { font-size: clamp(56px, 17vw, 72px); }
  .goal-face { font-size: 120px; }
  .allin-p { hyphens: none; }
  .allin-last { font-size: 26px; line-height: 1.12; }
  .allin-title { line-height: .95; }
  .ev-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gut)); padding: 8px var(--gut) 16px; scrollbar-width: none; }
  .ev-grid::-webkit-scrollbar { display: none; }
  .ec { flex: none; width: 38vw; scroll-snap-align: start; }
  .s-everyday .big-num { font-size: clamp(170px, 52vw, 300px); }
  .s-seed-picnic .credit { display: none; }
  .stage-credits { display: block; margin: 14px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); text-align: center; position: relative; z-index: 6; }
  .s-seed-picnic .seed-stage { flex-direction: column; }
  .fc-picnic-1 { width: 26vw; right: -6vw; bottom: 30%; }
  .board-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .board-stage { order: -1; height: auto; display: flex; flex-direction: column; align-items: center; }
  .sp-tucked { position: relative; left: auto; bottom: auto; }
  .sp-tucked .phone-body { rotate: -3deg; }
  .board-wrap { translate: 0 0; margin-top: -40px; }
  .board { width: min(84vw, 340px); padding: 16px 18px 18px; rotate: 2deg; }
  .board-rows li, .board-next { font-size: 28px; }
  .board-title { font-size: 14px; }
  .fc-board-1 { width: 22vw; right: 0; top: 0; }
  .seed-bg--bag { right: -8vw; top: 40px; width: 62vw; height: 90vw; }
  .s-seed-sushi .sp-main { translate: -10vw 0 !important; }
  .s-seed-sushi .sp-main .credit { max-width: var(--pw); width: auto; border-radius: 10px; }
  .minute-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .minute-stage { order: -1; height: auto; padding: 0 0 8px; display: flex; justify-content: center; }
  .minute-stage .countdown { font-size: 30vw; top: -4px; }
  .minute-stage .sp-main { translate: 0 18vw; margin-bottom: 18vw; }
  .fc-minute { width: 24vw; right: 0; bottom: 20%; }
  .addons-wrap { grid-template-columns: minmax(0, 1fr); }
  .addon-t { font-size: 22px; }
  .setup-row { grid-template-columns: 1fr; gap: 8px; padding: 20px; }
  .setup-row .setup-label { font-size: 32px; }
  .addon-lines { grid-template-columns: 1fr; gap: 10px; padding: 0; }
  .close { min-height: 100svh; }
  .close-top { padding-top: 90px; }
}

/* review pass, round 2 */
.burst, .crazy .burst { overflow: hidden; }
.cf-katsu { width: calc(var(--s) * 12); left: 1.5%; top: 14%; }
.cf-orange { width: calc(var(--s) * 11); left: 2.5%; top: 50%; }
.cf-straw { width: calc(var(--s) * 11.5); right: 2%; top: 20%; }
.cf-nigiri { width: calc(var(--s) * 15); right: 3%; top: 61%; }
.problem-cluster { height: calc(var(--s) * 42); }
.pc-face { font-size: calc(var(--s) * 4.2); bottom: calc(var(--s) * 1); }
.step-t { font-size: calc(var(--s) * 1.62); }
.s-everyday .num-label { font-size: calc(var(--s) * 1.55); white-space: nowrap; }
.fc-picnic-1 { right: 1%; bottom: 26%; }
.seed-bg--bag { top: 14%; height: 76%; }
.fc-minute { right: -4%; bottom: 4%; }
body.chrome-solid .pager { opacity: 0; pointer-events: none; }
@media not all and (min-width: 900px) and (min-height: 560px) {
  .cf-katsu { width: min(30vw, 210px); left: -6vw; top: 9svh; }
  .cf-orange { width: min(30vw, 200px); left: -9vw; top: auto; bottom: 21svh; }
  .cf-straw { width: min(25vw, 170px); right: -5vw; top: auto; bottom: 25svh; }
  .cf-nigiri { width: min(40vw, 260px); right: 10vw; top: auto; bottom: 9svh; }
  .seed-bg--bag { top: 40px; height: 90vw; }
  .fc-picnic-1 { width: 26vw; right: -6vw; bottom: 30%; }
  .fc-minute { width: 24vw; right: 0; bottom: 20%; }
  .pc-face { font-size: 64px; bottom: auto; }
  .s-everyday .num-label { font-size: var(--t-nav); white-space: normal; }
}
.pc-face { width: 1em; }
.minute-stage .phone--lg { --pw: calc(var(--s) * 16.5); }
.minute-stage .sp-main { translate: 0 calc(var(--s) * 7.5); }
.minute-stage .countdown { font-size: calc(var(--s) * 16); top: 1%; }
@media not all and (min-width: 900px) and (min-height: 560px) {
  .minute-stage .phone--lg { --pw: min(54vw, 250px); }
  .minute-stage .sp-main { translate: 0 22vw; margin-bottom: 22vw; }
  .minute-stage .countdown { font-size: 30vw; }
}
@media not all and (min-width: 900px) and (min-height: 560px) {
  .s-everyday .formats-grid { grid-template-columns: minmax(0, 1fr); }
  .s-seed-picnic .sp-second { bottom: 64px; }
  .board-wrap { margin-top: 10px; }
}
.ec figcaption { white-space: normal; font-size: max(12px, calc(var(--s) * .9)); }
.ec figcaption b { display: block; font-weight: 700; }
.close-line { font-size: calc(var(--s) * 7); max-width: 11em; margin-bottom: calc(var(--s) * 2.4); }
.close-face { font-size: calc(var(--s) * 4.6); margin-bottom: calc(var(--s) * 1.6); }
.footer-band { padding-top: calc(var(--s) * 6); }
.close-top { padding-top: 104px; padding-bottom: calc(var(--s) * 5); }
@media not all and (min-width: 900px) and (min-height: 560px) {
  .close-line { font-size: clamp(44px, 13vw, 76px); }
  .close-face { font-size: 54px; }
  .close-top { padding-top: 90px; }
}

/* Tito feedback: present one pillar at a time; keep the four-card composition. */
@media (prefers-reduced-motion: no-preference) {
  .js .s-pillars.is-shown .pillar[data-a],
  .js .s-goal.is-shown .goal-line[data-a] {
    transition-duration: 460ms;
    transition-delay: var(--arrival, 0ms);
  }
}
.street-reference video { object-fit: contain; background: #000; }
.street-reference + .phone-island { pointer-events: none; }
.s-seed-minute .credit a { text-decoration: none; }
.s-seed-minute .credit a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* Fan account overview: reproduce Tito's supplied card. The artwork is
   displayed through a CSS viewport; all overview copy and the CTA are live. */
.fan-card {
  container-type: inline-size;
  border: 0;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
  display: flex;
  gap: 0;
  padding: 6.5% 4.6% 6.2%;
}
.fan-profile {
  position: relative;
  width: 100%;
  aspect-ratio: 834 / 850;
  overflow: hidden;
  margin-bottom: 4.8%;
}
.fan-profile img {
  position: absolute;
  width: 122.7818%;
  max-width: none;
  height: auto;
  left: -11.3909%;
  top: -11.7647%;
}
.fan-card .addon-t {
  font-size: 12.5cqw;
  line-height: .94;
  padding: 0;
  margin-bottom: 3.1%;
}
.fan-card p {
  font-size: 5.2cqw;
  line-height: 1.14;
  padding: 0;
  min-height: 0;
}
.fan-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .22em;
  margin-top: 6.4%;
  padding: .42em .88em .46em;
  border-radius: 999px;
  background: #0674ff;
  color: #fff;
  font-size: 5.9cqw;
  line-height: 1;
  white-space: nowrap;
  transition: background .2s var(--ease-ui);
}
.fan-cta svg { width: .95em; height: .95em; fill: none; stroke: currentColor; stroke-width: 2.4; }
.fan-card:hover .fan-cta { background: #005bd8; }
.fan-card:focus-visible { outline-offset: 5px; border-radius: var(--radius-card); }

/* Two creator examples, one shared selection. Crossfade only the profile art. */
.fan-profile img[data-creator] { opacity: 0; transition: opacity .45s var(--ease-ui); }
.fan-profile img[data-creator].is-current { opacity: 1; }
.sheet-body.has-creators { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
.sheet-fan-media { aspect-ratio: auto; overflow: visible; border-radius: 0; }
.sheet-fan-media .fan-profile { margin: 0; }
.sheet-fan-media .fan-profile img { width: 122.7818%; height: auto; max-width: none; }
.has-creators .sheet-title { font-size: calc(var(--s) * 4); }
.creator-picker { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.creator-picker button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid #0674ff;
  border-radius: 50%;
  color: #005bd8;
  background: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: background .18s, color .18s;
}
.creator-picker button[aria-pressed="true"] { background: #0674ff; color: #fff; }
.creator-picker button:hover { background: #e6f0ff; color: #005bd8; }
.creator-picker button[aria-pressed="true"]:hover { background: #005bd8; color: #fff; }
.creator-picker button:focus-visible { border-radius: 50%; outline-offset: 4px; }
.sheet-body.has-service-price { padding-bottom: 0; }
.sheet-service-price {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-inline: calc(var(--s) * -3.4);
  padding: calc(var(--s) * 1.7) calc(var(--s) * 3.4);
  background: #0667df;
  color: #fff;
  font-size: var(--b-base);
  line-height: 1.2;
}
.sheet-service-price strong { font-size: calc(var(--s) * 2); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .fan-profile img[data-creator] { transition: none; }
}
@media not all and (min-width: 900px) and (min-height: 560px) {
  .sheet-body.has-creators { grid-template-columns: 1fr; }
  .sheet-service-price { margin-inline: -22px; padding: 20px 22px; flex-wrap: wrap; gap: 8px; }
}

/* Services overview: product silhouettes distinguish the four areas.
   Service names, descriptions and actions share baselines; no index markers. */
.s-pillars .pillars-wrap { gap: calc(var(--s) * 3.2); }
.s-pillars .pillars { align-items: stretch; }
.s-pillars .pillar { translate: none; }
.s-pillars .pillar > .bob { height: 100%; }
.s-pillars .pillar-card {
  display: grid;
  grid-template-rows: calc(var(--s) * 10.5) calc(var(--s) * 4.8) 1fr auto;
  gap: calc(var(--s) * 1);
  height: 100%;
  min-height: calc(var(--s) * 30);
  padding: calc(var(--s) * 1.8) calc(var(--s) * 2) calc(var(--s) * 2.2);
}
.s-pillars .pillar-visual { display: grid; place-items: center; min-height: 0; }
.s-pillars .pillar-cut {
  position: static;
  width: 100%;
  height: 100%;
  max-height: calc(var(--s) * 10.5);
  object-fit: contain;
  transform: none;
}
.s-pillars .pc-avo { width: 62%; rotate: -7deg; }
.s-pillars .pc-box { width: 88%; max-height: calc(var(--s) * 9); rotate: -8deg; }
.s-pillars .pc-sando { width: 76%; max-height: calc(var(--s) * 9.2); rotate: 6deg; }
.s-pillars .pc-tuna { width: 61%; rotate: 7deg; }
.s-pillars .pillar-t { align-self: end; }
.s-pillars .pillar-card p { margin: 0; padding: 0; }
.s-pillars .card-pill { justify-self: start; margin-top: calc(var(--s) * .7); }
@media not all and (min-width: 900px) and (min-height: 560px) {
  .s-pillars .pillar-card { grid-template-rows: 130px auto auto auto; min-height: 0; }
  .s-pillars .pillar-cut { max-height: 130px; }
  .s-pillars .pillar-t { padding: 0; }
}

/* Proof is the numbers and the work itself; process has been removed. */
.s-why .why-wrap.proof-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(var(--s) * 6);
  padding-top: calc(var(--s) * 7.5);
  padding-bottom: calc(var(--s) * 4.5);
}
.proof-wrap > :first-child, .proof-wrap > :last-child { margin: 0; }
.proof-copy { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--s) * 3.5); }
.s-why .proof-head .h-xl { font-size: calc(var(--s) * 5.4); line-height: .9; margin-bottom: calc(var(--s) * 1.6); }
.s-why .proof-head .lead { max-width: 39ch; font-size: calc(var(--s) * 1.8); line-height: 1.2; }
.s-why .proof-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--s) * 3.4); width: 100%; }
.s-why .proof-stats > div { gap: calc(var(--s) * .9); }
.s-why .proof-stats dd { font-size: calc(var(--s) * 8.5); letter-spacing: -.02em; line-height: .86; white-space: nowrap; }
.s-why .proof-stats dt { font-size: calc(var(--s) * 1.8); line-height: 1.1; }
.proof-visual { padding-inline: calc(var(--s) * 1.5); }
.proof-phone { --pw: calc(var(--s) * 23); }
.proof-phone .phone-screen { aspect-ratio: 9 / 19.5; }
.proof-phone .credit { margin-top: calc(var(--s) * 1.4); font-size: var(--b-small); color: var(--ink); }
.proof-phone .phone-screen video { object-fit: contain; }
.proof-copy .why-cta { margin-top: calc(var(--s) * .6); }
.proof-copy .ph-line { font-size: var(--b-cap); }
@media not all and (min-width: 900px) and (min-height: 560px) {
  .s-why .why-wrap.proof-wrap { grid-template-columns: 1fr; gap: 38px; }
  .proof-visual { justify-self: center; }
  .proof-phone { --pw: min(60vw, 300px); }
  .s-why .proof-stats dd { font-size: clamp(48px, 13vw, 90px); }
}

/* Package setup fees live with each offer, as in Tito's reference. */
.packages-wrap { justify-content: center; padding-top: calc(var(--s) * 8); }
.packages-net { width: min(100%, calc(var(--s) * 84)); margin-top: calc(var(--s) * 2); }
.pack-setup { border-top: 1px solid var(--line); padding-top: calc(var(--s) * 1.45); margin-top: calc(var(--s) * 1.5); }
.pack-setup-label { font-family: var(--f-head); font-size: calc(var(--s) * 1.4); line-height: 1; margin-bottom: calc(var(--s) * .8); }
.pack-setup-price { display: flex; align-items: center; gap: calc(var(--s) * .65); flex-wrap: wrap; }
.pack-setup-price strong { font-family: var(--f-head); font-weight: 400; font-size: calc(var(--s) * 3.1); line-height: .95; white-space: nowrap; }
.pack-setup-price del { font-size: var(--b-small); font-weight: 700; text-decoration-thickness: 2px; }
.setup-discount { background: var(--green); color: #003d20; border-radius: 999px; padding: .4em .65em; font-size: max(12px, calc(var(--s) * .95)); font-weight: 700; line-height: 1; white-space: nowrap; }
.pack-card--pick .pack-setup { border-color: rgba(255,255,255,.3); }
.pack-universe .pack-setup-price strong { color: var(--blue); }
.pack-show .pack-setup-price strong, .pack-universe .pack-setup-price strong { font-size: calc(var(--s) * 2.6); }
.pack-card > .pick-badge { transform: none; }
.sheet-body.has-package-setup { padding: calc(var(--s) * 2.5) calc(var(--s) * 3); }
.has-package-setup .sheet-title { margin-bottom: calc(var(--s) * 1); }
.has-package-setup .sheet-text { margin-bottom: calc(var(--s) * .7); }
.has-package-setup .sum { margin-bottom: calc(var(--s) * 1); }
.has-package-setup .pick-badge--static { width: calc(var(--s) * 10); margin-bottom: calc(var(--s) * .8); }
.has-package-setup .pack-setup { margin-top: calc(var(--s) * 1.2); }
.sheet.is-blue .pack-setup { border-color: rgba(255,255,255,.3); }
.setup-options { margin: calc(var(--s) * 1.8) 0 calc(var(--s) * 1); }
.setup-options > div { display: flex; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding: .6em 0; }
.setup-options dd { margin: 0; font-weight: 700; }
@media not all and (min-width: 900px) and (min-height: 560px) {
  .pack-setup-label { font-size: 18px; }
  .pack-setup-price strong { font-size: 36px; }
  .packages-wrap { padding-top: 90px; }
}