/* hero — pinned three-chapter opener. Namespace: .hr- (agent A). */

/* ---------- shell ---------- */
.hero.hr-root{
  --hr-ink:#f7f4fb;
  --hr-muted:#cabbdc;
  --hr-accent:#d1afff;
  --hr-green:#1e9678;
  --hr-green-bg:#e7f6f1;
  --hr-red:#d9435e;
  --hr-red-bg:#fdeaee;
  --hr-ease:cubic-bezier(.16,1,.3,1);
  position:relative;
  height:400svh;
  background:#f7f6fa;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Inter,system-ui,Arial,sans-serif;
}
.hero.hr-root *{box-sizing:border-box}
.hr-root .hr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.hr-root .hr-pin{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(18px,2.4vh,34px);
  padding:calc(76px + clamp(18px,3vh,42px)) 5vw clamp(18px,3vh,38px);
  overflow:hidden;
}

.hr-root .hr-deck{
  position:relative;
  width:100%;max-width:1500px;margin:0 auto;
  flex:1 1 auto;
  height:min(780px,100%);max-height:780px;min-height:0;
  border-radius:28px;
  background:#29193b;
  box-shadow:0 24px 60px -26px #5724813a;
  isolation:isolate;
  overflow:hidden;
}

/* ---------- a chapter ---------- */
.hr-root .hr-ch{
  position:absolute;inset:0;
  display:grid;grid-template-columns:40% 60%;
  border-radius:28px;overflow:hidden;
  color:var(--hr-ink);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease,visibility 0s .45s;
  will-change:opacity,transform;
  backface-visibility:hidden;
}
.hr-root .hr-ch.is-active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .55s ease,visibility 0s;z-index:3}
.hr-root .hr-decode{background:radial-gradient(ellipse at 0% 0%,#6944a7 0%,transparent 65%),linear-gradient(110deg,#3d235f,#20172f)}
.hr-root .hr-remember{background:radial-gradient(ellipse at 10% 10%,#7a47d1,transparent 80%),#432477}
.hr-root .hr-create{background:radial-gradient(ellipse at 0% 0%,#765192,transparent 70%),#34203f;--hr-accent:#ecc2ec}

/* ---------- copy: exactly two things ---------- */
.hr-root .hr-copy{
  padding:clamp(28px,3.4vw,56px);
  display:flex;flex-direction:column;justify-content:center;
  min-width:0;
}
.hr-root .hr-word{
  margin:0;
  font-size:clamp(40px,5.2vw,76px);
  font-weight:600;letter-spacing:-.06em;line-height:.98;
  display:flex;flex-wrap:wrap;
}
.hr-root .hr-word span{display:inline-block;white-space:pre}
.hr-root .hr-word .hr-dot{color:var(--hr-accent)}
.hr-root .hr-sub{
  margin:clamp(16px,2vw,26px) 0 0;
  font-size:clamp(17px,1.55vw,25px);
  font-weight:420;line-height:1.3;letter-spacing:-.02em;
  color:var(--hr-muted);
  max-width:16ch;
  overflow:hidden;
}
.hr-root .hr-sub>span{display:block}

/* kinetic entry — once per chapter, killed under reduced motion */
@keyframes hr-char{from{opacity:0;transform:translateY(.44em) scale(1.08);filter:blur(9px)}to{opacity:1;transform:none;filter:none}}
@keyframes hr-wipe{from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:none}}
@keyframes hr-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hr-ink{from{opacity:0;transform:translateX(var(--fx,10px)) scale(.94)}to{opacity:1;transform:none}}
@keyframes hr-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hr-ad{from{opacity:0;transform:translateY(34px) rotate(var(--rot,0deg)) scale(.94)}to{opacity:1;transform:translateY(0) rotate(var(--rot,0deg)) scale(1)}}

.hr-root .hr-ch.is-active .hr-word span{animation:hr-char .68s var(--hr-ease) both;animation-delay:calc(var(--i) * 34ms + 60ms)}
.hr-root .hr-ch.is-active .hr-sub>span{animation:hr-wipe .8s var(--hr-ease) both;animation-delay:.34s}

/* ---------- visual side ---------- */
.hr-root .hr-vis{
  position:relative;min-width:0;min-height:0;
  display:grid;place-items:center;
  padding:clamp(18px,2vw,34px) clamp(14px,2vw,30px) clamp(18px,2vw,34px) 0;
}

/* 01 — one image, decodes layered on it */
.hr-root .hr-shot{
  position:relative;
  aspect-ratio:4/5;height:100%;width:auto;max-width:100%;
  min-width:0;min-height:0;
  border-radius:16px;
  background:#2a2036;
  box-shadow:0 28px 60px -18px #0a04138c;
  overflow:visible;
  justify-self:center;
}
.hr-root .hr-shot img{
  width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  border-radius:16px;display:block;
}
.hr-root .hr-frame{
  position:absolute;inset:8px;border:1px solid #dfb7ff3d;border-radius:11px;pointer-events:none;
}
.hr-root .hr-ch.is-active .hr-shot{animation:hr-rise .9s var(--hr-ease) both}

/* Each callout is anchored to a point (--x, --y) on the image: the leader line
   flexes to fill the gap between the chip and that point, so the dot lands
   exactly on the anchor at every width. */
.hr-root .hr-cal{--edge:clamp(10px,3%,22px);position:absolute;top:var(--y);height:0;display:flex;align-items:center;z-index:2}
.hr-root .hr-cal-l{left:var(--edge);width:calc(var(--x) - var(--edge));--fx:14px}
.hr-root .hr-cal-r{left:var(--x);right:var(--edge);--fx:-14px}
.hr-root .hr-line{
  position:relative;flex:1 1 auto;min-width:10px;
  height:1px;margin:0 9px;
  background:linear-gradient(90deg,#d6b1ff33,#d6b1ffcc);
  transform-origin:right center;
}
.hr-root .hr-cal-r .hr-line{background:linear-gradient(270deg,#d6b1ff33,#d6b1ffcc);transform-origin:left center}
.hr-root .hr-line::after{
  content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;
  background:#e3c8ff;box-shadow:0 0 0 3px #c79bff38,0 0 12px 2px #ac6fe980;
  transform:translateY(-50%);
}
.hr-root .hr-cal-l .hr-line::after{right:-3px}
.hr-root .hr-cal-r .hr-line::after{left:-3px}
.hr-root .hr-chip{
  flex:0 1 auto;min-width:0;max-width:196px;
  background:#221a2ee0;backdrop-filter:blur(14px);
  border:1px solid #8f74a355;border-radius:11px;
  padding:9px 13px;
  font-size:12.5px;line-height:1.25;letter-spacing:-.01em;color:#f0e8f8;
  box-shadow:0 12px 26px -10px #00000073;
}
.hr-root .hr-cal-l .hr-chip{text-align:left}
.hr-root .hr-chip i{
  display:block;font-style:normal;
  font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#c6a2e9;margin-bottom:4px;
}
.hr-root .hr-ch.is-active .hr-cal{animation:hr-ink .6s var(--hr-ease) both;animation-delay:calc(var(--d) * 130ms + .5s)}
.hr-root .hr-ch.is-active .hr-line{animation:hr-draw .5s var(--hr-ease) both;animation-delay:calc(var(--d) * 130ms + .56s)}

/* 02 — one card: green worked, red didn't */
.hr-root .hr-card{
  width:min(568px,100%);min-width:0;
  background:#fff;color:#372450;
  border-radius:20px;
  padding:clamp(18px,1.9vw,28px);
  box-shadow:0 22px 60px -25px #24113899;
}
.hr-root .hr-ch.is-active .hr-card{animation:hr-rise .8s var(--hr-ease) both;animation-delay:.18s}
.hr-root .hr-card-top{
  display:flex;gap:16px;justify-content:space-between;align-items:center;
  padding:0 4px 12px;border-bottom:1px solid #ece7f2;margin-bottom:12px;
}
.hr-root .hr-card-src{display:flex;align-items:center;gap:9px;min-width:0}
.hr-root .hr-card-src-shot{
  flex:none;width:26px;height:32px;border-radius:6px;overflow:hidden;
  box-shadow:0 4px 10px -4px #24113866;
}
.hr-root .hr-card-src-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.hr-root .hr-card-src-label{font-size:11px;color:#9d8fae;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-root .hr-card-legend{display:flex;gap:16px;flex:none}
.hr-root .hr-key{
  display:inline-flex;align-items:center;gap:6px;
  font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#9d8fae;
}
.hr-root .hr-key::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.hr-root .hr-key-g::before{background:var(--hr-green)}
.hr-root .hr-key-r::before{background:var(--hr-red)}
.hr-root .hr-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hr-root .hr-row{
  display:flex;align-items:center;gap:14px;
  padding:16px 17px;border-radius:13px;
}
.hr-root .hr-row::before{content:"";flex:none;width:9px;height:9px;border-radius:50%}
.hr-root .hr-dim{
  flex:none;width:68px;
  font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#8c7fa0;
}
.hr-root .hr-verdict{font-size:15.5px;font-weight:500;letter-spacing:-.015em;line-height:1.25}
.hr-root .hr-row.hr-good{background:var(--hr-green-bg)}
.hr-root .hr-row.hr-good::before{background:var(--hr-green)}
.hr-root .hr-row.hr-good .hr-verdict{color:var(--hr-green)}
.hr-root .hr-row.hr-bad{background:var(--hr-red-bg)}
.hr-root .hr-row.hr-bad::before{background:var(--hr-red)}
.hr-root .hr-row.hr-bad .hr-verdict{color:var(--hr-red)}
.hr-root .hr-ch.is-active .hr-row{animation:hr-ink .55s var(--hr-ease) both;--fx:14px;animation-delay:calc(var(--d) * 110ms + .42s)}

/* 03 — three ads from the winning formula */
.hr-root .hr-create .hr-vis{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,1.8vh,22px);
}
.hr-root .hr-ads-src{
  flex:none;display:flex;align-items:center;gap:10px;
  padding:6px 16px 6px 6px;border-radius:99px;
  background:#ffffff14;border:1px solid #ffffff22;
}
.hr-root .hr-ads-src-shot{
  flex:none;width:28px;height:35px;border-radius:7px;overflow:hidden;background:#2a2036;
}
.hr-root .hr-ads-src-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.hr-root .hr-ads-src-label{font-size:11.5px;color:#e7dcf5;letter-spacing:-.01em;white-space:nowrap}
.hr-root .hr-ads-src-label i{font-style:normal;color:#b79bdd;font-family:ui-monospace,Menlo,monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;margin-right:6px}
.hr-root .hr-ch.is-active .hr-ads-src{animation:hr-rise .7s var(--hr-ease) both;animation-delay:.12s}

.hr-root .hr-ads{
  position:relative;width:100%;min-width:0;flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,1.1vw,20px);
  padding:0 clamp(12px,2.6%,24px);
}
.hr-root .hr-ad{
  position:relative;margin:0;flex:none;
  aspect-ratio:4/5;width:37%;height:auto;max-height:100%;
  border-radius:14px;background:#2f2440;
  box-shadow:0 26px 54px -20px #0a041399;
  transform:rotate(var(--rot,0deg));
}
.hr-root .hr-ad img{width:100%;height:100%;object-fit:cover;border-radius:14px;display:block}

/* live-text overlay baked into the composition, same brand every time */
.hr-root .hr-ad-copy{
  position:absolute;inset:0;border-radius:14px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(9px,1.6vw,16px);
  background:linear-gradient(180deg,transparent 42%,#140a1f8c 76%,#140a1fc4 100%);
}
.hr-root .hr-ad-brand{
  position:absolute;top:clamp(8px,1.3vw,14px);left:clamp(9px,1.6vw,16px);
  font-family:Georgia,"Times New Roman",serif;font-style:italic;
  font-size:clamp(10px,1.05vw,13px);letter-spacing:.03em;color:#fff;
  text-shadow:0 1px 8px #00000075;
}
.hr-root .hr-ad-head{
  margin:0 0 clamp(6px,1vw,10px);color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(11.5px,1.5vw,17px);line-height:1.14;font-weight:600;letter-spacing:-.005em;
  text-shadow:0 2px 10px #0000006b;
}
.hr-root .hr-ad-cta{
  align-self:flex-start;
  font-size:clamp(8.5px,.95vw,11px);font-weight:600;letter-spacing:.01em;color:#382108;
  background:#e9caa2;padding:.5em .85em;border-radius:99px;
}
.hr-root .hr-ch.is-active .hr-ad-copy{animation:hr-rise .7s var(--hr-ease) both;animation-delay:calc(var(--d) * 140ms + .4s)}

.hr-root .hr-ad-a{--rot:-6deg;z-index:1}
.hr-root .hr-ad-b{--rot:0deg;width:45%;z-index:2;margin:0 -9.5%}
.hr-root .hr-ad-c{--rot:6deg;z-index:1}
.hr-root .hr-ch.is-active .hr-ad{animation:hr-ad .85s var(--hr-ease) both;animation-delay:calc(var(--d) * 140ms + .22s)}
.hr-root .hr-tag{
  position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);
  white-space:nowrap;
  font-size:11px;font-weight:550;letter-spacing:-.01em;
  padding:6px 11px 6px 9px;border-radius:99px;
  display:flex;align-items:center;gap:7px;
  box-shadow:0 8px 20px -8px #0a041399;
  z-index:3;
}
.hr-root .hr-ad-a .hr-tag{left:10px;right:auto;transform:none}
.hr-root .hr-ad-c .hr-tag{left:auto;right:10px;transform:none}
.hr-root .hr-tag::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.hr-root .hr-tag.hr-good{background:var(--hr-green-bg);color:#14705a}
.hr-root .hr-tag.hr-good::before{background:var(--hr-green)}
.hr-root .hr-tag.hr-bad{background:var(--hr-red-bg);color:#b5304a}
.hr-root .hr-tag.hr-bad::before{background:var(--hr-red)}
.hr-root .hr-tag-2{bottom:auto;top:-13px}
.hr-root .hr-ch.is-active .hr-tag{animation:hr-rise .6s var(--hr-ease) both;animation-delay:calc(var(--d) * 140ms + .72s)}

/* ---------- navigation furniture ---------- */
.hr-root .hr-nav{
  flex:none;width:100%;max-width:1500px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.hr-root .hr-cue{
  display:flex;align-items:center;gap:12px;white-space:nowrap;
  font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#806893;
}
.hr-root .hr-cue>span{font-size:17px;line-height:1}
.hr-root .hr-tabs{display:flex;gap:10px;width:min(700px,62%)}
.hr-root .hr-tabs button{
  position:relative;flex:1;min-width:0;
  border:1px solid transparent;border-radius:12px;background:none;
  padding:12px 18px;text-align:left;
  font:inherit;font-size:14px;font-weight:550;letter-spacing:-.02em;color:#796488;
  cursor:pointer;overflow:hidden;
  transition:background .3s,border-color .3s,color .3s;
}
.hr-root .hr-tabs button.is-on{background:#fff;border-color:#e8dfef;color:#5b2b90;box-shadow:0 7px 20px #40245d0d}
.hr-root .hr-tabs button i{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#9670d4,#d19be3);
  transform:scaleX(0);transform-origin:left;transition:transform .08s linear;
}
.hr-root .hr-tabs button:focus-visible{outline:3px solid #c192ff;outline-offset:3px}
.hr-root .hr-count{
  font-size:15px;color:#745b8f;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.hr-root .hr-count i{font-style:normal;font-size:12px;color:#b1a4bb;margin-left:5px}

/* ---------- scroll-scrubbed hand-off (class set by hero.js) ---------- */
.hr-root.hr-scrub .hr-ch{
  visibility:visible;opacity:1;transition:none;pointer-events:none;
  transform:translateX(calc(var(--in,0) * 104%)) translateY(calc(var(--out,0) * -6px)) scale(calc(1 - var(--out,0) * .035));
  filter:brightness(calc(1 - var(--out,0) * .12));
}
.hr-root.hr-scrub .hr-ch.is-active{pointer-events:auto}
.hr-root.hr-scrub .hr-tabs button i{transition:none}

/* content-level morph riding on top of the slide: the word and the visual
   dissolve, blur and settle as their chapter arrives or leaves, so the
   hand-off reads as one thing becoming the next rather than a hard cut. */
.hr-root.hr-scrub .hr-word span{
  transition:none;
  opacity:calc(1 - var(--m,0));
  filter:blur(calc(var(--m,0) * 7px));
  transform:translateY(calc(var(--m,0) * 12px)) scale(calc(1 - var(--m,0) * .07));
}
.hr-root.hr-scrub .hr-sub,
.hr-root.hr-scrub .hr-vis{
  transition:none;
  opacity:calc(1 - var(--m,0));
  filter:blur(calc(var(--m,0) * 9px));
  transform:scale(calc(1 - var(--m,0) * .045));
}
/* the discrete "type-in" keyframes are for the static/reduced-motion layout
   (below); in scrub mode the continuous --m morph above replaces them, so
   they're switched off here to stop a fixed-duration animation fighting a
   scroll-scrubbed one. */
.hr-root.hr-scrub .hr-ch.is-active .hr-word span,
.hr-root.hr-scrub .hr-ch.is-active .hr-sub>span,
.hr-root.hr-scrub .hr-ch.is-active .hr-shot,
.hr-root.hr-scrub .hr-ch.is-active .hr-cal,
.hr-root.hr-scrub .hr-ch.is-active .hr-line,
.hr-root.hr-scrub .hr-ch.is-active .hr-card,
.hr-root.hr-scrub .hr-ch.is-active .hr-row,
.hr-root.hr-scrub .hr-ch.is-active .hr-ads-src,
.hr-root.hr-scrub .hr-ch.is-active .hr-ad,
.hr-root.hr-scrub .hr-ch.is-active .hr-ad-copy,
.hr-root.hr-scrub .hr-ch.is-active .hr-tag{
  animation:none;
}

/* shared-element morph: the one decoded creative crossing, frame by frame,
   from the big shot into each chapter's mini thumbnail. Hidden by default;
   hero.js only gives it size/position/opacity during a hand-off. */
.hr-root .hr-morph-ghost{
  position:absolute;left:0;top:0;width:0;height:0;
  border-radius:16px;overflow:hidden;opacity:0;
  pointer-events:none;z-index:5;
  box-shadow:0 20px 46px -18px #05020c8c;
}
.hr-root .hr-morph-ghost img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}

/* preview helper: ?ch=n pins one chapter with no scroll driving */
.hr-root.hr-static{height:auto}
.hr-root.hr-static .hr-pin{position:relative;height:min(1000px,100svh)}

/* ---------- short / wide-but-short screens ---------- */
@media(min-width:761px) and (max-height:830px){
  .hr-root .hr-pin{padding-top:calc(76px + 18px)}
  .hr-root .hr-word{font-size:clamp(38px,4.4vw,58px)}
  .hr-root .hr-sub{font-size:19px}
  .hr-root .hr-chip{font-size:11.5px;padding:7px 11px}
  .hr-root .hr-verdict{font-size:13px}
  .hr-root .hr-row{padding:10px 13px}
}

/* ---------- phone ---------- */
@media(max-width:760px){
  .hr-root .hr-pin{padding:calc(62px + 16px) 5vw 14px;gap:14px}
  .hr-root .hr-deck{border-radius:22px;max-height:none}
  .hr-root .hr-ch{grid-template-columns:1fr;grid-template-rows:auto 1fr;border-radius:22px}
  .hr-root .hr-copy{padding:22px 22px 4px;justify-content:flex-start}
  .hr-root .hr-word{font-size:38px}
  .hr-root .hr-sub{font-size:15px;max-width:22ch;margin-top:10px}
  .hr-root .hr-vis{padding:16px 14px 20px}

  .hr-root .hr-shot{max-width:100%}
  .hr-root .hr-cal-l{width:auto;right:auto;left:8px}
  .hr-root .hr-cal-r{left:auto;right:8px}
  .hr-root .hr-line{display:none}
  .hr-root .hr-chip{max-width:148px;font-size:10.5px;padding:6px 9px;border-radius:9px;background:#241c2eec}
  .hr-root .hr-chip i{font-size:8px;margin-bottom:2px}
  .hr-root .hr-cal-l .hr-chip{text-align:left}

  .hr-root .hr-card{width:100%;padding:16px;border-radius:16px}
  .hr-root .hr-rows{gap:11px}
  .hr-root .hr-row{padding:14px 13px;gap:11px}
  .hr-root .hr-dim{width:56px;font-size:9px}
  .hr-root .hr-verdict{font-size:13.5px}
  .hr-root .hr-card-top{padding-bottom:9px;margin-bottom:9px;flex-wrap:wrap;gap:7px 12px}
  .hr-root .hr-card-src-label{font-size:10px}
  .hr-root .hr-card-src-shot{width:22px;height:27px}

  /* three ads no longer fit legibly side by side at this width — a snap
     carousel keeps each ad readable as a real ad instead of a stamp */
  .hr-root .hr-create .hr-vis{gap:10px}
  .hr-root .hr-ads-src{padding:5px 13px 5px 5px}
  .hr-root .hr-ads-src-shot{width:22px;height:27px}
  .hr-root .hr-ads-src-label{font-size:10.5px}
  .hr-root .hr-ads{
    width:100%;flex:1 1 auto;justify-content:flex-start;align-items:stretch;
    gap:12px;padding:16px 16vw 8px 4px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:4px;
    -webkit-overflow-scrolling:touch;
  }
  .hr-root .hr-ads::-webkit-scrollbar{display:none}
  .hr-root .hr-ad-a,.hr-root .hr-ad-b,.hr-root .hr-ad-c{--rot:0deg}
  .hr-root .hr-ad{
    width:auto;height:100%;max-height:100%;flex:none;margin:0;
    scroll-snap-align:start;
  }
  .hr-root .hr-ad-a .hr-tag,.hr-root .hr-ad-c .hr-tag{left:0;right:auto;transform:none}
  .hr-root .hr-ad-brand{font-size:11px}
  .hr-root .hr-ad-head{font-size:14px}
  .hr-root .hr-ad-cta{font-size:10px}
  .hr-root .hr-tag{font-size:9.5px;padding:5px 9px 5px 7px;gap:5px;bottom:-11px;letter-spacing:-.01em;
    white-space:nowrap;max-width:none;border-radius:9px}
  .hr-root .hr-tag::before{width:5px;height:5px}
  .hr-root .hr-tag-2{top:-9px;bottom:auto}
  .hr-root .hr-morph-ghost{display:none}

  .hr-root .hr-nav{gap:10px}
  .hr-root .hr-cue,.hr-root .hr-count{display:none}
  .hr-root .hr-tabs{width:100%;gap:5px}
  .hr-root .hr-tabs button{padding:10px 8px;font-size:12px;text-align:center}
}

/* ---------- short viewports (any width): STAY pinned. Screen size never
   drops the hero into normal flow — only prefers-reduced-motion (below)
   does. Compress paddings/type further and let a panel's visual column
   scroll internally as a last resort, aligned to the top so any overflow
   hangs off the bottom (reachable) rather than being centered off both
   edges (half unreachable). ---------- */
@media(max-height:700px){
  .hr-root .hr-pin{padding:calc(62px + 10px) 5vw 10px;gap:8px}
  .hr-root .hr-deck{border-radius:18px}
  .hr-root .hr-copy{padding:16px 20px 4px}
  .hr-root .hr-word{font-size:clamp(24px,5.4vh,40px)}
  .hr-root .hr-sub{font-size:clamp(12px,2vh,15px);margin-top:6px}
  .hr-root .hr-vis{padding:8px 10px 12px;align-items:start;overflow-y:auto}
  .hr-root .hr-chip{font-size:10.5px;padding:6px 9px}
  .hr-root .hr-card{padding:12px 14px}
  .hr-root .hr-card-top{padding-bottom:7px;margin-bottom:7px}
  .hr-root .hr-rows{gap:6px}
  .hr-root .hr-row{padding:8px 11px;gap:9px}
  .hr-root .hr-verdict{font-size:12px}
  .hr-root .hr-dim{font-size:8.5px;width:50px}
  .hr-root .hr-ads-src{padding:4px 12px 4px 4px}
  .hr-root .hr-tag{font-size:9px;padding:4px 8px 4px 6px}
  .hr-root .hr-cue{font-size:9px}
  .hr-root .hr-tabs button{padding:8px 10px;font-size:12px}
  .hr-root .hr-count{font-size:12px}
}

/* ---------- reduced motion: the genuine non-animated fallback, three
   chapters in normal flow. This is gated on the OS preference only — a
   short or narrow viewport must never trigger it. ---------- */
@media(prefers-reduced-motion:reduce){
  .hero.hr-root{height:auto}
  .hr-root .hr-pin{position:relative;height:auto;overflow:visible;display:block;padding:calc(76px + 40px) 5vw 40px}
  .hr-root .hr-deck{height:auto;max-height:none;background:transparent;box-shadow:none;display:grid;gap:24px;overflow:visible}
  .hr-root .hr-ch,.hr-root .hr-ch.is-active{
    position:relative;inset:auto;opacity:1;visibility:visible;pointer-events:auto;
    transform:none;filter:none;min-height:480px;scroll-margin-top:90px;
  }
  .hr-root .hr-nav{display:none}
  .hr-root.hr-scrub .hr-ch{transform:none;filter:none}
  .hr-root .hr-morph-ghost{display:none}
  .hr-root .hr-ch,.hr-root .hr-ch *{animation:none!important;transition:none!important}
}