/* Media Pillars — 24-Hour Website band + animated build stage
   Loaded only on pages that use it. Animations start when the block gets .in (site.js reveal). */
.r24{position:relative;overflow:hidden;background:
  radial-gradient(900px 420px at 85% -10%,rgba(25,184,255,.22),transparent 60%),
  radial-gradient(700px 400px at 0% 110%,rgba(10,111,209,.28),transparent 60%),
  linear-gradient(180deg,var(--navy-2),var(--navy));color:#e7eef8}
.r24 h2,.r24 h3{color:#fff}
.r24 p.lead{color:#b8c6d9}
.r24 .grid-lines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 75%)}
.r24 .wrap{position:relative}
.r24 .split{align-items:center}
.r24 .first{display:inline-flex;align-items:center;gap:.6rem;font-size:.8125rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);background:linear-gradient(90deg,var(--neon),var(--neon-2));padding:.4rem .9rem;border-radius:999px;margin-bottom:1.1rem;box-shadow:var(--glow)}
.r24 .first .pulse{background:var(--navy);box-shadow:none;animation:none;width:7px;height:7px}
.r24 h2{font-size:clamp(1.8rem,3.6vw,2.9rem);max-width:16ch}
.r24 h2 em{font-style:normal;color:var(--neon);white-space:nowrap}
.r24 .checks li::before{background-color:var(--neon)}
.r24 .checks{font-size:.98rem;margin:1.4rem 0}
.r24 .fine{font-size:.875rem;color:#a9bbd3;max-width:52ch;margin-top:1rem}
.r24 .split>.fine{grid-column:1/-1;max-width:none;margin-top:.5rem;columns:2;column-gap:2.5rem}
@media(max-width:899px){.r24 .split>.fine{columns:1}}
@media(min-width:900px){.r24 .split{grid-template-columns:.9fr 1.1fr}}
.r24 .fine b{color:#fff}
.r24 .btn.ghost{--b:rgba(255,255,255,.35);color:#fff}
.r24 .btn.ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.r24 .pricepill{display:inline-flex;align-items:baseline;gap:.45rem;margin:.25rem 0 1.25rem;font-family:var(--display);font-weight:700;font-size:1.35rem;color:#fff}
.r24 .pricepill small{font:600 .875rem var(--body);color:#a9bbd3}

/* ---------- Stage ---------- */
.r24-stage{position:relative;display:grid;gap:1rem;grid-template-columns:120px 1fr;grid-template-rows:auto auto;align-items:center;padding:1.25rem;border-radius:var(--r3);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06)}
@media(min-width:520px){.r24-stage{grid-template-columns:150px 1fr;padding:1.5rem}}
.r24-clock{position:relative;width:100%;aspect-ratio:1;grid-row:1}
.r24-clock svg{width:100%;height:100%;overflow:visible}
.r24-clock .track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:6}
.r24-clock .arc{fill:none;stroke:url(#r24g);stroke-width:6;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transform:rotate(-90deg);transform-origin:50% 50%;filter:drop-shadow(0 0 6px rgba(25,184,255,.7))}
.r24-clock .tick{stroke:rgba(255,255,255,.28);stroke-width:2;stroke-linecap:round}
.r24-clock .hand{stroke:#fff;stroke-width:3.5;stroke-linecap:round;transform-origin:50% 50%}
.r24-clock .hub{fill:#fff}
.r24-hours{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--display);line-height:1}
.r24-hours b{display:block;font-size:clamp(1.6rem,4vw,2rem);font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.r24-hours span{font:700 .6rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:#a9bbd3;margin-top:.3rem}

/* browser mockup that assembles itself */
.r24-site{position:relative;grid-row:1;border-radius:12px;background:#0b1830;border:1px solid rgba(255,255,255,.14);overflow:hidden;aspect-ratio:16/10;box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
.r24-site .bar{height:16px;background:rgba(255,255,255,.08);display:flex;align-items:center;gap:4px;padding:0 7px}
.r24-site .bar i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35)}
.r24-site .bar u{margin-left:6px;height:6px;flex:1;border-radius:3px;background:rgba(255,255,255,.12);text-decoration:none}
.r24-site .pg{position:absolute;inset:16px 0 0;padding:6% 6%;display:grid;gap:5%;grid-template-rows:auto 1fr auto}
.r24-site .blk{border-radius:4px;background:rgba(255,255,255,.14);opacity:0;transform:translateY(10px) scale(.98)}
.r24-site .hb{background:linear-gradient(135deg,rgba(25,184,255,.75),rgba(10,111,209,.6));padding:8% 8%;display:grid;gap:8%;overflow:hidden}
.r24-site .hb i{display:block;height:9%;min-height:5px;border-radius:3px;background:rgba(255,255,255,.9);width:58%}
.r24-site .hb i+i{width:38%;opacity:.7}
.r24-site .hb em{display:block;width:34%;height:14%;min-height:7px;border-radius:3px;background:#fff;margin-top:auto;box-shadow:0 0 12px rgba(255,255,255,.6)}
.r24-site .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:5%;background:none;opacity:1;transform:none}
.r24-site .cards .blk{aspect-ratio:1.1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);padding:12%;display:grid;align-content:end;gap:10%}
.r24-site .cards .blk i{display:block;height:5px;border-radius:2px;background:rgba(255,255,255,.55)}
.r24-site .cards .blk i:first-child{width:40%;height:7px;background:var(--neon)}
.r24-site .foot{height:10%;min-height:8px;background:rgba(255,255,255,.07)}
.r24-site .scan{position:absolute;left:0;right:0;top:16px;height:2px;background:linear-gradient(90deg,transparent,var(--neon-2),transparent);opacity:0;filter:drop-shadow(0 0 6px var(--neon))}
.r24-site .chips{z-index:2;position:absolute;right:5%;bottom:6%;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.r24-site .chips span{font:800 .6rem var(--body);letter-spacing:.04em;color:var(--navy);background:var(--neon-2);padding:.18rem .45rem;border-radius:999px;opacity:0;transform:translateX(12px);box-shadow:0 0 12px rgba(25,184,255,.6)}
.r24-site .live{position:absolute;inset:0;display:grid;place-items:center;background:rgba(7,20,38,.38);opacity:0;pointer-events:none}
.r24-site .live b{display:inline-flex;align-items:center;gap:.5rem;font:800 clamp(.95rem,2.4vw,1.25rem) var(--display);letter-spacing:.08em;color:var(--navy);background:linear-gradient(90deg,var(--neon),var(--neon-2));padding:.55rem 1rem;border-radius:999px;box-shadow:0 0 0 1px rgba(25,184,255,.6),0 0 40px rgba(25,184,255,.7);transform:scale(.6)}
.r24-site .live b i{width:9px;height:9px;border-radius:50%;background:var(--navy);animation:pulse 1.4s infinite}
.r24-site .speed{z-index:2;position:absolute;left:5%;bottom:6%;display:inline-flex;align-items:center;gap:.4rem;font:800 .7rem var(--body);color:#fff;background:rgba(7,20,38,.85);border:1px solid rgba(25,184,255,.5);padding:.3rem .55rem;border-radius:999px;opacity:0;transform:translateY(8px)}
.r24-site .speed b{color:var(--neon);font-family:var(--display)}

/* timeline under the stage */
.r24-line{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(6,1fr);gap:.35rem;position:relative;padding-top:.9rem}
.r24-line::before{content:"";position:absolute;left:3%;right:3%;top:.9rem;height:2px;background:rgba(255,255,255,.12);border-radius:2px}
.r24-line::after{content:"";position:absolute;left:3%;top:.9rem;height:2px;width:0;background:linear-gradient(90deg,var(--blue),var(--neon));border-radius:2px;box-shadow:0 0 8px rgba(25,184,255,.7)}
.r24-line div{position:relative;text-align:center;padding-top:.9rem;opacity:.45;transition:opacity .3s}
.r24-line div::before{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--navy);border:2px solid rgba(255,255,255,.3);z-index:1}
.r24-line b{display:block;font:700 .72rem var(--display);color:var(--neon);letter-spacing:.02em}
.r24-line span{display:block;font:600 .66rem var(--body);color:#c7d6ea;line-height:1.25}
@media(max-width:519px){.r24-line span{font-size:.58rem}.r24-line b{font-size:.62rem}}
.r24-line div.on{opacity:1}
.r24-line div.on::before{background:var(--neon);border-color:#fff;box-shadow:0 0 10px var(--neon)}

/* ---------- Animation (runs when the band has .in) ---------- */
.r24.in .r24-clock .arc{animation:r24arc 14s linear infinite}
.r24.in .r24-clock .hand{animation:r24hand 14s linear infinite}
.r24.in .r24-site .scan{animation:r24scan 14s linear infinite}
.r24.in .r24-site .hb{animation:r24blk 14s var(--ease) infinite;animation-delay:0s}
.r24.in .r24-site .cards .blk:nth-child(1){animation:r24blk 14s var(--ease) infinite}
.r24.in .r24-site .cards .blk:nth-child(2){animation:r24blk2 14s var(--ease) infinite}
.r24.in .r24-site .cards .blk:nth-child(3){animation:r24blk3 14s var(--ease) infinite}
.r24.in .r24-site .foot{animation:r24blk4 14s var(--ease) infinite}
.r24.in .r24-site .chips span:nth-child(1){animation:r24chip 14s var(--ease) infinite}
.r24.in .r24-site .chips span:nth-child(2){animation:r24chip2 14s var(--ease) infinite}
.r24.in .r24-site .chips span:nth-child(3){animation:r24chip3 14s var(--ease) infinite}
.r24.in .r24-site .live{animation:r24live 14s var(--ease) infinite}
.r24.in .r24-site .live b{animation:r24pop 14s var(--ease) infinite}
.r24.in .r24-site .speed{animation:r24speed 14s var(--ease) infinite}
.r24.in .r24-line::after{animation:r24fill 14s linear infinite}

/* 0–80% of the loop = 24 hours; 80–100% = hold on LIVE. hour h sits at h/24*80 % */
@keyframes r24arc{0%{stroke-dashoffset:326.7}80%,100%{stroke-dashoffset:0}}
@keyframes r24hand{0%{transform:rotate(0)}80%,100%{transform:rotate(360deg)}}
@keyframes r24fill{0%{width:0}80%,100%{width:94%}}
@keyframes r24scan{0%,6%{opacity:0;top:16px}7%{opacity:1}30%{top:calc(100% - 4px);opacity:1}31%,100%{opacity:0}}
/* hero copy lands at ~4h (13%), cards 6–10h (20–33%), footer 10h, chips 14–18h (47–60%), live 24h (80%) */
@keyframes r24blk{0%,12%{opacity:0;transform:translateY(10px) scale(.98)}16%,97%{opacity:1;transform:none}100%{opacity:0}}
@keyframes r24blk2{0%,21%{opacity:0;transform:translateY(10px) scale(.98)}25%,97%{opacity:1;transform:none}100%{opacity:0}}
@keyframes r24blk3{0%,26%{opacity:0;transform:translateY(10px) scale(.98)}30%,97%{opacity:1;transform:none}100%{opacity:0}}
@keyframes r24blk4{0%,31%{opacity:0;transform:translateY(10px) scale(.98)}35%,97%{opacity:1;transform:none}100%{opacity:0}}
@keyframes r24chip{0%,46%{opacity:0;transform:translateX(12px)}50%,97%{opacity:1;transform:none}100%{opacity:0}}
@keyframes r24chip2{0%,52%{opacity:0;transform:translateX(12px)}56%,97%{opacity:1;transform:none}100%{opacity:0}}
@keyframes r24chip3{0%,58%{opacity:0;transform:translateX(12px)}62%,97%{opacity:1;transform:none}100%{opacity:0}}
@keyframes r24live{0%,79%{opacity:0}82%,97%{opacity:1}100%{opacity:0}}
@keyframes r24pop{0%,79%{transform:scale(.6)}84%{transform:scale(1.08)}87%,100%{transform:scale(1)}}
@keyframes r24speed{0%,85%{opacity:0;transform:translateY(8px)}89%,97%{opacity:1;transform:none}100%{opacity:0}}

/* cards row keeps its own opacity; blocks inside animate */
.r24-site .cards .blk{opacity:0}

@media(prefers-reduced-motion:reduce){
  .r24.in .r24-clock .arc,.r24.in .r24-clock .hand,.r24.in .r24-site *,.r24.in .r24-line::after{animation:none!important}
  .r24.in .r24-clock .arc{stroke-dashoffset:0}
  .r24.in .r24-site .blk,.r24.in .r24-site .chips span,.r24.in .r24-site .live,.r24.in .r24-site .speed{opacity:1;transform:none}
  .r24.in .r24-line::after{width:94%}
  .r24-line div{opacity:1}
}

@media(max-width:899px){.r24 .split>.r24-stage{order:-1}}
@media(max-width:519px){.r24 .first{font-size:.68rem;letter-spacing:.03em}}