/* =====================================================================
   THE HERO ACADEMY — bespoke series microsite
   Origin: the sunrise title card — a caped young hero before the world.
   Bright, hopeful, heroic: sky blue, sunrise gold/orange, clean light
   panels, shield/badge motifs. A deliberately uplifting, kid-and-parent
   friendly counterpoint to the dark fantasy series.
   ===================================================================== */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/fraunces-400-italic.woff2') format('woff2');}

body[data-page="hero-academy"]{
  --sky:#eef4fc; --paper:#ffffff; --ink:#16233a; --muted:#566884; --line:rgba(20,40,70,.12);
  --blue:#2f6fd0; --blue-2:#5aa9f0; --gold:#e0a32a; --sun:#f0843c; --indigo:#15213b;
  --sans:'Archivo',system-ui,sans-serif; --serif:'Fraunces',Georgia,serif;
  background:var(--sky); color:var(--ink); padding-top:var(--nav-h); font-family:var(--sans);
  line-height:1.7; overflow-x:hidden;
}
.ha{max-width:1140px;margin-inline:auto;padding-inline:clamp(18px,4vw,44px)}
.ha-narrow{max-width:740px}
body[data-page="hero-academy"] h1,body[data-page="hero-academy"] h2,body[data-page="hero-academy"] h3{font-weight:800;letter-spacing:-.01em;line-height:1.05}
.ha-kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;color:var(--blue);font-weight:700}
.ha-em{color:var(--sun)}

/* ---- HERO ---------------------------------------------------------- */
.ha-hero{position:relative;min-height:min(80vh,720px);display:flex;align-items:flex-end;overflow:hidden}
.ha-hero .bg{position:absolute;inset:0;z-index:-1}
.ha-hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.ha-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--indigo) 3%,rgba(21,33,59,.55) 40%,transparent 80%)}
.ha-hero .inner{position:relative;z-index:1;padding-block:clamp(34px,6vw,70px);color:#fff;max-width:680px}
.ha-hero .crumb a{color:var(--gold);font-weight:700;font-size:.85rem}
.ha-hero .ha-kicker{color:var(--blue-2)}
.ha-hero h1{font-size:clamp(2.4rem,7vw,5rem);margin:.4rem 0 .4rem;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.ha-hero p.lede{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.7rem);color:#fbe7c8;max-width:30ch}
.ha-hero .cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.btn-hero{display:inline-flex;align-items:center;gap:.5em;background:linear-gradient(180deg,var(--gold),var(--sun));color:#231202;font-weight:800;
  padding:.95em 1.7em;border-radius:999px;box-shadow:0 14px 40px -14px rgba(240,132,60,.7);transition:transform .18s,box-shadow .18s}
.btn-hero:hover{transform:translateY(-2px);box-shadow:0 22px 54px -16px rgba(240,132,60,.9)}
.btn-sky{display:inline-flex;align-items:center;gap:.5em;border:1.5px solid rgba(255,255,255,.5);color:#fff;font-weight:700;padding:.95em 1.6em;border-radius:999px;transition:.18s}
.btn-sky:hover{border-color:var(--gold);color:var(--gold)}

/* ---- PREMISE ------------------------------------------------------- */
.ha-premise{padding:clamp(52px,7vw,104px) 0;text-align:center}
.ha-premise h2{font-size:clamp(1.9rem,4.4vw,3rem);margin:.8rem auto;max-width:20ch}
.ha-premise p{color:var(--muted);max-width:60ch;margin:0 auto;font-size:1.1rem}

/* ---- THE JOURNEY (3 steps) ----------------------------------------- */
.ha-journey{padding:clamp(52px,7vw,104px) 0;background:linear-gradient(180deg,#fff,var(--sky))}
.ha-head{text-align:center;max-width:680px;margin:0 auto clamp(28px,4vw,48px)}
.ha-head h2{font-size:clamp(2rem,4.4vw,3rem);margin:.6rem 0}
.ha-head p{color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px);counter-reset:step}
@media(max-width:720px){.steps{grid-template-columns:1fr}}
.step{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:clamp(24px,3vw,34px);position:relative;box-shadow:0 16px 40px -28px rgba(20,40,70,.4)}
.step .n{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(180deg,var(--blue-2),var(--blue));margin-bottom:1rem}
.step h3{font-size:1.25rem;margin-bottom:.4rem}
.step .bk{font-family:var(--sans);font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);font-weight:700;margin-bottom:.5rem}
.step p{color:var(--muted);font-size:.95rem}

/* ---- HERO TOOLS (badge cards) -------------------------------------- */
.ha-tools{padding:clamp(52px,7vw,104px) 0}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px)}
@media(max-width:820px){.tool-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tool-grid{grid-template-columns:1fr}}
.tool{display:flex;gap:1rem;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:clamp(16px,2vw,22px);transition:transform .25s,box-shadow .25s}
.tool:hover{transform:translateY(-4px);box-shadow:0 18px 40px -26px rgba(47,111,208,.6)}
.tool .badge{flex-shrink:0;width:42px;height:46px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.05rem;
  background:linear-gradient(180deg,var(--gold),var(--sun));clip-path:polygon(50% 0,100% 0,100% 70%,50% 100%,0 70%,0 0)}
.tool h3{font-size:1.02rem;margin-bottom:.2rem}
.tool p{color:var(--muted);font-size:.86rem}

/* ---- BOOKS --------------------------------------------------------- */
.ha-books{padding:clamp(52px,7vw,104px) 0;background:linear-gradient(180deg,#fff,var(--sky))}
.ha-shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,28px)}
@media(max-width:820px){.ha-shelf{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.ha-shelf{grid-template-columns:1fr;max-width:320px;margin-inline:auto}}
.ha-book{text-align:center}
.ha-book .cv{border-radius:10px;overflow:hidden;box-shadow:0 18px 40px -22px rgba(20,40,70,.6);aspect-ratio:2/3;transition:transform .3s}
.ha-book:hover .cv{transform:translateY(-6px)}
.ha-book .cv img{width:100%;height:100%;object-fit:cover}
.ha-book .num{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--blue);font-weight:700;margin-top:.9rem}
.ha-book h3{font-size:1.08rem;margin:.2rem 0 .4rem}
.ha-book .badge2{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3em .7em;border-radius:999px}
.ha-book .badge2.live{background:var(--blue);color:#fff}
.ha-book .badge2.soon{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.ha-book .amz{display:block;margin-top:.6rem;font-weight:700;font-size:.84rem;color:var(--blue)}
.ha-book .amz:hover{color:var(--sun)}

/* ---- PARENTS / CTA ------------------------------------------------- */
.ha-parents{padding:clamp(52px,7vw,104px) 0}
.ha-parents .box{background:linear-gradient(135deg,var(--indigo),#22325a);color:#fff;border-radius:22px;padding:clamp(28px,4vw,52px);text-align:center}
.ha-parents h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:.6rem}
.ha-parents p{color:#cdd8ee;max-width:56ch;margin:0 auto 1.6rem}
.ha-cta{padding:clamp(56px,8vw,120px) 0;text-align:center}
.ha-cta h2{font-size:clamp(2rem,5vw,3.2rem);margin:1rem 0}
.ha-cta p{color:var(--muted);max-width:48ch;margin:0 auto 2rem}
.ha-cta .cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}