/* The journey film on the homepage. Every rule is scoped to its section
   (.j) and the film needs nothing from the page but its colours. It draws
   its own frame and screen (.j-frame, .j-screen).
   Colours come from the page's :root, which mirrors
   yinoko-react-native/src/theme/colors.ts. */

/* src/theme/curves.ts */
.j { --ease-out:cubic-bezier(0,0,0.58,1); --ease-out-cubic:cubic-bezier(0.215,0.61,0.355,1); --ease-in-out:cubic-bezier(0.42,0,0.58,1); }
.j p { margin:0; }

@keyframes j-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.035); } }

/* ---------- App renditions, at the app's measurements ---------- */
.j .j-frame { position:relative; z-index:1; width:100%; height:100%; border:1px solid var(--rule-strong); border-radius:44px; padding:9px; background:var(--panel); }
.j .j-screen { container-type:inline-size; --pt:calc(100cqw / 390); position:relative; width:100%; height:100%; border-radius:36px; background:var(--void); overflow:hidden; }
.j .a-title, .j .a-headline, .j .a-share, .j .a-figbox, .j .a-unit, .j .a-avatar, .j .j-disp, .j .j-wordmark, .j .j-wm, .j .j-tiletitle, .j .j-fig, .j .j-box b, .j .j-date b, .j .j-bigfig b, .j .j-clock, .j .j-stat b, .j .j-stat i, .j .j-calday b, .j .j-cbox b { font-family:'Big Shoulders Display',sans-serif; font-weight:800; }
.j .a-glow { background-image:radial-gradient(65% 65% at 50% 42.5%, var(--ember-glow-base) 0%, transparent 100%); }
.j .a-status { position:absolute; z-index:6; top:0; left:0; right:0; height:calc(50*var(--pt)); display:flex; align-items:center; justify-content:space-between; padding:calc(4*var(--pt)) calc(34*var(--pt)) 0; font-size:calc(16*var(--pt)); font-weight:600; pointer-events:none; }
.j .a-battery { width:calc(25*var(--pt)); height:calc(12*var(--pt)); border:1px solid var(--paper); border-radius:calc(3*var(--pt)); padding:1px; display:inline-flex; }
.j .a-battery span { width:70%; background:var(--paper); border-radius:1px; }
.j .a-head { flex:none; display:flex; align-items:center; gap:calc(12*var(--pt)); padding:calc(8*var(--pt)) calc(20*var(--pt)) calc(14*var(--pt)); border-bottom:1px solid var(--hairline); }
.j .a-round, .j .a-slot { flex:none; width:calc(44*var(--pt)); height:calc(44*var(--pt)); display:flex; align-items:center; justify-content:center; }
.j .a-round { border-radius:50%; border:1px solid var(--hairline-strong); }
.j .a-mascot { width:calc(40*var(--pt)); height:calc(40*var(--pt)); }
.j .a-ico { flex:none; display:block; width:calc(18*var(--pt)); height:calc(18*var(--pt)); fill:none; stroke:var(--paper); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; }
.j .a-ico-14 { width:calc(14*var(--pt)); height:calc(14*var(--pt)); }
.j .a-ico-16 { width:calc(16*var(--pt)); height:calc(16*var(--pt)); }
.j .a-ico-20 { width:calc(20*var(--pt)); height:calc(20*var(--pt)); }
.j .a-ico-32 { width:calc(32*var(--pt)); height:calc(32*var(--pt)); }
.j .a-ico-ash { stroke:var(--ash); }
.j .a-titled { flex:1; min-width:0; display:grid; gap:calc(2*var(--pt)); }
.j .a-title { flex:1; min-width:0; font-size:calc(30*var(--pt)); line-height:calc(32*var(--pt)); text-transform:uppercase; white-space:nowrap; overflow:hidden; }
.j .a-micro, .j .a-meta { font-family:'IBM Plex Mono',monospace; font-weight:400; text-transform:uppercase; color:var(--ash); }
.j .a-micro { font-size:calc(11*var(--pt)); line-height:calc(15*var(--pt)); letter-spacing:0.16em; }
.j .a-meta { font-size:calc(13*var(--pt)); line-height:calc(18*var(--pt)); letter-spacing:0.14em; }
.j .a-micro-on { color:var(--paper); }
.j .a-micro em { font-style:normal; }
.j .a-tag { display:inline-flex; align-items:center; gap:calc(6*var(--pt)); padding:calc(6*var(--pt)) calc(10*var(--pt)); background:var(--ember); color:var(--paper); font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:calc(12*var(--pt)); line-height:calc(16*var(--pt)); letter-spacing:0.16em; text-transform:uppercase; }
.j .a-tag-quiet { background:var(--wash); }
.j .a-sectiontag { display:flex; align-items:center; gap:calc(12*var(--pt)); }
.j .a-sectiontag::after { content:""; flex:1; height:1px; background:var(--hairline); }
.j .a-band { flex:none; display:grid; gap:calc(14*var(--pt)); padding:calc(28*var(--pt)) calc(22*var(--pt)) calc(26*var(--pt)); border-bottom:1px solid var(--hairline); }
.j .a-headline { font-size:calc(52*var(--pt)); line-height:calc(54*var(--pt)); letter-spacing:-0.01em; text-transform:uppercase; }
.j .a-body, .j .a-note { font-size:calc(15*var(--pt)); line-height:calc(21*var(--pt)); }
.j .a-note { color:var(--ash); }
.j .a-share { flex:none; position:relative; display:flex; align-items:center; justify-content:space-between; gap:calc(12*var(--pt)); height:calc(40*var(--pt)); padding:0 calc(22*var(--pt)); background:var(--panel); font-size:calc(22*var(--pt)); line-height:1; }
.j .a-share i { position:absolute; left:0; top:0; bottom:0; width:0; background:var(--ember-spent); border-bottom:2px solid var(--ember); transition:width .5s var(--ease-out-cubic), box-shadow .7s var(--ease-in-out); }
.j .a-share.full i { box-shadow:0 0 calc(24*var(--pt)) var(--ember); }
.j .a-share > span { position:relative; }
.j .a-setinput { display:flex; align-items:center; gap:calc(10*var(--pt)); }
.j .a-figbox { flex:none; width:calc(96*var(--pt)); height:calc(52*var(--pt)); border:1px solid var(--hairline-strong); display:flex; align-items:center; justify-content:center; font-size:calc(40*var(--pt)); line-height:1; }
.j .a-unit { font-size:calc(22*var(--pt)); line-height:1; text-transform:uppercase; color:var(--ash); }
.j .a-sq { flex:none; width:calc(52*var(--pt)); height:calc(52*var(--pt)); border:1px solid var(--hairline-strong); display:flex; align-items:center; justify-content:center; }
.j .a-sq-40 { width:calc(40*var(--pt)); height:calc(40*var(--pt)); }
.j .a-foot { flex:none; margin-top:auto; display:grid; gap:calc(8*var(--pt)); padding:calc(10*var(--pt)) calc(22*var(--pt)) calc(34*var(--pt)); border-top:1px solid var(--hairline); }
.j .a-btn { position:relative; height:calc(60*var(--pt)); display:flex; align-items:center; justify-content:center; gap:calc(8*var(--pt)); background:var(--ember); font-weight:600; font-size:calc(16*var(--pt)); letter-spacing:0.14em; text-transform:uppercase; transition:background-color .12s; }
.j .a-btn > .a-ico:last-child { position:absolute; right:calc(16*var(--pt)); }
.j .a-btn2 { flex:1; height:calc(52*var(--pt)); display:flex; align-items:center; justify-content:center; gap:calc(10*var(--pt)); border:1px solid var(--hairline-strong); font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:calc(12*var(--pt)); letter-spacing:0.14em; text-transform:uppercase; }
.j .a-thread { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:calc(12*var(--pt)); padding:calc(12*var(--pt)); }
.j .a-turn { flex:none; display:grid; gap:calc(4*var(--pt)); justify-items:start; }
.j .a-turn-mine { justify-items:end; }
.j .a-bubble { max-width:90%; padding:calc(8*var(--pt)) calc(12*var(--pt)); background:var(--bubble); }
.j .a-turn-mine .a-bubble { max-width:80%; background:var(--ember); }
.j .a-chips { display:flex; flex-wrap:wrap; gap:calc(6*var(--pt)); padding-top:calc(4*var(--pt)); }
.j .a-chip { display:inline-flex; align-items:center; gap:calc(8*var(--pt)); padding:calc(7*var(--pt)) calc(12*var(--pt)); border:1px solid var(--hairline-strong); font-size:calc(15*var(--pt)); line-height:calc(21*var(--pt)); }
.j .a-composer { flex:none; display:flex; align-items:flex-end; gap:calc(8*var(--pt)); padding:calc(8*var(--pt)) calc(12*var(--pt)) calc(34*var(--pt)); border-top:1px solid var(--hairline); }
.j .a-input { flex:1; min-width:0; min-height:calc(40*var(--pt)); display:flex; align-items:center; padding:0 calc(12*var(--pt)); border:1px solid var(--hairline-strong); font-size:calc(17*var(--pt)); color:var(--ash); white-space:nowrap; overflow:hidden; }
.j .a-input.typed { color:var(--paper); }
.j .a-send { flex:none; width:calc(40*var(--pt)); height:calc(40*var(--pt)); display:flex; align-items:center; justify-content:center; background:var(--ember); }
.j .a-loading { display:inline-flex; gap:calc(4*var(--pt)); }
.j .a-loading i { width:calc(6*var(--pt)); height:calc(6*var(--pt)); background:var(--paper); opacity:0.3; animation:j-load 1.2s var(--ease-in-out) infinite; }
.j .a-loading i:nth-child(2) { animation-delay:.2s; }
.j .a-loading i:nth-child(3) { animation-delay:.4s; }
@keyframes j-load { 0%,60%,100% { opacity:0.3; } 30% { opacity:1; } }
.j .a-tabs { flex:none; display:flex; gap:calc(8*var(--pt)); padding:calc(14*var(--pt)) calc(22*var(--pt)); }
.j .a-seg { flex:1; display:flex; height:calc(40*var(--pt)); border:1px solid var(--hairline-strong); }
.j .a-seg > span { flex:1; display:flex; align-items:center; justify-content:center; gap:calc(6*var(--pt)); font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:calc(12*var(--pt)); letter-spacing:0.14em; text-transform:uppercase; transition:background-color .18s, color .18s; }
.j .a-seg > span + span { border-left:1px solid var(--hairline-strong); }
.j .a-seg > .a-seg-on { background:var(--paper); color:var(--void); }
.j .a-seg-52 { height:calc(52*var(--pt)); }
.j .a-seg-52 > span { letter-spacing:0.06em; }
.j .a-seg-44 { height:calc(44*var(--pt)); }
.j .a-badge { min-width:calc(16*var(--pt)); height:calc(16*var(--pt)); padding:0 calc(3*var(--pt)); display:inline-flex; align-items:center; justify-content:center; background:var(--ember); color:var(--paper); font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:calc(11*var(--pt)); letter-spacing:0; }
.j .a-member { flex:none; display:flex; align-items:center; gap:calc(14*var(--pt)); padding:calc(12*var(--pt)) calc(22*var(--pt)); border-bottom:1px solid var(--hairline); }
.j .a-member-text { flex:1; min-width:0; display:grid; gap:calc(3*var(--pt)); }
.j .a-name { font-size:calc(17*var(--pt)); line-height:calc(22*var(--pt)); }
.j .a-avatar { flex:none; width:calc(44*var(--pt)); height:calc(44*var(--pt)); border-radius:50%; border:1px solid var(--hairline-strong); background:var(--void); display:flex; align-items:center; justify-content:center; font-size:calc(22*var(--pt)); line-height:1; }
.j .a-avatar-you { border-color:var(--paper); }
.j .a-period { display:flex; gap:calc(4*var(--pt)); padding-top:calc(5*var(--pt)); }
.j .a-period span { width:calc(10*var(--pt)); height:calc(10*var(--pt)); border:1px solid transparent; transition:background-color .3s, border-color .3s; }
.j .a-period .kept { background:var(--paper); }
.j .a-period .now { border-color:var(--paper); }
.j .a-period .ahead { border:1px dashed var(--hairline); }
.j .a-tally { flex:none; display:grid; grid-template-rows:repeat(2, calc(12*var(--pt))); grid-auto-flow:column; grid-auto-columns:calc(12*var(--pt)); gap:calc(5*var(--pt)); }
.j .a-tally span { border:1px solid currentColor; transition:background-color .25s var(--ease-out-cubic); }
.j .a-tally .done { background:currentColor; }
.j .a-tally .none { border-color:transparent; }
.j .k-s { color:var(--ember); } .j .k-h { color:var(--ochre); } .j .k-c { color:var(--tide); } .j .k-p { color:var(--plum); }

/* ---------- New renditions for the film ---------- */
.j .j-layer { position:absolute; inset:0; display:flex; flex-direction:column; padding-top:calc(50*var(--pt)); background-color:var(--void); }
.j .j-center { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 calc(22*var(--pt)); text-align:center; }
.j .j-wordmark { font-size:calc(64*var(--pt)); line-height:1; letter-spacing:-0.5px; }
.j .j-wordmark span, .j .j-wm span { color:var(--ember); }
.j .j-wm { font-size:calc(32*var(--pt)); line-height:1; flex:1; text-align:center; }
.j .j-mascot56 { width:calc(56*var(--pt)); height:calc(56*var(--pt)); margin-top:calc(40*var(--pt)); animation:j-breathe 5.2s var(--ease-in-out) infinite; }

.j .j-form { flex:1; display:flex; flex-direction:column; justify-content:center; gap:calc(12*var(--pt)); padding:0 calc(22*var(--pt)); }
.j .j-label { display:block; margin-bottom:calc(6*var(--pt)); }
.j .j-field { height:calc(64*var(--pt)); display:flex; align-items:center; gap:calc(10*var(--pt)); padding:0 calc(14*var(--pt)); border:1px solid var(--hairline-strong); font-size:calc(40*var(--pt)); line-height:1; text-transform:uppercase; }
.j .j-field .a-unit { margin-left:auto; }
/* A typed field is one line, like the app's input: once the text outgrows
   the box it slides off the left, keeping the caret in view. The spacer
   takes the free room while the text is short, so it still starts left. */
.j .j-typed { justify-content:flex-end; overflow:hidden; white-space:nowrap; }
.j .j-typed > span { flex:none; }
.j .j-typed::after { content:""; flex:1 0 0; }
.j .j-caret { flex:none; display:inline-block; width:2px; height:0.8em; background:var(--ember); margin-left:2px; animation:j-blink 1s steps(1) infinite; }
@keyframes j-blink { 50% { opacity:0; } }
.j .j-togglerow { display:flex; align-items:center; gap:calc(12*var(--pt)); padding:calc(6*var(--pt)) 0; }
.j .j-togglerow > div { flex:1; display:grid; gap:calc(2*var(--pt)); text-align:left; }
.j .j-toggle { flex:none; width:calc(52*var(--pt)); height:calc(30*var(--pt)); border:1px solid var(--hairline-strong); padding:calc(3*var(--pt)); transition:background-color .2s, border-color .2s; }
.j .j-toggle i { display:block; width:calc(22*var(--pt)); height:100%; background:var(--paper); transition:transform .2s var(--ease-out-cubic); }
.j .j-toggle.on { background:var(--ember); border-color:var(--ember); }
.j .j-toggle.on i { transform:translateX(calc(22*var(--pt))); }
.j .j-formfoot { display:grid; gap:calc(8*var(--pt)); margin-top:calc(10*var(--pt)); }

/* Home */
.j .j-homehead { flex:none; display:flex; align-items:center; padding:calc(8*var(--pt)) calc(20*var(--pt)) calc(12*var(--pt)); }
.j .j-hband { flex:none; display:grid; gap:calc(14*var(--pt)); padding:calc(14*var(--pt)) calc(22*var(--pt)) calc(18*var(--pt)); }
.j .j-tagrow { display:flex; align-items:center; gap:calc(12*var(--pt)); }
.j .j-today { display:flex; min-height:calc(190*var(--pt)); background:var(--panel); border:1px solid var(--hairline-strong); border-left:calc(2*var(--pt)) solid var(--ember); }
.j .j-today-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:calc(6*var(--pt)); padding:calc(16*var(--pt)); }
.j .j-today-body .a-tally { margin-top:auto; align-self:flex-end; }
.j .j-block { flex:none; width:calc(72*var(--pt)); display:flex; align-items:center; justify-content:center; background:var(--ember); transition:background-color .12s; }
.j .j-wbox { display:flex; align-items:stretch; min-height:calc(50*var(--pt)); background:var(--panel); border:1px solid var(--hairline-strong); }
.j .j-wbox-body { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:calc(4*var(--pt)); padding:calc(12*var(--pt)) calc(14*var(--pt)); }
.j .j-wbox .j-wash { flex:none; width:calc(84*var(--pt)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(2*var(--pt)); background:var(--wash); }
.j .j-tiletitle { font-size:calc(34*var(--pt)); line-height:calc(34*var(--pt)); text-transform:uppercase; }
.j .j-fig { font-size:calc(40*var(--pt)); line-height:1; }
.j .j-fig-sm { font-size:calc(28*var(--pt)); }
.j .j-avs { display:flex; }
.j .j-avs .a-avatar { width:calc(26*var(--pt)); height:calc(26*var(--pt)); font-size:calc(13*var(--pt)); margin-right:calc(-6*var(--pt)); }
.j .j-plain { display:flex; align-items:center; justify-content:space-between; height:calc(56*var(--pt)); padding:0 calc(16*var(--pt)); border:1px solid var(--hairline-strong); font-size:calc(17*var(--pt)); transition:background-color .12s; }

/* Program week */
.j .j-dayrow { flex:none; display:flex; align-items:center; gap:calc(10*var(--pt)); min-height:calc(66*var(--pt)); padding:calc(8*var(--pt)) calc(22*var(--pt)); border-bottom:1px solid var(--hairline); }
.j .j-dayrow > .a-micro { flex:none; width:calc(36*var(--pt)); }
.j .j-dayrow > .j-slot { flex:1; position:relative; height:calc(50*var(--pt)); }
.j .j-dashed { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border:1px dashed var(--hairline-strong); transition:opacity .2s; }
.j .j-box { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:calc(2*var(--pt)); padding:0 calc(12*var(--pt)); background:var(--panel); border:1px solid var(--hairline-strong); border-left:calc(2*var(--pt)) solid currentColor; opacity:0; transform:translateX(calc(40*var(--pt))); transition:opacity .32s var(--ease-out-cubic), transform .42s var(--ease-out-cubic); }
.j .j-box b { font-size:calc(24*var(--pt)); line-height:1; color:var(--paper); text-transform:uppercase; }
.j .j-slot.in .j-box { opacity:1; transform:none; }
.j .j-slot.in .j-dashed { opacity:0; }
.j .j-namebar { flex:none; display:flex; align-items:center; gap:calc(10*var(--pt)); padding:calc(16*var(--pt)) calc(22*var(--pt)); border-bottom:1px solid var(--hairline); }

/* Calendar: day rows of WorkoutBoxes; a logged one closes on a wash block
   with its check, today's on an ember one. */
.j .j-calband { flex:none; display:flex; align-items:center; gap:calc(14*var(--pt)); padding:calc(16*var(--pt)) calc(22*var(--pt)); border-bottom:1px solid var(--hairline); }
.j .j-calband > div:first-child { flex:1; display:grid; gap:calc(4*var(--pt)); }
.j .j-calrow { flex:none; display:flex; gap:calc(10*var(--pt)); min-height:calc(66*var(--pt)); padding:calc(8*var(--pt)) calc(22*var(--pt)); border-bottom:1px solid var(--hairline); }
.j .j-calday { position:relative; flex:none; width:calc(66*var(--pt)); height:calc(50*var(--pt)); display:grid; align-content:center; justify-items:center; gap:calc(2*var(--pt)); transition:background-color .3s var(--ease-out-cubic); }
.j .j-calday b { font-size:calc(24*var(--pt)); line-height:1; color:var(--ash); transition:color .3s; }
.j .j-calday.today { background:var(--ember); }
.j .j-calday.today .a-micro, .j .j-calday.today b { color:var(--void); }
.j .j-cbox { flex:1; min-width:0; display:flex; height:calc(50*var(--pt)); background:var(--panel); border:1px solid var(--hairline-strong); border-left:calc(2*var(--pt)) solid currentColor; }
.j .j-cbox > div { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:calc(2*var(--pt)); padding:0 calc(12*var(--pt)); }
.j .j-cbox b { font-size:calc(24*var(--pt)); line-height:1; color:var(--paper); text-transform:uppercase; transition:color .3s; }
.j .j-cbox.logged b { color:var(--ash); }
.j .j-cblock { position:relative; flex:none; width:calc(50*var(--pt)); display:flex; align-items:center; justify-content:center; transition:background-color .2s; }
.j .j-cbox.go .j-cblock { background:var(--ember); }
.j .j-cbox.logged .j-cblock { background:var(--wash); }
.j .j-cblock svg { position:absolute; opacity:0; }
.j .j-cbox.go .j-cblock .go { opacity:1; }
/* Ticked as the app ticks a box (BoxTicked): the block pops and fills, the
   check draws in, a ring spreads off it. */
.j .j-cblock .ok { width:calc(20*var(--pt)); height:calc(20*var(--pt)); stroke-width:1.5; stroke-dasharray:15; stroke-dashoffset:15; }
.j .j-cbox.logged .j-cblock .ok { opacity:1; stroke-dashoffset:0; transition:stroke-dashoffset .32s .1s var(--ease-out-cubic); }
.j .j-cbox.logged .j-cblock { animation:j-pop .4s var(--ease-out-cubic); }
@keyframes j-pop { 0% { transform:scale(.6); background-color:var(--paper); } 60% { transform:scale(1.08); } 100% { transform:none; } }
.j .j-cblock::after { content:""; position:absolute; inset:0; border:2px solid var(--paper); opacity:0; pointer-events:none; }
.j .j-cbox.logged .j-cblock::after { animation:j-ring .64s .1s var(--ease-out) both; }
.j .j-cbox.offplan { opacity:0; transform:translateX(calc(30*var(--pt))); transition:opacity .3s var(--ease-out-cubic), transform .4s var(--ease-out-cubic); }
.j .j-cbox.offplan.in { opacity:1; transform:none; }

/* Targets */
.j .j-stack { flex:none; display:grid; gap:calc(12*var(--pt)); padding:calc(18*var(--pt)) calc(22*var(--pt)); border-bottom:1px solid var(--hairline); }
.j .j-pace { display:flex; align-items:center; gap:calc(10*var(--pt)); }
.j .j-pace .a-seg { flex:1; }
.j .j-result { display:flex; align-items:baseline; gap:calc(8*var(--pt)); min-height:calc(44*var(--pt)); }
.j .j-result > .a-micro { flex:1; align-self:center; }
.j .j-reveal { opacity:0; transform:translateY(calc(8*var(--pt))); transition:opacity .32s var(--ease-out-cubic), transform .32s var(--ease-out-cubic); }
.j .j-reveal.in { opacity:1; transform:none; }

/* Circle */
.j .j-circlehead { flex:none; display:grid; gap:calc(14*var(--pt)); padding:calc(22*var(--pt)); border-bottom:1px solid var(--hairline); }
.j .j-dates { display:grid; grid-template-columns:1fr 1fr; gap:calc(10*var(--pt)); }
.j .j-date { display:grid; gap:calc(6*var(--pt)); padding:calc(12*var(--pt)) calc(14*var(--pt)); border:1px solid var(--hairline-strong); }
.j .j-date b { font-size:calc(27*var(--pt)); line-height:1; text-transform:uppercase; }
.j .j-code { font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:calc(28*var(--pt)); letter-spacing:0.12em; }
.j .j-join { opacity:0; transform:translateY(calc(10*var(--pt))); transition:opacity .3s var(--ease-out-cubic), transform .3s var(--ease-out-cubic); }
.j .j-join.in { opacity:1; transform:none; }
.j .j-join .a-avatar { transform:scale(.6); transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.j .j-join.in .a-avatar { transform:none; }
.j .a-weekband { flex:none; display:block; text-align:center; }

/* Session */
.j .j-btnlabel { display:inline-flex; align-items:center; gap:calc(8*var(--pt)); transition:opacity .22s, transform .22s var(--ease-out-cubic); }
.j .j-done { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(22*var(--pt)); background:var(--void); opacity:0; transition:opacity .22s; pointer-events:none; }
.j .j-done.in { opacity:1; }
.j .j-big { display:flex; gap:calc(10*var(--pt)); opacity:0; transform:translateY(calc(12*var(--pt))); transition:opacity .32s var(--ease-out-cubic), transform .32s var(--ease-out-cubic); }
.j .j-done.in .j-big { opacity:1; transform:none; }
.j .j-big span { position:relative; width:calc(36*var(--pt)); height:calc(36*var(--pt)); border:1px solid currentColor; }
.j .j-big span::before { content:""; position:absolute; inset:-1px; background:currentColor; transform:scale(0); transition:transform .32s var(--ease-out-cubic); }
.j .j-big span.done::before { transform:none; }
.j .j-big span::after { content:""; position:absolute; inset:-1px; border:2px solid currentColor; opacity:0; }
.j .j-big span.ring::after { animation:j-ring .64s var(--ease-out) forwards; }
@keyframes j-ring { from { opacity:.6; transform:scale(1); } to { opacity:0; transform:scale(1.7); } }
.j .j-bigfig { display:flex; align-items:baseline; gap:calc(10*var(--pt)); }
.j .j-bigfig b { font-size:calc(112*var(--pt)); line-height:.9; }

/* Rolling digits (RollingFigure): each change rolls up and in. */
.j .j-roll { display:inline-block; }
.j .j-roll.go { animation:j-rollin .22s var(--ease-out-cubic); }
@keyframes j-rollin { from { transform:translateY(40%); opacity:0; } to { transform:none; opacity:1; } }

/* Food */
.j .j-switch { flex:none; display:flex; align-items:center; gap:calc(10*var(--pt)); padding:0 calc(22*var(--pt)) calc(14*var(--pt)); }
.j .j-switch .a-sq { width:calc(36*var(--pt)); height:calc(36*var(--pt)); }
.j .j-switch > div { flex:1; display:flex; align-items:center; justify-content:center; gap:calc(10*var(--pt)); }
.j .j-meters { flex:none; display:grid; grid-template-columns:1fr 1fr; gap:calc(18*var(--pt)); padding:calc(16*var(--pt)) calc(22*var(--pt)) calc(20*var(--pt)); border-bottom:1px solid var(--hairline); }
.j .j-meters > div { display:grid; gap:calc(8*var(--pt)); }
.j .j-meters .j-fig { display:flex; align-items:baseline; gap:calc(6*var(--pt)); }
.j .j-meters .a-unit { font-size:calc(18*var(--pt)); }
.j .j-meter { position:relative; height:calc(12*var(--pt)); background:var(--wash); }
.j .j-meter i { position:absolute; top:0; bottom:0; }
.j .j-meter .fill { left:0; background:var(--paper); transition:width .6s var(--ease-out-cubic); }
.j .j-meter .fill.p { background:var(--protein); }
.j .j-meter .target { background:var(--drain); }
.j .j-meter .tick { top:calc(-5*var(--pt)); bottom:calc(-5*var(--pt)); width:2px; background:var(--paper); }
.j .j-meals { flex:none; display:grid; padding:calc(14*var(--pt)) calc(22*var(--pt)) 0; }
.j .j-meal { display:flex; gap:calc(12*var(--pt)); padding:calc(12*var(--pt)) 0; border-bottom:1px solid var(--hairline); }
.j .j-meal > div { flex:1; display:grid; gap:calc(8*var(--pt)); }
.j .j-meal p { display:flex; justify-content:space-between; font-size:calc(17*var(--pt)); line-height:calc(22*var(--pt)); }
.j .j-meal p span { color:var(--ash); font-size:calc(15*var(--pt)); }
.j .j-macro { display:flex; gap:calc(2*var(--pt)); height:calc(6*var(--pt)); }
.j .j-macro i { display:block; }
.j .j-newmeal { overflow:hidden; max-height:0; opacity:0; transition:max-height .4s var(--ease-out-cubic), opacity .3s .1s; }
.j .j-newmeal.in { max-height:calc(80*var(--pt)); opacity:1; }
.j .j-flash { position:absolute; inset:0; z-index:5; background:var(--paper); opacity:0; pointer-events:none; }
.j .j-flash.go { animation:j-flash .45s var(--ease-out); }
@keyframes j-flash { 0% { opacity:0; } 15% { opacity:.85; } 100% { opacity:0; } }

/* Lock screen and notification */
.j .j-lock { flex:1; display:flex; flex-direction:column; align-items:center; padding:calc(40*var(--pt)) calc(14*var(--pt)) 0; background-image:radial-gradient(80% 50% at 50% 30%, var(--ember-glow-hero) 0%, transparent 100%); }
.j .j-lock .j-date-l { font-size:calc(20*var(--pt)); font-weight:500; }
.j .j-lock .j-clock { font-size:calc(104*var(--pt)); line-height:1; margin-bottom:calc(40*var(--pt)); }
.j .j-note { width:100%; display:flex; gap:calc(12*var(--pt)); padding:calc(14*var(--pt)); border-radius:calc(22*var(--pt)); background:rgba(245,239,227,0.14); text-align:left; opacity:0; transform:translateY(calc(-30*var(--pt))) scale(.96); transition:opacity .4s var(--ease-out-cubic), transform .5s var(--ease-out-cubic), background-color .12s; }
.j .j-note.in { opacity:1; transform:none; }
.j .j-note > svg { flex:none; width:calc(38*var(--pt)); height:calc(38*var(--pt)); border-radius:calc(9*var(--pt)); background:var(--void); padding:calc(5*var(--pt)); }
.j .j-note > div { flex:1; min-width:0; display:grid; gap:calc(2*var(--pt)); font-size:calc(15*var(--pt)); line-height:calc(20*var(--pt)); }
.j .j-note > div > p:first-child { display:flex; justify-content:space-between; font-weight:600; }
.j .j-note > div > p:first-child span { font-weight:400; color:var(--ash); font-size:calc(13*var(--pt)); }

/* Week summary and progress */
.j .j-sum { flex:1; display:flex; flex-direction:column; justify-content:center; gap:calc(26*var(--pt)); padding:0 calc(30*var(--pt)); }
.j .j-sum .j-big { opacity:1; transform:none; }
.j .j-sum .j-big.kept { animation:j-jump .42s var(--ease-out-cubic); }
@keyframes j-jump { 40% { transform:translateY(calc(-14*var(--pt))); } }
.j .j-parts { display:flex; gap:calc(6*var(--pt)); }
.j .j-parts > div { flex:1; display:grid; gap:calc(8*var(--pt)); justify-items:center; }
.j .j-parts i { display:block; width:100%; height:calc(36*var(--pt)); border:1px solid var(--hairline-strong); transition:background-color .3s; }
.j .j-parts i.on { background:var(--ash); }
.j .j-parts i.you { border-color:var(--paper); }
.j .j-parts i.you.on { background:var(--paper); }
.j .j-parts .a-avatar { width:calc(28*var(--pt)); height:calc(28*var(--pt)); font-size:calc(14*var(--pt)); }
.j .j-period24 span { width:calc(24*var(--pt)); height:calc(24*var(--pt)); }
.j .j-prog { flex:none; display:grid; gap:calc(10*var(--pt)); padding:calc(22*var(--pt)); border-bottom:1px solid var(--hairline); }
.j .j-prog .j-bigfig .a-unit { max-width:calc(160*var(--pt)); line-height:1.05; }
.j .j-strip { flex:none; display:grid; gap:calc(8*var(--pt)); padding:calc(22*var(--pt)); }
.j .j-stacks { display:flex; justify-content:space-between; align-items:flex-end; height:calc(78*var(--pt)); }
.j .j-stacks > div { display:flex; flex-direction:column-reverse; gap:calc(4*var(--pt)); }
.j .j-stacks span { display:block; width:calc(15*var(--pt)); height:calc(15*var(--pt)); background:currentColor; opacity:0; transform:translateY(calc(10*var(--pt))); transition:opacity .25s var(--ease-out-cubic), transform .25s var(--ease-out-cubic); }
.j .j-stacks > div.in span { opacity:1; transform:none; }
.j .j-stacks > div.in span:nth-child(2) { transition-delay:.04s; }
.j .j-stacks > div.in span:nth-child(3) { transition-delay:.08s; }
.j .j-stacks > div.in span:nth-child(4) { transition-delay:.12s; }
.j .j-axis { display:flex; justify-content:space-between; }
.j .j-pop { opacity:0; transform:scale(.7); transition:opacity .2s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.j .j-pop.in { opacity:1; transform:none; }

/* The new turn in a thread rises in (Motion.rise). */
.j .j-rise { animation:j-rise .26s var(--ease-out-cubic) both; }
@keyframes j-rise { from { opacity:0; transform:translateY(calc(10*var(--pt))); } }

/* A touch: where the finger lands, and the thing under it pressed. */
.j .j-tap { position:absolute; z-index:7; width:calc(46*var(--pt)); height:calc(46*var(--pt)); margin:calc(-23*var(--pt)) 0 0 calc(-23*var(--pt)); border-radius:50%; background:rgba(245,239,227,0.28); border:2px solid rgba(245,239,227,0.8); opacity:0; pointer-events:none; }
.j .j-tap.go { animation:j-tap .5s var(--ease-out) forwards; }
@keyframes j-tap { 0% { opacity:0; transform:scale(.5); } 25% { opacity:1; transform:scale(.8); } 100% { opacity:0; transform:scale(1.25); } }
.j .j-held { background-color:var(--press) !important; }
.j .a-btn.j-held, .j .j-block.j-held, .j .a-send.j-held { background-color:var(--ember-deep) !important; }

/* ---------- The stage ---------- */
/* The page's sticky header stands over the section's top: room for it. */
.j { position:relative; min-height:100svh; padding-top:56px; display:grid; grid-template-rows:1fr auto; overflow:hidden; background-color:var(--void); background-image:radial-gradient(60% 70% at 72% 45%, var(--ember-glow-hero) 0%, transparent 70%); }
.j .j-main { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:clamp(32px,6vw,110px); width:100%; max-width:1240px; margin:0 auto; padding:clamp(28px,5vh,64px) clamp(16px,5vw,56px) clamp(16px,3vh,32px); }
.j .j-copy { position:relative; z-index:2; display:grid; gap:clamp(14px,2.2vh,22px); align-content:center; }
.j .j-act { margin:0 0 clamp(12px,2vh,20px); font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ember); }
.j .j-heads { position:relative; min-height:calc(2 * 0.9 * clamp(52px,7.4vw,112px) + 36px); }
.j .j-hb { position:absolute; left:0; right:0; bottom:0; }
.j .j-hb .j-act { transition:opacity .3s; }
.j .j-hb.out .j-act { opacity:0; }
.j .j-h { font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:clamp(52px,7.4vw,112px); line-height:.9; letter-spacing:-0.02em; text-transform:uppercase; text-wrap:balance; }
.j .j-h .w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.04em; margin-bottom:-.04em; }
.j .j-h .w > span { display:inline-block; transform:translateY(105%); transition:transform .56s var(--ease-out-cubic); }
.j .j-hb.in .w > span, .j .j-wipe .j-h.in .w > span { transform:none; }
.j .j-hb.out .w > span { transform:translateY(-105%); transition-duration:.28s; transition-timing-function:var(--ease-out); }
.j .j-line { min-height:3.2em; max-width:34ch; font-size:clamp(16px,1.5vw,20px); line-height:1.55; color:var(--ash); text-wrap:pretty; opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease-out-cubic), transform .4s var(--ease-out-cubic); }
.j .j-line.in { opacity:1; transform:none; }
.j .j-stats { display:none; gap:14px; max-width:420px; }
.j .j-stats.on { display:grid; }
.j .j-stat { display:flex; align-items:baseline; gap:12px; padding-top:12px; border-top:1px solid var(--rule-strong); opacity:0; transform:translateY(10px); transition:opacity .4s var(--ease-out-cubic), transform .4s var(--ease-out-cubic); }
.j .j-stat.in { opacity:1; transform:none; }
.j .j-stat > span:first-child { flex:1; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ash); }
.j .j-stat b { font-size:clamp(34px,3.6vw,48px); line-height:1; font-variant-numeric:tabular-nums; }
.j .j-stat i { font-style:normal; font-size:18px; text-transform:uppercase; color:var(--ash); min-width:3.6em; }
.j .j-cta { display:none; justify-self:start; padding:14px 26px; background:var(--ember); color:var(--paper); font-size:13px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease-out-cubic), transform .4s var(--ease-out-cubic); pointer-events:none; }
.j .j-cta.on { display:inline-block; }
.j .j-cta.in { opacity:1; transform:none; pointer-events:auto; }
.j .j-cta:hover { color:var(--paper); background:var(--ember-deep); }

.j .j-phonewrap { position:relative; z-index:1; height:min(74svh, 740px); aspect-ratio:408/862; transition:transform .7s var(--ease-out-cubic); }
.j .j-week { display:none; align-items:flex-end; gap:14px; font-family:'Big Shoulders Display',sans-serif; font-weight:900; line-height:.8; text-transform:uppercase; opacity:0; transition:opacity .5s var(--ease-out-cubic); }
.j .j-week.on { display:flex; }
.j .j-week.in { opacity:1; }
.j .j-week > span { font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:12px; letter-spacing:.2em; color:var(--ash); padding-bottom:.4em; }
.j .j-week b { font-weight:900; font-size:clamp(72px,9vw,140px); letter-spacing:-0.02em; color:transparent; -webkit-text-stroke:1.5px var(--ember); }

.j .j-wipe { position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center; padding:0 clamp(16px,5vw,56px); background:var(--ember); clip-path:inset(0 100% 0 0); pointer-events:none; }
.j .j-wipe.in { clip-path:inset(0 0 0 0); transition:clip-path .5s cubic-bezier(.7,0,.25,1); }
.j .j-wipe.out { clip-path:inset(0 0 0 100%); transition:clip-path .5s cubic-bezier(.7,0,.25,1); }
.j .j-wipe .j-h { color:var(--void); text-align:center; font-size:clamp(56px,11vw,180px); }

/* Under the wipe, which covers the whole stage; clicks still reach it
   through the wipe (pointer-events:none). */
.j .j-rail { position:relative; z-index:3; display:flex; align-items:flex-start; gap:clamp(12px,2vw,24px); width:100%; max-width:1240px; margin:0 auto; padding:0 clamp(16px,5vw,56px) clamp(18px,3.5vh,36px); }
.j .j-play { flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:none; border:1px solid var(--rule-strong); color:var(--paper); cursor:pointer; }
.j .j-play:hover { border-color:var(--paper); }
.j .j-play svg { width:18px; height:18px; fill:var(--paper); }
.j .j-groups { flex:1; display:flex; gap:clamp(10px,1.6vw,20px); }
.j .j-group { display:grid; gap:8px; align-content:start; }
.j .j-group > p { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ash); transition:color .3s; }
.j .j-group.on > p { color:var(--paper); }
.j .j-segs { display:flex; gap:4px; }
.j .j-seg { flex:1; min-width:0; display:grid; gap:8px; padding:0; padding-top:6px; background:none; border:0; color:var(--ash); text-align:left; cursor:pointer; font:inherit; }
.j .j-seg .bar { position:relative; display:block; height:3px; background:var(--rule-strong); overflow:hidden; }
.j .j-seg .bar i { position:absolute; inset:0; background:var(--ember); transform-origin:left; transform:scaleX(0); }
.j .j-seg .lbl { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .3s; }
.j .j-seg.on .lbl { color:var(--paper); }
.j .j-seg:hover .lbl { color:var(--paper); }
.j .j-play:focus-visible, .j .j-seg:focus-visible, .j .j-cta:focus-visible { outline:2px solid var(--paper); outline-offset:3px; }
.j .j-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (max-width:860px) {
  .j .j-main { grid-template-columns:minmax(0,1fr); justify-items:center; align-content:start; gap:20px; padding-top:28px; }
  .j .j-copy { width:100%; gap:10px; }
  .j .j-heads { min-height:calc(2 * 0.9 * clamp(40px,11vw,64px) + 30px); }
  .j .j-h { font-size:clamp(40px,11vw,64px); }
  .j .j-line { min-height:3.1em; font-size:15px; }
  .j .j-phonewrap { height:min(56svh, 540px); }
  .j .j-week.on, .j .j-stats.on { display:none; }
  .j .j-group { min-width:0; }
  .j .j-group > p { font-size:10px; letter-spacing:0.12em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .j .j-seg .lbl { display:none; }
}
/* Held still while the film isn't playing: no caret blinking off screen. */
.j:not(.playing) * { animation-play-state:paused; }
/* Stepping through by hand with reduced motion: every state lands at once. */
.j.j-still *, .j.j-still *::before, .j.j-still *::after { transition:none !important; animation:none !important; }


/* A still in the features section (STILLS in journey.js): the phone alone,
   no stage around it. The page sets its width. */
.j.j-shot { min-height:0; padding:0; display:block; overflow:visible; background:none; aspect-ratio:408/862; }