/* Hero channel stack. Mobile-first: one card at a time. From 900px the
   neighbours fan in behind it. Colours come from each card's --c triple. */

.hstage{position:relative;display:flex;flex-direction:column;gap:1.25rem;align-items:center}

/* ---- the deck ---- */
.hdeck{position:relative;width:100%;max-width:420px;height:clamp(408px,68vw,452px);perspective:1600px}
.hcard{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);opacity:0;pointer-events:none;
  transform:translateX(0) scale(.9);transform-origin:50% 60%;
  transition:opacity .6s var(--ease-out),transform .7s var(--ease-out),box-shadow .6s var(--ease-out)}
.hcard.is-active{opacity:1;transform:none;z-index:3;pointer-events:auto;box-shadow:var(--sh-xl)}
.hcard.is-prev,.hcard.is-next{opacity:0;z-index:1}

.hcard-top{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-bottom:1px solid var(--border-1);flex:none}
.hcard-top .ic{width:30px;height:30px;border-radius:9px;background:var(--cs);display:grid;place-items:center;flex:none}
.hcard-top .ic .bi{width:17px;height:17px;fill:var(--cd)}
.hcard-top .ic i,.hcard-top .ic svg:not(.bi){width:16px;height:16px;color:var(--cd)}
.hcard-top b{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--fg-1);flex:1}
.hcard-top .lv{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--cd);background:var(--cs);border-radius:var(--r-pill);padding:.25rem .55rem;white-space:nowrap}
.hcard-body{flex:1;min-height:0;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.7rem;overflow:hidden}

/* shared card parts */
.hrow{display:flex;align-items:center;gap:.6rem}
.hrow .th{width:42px;height:42px;border-radius:8px;flex:none;background:var(--cs);
  background-image:linear-gradient(135deg,var(--c),var(--cd));opacity:.9}
.hrow .tx{min-width:0;flex:1}
.hrow .tx b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--fg-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrow .tx small{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--fg-3)}
.hmetrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:auto}
.hmetrics div{background:var(--bg-subtle);border-radius:var(--r-md);padding:.5rem .6rem}
.hmetrics b{display:block;font-size:var(--fs-lg);font-weight:var(--fw-extra);color:var(--fg-1);letter-spacing:-.02em}
.hmetrics small{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-4)}
.hbars{display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:auto}
.hbars i{flex:1;border-radius:3px 3px 0 0;background:var(--cs);display:block;
  transform-origin:bottom;transform:scaleY(0);transition:transform .7s var(--ease-out)}
.hcard.is-active .hbars i{transform:scaleY(1)}
.hbars i:last-child{background:var(--c)}
.hbars i:nth-child(2){transition-delay:.06s}.hbars i:nth-child(3){transition-delay:.12s}
.hbars i:nth-child(4){transition-delay:.18s}.hbars i:nth-child(5){transition-delay:.24s}
.hbars i:nth-child(6){transition-delay:.3s}
.hstars{color:var(--sun-star);font-size:var(--fs-sm);letter-spacing:.1em;line-height:1}
.hline{height:1px;background:var(--border-1)}

/* the WhatsApp card carries the real conversation */
.hthread{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.45rem;
  margin:-.9rem -1rem;padding:.8rem;overflow:hidden;background-color:var(--wa-bg);background-image:var(--wa-paper);background-size:240px 240px;background-repeat:repeat}
.hb{max-width:88%;padding:.45rem .6rem;border-radius:11px;font-size:var(--fs-xs);line-height:1.45;color:#E9EDF0}
.hb.in{background:#1F2C33;align-self:flex-start;border-bottom-left-radius:3px}
.hb.out{background:#0F5C3C;align-self:flex-end;border-bottom-right-radius:3px}
.hb .tm{display:block;font-size:0.6875rem;color:rgba(255,255,255,.45);margin-top:.2rem}
.happr{border:1.5px solid rgba(139,92,246,.55);border-left:3px solid var(--violet);border-radius:11px;
  padding:.55rem .6rem;background:rgba(139,92,246,.1)}
.happr .lb{display:flex;align-items:center;gap:.35rem;font-family:var(--font-mono);font-size:0.6875rem;
  letter-spacing:.08em;text-transform:uppercase;color:#B79BFA;margin-bottom:.35rem}
.happr .lb svg{width:14px;height:18px;display:block}
.happr p{font-size:var(--fs-xs);line-height:1.45;color:#E9EDF0;margin:0}
.happr .ac{display:flex;gap:.35rem;margin-top:.5rem}
.happr .ac b{font-size:.625rem;font-weight:var(--fw-bold);border-radius:var(--r-pill);padding:.3rem .6rem}
.happr .ac .ok{background:#fff;color:#101012}
.happr .ac .ed{border:1px solid rgba(255,255,255,.18);color:#B9C2C9}

/* ---- floating notification chips ---- */
.hchips{position:absolute;inset:-.5rem;pointer-events:none;z-index:4}
.hchip{position:absolute;display:flex;align-items:center;gap:.55rem;max-width:15rem;
  background:var(--bg-surface);border:1px solid var(--border-2);border-radius:var(--r-lg);
  padding:.5rem .7rem;box-shadow:var(--sh-lg);
  opacity:0;transform:translateY(10px) scale(.94);transition:opacity .45s var(--ease-out),transform .45s var(--ease-snap)}
.hchip.on{opacity:1;transform:none}
.hchip .ic{width:26px;height:26px;border-radius:8px;background:var(--cs);display:grid;place-items:center;flex:none}
.hchip .ic .bi{width:15px;height:15px;fill:var(--cd)}
.hchip .ic i,.hchip .ic svg:not(.bi){width:14px;height:14px;color:var(--cd)}
.hchip b{display:block;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg-1);white-space:nowrap}
.hchip small{display:block;font-size:.625rem;color:var(--fg-3);white-space:nowrap}
.hchip .cur{position:absolute;width:15px;height:15px;color:var(--sky);filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.hchip .cur svg{width:100%;height:100%;display:block;fill:currentColor}
.hchip.c1{top:2.25rem;left:-.5rem}
.hchip.c1 .cur{right:-9px;bottom:-9px}
.hchip.c2{bottom:2.5rem;right:-.5rem}
.hchip.c2 .cur{left:-9px;top:-9px;transform:scaleX(-1)}
@media (max-width:519px){
  .hchip{max-width:11.5rem;padding:.4rem .55rem}
  .hchip b{font-size:.6875rem}
  .hchip small{font-size:0.6875rem}
  /* nothing may cover the card's identity: sit the chip on the bottom edge */
  .hchip.c1{top:auto;bottom:-.25rem;left:.25rem}
  .hchip.c1 .cur{right:-9px;bottom:auto;top:-9px;transform:scaleY(-1)}
  .hchip.c2{right:.25rem;bottom:-.25rem}
  .hchip.c2 .cur{left:-9px;top:-9px;transform:scale(-1,1)}
}

/* ---- channel tabs ---- */
.htabs{display:flex;align-items:center;gap:.15rem;flex-wrap:nowrap;overflow-x:auto;max-width:100%;
  padding:.25rem;scrollbar-width:none;-ms-overflow-style:none}
.htabs::-webkit-scrollbar{display:none}
.htab{display:inline-flex;align-items:center;gap:.4rem;border:0;background:none;cursor:pointer;
  font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--fg-4);
  padding:.45rem .7rem;border-radius:var(--r-pill);white-space:nowrap;
  transition:color var(--t-base),background var(--t-base)}
.htab::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--border-3);flex:none;
  transition:background var(--t-base),transform var(--t-base)}
.htab:hover{color:var(--fg-2)}
.htab[aria-selected="true"]{color:var(--fg-1);background:var(--bg-surface);box-shadow:var(--sh-xs)}
.htab[aria-selected="true"]::before{background:var(--c);transform:scale(1.3)}
.htab:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* ---- desktop: the neighbours fan in ---- */
@media (min-width:900px){
  .hdeck{max-width:none;height:clamp(424px,33vw,472px)}
  .hcard{left:50%;right:auto;width:min(360px,80%);margin-left:calc(min(360px,80%) / -2)}
  .hcard.is-prev{opacity:.5;z-index:1;transform:translateX(-34%) rotate(-7deg) scale(.84)}
  .hcard.is-next{opacity:.5;z-index:1;transform:translateX(34%) rotate(7deg) scale(.84)}
  .hcard.is-prev:hover,.hcard.is-next:hover{opacity:.75}
  .hchips{inset:1rem -.25rem}
}
@media (min-width:1200px){
  .hcard{width:380px;margin-left:-190px}
  .hcard.is-prev{transform:translateX(-44%) rotate(-7deg) scale(.86)}
  .hcard.is-next{transform:translateX(44%) rotate(7deg) scale(.86)}
  .hchips{inset:1rem -1rem}
}

@media (prefers-reduced-motion:reduce){
  .hcard,.hchip,.hbars i{transition:none}
  .hcard.is-prev,.hcard.is-next{opacity:.4}
  .hbars i{transform:scaleY(1)}
}

/* ---- dark: the soft pastel tints would glow, so swap to neutral washes ---- */
:root[data-theme="dark"] .hcard-top .ic,
:root[data-theme="dark"] .hchip .ic,
:root[data-theme="dark"] .hmetrics div{background:rgba(255,255,255,.07)}
:root[data-theme="dark"] .hcard-top .ic .bi,
:root[data-theme="dark"] .hchip .ic .bi{fill:var(--c)}
:root[data-theme="dark"] .hcard-top .ic i,
:root[data-theme="dark"] .hcard-top .ic svg:not(.bi),
:root[data-theme="dark"] .hchip .ic i,
:root[data-theme="dark"] .hchip .ic svg:not(.bi){color:var(--c)}
:root[data-theme="dark"] .hcard-top .lv{background:rgba(255,255,255,.07);color:var(--cd)}
:root[data-theme="dark"] .hbars i{background:rgba(255,255,255,.12)}
:root[data-theme="dark"] .hbars i:last-child{background:var(--c)}
:root[data-theme="dark"] .hrow .th{opacity:.75}
:root[data-theme="dark"] .htab[aria-selected="true"]{background:var(--bg-subtle)}

/* ============================================================================
   CHANNEL DETAIL HERO.
   Each channel page shows the very card the visitor just watched on the home
   hero, standing on its own rather than in the deck. Same markup, same
   animation, so the product feels continuous between the two pages.
   ========================================================================== */
.phero-split{display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:center}
/* The split moved the copy children out of .phero-in, so the gap that used to
   space them stopped applying and h1, lede, chips and CTA row stacked flush.
   The copy column owns its own rhythm now, with more air before the CTA. */
.phero-copy{min-width:0;display:grid;gap:1.15rem;justify-items:start;align-content:start}
.phero-copy .ch-mark{margin-bottom:-.25rem}
.phero-copy .ch-roles{margin-top:.15rem}
.phero-copy .cta-row{margin-top:.6rem}
.chero-stage{position:relative;min-width:0;width:100%;justify-self:stretch;display:flex;justify-content:flex-start}
/* Out of the deck the card has no fan to sit in: it is simply present. It must
   also drop the deck's centring margin-left, which the 900px and 1200px tiers
   set to pair with `left:50%` — without that reset it survives here and pulls
   the card off the left edge. Widths mirror the deck exactly, so the card is
   the same size as the one on the home hero. */
.chero-stage .hcard{position:relative;inset:auto;margin:0;width:min(420px,100%);max-width:none;
  opacity:1;transform:none;pointer-events:auto;box-shadow:var(--sh-xl);
  transition:none;z-index:auto}
.chero-stage .hcard-body{min-height:0}
@media (min-width:960px){
  .phero-split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .chero-stage{justify-content:flex-end}
}
/* Width parity with the home hero: the deck declares .hcard 360px at >=900 and
   380px at >=1200, and .hcard.is-active is transform:none, so these are the
   rendered widths and get mirrored as-is. Breakpoints follow the deck's, not
   the split's, so the two never disagree in the 900-959 band. */
@media (min-width:900px){
  .chero-stage .hcard{width:min(360px,100%)}
}
@media (min-width:1200px){
  .chero-stage .hcard{width:380px}
}
/* mobile-first: the copy leads, the card follows at full width */
@media (max-width:959px){
  .chero-stage{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .chero-stage .hcard *{animation-play-state:paused}
}

/* The fanned neighbours are obvious targets, but the base .hcard rule sets
   pointer-events:none so a click never reached them. Only the visible
   neighbours become clickable; the ones stacked behind stay inert. */
.hcard.is-prev,.hcard.is-next{pointer-events:auto;cursor:pointer}
.hcard.is-prev:hover,.hcard.is-next:hover{filter:brightness(1.02)}
@media (hover:hover){
  .hcard.is-prev:hover,.hcard.is-next:hover{box-shadow:var(--sh-xl)}
}
.hcard.is-prev:focus-visible,.hcard.is-next:focus-visible{outline:2px solid var(--fg-1);outline-offset:3px}