/* Learning & Teaching Hub: home page (prefix h-). Tokens and helpers come from site.css.
   Sections in order: hero, problems strip, shelves, week steps, inside a lesson, planner teaser,
   numbers band, honest limits, FAQ, closing band. */

:root{
  --h-gut:clamp(16px,4vw,48px);
  --h-edge:max(var(--h-gut),calc((100vw - var(--wrap)) / 2 + var(--h-gut)));
  --h-gap:clamp(64px,9vw,128px);
}

/* ---------- motion (home only) ---------- */
@keyframes h-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(7%,-9%,0) scale(1.14)}
  100%{transform:translate3d(-8%,7%,0) scale(.93)}
}
@keyframes h-tile-in{from{opacity:0;transform:translateX(46px) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes h-bar{from{width:0}to{width:38%}}
@keyframes h-pop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes h-step-pop{0%{transform:scale(.86)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes h-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes h-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* ---------- blobs (hero + closing only) ---------- */
.h-blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.h-blob{position:absolute;display:block;border-radius:50%;opacity:.5;will-change:transform;
  background:radial-gradient(circle at 50% 50%,var(--c) 0,transparent 68%);animation:h-drift 30s ease-in-out infinite alternate}
.h-blob--teal{--c:var(--teal);width:clamp(320px,46vw,640px);height:clamp(320px,46vw,640px);top:-22%;left:-30%}
.h-blob--blue{--c:#5b9bd5;width:clamp(260px,38vw,520px);height:clamp(260px,38vw,520px);bottom:-30%;right:-6%;animation-delay:-12s;animation-direction:alternate-reverse}

/* ---------- 1 · hero ---------- */
.h-hero{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);min-height:min(86vh,780px);overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--paper),#edf4fa)}
.h-hero__text{position:relative;z-index:2;padding:clamp(28px,4vw,56px) clamp(16px,3.4vw,52px) clamp(32px,4.5vw,64px) var(--h-edge);display:flex;flex-direction:column;justify-content:center}
.h-hero h1{font-size:clamp(2.2rem,1.4rem + 3.2vw,3.9rem);margin:12px 0 18px;max-width:15ch}
.h-hero__lede{font-size:clamp(1.05rem,1rem + .35vw,1.22rem);line-height:1.6;max-width:46ch}
.h-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:24px}
.h-hero__fine{font-size:.9rem;color:var(--muted);max-width:26ch;line-height:1.4}
.h-chips{margin-top:clamp(20px,3vw,32px);padding-top:18px;border-top:1px solid var(--line)}
.h-chips__q{font:600 1.05rem/1.3 var(--font-head);color:var(--ink);margin-bottom:12px}
.h-chips ul{display:flex;flex-wrap:wrap;gap:8px}
.h-chip{display:inline-flex;align-items:center;gap:.6em;min-height:44px;padding:.45em 1.05em;border-radius:999px;background:rgba(255,255,255,.78);
  border:1px solid rgba(14,37,66,.16);color:var(--ink);font:500 .95rem/1.25 var(--font-ui);text-decoration:none;transition:background .2s,color .2s,transform .2s,border-color .2s}
.h-chip::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--chalk);box-shadow:0 0 0 2px rgba(14,37,66,.18)}
.h-chip:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff;transform:translateY(-2px)}
.h-chip:focus-visible{outline-offset:2px;border-radius:999px}

.h-hero__media{position:relative;min-height:clamp(380px,50vw,720px)}
.h-hero__media .h-blobs{z-index:0;overflow:visible}
.h-hero__photo{position:absolute;z-index:1;inset:clamp(20px,3vw,44px) 0 clamp(20px,3vw,44px) clamp(0px,1vw,16px);border-radius:44px 0 0 44px;overflow:hidden;
  box-shadow:0 30px 70px rgba(14,37,66,.22)}
.h-hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;animation:h-photo 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes h-photo{from{transform:scale(1.06)}to{transform:scale(1)}}
.h-hero__note{position:absolute;z-index:3;left:clamp(-72px,-4vw,-20px);bottom:clamp(40px,7vw,96px);max-width:300px;padding:16px 20px;font-size:.95rem;line-height:1.45;color:var(--text);
  background:rgba(255,255,255,.86)}
.h-hero__note strong{display:block;font:600 1.05rem/1.3 var(--font-head);margin-bottom:2px}

/* ---------- 2 · problems strip ---------- */
.h-problems{position:relative;padding-block:var(--h-gap) clamp(40px,6vw,72px);background:linear-gradient(180deg,#edf4fa 0,var(--tint) 100%);overflow:clip}
.h-problems__head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(20px,4vw,64px);align-items:end}
.h-problems h2{margin-top:12px;max-width:22ch}
.h-problems__tools{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:6px}
.h-problems__tools p{color:var(--text);max-width:24ch}
.h-strip__btns{display:flex;gap:10px}
.h-strip__btns[hidden]{display:none}
.h-round{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--blue-d);background:#fff;color:var(--blue-d);transition:background .2s,color .2s,transform .2s}
.h-round svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.h-round:hover:not(:disabled){background:var(--blue-d);color:#fff}
.h-round:disabled{opacity:.4;cursor:default}
.h-strip{margin-top:clamp(28px,4vw,48px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-padding-inline:var(--h-edge);
  padding:12px var(--h-edge) 30px;scrollbar-width:thin;scrollbar-color:var(--blue-d) transparent}
.h-strip:focus-visible{outline-offset:-4px;border-radius:0}
.h-strip__track{display:flex;align-items:flex-start;gap:clamp(14px,2vw,24px);width:max-content}
.h-note{flex:0 0 clamp(268px,27vw,372px);scroll-snap-align:start;position:relative}
.h-note:nth-child(even){margin-top:34px}
.h-note a{position:relative;display:flex;flex-direction:column;gap:16px;min-height:clamp(300px,26vw,372px);padding:34px 26px 24px;border-radius:var(--r);background:#fff;color:var(--ink);
  text-decoration:none;box-shadow:0 12px 30px rgba(14,37,66,.1);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.h-note:nth-child(3n+1) a{transform:rotate(-1.1deg)}
.h-note:nth-child(3n) a{transform:rotate(.9deg)}
.h-note a:hover{transform:translateY(-8px) rotate(0);box-shadow:0 22px 44px rgba(14,37,66,.18);color:var(--ink)}
.h-note a::before{content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--blue-d);box-shadow:0 3px 5px rgba(14,37,66,.3),inset -2px -2px 0 rgba(0,0,0,.2),inset 2px 2px 0 rgba(255,255,255,.35)}
.h-note__shelf{font:700 .8125rem/1.3 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.h-note__q{display:block;quotes:"\201C" "\201D";font:italic 500 clamp(1.28rem,1.05rem + .85vw,1.7rem)/1.28 var(--font-head);color:var(--ink);text-wrap:balance}
.h-note__q::before{content:open-quote}.h-note__q::after{content:close-quote}
.h-note__go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line);font-weight:600;font-size:.92rem;line-height:1.35;color:var(--blue-d)}
.h-note__arrow{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue-d);color:#fff;transition:transform .25s}
.h-note a:hover .h-note__arrow{transform:translateX(4px)}
.h-note--0 a{background:var(--chalk)}
.h-note--0 .h-note__shelf{color:var(--ink)}
.h-note--0 .h-note__go{border-color:rgba(14,37,66,.25);color:var(--ink)}
.h-note--0 .h-note__arrow{background:var(--ink)}
.h-note--0 a::before{background:var(--ink)}
.h-note--2 a{background:var(--tint2)}
.h-note--3 a{background:var(--ink)}
.h-note--3 a::before{background:var(--chalk)}
.h-note--3 .h-note__shelf{color:var(--muted-d)}
.h-note--3 .h-note__q{color:var(--on-dark)}
.h-note--3 .h-note__go{color:var(--teal-l);border-color:rgba(246,249,252,.2)}
.h-note--3 .h-note__arrow{background:var(--chalk);color:var(--ink)}
.h-note--3 a:hover{color:var(--on-dark)}
.h-note a:focus-visible{outline-offset:4px;border-radius:var(--r)}
html.js .h-strip:not(.is-in) .h-note{opacity:0}
.h-strip.is-in .h-note{animation:h-tile-in .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * .07s)}
.h-progress{height:4px;margin-top:2px;border-radius:4px;background:rgba(14,37,66,.14);overflow:hidden}
.h-progress__fill{display:block;height:100%;width:100%;border-radius:4px;transform-origin:0 50%;transform:scaleX(var(--p,.3));
  background:linear-gradient(90deg,var(--teal),var(--blue-d));transition:transform .18s linear}

/* ---------- 3 · shelves ---------- */
.h-shelves{padding-block:var(--h-gap) clamp(32px,5vw,64px)}
.h-shelves__head{max-width:60ch;margin-bottom:clamp(24px,4vw,48px)}
.h-shelves__head h2{margin:12px 0 14px}
.h-shelf{display:grid;grid-template-columns:minmax(220px,.36fr) minmax(0,1fr);gap:clamp(24px,4.5vw,68px);padding-block:clamp(32px,4.5vw,60px);border-top:1px solid var(--line);align-items:start}
.h-shelf--flip{grid-template-columns:minmax(0,1fr) minmax(220px,.36fr)}
.h-shelf--flip .h-shelf__side{order:2}
.h-shelf__sticky{position:sticky;top:calc(var(--head-h) + 28px)}
.h-shelf__num{display:block;font:500 clamp(3.4rem,2.4rem + 4vw,5.6rem)/.9 var(--font-head);color:rgba(23,162,169,.38);letter-spacing:-.04em;margin-bottom:6px}
.h-shelf__sticky h3{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);margin-bottom:12px}
.h-shelf__sticky p{max-width:30ch}
.h-shelf__count{display:inline-block;margin-top:16px;padding:.25em .9em;border-radius:999px;background:var(--tint);color:var(--ink);font:600 .85rem/1.5 var(--font-ui)}
.h-cards{display:grid;gap:clamp(14px,2vw,22px)}
.h-cards>li{min-width:0;display:flex}
.h-card{border-radius:var(--r);background:var(--surface);box-shadow:0 8px 24px rgba(14,37,66,.08);border:1px solid rgba(14,37,66,.07);overflow:hidden;transition:box-shadow .3s,transform .3s}
.h-card:hover{box-shadow:0 18px 40px rgba(14,37,66,.15);transform:translateY(-4px)}
.h-card a{display:flex;flex-direction:column;width:100%;color:var(--text);text-decoration:none}
.h-card a:focus-visible{outline-offset:-3px;border-radius:var(--r)}
.h-card__img{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;background:var(--tint)}
.h-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.h-card:hover .h-card__img img{transform:scale(1.05)}
.h-card__body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.h-card__phase{font:700 .8125rem/1.3 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d)}
.h-card__name{font:600 clamp(1.05rem,.98rem + .35vw,1.25rem)/1.25 var(--font-head);color:var(--ink);letter-spacing:-.005em}
.h-card__problem{display:block;font:italic 500 1.02rem/1.45 var(--font-head);color:var(--text);padding-left:14px;border-left:3px solid var(--chalk)}
.h-card__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:auto;padding-top:10px;font-size:.9rem;color:var(--muted)}
.h-card__price{margin-left:auto;font:600 1.2rem/1.2 var(--font-head);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.h-card--big .h-card__name{font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem)}
/* one course */
.h-shelf--n1 .h-cards{grid-template-columns:minmax(0,1fr)}
/* two courses: unequal pair */
.h-shelf--n2 .h-cards{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.h-shelf--n2.h-shelf--flip .h-cards{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.h-shelf--n2.h-shelf--flip .h-card--big{order:2}
.h-shelf--n2 .h-card--big .h-card__img{aspect-ratio:4/3}
.h-shelf--n2 .h-card:not(.h-card--big) .h-card__img{flex:1 1 auto;aspect-ratio:auto;min-height:200px}
/* three courses: one tall feature, two stacked */
.h-shelf--n3 .h-cards{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:auto auto}
.h-shelf--n3 .h-card--big{grid-row:1/3}
.h-shelf--n3 .h-card--big .h-card__img{flex:1 1 auto;aspect-ratio:auto;min-height:260px}
.h-shelf--n3 .h-card:not(.h-card--big) .h-card__img{aspect-ratio:16/8}
/* four or more: a wide feature, then a row */
.h-shelf--n4 .h-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.h-shelf--n4 .h-card--big{grid-column:1/-1}
.h-shelf--n4 .h-card--big a{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.h-shelf--n4 .h-card--big .h-card__img{aspect-ratio:auto;min-height:260px;height:100%}
.h-shelf--n4 .h-card--big .h-card__body{padding:26px 28px;justify-content:center}

/* ---------- 4 · week with a course ---------- */
.h-week{padding-block:var(--h-gap);background:linear-gradient(180deg,var(--paper),#edf4fa 55%,var(--paper))}
.h-week__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.h-week__pin{position:sticky;top:calc(var(--head-h) + 36px)}
.h-week__pinned h2{margin:12px 0 16px}
.h-week__pinned>p:not(.eyebrow):not(.h-week__count):not(.h-week__fine){max-width:36ch}
.h-week__count{margin-top:26px;font:500 clamp(3.2rem,2.2rem + 4vw,5.4rem)/1 var(--font-head);color:var(--blue-d);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.h-week__count [data-week-now]{display:inline-block}
.h-week__count.is-tick [data-week-now]{animation:h-pop .5s ease}
.h-week__of{font-size:.38em;color:var(--muted);letter-spacing:0}
.h-week__fine{margin-top:6px;font-size:.9rem;color:var(--muted)}
.h-steps{position:relative}
.h-steps::before{content:"";position:absolute;left:31px;top:34px;bottom:34px;width:2px;background:var(--line)}
.h-step{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(16px,3vw,36px);padding-block:clamp(30px,5vw,60px);min-height:clamp(180px,32vh,300px)}
.h-step__n{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--paper);border:2px solid var(--field);
  font:500 1.6rem/1 var(--font-head);color:var(--field);transition:background .35s,color .35s,border-color .35s}
.h-step.is-on .h-step__n{background:var(--blue-d);border-color:var(--blue-d);color:#fff;animation:h-step-pop .55s cubic-bezier(.2,.7,.2,1)}
.h-step h3{font-size:clamp(1.3rem,1.1rem + .9vw,1.8rem);margin-bottom:10px}
.h-step__day{display:block;margin-bottom:6px;font:700 .8125rem/1.3 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-d)}
.h-step p{max-width:52ch}

/* ---------- 5 · inside a lesson ---------- */
.h-inside{position:relative;padding-block:var(--h-gap);background:linear-gradient(135deg,var(--tint) 0,#dbeaf5 45%,var(--tint2) 100%);overflow:clip}
.h-inside__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,88px);align-items:center}
.h-inside__copy h2{margin:12px 0 16px}
.h-inside__copy>p:not(.eyebrow){max-width:44ch}
.h-inside__notes{margin-top:26px;border-top:1px solid var(--line)}
.h-inside__notes li{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.98rem;line-height:1.5}
.h-inside__notes b{font:600 1.05rem/1.3 var(--font-head);color:var(--ink)}
.h-inside__stage{position:relative}
.h-inside__cap{margin-top:16px;font-size:.9rem;color:var(--muted);text-align:center;font-style:italic}
.h-mock{position:relative;border-radius:22px;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.8);box-shadow:0 40px 80px rgba(14,37,66,.22);overflow:hidden;cursor:default;user-select:none;-webkit-user-select:none;pointer-events:none}
.h-mock::after{content:"Illustration";position:absolute;top:10px;right:14px;padding:.2em .8em;border-radius:999px;background:var(--chalk);color:var(--ink);font:700 .8125rem/1.5 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;transform:rotate(3deg)}
.h-mock__top{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--ink);color:var(--on-dark)}
.h-mock__top span{width:10px;height:10px;border-radius:50%;background:rgba(246,249,252,.35)}
.h-mock__top em{margin-left:10px;font:500 .875rem/1.3 var(--font-ui);font-style:normal;color:var(--muted-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.h-mock__body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-areas:"v l" "r r";gap:16px;padding:16px}
.h-mock__video{grid-area:v;position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:var(--ink)}
.h-mock__video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 40%}
.h-mock__video::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(180deg,rgba(14,37,66,0),rgba(14,37,66,.78))}
.h-mock__ctrl{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:12px 16px;color:#fff;font:600 .8125rem/1 var(--font-ui)}
.h-mock__pause{flex:none;width:4px;height:14px;background:#fff;border-radius:1px;box-shadow:8px 0 0 #fff;margin-right:8px}
.h-mock__bar{flex:1;height:5px;border-radius:5px;background:rgba(255,255,255,.35);position:relative}
.h-mock__bar i{position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:5px;background:var(--chalk)}
.h-mock__bar i::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
html.js .h-mock__bar i{width:0}
html.js .h-inside__stage.in .h-mock__bar i{animation:h-bar 2.4s .5s cubic-bezier(.2,.7,.2,1) forwards}
.h-mock__time{flex:none;white-space:nowrap}
.h-mock__list{grid-area:l;min-width:0}
.h-mock__label{margin-bottom:8px;font:700 .8125rem/1.3 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.h-mock__list li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:.875rem;line-height:1.3;color:var(--muted)}
.h-mock__list li:last-child{border-bottom:0}
.h-mock__tick{width:18px;height:18px;border-radius:50%;border:2px solid var(--field);position:relative}
.h-mock__n{font-variant-numeric:tabular-nums}
.h-mock__list li.is-done{color:var(--text)}
.h-mock__list li.is-done .h-mock__tick{background:var(--teal-d);border-color:var(--teal-d)}
.h-mock__list li.is-done .h-mock__tick::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.h-mock__list li.is-now{color:var(--ink);font-weight:600}
.h-mock__list li.is-now .h-mock__tick{border-color:var(--blue-d);background:radial-gradient(circle,var(--blue-d) 0 36%,transparent 40%)}
.h-mock__u{min-width:0}
.h-mock__reflect{grid-area:r;padding:14px 18px 16px;border-radius:14px;background:var(--paper);border:1.5px dashed rgba(14,37,66,.28)}
.h-mock__prompt{font:italic 500 1rem/1.45 var(--font-head);color:var(--ink);margin-bottom:12px;max-width:52ch}
.h-mock__field{display:grid;gap:8px}
.h-mock__field i{display:block;height:7px;border-radius:5px;background:rgba(14,37,66,.16)}
.h-mock__field i:nth-child(1){width:92%}.h-mock__field i:nth-child(2){width:78%}.h-mock__field i:nth-child(3){width:44%}

/* ---------- 6 · planner teaser ---------- */
.h-plan{position:relative;padding-block:var(--h-gap);background:radial-gradient(ellipse 60% 50% at 85% 70%,rgba(23,162,169,.14),transparent 70%),radial-gradient(ellipse 50% 45% at 5% 20%,rgba(244,198,78,.16),transparent 70%)}
.h-plan__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center;margin-bottom:clamp(28px,4vw,48px)}
.h-plan__head h2{margin:12px 0 14px}
.h-plan__head p:not(.eyebrow){max-width:52ch}
.h-plan__photo{position:relative;transform:rotate(1.6deg)}
.h-plan__photo img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);box-shadow:0 24px 50px rgba(14,37,66,.2)}
.h-plan__photo::before{content:"";position:absolute;z-index:1;top:-14px;left:50%;width:110px;height:30px;margin-left:-55px;background:rgba(244,198,78,.85);transform:rotate(-3deg);box-shadow:0 2px 4px rgba(14,37,66,.12)}
.h-plan__form{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(22px,3.5vw,48px);padding:clamp(20px,3.2vw,40px);background:rgba(255,255,255,.7)}
.h-plan__pick{border:0;margin:0;padding:0;min-width:0}
.h-plan__pick legend{padding:0;margin-bottom:14px;font:600 1.15rem/1.3 var(--font-head);color:var(--ink)}
.h-plan__pick ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.h-pick{display:grid;grid-template-columns:1.4rem minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:start;height:100%;min-height:56px;margin:0;padding:11px 14px;border:1.5px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.75);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.h-pick input{grid-row:1/3;width:1.35rem;height:1.35rem;margin:.1rem 0 0;accent-color:var(--blue-d);cursor:pointer}
.h-pick__name{font:600 .93rem/1.3 var(--font-ui);color:var(--ink)}
.h-pick__len{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.h-pick:hover{border-color:var(--blue-d)}
.h-pick:has(input:checked){border-color:var(--blue-d);background:#fff;box-shadow:0 0 0 3px rgba(27,90,165,.14)}
.h-pick:has(input:focus-visible){outline:2px solid var(--blue-d);outline-offset:2px}
.h-pick:has(input:disabled){opacity:.5;cursor:not-allowed;background:rgba(255,255,255,.4)}
.h-pick input:disabled{cursor:not-allowed}
.h-plan__side{display:flex;flex-direction:column;gap:18px;align-self:start}
.h-plan__rate label{margin-bottom:6px}
.h-plan__out{min-height:7.5rem;padding:16px 18px;border-radius:var(--r-sm);background:var(--ink);color:var(--on-dark)}
.h-plan__out p{color:var(--on-dark)}
.h-plan__empty{font-size:.95rem;line-height:1.5;color:var(--muted-d)!important}
.h-plan__big{display:block}
.h-plan__big b{font:500 clamp(2.2rem,1.6rem + 2.2vw,3.2rem)/1.05 var(--font-head);color:var(--on-dark);font-variant-numeric:lining-nums tabular-nums}
.h-plan__big small{color:var(--muted-d);font-size:.9rem}
.h-plan__weeks{display:block;margin-top:8px;font-size:1rem;line-height:1.45}
.h-plan__weeks b{color:var(--chalk)}
.h-plan__sum.is-tick .h-plan__big b{animation:h-pop .45s ease}
.h-plan__limit{margin-top:10px;font-size:.88rem;line-height:1.4;color:var(--teal-l)!important}
.h-plan__link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--blue-d)}

/* ---------- 7 · numbers band ---------- */
.h-numbers{position:relative;padding-block:var(--h-gap);background:var(--ink);overflow:clip;isolation:isolate}
.h-numbers::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse 55% 70% at 100% 0,rgba(23,162,169,.28),transparent 70%),radial-gradient(ellipse 40% 50% at 0 100%,rgba(27,90,165,.4),transparent 70%)}
.h-numbers__head h2{margin-top:12px;max-width:20ch}
.h-counters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin-top:clamp(32px,5vw,64px)}
.h-counters li{padding-top:22px;border-top:3px solid var(--chalk);display:flex;flex-direction:column;gap:12px}
.h-count{display:block;font:500 clamp(3rem,1.6rem + 5vw,6.2rem)/.95 var(--font-head);letter-spacing:-.03em;color:var(--on-dark);font-variant-numeric:lining-nums tabular-nums;transform-origin:0 100%}
.h-count.in{animation:h-pop .7s 1.2s ease}
.h-counters span{color:var(--muted-d);font-size:1rem;line-height:1.45;max-width:24ch}
.h-lengths{display:flex;align-items:flex-end;gap:clamp(6px,1vw,14px);height:clamp(70px,9vw,110px);margin-top:clamp(36px,5vw,64px);padding-top:8px}
.h-lengths__bar{flex:1;height:calc(var(--len) * 1%);min-height:6px;border-radius:8px 8px 2px 2px;background:linear-gradient(180deg,var(--teal-l),rgba(23,162,169,.55));transform-origin:50% 100%}
.h-lengths.in .h-lengths__bar{animation:h-grow .9s cubic-bezier(.2,.7,.2,1) both}
.h-lengths.in .h-lengths__bar:nth-child(2){animation-delay:.05s}.h-lengths.in .h-lengths__bar:nth-child(3){animation-delay:.1s}.h-lengths.in .h-lengths__bar:nth-child(4){animation-delay:.15s}
.h-lengths.in .h-lengths__bar:nth-child(5){animation-delay:.2s}.h-lengths.in .h-lengths__bar:nth-child(6){animation-delay:.25s}.h-lengths.in .h-lengths__bar:nth-child(7){animation-delay:.3s}
.h-lengths.in .h-lengths__bar:nth-child(8){animation-delay:.35s}.h-lengths.in .h-lengths__bar:nth-child(9){animation-delay:.4s}.h-lengths.in .h-lengths__bar:nth-child(10){animation-delay:.45s}
.h-lengths.in .h-lengths__bar:nth-child(11){animation-delay:.5s}
.h-lengths__cap{margin-top:12px;font-size:.875rem;color:var(--muted-d);border-top:1px solid rgba(246,249,252,.2);padding-top:10px}

/* ---------- 8 · honest limits ---------- */
.h-limits{padding-block:var(--h-gap)}
.h-limits__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(32px,7vw,112px);align-items:start}
.h-limits h2{margin:12px 0 clamp(20px,3vw,36px)}
.h-limits__list{counter-reset:lim;border-bottom:1px solid var(--ink)}
.h-limits__list li{counter-increment:lim;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(12px,3vw,40px);padding:22px 0 22px;border-top:1px solid var(--ink)}
.h-limits__list li:first-child{border-top-width:2px}
.h-limits__list h3{font-size:clamp(1.12rem,1rem + .5vw,1.4rem);line-height:1.25}
.h-limits__list h3::before{content:"0" counter(lim);display:block;margin-bottom:6px;font:700 .8rem/1 var(--font-ui);letter-spacing:.14em;color:var(--teal-d)}
.h-limits__list p{align-self:center;max-width:46ch}
.h-limits__aside{position:sticky;top:calc(var(--head-h) + 28px);padding:clamp(22px,3vw,34px);border-radius:var(--r);background:var(--tint2);margin-top:clamp(0px,6vw,92px)}
.h-limits__big{font:600 clamp(1.35rem,1.15rem + .8vw,1.8rem)/1.2 var(--font-head);color:var(--ink);margin-bottom:12px}
.h-limits__aside p+p{margin-bottom:20px}

/* ---------- 9 · FAQ ---------- */
.h-faq{padding-block:0 var(--h-gap)}
.h-faq__grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,6vw,96px);align-items:start;padding-top:clamp(28px,4vw,56px);
  background:linear-gradient(var(--line),var(--line)) 50% 0/calc(100% - 2 * var(--h-gut)) 1px no-repeat}
.h-faq__sticky{position:sticky;top:calc(var(--head-h) + 28px)}
.h-faq__sticky h2{margin:12px 0 14px}
.h-faq__sticky p:not(.eyebrow){margin-bottom:22px;max-width:32ch}
.h-faq details{border-top:1px solid var(--line)}
.h-faq details:last-child{border-bottom:1px solid var(--line)}
.h-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:14px 0;cursor:pointer;list-style:none;font:600 clamp(1.02rem,.96rem + .3vw,1.2rem)/1.35 var(--font-head);color:var(--ink)}
.h-faq summary::-webkit-details-marker{display:none}
.h-faq summary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--blue-d);
  background:linear-gradient(var(--blue-d),var(--blue-d)) center/12px 2px no-repeat,linear-gradient(var(--blue-d),var(--blue-d)) center/2px 12px no-repeat;transition:transform .3s,background-color .3s}
.h-faq summary:hover{color:var(--blue-d)}
.h-faq summary:focus-visible{outline-offset:2px;border-radius:6px}
.h-faq details[open] summary::after{transform:rotate(45deg);background-color:var(--chalk)}
.h-faq details p{padding:0 52px 22px 0;max-width:62ch}

/* the closing band meets the footer without a gap */
.page-home .site-foot{margin-top:0}

/* ---------- 10 · closing band ---------- */
.h-close{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(80px,12vw,176px);color:var(--on-dark);text-align:center;background:var(--blue-d)}
.h-close__img{position:absolute;z-index:-3;inset:0;width:100%;height:100%;object-fit:cover}
.h-close__veil{position:absolute;z-index:-2;inset:0;background:linear-gradient(180deg,rgba(18,63,120,.9),rgba(14,37,66,.9))}
.h-close .h-blobs{z-index:-1}
.h-close .h-blob--teal{top:-30%;left:50%;margin-left:-22%;width:clamp(360px,52vw,720px);height:clamp(360px,52vw,720px);opacity:.38}
.h-close__in{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}
.h-close h2{color:var(--on-dark);font-size:clamp(2rem,1.3rem + 3.4vw,3.8rem);max-width:18ch;margin-inline:auto}
.h-close p{color:var(--on-dark);font-size:clamp(1.05rem,1rem + .4vw,1.25rem);max-width:44ch}
.h-close .btn{margin-top:8px;min-height:54px;padding-inline:2.2em;font-size:1.05rem}
.h-close :focus-visible{outline-color:var(--on-dark)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .h-counters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-shelf--n4 .h-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-shelf--n4 .h-card--big a{grid-template-columns:minmax(0,1fr)}
  .h-shelf--n4 .h-card--big .h-card__img{aspect-ratio:16/9;min-height:0;height:auto}
}
@media (max-width:900px){
  .h-hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .h-hero__text{padding:36px var(--h-gut) 28px}
  .h-hero h1{max-width:18ch}
  .h-hero__media{min-height:0;aspect-ratio:4/3.1;margin-bottom:0}
  .h-hero__photo{inset:0 0 28px var(--h-gut);border-radius:32px 0 0 32px}
  .h-hero__note{left:var(--h-gut);bottom:0;max-width:260px}
  .h-problems__head{grid-template-columns:minmax(0,1fr)}
  .h-shelf,.h-shelf--flip{grid-template-columns:minmax(0,1fr)}
  .h-shelf--flip .h-shelf__side{order:0}
  .h-shelf__sticky{position:static}
  .h-shelf__sticky p{max-width:48ch}
  .h-shelf--n2.h-shelf--flip .h-card--big{order:0}
  .h-week__grid,.h-inside__grid,.h-limits__grid,.h-faq__grid,.h-plan__head,.h-plan__form{grid-template-columns:minmax(0,1fr)}
  .h-week__pin,.h-limits__aside,.h-faq__sticky{position:static}
  .h-week__pinned>p:not(.eyebrow):not(.h-week__count):not(.h-week__fine){max-width:52ch}
  .h-step{min-height:0}
  .h-limits__aside{margin-top:0}
  .h-plan__photo{max-width:560px}
  .h-plan__side{align-self:stretch}
}
@media (max-width:640px){
  .h-shelf--n2 .h-cards,.h-shelf--n2.h-shelf--flip .h-cards,.h-shelf--n3 .h-cards,.h-shelf--n4 .h-cards{grid-template-columns:minmax(0,1fr)}
  .h-shelf--n3 .h-card--big{grid-row:auto}
  .h-shelf--n3 .h-card--big .h-card__img{flex:none;aspect-ratio:16/10;min-height:0}
  .h-shelf--n3 .h-card:not(.h-card--big) .h-card__img{aspect-ratio:16/10}
  .h-plan__pick ul{grid-template-columns:minmax(0,1fr)}
  .h-mock__body{grid-template-columns:minmax(0,1fr);grid-template-areas:"v" "l" "r"}
  .h-mock::after{top:46px}
  .h-inside__notes li{grid-template-columns:minmax(0,1fr);gap:2px}
  .h-limits__list li{grid-template-columns:minmax(0,1fr);gap:8px}
  .h-counters{gap:28px 18px}
  .h-faq details p{padding-right:0}
  .h-steps::before{left:25px}
  .h-step{grid-template-columns:52px minmax(0,1fr)}
  .h-step__n{width:52px;height:52px;font-size:1.35rem}
  .h-hero__note{max-width:220px;font-size:.88rem;padding:12px 14px}
  .h-hero__media{aspect-ratio:1/1}
  .h-problems__tools{justify-content:flex-start}
}
@media (hover:none){.h-note a{transform:none!important}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .h-blob{animation:none}
  .h-hero__photo img{animation:none}
  html.js .h-strip:not(.is-in) .h-note{opacity:1}
  .h-strip.is-in .h-note{animation:none}
  html.js .h-mock__bar i{width:38%}
  .h-progress__fill{transition:none}
  .h-lengths.in .h-lengths__bar{animation:none}
  .h-note a,.h-chip,.h-card,.h-card__img img{transition:none}
  .h-note a:hover{transform:none}
}