/* Pelvic floor plan. Built only from brands/strong-mornings/design.md: warm white ground, sand panels, ink, ONE
   accent (teal), Lexend, radii 16/24/28, apricot only for cheers. One job per phone screen; body ≤ 2 short lines.
   Tokens come from brand.css; the fallbacks keep a page right without it. */
:root {
  --pf-ground: var(--linen, #fbf8f3); --pf-sand: var(--linen-2, #f2ece3); --pf-card: var(--surface, #fff);
  --pf-ink: var(--ink, #1c1b19); --pf-ink2: var(--ink-2, #57524b); --pf-deep: var(--deep, #12343a);
  --pf-teal: var(--teal, #1d5f6b); --pf-mist: var(--mist, #e1efed);
  --pf-warm: var(--apricot, #f4b183); --pf-warm-soft: var(--apricot-soft, #fdebdc);
  --pf-hair: var(--hair, rgb(28 27 25 / .09)); --pf-shadow: var(--shadow-2, 0 1px 2px rgb(28 27 25 / .04), 0 8px 24px rgb(28 27 25 / .06));
  --kit-accent: var(--pf-teal);
}
body { background: var(--pf-ground); color: var(--pf-ink); }
.hide { display: none !important; }
.note { font-size: 16px; color: var(--pf-ink2); }
.err { color: var(--bad, #a63a2b); font-size: 16px; min-height: 1.4em; margin: 8px 0 0; }

/* ---------- The landing flow: one card per screen ---------- */
.flow { max-width: 1120px; margin: 0 auto; padding: 8px var(--gut, 20px) 32px; }
.fbar { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.fbar[hidden] { display: none; }
.fbar .back { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--pf-deep); display: grid; place-items: center; cursor: pointer; flex: none; }
.fbar .back svg { width: 24px; height: 24px; }
.fbar .track { flex: 1; height: 8px; border-radius: 8px; background: var(--pf-sand); overflow: hidden; }
.fbar .track i { display: block; height: 100%; width: 0; background: var(--pf-teal); border-radius: 8px; transition: width 250ms var(--ease-out, ease); }
.fbar .of { font-size: 16px; color: var(--pf-ink2); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.step { display: none; }
.step.on { display: grid; gap: 20px; animation: pf-in 220ms var(--ease-out, ease) both; }
@keyframes pf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step.on { animation: none; } }
.vis { margin: 0; }
.vis.photo img { width: calc(100% + 2 * var(--gut, 20px)); max-width: none; margin: 0 calc(-1 * var(--gut, 20px)); height: clamp(250px, 42svh, 420px); object-fit: cover; }
.vis.dia svg { width: 100%; height: auto; max-height: 40svh; display: block; }
.vis .dl { font: 600 20px var(--font, system-ui); fill: var(--pf-deep); }
.vis .dt { font: 500 17px var(--font, system-ui); fill: var(--pf-ink); }
.vis .dw { font: 600 18px var(--font, system-ui); fill: #fff; }
.vis.big { background: var(--pf-mist); border-radius: var(--r-card, 24px); padding: 36px 20px; text-align: center; }
.vis .bignum { font-size: 72px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--pf-teal); }
.vis.big p { margin: 10px auto 0; font-size: 18px; color: var(--pf-ink); }
.txt h1 { font-size: clamp(34px, 2.4vw + 26px, 54px); margin: 0 0 12px; }
.txt h2 { font-size: clamp(28px, 1vw + 24px, 40px); margin: 0 0 10px; }
.txt .line { font-size: 19px; line-height: 1.45; margin: 0 0 8px; }
.txt .src { font-size: 16px; color: var(--pf-ink2); margin: 0 0 20px; }
.txt .btn { min-height: 58px; margin-top: 12px; }
.q .opts { display: grid; gap: 12px; margin-top: 18px; }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 0 20px; border: 0; border-radius: 20px; background: var(--pf-card); color: var(--pf-ink); font: 500 19px/1.25 var(--font, system-ui); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--pf-hair), var(--shadow-1, none); transition: transform 120ms var(--ease-out, ease); }
.opt:active { transform: scale(.98); }
.opt .tick { width: 26px; height: 26px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px var(--ring, rgb(28 27 25 / .2)); display: grid; place-items: center; }
.opt[aria-pressed="true"] { background: var(--pf-mist); box-shadow: inset 0 0 0 2px var(--pf-teal); }
.opt[aria-pressed="true"] .tick { background: var(--pf-teal); box-shadow: none; }
.opt[aria-pressed="true"] .tick::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.plancard { background: var(--pf-sand); border-radius: var(--r-card, 24px); padding: 20px 0 0; display: grid; justify-items: center; overflow: hidden; height: 230px; }
.plancard img { width: 190px; height: auto; border-radius: 26px 26px 0 0; box-shadow: var(--pf-shadow); }
.pay .for { font-size: 16px; font-weight: 600; color: var(--pf-teal); margin: 0 0 6px; }
.pay h2 { font-size: clamp(28px, 1vw + 24px, 36px); }
.ticks { list-style: none; margin: 0 0 14px; padding: 0; }
.ticks li { position: relative; padding: 6px 0 6px 34px; font-size: 18px; line-height: 1.35; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--pf-teal); }
.ticks li::after { content: ""; position: absolute; left: 8px; top: 16px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.price { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 12px; }
.price b { font-size: 52px; font-weight: 600; letter-spacing: -0.03em; color: var(--pf-deep); line-height: 1; }
.price span { font-size: 17px; color: var(--pf-ink2); }
.addon { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 56px; padding: 10px 16px; margin: 0 0 4px; border: 0; border-radius: 16px; background: var(--pf-card); box-shadow: inset 0 0 0 1.5px var(--pf-hair); color: var(--pf-ink); text-align: left; cursor: pointer; font: 400 17px/1.3 var(--font, system-ui); }
.addon b { font-weight: 600; white-space: nowrap; }
.addon .box { width: 26px; height: 26px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 2px var(--pf-teal); flex: none; display: grid; place-items: center; }
.addon[aria-pressed="true"] { background: var(--pf-mist); box-shadow: inset 0 0 0 2px var(--pf-teal); }
.addon[aria-pressed="true"] .box { background: var(--pf-teal); box-shadow: none; }
.addon[aria-pressed="true"] .box::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.pay .fine { font-size: 16px; color: var(--pf-ink2); margin: 4px 0 6px; }
.pay .links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; }
.pay .links a, .linkbtn { display: inline-flex; align-items: center; min-height: 44px; font: 500 16px var(--font, system-ui); color: var(--pf-teal); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pay .care { font-size: 16px; line-height: 1.45; background: var(--pf-sand); border-radius: 16px; padding: 14px 16px; margin: 6px 0 0; }
.foot-src { text-align: center; font-size: 16px; margin: 28px 0 0; }
body.in-flow .ph, body.in-flow .top, body.in-flow:not(.at-offer) .foot, body.in-flow:not(.at-offer) .foot-src { display: none; }
@media (min-width: 1024px) {
  .flow { padding-top: 32px; }
  .step.on { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; min-height: min(640px, calc(100svh - 200px)); }
  .vis.photo img { width: 100%; margin: 0; border-radius: var(--r-card, 24px); height: 560px; }
  .vis.dia svg { max-height: 460px; }
  .step .q { grid-column: 1 / -1; max-width: 640px; margin: 0 auto; width: 100%; }
  .plancard { height: 520px; padding-top: 40px; }
  .plancard img { width: 300px; }
  .txt { max-width: 500px; }
}

/* ---------- The app shell (free day 1, plan, player) ---------- */
body.app { background: var(--pf-ground); }
.shell { max-width: 1120px; margin: 0 auto; padding: 0 var(--gut, 20px) 120px; }
.appbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 60px; background: color-mix(in srgb, var(--pf-ground) 94%, transparent); }
.appbar .x, .appbar .icon { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--pf-card); box-shadow: var(--shadow-1, none); display: grid; place-items: center; cursor: pointer; color: var(--pf-deep); text-decoration: none; flex: none; }
.appbar .x svg, .appbar .icon svg { width: 22px; height: 22px; }
.appbar .ttl { font-weight: 600; font-size: 17px; color: var(--pf-deep); margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar .logo { margin-right: auto; }
.appbar .logo img { height: 26px; width: auto; }
.card { background: var(--pf-card); border-radius: var(--r-card, 24px); box-shadow: var(--pf-shadow); padding: 22px; }
.stack { display: grid; gap: 14px; align-content: start; }
.pin { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 12px var(--gut, 20px) calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--pf-ground) 75%, transparent); }
.pin .in { max-width: 560px; margin: 0 auto; display: flex; gap: 10px; }
.pin .btn { flex: 1; min-height: 58px; }
@media (min-width: 1024px) { .pin .in { max-width: 1040px; } }

/* Home: today (one button), the ring, this week's dots. Everything else behind a tap. */
.home { display: grid; gap: 14px; padding-top: 8px; }
@media (min-width: 1024px) { .home { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; gap: 24px; } .home .side { position: sticky; top: 76px; } }
.today { display: grid; gap: 4px; }
.today .top2 { display: flex; align-items: center; gap: 18px; }
.today h1 { font-size: clamp(30px, 2vw + 24px, 48px); margin: 0; white-space: nowrap; }
.today .meta { font-size: 18px; color: var(--pf-ink2); margin: 2px 0 14px; }
.today .btn { width: 100%; min-height: 62px; font-size: 19px; }
.goal { position: relative; width: 76px; height: 76px; flex: none; margin-left: auto; }
.goal svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.goal circle { fill: none; stroke-width: 9; }
.goal .bg { stroke: var(--pf-sand); } .goal .fg { stroke: var(--pf-teal); stroke-linecap: round; }
.goal span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-weight: 600; font-size: 18px; line-height: 1; color: var(--pf-deep); }
.goal small { display: block; font-size: 16px; font-weight: 400; color: var(--pf-ink2); margin-top: 2px; }
.strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 16px 0 0; }
.strip .d { display: grid; justify-items: center; }
.strip .dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 16px; color: var(--pf-deep); background: var(--pf-sand); }
.strip .on .dot { background: #fff; box-shadow: inset 0 0 0 2.5px var(--pf-teal); }
.strip .ok .dot { background: var(--pf-teal); color: #fff; }
.strip .ok .dot::after { content: ""; width: 13px; height: 7px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: translateY(-2px) rotate(-45deg); }
.strip .ok .dot span { display: none; }
.streak { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--pf-warm-soft); color: var(--pf-deep); font-weight: 600; font-size: 16px; justify-self: start; margin: 0; }
.streak i { width: 10px; height: 10px; border-radius: 50%; background: var(--pf-warm); }
.cheerline { margin: 0 0 8px; }
/* The folded extras: one row each, opened by a tap */
details.row { background: var(--pf-card); border-radius: 20px; box-shadow: var(--pf-shadow); }
details.row > summary { list-style: none; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 18px; cursor: pointer; font-weight: 600; font-size: 18px; color: var(--pf-deep); }
details.row > summary::-webkit-details-marker { display: none; }
details.row > summary .sub { margin-left: auto; font-weight: 400; font-size: 16px; color: var(--pf-ink2); white-space: nowrap; }
details.row > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--pf-ink2); border-bottom: 2px solid var(--pf-ink2); transform: rotate(45deg); margin: -4px 4px 0 6px; flex: none; transition: transform 150ms; }
details.row[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
details.row > .body { padding: 0 18px 18px; }
details.row .body p { font-size: 17px; color: var(--pf-ink2); margin: 0 0 12px; }
.diary .opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 14px; }
.diary button { min-height: 52px; border: 0; border-radius: 14px; background: var(--pf-sand); font: 600 19px/1 var(--font, system-ui); color: var(--pf-deep); cursor: pointer; }
.diary button[aria-pressed="true"] { background: var(--pf-teal); color: #fff; }
.bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 92px; }
.bars .b { display: grid; justify-items: center; gap: 6px; align-self: end; }
.bars .b i { display: block; width: 100%; max-width: 28px; border-radius: 8px 8px 4px 4px; background: var(--pf-sand); }
.bars .b.has i, .bars .b.zero i { background: var(--pf-teal); }
.bars .b.zero i { opacity: .35; }
.bars .b span { font-size: 16px; color: var(--pf-ink2); }
.weeks { display: grid; gap: 8px; }
.wk { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 12px; border-radius: 16px; background: var(--pf-ground); }
.wk b { font-size: 17px; font-weight: 500; }
.wk .n { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #fff; font-weight: 600; color: var(--pf-deep); flex: none; }
.wk .c { margin-left: auto; font-size: 16px; color: var(--pf-ink2); white-space: nowrap; }
.wk.lock { opacity: .6; }
.wk.lock .n svg { width: 18px; height: 18px; }
.card.up { background: var(--pf-deep); color: #fff; }
.card.up h2 { color: #fff; font-size: 24px; margin: 0 0 6px; }
.card.up p { color: #fff; opacity: .92; font-size: 17px; margin: 0; }
.card.up .btn { margin-top: 14px; width: 100%; background: #fff; color: var(--pf-deep); }
@media (hover: hover) { .card.up .btn:hover { background: var(--pf-mist); color: var(--pf-deep); } }
.card.up .note { color: #fff; opacity: .85; margin-top: 10px; }
.guide { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 8px 6px 14px; border-radius: 16px; background: var(--pf-ground); margin-bottom: 8px; }
.guide b { font-size: 17px; font-weight: 500; margin-right: auto; }
.guide button { min-width: 88px; }
.links-row { font-size: 16px; color: var(--pf-ink2); padding: 4px 6px; margin: 0; }

/* The session player: the ring, one word, one cue line. The how-to folds. */
.player { max-width: 560px; margin: 0 auto; display: grid; gap: 12px; padding-top: 4px; align-content: start; }
@media (min-width: 1024px) { .player { max-width: 1040px; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; min-height: calc(100svh - 170px); } }
.dial { display: grid; justify-items: center; gap: 10px; }
.sbar { width: 100%; height: 6px; border-radius: 6px; background: var(--pf-sand); overflow: hidden; }
.sbar i { display: block; height: 100%; width: 0; background: var(--pf-teal); transition: width 300ms linear; }
.ring { position: relative; width: min(280px, 70vw); aspect-ratio: 1; margin-top: 6px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; }
.ring .bg { stroke: var(--pf-sand); }
.ring .fg { stroke: var(--pf-teal); stroke-linecap: round; transition: stroke-dashoffset 250ms linear, stroke 300ms; }
.ring[data-ph="rest"] .fg, .ring[data-ph="gap"] .fg, .ring[data-ph="intro"] .fg, .ring[data-ph="out"] .fg, .ring[data-ph="release"] .fg, .ring[data-ph="letgo"] .fg { stroke: color-mix(in srgb, var(--pf-teal) 38%, white); }
.ring .mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 0 24px; }
.ring .word { font-size: clamp(32px, 6vw, 44px); font-weight: 600; letter-spacing: -0.03em; color: var(--pf-deep); line-height: 1.05; }
.ring .num { font-size: 28px; font-weight: 500; color: var(--pf-ink2); min-height: 36px; font-variant-numeric: tabular-nums; }
.reps { font-size: 17px; font-weight: 500; color: var(--pf-ink2); min-height: 26px; margin: 0; text-align: center; }
.cue { text-align: center; }
.cue h2 { font-size: 26px; margin: 0 0 4px; }
.cue .tip { font-size: 18px; line-height: 1.4; margin: 0 auto; max-width: 30ch; min-height: 2.8em; color: var(--pf-ink); }
.cue details { margin-top: 6px; }
.cue .how { text-align: left; }
.cue summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 500; color: var(--pf-teal); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.cue summary::-webkit-details-marker { display: none; }
.cue .how { background: var(--pf-card); border-radius: 20px; padding: 16px 18px; font-size: 16px; line-height: 1.45; }
.cue .how p { margin: 0 0 8px; } .cue .how p:last-child { margin: 0; }
.start h1 { font-size: clamp(34px, 2vw + 28px, 52px); margin: 0 0 6px; }
.start .tag { font-weight: 600; color: var(--pf-teal); margin: 0 0 6px; font-size: 16px; }
.start .meta { font-size: 19px; margin: 0 0 6px; }
.start details { margin-top: 8px; }
.start summary { display: inline-flex; min-height: 44px; align-items: center; font-weight: 500; color: var(--pf-teal); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.start summary::-webkit-details-marker { display: none; }
.outline { list-style: none; margin: 4px 0 0; padding: 0; }
.outline li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--pf-hair); font-size: 17px; }
.outline li:last-child { border-bottom: 0; }
.outline li span { color: var(--pf-ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.startpic { display: none; }
@media (min-width: 1024px) { .startpic { display: block; } .startpic img { width: 100%; height: 440px; object-fit: cover; border-radius: var(--r-card, 24px); } }
.done-scr { text-align: center; padding: 28px 0; grid-column: 1 / -1; }
.done-scr .chk { width: 96px; height: 96px; border-radius: 50%; background: var(--pf-teal); margin: 0 auto 18px; display: grid; place-items: center; }
.done-scr .chk::after { content: ""; width: 34px; height: 18px; border-left: 6px solid #fff; border-bottom: 6px solid #fff; transform: translateY(-4px) rotate(-45deg); }
.done-scr h1 { font-size: clamp(34px, 3vw + 24px, 50px); }
.done-scr p { font-size: 19px; margin: 0 auto 10px; }
.done-scr .streak { margin: 0 auto 12px; }
.after { max-width: 560px; margin: 16px auto 0; }
.after .card h2 { font-size: 24px; margin: 0 0 6px; }
.after .card p { font-size: 17px; color: var(--pf-ink2); margin: 0; }
.sqcheck { max-width: 560px; margin: 0 auto; width: 100%; text-align: left; grid-column: 1 / -1; }
.sqcheck h2 { font-size: 24px; margin: 0 0 10px; }
.cq { padding: 10px 0; border-bottom: 1px solid var(--pf-hair); }
.cq p { margin: 0 0 8px; font-size: 17px; }
.yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.yn button { min-height: 48px; border: 0; border-radius: 14px; background: var(--pf-sand); font: 600 17px var(--font, system-ui); color: var(--pf-deep); cursor: pointer; }
.yn button[aria-pressed="true"] { background: var(--pf-teal); color: #fff; }
.cres { margin: 12px 0 0; font-size: 17px; line-height: 1.45; min-height: 5.8em; }
/* Landing: the photo, then the ad's words on one deep-teal block (the strength plan's landing is photo-then-plain-text). */
.step.hero.on { margin: -8px calc(-1 * var(--gut, 20px)) 0; gap: 0; }
.step.hero .vis.photo img { width: 100%; margin: 0; height: clamp(260px, 46svh, 440px); }
.step.hero .txt { background: var(--pf-deep); color: #fff; padding: 26px var(--gut, 20px) 30px; max-width: none; }
.step.hero h1, .step.hero .line { color: #fff; }
.step.hero .btn { background: #fff; color: var(--pf-deep); }
@media (hover: hover) { .step.hero .btn:hover { background: var(--pf-mist); color: var(--pf-deep); } }
@media (min-width: 1024px) {
  .step.hero.on { margin: 0; grid-template-columns: 1.15fr 1fr; gap: 0; border-radius: var(--r-card, 24px); overflow: hidden; min-height: 600px; align-items: stretch; }
  .step.hero .vis.photo img { height: 100%; min-height: 600px; border-radius: 0; }
  .step.hero .txt { display: grid; align-content: center; padding: 56px; }
}
.addon.quiet { background: transparent; box-shadow: none; padding: 6px 0; min-height: 48px; font-size: 16px; color: var(--pf-ink2); }
.addon.quiet[aria-pressed="true"] { background: transparent; box-shadow: none; color: var(--pf-ink); }
.addon.quiet .box { width: 22px; height: 22px; border-radius: 6px; }
.card.upq { box-shadow: none; background: var(--pf-sand); }
.card.upq h2 { font-size: 21px; margin: 0 0 4px; }
.card.upq p { font-size: 17px; color: var(--pf-ink2); margin: 0 0 12px; }
.thanks .today .btn { margin-top: 6px; }
.pay .anchor { font-size: 16px; color: var(--pf-ink2); margin: -4px 0 14px; }
.q form label { font-size: 17px; }
.dlab { display: grid; gap: 8px; margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--pf-deep); text-align: center; }
.dlab.two { grid-template-columns: 1fr 1fr; }
.dlab.three { grid-template-columns: 1fr 1fr 1fr; font-weight: 500; }
.dlab.four { grid-template-columns: repeat(4, 1fr); }
/* Doc pages (method, credits): text with a photo beside it on desktop */
.docgrid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .docgrid { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } .docgrid .aside { position: sticky; top: 88px; } }
.docgrid .aside img { width: 100%; height: 420px; object-fit: cover; border-radius: var(--r-card, 24px); }
body.demo .cue details { display: none; }
.plancard { height: 250px; }
@media (max-width: 1023px) { .step:not(.hero):not([data-step="5"]):not([data-step="6"]):not(#offer) .next { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-2); } }
@media (max-width: 1023px) {
  .step.hero.on { min-height: calc(100svh - 64px); grid-template-rows: 1fr auto; }
  .step.hero .vis.photo img { height: 100%; min-height: 240px; max-height: none; }
  .step.hero .txt { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}
body.landing .foot { margin-top: 0; }
body.landing:not(.in-flow) .flow { padding-bottom: 0; }
.pay .diff { font-size: 17px; line-height: 1.4; margin: -2px 0 10px; }
.hear { margin: 0 0 12px; }
.hearbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; background: var(--pf-mist); color: var(--pf-deep); font: 600 16px var(--font, system-ui); cursor: pointer; }
.hearbtn .pl { width: 32px; height: 32px; border-radius: 50%; background: var(--pf-teal); position: relative; flex: none; }
.hearbtn .pl::after { content: ""; position: absolute; left: 12px; top: 9px; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
/* Plan screen v2 (pre-registered 2026-11-02, ?v=b until its gate): who made it, the timer-app answer, the refund by the button. */
.pay .care + .care { margin-top: 10px; }
.pay .care.who, .pay .care.vs { background: var(--pf-sand); }
.pay .care b { font-weight: 600; }
.pay .refund { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: var(--pf-teal); margin: 0 0 10px; }
.pay .refund { position: relative; padding-left: 28px; }
.pay .refund::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--pf-teal); }
.pay .refund::after { content: ""; position: absolute; left: 5px; top: 50%; margin-top: -4px; width: 7px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.pay [data-v][hidden] { display: none !important; }

/* Weeks 7–12 sold inside the plan (2026-11-02): a calm card under the locked weeks */
.more12{margin-top:16px;padding-top:14px;border-top:1px solid rgba(28,27,25,.08)}
.more12 p{margin:0 0 12px}