/* Gymochi v7 "showcase": a short page that sells a change in who you are.
   Order: the person (hero), the old you (the loop), the promise, how it works (pinned phone), what you get, the research,
   who you become (pinned old/new card), the 66-Day Habit Promise, ideas & feedback, the sign up.
   Look kept from v6: warm paper, the aurora behind everything, Fraunces 600 titles, DM Sans body, one accent per section,
   website accents only (Sunbeam, Tangerine, Cobalt, Aqua, Lime, Steel).
   Pinned scenes are CSS sticky inside a tall box (native scroll, no snap, no transforms on the scroller), the method v6
   proved has no jitter on iPhone. js/v7.js only reads each pin's progress and sets classes and a few CSS variables.
   Reduce Motion (html.rm) and no JS: every pinned scene becomes a plain stacked list. */

:root {
  --paper: #F2EFE9; --cream: #FBF8F3; --ink: #17130F; --mute: #5B544A; --soft: #8A8175; --line: rgba(23,19,15,.12);
  --sun: #FFD60A; --orange: #FF8A1F; --cobalt: #4D6BFF; --aqua: #2EC7FF; --lime: #A6E33B; --steel: #7AA2C4;
  --acc: var(--sun); --acc-ink: #8A5A00;
  --ease: cubic-bezier(.32,.72,0,1); --ease-out: cubic-bezier(.22,1,.36,1);
  --gut: max(16px, env(safe-area-inset-left, 0px)); --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --bar-h: 60px;
  color-scheme: light;
}
html[data-accent="steel"] { --acc: var(--steel); --acc-ink: #34597A; }
html[data-accent="tangerine"] { --acc: var(--orange); --acc-ink: #A04A00; }
html[data-accent="aqua"] { --acc: var(--aqua); --acc-ink: #0D5A73; }
html[data-accent="cobalt"] { --acc: var(--cobalt); --acc-ink: #2F46C2; }
html[data-accent="lime"] { --acc: var(--lime); --acc-ink: #3F6A0A; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16.5px/26px 'DM Sans', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, a, summary { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -64px; z-index: 60; padding: 12px 16px; border-radius: 9999px; background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gut-r) 0 var(--gut); }

/* ---------------------------------------------------------------- type */
.label { font: 500 12.5px/16px 'DM Sans', sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--acc-ink); margin-bottom: 12px; transition: color .6s var(--ease); }
.h2 { font: 600 32px/36px 'Fraunces', Georgia, serif; letter-spacing: -.015em; text-wrap: balance; }
.h2 em, .h2--xl em { font-style: italic; font-weight: 500; }
.h2--xl { font-size: 36px; line-height: 40px; letter-spacing: -.02em; }
/* Two parts: the first sentence in ink, the second on its own line in italic, in a deep shade of the section's accent (Jet, 28 Oct) */
.h2--tone span { display: block; font-style: italic; font-weight: 500; color: var(--tone, var(--soft)); }
[data-accent="sunbeam"] { --tone: #8A5A00; } [data-accent="tangerine"] { --tone: #A04A00; } [data-accent="aqua"] { --tone: #0D5A73; }
[data-accent="cobalt"] { --tone: #2F46C2; } [data-accent="lime"] { --tone: #3F6A0A; } [data-accent="steel"] { --tone: #34597A; }
.lede { font: 500 italic 20px/28px 'Fraunces', Georgia, serif; color: var(--mute); text-wrap: pretty; }
.fine { font-size: 14px; line-height: 20px; color: var(--mute); }
.fine a { text-underline-offset: 3px; }
h3 { font: 600 22px/28px 'Fraunces', Georgia, serif; letter-spacing: -.01em; }
@media (min-width: 768px) {
  .h2 { font-size: 44px; line-height: 48px; }
  .h2--xl { font-size: 56px; line-height: 60px; }
  .lede { font-size: 24px; line-height: 32px; }
}
@media (min-width: 1200px) { .h2--xl { font-size: 64px; line-height: 68px; } }

sup.cite { position: relative; top: -.45em; font: 600 12px/1 'DM Sans', sans-serif; vertical-align: baseline; margin-left: 2px; white-space: nowrap; font-style: normal; }
sup.cite a { display: inline-block; min-width: 18px; padding: 2px 4px; border-radius: 9999px; text-align: center; text-decoration: none; color: var(--acc-ink); background: color-mix(in srgb, var(--acc) 18%, transparent); }
sup.cite span { color: var(--soft); }
sup.cite a[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); white-space: nowrap; padding: 4px 8px; border-radius: 8px; background: var(--ink); color: var(--paper); font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease); }
sup.cite a:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) and (pointer: fine) { sup.cite a:hover::after { opacity: 1; transform: translate(-50%, 0); } }

/* ---------------------------------------------------------------- buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 24px; border: 0; border-radius: 9999px; background: var(--ink); color: var(--cream); font: 600 16px/24px 'DM Sans', sans-serif; text-decoration: none; cursor: pointer; overflow: hidden; transition: transform .16s var(--ease-out), background .3s; -webkit-user-select: none; user-select: none; }
.btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,214,10,.45) 50%, transparent 65%); transform: translateX(-100%); animation: shimmer 4.5s var(--ease) 1.6s infinite; pointer-events: none; }
@keyframes shimmer { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.btn:active { transform: scale(.98); }
.btn--big { min-height: 56px; padding: 14px 28px; font-size: 17px; }
.btn--ghost { background: rgba(255,255,255,.7); color: var(--ink); border: 1.5px solid var(--ink); flex-direction: column; gap: 0; line-height: 20px; padding: 10px 24px; }
.btn--ghost::before { display: none; }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); } }
.rm .btn::before { animation: none; }

/* ---------------------------------------------------------------- the light (back layer) */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; height: 100lvh; pointer-events: none; background: var(--paper); }
.bg__au { opacity: 0; transition: opacity 1.2s var(--ease); }
.bg__au.is-on { opacity: 1; }
/* zoomed in (pinch): no moving light and no frosted glass, so iPhone Safari keeps enough memory (see v7.js) */
.zoomed .bg__au { display: none !important; } /* the aurora sets display:block inline */
.zoomed .bg { background: radial-gradient(120% 70% at 50% 0%, rgba(255,214,120,.28), transparent 70%), var(--paper); }
.zoomed .bar, .zoomed .steps, .zoomed .tile { -webkit-backdrop-filter: none; backdrop-filter: none; }
.zoomed .p3d__glow { filter: none; }
.bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(242,239,233,0) 40%, rgba(242,239,233,.35)); }

/* ---------------------------------------------------------------- top bar */
.bar { position: fixed; z-index: 40; left: 0; right: 0; top: 0; height: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--gut-r) 0 var(--gut); display: flex; align-items: center; gap: 16px;
  background: rgba(242,239,233,.72); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.bar.is-scrolled { border-bottom-color: var(--line); }
.bar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 21px/1 'Fraunces', Georgia, serif; letter-spacing: 0; }
.bar__brand img.wm__mo { width: 30px; height: auto; border-radius: 0; box-shadow: none; }
.bar__nav { display: flex; margin-left: auto; gap: 4px; font-size: 14px; }
.bar__nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; border-radius: 9999px; text-decoration: none; color: var(--mute); white-space: nowrap; }
.bar__nav a:hover { color: var(--ink); }
@media (max-width: 420px) { .bar__brand span { display: none; } }
@media (min-width: 768px) { .bar__nav { gap: 12px; font-size: 15px; } .bar__nav a { padding: 0 10px; } }

/* the one join button (after Whoop): a pill at the bottom on every screen size, hidden while the form is in view */
.float { position: fixed; z-index: 39; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 140%); display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px; border-radius: 9999px;
  background: var(--ink); color: var(--cream); font: 600 15px/20px 'DM Sans', sans-serif; text-decoration: none; box-shadow: 0 16px 32px -12px rgba(23,19,15,.55); transition: transform .5s var(--ease); white-space: nowrap; }
.float.is-on { transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- reveals: rise 14 px and fade, one after another */
.js [data-rv] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0s); }
.js [data-rv].in { opacity: 1; transform: none; }
.js [data-rv="pop"] { transform: scale(.6); transition: opacity .5s var(--ease), transform .7s cubic-bezier(.34,1.56,.64,1); }
.js [data-rv="pop"].in { transform: none; }
.js [data-rv="turn"] { transform: perspective(1200px) rotateX(24deg) translateY(40px); transform-origin: 50% 100%; transition: opacity .7s var(--ease), transform 1.1s var(--ease); }
.js [data-rv="turn"].in { transform: none; }
.rm [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------------------------------------------------------------- 3D phone (shared) */
.p3d { position: relative; transform-style: preserve-3d; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)) translateY(var(--ty, 0px)); will-change: transform; }
.p3d__slot { width: var(--pw, 240px); height: calc(var(--pw, 240px) * 856 / 402); }
.p3d__glow { position: absolute; left: 10%; right: 10%; bottom: -8%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(23,19,15,.32), transparent); filter: blur(12px); transform: translateZ(-80px); z-index: -1; }
.phone { text-align: left; }
.phone > .scr { box-shadow: 0 0 0 10px #17130f, 0 0 0 11px #4a4239, 0 50px 90px -30px rgba(23,19,15,.6), 0 0 90px -10px color-mix(in srgb, var(--acc) 45%, transparent); }

/* ---------------------------------------------------------------- 1 · hero */
.hero { position: relative; min-height: 100svh; padding: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 28px) var(--gut-r) 48px var(--gut); display: grid; justify-items: center; align-content: start; gap: 32px; text-align: center; overflow: clip; }
.hero__copy { position: relative; z-index: 2; max-width: 640px; display: grid; justify-items: center; align-content: center; gap: 16px; }
.hero__h1 { font: 600 42px/44px 'Fraunces', Georgia, serif; letter-spacing: -.025em; text-wrap: balance; padding-bottom: .18em; margin-bottom: -.18em; }   /* room for the g and y tails: Safari clips them while the blur fade runs */
.js .hero__h1 { filter: blur(14px); opacity: 0; transform: scale(1.04); animation: focusIn 1.2s var(--ease) .15s forwards; }
@keyframes focusIn { to { filter: blur(0); opacity: 1; transform: none; } }
/* two lines: the fixed half, then the changing words centred under it, so there's never a gap or a baseline clash */
.hero__swap { display: grid; justify-items: center; align-content: start; gap: 2px; font-size: 18px; line-height: 28px; color: var(--mute); }
.swap { display: grid; justify-items: center; overflow: hidden; height: 36px; color: var(--ink); font: 600 italic 28px/36px 'Fraunces', Georgia, serif; letter-spacing: -.01em; }
.swap__w { grid-area: 1 / 1; white-space: nowrap; transform: translateY(105%); opacity: 0; transition: transform .6s var(--ease), opacity .4s; }
.swap__w.is-on { transform: none; opacity: 1; }
.swap__w.is-out { transform: translateY(-105%); opacity: 0; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero__stage { position: relative; z-index: 1; display: grid; place-items: center; padding: 8px 0 24px; }
.hero .p3d { --pw: min(62vw, 250px); }
.js .hero .p3d { animation: rise 1.4s var(--ease) .35s both; }
@keyframes rise { from { opacity: 0; translate: 0 120px; } to { opacity: 1; translate: 0 0; } }
.p3d__mochi { position: absolute; width: 44%; right: -16%; top: -9%; transform: translateZ(60px) rotate(8deg); filter: drop-shadow(0 6px 5px rgba(23,19,15,.1)); }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.1fr .9fr; align-content: center; justify-items: start; text-align: left; gap: 48px; padding-left: max(48px, calc((100vw - 1120px) / 2)); padding-right: max(48px, calc((100vw - 1120px) / 2)); }
  .hero__copy { justify-items: start; }
  .hero__h1 { font-size: 72px; line-height: 72px; }
  .hero__swap, .swap { justify-items: start; } .hero__swap { font-size: 21px; line-height: 32px; } .swap { height: 48px; font-size: 40px; line-height: 48px; }
    .hero .p3d { --pw: 300px; }
}

/* ---------------------------------------------------------------- pinned scenes (shared) */
.pin { position: relative; height: calc(100svh + var(--steps) * var(--per, 32svh)); }
.pin__stick { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; justify-items: center; padding: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 12px) var(--gut-r) 24px var(--gut); text-align: center; overflow: clip; }
.rm .pin, html:not(.js) .pin { height: auto; }
.rm .pin__stick, html:not(.js) .pin__stick { position: relative; height: auto; padding-top: 96px; padding-bottom: 48px; }

/* ---------------------------------------------------------------- 2 · the loop */
.loop__stick { gap: 8px; }
.loop__dial { position: relative; width: min(64vw, 280px); aspect-ratio: 1; margin: 20px auto 8px; }
.loop__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.loop__track { fill: none; stroke: rgba(23,19,15,.1); stroke-width: 2; }
.loop__fill { fill: none; stroke: var(--steel); stroke-width: 4; stroke-linecap: round; stroke-dasharray: var(--lf, 0) 100; transition: stroke-dasharray .5s var(--ease); }
.loop__dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--paper); border: 2px solid rgba(23,19,15,.25); transform: rotate(var(--a)) translateY(calc(min(64vw, 280px) * -.42)) ; transition: background .4s, border-color .4s, transform .4s var(--ease); }
.loop__dot.on { background: var(--steel); border-color: var(--steel); }
.loop__mochi { position: absolute; left: 50%; top: 50%; width: 36%; transform: translate(-50%, -50%); opacity: .9; }
.loop__lines { position: relative; display: grid; width: 100%; max-width: 560px; min-height: 120px; }
.loop__lines li { grid-area: 1 / 1; align-self: center; font: 600 24px/32px 'Fraunces', Georgia, serif; letter-spacing: -.01em; text-wrap: balance; opacity: 0; transform: translateY(18px); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.loop__lines li b { color: #34597A; font-weight: 600; }
.loop__lines li.is-on { opacity: 1; transform: none; }
.loop__lines li.is-past { opacity: 0; transform: translateY(-18px); }
.loop__lines .loop__last { display: block; margin-top: 10px; font-style: italic; font-weight: 500; color: var(--mute); }
.rm .loop__lines li, html:not(.js) .loop__lines li { grid-area: auto; opacity: 1; transform: none; margin-bottom: 12px; }
.rm .loop__dial, html:not(.js) .loop__dial { display: none; }
@media (min-width: 768px) { .loop__lines li { font-size: 32px; line-height: 40px; } }

.beat { min-height: 52svh; display: grid; align-content: center; padding: 96px 0; text-align: center; }
.beat .wrap { max-width: 860px; display: grid; justify-items: center; gap: 20px; }
.beat .fine { max-width: 34em; }

/* ---------------------------------------------------------------- 3 · the promise */
.promise__mochi { width: 132px; }
.promise__lead { max-width: 20em; font-size: 26px; line-height: 32px; }
@media (min-width: 768px) { .promise__lead { font-size: 34px; line-height: 40px; } }
.promise .lede { max-width: 26em; }

/* ---------------------------------------------------------------- 4 · how it works */
.how__head { text-align: center; padding-top: 64px; display: grid; justify-items: center; }
.how .pin { --per: 48svh; }
.show .pin { --per: 38svh; }   /* progress and ideas: 3 steps, a little quicker */
.how__stick { gap: 16px; align-content: start; padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 16px); }
.steps { display: flex; gap: 2px; padding: 3px; border-radius: 9999px; background: rgba(255,255,255,.66); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 100%; overflow: clip; min-height: 36px; } /* clip, not hidden: a hidden box may shrink to nothing when the pinned scene is short on room (Jet, 28 Oct) */
.steps li { position: relative; padding: 6px 8px; border-radius: 9999px; font: 500 12px/16px 'DM Sans', sans-serif; color: var(--mute); white-space: nowrap; transition: background .4s var(--ease), color .4s; }
.steps li.is-on { background: var(--ink); color: var(--cream); }
.steps li.is-done { color: var(--ink); }
.how__grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; width: 100%; }
/* Safari let the step text widen its column past the screen (Jet, 28 Oct): keep every grid child inside its track */
.how__copy, .how__c { min-width: 0; grid-template-columns: minmax(0, 1fr); } .how__copy { max-width: min(420px, calc(100vw - 32px)); } .how__c p, .how__c h3 { overflow-wrap: break-word; }
.how__phone { position: relative; }
.how .p3d { --pw: min(48vw, calc((100svh - 330px) * 402 / 856), 300px); }
.how__mochi { position: absolute; width: 34%; left: -22%; bottom: 6%; transform: rotate(-6deg); filter: drop-shadow(0 6px 5px rgba(23,19,15,.1)); }
.how__copy { position: relative; display: grid; width: 100%; max-width: 420px; min-height: 120px; }
.how__c { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ease), transform .55s var(--ease); display: grid; gap: 6px; align-content: start; }
.how__c.is-on { opacity: 1; transform: none; }
.how__c.is-past { transform: translateY(-16px); }
.how__c p { color: var(--mute); font-size: 15.5px; line-height: 24px; }
.how__after { text-align: center; display: grid; justify-items: center; padding-top: 32px; }
.how__after .lede { max-width: 28em; }
.rm .how__c, html:not(.js) .how__c { grid-area: auto; opacity: 1; transform: none; margin-bottom: 20px; }
.rm .steps, html:not(.js) .steps { display: none; }
@media (min-width: 900px) {
  .how__stick { align-content: center; }
  .how__grid { grid-template-columns: 1fr 1fr; align-items: center; max-width: 1040px; gap: 64px; }
  .how__phone { justify-self: end; }
  .how .p3d { --pw: min(300px, calc((100svh - 220px) * 402 / 856)); }
  .how__copy { justify-self: start; text-align: left; min-height: 200px; }
  .how__c h3 { font-size: 36px; line-height: 40px; }
  .how__c p { font-size: 18px; line-height: 28px; }
  .steps li { padding: 8px 16px; font-size: 14px; } .steps { min-height: 42px; }
}
.scene { min-height: 75svh; }
.scene__time { font: 500 13px/16px 'DM Sans', sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--acc-ink); }
.scene__line { max-width: 18em; }

/* ---------------------------------------------------------------- 5 · what you get (bento, layered mini cards) */
.feat { padding: 64px 0 96px; }
.feat .wrap > .label, .feat .h2 { text-align: center; }
.feat .wrap { display: grid; justify-items: center; }
.feat .h2 { max-width: 18em; }
.bento { display: grid; gap: 12px; margin-top: 40px; width: 100%; }
/* phones: the tiles sit in one row you swipe through, with the next one peeking in */
@media (max-width: 639px) {
  .bento { grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    width: auto; margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut-r) * -1); padding: 4px var(--gut-r) 24px var(--gut); scroll-padding-left: var(--gut); scrollbar-width: none; }
  .bento::-webkit-scrollbar { display: none; }
  .bento .tile { scroll-snap-align: start; }
  /* the research cards swipe like the tiles (Jet, 28 Oct) */
  .sci .facts { grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; width: auto; margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut-r) * -1); padding: 4px var(--gut-r) 24px var(--gut); scroll-padding-left: var(--gut); scrollbar-width: none; align-items: stretch; }
  .facts::-webkit-scrollbar { display: none; }
  .sci .facts .fact { scroll-snap-align: start; }
  .bento .tile__vis { height: 168px; }
  .bento .vis-time .mini--a { top: 10px; } .bento .vis-time .mini--b { bottom: 10px; }
}
.tile { position: relative; padding: 16px 20px 24px; border-radius: 28px; background: rgba(251,248,243,.82); border: 1px solid rgba(23,19,15,.08); box-shadow: 0 24px 48px -36px rgba(23,19,15,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-align: left; overflow: hidden; }
.tile h3 { margin-top: 16px; }
.tile p { margin-top: 6px; color: var(--mute); font-size: 15.5px; line-height: 24px; }
.tile__vis { position: relative; height: 136px; border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--aqua) 22%, var(--paper)), color-mix(in srgb, var(--lime) 18%, var(--paper))); overflow: hidden; perspective: 900px; }
.mini { position: absolute; display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--cream); border: 1px solid rgba(23,19,15,.1); box-shadow: 0 16px 28px -16px rgba(23,19,15,.45); font-size: 13px; line-height: 18px; transition: transform .9s var(--ease); }
.mini small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.mini b { font: 600 17px/20px 'Fraunces', Georgia, serif; }
.mini b.big { font-size: 40px; line-height: 40px; }
.mini span { color: var(--mute); }
.mini--a { left: 16px; top: 18px; right: 34%; z-index: 2; transform: translateZ(30px) rotate(-2deg); }
.mini--b { right: 14px; bottom: 14px; left: 46%; z-index: 1; transform: translateZ(0) rotate(3deg); opacity: .96; }
.tile.in .mini--a, .bento.in .mini--a { transform: translateZ(30px) rotate(-1deg) translateY(-2px); }
.mini__btns { display: flex; gap: 6px; margin-top: 4px; font-style: normal; }
.mini__btns em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 9999px; background: var(--ink); color: var(--cream); white-space: nowrap; }
.mini__btns em.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(23,19,15,.3); }
.chips { display: flex !important; flex-wrap: wrap; gap: 6px; }
.chips em { font-style: normal; font-size: 12px; padding: 4px 10px; border-radius: 9999px; border: 1px solid rgba(23,19,15,.18); white-space: nowrap; }
.chips em.on { background: color-mix(in srgb, var(--aqua) 30%, var(--cream)); border-color: var(--ink); }
.dots, .wk { display: flex; gap: 6px; font-style: normal; }
.dots u { width: 14px; height: 14px; border-radius: 50%; background: rgba(23,19,15,.1); }
.dots u.on { background: var(--aqua); }
.wk u { width: 22px; height: 26px; display: grid; place-items: center; border-radius: 8px; text-decoration: none; font-size: 11px; color: var(--soft); background: rgba(23,19,15,.05); }
.wk u.on { background: var(--ink); color: var(--cream); }
.split { display: flex; gap: 4px; height: 26px; font-style: normal; margin-top: 4px; }
.split u { width: 0; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--aqua); color: var(--ink); text-decoration: none; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; transition: width 1.1s var(--ease) .2s; }
.split u + u { background: var(--lime); }
.tile.in .split u, .bento.in .split u, .rm .split u { width: var(--w); }
.vis-time .mini--a { right: 16px; } .vis-time .mini--b { left: 16px; right: 30%; }
.vis-plan .mini--a { right: 16px; } .vis-plan .mini--b { left: 8%; right: 14px; }
.vis-fresh .mini--a { right: 16px; } .vis-fresh .mini--b { left: 52%; }
.vis-place .mini--a { right: 22%; }
.vis-video .mini--a b { font-size: 20px; } .vis-video .mini--a { right: 32%; } .vis-video .mini--b { left: auto; width: 32%; min-width: 96px; }
.vis-cue .mini--a { right: 16px; } .vis-cue .mini--a b { font-style: italic; font-weight: 500; } .vis-cue .mini--b { left: 40%; }
@media (min-width: 640px) { .bento { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 1000px) { .bento { grid-template-columns: repeat(3, 1fr); } .tile__vis { height: 168px; } }

/* ---------------------------------------------------------------- 6 · the research */
.sci { padding: 80px 0 96px; }
.sci .wrap { display: grid; justify-items: center; text-align: center; }
.sci .h2 { max-width: 20em; }
.sci__lede { max-width: 26em; margin-top: 16px; }
.sci__smart { display: block; margin-bottom: 8px; font: 600 italic clamp(22px, 5.6vw, 28px)/1.25 'Fraunces', Georgia, serif; color: var(--tone, var(--ink)); }
.facts { display: grid; gap: 12px; width: 100%; margin-top: 40px; }
.fact { position: relative; padding: 24px 24px 28px; border-radius: 28px; background: rgba(251,248,243,.86); border: 1px solid rgba(23,19,15,.08); text-align: left; box-shadow: 0 0 0 1px rgba(77,107,255,.04), 0 30px 60px -40px rgba(77,107,255,.6); overflow: hidden; }
.fact::before { content: ''; position: absolute; right: -30%; top: -60%; width: 90%; height: 120%; background: radial-gradient(closest-side, rgba(77,107,255,.18), transparent); pointer-events: none; }
.fact__n { position: relative; font: 600 30px/36px 'Fraunces', Georgia, serif; letter-spacing: -.02em; margin-bottom: 10px; }
.fact__n b { font-size: 64px; line-height: 64px; letter-spacing: -.035em; color: var(--cobalt); font-variant-numeric: tabular-nums; }
.fact__when { position: relative; font: 500 12px/16px 'DM Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); margin-bottom: 8px; }
.fact .fact__do { position: relative; font: 600 26px/1.15 'Fraunces', Georgia, serif; letter-spacing: -.015em; color: var(--ink); margin-bottom: 10px; }
.fact p:not(.fact__n):not(.fact__when):not(.fact__do) { position: relative; color: var(--mute); font-size: 15.5px; line-height: 24px; }
.sci__foot { margin-top: 32px; display: grid; justify-items: center; gap: 20px; max-width: 32em; }
.sci__foot p { color: var(--mute); }
.sci__count { font-size: 12.5px; font-weight: 500; color: var(--mute); }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 980px; } .fact__n b { font-size: 80px; line-height: 80px; } }

/* ---------------------------------------------------------------- 7 · who you become */
.become .pin { --per: 28svh; }
.become__stick { gap: 0; }
.become__stick .h2 { margin-bottom: 56px; }
@media (min-width: 768px) { .become__stick .h2 { margin-bottom: 76px; } }
.swapcard { position: relative; width: 100%; max-width: 760px; padding: 44px 16px 12px; border-radius: 32px; background: rgba(251,248,243,.9); border: 1px solid rgba(23,19,15,.08); box-shadow: 0 40px 80px -50px rgba(23,19,15,.55), 0 0 120px -40px color-mix(in srgb, var(--lime) 70%, transparent); text-align: left; }
.swapcard__mochi { position: absolute; width: 76px; left: 50%; top: -42px; transform: translateX(-50%); filter: drop-shadow(0 6px 5px rgba(23,19,15,.1)); }
.swapcard__rows li { position: relative; display: grid; overflow: hidden; padding: 10px 8px; border-top: 1px solid var(--line); font-size: 15px; line-height: 21px; }
.swapcard__rows li:first-child { border-top: 0; }
.swapcard__rows .old, .swapcard__rows .new { grid-area: 1 / 1; }
.swapcard__rows .old { color: var(--soft); clip-path: inset(0 0 0 calc(var(--p, 0) * 100%)); }
.swapcard__rows .new { color: var(--ink); font-weight: 500; clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }
/* the band of lime light that sweeps across each row */
.swapcard__rows li::after { content: ''; position: absolute; top: 4px; bottom: 4px; width: 56px; left: calc(var(--p, 0) * 100% - 28px); border-radius: 12px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lime) 75%, transparent), transparent); opacity: calc(var(--p, 0) * (1 - var(--p, 0)) * 4); pointer-events: none; mix-blend-mode: multiply; }
.rm .swapcard__rows li, html:not(.js) .swapcard__rows li { --p: 1; display: block; }
.rm .swapcard__rows .old, html:not(.js) .swapcard__rows .old { display: block; clip-path: none; text-decoration: line-through; margin-bottom: 2px; }
.rm .swapcard__rows .new, html:not(.js) .swapcard__rows .new { display: block; clip-path: none; }
@media (min-width: 768px) {
  .swapcard { padding: 56px 32px 16px; }
  .swapcard__rows li { grid-template-columns: 1fr 1fr; gap: 24px; font-size: 17px; line-height: 24px; padding: 14px 8px; }
  .swapcard__rows .old { grid-area: 1 / 1; clip-path: none; opacity: calc(1 - var(--p, 0) * .55); }
  .swapcard__rows .new { grid-area: 1 / 2; }
  .swapcard__rows li::after { left: calc(50% + var(--p, 0) * 50% - 28px); }
  .swapcard__mochi { width: 96px; top: -56px; }
}


/* ---------------------------------------------------------------- 8 · the promise */
.pledge { padding: 64px 0; }
.pledge .wrap { display: grid; justify-items: center; gap: 32px; text-align: center; }
.pledge__card { position: relative; max-width: 620px; padding: 48px 24px 32px; border-radius: 32px; background: var(--cream); border: 1px solid rgba(23,19,15,.1); box-shadow: 0 50px 90px -50px rgba(23,19,15,.6), 0 0 0 8px rgba(255,214,10,.16); }
.pledge__card .h2 { margin-bottom: 16px; }
.pledge__line { font: 500 italic 20px/30px 'Fraunces', Georgia, serif; margin-bottom: 16px; }
.pledge__seal { position: absolute; top: -36px; left: 50%; width: 76px; height: 76px; margin-left: -38px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 35% 30%, #FFE680, var(--sun) 55%, #F2A900); color: var(--ink); box-shadow: 0 0 0 4px var(--cream), 0 14px 24px -10px rgba(138,90,0,.6); transform: scale(1.6) rotate(-14deg); opacity: 0; transition: transform .6s cubic-bezier(.34,1.56,.64,1) .7s, opacity .3s .7s; }
.pledge__seal b { font: 700 28px/26px 'Fraunces', Georgia, serif; } .pledge__seal small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.pledge__card.in .pledge__seal, .rm .pledge__seal, html:not(.js) .pledge__seal { transform: rotate(-8deg); opacity: 1; }
.pledge__commit { max-width: 30em; font: 500 18px/28px 'Fraunces', Georgia, serif; color: var(--mute); }
.pledge__commit em { color: var(--ink); }
@media (min-width: 768px) { .pledge__card { padding: 56px 48px 40px; } .pledge__line { font-size: 24px; line-height: 34px; } .pledge__commit { font-size: 22px; line-height: 32px; } }

/* ---------------------------------------------------------------- 10 · sign up and questions */
.close { padding: 120px 0 48px; }
.close > .wrap:first-child { display: grid; justify-items: center; text-align: center; gap: 12px; }
.close__was { font: 500 italic 20px/28px 'Fraunces', Georgia, serif; color: var(--soft); text-decoration: line-through; text-decoration-color: rgba(23,19,15,.35); }
.close .h2--xl { max-width: 14em; }
.apptile { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 360px; margin: 24px auto 8px; padding: 16px; border-radius: 24px; text-align: left; background: rgba(255,255,255,.75); border: 1px solid rgba(23,19,15,.08); box-shadow: 0 20px 40px -28px rgba(23,19,15,.5); }
.apptile__icon { flex: none; width: 72px; height: 72px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(23,19,15,.08), 0 10px 20px -10px rgba(23,19,15,.6); }
.apptile__txt { min-width: 0; display: grid; gap: 2px; }
.apptile__name { font: 600 23px/28px 'Fraunces', Georgia, serif; }
.apptile__sub { font-size: 14px; line-height: 20px; color: var(--mute); }
.apptile__when { margin-top: 4px; font-size: 12.5px; line-height: 16px; color: #8A5A00; }
.close__ask { margin-top: 16px; font: 600 22px/28px 'Fraunces', Georgia, serif; }
/* The ending (Jet, 28 Oct): old self crossed out, new self, one pull line, the form. Founding spots are first in line, never reserved or counted down */
.close__pull { max-width: 18em; margin: 26px auto 0; font: 700 clamp(23px, 6vw, 32px)/1.2 'Fraunces', Georgia, serif; color: #A04A00; }
.close__sub { max-width: 24em; margin: 12px auto 32px; font: 500 italic 18px/26px 'Fraunces', Georgia, serif; color: var(--mute); }
.ticket { display: inline-flex; align-items: center; gap: 14px; margin: 0 auto 36px; padding: 14px 22px 14px 14px; border-radius: 18px; text-align: left; background: var(--cream); border: 1px dashed rgba(160,74,0,.45); box-shadow: 0 22px 40px -26px rgba(23,19,15,.55); rotate: -3deg; }
.ticket__mochi { width: 52px; height: auto; }
.ticket small { display: block; font: 500 11.5px/14px 'DM Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #A04A00; }
.ticket b { display: block; margin-top: 4px; font: 600 26px/1.1 'Fraunces', Georgia, serif; }
.ticket i { font-style: normal; color: var(--soft); letter-spacing: .05em; }
.wl { width: 100%; max-width: 480px; display: grid; gap: 8px; margin-top: 8px; }
.wl input[type="email"] { width: 100%; min-height: 52px; padding: 12px 20px; border-radius: 9999px; border: 1.5px solid rgba(23,19,15,.22); background: #fff; color: var(--ink); font: 400 16px/24px 'DM Sans', sans-serif; }
.wl input[type="email"]::placeholder { color: #6E675D; }
.wl input[type="email"]:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255,214,10,.45); }
.wl.is-invalid input[type="email"] { border-color: #8A4B0B; box-shadow: 0 0 0 4px rgba(255,138,31,.25); }
.wl.is-done .btn { background: #2F5D1F; }
.btn[aria-busy="true"] { cursor: progress; }
.wl__msg { min-height: 20px; font-size: 14px; line-height: 20px; color: #8A4B0B; }
@media (min-width: 560px) { .wl { grid-template-columns: 1fr auto; } }

.faq-wrap { max-width: 760px; padding-top: 80px; }
.faq-wrap .h2 { text-align: center; margin-bottom: 24px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 16px 0; cursor: pointer; list-style: none; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq details p { padding: 0 0 24px; color: var(--mute); }
.faq details p a { color: var(--ink); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- footer */
.foot { padding: 48px 0 calc(96px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: rgba(242,239,233,.6); }
.foot .wrap { display: grid; gap: 16px; justify-items: center; text-align: center; }
.foot__slogan { font: 600 22px/28px 'Fraunces', Georgia, serif; max-width: 18em; }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: 15px; }
.foot__links a { color: var(--mute); text-underline-offset: 3px; }
@media (min-width: 768px) { .foot { padding-bottom: 48px; } }

/* ---------------------------------------------------------------- animated Mochi (<gm-mochi>, js/mochi.js) */
gm-mochi { position: relative; display: block; }
gm-mochi[mood="happy"] { aspect-ratio: 480 / 432; } gm-mochi[mood="proud"] { aspect-ratio: 480 / 512; } gm-mochi[mood="sleepy"] { aspect-ratio: 480 / 384; }
gm-mochi img, gm-mochi video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
gm-mochi video, gm-mochi img.gm-anim { opacity: 0; transition: opacity .3s var(--ease); }
gm-mochi video.is-playing, gm-mochi img.gm-anim.is-playing { opacity: 1; }
gm-mochi.is-video img:not(.gm-anim) { opacity: 0; transition: opacity .3s var(--ease) .1s; }
.mood-squish { animation: squish .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes squish { 0% { scale: 1; } 35% { scale: 1.12 .9; } 70% { scale: .96 1.05; } 100% { scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; }
  .js .hero__h1 { filter: none; opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- 9b · ideas and feedback (pinned, like how it works) */

/* the progressive overload tile */
.vis-load .mini--a { right: 32%; } .vis-load .mini--b { left: auto; width: 32%; min-width: 96px; } .vis-load .mini--b b { font-size: 15px; white-space: nowrap; }
.vis-load .up { font: 600 12px/1 'DM Sans', sans-serif; font-style: normal; padding: 3px 7px; margin-left: 6px; border-radius: 9999px; background: color-mix(in srgb, var(--lime) 55%, var(--cream)); vertical-align: middle; }

/* ---------------------------------------------------------------- 3b · the launch film */
.film { padding: 8px 0 72px; }
.film__card { position: relative; max-width: 1040px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: #17130F; box-shadow: 0 40px 80px -48px rgba(23,19,15,.6); }
.film__card.is-empty { background: radial-gradient(120% 90% at 20% 30%, color-mix(in srgb, var(--sun) 55%, transparent), transparent 60%), radial-gradient(90% 80% at 85% 75%, color-mix(in srgb, var(--orange) 40%, transparent), transparent 60%), #FBF8F3; border: 1px solid rgba(23,19,15,.08); }
.film__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(251,248,243,.92); color: var(--ink); box-shadow: 0 16px 32px -12px rgba(23,19,15,.5); cursor: pointer; transition: transform .3s var(--ease); }
.film__play:hover { transform: scale(1.06); }
.film__play svg { width: 30px; height: 30px; fill: currentColor; margin-left: 4px; }
.film__soon { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; font: 500 12.5px/16px 'DM Sans', sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--mute); }
.film__card:not(.is-empty) .film__soon { display: none; }
.film__card.is-playing .film__play { opacity: 0; pointer-events: none; }
.film__card.is-empty .film__play { cursor: default; }
@media (max-width: 600px) { .film__card { border-radius: 20px; } .film__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .film__play svg { width: 24px; height: 24px; } }

/* 2026-10-28 (Jet): the new small logo. "Gymochi" in upright Fraunces, letters spaced .12em, with Mochi beside the word
   (brand book section 6 "Logo"). Replaces the app icon and the italic wordmark. */
.wm { font: 600 21px/1 'Fraunces', Georgia, serif; font-style: normal; letter-spacing: .12em; }
.wm__mo { width: 30px; height: auto; margin-left: -4px; transform: translateY(-2px); }

/* ================================================================ v8 copy (29 Oct, Jet's sister's feedback): say each message once,
   the off-day chain, what changes for you, kinds of option compared, Jet's story */
@media (max-width: 479px) { .bar__nav a[href="#research"] { display: none; } }

/* hero: a plain line on what the app does, and two buttons */
.hero__sub { max-width: 30em; font-size: 18px; line-height: 28px; color: var(--mute); text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.btn--line { background: rgba(255,255,255,.6); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--line::before { display: none; }
@media (min-width: 900px) { .hero__sub { font-size: 21px; line-height: 32px; } .hero__cta { justify-content: flex-start; } }

/* 3 · why it keeps happening */
.promise .label { margin-bottom: 0; }
.promise .h2--xl { max-width: 15em; }
.why__body { max-width: 34em; font-size: 17px; line-height: 27px; color: var(--mute); text-wrap: pretty; }
.why__pull { max-width: 20em; font: 600 24px/1.25 'Fraunces', Georgia, serif; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
@media (min-width: 768px) { .why__body { font-size: 19px; line-height: 30px; } .why__pull { font-size: 30px; } }
.how__lede { max-width: 26em; margin-top: 14px; }

/* 4b · where this takes you: a timeline, day 1 to month 6. A track runs down the left (phones) or between the time and
   the card (wide screens); .tl__fill grows with the scroll (--tl, 0 to 1) and each dot lights when its step is .on (v7.js) */
.gains { padding: 88px 0 72px; }
.gains .wrap { display: grid; justify-items: center; text-align: center; }
.tl { --x: 11px; position: relative; display: grid; gap: 20px; width: 100%; max-width: 760px; margin-top: 40px; padding: 0; list-style: none; text-align: left; }
.tl::before, .tl__fill { content: ''; position: absolute; left: calc(var(--x) - 1.5px); top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--line); }
.tl__fill { background: linear-gradient(180deg, var(--lime), #6FB51E); transform-origin: top; transform: scaleY(var(--tl, 0)); }
.tl__step { position: relative; display: grid; gap: 8px; padding-left: calc(var(--x) * 2 + 18px); }
.tl__step::before { content: ''; position: absolute; left: calc(var(--x) - 9px); top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--cream); border: 3px solid rgba(23,19,15,.18); transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.tl__step.on::before { background: var(--lime); border-color: #6FB51E; box-shadow: 0 0 0 6px color-mix(in srgb, var(--lime) 30%, transparent); }
.tl__when { white-space: nowrap; font: 600 italic 22px/26px 'Fraunces', Georgia, serif; color: var(--soft); transition: color .4s var(--ease); }
.tl__step.on .tl__when { color: #3F6A0A; }
.tl__card { padding: 22px 22px 20px; border-radius: 24px; background: rgba(251,248,243,.88); border: 1px solid rgba(23,19,15,.08); box-shadow: 0 30px 60px -44px rgba(23,19,15,.5); }
.tl__card h3 { font: 600 24px/1.2 'Fraunces', Georgia, serif; letter-spacing: -.01em; }
.tl__card > p { margin-top: 8px; color: var(--mute); font-size: 15.5px; line-height: 24px; }
.tl__card .tl__eg { display: inline-grid; gap: 2px; margin-top: 16px; padding: 10px 16px 11px; border-radius: 14px; border-left: 3px solid var(--lime); background: color-mix(in srgb, var(--lime) 14%, var(--cream)); color: var(--ink); font-size: 15px; line-height: 21px; font-weight: 600; }
.tl__eg span { color: #3F6A0A; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tl__step:last-child .tl__card { background: var(--ink); border-color: var(--ink); }
.tl__step:last-child .tl__card h3 { color: var(--cream); }
.tl__step:last-child .tl__card > p { color: rgba(251,248,243,.74); }
.tl__step:last-child .tl__eg { background: rgba(166,227,59,.14); color: var(--cream); }
.tl__step:last-child .tl__eg span { color: var(--lime); }
.tl__note { margin-top: 20px; color: var(--soft); font-size: 13.5px; }
@media (min-width: 760px) {
  .tl { --x: 168px; gap: 28px; }
  .tl__step { grid-template-columns: calc(var(--x) - 28px) 1fr; gap: 0 56px; padding-left: 0; align-items: start; }
  .tl__when { font-size: 30px; line-height: 34px; text-align: right; padding-top: 18px; }
  .tl__step::before { top: 24px; }
  .tl__card { padding: 26px 28px 24px; }
}
.rm .tl__fill { transform: none; }
.rm .tl__step::before { background: var(--lime); border-color: #6FB51E; }

/* 5 · how Gymochi is different: a table on wide screens, one card per situation on phones */
.vs { padding: 72px 0 88px; }
.vs .wrap { display: grid; justify-items: center; text-align: center; }
.vs .h2 { max-width: 22em; }
.vs__t { width: 100%; max-width: 1000px; margin-top: 36px; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 15px; line-height: 22px; }
.vs__t th, .vs__t td { padding: 14px 16px; vertical-align: top; }
.vs__t thead th { font: 500 12px/16px 'DM Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.vs__t thead th.vs__us { color: #34597A; }
.vs__t tbody th { font: 600 17px/1.3 'Fraunces', Georgia, serif; color: var(--ink); }
.vs__t tbody td { color: var(--mute); }
.vs__t tbody tr > * { border-top: 1px solid var(--line); }
.vs__t td.vs__us { color: var(--ink); font-weight: 600; background: rgba(251,248,243,.92); }
.vs__t thead th.vs__us { background: rgba(251,248,243,.92); border-radius: 20px 20px 0 0; }
.vs__t tbody tr:last-child td.vs__us { border-radius: 0 0 20px 20px; }
.vs__t td.vs__us a { color: inherit; text-underline-offset: 3px; }
.vs__after { max-width: 26em; margin-top: 28px; }
@media (max-width: 759px) {
  .vs__t, .vs__t tbody, .vs__t tr, .vs__t th, .vs__t td { display: block; }
  .vs__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vs__t tbody { display: grid; gap: 12px; }
  .vs__t tbody tr { padding: 18px 18px 8px; border-radius: 24px; background: rgba(251,248,243,.86); border: 1px solid rgba(23,19,15,.08); box-shadow: 0 24px 48px -40px rgba(23,19,15,.5); }
  .vs__t tbody tr > * { border-top: 0; padding: 0; }
  .vs__t tbody th { margin-bottom: 10px; font-size: 19px; }
  .vs__t tbody td { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 21px; }
  .vs__t tbody td::before { content: attr(data-k); font: 500 10.5px/16px 'DM Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); padding-top: 2px; }
  .vs__t td.vs__us { background: transparent; border-radius: 0 !important; }
  .vs__t td.vs__us::before { color: #34597A; }
}

/* 6b · Jet's story */
.founder { padding: 40px 0 96px; }
.founder__card { position: relative; max-width: 680px; margin: 0 auto; padding: 36px 26px 30px; border-radius: 32px; background: var(--cream); border: 1px solid rgba(23,19,15,.08); box-shadow: 0 50px 90px -56px rgba(23,19,15,.6); }
.founder__h { font: 600 30px/1.15 'Fraunces', Georgia, serif; letter-spacing: -.015em; text-wrap: balance; }
.founder__q { margin-top: 18px; display: grid; gap: 14px; font-size: 17px; line-height: 27px; color: var(--mute); }
.founder__turn { color: var(--ink); font-weight: 500; }
.founder__by { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.founder__mochi { width: 44px; }
.founder__pic { position: relative; flex: none; width: 64px; height: 64px; }
.founder__pic > img { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--cream), 0 10px 24px -12px rgba(23,19,15,.5); }
.founder__pic .founder__mochi { position: absolute; right: -12px; bottom: -6px; width: 30px; }
.founder__by b { display: block; font: 600 20px/24px 'Fraunces', Georgia, serif; }
.founder__by span { font-size: 14px; line-height: 20px; color: var(--mute); }
@media (min-width: 768px) { .founder__card { padding: 48px 48px 36px; } .founder__h { font-size: 38px; } .founder__q { font-size: 18px; line-height: 29px; } }

/* progress ends on the old "You just do" line */
#progress #justdo { min-height: 0; padding: 72px 0 40px; }
#progress #justdo .wrap { gap: 14px; }
/* the period tile: the check-in chips, then what's added */
.vis-period .mini--a { right: 16px; } .vis-period .mini--b { left: 40%; }
/* 29 Oct (Jet): more air. The pull line is its own moment, the film sits apart from what's around it */
.promise.beat { padding-bottom: 72px; }
.promise .promise__mochi { margin-top: 56px; }
.film { padding: 64px 0 120px; }
@media (min-width: 768px) { .promise .promise__mochi { margin-top: 72px; } .film { padding: 80px 0 140px; } }

/* conversion round (29 Oct): sign-up box in the hero and after the comparison, film as a text link */
.hero__join { width: 100%; max-width: 480px; display: grid; justify-items: inherit; gap: 4px; margin-top: 8px; }
.hero__join .wl { margin-top: 0; }
.hero__join .wl__msg { min-height: 0; }
.hero__fine a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.midjoin { max-width: 560px; margin: 40px auto 0; padding: 28px 24px; border-radius: 28px; background: var(--cream, #FBF8F3); display: grid; justify-items: center; gap: 8px; text-align: center; }
.midjoin__line { font: 700 24px/30px 'Fraunces', serif; }
.midjoin .wl { justify-self: stretch; margin: 0 auto; }
.midjoin .wl__msg { min-height: 0; }