/* Reports hero — maps the prototype's shorthand tokens onto the app @theme tokens; always-dark band, theme-aware lightbox */
.rh-band{
  --p200:var(--color-primary-200);--p300:var(--color-primary-300);--p400:var(--color-primary-400);
  --p500:var(--color-primary-500);--p600:var(--color-primary-600);--p700:var(--color-primary-700);
  --ink:var(--color-surface-900);--ink-soft:color-mix(in srgb,var(--color-surface-900) 62%,transparent);
  --card:#fff;--line:var(--color-surface-200);--cream:var(--color-surface-100);
}
.dark .rh-band{
  --ink:var(--color-surface-50);--ink-soft:color-mix(in srgb,var(--color-surface-50) 72%,transparent);
  --card:var(--color-surface-800);--line:var(--color-surface-700);--cream:var(--color-surface-900);
}
.rh-wrap{max-width:1180px;margin:0 auto;padding:0 24px;width:100%}

.rh-band{position:relative;isolation:isolate;background:#0b1018;color:#fff;overflow:hidden;padding:0}
/* full-bleed atmospheric background for the WHOLE section */
/* decorative atmospheric glow — a CSS background (no <img>) so it carries no alt obligation */
.rh-photo{position:absolute;inset:0;z-index:0;overflow:hidden;background-image:url('/images/reports/_hero/backdrop-glow.webp');background-size:cover;background-position:70% 50%}
/* scrim — darken the LEFT for text legibility; let the glow on the right read through */
.rh-band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0b1018 0%,rgba(11,16,24,.92) 25%,rgba(11,16,24,.5) 45%,rgba(11,16,24,.08) 66%,transparent 88%)}
.rh-stage{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(16px,3vw,46px);align-items:center;min-height:clamp(430px,46vw,560px)}

/* left text column */
.rh-copy{position:relative;z-index:3;grid-column:1;grid-row:1;align-self:center;max-width:28rem;padding:clamp(36px,6vw,72px) 0}
/* the swappable text group fades as one */
.rh-swap{transition:opacity .34s ease,transform .34s ease;will-change:opacity,transform}
.rh-band.is-swapping .rh-swap{opacity:0;transform:translateY(10px)}

.rh-tag{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:1.05rem;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#0c111c;background:linear-gradient(135deg,var(--p400),var(--p600));padding:.3rem .65rem;border-radius:999px;box-shadow:0 4px 16px rgba(var(--shadow-tint),.45)}
.rh-eyebrow{color:var(--p300);display:inline-flex;align-items:center;gap:.55rem;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.rh-eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--p400),transparent);flex:none}
.rh-h{font-family:var(--font-family-serif);font-weight:400;letter-spacing:-.8px;line-height:1.08;font-size:clamp(1.95rem,4.2vw,3.05rem);margin:.55rem 0 0;color:#fff;text-wrap:balance;min-height:2.2em}
.rh-h em{font-style:italic;color:var(--p300)}
.rh-sub{margin:1.1rem 0 0;max-width:25rem;font-size:1.02rem;line-height:1.6;color:rgba(233,240,250,.74)}

.rh-act{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;margin-top:1.85rem}
.rh-price{font-family:var(--font-family-serif);font-size:1.5rem;color:#fff;white-space:nowrap;line-height:1.1}
.rh-price small{display:block;font-family:var(--font-family-sans);font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(233,240,250,.55);margin-top:2px}
.rh-cta{min-width:11.5rem}
.rh-inside{display:inline-flex;align-items:center;gap:.45rem;background:none;border:0;font-family:inherit;padding:0;font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--p300);transition:gap .2s;cursor:pointer}
.rh-inside svg{transition:transform .2s}
.rh-inside:hover{gap:.7rem}.rh-inside:hover svg{transform:translateX(3px)}
.rh-pro{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.45rem;font-size:.8rem;color:rgba(233,240,250,.62)}
.rh-pro b{color:var(--p300);font-weight:700}
.rh-pro svg{width:15px;height:15px;color:var(--p400);flex:none}

/* the cover presentation — a BOOK (cover + page thickness) with interior pages peeking out, lit by its own halo.
   Position is the only thing that changes per breakpoint; the halo is centred on the book so it's "placed" correctly everywhere. */
.rh-float{position:absolute;z-index:3;left:67%;top:50%;width:clamp(186px,19.5vw,262px);transform:translate(-50%,-50%);transition:transform .25s ease-out}
/* warm glow halo centred on the book — keeps it lit & centred on ITSELF on every layout */
.rh-float::before{content:"";position:absolute;left:48%;top:49%;width:206%;height:158%;transform:translate(-50%,-50%);z-index:-2;background:radial-gradient(ellipse at center,rgba(249,162,78,.52),rgba(244,138,58,.18) 40%,transparent 68%);filter:blur(22px);pointer-events:none}
.rh-floatwrap{position:relative;transition:opacity .34s ease,transform .34s ease;will-change:opacity,transform}
.rh-band.is-swapping .rh-floatwrap{opacity:0;transform:translateY(12px) scale(.97)}

/* interior pages peeking from behind the book, to the right */
.rh-leaf{position:absolute;width:82%;border-radius:4px 7px 7px 4px;overflow:hidden;background:#fff;box-shadow:0 16px 30px -16px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.05)}
.rh-leaf img{display:block;width:100%;height:auto}
.rh-leaf1{top:11%;right:-20%;z-index:1;transform:rotate(6.5deg)}
.rh-leaf2{top:5%;right:-34%;z-index:0;transform:rotate(13deg)}

/* the book: the cover with a cream page-block edge for real thickness */
.rh-book{position:relative;z-index:2;display:block}
.rh-cover{position:relative;display:block;border-radius:8px}
.rh-cover img{display:block;width:100%;border-radius:8px;box-shadow:
  3px 1px 0 #f3ead8, 6px 2px 0 #e9dcc4, 9px 3px 0 #ddceb0, 12px 5px 0 #d2c2a0,
  -1px 0 0 rgba(0,0,0,.22),
  0 16px 28px -14px rgba(0,0,0,.6), 0 46px 66px -30px rgba(0,0,0,.85)}
.rh-cover::after{content:"";position:absolute;inset:0;border-radius:8px;background:linear-gradient(125deg,rgba(255,255,255,.34),transparent 38%);pointer-events:none}
.rh-foil{position:absolute;top:-11px;right:-12px;z-index:6;font-size:.58rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#3a2a12;background:linear-gradient(135deg,#fde9c8,var(--p400) 55%,var(--p600));padding:.32rem .6rem;border-radius:999px;box-shadow:0 8px 22px rgba(var(--shadow-tint),.5),inset 0 1px 0 rgba(255,255,255,.5);white-space:nowrap}
.rh-ribbon{position:absolute;left:-11px;bottom:13px;z-index:6;display:inline-flex;align-items:center;gap:.32rem;font-size:.54rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#0c111c;background:linear-gradient(135deg,#fff,#f1e6d4);padding:.3rem .54rem;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.7)}
.rh-ribbon svg{width:11px;height:11px;color:var(--p600)}

/* selector rail */
.rh-rail{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.36))}
.rh-railin{display:flex;align-items:center;gap:clamp(18px,2.6vw,34px);padding:clamp(22px,3vw,30px) 0}
.rh-raillab{flex:none;max-width:9.5rem}
.rh-raillab .e{font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--p300);display:block}
.rh-raillab .t{font-family:var(--font-family-serif);font-size:1.08rem;line-height:1.25;color:#fff;margin-top:.35rem;display:block}

.rh-pick{display:flex;gap:clamp(12px,1.6vw,18px);flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:4px 2px 8px;scroll-snap-type:x mandatory}
.rh-pick::-webkit-scrollbar{display:none}
.rh-chip{flex:1 1 0;min-width:148px;scroll-snap-align:start;display:flex;align-items:center;gap:.7rem;text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:13px;padding:.55rem .7rem;cursor:pointer;color:#fff;font-family:inherit;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;position:relative}
.rh-chip:hover{transform:translateY(-3px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.rh-chip:focus-visible{outline:2px solid var(--p400);outline-offset:2px}
.rh-chip .thumb{flex:none;width:42px;border-radius:6px;overflow:hidden;box-shadow:0 8px 18px -8px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.rh-chip .thumb img{width:100%;aspect-ratio:826/1169;object-fit:cover;display:block}
.rh-chip .meta{min-width:0;display:flex;flex-direction:column;gap:1px}
.rh-chip .nm{font-family:var(--font-family-serif);font-size:.86rem;line-height:1.18;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rh-chip .pr{font-size:.74rem;font-weight:600;color:rgba(233,240,250,.6)}
.rh-chip .pr b{color:var(--p300);font-weight:700;font-family:var(--font-family-serif)}
.rh-chip[aria-pressed="true"]{background:rgba(var(--shadow-tint),.18);border-color:transparent;box-shadow:0 0 0 2px var(--p400),0 12px 28px -12px rgba(var(--shadow-tint),.6)}
.rh-chip[aria-pressed="true"] .pr{color:rgba(255,255,255,.78)}
.rh-chip .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:999px;background:var(--p400);opacity:0;transform:scale(.4);transition:opacity .2s,transform .2s}
.rh-chip[aria-pressed="true"] .dot{opacity:1;transform:scale(1)}

.rh-browse{flex:none;display:inline-flex;align-items:center;gap:.5rem;font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--p300);padding-left:clamp(6px,1vw,12px)}
.rh-browse svg{transition:transform .2s}.rh-browse:hover svg{transform:translateX(4px)}

/* "see what's inside" lightbox */
.rh-lb{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:clamp(14px,3vw,30px)}
.rh-lb[hidden]{display:none}
.rh-lb-scrim{position:absolute;inset:0;background:rgba(8,11,18,.8);backdrop-filter:blur(7px);animation:o6fade .25s ease}
.rh-lb-panel{position:relative;z-index:1;width:min(960px,100%);max-height:90vh;overflow:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,3vw,34px);box-shadow:0 40px 110px rgba(0,0,0,.55);animation:o6pop .28s cubic-bezier(.2,.9,.3,1)}
.rh-lb-x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);cursor:pointer;transition:.18s;z-index:2}
.rh-lb-x:hover{color:var(--ink);border-color:var(--p400)}
.rh-lb-head{max-width:46ch;margin-bottom:clamp(14px,2vw,20px);padding-right:40px}
.rh-lb-head .eyebrow{display:block}
.rh-lb-head p{margin:.45rem 0 0;color:var(--ink-soft);font-size:.96rem}
.rh-lb-pages{display:flex;gap:clamp(12px,1.6vw,18px);overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory}
.rh-lb-pages::-webkit-scrollbar{height:8px}.rh-lb-pages::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.rh-lb-pages img{flex:none;height:clamp(280px,44vh,440px);width:auto;border-radius:9px;scroll-snap-align:center;box-shadow:0 18px 40px -18px rgba(0,0,0,.5),0 0 0 1px var(--line);background:#fff}
.rh-lb-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(12px,2vw,18px);padding-top:clamp(12px,2vw,18px);border-top:1px solid var(--line)}
.rh-lb-note{font-size:.84rem;color:var(--ink-soft);max-width:36ch}
@keyframes o6fade{from{opacity:0}to{opacity:1}}
@keyframes o6pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:560px){.rh-lb-foot{flex-direction:column;align-items:stretch}.rh-lb-foot .btn-gold{text-align:center;justify-content:center}}

@media(prefers-reduced-motion:reduce){
 .rh-swap,.rh-floatwrap,.rh-photo .rh-pimg,.rh-float{transition:opacity .12s ease}
 .rh-band.is-swapping .rh-swap,.rh-band.is-swapping .rh-floatwrap{transform:none}
}

@media(max-width:960px){
 .rh-chip{min-width:140px}
}

@media(max-width:900px){
 /* tablet + mobile: stack and CENTRE — the book sits centred in its own halo, text centred below. No hard right-placement. */
 .rh-stage{display:flex;flex-direction:column;align-items:center;min-height:0}
 .rh-photo{background-position:60% 22%}
 /* scrim now darkens the BOTTOM (behind the text) instead of the left */
 .rh-band::after{background:linear-gradient(180deg,transparent 0%,rgba(11,16,24,.1) 28%,rgba(11,16,24,.82) 52%,#0b1018 72%)}
 .rh-float{order:-1;position:relative;left:auto;top:auto;transform:translateX(-7%);margin:clamp(18px,4vw,30px) auto clamp(22px,5vw,32px);width:clamp(184px,40vw,248px)}
 .rh-copy{max-width:34rem;margin:0 auto;padding:0 22px 30px;text-align:center}
 .rh-eyebrow{justify-content:center}
 .rh-eyebrow::before{display:none}
 .rh-h{font-size:clamp(1.72rem,7.6vw,2.3rem);min-height:0}
 .rh-sub{margin-left:auto;margin-right:auto}
 .rh-act{justify-content:center;gap:1rem 1.3rem;margin-top:1.5rem}
 .rh-pro{justify-content:center;text-align:left}
 .rh-cta{min-width:0;flex:1 1 100%;max-width:20rem;margin:0 auto}
 /* selector becomes a snap strip */
 .rh-railin{flex-direction:column;align-items:stretch;gap:14px}
 .rh-raillab{max-width:none;text-align:center}
 .rh-pick{padding-bottom:10px;gap:12px}
 .rh-chip{flex:none;min-width:172px}
 .rh-browse{align-self:center;padding-left:0;margin-top:2px}
}

@media(max-width:420px){
 .rh-chip{min-width:158px}
 .rh-h{font-size:clamp(1.6rem,8vw,2rem)}
}


/* CTAs (self-contained so the hero doesn't depend on app button classes) */
.rh-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;border:0;border-radius:10px;font-family:inherit;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;font-size:.74rem;padding:.82rem 1.5rem;background:linear-gradient(135deg,var(--p500),var(--p700));color:#fff;box-shadow:0 2px 12px rgba(var(--shadow-tint),.28);text-decoration:none;min-width:11.5rem;transition:transform .25s,box-shadow .25s}
.rh-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(var(--shadow-tint),.38)}
.rh-lb-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;font-size:.72rem;padding:.8rem 1.4rem;background:linear-gradient(135deg,var(--p500),var(--p700));color:#fff;box-shadow:0 2px 12px rgba(var(--shadow-tint),.28);text-decoration:none;white-space:nowrap}
.rh-lb-cta:hover{filter:brightness(1.05)}