/* Home page. Loaded by the home page only (head_extra).

   How this page is put together (the rules the layout follows):
   1. Nothing floats. Every piece of the app shown here sits inside a card
      or a tinted panel. No tilted cards, no notes pinned beside things, no
      tape. The only rotated thing is the stamp, because stamps are.
   2. Width is used on purpose. Phone: one column. From 560px the hero panel
      is two columns. From 901px the features are cards in a grid and Free,
      Switching and Questions lay out across. From 1100px the hero is copy
      beside its panel.
   3. Motion plays once. Scroll decides when something starts; time carries
      it to the end (the [data-prog] driver in assets/motion.js: --p runs 0
      to 1 once, is-on is a threshold). Nothing rewinds, and nothing waits
      half-finished because the reader stopped scrolling. The default (no
      JS, reduced motion, Motion off, Plain page) is the finished state. */

/* ---- demo driver defaults ---- */
html.mo:not(.plain):not([data-motion=off]) [data-prog]{--p:0}
html.plain [data-prog],html[data-motion=off] [data-prog]{--p:1!important}
@keyframes hs-tap{0%{opacity:1;scale:1}100%{opacity:0;scale:1.9 2.6}}
@keyframes hs-dip{35%{scale:.86}100%{scale:1}}
@keyframes hs-press{40%{scale:.97}}
@keyframes hs-stamp{0%{opacity:0;scale:1.6;rotate:-14deg}60%{opacity:1;scale:.94}100%{opacity:1;scale:1}}

/* ---- Hero: the app screens sit in one panel ---- */
.hm-hero{align-items:start}
@media (max-width:900px){.hm-hero .hero-copy h1,.hm-hero .hero-copy>p{margin-inline:0}.hm-hero .hero-actions{justify-content:flex-start}.hm-hero .hm-stack{max-width:none}}
@media (min-width:641px) and (max-width:900px){.hm-hero .hero-actions{display:flex;align-items:center;gap:14px 28px}.hm-hero .hero-actions .button{width:auto}}
.home-page .fig-card{transform:none}
.hm-stack{position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:stretch;align-content:start;gap:12px;width:100%;max-width:680px;min-height:0;margin-inline:auto;padding:14px 14px 16px;border:1px solid var(--line);border-radius:24px;background:var(--paper-deep);box-shadow:0 24px 60px rgba(60,48,20,.10)}
.hm-stack::before{content:none}
.hm-stack .hero-cap{margin:0 2px;justify-content:flex-start}
.hs-item{position:relative;min-width:0;border-radius:16px;box-shadow:0 1px 2px rgba(60,48,20,.05)}
.hs-squat .ka-ex-head strong,.hs-squat .ka-warmup{white-space:nowrap}
@media (max-width:559px){.hs-maps{max-width:232px}}
@media (min-width:560px){
  .hm-stack{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-rows:auto auto 1fr;gap:14px 16px;padding:16px 18px 20px}
  .hm-stack .hero-cap{grid-column:1 / -1;grid-row:1}
  .hm-stack .hs-stage{grid-column:1;grid-row:2}
  .hm-stack .hs-squat{grid-column:1;grid-row:3;display:flex;flex-direction:column;justify-content:center}
  .hm-stack .hs-map{grid-column:2;grid-row:2 / span 2}
}

/* muscles fill: a flat base map plus two painted layers that fade in */
.hs-maps{position:relative;max-width:300px;margin:0 auto}
.hs-maps .cg-map{max-width:none;width:100%;margin:0}
.hs-layer{position:absolute;inset:0;pointer-events:none}
.hs-layer path:not([data-muscle]){visibility:hidden}
.hs-layer .heat-0{fill-opacity:0!important;stroke-opacity:0}
.hs-a{opacity:clamp(0,calc((var(--p,1) - .05) / .45),1)}
.hs-b{opacity:clamp(0,calc((var(--p,1) - .5) / .45),1)}
.hs-map .ka-blind{margin-top:10px}

/* squat card: the suggestion gets tapped and turns to Applied */
.hs-sugg{position:relative;display:block;cursor:default}
.hs-chip{display:inline-grid;position:relative}
.hs-chip i{grid-area:1/1;font-style:normal;text-align:center;white-space:nowrap;transition:opacity .25s ease}
.hs-sugg .ka-sugg-basis{display:block}
/* finished state is the default; the gate below rewinds it only while motion is on and the card has not been tapped yet */
.hs-chip .c-a{opacity:0}
.hs-chip .c-b{opacity:1}
.hs-sugg{border-color:var(--a-accent);background:var(--a-soft)}
.hs-squat.is-on .hs-sugg{animation:hs-press .35s ease}
html.mo:not(.plain):not([data-motion=off]) .hs-squat:not(.is-on) .hs-chip .c-a{opacity:1}
html.mo:not(.plain):not([data-motion=off]) .hs-squat:not(.is-on) .hs-chip .c-b{opacity:0}
html.mo:not(.plain):not([data-motion=off]) .hs-squat:not(.is-on) .hs-sugg{border-color:var(--a-line);background:var(--a-raised)}
.hs-ring{position:absolute;inset:-3px;border:2px solid var(--a-accent);border-radius:999px;opacity:0;pointer-events:none}
.hs-squat.is-on .hs-ring{animation:hs-tap .7s ease-out}
.hs-squat.is-on .hs-chip{animation:hs-dip .45s ease}
.hs-squat.is-on .hs-chip .c-b{transition-delay:.18s}
html.plain .hs-ring,html[data-motion=off] .hs-ring,html.plain .hs-chip,html[data-motion=off] .hs-chip{animation:none!important}
html.plain .hs-sugg,html[data-motion=off] .hs-sugg{animation:none!important}
html.plain .hs-chip i,html[data-motion=off] .hs-chip i{transition:none}
/* the card keeps its height: the chip stack is one grid cell, so there is no empty band under "Last time" */
.hs-squat .ka-ex-head{padding-bottom:12px}

/* ---- Facts under the hero ---- */
.home-facts{list-style:none;margin:0 auto;padding:0;width:min(var(--wrap),calc(100% - 48px));max-width:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden}
.home-facts li{padding:18px 22px 20px;border-left:1px solid var(--line);min-width:0;text-align:left}
.home-facts li:first-child{border-left:0}
.home-facts strong{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.home-facts span{display:block;margin-top:4px;color:var(--muted);font-size:14px;line-height:1.45}
@media (max-width:900px){
  .home-facts{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100% - 40px,720px)}
  .home-facts li{padding:14px 16px 16px}
  .home-facts li:nth-child(odd){border-left:0}
  .home-facts li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:640px){.home-facts{width:calc(100% - 32px)}}

/* ---- P.01 Free ---- */
.free-card{position:relative;margin-top:6px;padding:clamp(30px,5vw,48px) clamp(22px,5vw,56px) clamp(28px,4vw,44px);background:var(--paper-card);border:2px solid var(--ink);border-radius:8px;box-shadow:6px 6px 0 var(--ink)}
.free-card h2{margin:0 0 20px;font-size:clamp(72px,15vw,150px);line-height:1.2;letter-spacing:-.07em;font-weight:900}
.free-card h2 .hl{display:inline-block;padding:0 .1em;margin-left:-.06em;border-radius:.06em;line-height:1.1;background:var(--hl);color:var(--ink);box-shadow:.04em .04em 0 var(--hl-edge)}
.free-lead{max-width:30em;margin:0;font-size:clamp(17px,2vw,20px);line-height:1.55;color:var(--ink)}
.free-lead a{color:var(--green-deep);font-weight:800}
/* the stamp sits in the corner beside the word, where the card was empty,
   so it takes no room of its own and leaves no gap while it waits to land */
.free-stamp{position:absolute;right:clamp(14px,5vw,64px);top:clamp(40px,7vw,84px);display:flex;flex-direction:column;gap:2px;margin:0;width:max-content;padding:9px 12px 8px;border:3px double var(--green-deep);border-radius:8px;color:var(--green-deep);font:800 11px/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;rotate:6deg;background:transparent}
@media (min-width:480px){.free-stamp{font-size:13.5px;padding:12px 18px 10px}}
@media (max-width:379px){.free-stamp{position:static;margin:18px 0 0;rotate:-4deg}}
html.mo:not(.plain):not([data-motion=off]) .free-card:not(.is-on) .free-stamp{opacity:0;scale:1.6}
html.mo:not(.plain):not([data-motion=off]) .free-card.is-on .free-stamp{animation:hs-stamp .5s cubic-bezier(.3,1.3,.5,1) backwards}
html.plain .free-card{box-shadow:none}
html.plain .free-stamp{rotate:none}

/* ---- P.04 Warm-ups: the button is pressed, the ramp rows drop in ---- */
.warm-visual{position:relative;min-width:0}
.warm-visual .ka-exercise{max-width:520px}
.hs-warm .ka-ex-head{align-items:center}
.warm-more{margin:18px 0 0}
.warm-more .text-link{font-weight:700}
.hs-wbtn{transition:scale .2s ease}
.hs-wbtn{background:var(--a-accent);border:1px solid var(--a-accent);color:#fff;scale:.96}
html.mo:not(.plain):not([data-motion=off]) .hs-warm:not(.is-on) .hs-wbtn{background:transparent;border:1px dashed var(--a-line-strong);color:var(--a-ink);scale:1}
.hs-wrow{opacity:var(--p,1);translate:0 calc((1 - var(--p,1)) * -12px)}

/* ---- P.05 Sharing: the shared page slides out from behind the link ---- */
.share-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.share-text .share-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:16px 0 0}
.share-stage{position:relative;min-width:0}
.share-pair{position:relative;display:flex;flex-direction:column;max-width:440px;margin-inline:auto}
.share-pair .sd-a{position:relative;z-index:2;width:84%;align-self:flex-start}
.share-pair .sd-b{position:relative;z-index:1;width:94%;align-self:flex-end;margin-top:-34px;padding-top:50px;--q:calc(1 - var(--p,1));translate:calc(var(--q) * -22px) calc(var(--q) * -90px);opacity:calc(.25 + var(--p,1) * .75);will-change:transform}
.share-stage .zn-legend{margin-bottom:22px}
.share-page .ka-share-actions{margin-bottom:6px}

/* ---- P.06 Tracking ---- */
.track-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--grid-gap,20px);align-items:start;margin-top:6px}
.track-grid .fcard{height:auto}
.track-grid .c-prs{position:relative}
.c-prs .pr-list li{--t:clamp(0,calc((var(--p,1) - .1 - var(--r,0) * .2) / .2),1);opacity:var(--t);scale:calc(1.06 - var(--t) * .06);transform-origin:50% 50%}
.also-line{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:15.5px;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline}
.home-head .home-lede{margin:8px 0 0}

/* ---- P.07 Switching and Coach ---- */
.hm-pair-card{border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
@media (max-width:900px){.hm-pair-card#coach{margin-top:12px}}
.import-steps .step-num{font-family:var(--mono)}
.hm-coach{position:relative}
html.plain .hm-pair-card,html.plain .hs-item,html.plain .hm-stack,html.plain .track-grid .fcard{box-shadow:none}

/* ---- P.08 Questions ---- */
.faq-more{display:none}

/* ---- From 700px: the features become cards in a grid, Free lays out across ---- */
@media (min-width:700px){
  /* Free: the word, then the reason and the stamp */
  .free-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(32px,4vw,64px);align-items:center;padding:36px clamp(32px,4vw,56px) 40px}
  .free-card h2{grid-column:1;grid-row:1 / span 2;margin:0;font-size:clamp(104px,11vw,150px)}
  .free-card .free-lead{grid-column:2;align-self:end;max-width:26em;font-size:clamp(18px,1.7vw,21px)}
  .free-card .free-stamp{position:static;grid-column:2;align-self:start;margin:18px 0 0;rotate:-3deg}

  /* Features: four cards. Progression and Sharing are wide: the heading
     beside its line, then the demo across the card. The rule and warm-ups
     are halves: copy above the demo. Each demo sits in a tinted well, so
     the app screens read as screens. */
  .feature-bento{width:min(var(--wrap),calc(100% - 48px));margin:0 auto;padding:36px 0 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .feature-bento>.home-sec{width:auto;margin:0;padding:24px 22px 22px;border:1px solid var(--line);border-radius:24px;background:var(--surface);display:flex;flex-direction:column;min-width:0}
  .feature-bento>.home-sec[data-folio]::after{display:none}
  .feature-bento>.home-sec[data-folio]::before{margin-bottom:12px}
  .feature-bento>#how,.feature-bento>#share{grid-column:1 / -1}
  .feature-bento .home-split,.feature-bento .fig-split,.feature-bento .share-duo{display:flex;flex-direction:column;align-items:stretch;gap:24px;flex:1}
  .feature-bento .home-h2,.feature-bento .fig-copy h2{font-size:clamp(28px,3vw,40px)}
  .feature-bento .cta-row{justify-content:flex-start}
  .feature-bento .zn-cap{display:none}
  .feature-bento .prog-visual,.feature-bento .warm-visual,.feature-bento .share-stage,.feature-bento .fig-card{display:block;width:100%;max-width:none;margin:0;padding:14px;border:0;border-radius:18px;background:var(--paper-deep);box-shadow:none;transform:none}
  .feature-bento>#rules .fig-card,.feature-bento>#warmups .warm-visual{margin-top:auto}
  .feature-bento .fig-card .fig-body{max-width:400px;margin-inline:auto}
  .feature-bento .warm-visual .ka-exercise{max-width:none}
  .feature-bento .jump-panel{box-shadow:none}
  /* the wide cards: heading left, line and links right, on one baseline */
  .feature-bento>#how .home-split>div:first-child,.feature-bento>#share .share-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,4vw,48px);align-items:end}
  .feature-bento>#how .home-h2,.feature-bento>#share .home-h2{grid-column:1;grid-row:1 / span 2;margin:0;font-size:clamp(34px,4.2vw,56px)}
  .feature-bento>#how .home-lede,.feature-bento>#share .home-lede{grid-column:2;margin:0}
  .feature-bento>#how .cta-row{grid-column:2;margin-top:16px}
  .feature-bento>#share .share-links{grid-column:2;margin-top:14px}
  /* Progression: the three suggestions side by side */
  .feature-bento>#how .ka-sugg-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .feature-bento>#how .prog-note{display:inline-block;margin:14px 18px 0 2px}
  .feature-bento>#how .prog-rules{display:inline-block;margin:14px 0 0}
  /* Sharing: the link card beside the page it opens, whose exercises run
     two across so the page is wide and short, not a phone-tall column */
  .feature-bento .share-pair{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:14px;align-items:center;max-width:none}
  .feature-bento .share-pair .sd-a{grid-column:1;width:auto;margin:0;align-self:center}
  .feature-bento .share-pair .sd-b{grid-column:2;width:auto;margin:0;padding-top:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;translate:calc(var(--q) * -40px) 0}
  .feature-bento .share-pair .sd-b>:not(.ka-row){grid-column:1 / -1}
}

/* ---- From 901px: blocks across the page ---- */
@media (min-width:901px){
  /* until there is room for copy beside it, the hero panel runs full width under the copy */
  .hm-hero{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:56px;padding-bottom:40px}
  .hm-hero .hm-sticky{position:static}
  .hm-hero .hm-stack{max-width:none;margin:0}
  .home-facts{margin-bottom:8px}

  /* vertical rhythm */
  .home-sec{padding-top:44px;padding-bottom:44px}
  .home-sec+.home-sec{padding-top:20px}

  .feature-bento .share-pair{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:16px}

  /* Tracking: both cards one height; the PR list fills its card */
  .track-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch}
  .track-grid .c-prs{display:flex;flex-direction:column}
  .track-grid .c-prs .fvis{flex:1;display:flex;flex-direction:column;padding-top:24px}
  .track-grid .c-prs .pr-list{flex:1;display:flex;flex-direction:column;margin-top:10px}
  .track-grid .c-prs .pr-list li,.track-grid .c-prs .pr-list li:first-child{flex:1;padding:0;border-top:1px solid var(--line)}
  .track-grid .c-prs .pr-list li>span{font-size:18px;letter-spacing:-.02em}
  .track-grid .c-prs .pr-list em{font-size:15.5px}

  /* Switching and Coach: the import steps run across a wider card */
  .hm-pair{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:stretch}
  .hm-pair-card .import-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .hm-pair-card .import-steps li{margin:0;height:100%;flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
  .hm-pair-card .import-steps li::before,.hm-pair-card .import-steps li::after{display:none}

  /* Questions: the heading and a way onward on the left, the list on the right */
  .faq-split{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);column-gap:clamp(32px,5vw,80px);align-items:start}
  .faq-split .home-head{position:sticky;top:104px;margin-bottom:0}
  .faq-more{display:block}
  .faq-more a{color:var(--green-deep);font-weight:700}
}

/* ---- From 1100px: copy beside the hero panel, roomier cards ---- */
@media (min-width:1100px){
  .hm-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(40px,4vw,64px);padding-top:60px;padding-bottom:44px}
  .hm-hero .hm-stack{align-self:center;justify-self:stretch;box-shadow:0 34px 80px rgba(60,48,20,.13)}
  .free-card{grid-template-columns:auto minmax(0,1fr) auto}
  .free-card h2{grid-row:1}
  .free-card .free-lead{align-self:center}
  .free-card .free-stamp{grid-column:3;grid-row:1;align-self:center;margin:0;rotate:4deg}
  .feature-bento{gap:24px}
  .feature-bento>.home-sec{padding:30px 32px 32px;border-radius:28px}
  .feature-bento .prog-visual,.feature-bento .warm-visual,.feature-bento .share-stage,.feature-bento .fig-card{padding:22px;border-radius:20px}
  .hm-pair-card .import-steps li{padding:18px}
}

/* ---- Motion (all widths; only while html.mo is set, so never with reduced
   motion, Motion off or Plain page) ---- */
@keyframes hm-frame{from{opacity:0;translate:0 28px;scale:.97}}
@keyframes hm-pop{from{opacity:0;scale:.9}}
@keyframes hm-week{from{scale:0 1}}
@keyframes hm-draw{from{stroke-dashoffset:2400}to{stroke-dashoffset:0}}
/* hero entrance: the copy, then the panel, then its cards, then the weeks fill */
html.mo:not(.plain):not([data-motion=off]) .hm-hero .hero-copy>*{animation:mo-rv .7s cubic-bezier(.2,.7,.2,1) backwards}
html.mo:not(.plain):not([data-motion=off]) .hm-hero .hero-copy>:nth-child(2){animation-delay:.07s}
html.mo:not(.plain):not([data-motion=off]) .hm-hero .hero-copy>:nth-child(3){animation-delay:.15s}
html.mo:not(.plain):not([data-motion=off]) .hm-hero .hero-copy>:nth-child(4){animation-delay:.23s}
html.mo:not(.plain):not([data-motion=off]) .hm-hero .hm-stack{animation:hm-frame .9s cubic-bezier(.2,.7,.2,1) .12s backwards}
html.mo:not(.plain):not([data-motion=off]) .hm-hero .hs-item{animation:hm-pop .6s cubic-bezier(.2,.9,.3,1.1) backwards}
html.mo:not(.plain):not([data-motion=off]) .hm-hero .hs-stage{animation-delay:.42s}
html.mo:not(.plain):not([data-motion=off]) .hm-hero .hs-map{animation-delay:.52s}
html.mo:not(.plain):not([data-motion=off]) .hm-hero .hs-squat{animation-delay:.62s}
html.mo:not(.plain):not([data-motion=off]) .hm-hero .ka-weeks span{transform-origin:0 50%;animation:hm-week .45s cubic-bezier(.2,.7,.2,1) backwards}
html.mo:not(.plain):not([data-motion=off]) .hm-hero .ka-weeks span:nth-child(1){animation-delay:.8s}
html.mo:not(.plain):not([data-motion=off]) .hm-hero .ka-weeks span:nth-child(2){animation-delay:.88s}
html.mo:not(.plain):not([data-motion=off]) .hm-hero .ka-weeks span:nth-child(3){animation-delay:.96s}
html.mo:not(.plain):not([data-motion=off]) .hm-hero .ka-weeks span:nth-child(4){animation-delay:1.04s}
html.mo:not(.plain):not([data-motion=off]) .hm-hero .ka-weeks span:nth-child(n+5){animation-delay:1.12s}
/* blocks fade up once as they come into view (their selectors are in motion.js) */
html.mo:not(.plain):not([data-motion=off]) :is(.home-facts li,.free-card,.home-split>*,.share-text,.share-stage,.mid-cta,.also-line):not(.in){opacity:0}
html.mo:not(.plain):not([data-motion=off]) :is(.home-facts li,.free-card,.home-split>*,.share-text,.share-stage,.mid-cta,.also-line).in{animation:mo-rv .7s cubic-bezier(.2,.7,.2,1) var(--rd,0s) backwards}
/* the 1RM line draws itself the first time its card is seen */
html.mo:not(.plain):not([data-motion=off]) .chart-card.in:not(.drawn) svg path[fill="none"]{stroke-dasharray:2400;animation:hm-draw 1.5s cubic-bezier(.3,.6,.2,1) .25s backwards}
html.mo:not(.plain):not([data-motion=off]) .chart-card.in:not(.drawn) svg circle{animation:hm-pop .4s ease 1.05s backwards;transform-box:fill-box;transform-origin:50% 50%}
html.mo:not(.plain):not([data-motion=off]) .faq-item[open] .faq-answer{animation:mo-rv .32s cubic-bezier(.2,.7,.2,1) backwards}
/* pointer feedback */
.button .arrow,.text-link>span[aria-hidden]{display:inline-block;transition:translate .2s cubic-bezier(.2,.7,.2,1)}
.button:hover .arrow,.text-link:hover>span[aria-hidden]{translate:4px 0}
.button:active{scale:.98}
@media (hover:hover) and (min-width:901px){
  .feature-bento>.home-sec,.track-grid .fcard,.home-facts li{transition:translate .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s cubic-bezier(.2,.7,.2,1),background-color .2s ease}
  .feature-bento>.home-sec:hover,.track-grid .fcard:hover{translate:0 -4px;box-shadow:0 26px 60px rgba(60,48,20,.12)}
  .home-facts li:hover{background:var(--green-soft)}
}
html.plain .button .arrow,html[data-motion=off] .button .arrow,html.plain .text-link>span,html[data-motion=off] .text-link>span{transition:none}
html.plain .feature-bento>.home-sec,html[data-motion=off] .feature-bento>.home-sec,html.plain .track-grid .fcard,html[data-motion=off] .track-grid .fcard{transition:none;translate:none}
@media (prefers-reduced-motion:reduce){.button .arrow,.text-link>span[aria-hidden],.feature-bento>.home-sec,.track-grid .fcard{transition:none}.button:active{scale:none}.feature-bento>.home-sec:hover,.track-grid .fcard:hover{translate:none}}

/* L-16 / sharing figure (user 2026-11-10: "full width button" and "full width url" both read badly).
   Desktop: the share dialog stays dialog-sized, the message it produced sits under it and fills the
   column, and the shared page takes the rest. Nothing stretches past what it holds. Phone keeps the
   stacked pair and drops the message thread. */
.share-pair .sd-m{display:none}
@media (min-width:901px){
  .feature-bento .share-pair{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);grid-template-rows:auto 1fr;gap:16px;align-items:stretch;max-width:none}
  .feature-bento .share-pair .sd-a{grid-column:1;grid-row:1;width:auto;margin:0;align-self:start}
  .feature-bento .share-pair .sd-m{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:8px;margin:0;padding:14px 16px}
  .feature-bento .share-pair .sd-b{grid-column:2;grid-row:1 / span 2;width:auto;margin:0;padding-top:16px;align-self:stretch;translate:calc(var(--q) * -40px) 0}
  .feature-bento .share-pair .sd-b .ka-share-actions{display:flex;justify-items:start}
  .feature-bento .share-pair .sd-b .ka-share-actions .ka-btn{flex:none;width:auto;padding-inline:36px}
  .hm-pair>.hm-coach{align-self:start}
  .hm-coach .hm-pair-link{margin-top:14px}
}
.sm-head{align-self:center;color:var(--a-meta);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.sm-out{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.sm-bubble{margin:0;align-self:flex-end;max-width:88%;padding:8px 12px;border-radius:16px 16px 4px 16px;background:var(--a-accent);color:#fff;font-size:13.5px;line-height:1.35}
.sm-bubble.sm-in{align-self:flex-start;border-radius:16px 16px 16px 4px;background:var(--a-bg);color:var(--a-ink, inherit);border:1px solid var(--a-line)}
.sm-preview{display:grid;gap:2px;max-width:88%;padding:10px 12px;border:1px solid var(--a-line);border-radius:12px;background:var(--a-bg);color:inherit;text-decoration:none;font-size:12.5px}
.sm-preview b{font-size:14px}
.sm-preview span{color:var(--a-meta)}
html.dark .sm-bubble:not(.sm-in){color:#16210f}