/* ==========================================================================
   home.css: the landing page's own components (hero device, comparison
   table, feature scenes, FAQ, guides hub). Owner direction 2026-09-23: the
   landing keeps its structure and copy and is aligned to IDENTITY.md with a
   light hand: identity tokens and fonts, no purple, no decorative gradients,
   glows or floating 3D; the device mocks sit flat. Loaded only on homepages,
   after styles.css.
   ========================================================================== */

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  padding-top: clamp(110px, 14vw, 160px);
  padding-bottom: clamp(60px, 7vw, 100px);
  /* clip horizontally to contain mesh edges and floating chips, but let
     vertical overflow show so the phone's drop shadow extends naturally
     into the section below instead of getting sliced at the hero edge. */
  overflow-x: clip;
  overflow-y: visible;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-hero-mesh);
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

/* Wide enough for the longest hero title line at 68 px (Polish "Twój
   odtwarzacz.", 575 px in Archivo 800): a line that wraps in the web font
   but not in its narrower fallback shifts the page when the font arrives. */
.hero-copy { max-width: 600px; }

.hero h1 {
  margin-top: 22px;
  font-size: clamp(44px, 6.4vw, 72px);
}

.hero h1 .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lede {
  margin-top: 22px;
  font-size: clamp(17px, 1.7vw, 19px);
  color: var(--muted);
  line-height: 1.6;
  max-width: 52ch;
}

.hero-actions {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 14px;
  width: max-content;
  max-width: 100%;
}

.hero-actions .btn-desktop {
  grid-column: 1 / -1;
  width: 100%;
}

.hero-stats {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: clamp(28px, 5vw, 56px);
}

.hero-stats dt {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.hero-stats dd {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Hero visual: a single CSS phone + 3 light icon chips on a light field. */

.hero-visual {
  position: relative;
  height: clamp(420px, 50vw, 600px);
  perspective: 1600px;
  perspective-origin: 50% 45%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

.hero-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 380ms cubic-bezier(.2,.7,.2,1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-glow {
  position: absolute;
  left: 50%; top: 58%;
  width: 70%; height: 50%;
  transform: translate(-50%, -50%) translateZ(-60px);
  background: radial-gradient(closest-side, rgba(255, 91, 36, 0.32), rgba(255, 91, 36, 0) 70%);
  filter: blur(10px);
  pointer-events: none;
}

/* Central phone — sole dark element. Single cinematic shadow, slim rim highlights. */
.hero-device {
  position: relative;
  width: clamp(220px, 26vw, 290px);
  aspect-ratio: 9 / 19;
  border-radius: 40px;
  padding: 11px;
  background: linear-gradient(160deg, #1A1D23 0%, #0B0C0F 100%);
  transform-style: preserve-3d;
  transform: rotateY(-14deg) rotateX(7deg) rotateZ(-1deg);
  animation: hero-device-float 8s ease-in-out infinite;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 28px 50px -14px rgba(0, 0, 0, 0.40),
    0 60px 90px -20px rgba(0, 0, 0, 0.28);
}

.hero-device::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 22px;
  border-radius: 12px;
  background: #08090B;
  z-index: 3;
}

.hero-device::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 35%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.hero-device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 91, 36, 0.35) 0%, rgba(255, 91, 36, 0) 60%),
    linear-gradient(180deg, #111317 0%, #08090B 100%);
  color: #F4F1EA;
  font-family: var(--font-body);
}

.hero-device-status {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 44px;
  padding: 14px 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  z-index: 2;
}
.hero-device-status .right { display: flex; gap: 5px; align-items: center; opacity: 0.85; }
.hero-device-status svg { width: 14px; height: 10px; }

.hero-now {
  position: absolute;
  top: 60px; left: 18px; right: 18px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 91, 36, 0.22), rgba(185, 181, 172, 0.10));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-now-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 70%),
    linear-gradient(135deg, #FF5B24, #B9B5AC);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 6px 14px -6px rgba(255, 91, 36, 0.55);
}

.hero-now-play {
  width: 0;
  height: 0;
  border-left: 11px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}

.hero-now-meta {
  flex: 1;
  min-width: 0;
}

.hero-now-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 2px 6px;
  border-radius: 999px;
  background: rgba(255, 91, 36, 0.15);
  font-size: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #FF5B24;
  margin-bottom: 8px;
}

.hero-now-tag .live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #FF5B24;
  box-shadow: 0 0 0 3px rgba(255, 91, 36, 0.20);
  animation: blink 1.6s ease-in-out infinite;
}

.hero-now-title {
  height: 8px;
  width: 80%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.45));
  animation: hero-line-pulse 3.2s ease-in-out infinite;
}
.hero-now-sub {
  height: 6px;
  width: 50%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15));
  margin-top: 6px;
  animation: hero-line-pulse 3.2s ease-in-out infinite;
  animation-delay: 0.5s;
}

.hero-section-label {
  position: absolute;
  left: 22px; right: 22px;
  top: 158px;
  font-size: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(244, 241, 234, 0.55);
}

.hero-section-label-2 {
  top: auto;
  bottom: 180px;
}

.hero-recents {
  position: absolute;
  left: 18px; right: 18px;
  bottom: 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.hero-recent { display: flex; flex-direction: column; gap: 6px; }

.hero-recent-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 91, 36, 0.55), rgba(185, 181, 172, 0.30));
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-recent:nth-child(2) .hero-recent-thumb { background: linear-gradient(135deg, rgba(74, 46, 54, 0.50), rgba(255, 77, 94, 0.40)); }
.hero-recent:nth-child(3) .hero-recent-thumb { background: linear-gradient(135deg, rgba(61, 220, 151, 0.45), rgba(185, 181, 172, 0.30)); }

.hero-recent-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.10);
  position: relative;
  overflow: hidden;
}
.hero-recent-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 2px;
}
.hero-recent:nth-child(1) .hero-recent-bar::after { width: 65%; }
.hero-recent:nth-child(2) .hero-recent-bar::after { width: 32%; }
.hero-recent:nth-child(3) .hero-recent-bar::after { width: 88%; }

.hero-channels {
  position: absolute;
  left: 18px; right: 18px; top: 184px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hero-channel {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 91, 36, 0.35), rgba(185, 181, 172, 0.25));
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}
.hero-channel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 40%);
}
.hero-channel:nth-child(1) { background: linear-gradient(135deg, #FF5B24, #B9B5AC); }
.hero-channel:nth-child(2) { background: linear-gradient(135deg, #FF5B24, #FF5B24); }
.hero-channel:nth-child(3) { background: linear-gradient(135deg, #B9B5AC, #2E4550); }
.hero-channel:nth-child(4) { background: linear-gradient(135deg, #FF5B24, #FF5B24); }
.hero-channel:nth-child(5) { background: linear-gradient(135deg, #FF5B24, #2B3A55); }
.hero-channel:nth-child(6) { background: linear-gradient(135deg, #B9B5AC, #FF5B24); }

.hero-channel { animation: hero-channel-fade 4s ease-in-out infinite; }
.hero-channel:nth-child(2) { animation-delay: 0.2s; }
.hero-channel:nth-child(3) { animation-delay: 0.4s; }
.hero-channel:nth-child(4) { animation-delay: 0.6s; }
.hero-channel:nth-child(5) { animation-delay: 0.8s; }
.hero-channel:nth-child(6) { animation-delay: 1.0s; }

.hero-progress {
  position: absolute;
  left: 22px; right: 22px; bottom: 56px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}
.hero-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background: linear-gradient(90deg, #FF5B24, #B9B5AC);
  animation: hero-progress-sweep 6s linear infinite;
  border-radius: 2px;
}

.hero-controls {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
}
.hero-ctrl {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.hero-ctrl-main {
  width: 28px;
  height: 28px;
  background: #fff;
  box-shadow: 0 4px 10px -2px rgba(255, 255, 255, 0.35);
  position: relative;
}
.hero-ctrl-main::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0; height: 0;
  border-left: 8px solid #111317;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translateX(2px);
}

@keyframes hero-device-float {
  0%, 100% { transform: rotateY(-14deg) rotateX(7deg) rotateZ(-1deg) translate3d(0, 0, 0); }
  50%      { transform: rotateY(-11deg) rotateX(5deg) rotateZ(-1deg) translate3d(0, -10px, 16px); }
}
@keyframes hero-line-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}
@keyframes hero-channel-fade {
  0%, 100% { transform: scale(1);     filter: brightness(1); }
  50%      { transform: scale(0.97);  filter: brightness(1.12); }
}
@keyframes hero-progress-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* Light icon-only chips. No text. They float around the phone. */
.hero-chip {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 30px -10px rgba(0, 0, 0, 0.20),
    0 28px 60px -20px rgba(0, 0, 0, 0.18);
  color: var(--primary);
  transform-style: preserve-3d;
  transition: transform 360ms cubic-bezier(.2,.7,.2,1);
  z-index: 2;
}

.hero-chip svg {
  width: 32px;
  height: 32px;
}

.hero-chip-fast {
  top: 10%;
  right: 4%;
  color: var(--primary);
  transform: rotateZ(6deg) rotateY(-14deg) rotateX(8deg) translateZ(140px);
  animation: hero-chip-1 7.5s ease-in-out infinite;
}

.hero-chip-star {
  top: 42%;
  left: 0%;
  color: var(--chip-pink);
  transform: rotateZ(-6deg) rotateY(12deg) rotateX(-3deg) translateZ(170px);
  animation: hero-chip-2 8.5s ease-in-out infinite;
}

.hero-chip-easy {
  bottom: 6%;
  right: 6%;
  color: var(--chip-teal);
  transform: rotateZ(3deg) rotateY(-8deg) rotateX(4deg) translateZ(120px);
  animation: hero-chip-3 9s ease-in-out infinite;
}

@keyframes hero-chip-1 {
  0%, 100% { transform: rotateZ(6deg)  rotateY(-14deg) rotateX(8deg)  translate3d(0, 0, 140px); }
  50%      { transform: rotateZ(6deg)  rotateY(-18deg) rotateX(6deg)  translate3d(0, -14px, 170px); }
}
@keyframes hero-chip-2 {
  0%, 100% { transform: rotateZ(-6deg) rotateY(12deg)  rotateX(-3deg) translate3d(0, 0, 170px); }
  50%      { transform: rotateZ(-6deg) rotateY(16deg)  rotateX(-1deg) translate3d(0, -10px, 195px); }
}
@keyframes hero-chip-3 {
  0%, 100% { transform: rotateZ(3deg)  rotateY(-8deg)  rotateX(4deg)  translate3d(0, 0, 120px); }
  50%      { transform: rotateZ(3deg)  rotateY(-12deg) rotateX(6deg)  translate3d(0, -12px, 150px); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 56px); }
  .hero-stats { margin-top: 36px; gap: 24px; }

  /* The phone is ~aspect 9/19 with a min width of 220px, so it needs ~465px
     of vertical room. Sizing hero-visual to actually fit the phone keeps it
     from overflowing upward into the store buttons. */
  .hero-device { width: clamp(220px, 48vw, 240px); }
  .hero-visual { height: clamp(480px, 110vw, 540px); }

  /* The narrower phone leaves little room beside the notch, so the right-side
     status icons (5G / battery) overlap it. Shrink the notch and tighten the
     status padding so the icons sit cleanly in the corner. */
  .hero-device::before { width: 56px; }
  .hero-device-status { padding: 13px 14px 0; }

  /* Tighten the floating chips so they hug the phone instead of crowding
     the page edges / button row on narrow viewports. */
  .hero-chip { width: 52px; height: 52px; border-radius: 16px; }
  .hero-chip svg { width: 26px; height: 26px; }
  .hero-chip-fast { top: 6%; right: 2%; }
  .hero-chip-star { top: 44%; left: 2%; }
  .hero-chip-easy { bottom: 10%; right: 4%; }

  /* On the tall stacked-layout hero, the default mask leaves the bottom
     half still tinted before snapping to body bg. Fade earlier and harder
     so the lavender clearly shades off before the next section. */
  .hero::before {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0,0,0,0.45) 65%, rgba(0,0,0,0) 92%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0,0,0,0.45) 65%, rgba(0,0,0,0) 92%);
  }

  /* On smaller phones the hero device shrinks (220–240px wide → ~464–506px tall),
     which makes the absolute-positioned content collide ("Continue watching" label
     lands inside the channels grid). Switch the screen to natural flex flow so the
     content stacks instead of fighting fixed top/bottom offsets. */
  .hero-device-screen {
    display: flex;
    flex-direction: column;
    padding: 50px 0 14px;
  }
  .hero-device-screen .hero-now,
  .hero-device-screen .hero-section-label,
  .hero-device-screen .hero-channels,
  .hero-device-screen .hero-recents,
  .hero-device-screen .hero-controls {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
  .hero-device-screen .hero-now           { margin: 0 18px; }
  .hero-device-screen .hero-section-label { margin: 14px 22px 0; }
  .hero-device-screen .hero-channels      { margin: 8px 18px 0; }
  .hero-device-screen .hero-recents       { margin: 8px 18px 0; }
  /* Stay relative (not static) so the absolutely-positioned sweep span keeps
     .hero-progress as its containing block and stays clipped to the 3px bar —
     otherwise it stretches to the full screen height as a violet stripe.
     inset:auto clears the base rule's bottom:56px, which would otherwise
     shift the bar up over the "continue watching" row in this flex flow. */
  .hero-device-screen .hero-progress      { position: relative; inset: auto; margin: auto 22px 0; }
  .hero-device-screen .hero-controls      { margin: 12px 0 0; }
}

@media (max-width: 420px) {
  /* On very narrow phones the third chip still crowds the device. */
  .hero-chip-star { display: none; }
}

@media (max-width: 520px) {
  .hero-actions {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  .hero-actions .btn { width: 100%; }
  .hero-actions .btn-desktop { grid-column: auto; }
}

/* ============================================================
   Section heading
   ============================================================ */

.section-head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.section-head .lede { text-align: center; }

/* ============================================================
   Features
   ============================================================ */

.features { padding-block: var(--section-pad); position: relative; }

.features-list {
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 10vw, 140px);
}

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}

.feature-copy { max-width: 480px; }
.feature-copy .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--chip-purple);
  color: #fff;
  box-shadow: 0 12px 28px -10px var(--chip-purple);
  margin-bottom: 24px;
}

.feature-copy h3 { margin-bottom: 16px; }
.feature-copy p { color: var(--muted); font-size: 17px; line-height: 1.65; }

.feature-copy .feature-meta {
  margin-top: 22px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  color: var(--muted-2);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.feature-copy .feature-meta span { display: inline-flex; align-items: center; gap: 8px; }
.feature-copy .feature-meta span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.feature[data-accent="purple"] .chip { background: var(--chip-purple); box-shadow: 0 12px 28px -10px var(--chip-purple); }
.feature[data-accent="pink"]   .chip { background: var(--chip-pink);   box-shadow: 0 12px 28px -10px var(--chip-pink); }
.feature[data-accent="coral"]  .chip { background: var(--chip-coral);  box-shadow: 0 12px 28px -10px var(--chip-coral); }
.feature[data-accent="amber"]  .chip { background: var(--chip-amber);  box-shadow: 0 12px 28px -10px var(--chip-amber); }
.feature[data-accent="teal"]   .chip { background: var(--chip-teal);   box-shadow: 0 12px 28px -10px var(--chip-teal); }
.feature[data-accent="blue"]   .chip { background: var(--chip-blue);   box-shadow: 0 12px 28px -10px var(--chip-blue); }

.feature[data-accent="pink"]   .feature-meta span::before { background: var(--chip-pink); }
.feature[data-accent="coral"]  .feature-meta span::before { background: var(--chip-coral); }
.feature[data-accent="amber"]  .feature-meta span::before { background: var(--chip-amber); }
.feature[data-accent="teal"]   .feature-meta span::before { background: var(--chip-teal); }
.feature[data-accent="blue"]   .feature-meta span::before { background: var(--chip-blue); }

.feature.is-reverse { direction: rtl; }
.feature.is-reverse > * { direction: ltr; }

@media (max-width: 900px) {
  .feature, .feature.is-reverse { grid-template-columns: 1fr; direction: ltr; }
  .feature .feature-stage { order: 2; }
  .feature .feature-copy  { order: 1; }
  .feature.is-reverse .feature-stage { order: 2; }
}

/* ============================================================
   Phone frame (shared scene container)
   ============================================================ */

.feature-stage {
  display: flex;
  justify-content: center;
  position: relative;
  perspective: 1500px;
  perspective-origin: 50% 45%;
}

.phone {
  position: relative;
  width: 290px;
  aspect-ratio: 9 / 19;
  border-radius: 38px;
  padding: 12px;
  background: linear-gradient(160deg, #1A1D23 0%, #111317 100%);
  /* Single cinematic shadow + slim rim highlights — no banded faux-bezel. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 28px 50px -14px rgba(0, 0, 0, 0.40),
    0 60px 90px -20px rgba(0, 0, 0, 0.28);
  transform-style: preserve-3d;
  transform: rotateY(-10deg) rotateX(4deg);
  animation: phone-breathe 9s ease-in-out infinite;
  transition: transform 360ms ease;
}

.feature.is-reverse .phone {
  transform: rotateY(10deg) rotateX(4deg);
  animation-name: phone-breathe-reverse;
}

.phone:hover { transform: rotateY(-14deg) rotateX(6deg) translateZ(20px); animation-play-state: paused; }
.feature.is-reverse .phone:hover { transform: rotateY(14deg) rotateX(6deg) translateZ(20px); }

@keyframes phone-breathe {
  0%, 100% { transform: rotateY(-10deg) rotateX(4deg) translate3d(0, 0, 0); }
  50%      { transform: rotateY(-7deg)  rotateX(2deg) translate3d(0, -8px, 18px); }
}
@keyframes phone-breathe-reverse {
  0%, 100% { transform: rotateY(10deg) rotateX(4deg) translate3d(0, 0, 0); }
  50%      { transform: rotateY(7deg)  rotateX(2deg) translate3d(0, -8px, 18px); }
}

.phone::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 26px;
  border-radius: 14px;
  background: #08090B;
  z-index: 3;
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background: linear-gradient(180deg, #111317 0%, #08090B 100%);
  overflow: hidden;
  color: #F4F1EA;
  font-family: var(--font-body);
  font-size: 12px;
}

.phone-status {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 44px;
  padding: 14px 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  z-index: 2;
}

.phone-status .right { display: flex; gap: 5px; align-items: center; opacity: 0.85; }
.phone-status svg { width: 14px; height: 10px; }

.phone-status .net-tag,
.hero-device-status .net-tag {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: currentColor;
}

.phone-glow {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 60px;
  background: var(--grad-brand);
  filter: blur(50px);
  opacity: 0.45;
  z-index: -1;
  border-radius: 50%;
}

/* ----- Landscape phone variant (used by the multiview scene) ----- */
.phone.is-landscape {
  width: 560px;
  aspect-ratio: 19 / 9;
  border-radius: 30px;
  padding: 11px;
  transform: rotateY(-7deg) rotateX(3deg);
  animation-name: phone-breathe-landscape;
}
.phone.is-landscape .phone-screen { border-radius: 20px; }

.phone.is-landscape:hover {
  transform: rotateY(-10deg) rotateX(4deg) translateZ(20px);
}

@keyframes phone-breathe-landscape {
  0%, 100% { transform: rotateY(-7deg) rotateX(3deg) translate3d(0, 0, 0); }
  50%      { transform: rotateY(-4deg) rotateX(1deg) translate3d(0, -6px, 14px); }
}

/* Notch moves to the short (left) edge in landscape. */
.phone.is-landscape::before {
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  width: 22px;
  height: 84px;
  border-radius: 12px;
}

/* Status row hugs the top edge, leaves room for the side notch. */
.phone.is-landscape .phone-status {
  height: 30px;
  padding: 8px 22px 0 44px;
  font-size: 11px;
}

.phone.is-landscape .phone-glow {
  bottom: -32px;
  width: 55%;
  height: 50px;
}

@media (max-width: 900px) {
  .phone.is-landscape { width: min(540px, 92vw); }
}
@media (max-width: 520px) {
  .phone.is-landscape { padding: 9px; border-radius: 24px; }
  .phone.is-landscape .phone-screen { border-radius: 16px; }
  .phone.is-landscape::before { width: 18px; height: 62px; left: 11px; }
  .phone.is-landscape .phone-status { height: 26px; padding: 6px 16px 0 36px; font-size: 10px; }
}

/* ============================================================
   Scene 1 — Paste playlist
   ============================================================ */

.scene-paste {
  position: absolute;
  inset: 56px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.scene-paste .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(244, 241, 234, 0.55);
  font-weight: 600;
}

.scene-paste .title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  letter-spacing: -0.01em;
}

.url-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #B9B5AC;
  word-break: break-all;
  min-height: 70px;
}

.url-input .typed { color: #fff; }
.url-input .caret {
  display: inline-block;
  width: 6px;
  height: 12px;
  margin-left: 1px;
  background: #B9B5AC;
  vertical-align: middle;
  animation: caret 1s steps(1) infinite;
}

/* Caret stays solid while keys are being hit, hides once the field is "submitted". */
.scene-paste.is-typing .caret { animation: none; opacity: 1; }
.scene-paste.is-loading .caret { animation: none; opacity: 0; }

@keyframes caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.scene-paste .cta {
  position: relative;
  margin-top: auto;
  height: 38px;
  border-radius: 10px;
  background: var(--grad-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  transition: opacity 200ms ease, transform 160ms cubic-bezier(.2,.7,.2,1), box-shadow 160ms ease;
}

.scene-paste.is-pressed .cta {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(255, 91, 36, 0.45);
}

.scene-paste.is-loading .cta .label-text { opacity: 0; }
.scene-paste .cta .spinner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: spin 1s linear infinite;
}
.scene-paste.is-loading .cta .spinner { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

.scene-paste .channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms ease, transform 320ms ease;
}
.scene-paste.is-done .channels { opacity: 1; transform: translateY(0); }
.scene-paste.is-done .url-input,
.scene-paste.is-done .cta,
.scene-paste.is-done .label,
.scene-paste.is-done .title { display: none; }
.scene-paste.is-done .channels-title { display: block; }

/* Loop reset: fade the grid out so the snap back to the form happens
   while the screen is visually empty, not as a jump-cut. */
.scene-paste.is-leaving .channels { opacity: 0; transform: translateY(6px); }
.scene-paste.is-leaving .channels-title { opacity: 0; }

.scene-paste .channels-title {
  display: none;
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  font-size: 16px;
  margin-bottom: 4px;
  transition: opacity 300ms ease;
}

.channel-tile {
  aspect-ratio: 1;
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(255, 91, 36, 0.30), rgba(185, 181, 172, 0.20));
  border: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: flex-end;
  padding: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 320ms ease, transform 320ms ease;
}

.scene-paste.is-done .channel-tile { opacity: 1; transform: scale(1); }
.scene-paste.is-done .channel-tile:nth-child(2) { transition-delay: 60ms; }
.scene-paste.is-done .channel-tile:nth-child(3) { transition-delay: 120ms; }
.scene-paste.is-done .channel-tile:nth-child(4) { transition-delay: 180ms; }
.scene-paste.is-done .channel-tile:nth-child(5) { transition-delay: 240ms; }
.scene-paste.is-done .channel-tile:nth-child(6) { transition-delay: 300ms; }

/* ============================================================
   Scene 2 — EPG timeline
   ============================================================ */

.scene-epg {
  position: absolute;
  inset: 56px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scene-epg .epg-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin-bottom: 4px;
}

.scene-epg .epg-times {
  display: grid;
  grid-template-columns: 72px repeat(3, 1fr);
  font-size: 9.5px;
  color: rgba(244, 241, 234, 0.55);
  font-family: var(--font-mono);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.scene-epg .epg-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.epg-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 6px;
  align-items: center;
  font-size: 11px;
}

.epg-row .ch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #fff;
}

.epg-row .ch-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF5B24;
}

.epg-row .strip {
  height: 22px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
}

.epg-row .slot {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(120deg, rgba(255, 91, 36, 0.35), rgba(185, 181, 172, 0.25));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 480ms cubic-bezier(.4,.0,.2,1);
}

.epg-row .slot.now {
  background: linear-gradient(120deg, #FF5B24, #B9B5AC);
  box-shadow: 0 0 14px rgba(255, 91, 36, 0.6);
}

/* A slow sheen across the "on now" slots keeps the guide feeling live
   after the one-shot scale-in has finished. */
.epg-row .slot.now::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.30) 50%, transparent 75%);
  transform: translateX(-110%);
}
.scene-epg.is-in .slot.now::after {
  animation: epg-shimmer 3.4s ease-in-out infinite 900ms;
}
@keyframes epg-shimmer {
  0%        { transform: translateX(-110%); }
  45%, 100% { transform: translateX(110%); }
}

.scene-epg.is-in .slot { transform: scaleX(1); }
.scene-epg.is-in .epg-row:nth-child(2) .slot { transition-delay: 80ms; }
.scene-epg.is-in .epg-row:nth-child(3) .slot { transition-delay: 160ms; }
.scene-epg.is-in .epg-row:nth-child(4) .slot { transition-delay: 240ms; }
.scene-epg.is-in .epg-row:nth-child(5) .slot { transition-delay: 320ms; }

/* ============================================================
   Scene 3 — Multiview
   ============================================================ */

.scene-mv {
  position: absolute;
  inset: 56px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Landscape variant: status bar is shorter and the notch sits on the left
   short edge, so the scene needs a smaller top inset and a wider left one. */
.phone.is-landscape .scene-mv {
  inset: 38px 14px 12px 42px;
  gap: 8px;
}

.scene-mv .mv-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}

.phone.is-landscape .scene-mv .mv-head { font-size: 13px; }

.scene-mv .mv-grid {
  flex: 1;
  display: grid;
  gap: 8px;
  transition:
    grid-template-columns 600ms cubic-bezier(.4,.0,.2,1),
    grid-template-rows 600ms cubic-bezier(.4,.0,.2,1);
}

.scene-mv .mv-cell {
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2B3A55, #2B3A55);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 360ms ease, transform 360ms ease;
}

.scene-mv .mv-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(135deg, rgba(255, 91, 36,0.5), rgba(185, 181, 172,0.5));
}

.scene-mv .mv-cell .live-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
}
.scene-mv .mv-cell .live-tag::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #FF5B24;
  animation: blink 1.6s ease-in-out infinite;
}

/* Multiview holds two streams side by side (owner decision 2026-09-23).
   Step 1: one stream fills the screen. Step 2: a second stream splits in
   and the audio stays on the first. Step 3: the audio moves to the second.
   Both cells share area `a` in step 1 so the second can split out of it. */
.scene-mv .mv-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a b";
}
.scene-mv[data-step="1"] .mv-grid { grid-template-areas: "a a"; }
.scene-mv[data-step="1"] .mv-cell { grid-area: a; }
.scene-mv[data-step="1"] .mv-cell:nth-child(1) { opacity: 1; transform: scale(1); }
.scene-mv[data-step="1"] .mv-cell:nth-child(2) { opacity: 0; transform: scale(0.92); }
.scene-mv[data-step="2"] .mv-cell:nth-child(1),
.scene-mv[data-step="3"] .mv-cell:nth-child(1) { grid-area: a; opacity: 1; transform: scale(1); }
.scene-mv[data-step="2"] .mv-cell:nth-child(2),
.scene-mv[data-step="3"] .mv-cell:nth-child(2) { grid-area: b; opacity: 1; transform: scale(1); transition-delay: 80ms; }
.scene-mv .mv-cell {
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: opacity 360ms ease, transform 360ms ease, outline-color 240ms ease;
}
.scene-mv .mv-audio {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #FF5B24;
  color: #0B0B0C;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 240ms ease, transform 240ms ease;
}
.scene-mv .mv-audio svg { width: 13px; height: 13px; }
.scene-mv[data-step="2"] .mv-cell:nth-child(1),
.scene-mv[data-step="3"] .mv-cell:nth-child(2) { outline-color: #FF5B24; }
.scene-mv[data-step="2"] .mv-cell:nth-child(1) .mv-audio,
.scene-mv[data-step="3"] .mv-cell:nth-child(2) .mv-audio { opacity: 1; transform: none; }

.scene-mv .step-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding-top: 4px;
}
.scene-mv .step-dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: background 200ms ease, width 200ms ease;
}
.scene-mv[data-step="1"] .step-dots i:nth-child(1),
.scene-mv[data-step="2"] .step-dots i:nth-child(2),
.scene-mv[data-step="3"] .step-dots i:nth-child(2) {
  background: #B9B5AC;
  width: 14px;
  border-radius: 4px;
}

/* ============================================================
   Scene 4 — Picture-in-Picture
   ============================================================ */

.scene-pip {
  position: absolute;
  /* Fill the entire phone screen — the phone-screen's overflow:hidden
     and border-radius clip our corners, so we don't need our own radius. */
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #F4F1EA 0%, #F4F1EA 100%);
  overflow: hidden;
  color: #1A1D23;
}

/* App bar — makes it clear the user is INSIDE a chat app.
   Top padding clears the absolute-positioned phone status bar (44px tall). */
.scene-pip .pip-app-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 52px 14px 9px;
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* When the pip chat is the active scene, the status bar floats over a
   light background — switch its text/icons from white to dark so they
   stay readable. */
.phone-screen:has(.scene-pip) .phone-status { color: #1A1D23; }
.scene-pip .pip-back {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  color: #FF5B24;
  margin-right: 2px;
}
.scene-pip .pip-avatars {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 26px;
  flex-shrink: 0;
}
.scene-pip .pip-avatars-dot {
  position: absolute;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}
.scene-pip .pip-avatars-dot.a { left: 0;  background: linear-gradient(160deg, #4A2E36, #4A2E36); z-index: 3; }
.scene-pip .pip-avatars-dot.b { left: 8px; background: linear-gradient(160deg, #2E4550, #2B3A55); z-index: 2; }
.scene-pip .pip-avatars-dot.c { left: 16px; background: linear-gradient(160deg, #51442A, #51442A); z-index: 1; }
.scene-pip .pip-app-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.scene-pip .pip-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
}
.scene-pip .pip-status {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.04em;
  opacity: 0.55;
}

/* Conversation thread — messages anchor to the BOTTOM like real chat apps,
   so the empty area sits above the messages rather than between them and
   the floating PiP. */
.scene-pip .pip-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px 10px 10px;
  overflow: hidden;
}
.scene-pip .pip-msg {
  max-width: 78%;
  padding: 6px 10px;
  border-radius: 13px;
  font-family: var(--font-body);
  font-size: 10.5px;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.2,.7,.2,1);
}

/* Messages cascade in like a thread loading; the PiP window lands last. */
.scene-pip.is-in .pip-msg { opacity: 1; transform: none; }
.scene-pip.is-in .pip-msg:nth-child(2) { transition-delay: 90ms; }
.scene-pip.is-in .pip-msg:nth-child(3) { transition-delay: 180ms; }
.scene-pip.is-in .pip-msg:nth-child(4) { transition-delay: 270ms; }
.scene-pip.is-in .pip-msg:nth-child(5) { transition-delay: 360ms; }
.scene-pip.is-in .pip-msg:nth-child(6) { transition-delay: 450ms; }
.scene-pip.is-in .pip-msg:nth-child(7) { transition-delay: 540ms; }
.scene-pip .pip-sender {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.02em;
  color: #FF5B24;
  margin-bottom: 2px;
}
.scene-pip .pip-msg.in {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom-left-radius: 4px;
  color: #1A1D23;
}
.scene-pip .pip-msg.out {
  align-self: flex-end;
  background: linear-gradient(135deg, #FF5B24, #B9B5AC);
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 6px rgba(255, 91, 36, 0.28);
}

/* Typing indicator (3 dots) */
.scene-pip .pip-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 11px;
}
.scene-pip .pip-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  animation: pip-typing-dot 1.2s ease-in-out infinite;
}
.scene-pip .pip-typing i:nth-child(2) { animation-delay: 0.15s; }
.scene-pip .pip-typing i:nth-child(3) { animation-delay: 0.30s; }
@keyframes pip-typing-dot {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50%      { opacity: 1.00; transform: translateY(-2px); }
}

/* Composer / input row */
.scene-pip .pip-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 10px;
  background: rgba(255, 255, 255, 0.75);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.scene-pip .pip-composer-input {
  flex: 1;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.scene-pip .pip-composer-send {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF5B24, #B9B5AC);
  box-shadow: 0 2px 6px rgba(255, 91, 36, 0.40);
}

.scene-pip .pip-window {
  position: absolute;
  /* Sits in the empty zone between the app bar and the first chat message */
  top: 108px;
  right: 12px;
  width: 56%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: linear-gradient(135deg, #FF5B24 0%, #B9B5AC 50%, #B9B5AC 100%);
  /* Strong purple halo + dark drop + thin rim highlight so it visibly "shines" */
  box-shadow:
    0 24px 56px rgba(255, 91, 36, 0.48),
    0 10px 22px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  overflow: hidden;
  transform: translate(18px, -8px) scale(0.94);
  opacity: 0;
  transition: transform 600ms cubic-bezier(.4,.0,.2,1) 320ms, opacity 360ms ease 320ms;
  z-index: 3;
}
.scene-pip.is-in .pip-window {
  /* Once visible, breathe gently — the glow pulses to suggest live activity */
  animation: pip-shine 3.2s ease-in-out infinite 700ms;
}

@keyframes pip-shine {
  0%, 100% {
    box-shadow:
      0 24px 56px rgba(255, 91, 36, 0.48),
      0 10px 22px rgba(0, 0, 0, 0.32),
      0 0 0 1px rgba(255, 255, 255, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.32);
  }
  50% {
    box-shadow:
      0 28px 72px rgba(255, 91, 36, 0.68),
      0 12px 26px rgba(0, 0, 0, 0.38),
      0 0 0 1px rgba(255, 255, 255, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.40);
  }
}
.scene-pip .pip-window::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 25%, rgba(255,255,255,0.22), transparent 65%);
  pointer-events: none;
}
.scene-pip .pip-window::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.95) 38%, rgba(255,255,255,0.25) 38%, rgba(255,255,255,0.25) 100%);
}
.scene-pip .pip-window .live-tag {
  position: absolute;
  top: 9px;
  left: 9px;
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.50);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
}
.scene-pip .pip-window .live-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FF4D5E;
  box-shadow: 0 0 6px rgba(255, 77, 94, 0.80);
  animation: live-dot-blink 1.2s ease-in-out infinite;
}
@keyframes live-dot-blink {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.85); }
}

.scene-pip.is-in .pip-window { transform: translate(0, 0) scale(1); opacity: 1; }

/* ============================================================
   Scene 5 — Favorites / local-first
   ============================================================ */

.scene-fav {
  position: absolute;
  inset: 56px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scene-fav .fav-head { display: flex; align-items: center; justify-content: space-between; }
.scene-fav .fav-head h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  margin: 0;
}
.scene-fav .fav-head .badge {
  font-size: 9.5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(61, 220, 151, 0.15);
  color: #2F4A3E;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.scene-fav .fav-list { display: flex; flex-direction: column; gap: 6px; }

.scene-fav .fav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  font-size: 11px;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 380ms ease, transform 380ms cubic-bezier(.2,.7,.2,1);
}

/* Rows slide in first, hearts pop after — see the heart delays below. */
.scene-fav.is-in .fav-row { opacity: 1; transform: none; }
.scene-fav.is-in .fav-row:nth-child(2) { transition-delay: 70ms; }
.scene-fav.is-in .fav-row:nth-child(3) { transition-delay: 140ms; }
.scene-fav.is-in .fav-row:nth-child(4) { transition-delay: 210ms; }
.scene-fav.is-in .fav-row:nth-child(5) { transition-delay: 280ms; }

.scene-fav .fav-row .thumb {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 91, 36,0.5), rgba(185, 181, 172,0.4));
  flex-shrink: 0;
}

.scene-fav .fav-row .name { flex: 1; color: #fff; font-weight: 500; }

.scene-fav .heart {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.scene-fav .heart svg {
  width: 16px;
  height: 16px;
  fill: transparent;
  stroke: rgba(255,255,255,0.4);
  stroke-width: 1.8;
  transition: fill 220ms ease, stroke 220ms ease, transform 220ms cubic-bezier(.4,1.6,.4,1);
}

.scene-fav.is-in .fav-row.is-fav .heart svg {
  fill: #4A2E36;
  stroke: #4A2E36;
  transform: scale(1.15);
}

.scene-fav.is-in .fav-row.is-fav:nth-child(1) .heart svg { transition-delay: 520ms; }
.scene-fav.is-in .fav-row.is-fav:nth-child(3) .heart svg { transition-delay: 740ms; }
.scene-fav.is-in .fav-row.is-fav:nth-child(4) .heart svg { transition-delay: 960ms; }

/* ============================================================
   Scene 6 — Android TV
   ============================================================ */

.tv-frame {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  padding: 7px 7px 18px;
  background: linear-gradient(160deg, #1A1D23 0%, #111317 100%);
  /* Single cinematic shadow + slim rim highlights. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    0 36px 60px -16px rgba(0, 0, 0, 0.42),
    0 80px 110px -24px rgba(0, 0, 0, 0.28);
  transform-style: preserve-3d;
  transform: rotateY(12deg) rotateX(6deg);
  animation: tv-breathe 12s ease-in-out infinite;
  transition: transform 360ms ease;
}

.tv-frame:hover { transform: rotateY(16deg) rotateX(8deg) translateZ(24px); animation-play-state: paused; }

@keyframes tv-breathe {
  0%, 100% { transform: rotateY(12deg) rotateX(6deg) translate3d(0, 0, 0); }
  50%      { transform: rotateY(9deg)  rotateX(4deg) translate3d(0, -6px, 20px); }
}

.tv-frame::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 4px;
  border-radius: 2px;
  background: rgba(0,0,0,0.3);
}

.tv-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(180deg, #111317 0%, #08090B 100%);
  overflow: hidden;
  padding: 16px;
}

.scene-tv .tv-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.scene-tv .tv-head h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  margin: 0;
}
.scene-tv .tv-head span {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-mono);
}

.scene-tv .tv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  position: relative;
}

.scene-tv .tv-tile {
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 91, 36,0.45), rgba(185, 181, 172,0.35));
  position: relative;
  transition: transform 200ms ease, filter 240ms ease;
}

.scene-tv .tv-tile.is-focus { transform: scale(1.06); filter: brightness(1.22) saturate(1.1); }

.scene-tv .focus-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 10px;
  border: 2.5px solid #B9B5AC;
  box-shadow: 0 0 0 4px rgba(185, 181, 172, 0.25), 0 0 30px rgba(185, 181, 172, 0.55);
  pointer-events: none;
  transition:
    top 360ms cubic-bezier(.4,.0,.2,1),
    left 360ms cubic-bezier(.4,.0,.2,1),
    width 360ms cubic-bezier(.4,.0,.2,1),
    height 360ms cubic-bezier(.4,.0,.2,1),
    opacity 200ms ease;
  opacity: 0;
}

.scene-tv.is-in .focus-ring { opacity: 1; }


/* Dark look of the mocks (default theme) */
/* Phone bezels */
:root:not([data-theme="light"]) .hero-device,
:root:not([data-theme="light"]) .phone {
  background: linear-gradient(160deg, #1A1D23 0%, #0B0C0F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.70),
    0 28px 50px -14px rgba(0, 0, 0, 0.65),
    0 60px 90px -20px rgba(0, 0, 0, 0.55),
    0 0 80px -20px rgba(255, 91, 36, 0.25);
}

:root:not([data-theme="light"]) .hero-device-screen {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 91, 36, 0.30) 0%, rgba(255, 91, 36, 0) 60%),
    linear-gradient(180deg, #111317 0%, #08090B 100%);
  color: #F4F1EA;
}

:root:not([data-theme="light"]) .hero-now {
  background: linear-gradient(180deg, rgba(255, 91, 36, 0.18), rgba(185, 181, 172, 0.08));
  border-color: rgba(255, 255, 255, 0.10);
}

:root:not([data-theme="light"]) .hero-now-thumb {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 70%),
    linear-gradient(135deg, #FF5B24, #B9B5AC);
  box-shadow: 0 6px 14px -6px rgba(255, 91, 36, 0.55);
}

:root:not([data-theme="light"]) .phone-glow { background: var(--grad-brand); opacity: 0.40; }

/* Hero floating chips */
:root:not([data-theme="light"]) .hero-chip {
  background: linear-gradient(160deg, #1A1D23 0%, #0B0C0F 100%);
  color: var(--primary-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 14px 30px -10px rgba(0, 0, 0, 0.60),
    0 0 30px -8px rgba(255, 91, 36, 0.30);
}
:root:not([data-theme="light"]) .hero-chip-fast   { color: var(--chip-amber); }
:root:not([data-theme="light"]) .hero-chip-custom { color: var(--accent); }
:root:not([data-theme="light"]) .hero-chip-easy   { color: var(--primary); }

/* Phone screens */
:root:not([data-theme="light"]) .phone-screen {
  background: linear-gradient(180deg, #111317 0%, #08090B 100%);
  color: #F4F1EA;
}

/* Features section bg + chip + meta */
:root:not([data-theme="light"]) .features {
  background: linear-gradient(180deg, transparent 0%, rgba(255, 91, 36, 0.025) 60%, transparent 100%);
}
:root:not([data-theme="light"]) .feature-copy .chip {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 12px 28px -10px rgba(255, 91, 36, 0.55);
}
:root:not([data-theme="light"]) .feature-copy .feature-meta { color: var(--muted); }
:root:not([data-theme="light"]) .feature-copy .feature-meta span::before { background: var(--primary); }

/* Per-accent chip recoloring for dark */
:root:not([data-theme="light"]) .feature[data-accent="purple"] .chip { background: var(--chip-purple); color: #0F0A1F; box-shadow: 0 12px 28px -10px rgba(255, 91, 36, 0.55); }
:root:not([data-theme="light"]) .feature[data-accent="pink"]   .chip { background: var(--chip-pink);   color: #1F0A15; box-shadow: 0 12px 28px -10px rgba(244, 114, 182, 0.55); }
:root:not([data-theme="light"]) .feature[data-accent="coral"]  .chip { background: var(--chip-coral);  color: #1F0E08; box-shadow: 0 12px 28px -10px rgba(251, 146, 60, 0.55); }
:root:not([data-theme="light"]) .feature[data-accent="amber"]  .chip { background: var(--chip-amber);  color: #1F1808; box-shadow: 0 12px 28px -10px rgba(250, 204, 21, 0.55); }
:root:not([data-theme="light"]) .feature[data-accent="teal"]   .chip { background: var(--chip-teal);   color: #08201D; box-shadow: 0 12px 28px -10px rgba(45, 212, 191, 0.55); }
:root:not([data-theme="light"]) .feature[data-accent="blue"]   .chip { background: var(--chip-blue);   color: #08131F; box-shadow: 0 12px 28px -10px rgba(96, 165, 250, 0.55); }

:root:not([data-theme="light"]) .feature[data-accent="purple"] .feature-meta span::before { background: var(--chip-purple); }
:root:not([data-theme="light"]) .feature[data-accent="pink"]   .feature-meta span::before { background: var(--chip-pink); }
:root:not([data-theme="light"]) .feature[data-accent="coral"]  .feature-meta span::before { background: var(--chip-coral); }
:root:not([data-theme="light"]) .feature[data-accent="amber"]  .feature-meta span::before { background: var(--chip-amber); }
:root:not([data-theme="light"]) .feature[data-accent="teal"]   .feature-meta span::before { background: var(--chip-teal); }
:root:not([data-theme="light"]) .feature[data-accent="blue"]   .feature-meta span::before { background: var(--chip-blue); }

/* TV frame */
:root:not([data-theme="light"]) .tv-frame,
:root:not([data-theme="light"]) .tv-screen {
  background: linear-gradient(180deg, #111317 0%, #08090B 100%);
}

/* Footer */
:root:not([data-theme="light"]) .footer {
  background: #08090B;
  border-top: 1px solid var(--border);
  color: var(--muted);
}
:root:not([data-theme="light"]) .footer h5 { color: var(--ink); }
:root:not([data-theme="light"]) .footer a { color: var(--ink-soft); transition: color 160ms ease; }
:root:not([data-theme="light"]) .footer a:hover { color: var(--primary); }
:root:not([data-theme="light"]) .footer-meta { color: var(--muted-2); }

/* Scene styles — restyle channels/tiles for dark cohesion */
:root:not([data-theme="light"]) .channel-tile,
:root:not([data-theme="light"]) .tv-tile,
:root:not([data-theme="light"]) .mv-cell {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--ink-soft) !important;
}

:root:not([data-theme="light"]) .focus-ring {
  box-shadow: 0 0 0 3px rgba(255, 91, 36, 0.85), 0 0 30px rgba(255, 91, 36, 0.55) !important;
  border-color: var(--primary) !important;
}

:root:not([data-theme="light"]) .live-tag:not(.pip-window .live-tag),
:root:not([data-theme="light"]) .badge {
  background: rgba(255, 91, 36, 0.20) !important;
  color: var(--primary-soft) !important;
  border: 1px solid rgba(255, 91, 36, 0.40) !important;
}


/* Former inline blocks */

      .faq { padding: 4.5rem 0; }
      .faq .faq-list { max-width: 44rem; margin: 2.5rem auto 0; }
      .faq-item { border-top: 1px solid rgba(127, 127, 127, 0.22); }
      .faq-item:last-child { border-bottom: 1px solid rgba(127, 127, 127, 0.22); }
      .faq-item > summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.15rem 0;
        font-weight: 600;
        font-size: 1.05rem;
      }
      .faq-item > summary::-webkit-details-marker { display: none; }
      .faq-item > summary::after {
        content: "+";
        font-weight: 400;
        font-size: 1.5rem;
        line-height: 1;
        opacity: 0.55;
      }
      .faq-item[open] > summary::after { content: "\2212"; }
      .faq-item > p {
        margin: -0.25rem 0 1.3rem;
        max-width: 62ch;
        opacity: 0.82;
        line-height: 1.65;
      }
    

      .compare { padding: clamp(40px, 6vw, 72px) 0 0; }
      .compare-wrap { max-width: 920px; margin: 2.75rem auto 0; }
      .compare-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--border);
        border-radius: var(--r-xl);
        background: var(--card);
        box-shadow: var(--shadow-md);
      }
      .compare-table {
        width: 100%;
        min-width: 640px;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 0.95rem;
      }
      .compare-table th,
      .compare-table td {
        padding: 0.95rem 1.15rem;
        text-align: start;
        vertical-align: middle;
        line-height: 1.4;
      }
      .compare-table thead th {
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
      }
      .compare-table thead th.col-klipa {
        color: var(--primary);
        font-size: 1.05rem;
      }
      .compare-table tbody th {
        font-weight: 600;
        color: var(--text);
      }
      .compare-table tbody tr + tr th,
      .compare-table tbody tr + tr td {
        border-top: 1px solid rgba(127, 127, 127, 0.14);
      }
      .compare-table .col-klipa {
        background: rgba(255, 91, 36, 0.07);
      }
      .compare-table tbody td { color: var(--text-muted); }
      .compare-table tbody td.col-klipa { color: var(--text); font-weight: 500; }
      .cmp { display: inline-flex; align-items: center; gap: 0.55rem; }
      .cmp svg { flex: none; width: 18px; height: 18px; }
      .cmp-yes svg { color: var(--chip-teal); }
      .cmp-no svg { color: var(--muted-2); }
      .cmp-mid svg { color: var(--chip-amber); }
      .compare-note {
        margin: 1.1rem auto 0;
        max-width: 920px;
        font-size: 0.85rem;
        color: var(--text-muted);
        text-align: center;
      }
      @media (max-width: 720px) {
        .compare-table { font-size: 0.88rem; }
        .compare-table th, .compare-table td { padding: 0.8rem 0.85rem; }
      }
    

      .learn-hub { padding: clamp(40px, 6vw, 72px) 0; }
      .learn-hub-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
        max-width: 920px;
        margin: 2.75rem auto 0;
      }
      @media (max-width: 720px) { .learn-hub-grid { grid-template-columns: 1fr; } }
      .learn-hub-col {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--r-xl);
        padding: 1.5rem 1.6rem 1.4rem;
        box-shadow: var(--shadow-md);
      }
      .learn-hub-h {
        margin: 0 0 0.6rem;
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--text);
      }
      .learn-hub-list { list-style: none; margin: 0; padding: 0; }
      .learn-hub-list li + li { border-top: 1px solid rgba(127, 127, 127, 0.13); }
      .learn-hub-list a {
        display: block;
        padding: 0.72rem 0;
        color: var(--text-muted);
        font-size: 0.97rem;
        line-height: 1.4;
        transition: color 160ms ease;
      }
      .learn-hub-list a:hover { color: var(--primary); }
      .learn-hub-all {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin-top: 1rem;
        font-weight: 600;
        font-size: 0.92rem;
        color: var(--primary);
      }
      .learn-hub-all svg { width: 16px; height: 16px; }
    

/* ==========================================================================
   Identity alignment (applies over the ported rules above)
   ========================================================================== */

.hero { padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(56px, 8vw, 104px); overflow: clip; }
.hero::before, .hero-glow, .phone-glow, .hero-chip { display: none !important; }
.hero h1 { margin-top: 18px; font-size: clamp(40px, 5.4vw, 68px); }
.hero h1 .accent, :root:not([data-theme="light"]) .hero h1 .accent {
  background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--tally-text);
}
.hero-lede { color: var(--text-2); }
.hero-actions { grid-template-columns: repeat(2, max-content); }
.hero-actions .btn { min-height: 56px; justify-content: flex-start; padding-inline: 18px 22px; }
.hero-actions .btn-soft .store-glyph path { fill: currentColor; }
.hero-actions .btn-soft .store-glyph defs { display: none; }
.hero-visual { perspective: none; }
.hero-stage { transform: none !important; transition: none; }
.hero-device, .phone {
  transform: none !important;
  animation: none !important;
  background: var(--c-ink2) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 24px 48px -24px rgba(0, 0, 0, 0.6) !important;
}
.hero-device::after, .phone::after { display: none; }
.hero-device-screen, .phone-screen { background: var(--c-ink0) !important; color: var(--c-fg1) !important; }
.hero-now { background: var(--c-ink1) !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: none; }
.hero-now-thumb { background: #2E4550 !important; box-shadow: none !important; }
.hero-now-tag { border-radius: 4px; background: rgba(255, 91, 36, 0.14); color: var(--c-tally); font-family: var(--font-mono); }
.hero-now-tag .live-dot { background: var(--c-tally); box-shadow: 0 0 0 3px rgba(255, 91, 36, 0.28); }

.hero-tool-link {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  color: var(--text); font-size: 15px; font-weight: 500;
}
.hero-tool-link .tag {
  padding: 2px 7px; border: 1px solid var(--line-strong); border-radius: 4px;
  color: var(--text-2); font: 500 11px/1.5 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-tool-link:hover .hero-tool-title { color: var(--tally-text); }
.hero-tool-title { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }

/* Section rhythm follows the rest of the site: hairlines between sections. */
.compare, .features, .faq, .learn-hub { border-top: 1px solid var(--line); }
.features { background: none !important; padding-block: clamp(64px, 9vw, 112px); }
.compare { padding-block: clamp(64px, 9vw, 112px) !important; }
.faq, .learn-hub { padding-block: clamp(64px, 9vw, 112px) !important; }
.section-head { max-width: 760px; }
.section-head h2 { margin-top: 0; }
.section-head .lede { color: var(--text-2); }

/* Feature chips: neutral line icons on a raised square, not coloured circles. */
.feature-copy .chip, :root:not([data-theme="light"]) .feature .chip, .feature .chip {
  width: 44px; height: 44px; border-radius: 8px !important;
  background: var(--raised) !important; color: var(--text-2) !important;
  border: 1px solid var(--line); box-shadow: none !important;
}
.feature-copy .chip svg { width: 22px; height: 22px; }
.feature-copy p { color: var(--text-2); }
.feature-meta span::before, :root:not([data-theme="light"]) .feature .feature-meta span::before { background: var(--text-3) !important; }
.feature-meta { color: var(--text-2); font-family: var(--font-mono); font-size: 12px; }

/* Scene surfaces */
.channel-tile, .tv-tile, .mv-cell {
  background: var(--c-ink1) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: var(--c-fg2) !important;
}
.focus-ring, :root:not([data-theme="light"]) .focus-ring {
  border-color: var(--c-tally) !important; box-shadow: 0 0 0 2px var(--c-tally), 0 0 0 8px rgba(255, 91, 36, 0.28) !important;
}
.live-tag, .badge, :root:not([data-theme="light"]) .live-tag:not(.pip-window .live-tag), :root:not([data-theme="light"]) .badge {
  background: rgba(255, 91, 36, 0.14) !important; color: var(--c-tally) !important; border: 1px solid rgba(255, 91, 36, 0.35) !important;
  border-radius: 4px !important; font-family: var(--font-mono);
}
.tv-frame, .tv-screen { background: var(--c-ink0) !important; }
.tv-frame { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 24px 48px -24px rgba(0, 0, 0, 0.6) !important; }

/* Comparison table */
.compare-scroll { border-radius: 12px; background: var(--surface); box-shadow: none; border-color: var(--line); }
.compare-table thead th { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.compare-table thead th.col-klipa { color: var(--tally-text); font-size: 12px; }
.compare-table .col-klipa { background: rgba(255, 91, 36, 0.06); }
.compare-table tbody tr + tr th, .compare-table tbody tr + tr td { border-top-color: var(--line); }
.cmp-yes svg { color: var(--success); }
.cmp-mid svg { color: var(--warning); }
.cmp-no svg { color: var(--text-3); }
.compare-note { color: var(--text-3); }

/* Guides hub */
.learn-hub-col { border-radius: 12px; background: var(--surface); box-shadow: none; }
.learn-hub-h { font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.learn-hub-list a { color: var(--text); }
.learn-hub-list li + li { border-top-color: var(--line); }
.learn-hub-list a:hover, .learn-hub-all { color: var(--tally-text); }


/* Colour discipline: the tally accent marks what is live or focused; the
   rest of the mock uses the channel plate palette (IDENTITY.md section 3). */
.hero-channel:nth-child(1) { background: #2E4550 !important; }
.hero-channel:nth-child(2) { background: #4A3328 !important; }
.hero-channel:nth-child(3) { background: #2F4A3E !important; }
.hero-channel:nth-child(4) { background: #3D2F4F !important; }
.hero-channel:nth-child(5) { background: #51442A !important; }
.hero-channel:nth-child(6) { background: #2B3A55 !important; }
.hero-recent-thumb { background: #2E4550 !important; }
.hero-recent:nth-child(2) .hero-recent-thumb { background: #4A2E36 !important; }
.hero-recent:nth-child(3) .hero-recent-thumb { background: #2F4A3E !important; }
.hero-ctrl-main { background: var(--c-fg1) !important; box-shadow: none !important; }
.epg-row .slot { background: var(--c-ink2) !important; box-shadow: none !important; }
.epg-row .slot.now { background: var(--c-ink3) !important; box-shadow: inset 2px 0 0 var(--c-tally) !important; }
.epg-row .slot.now::after { display: none; }
.epg-row .ch-dot { background: var(--c-fg3) !important; box-shadow: none !important; }
.scene-mv .mv-cell:nth-child(1) { background: #2E4550 !important; }
.scene-mv .mv-cell:nth-child(2) { background: #2F4A3E !important; }
.scene-mv .mv-cell::before { opacity: 0.35; }
.scene-pip .pip-window {
  background: #2E4550 !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.25) !important;
  animation: none !important;
}
.scene-pip .pip-msg.out { background: var(--c-ink2) !important; color: var(--c-fg1) !important; box-shadow: none !important; }
.scene-pip .pip-composer-send { background: var(--c-ink2) !important; }
.scene-fav .fav-row .thumb { background: #2E4550 !important; }
.scene-fav .fav-row:nth-child(2) .thumb { background: #51442A !important; }
.scene-fav .fav-row:nth-child(3) .thumb { background: #2F4A3E !important; }
.scene-fav .fav-row:nth-child(4) .thumb { background: #2B3A55 !important; }
.scene-fav .fav-row:nth-child(5) .thumb { background: #3D2F4F !important; }
.scene-fav .badge { background: transparent !important; color: var(--c-fg2) !important; border-color: rgba(255, 255, 255, 0.16) !important; }
.tv-frame, .tv-frame:hover { transform: none !important; animation: none !important; }
.feature-meta span { font-family: var(--font-mono) !important; font-size: 12px !important; letter-spacing: 0.04em !important; }
.hero-actions .btn-soft .store-glyph[viewBox="0 0 800 800"] path:first-of-type { display: none; }

/* The landing's own reveal animation is retired: content is visible at once. */
.reveal { opacity: 1 !important; transform: none !important; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; }
  .hero-visual { height: clamp(420px, 110vw, 560px); }
}
@media (max-width: 560px) {
  .hero-actions { grid-template-columns: 1fr; width: 100%; }
}