/* =================================================
   Schelp landing — production styles
   Tokens come from ../../colors_and_type.css
   ================================================= */

* { box-sizing: border-box; }
/* overflow-x: clip (not hidden) — keeps horizontal overflow out of view
   WITHOUT creating a scrolling context, which would break `position: sticky`
   on the scrollytelling phone. Supported in Chrome/Edge 90+, Firefox 81+, Safari 16+. */
html, body { margin: 0; min-height: 100vh; min-height: 100svh; background: var(--bg-page); overflow-x: clip; }
body { font-family: var(--font-body); color: var(--fg-1); position: relative; }

/* ---------- A11y: skip link & focus ---------- */
.skip-link {
  position: absolute; top: -40px; left: 16px;
  background: var(--coral-500); color: #fff;
  padding: 10px 18px; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 14px;
  z-index: 100;
  transition: top 180ms var(--ease-out);
}
.skip-link:focus { top: 16px; outline: 2px solid #fff; outline-offset: 2px; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible { outline-offset: 4px; }

/* ---------- Ambient backgrounds ---------- */
.bg-wash {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(40vw 60vh at 85% 0%, rgba(75,46,168,0.45) 0%, transparent 60%),
    radial-gradient(50vw 40vh at 0% 100%, rgba(254,107,107,0.16) 0%, transparent 65%),
    radial-gradient(60vw 50vh at 50% 50%, rgba(31,21,65,0.55) 0%, transparent 70%);
}
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Nav ---------- */
.nav {
  position: relative; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 40px; max-width: 1440px; margin: 0 auto;
  /* clear the notch on landscape / cover viewports */
  padding-top: max(28px, env(safe-area-inset-top));
}
.nav .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav .brand img { width: 36px; height: 36px; display: block; }
.nav .brand span {
  font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.04em;
  background: var(--grad-shell); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav .links { display: flex; gap: 28px; color: var(--fg-3); font-size: 14px; }
.nav .links a { color: var(--fg-3); text-decoration: none; transition: color 120ms var(--ease-out); }
.nav .links a:hover { color: var(--fg-1); }
.nav .lang {
  display: inline-flex; gap: 6px; align-items: center;
  font-size: 13px; color: var(--fg-4);
  font-family: var(--font-mono); font-weight: 500;
  background: transparent; border: 1px solid transparent;
  padding: 6px 10px; border-radius: 999px;
  cursor: pointer;
  transition: color 120ms var(--ease-out), border-color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.nav .lang b { color: var(--fg-1); font-weight: 600; }
.nav .lang:hover { color: var(--fg-2); border-color: var(--border-subtle); background: rgba(20,20,23,0.4); }
.nav .lang:active { transform: scale(0.97); }

/* ---------- Hero ---------- */
.hero {
  position: relative; z-index: 4;
  max-width: 1440px; margin: 0 auto;
  padding: 60px 40px 80px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; align-items: center;
}
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 8px;
  border: 1px solid var(--border-subtle);
  background: rgba(20,20,23,0.6); backdrop-filter: blur(12px);
  border-radius: 999px; font-size: 12px; color: var(--fg-2); font-weight: 500;
  letter-spacing: 0.02em; margin-bottom: 28px;
}
.badge .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--coral-500); box-shadow: 0 0 0 4px rgba(254,107,107,0.18); animation: pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(254,107,107,0.18) } 50% { box-shadow: 0 0 0 8px rgba(254,107,107,0.04) } }
.badge .eq { display: inline-flex; gap: 2px; align-items: end; margin-right: 2px; }
.badge .eq i {
  width: 2px; background: var(--coral-500); border-radius: 1px;
  animation: eq 880ms cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}
.badge .eq i:nth-child(1) { height: 6px;  animation-delay: 0ms;   }
.badge .eq i:nth-child(2) { height: 10px; animation-delay: 140ms; }
.badge .eq i:nth-child(3) { height: 5px;  animation-delay: 280ms; }
@keyframes eq {
  0%   { transform: scaleY(0.35); }
  100% { transform: scaleY(1);    }
}
.badge .eq i { transform-origin: bottom; }

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6.4vw, 92px);
  line-height: 1.02; letter-spacing: -0.045em;
  margin: 0 0 24px; text-wrap: balance;
  padding-bottom: 0.06em;
}
.display .shell {
  background: var(--grad-shell);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.lede {
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55;
  color: var(--fg-3); max-width: 540px; margin: 0 0 36px;
}
.lede em { color: var(--fg-1); font-style: normal; font-weight: 500; }

/* Coming-soon line (replaces the email form while the app is pre-launch) */
.hero-soon {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(16px, 1.5vw, 19px); letter-spacing: -0.01em;
  color: var(--fg-2); margin: 8px 0 0;
}
.hero-soon::before {
  content: ""; width: 9px; height: 9px; border-radius: 999px; flex: 0 0 9px;
  background: var(--coral-500); box-shadow: 0 0 0 4px rgba(254,107,107,0.18);
  animation: pulse 2.4s var(--ease-out) infinite;
}

/* ---------- Email form ---------- */
.form {
  max-width: 520px; display: flex; gap: 8px;
  background: var(--ink-30); border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: 6px 6px 6px 22px;
  transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.form:focus-within { border-color: var(--coral-500); box-shadow: 0 0 0 5px rgba(254,107,107,0.18), var(--shadow-glow-coral); }
.form.is-error { border-color: var(--danger); }
.form input {
  background: transparent; border: 0; outline: 0;
  color: var(--fg-1); font: inherit; font-size: 15px;
  flex: 1; min-width: 0;
}
.form input::placeholder { color: var(--fg-4); }
.form button {
  border: 0; cursor: pointer;
  background: var(--coral-500); color: #fff;
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; letter-spacing: -0.005em;
  padding: 0 22px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 220ms var(--ease-out);
  white-space: nowrap;
}
.form button:hover:not(:disabled) { background: var(--coral-400); box-shadow: var(--shadow-glow-coral); }
.form button:active:not(:disabled) { background: var(--coral-700); transform: scale(0.97); }
.form button:disabled { opacity: 0.7; cursor: not-allowed; }
.form button .spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 999px;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.form-help { color: var(--fg-4); font-size: 12px; margin-top: 14px; padding-left: 22px; }
.form-help b { color: var(--coral-500); font-weight: 600; }
.form-help a { color: var(--fg-3); text-decoration: underline; text-decoration-color: var(--ink-60); text-underline-offset: 2px; }
.form-help a:hover { color: var(--fg-1); }
.form-message {
  margin-top: 12px; padding: 10px 18px;
  border-radius: 14px; font-size: 13px;
  display: none; align-items: center; gap: 8px;
  animation: slideIn 220ms var(--ease-out);
}
.form-message svg { width: 16px; height: 16px; flex-shrink: 0; }
.form-message.is-visible { display: inline-flex; }
.form-message.is-success { background: rgba(63, 207, 142, 0.12); color: var(--success); border: 1px solid rgba(63, 207, 142, 0.3); }
.form-message.is-error   { background: rgba(255, 92, 108, 0.12); color: var(--danger);  border: 1px solid rgba(255, 92, 108, 0.3); }
@keyframes slideIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Phone mock — faithful to the real RN app ---------- */
.phone-wrap {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 720px;
}
.phone-halo {
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 50% at 30% 35%, rgba(254,107,107,0.22) 0%, transparent 70%),
    radial-gradient(55% 55% at 70% 70%, rgba(123,98,255,0.32) 0%, transparent 70%);
  filter: blur(24px); pointer-events: none;
}
.phone {
  width: 360px; height: 720px;
  background: #000; border-radius: 54px; padding: 8px;
  box-shadow:
    0 0 0 1.5px var(--ink-60),
    0 50px 100px -30px rgba(0,0,0,0.85),
    0 30px 80px -20px rgba(75,46,168,0.45);
  position: relative;
}
.phone::before {
  content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 30px; background: #000; border-radius: 999px; z-index: 10;
}
.screen {
  background: #0D0D0D; border-radius: 46px;
  width: 100%; height: 100%; overflow: hidden;
  position: relative; display: flex; flex-direction: column;
}
/* Hide all scrollbars inside the phone — content can still scroll, just no UI chrome */
.phone *,
.phone *::-webkit-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.phone *::-webkit-scrollbar { display: none; width: 0; height: 0; }
.status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 30px 0; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  flex: 0 0 auto;
  position: relative; z-index: 10;
  background: #0D0D0D;
  height: 28px;
}
.status .right { display: flex; gap: 6px; align-items: center; }
.status .right svg { width: 16px; height: 12px; color: #fff; }

.home {
  padding: 40px 14px 130px;       /* bottom: tab bar 60 + mini-player ~52 + buffer */
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
  /* Fade-out tail so content dissolves before hitting the mini-player */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 130px), transparent calc(100% - 30px));
          mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 130px), transparent calc(100% - 30px));
}
/* Lock every dashboard section at its intrinsic height so the hero panel
   doesn't get squeezed to zero when the column overflows. */
.home > * { flex-shrink: 0; }

/* -------------------- 1a. Hero panel (Dashboard banner) -------------------- */
.hero-panel {
  position: relative; overflow: hidden;
  background: #0F0F14;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 22px;
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 14px;
  isolation: isolate;
}
.hero-panel::before { /* top inner sheen — matches HeroGradient hairline */
  content: ""; position: absolute; left: 1px; right: 1px; top: 1px;
  height: 1px; background: rgba(255,255,255,0.06); border-radius: 22px 22px 0 0;
  pointer-events: none;
}
.hero-panel::after { /* diagonal coral + purple glows */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(255,107,107,0.18) 0%, transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(123,97,255,0.18) 0%, transparent 70%);
}

.hp-top { display: flex; align-items: center; gap: 9px; }
.hp-wordmark {
  font-family: var(--font-brand); font-weight: 700; font-size: 18px;
  color: #FFFFFF; letter-spacing: -0.02em; line-height: 1;
}
.hp-spacer { flex: 1; }
.hp-avatar {
  width: 30px; height: 30px; border-radius: 999px;
  background: linear-gradient(135deg, #2B1A66, #4B2EA8);
  color: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.10);
}
.hp-avatar svg { width: 18px; height: 18px; }
.hp-sub {
  font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,0.6);
  margin: -4px 0 2px;
}

/* BrandMark — real app logo, with a subtle coral halo so it doesn't sit flat */
.brandmark {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: block; object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 107, 107, 0.28));
  animation: bm-glow 2400ms ease-in-out infinite alternate;
}
@keyframes bm-glow {
  0%   { filter: drop-shadow(0 0 4px rgba(255, 107, 107, 0.18)); }
  100% { filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.45)); }
}

/* KPI grid 3-col */
.hp-kpi {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: rgba(0,0,0,0.18); border-radius: 14px;
  overflow: hidden;
}
.hp-kpi .cell {
  padding: 9px 8px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border-left: 1px solid rgba(255,255,255,0.05);
}
.hp-kpi .cell:first-child { border-left: 0; }
.hp-kpi .v {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em; color: #fff; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  display: inline-flex; align-items: center; gap: 1px;
}
.hp-kpi .v .flame {
  display: inline-block; transform: translateY(-1px); margin-right: 3px;
  filter: drop-shadow(0 0 4px rgba(255,107,107,0.45));
}
.hp-kpi .l {
  font-family: var(--font-body); font-size: 9.5px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
}

/* HeroCTA — resume listening card */
.hp-cta {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 8px;
}
.hp-cta .cov {
  width: 42px; height: 42px; border-radius: 10px; flex: 0 0 42px;
  border: 1px solid rgba(255,255,255,0.08);
  object-fit: cover;
}
.hp-cta .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hp-cta .eyebrow {
  font-family: var(--font-body); font-size: 8.5px; font-weight: 700;
  color: var(--coral-500); letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 1px;
}
.hp-cta .t {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  color: #fff; line-height: 1.2; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp-cta .s {
  font-family: var(--font-body); font-size: 10.5px;
  color: rgba(255,255,255,0.5); margin-top: 1px;
}
.hp-cta .chev {
  width: 18px; height: 18px; color: rgba(255,255,255,0.45);
  flex: 0 0 18px;
}
.hp-cta .play {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--coral-500); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(255,107,107,0.4);
}
.hp-cta .play svg { width: 14px; height: 14px; }

/* -------------------- 1b. Continue Listening carousel -------------------- */
.cl {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 4px;
}
.cl-label {
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.cl-row {
  display: flex; gap: 10px; overflow: hidden;
  margin: 0 -4px; padding: 0 4px;
}
.cl-card {
  flex: 0 0 96px; display: flex; flex-direction: column; gap: 6px;
}
.cl-card .cov {
  width: 96px; height: 96px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
  background: var(--ink-30);
}
.cl-card .cov img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cl-card .cov::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgba(0,0,0,0.4);
}
.cl-card .cov i.prog {
  position: absolute; left: 0; bottom: 0; height: 3px;
  background: var(--coral-500); z-index: 1;
  box-shadow: 0 0 6px rgba(255,107,107,0.6);
}
.cl-card .t {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
  color: rgba(255,255,255,0.92); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -------------------- Section labels (shared) -------------------- */
.sec-label {
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* -------------------- Suggerimenti della settimana -------------------- */
.sug-section {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 4px;
}
.sug-row {
  display: flex; gap: 10px; overflow: hidden;
  margin: 0 -4px; padding: 0 4px;
}
.sug-card {
  flex: 0 0 168px;
  background: var(--ink-30);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.sug-card .cov {
  width: 100%; height: 96px; border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  background: var(--ink-40);
}
.sug-card .cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sug-card .t {
  font-family: var(--font-display); font-weight: 600; font-size: 11.5px;
  color: rgba(255,255,255,0.95); line-height: 1.25; letter-spacing: -0.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sug-card .d {
  font-family: var(--font-body); font-size: 10px;
  color: rgba(255,255,255,0.5); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sug-card .meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto;
}
.sug-card .tag {
  background: var(--ink-40); color: var(--violet-300);
  font-size: 9px; font-weight: 700;
  padding: 3px 7px; border-radius: 6px;
  letter-spacing: 0.02em;
}
.sug-card .tag.cat-cinema { color: #FF9DA6; }
.sug-card .tag.cat-sport  { color: #F5B947; }
.sug-card .tag.cat-tech   { color: var(--violet-300); }
.sug-card .tag.cat-cultura{ color: #3FCF8E; }
.sug-card .tag.cat-storia { color: #FFB347; }
.sug-card .dur {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-body); font-size: 9.5px; font-weight: 500;
  color: rgba(255,255,255,0.5);
}
.sug-card .dur svg { width: 10px; height: 10px; stroke-width: 2; }

/* -------------------- La tua giornata (day strip) -------------------- */
.day-section {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 4px;
}
.day-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
  background: rgba(0,0,0,0.18); border-radius: 12px;
  padding: 10px 6px;
}
.day-cell {
  display: flex; flex-direction: column; align-items: center;
  gap: 7px; padding: 2px 0;
}
.day-cell .n {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.45);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.day-cell .dot {
  width: 5px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.15);
}
.day-cell.past .n  { color: rgba(255,255,255,0.7); }
.day-cell.past .dot { background: rgba(255,255,255,0.35); }
.day-cell.past.done .dot { background: var(--success); }
.day-cell.today .n {
  color: #fff;
  background: var(--coral-500);
  width: 26px; height: 26px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(255,107,107,0.4);
  margin-top: -3px;
}
.day-cell.today .dot { background: var(--coral-500); box-shadow: 0 0 6px rgba(255,107,107,0.6); }
.day-cell.future .dot {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  width: 5px; height: 5px;
}

/* -------------------- 1c. MiniPlayer (above tab bar) -------------------- */
.miniplayer {
  position: absolute; left: 0; right: 0; bottom: 60px;
  background: rgba(20,20,25,0.95);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 8px 12px 8px;
}
.miniplayer .progress {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: rgba(255,255,255,0.1);
}
.miniplayer .progress i {
  display: block; height: 100%; width: 35%;
  background: var(--coral-500);
}
.miniplayer .row {
  display: flex; align-items: center; gap: 10px;
}
.miniplayer .cov {
  width: 36px; height: 36px; border-radius: 8px; flex: 0 0 36px;
  border: 1px solid rgba(255,255,255,0.06);
  object-fit: cover;
}
.miniplayer .t {
  flex: 1; min-width: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  color: #fff; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.miniplayer .wave {
  display: flex; align-items: end; gap: 1.5px;
  height: 16px; width: 56px; flex: 0 0 56px;
}
.miniplayer .wave i {
  width: 2px; border-radius: 1px;
  background: rgba(255,255,255,0.25);
}
.miniplayer .wave i.played { background: #4ADE80; }
.miniplayer .time {
  font-family: var(--font-mono); font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums;
}
.miniplayer .play {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--coral-500); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.miniplayer .play svg { width: 12px; height: 12px; }

/* -------------------- 1e. Tab bar (icon-only, faithful 5-tabs) -------------------- */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60px;
  background: rgba(20,20,25,0.96);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center; padding: 0 4px;
}
.tab {
  display: flex; align-items: center; justify-content: center;
  height: 100%; position: relative;
  color: rgba(255,255,255,0.5);
}
.tab svg { width: 22px; height: 22px; stroke-width: 1.5; }
.tab.active { color: var(--coral-500); }
.tab.active::after {
  content: ""; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 999px; background: var(--coral-500);
  box-shadow: 0 0 6px rgba(255,107,107,0.6);
}
.tab.fab-slot { /* keep grid cell empty under the FAB */
  visibility: hidden;
}

/* -------------------- 1f. FAB "Genera" + sonar rings -------------------- */
.fab-wrap {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 26px; /* tab bar is 60px, FAB peeks ~14px above its top edge */
  width: 48px; height: 48px;
  z-index: 3;
}
.fab {
  width: 48px; height: 48px; border-radius: 999px;
  background: linear-gradient(135deg, #FF8E8E 0%, #FF6B6B 60%, #F25060 100%);
  box-shadow: 0 8px 16px rgba(255,107,107,0.4);
  display: flex; align-items: center; justify-content: center;
  color: #fff; position: relative; z-index: 2;
}
.fab svg { width: 22px; height: 22px; stroke-width: 2; }
.fab-wrap .sonar {
  position: absolute; inset: 0; border-radius: 999px;
  border: 1.5px solid rgba(255,107,107,0.45);
  animation: sonar 2200ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none; z-index: 1;
}
.fab-wrap .sonar.s2 { animation-delay: 800ms; }
.fab-wrap .sonar.s3 { animation-delay: 1500ms; }
@keyframes sonar {
  0%   { opacity: 0.5; transform: scale(1); }
  90%, 100% { opacity: 0; transform: scale(1.95); }
}

.ring { position: absolute; pointer-events: none; opacity: 0.08; }
.ring-1 { top: -60px; right: -120px; width: 480px; }
.ring-2 { bottom: -100px; left: -160px; width: 420px; }

/* ---------- Countdown ---------- */
.countdown-wrap { position: relative; z-index: 3; max-width: 1440px; margin: 0 auto; padding: 60px 40px 40px; }
.countdown-card {
  background: var(--ink-30); border: 1px solid var(--border-subtle);
  border-radius: 28px; padding: 36px 48px;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center;
}
.countdown-card .eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--coral-500); font-weight: 700; margin-bottom: 16px; }
.countdown-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--fg-1); }
.countdown-card p { color: var(--fg-3); font-size: 15px; line-height: 1.55; margin: 0; }
.counter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.counter .unit { background: var(--ink-10); border-radius: 16px; padding: 18px 8px; text-align: center; border: 1px solid var(--border-subtle); }
.counter .unit .n { font-family: var(--font-display); font-weight: 800; font-size: 38px; line-height: 1; letter-spacing: -0.04em; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.counter .unit .l { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-4); font-weight: 600; margin-top: 8px; }
.countdown-arrived { display: none; }
.countdown-card.is-arrived .counter { display: none; }
.countdown-card.is-arrived .countdown-arrived {
  display: flex; align-items: center; gap: 14px;
  background: var(--coral-500); color: #fff;
  padding: 20px 24px; border-radius: 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.02em;
}

/* ============================================================
   How it works — scroll-driven storytelling
   ============================================================ */
.howitworks {
  position: relative; z-index: 3;
  max-width: 1280px; margin: 0 auto;
  padding: 80px 40px 100px;
}
.hiw-intro {
  max-width: 760px; margin: 0 auto 72px;
  text-align: center;
}
.hiw-intro .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--coral-500); font-weight: 600;
  margin: 0;
}
.hiw-intro h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 4.4vw, 56px);
  letter-spacing: -0.025em; line-height: 1.05;
  margin: 18px 0 0; text-wrap: balance;
}

.hiw-scrolly {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 100px; align-items: start;
  position: relative;
}

.hiw-text {
  display: flex; flex-direction: column;
  grid-column: 1; grid-row: 1;
}

.hiw-step {
  min-height: 78vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 0;
  opacity: 0.32;
  filter: blur(0.4px);
  transform: translateY(14px);
  transition:
    opacity 600ms var(--ease-out),
    filter  600ms var(--ease-out),
    transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
.hiw-step.is-active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.hiw-step-num {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(64px, 9vw, 120px);
  letter-spacing: -0.04em; line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--coral-500);
  margin-bottom: 18px;
  user-select: none;
}
.hiw-step h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.02em; line-height: 1.08;
  margin: 0 0 14px; text-wrap: balance;
  color: var(--fg-1);
}
.hiw-step p {
  font-size: 17px; line-height: 1.55;
  color: var(--fg-3);
  max-width: 480px; margin: 0;
}
.hiw-bullets {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.hiw-bullets li {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 6px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  color: var(--fg-2);
}

/* Multi-substep step (step 1 contains 4 sub-scenes).
   The macro step header (number + heading + body + bullets) is sticky at
   the top of the step's container — it stays put while the 4 substeps
   scroll past on the right of the rail, and the phone (column 2) also
   stays sticky in parallel. */
.hiw-step-multi {
  min-height: auto;
  padding: 60px 0 0;
  display: block; /* override flex from .hiw-step */
  opacity: 1; filter: none; transform: none;
}
.hiw-step-head {
  position: sticky;
  top: calc(50vh - 280px);  /* roughly the same vertical as the phone */
  padding-bottom: 28px;
  z-index: 2;
  isolation: isolate;
}
/* Opaque shield behind the head — masks any substep text that might bleed
   through during the sticky→release transition between substeps and the next
   step. Soft fade at the bottom so the edge doesn't read as a hard cut. */
.hiw-step-head::before {
  content: "";
  position: absolute;
  inset: -36px -60px -32px -48px;
  /* Soft elliptical dark wash anchored behind the text. Feathers out on every
     side — no hard right edge, no square corners — so it blends into the ambient
     gradient while still masking substep text that scrolls behind the sticky head. */
  background: radial-gradient(
    ellipse 64% 88% at 27% 46%,
    var(--bg-page) 0%,
    var(--bg-page) 42%,
    rgba(10, 10, 11, 0) 80%
  );
  z-index: -1;
  pointer-events: none;
}
.hiw-step-head .hiw-step-num,
.hiw-step-head h3,
.hiw-step-head p,
.hiw-step-head .hiw-bullets { margin-left: 0; }
.hiw-substeps {
  margin-top: 180px;
  position: relative;
}

/* Architecture:
   - `.substeps-display` is a sticky slot pinned under the step header. Inside,
     the 4 substeps are stacked absolutely on top of each other — only the
     `.is-active` one is visible (opacity fade).
   - `.substep-spacer` divs (one per substep) sit below in normal flow, each
     100vh tall, and act as scroll consumers + IntersectionObserver triggers.
     As each spacer enters the viewport's central band, the JS toggles which
     substep is active. */
.substeps-display {
  position: sticky;
  top: calc(50vh + 80px);
  min-height: 200px;
  margin-bottom: 0;
}
.hiw-substep {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
.hiw-substep.is-active {
  opacity: 1;
  pointer-events: auto;
}

.substep-spacer {
  height: 100vh;
  pointer-events: none;
}

.hiw-sub-tag {
  /* Substep number chips (1.1, 1.2, …) removed by request — hidden on every viewport. */
  display: none;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--coral-500);
  letter-spacing: 0.08em;
  padding: 4px 10px;
  background: rgba(255,107,107,0.12);
  border: 1px solid rgba(255,107,107,0.3);
  border-radius: 999px;
  align-self: flex-start;
}
.hiw-sub-content { display: flex; flex-direction: column; gap: 8px; }
.hiw-sub-content h4 {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.015em; line-height: 1.2;
  color: rgba(255,255,255,0.95);
  margin: 0;
}
.hiw-sub-content p {
  font-family: var(--font-body); font-size: 15px;
  line-height: 1.55;
  color: var(--fg-3);
  margin: 0;
  max-width: 440px;
}

/* gen-sub — 4 sub-scenes inside scene-generate, crossfade */
.scene-generate { /* keep parent absolute */ }
.gen-sub {
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
.gen-sub.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Sticky phone wrapper ---------- */
.hiw-phone-wrap {
  position: sticky; top: max(40px, calc(50vh - 360px));
  width: 360px; height: 720px;
  align-self: start;
  grid-column: 2; grid-row: 1;
}
.hiw-phone-wrap::before {
  content: ""; position: absolute; inset: -15% -25%;
  background: radial-gradient(
    60% 50% at 50% 50%,
    var(--scene-tint, rgba(255,107,107,0.20)) 0%,
    transparent 70%
  );
  filter: blur(40px); z-index: -1;
  transition: background 700ms var(--ease-out);
  pointer-events: none;
}
.hiw-phone-wrap[data-scene="generate"] { --scene-tint: rgba(255,107,107,0.24); }
.hiw-phone-wrap[data-scene="tune"]     { --scene-tint: rgba(123,97,255,0.24); }
.hiw-phone-wrap[data-scene="plan"]     { --scene-tint: rgba(255,179,71,0.22); }
.hiw-phone-wrap[data-scene="detail"]   { --scene-tint: rgba(52,211,153,0.24); }

.hiw-phone-wrap .phone { margin: 0; }

/* Mobile-only macro-step title + caption slots inside the pinned stage (see
   <=900px block). Hidden on desktop, where the rail's own text carries the story. */
.hiw-m-title { display: none; }
.hiw-m-subtitle { display: none; }
.hiw-m-caption { display: none; }
/* Mobile-only trailing scroll spacer (see <=900px block). */
.hiw-tail-spacer { display: none; }
@keyframes hiwCapIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* Scenes (overlapping in the .screen) */
.scene {
  position: absolute; left: 0; right: 0;
  top: 40px;
  bottom: 0;
  opacity: 0; pointer-events: none;
  transform: translateY(8px) scale(0.99);
  transition:
    opacity 450ms var(--ease-out),
    transform 450ms var(--ease-out);
}
.scene.is-active {
  opacity: 1; pointer-events: auto;
  transform: none;
}
.sc-pad {
  padding: 24px 18px 18px;
  display: flex; flex-direction: column; gap: 16px;
  height: 100%;
}
.sc-header {
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; letter-spacing: -0.01em;
  color: rgba(255,255,255,0.55);
  text-align: center;
}

/* =====================================================
   SCENE 1 — Generate (matches GenerateScreen.tsx + InputModeTabs)
   ===================================================== */
.g-steps {
  display: flex; align-items: center; gap: 4px;
  padding: 0 4px;
}
.g-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.g-step-c {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--ink-30);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
}
.g-step-c svg { width: 14px; height: 14px; }
.g-step.is-active .g-step-c {
  background: var(--coral-500); border-color: var(--coral-500);
  color: #fff; box-shadow: 0 4px 12px rgba(255,107,107,0.4);
}
.g-step-l {
  font-family: var(--font-body); font-size: 8.5px; font-weight: 600;
  color: rgba(255,255,255,0.4); letter-spacing: 0.02em;
}
.g-step.is-active .g-step-l { color: rgba(255,255,255,0.92); }
.g-step-line {
  flex: 1 1 0; height: 1px; background: rgba(255,255,255,0.08);
  margin-top: -10px;
}

/* InputModeTabs (4 tabs row, faithful to imt.* StyleSheet) */
.imt-wrap {
  flex-direction: row;
  background: var(--ink-30);
  border-radius: 16px;
  padding: 6px;
  gap: 4px;
  border: 1px solid rgba(255,255,255,0.05);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.imt-tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 4px 12px;
  border-radius: 12px;
  background: transparent;
}
.imt-icon {
  width: 28px; height: 28px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  display: flex; align-items: center; justify-content: center;
}
.imt-icon svg { width: 14px; height: 14px; }
.imt-text {
  font-family: var(--font-body); font-size: 9.5px; font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.01em;
}
.imt-tab.is-active .imt-icon {
  background: var(--coral-500); border-color: var(--coral-500);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255,107,107,0.45);
}
.imt-tab.is-active .imt-text { color: #fff; }
.imt-dot {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 999px; background: var(--coral-500);
}

/* Prompt area */
.gen-prompt { display: flex; flex-direction: column; gap: 8px; }
.gen-prompt-label {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.gen-prompt-box {
  background: var(--ink-30);
  border: 1.5px solid rgba(255,107,107,0.4);
  border-radius: 14px;
  padding: 14px 14px;
  min-height: 92px;
  font-family: var(--font-body); font-size: 12.5px;
  color: rgba(255,255,255,0.92); line-height: 1.45;
  display: flex; align-items: flex-start; flex-wrap: wrap;
  box-shadow: 0 0 0 4px rgba(255,107,107,0.06);
}
.gen-prompt-text { color: rgba(255,255,255,0.55); }
.gen-caret {
  display: inline-block;
  width: 1.5px; height: 14px; margin-left: 2px;
  background: var(--coral-500); vertical-align: middle;
  animation: gen-blink 1100ms steps(2) infinite;
}
@keyframes gen-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* QuickModePanel — amber recap (matches QuickModePanel in GenerateScreen.tsx) */
.qm-panel {
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(255,107,107,0.12) 0%, rgba(245,158,11,0.08) 100%);
  display: flex; flex-direction: column; gap: 10px;
}
.qm-header {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  color: #F59E0B;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.qm-header svg { width: 12px; height: 12px; }
.qm-chips {
  display: flex; align-items: stretch;
}
.qm-chip {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 2px 0;
}
.qm-chip-ico {
  width: 28px; height: 28px; border-radius: 9px;
  background: rgba(245,158,11,0.15);
  color: #F59E0B;
  display: flex; align-items: center; justify-content: center;
}
.qm-chip-ico svg { width: 14px; height: 14px; }
.qm-chip-l {
  font-family: var(--font-body); font-size: 9px; font-weight: 500;
  color: rgba(255,255,255,0.55);
}
.qm-chip-v {
  font-family: var(--font-display); font-size: 12px; font-weight: 800;
  color: rgba(255,255,255,0.95); letter-spacing: -0.005em;
}
.qm-sep {
  width: 1px;
  background: rgba(255,255,255,0.06);
  margin: 4px 0;
}

.gen-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; border-radius: 14px; border: 0;
  background: linear-gradient(135deg, #FF8E8E 0%, #FF6B6B 60%, #F25060 100%);
  color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: -0.005em;
  box-shadow: 0 6px 16px rgba(255,107,107,0.4);
  cursor: default;
}
.gen-cta svg { width: 14px; height: 14px; }
.gen-cta-amber {
  background: linear-gradient(90deg, #F59E0B 0%, #F97316 100%);
  box-shadow: 0 6px 16px rgba(249,115,22,0.4);
}
.gen-cta-purple {
  background: linear-gradient(135deg, #FF6B6B 0%, #7B61FF 100%);
  box-shadow: 0 6px 16px rgba(123,97,255,0.45);
}

/* Step indicator states for sub-scenes */
.g-step.is-done .g-step-c {
  background: var(--violet-500); border-color: var(--violet-500);
  color: #fff;
}
.g-step.is-done .g-step-c svg { width: 12px; height: 12px; }
.g-step.is-done .g-step-l { color: rgba(255,255,255,0.85); font-weight: 700; }
.g-step-line.is-filled {
  background: linear-gradient(90deg, var(--coral-500), var(--violet-500));
  height: 2px;
  margin-top: -10.5px;
}

/* Violet input-mode tab variant (Advanced) */
.imt-tab.is-active.is-violet .imt-icon {
  background: var(--violet-500); border-color: var(--violet-500);
  box-shadow: 0 2px 8px rgba(123,97,255,0.45);
}
.imt-tab.is-active.is-violet .imt-dot {
  background: var(--violet-500);
}

/* StyleSelectorButton row (used in advanced + config sub-scenes) */
.ssb-row { display: flex; flex-direction: column; gap: 8px; }
.ssb {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink-30);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 10px 12px;
}
.ssb-ico {
  width: 32px; height: 32px; border-radius: 10px;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  color: var(--c);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 32px;
}
.ssb-ico svg { width: 16px; height: 16px; }
.ssb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ssb-label {
  font-family: var(--font-body); font-size: 9.5px; font-weight: 500;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.ssb-value {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: rgba(255,255,255,0.95); letter-spacing: -0.005em;
}
.ssb-chev { width: 14px; height: 14px; color: rgba(255,255,255,0.4); }

/* Topic preview card (sources / config sub-scenes) */
.topic-preview {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink-30);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 10px 12px;
}
.topic-ico {
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255,107,107,0.18);
  color: var(--coral-500);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 26px;
}
.topic-ico svg { width: 13px; height: 13px; }
.topic-text {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 500;
  color: rgba(255,255,255,0.85);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Section header inside step (sources / config) */
.gen-section-head { display: flex; flex-direction: column; gap: 2px; }
.gen-section-title {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: rgba(255,255,255,0.95); letter-spacing: -0.01em;
}
.gen-section-sub {
  font-family: var(--font-body); font-size: 11px;
  color: rgba(255,255,255,0.5);
}

/* SegmentedControl (AI Mode | Mie fonti) */
.seg-ctrl {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ink-30);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 3px;
  gap: 0;
  position: relative;
}
.seg-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.55);
}
.seg-tab svg { width: 12px; height: 12px; }
.seg-tab.is-active {
  background: linear-gradient(90deg, var(--violet-500), #9B8AFF);
  color: #fff;
  box-shadow: 0 4px 10px rgba(123,97,255,0.35);
}

/* AI Mode info panel */
.ai-panel {
  display: flex;
  background: linear-gradient(135deg, rgba(123,97,255,0.18) 0%, rgba(255,107,107,0.06) 100%);
  border: 1px solid rgba(123,97,255,0.2);
  border-radius: 14px;
  overflow: hidden;
}
.ai-accent {
  width: 3px;
  background: linear-gradient(180deg, var(--violet-500), var(--coral-500));
  border-radius: 14px 0 0 14px;
}
.ai-content {
  flex: 1; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.ai-head {
  display: flex; gap: 10px; align-items: flex-start;
}
.ai-ico {
  width: 30px; height: 30px; border-radius: 999px;
  background: rgba(123,97,255,0.2);
  color: var(--violet-500);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 30px;
}
.ai-ico svg { width: 15px; height: 15px; }
.ai-title {
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  color: rgba(255,255,255,0.95);
}
.ai-desc {
  font-family: var(--font-body); font-size: 10.5px;
  color: rgba(255,255,255,0.6); line-height: 1.4;
  margin-top: 2px;
}
.ai-features {
  display: flex; flex-direction: column; gap: 7px;
  padding-left: 2px;
}
.ai-feat {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.9);
}
.ai-feat svg {
  width: 13px; height: 13px;
  color: var(--violet-500);
  flex: 0 0 13px;
}

/* Nav row (back + next) */
.nav-row {
  display: flex; gap: 10px;
  margin-top: auto;
}
.nav-back {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--ink-30);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 44px;
}
.nav-back svg { width: 16px; height: 16px; }
.nav-next {
  flex: 1; margin-top: 0;
}

/* Config cards (duration / search depth) */
.cfg-card {
  background: var(--ink-30);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.cfg-head {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.cfg-head svg { width: 13px; height: 13px; color: var(--coral-500); }
.cfg-value {
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  color: var(--coral-500); letter-spacing: -0.02em;
  line-height: 1.1;
}
.cfg-unit {
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.55);
}
.cfg-subvalue {
  font-family: var(--font-body); font-size: 10px;
  color: rgba(255,255,255,0.5);
}
.cfg-slider-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
}
.cfg-slider-lbl {
  font-family: var(--font-body); font-size: 9.5px; font-weight: 600;
  color: rgba(255,255,255,0.45);
  flex: 0 0 auto;
}
.cfg-slider {
  flex: 1; height: 14px; position: relative;
}
.cfg-slider-track,
.cfg-slider-fill {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 3px; border-radius: 999px;
  left: 0;
}
.cfg-slider-track {
  right: 0;
  background: var(--ink-50);
}
.cfg-slider-fill {
  width: var(--pct, 50%);
  background: var(--c, var(--coral-500));
}
.cfg-slider-thumb {
  position: absolute;
  top: 50%; left: var(--pct, 50%);
  transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--c, var(--coral-500));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c, var(--coral-500)) 45%, transparent);
}

/* =====================================================
   SCENE 2 — Style (matches StyleSelectorModal.tsx)
   ===================================================== */
.ss-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 2px;
  margin-bottom: 2px;
}
.ss-title {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: rgba(255,255,255,0.95); letter-spacing: -0.01em;
}
.ss-close {
  width: 22px; height: 22px; color: rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
}
.ss-close svg { width: 16px; height: 16px; }
.ss-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.ss-card {
  position: relative;
  background: var(--ink-30);
  border: 1.5px solid transparent;
  border-radius: 16px;
  padding: 14px 10px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ss-ico {
  width: 48px; height: 48px; border-radius: 14px;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  color: var(--c);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.ss-ico svg { width: 24px; height: 24px; }
.ss-lbl {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  color: rgba(255,255,255,0.95);
  text-align: center; letter-spacing: -0.005em;
}
.ss-desc {
  font-family: var(--font-body); font-size: 9.5px;
  color: rgba(255,255,255,0.5);
  text-align: center; line-height: 1.25;
}
.ss-card.is-selected {
  background: color-mix(in srgb, var(--coral-500) 5%, var(--ink-30));
  border-color: var(--coral-500);
}
.ss-check {
  position: absolute; top: 8px; right: 8px;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--coral-500); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(255,107,107,0.4);
}
.ss-check svg { width: 10px; height: 10px; }
.ss-card:not(.is-selected) .ss-check { display: none; }

/* =====================================================
   SCENE 2 — Onboarding sub-scenes (faithful: StepIndicator, InterestChip,
   PulsingOrb, GlassCard, AnimatedButton from the app)
   ===================================================== */
.ob-pad {
  padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
  align-items: center;
  text-align: center;
  overflow-y: auto;
  height: 100%;
}

/* StepIndicator: label uppercase letterSpacing 2 + 3px progress track + coral gradient fill */
.ob-step-ind {
  width: 100%;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center;
}
.ob-step-label {
  font-family: var(--font-display); font-weight: 600; font-size: 9.5px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ob-step-track {
  width: 100%; height: 3px; border-radius: 999px;
  background: var(--ink-50);
  overflow: hidden;
}
.ob-step-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #FF6B6B 0%, #FF3D5A 100%);
  border-radius: 999px;
}

/* Decorative overlapping circles (interests scene) */
.ob-circles {
  position: relative; width: 110px; height: 70px;
  margin: 4px 0 4px;
}
.ob-c { position: absolute; border-radius: 999px; }
.ob-c.c1 { width: 50px; height: 50px; background: rgba(255,107,107,0.32); left: 0; top: 10px; }
.ob-c.c2 { width: 40px; height: 40px; background: rgba(123,97,255,0.28); left: 38px; top: 0; }
.ob-c.c3 { width: 32px; height: 32px; background: rgba(255,179,71,0.28); left: 72px; top: 26px; }

/* PulsingOrb (80px) with concentric animated ring + inner orb */
.ob-orb-wrap {
  position: relative; width: 70px; height: 70px;
  display: flex; align-items: center; justify-content: center;
  margin: 4px 0;
}
.ob-orb-ring {
  position: absolute; inset: 0;
  border-radius: 999px;
  border: 1.5px solid;
  animation: ob-ring-pulse 1700ms ease-out infinite;
  pointer-events: none;
}
.ob-ring-purple { border-color: var(--violet-500); }
.ob-ring-coral  { border-color: var(--coral-500); }
@keyframes ob-ring-pulse {
  0%, 30%   { transform: scale(1);    opacity: 0.45; }
  100%      { transform: scale(1.45); opacity: 0;    }
}
.ob-orb {
  position: relative;
  width: 70px; height: 70px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.ob-orb svg { width: 30px; height: 30px; }
.ob-orb-purple {
  background: rgba(123,97,255,0.18);
  color: var(--violet-500);
  border: 1.5px solid rgba(123,97,255,0.5);
}
.ob-orb-coral {
  background: rgba(255,107,107,0.18);
  color: var(--coral-500);
  border: 1.5px solid rgba(255,107,107,0.5);
}

/* Split title: "Cosa ti" muted + "appassiona?" bold display */
.ob-title { display: flex; flex-direction: column; align-items: center; gap: 0; }
.ob-muted {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: rgba(255,255,255,0.55);
}
.ob-bold {
  font-family: var(--font-display); font-weight: 800; font-size: 24px;
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: 2px;
}
.ob-sub {
  font-family: var(--font-body); font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
  max-width: 280px;
  margin-bottom: 4px;
}

/* Counter pill */
.ob-counter-pill {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 5px 12px;
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  color: var(--coral-500);
}

/* InterestChips wrap */
.ob-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  margin: 2px 0;
}
.ic-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 6px 10px;
  font-family: var(--font-body); font-size: 10.5px; font-weight: 500;
  color: rgba(255,255,255,0.85);
}
.ic-chip svg:not(.ic-chk) { width: 12px; height: 12px; }
.ic-chip-on {
  background: linear-gradient(90deg, #FF6B6B 0%, #FF3D5A 100%);
  border: 0;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(255,107,107,0.4);
}
.ic-chk {
  width: 11px; height: 11px; color: #fff;
}
.ic-chip:not(.ic-chip-on) .ic-chk { display: none; }

/* GlassCard — matches GlassCard.tsx exactly */
.ob-glass {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
}
.ob-glass-switch { gap: 4px; }
.ob-switch-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 700;
  color: rgba(255,255,255,0.95);
}
.ob-switch-head svg { width: 14px; height: 14px; color: var(--coral-500); flex: 0 0 14px; }
.ob-switch-head > span:first-of-type { flex: 1; }
.ob-switch {
  display: inline-flex; align-items: center;
  width: 30px; height: 17px; border-radius: 999px;
  background: rgba(255,255,255,0.15);
  padding: 0 2px;
  position: relative;
  flex: 0 0 30px;
}
.ob-switch-thumb {
  width: 13px; height: 13px; border-radius: 999px;
  background: rgba(255,255,255,0.6);
}
.ob-switch.is-on { background: rgba(255,107,107,0.5); }
.ob-switch.is-on .ob-switch-thumb { transform: translateX(13px); background: var(--coral-500); }
.ob-switch-hint {
  font-family: var(--font-body); font-size: 9.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}

.ob-glass-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: rgba(255,255,255,0.95);
  margin-bottom: 2px;
}
.ob-glass-head svg { width: 15px; height: 15px; color: var(--violet-500); flex: 0 0 15px; }
.ob-glass-head > span:first-of-type { flex: 1; }
.ob-glass-count {
  background: var(--violet-500); color: #fff;
  font-family: var(--font-body); font-size: 10px; font-weight: 800;
  border-radius: 999px;
  padding: 1px 8px;
}

.ob-habit {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink-40);
  border-radius: 12px;
  padding: 9px 11px;
}
.ob-habit-em { font-size: 18px; flex: 0 0 22px; }
.ob-habit-info { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ob-habit-label {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 700;
  color: rgba(255,255,255,0.95);
}
.ob-habit-sub {
  font-family: var(--font-body); font-size: 9.5px;
  color: rgba(255,255,255,0.55);
}
.ob-habit-x {
  width: 16px; height: 16px;
  color: #FF5252;
}
.ob-habit-x svg { width: 100%; height: 100%; }

.ob-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 9px;
  color: var(--violet-300);
  font-family: var(--font-body); font-size: 11.5px; font-weight: 700;
  margin-top: 2px;
}
.ob-add svg { width: 13px; height: 13px; }

.ob-field-label {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.55);
  text-transform: none;
  letter-spacing: 0;
}
.ob-textarea {
  background: var(--ink-40);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--font-body); font-size: 11.5px;
  color: rgba(255,255,255,0.92);
  line-height: 1.5;
  min-height: 54px;
}

.ob-cat-row, .ob-tf-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
/* Horizontal scrolling category row (matches ScrollView horizontal in OnboardingGoalScreen.tsx) */
.ob-cat-scroll {
  display: flex; flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 -14px;
  padding: 2px 14px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
}
.ob-cat-scroll .ob-cat { flex: 0 0 auto; white-space: nowrap; }
.ob-cat, .ob-tf {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--ink-40);
  border-radius: 10px;
  padding: 6px 10px;
  font-family: var(--font-body); font-size: 10.5px; font-weight: 500;
  color: rgba(255,255,255,0.9);
}
.ob-cat-on, .ob-tf-on {
  background: var(--coral-500);
  color: #fff;
  font-weight: 700;
}
.ob-tf-count {
  font-family: var(--font-body); font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  margin-top: 4px;
}

.ob-sched-row { display: flex; gap: 6px; }
.ob-sched {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--ink-40);
  border-radius: 12px;
  padding: 9px 8px;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.8);
}
.ob-sched svg { width: 13px; height: 13px; }
.ob-sched-on {
  background: var(--coral-500);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(255,107,107,0.4);
}

/* AnimatedButton — matches AnimatedButton.tsx exactly (height 56, radius 16, coral gradient, heavy shadow).
   `flex-shrink: 0` + `min-height` so the flex column parent does NOT crush the button. */
.ob-cta {
  width: 100%;
  min-height: 56px;
  flex-shrink: 0;
  border-radius: 16px;
  border: 0;
  padding: 0 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(90deg, #FF6B6B 0%, #FF8E8E 100%);
  color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.03em;
  box-shadow: 0 8px 22px rgba(255,107,107,0.4);
  cursor: default;
  margin-top: 8px;
}
.ob-cta svg { width: 18px; height: 18px; flex-shrink: 0; }

.ob-skip {
  display: block; margin-top: 12px;
  text-align: center;
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  letter-spacing: 0.02em;
}

/* Back arrow (top-left, sits above step indicator) */
.ob-pad-goal { position: relative; }
.ob-back {
  position: absolute;
  top: 16px; left: 14px;
  width: 28px; height: 28px;
  color: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.ob-back svg { width: 18px; height: 18px; }

/* Textarea showing only the placeholder (lighter color, italics-ish) */
.ob-textarea-placeholder {
  color: rgba(255,255,255,0.4);
  font-weight: 400;
}

/* =====================================================
   SCENE 3 — Calendar (matches CalendarScreen.tsx)
   ===================================================== */
.sc-pad-cal {
  padding: 18px 14px 18px;
  gap: 12px;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-title {
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  color: rgba(255,255,255,0.96); letter-spacing: -0.02em;
}
.cal-filters {
  display: flex; gap: 6px;
}
.cal-chip {
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  padding: 6px 11px; border-radius: 12px;
  background: var(--ink-40);
  color: rgba(255,255,255,0.7);
}
.cal-chip.is-active {
  background: var(--coral-500); color: #fff;
}
.cal-month {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 4px;
}
.cal-chev { width: 18px; height: 18px; color: rgba(255,255,255,0.7); }
.cal-chev svg { width: 16px; height: 16px; }
.cal-month-name {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: rgba(255,255,255,0.95); letter-spacing: -0.01em;
}
.cal-card {
  background: var(--ink-30);
  border-radius: 14px;
  padding: 10px 8px 12px;
}
.cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 6px;
}
.cal-dow span {
  font-family: var(--font-body); font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,0.35);
  text-align: center; letter-spacing: 0.04em;
  padding: 3px 0;
}
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.75);
  border-radius: 8px;
  position: relative;
}
.cal-cell.cal-empty { color: transparent; }
.cal-cell.has-event::after {
  content: ""; position: absolute; bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 999px;
}
.cal-cell.ev-gen::after   { background: var(--coral-500); }
.cal-cell.ev-sched::after { background: #FFB300; }
.cal-cell.ev-goal::after  { background: #34D399; }
.cal-cell.is-today {
  background: var(--coral-500);
  color: #fff; font-weight: 700;
  box-shadow: 0 4px 10px rgba(255,107,107,0.4);
}

.cal-section { display: flex; flex-direction: column; gap: 8px; }
.cal-section-title {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: rgba(255,255,255,0.95); padding: 0 2px;
}
.cal-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink-40);
  border-radius: 12px;
  padding: 10px;
}
.cal-thumb {
  width: 38px; height: 38px; border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.06);
}
.cal-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cal-item-t {
  font-family: var(--font-display); font-weight: 600; font-size: 11.5px;
  color: rgba(255,255,255,0.95);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.cal-item-d {
  font-family: var(--font-body); font-size: 9.5px;
  color: rgba(255,255,255,0.5);
}
.cal-play { width: 24px; height: 24px; }
.cal-play svg { width: 100%; height: 100%; }

/* =====================================================
   SCENE 4 — Podcast detail (matches PodcastDetailScreen.tsx)
   ===================================================== */
.scene-detail { padding: 0; }

.det-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.det-bg img {
  position: absolute; top: 0; left: 0; right: 0;
  width: 100%; height: 60%;
  object-fit: cover;
  filter: blur(30px);
  transform: scale(1.15);
}
.det-bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(13,13,13,0.3) 0%,
    rgba(13,13,13,0.82) 45%,
    #0D0D0D 78%);
}

.det-topnav {
  position: relative; z-index: 3;
  padding: 14px 16px 6px;
}
.det-back {
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.det-back svg { width: 16px; height: 16px; }

.det-scroll {
  position: relative; z-index: 2;
  padding: 8px 18px 0;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 10px;
  overflow: hidden;
}

.det-cover {
  width: 168px; height: 168px;
  border-radius: 16px;
  align-self: center;
  object-fit: cover;
  box-shadow:
    0 14px 30px -8px rgba(0,0,0,0.7),
    0 0 30px -8px rgba(255,107,107,0.35);
}
.det-title {
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  color: #fff; letter-spacing: -0.015em; line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
  margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.det-date {
  font-family: var(--font-body); font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  text-align: center;
}

.det-chips {
  display: flex; flex-wrap: nowrap; gap: 6px;
  overflow: hidden;
  margin-top: 2px;
}
.det-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--ink-30);
  border: 1px solid var(--ink-50);
  border-radius: 10px;
  padding: 4px 8px;
  font-family: var(--font-body); font-size: 9.5px; font-weight: 600;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  flex: 0 0 auto;
}
.det-chip svg { width: 10px; height: 10px; }
.det-chip-quick {
  background: rgba(245,158,11,0.18);
  border-color: rgba(245,158,11,0.4);
  color: #F59E0B;
}
.det-chip-type {
  border-color: rgba(123,97,255,0.4);
  color: var(--violet-300);
}

.det-play {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: default;
  background: var(--coral-500); color: #fff;
  border-radius: 14px;
  padding: 11px 0;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: -0.005em;
  box-shadow: 0 6px 16px rgba(255,107,107,0.4);
  margin-top: 4px;
}
.det-play svg { width: 14px; height: 14px; }

.det-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 4px 0;
}

.det-section { display: flex; flex-direction: column; gap: 6px; }
.det-section-label {
  font-family: var(--font-body); font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.det-prompt {
  background: var(--ink-30);
  border: 1px solid var(--ink-50);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: var(--font-body); font-size: 11px;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
}

.det-collap {
  background: var(--ink-30);
  border: 1px solid var(--ink-50);
  border-radius: 12px;
  overflow: hidden;
}
.det-collap-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
}
.det-collap-ico {
  width: 26px; height: 26px; border-radius: 8px;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  color: var(--c);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 26px;
}
.det-collap-ico svg { width: 14px; height: 14px; }
.det-collap-title {
  flex: 1;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  color: rgba(255,255,255,0.95);
}
.det-collap-count {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.55);
  background: var(--ink-40);
  border-radius: 999px;
  padding: 2px 8px;
}
.det-collap-chev {
  color: rgba(255,255,255,0.4);
  width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
}
.det-collap-chev svg { width: 12px; height: 12px; }
.det-collap-body {
  padding: 0 12px 10px;
  display: flex; flex-direction: column;
}
.det-collap:not(.is-open) .det-collap-body { display: none; }

.det-src {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--ink-40);
}
.det-src:first-child { border-top: 0; padding-top: 4px; }
.det-src-fav {
  width: 20px; height: 20px; border-radius: 5px;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  flex: 0 0 20px;
}
.det-src-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.det-src-t {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600;
  color: rgba(255,255,255,0.95);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.det-src-d {
  font-family: var(--font-body); font-size: 9px;
  color: rgba(255,255,255,0.45);
}
.det-src-out {
  width: 12px; height: 12px;
  color: rgba(255,255,255,0.4);
  flex: 0 0 12px;
}

/* ============================================================
   Legacy Features section (kept as fallback, no longer rendered)
   ============================================================ */
.features {
  position: relative; z-index: 3;
  max-width: 1440px; margin: 0 auto;
  padding: 40px 40px 80px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.feat {
  background: var(--ink-30); border: 1px solid var(--border-subtle);
  border-radius: 24px; padding: 28px;
  transition: transform 220ms var(--ease-out), border-color 220ms var(--ease-out), background 220ms var(--ease-out);
}
.feat:hover { transform: translateY(-2px); border-color: var(--ink-60); background: #181820; }
.feat .ico {
  width: 44px; height: 44px; border-radius: 14px;
  background: rgba(254,107,107,0.12); color: var(--coral-500);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.feat .ico svg { width: 22px; height: 22px; stroke-width: 2; }
.feat h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--fg-1); }
.feat p { color: var(--fg-3); font-size: 14px; line-height: 1.55; margin: 0; }
.feat.violet .ico { background: rgba(123, 98, 255, 0.14); color: var(--violet-500); }

/* ---------- Footer ---------- */
.footer {
  position: relative; z-index: 3; max-width: 1440px; margin: 0 auto;
  padding: 24px 40px 32px;
  /* keep clear of the iOS home indicator (viewport-fit=cover) */
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: space-between; align-items: center;
  color: var(--fg-4); font-size: 13px;
  gap: 20px; flex-wrap: wrap;
}
.footer .legal { display: flex; gap: 18px; align-items: center; }
.footer .legal a { color: var(--fg-4); text-decoration: none; transition: color 120ms var(--ease-out); }
.footer .legal a:hover { color: var(--fg-1); }
.footer .social { display: flex; gap: 10px; }
.footer .social a {
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--ink-30); border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-3); transition: all 220ms var(--ease-out);
}
.footer .social a:hover { color: var(--coral-500); border-color: var(--coral-500); }
.footer .social svg { width: 16px; height: 16px; stroke-width: 2; }

/* ---------- Cookie banner ---------- */
.cookie {
  position: fixed; left: 16px; right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 50;
  max-width: 480px; margin: 0 auto;
  background: var(--ink-30); border: 1px solid var(--ink-60);
  border-radius: 20px; padding: 18px 20px;
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column; gap: 14px;
  animation: slideUp 280ms var(--ease-out);
}
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.cookie.is-visible { display: flex; }
.cookie strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 15px; margin: 0; color: var(--fg-1); letter-spacing: -0.01em; }
.cookie p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fg-3); }
.cookie p a { color: var(--coral-500); text-decoration: underline; text-underline-offset: 2px; }
.cookie .row { display: flex; gap: 8px; }
.cookie button {
  flex: 1; height: 40px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  cursor: pointer; border: 0;
  transition: all 220ms var(--ease-out);
}
.cookie .btn-accept { background: var(--coral-500); color: #fff; }
.cookie .btn-accept:hover { background: var(--coral-400); }
.cookie .btn-decline { background: transparent; color: var(--fg-2); border: 1px solid var(--border-subtle); }
.cookie .btn-decline:hover { color: var(--fg-1); border-color: var(--ink-60); }

/* ===================================================
   Try them — three real episodes the visitor can play
   Mocks the in-app FullScreenPlayer: full-bleed cover
   background + bottom glass panel with waveform + transport.
   =================================================== */
.trythem {
  position: relative; z-index: 3;
  max-width: 1280px; margin: 0 auto;
  padding: 60px 40px 100px;
}
.trythem-intro {
  max-width: 760px; margin: 0 auto 56px;
  text-align: center;
}
.trythem-intro .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--coral-500); font-weight: 600;
  margin: 0;
}
.trythem-intro h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4vw, 50px);
  letter-spacing: -0.025em; line-height: 1.05;
  margin: 16px 0 14px; text-wrap: balance;
}
.trythem-sub {
  margin: 0 auto; max-width: 520px;
  color: var(--fg-3); font-size: 15px; line-height: 1.55;
}

.trythem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: end;
}

/* Each cell stacks the prompt above the player.
   The prompt-text reserves 2 lines of height (see .tplayer-prompt-text rule
   below) so the player always starts at the same Y across all three cells —
   even when one prompt fits on a single line and another wraps. */
.tplayer-cell {
  margin: 0;
  display: flex; flex-direction: column;
  gap: 22px;
}

/* Prompt bubble — quoting what the user actually typed.
   Pull-quote treatment: oversized typographic quote mark, italic body wrapped
   in real curly quotes, coral accent. A thin notch points down to the player
   so the "this prompt generated that podcast" relationship reads instantly. */
.tplayer-prompt {
  position: relative;
  background: rgba(254,107,107,0.07);
  border: 1px solid rgba(254,107,107,0.24);
  border-radius: 14px;
  padding: 13px 16px 14px 42px;
  display: flex; flex-direction: column;
  gap: 6px;
  color: var(--fg-2);
}
.tplayer-prompt::before {
  /* Oversized opening quotation mark — pure decoration, sits in the padding gutter */
  content: "\201C";
  position: absolute;
  top: -2px; left: 10px;
  font-family: var(--font-display);
  font-size: 54px; line-height: 1;
  font-weight: 700;
  color: var(--coral-500);
  opacity: 0.55;
  pointer-events: none;
}
.tplayer-prompt::after {
  /* Notch — small triangle aiming at the player card */
  content: "";
  position: absolute;
  bottom: -7px; left: 26px;
  width: 12px; height: 12px;
  background: rgba(254,107,107,0.07);
  border-right: 1px solid rgba(254,107,107,0.24);
  border-bottom: 1px solid rgba(254,107,107,0.24);
  transform: rotate(45deg);
  border-top-left-radius: 2px;
}
.tplayer-prompt-tag {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--coral-500);
}
.tplayer-prompt-text {
  font-size: 14px; line-height: 1.4;
  color: var(--fg-1);
  font-style: italic;
  word-break: break-word;
  /* Always reserve space for up to 2 lines so the box height is identical
     across all 3 cards (one-line prompts get an empty second line, two-line
     prompts fill exactly the reserved space). Keeps the player Y aligned. */
  min-height: calc(1.4em * 2);
}

/* ----- Card ------------------------------------------------- */
.tplayer {
  position: relative;
  aspect-ratio: 9 / 14;
  border-radius: 26px;
  overflow: hidden;
  background: #0D0D0D;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 60px -20px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.06);
  isolation: isolate;
  transform: translateZ(0);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.tplayer:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 32px 70px -22px rgba(0,0,0,0.78),
    0 0 0 1px rgba(255,255,255,0.1);
}

/* Cover layer — full bleed, dark overlay so glass panel keeps contrast */
.tplayer-cover {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.tplayer-cover-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
}

/* Top bar — small chips that mimic the back nav / speed indicator */
.tplayer-topbar {
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; z-index: 2;
}
.tplayer-chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Glass panel anchored to the bottom of the card */
.tplayer-glass {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-top-left-radius: 22px; border-top-right-radius: 22px;
  overflow: hidden;
  z-index: 3;
}
.tplayer-glass-bg {
  position: absolute; inset: 0;
  background: rgba(20,20,25,0.82);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.tplayer-glass-inner {
  position: relative;
  padding: 18px 20px 18px;
  display: flex; flex-direction: column; gap: 12px;
}

.tplayer-inforow {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 2px;
}
.tplayer-info { flex: 1; min-width: 0; }
.tplayer-artist {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  display: block; margin-bottom: 4px;
}
.tplayer-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; line-height: 1.22;
  letter-spacing: -0.018em;
  color: #fff; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tplayer-vol {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.tplayer-vol svg { width: 16px; height: 16px; }

/* ----- Waveform (40 bars, fills green on progress) -------- */
.tplayer-wave {
  position: relative;
  height: 44px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}
.tplayer-bars {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 2px;
}
.tplayer-bars .b {
  flex: 1 1 0;
  border-radius: 2px;
  background: rgba(255,255,255,0.22);
  position: relative;
  overflow: hidden;
}
.tplayer-bars .b .bf {
  /* Played portion — grows left→right as the audio progresses, per-bar.
     Width set inline by JS (0–100%). */
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 0%;
  background: #4ADE80;
  border-radius: 2px;
}

.tplayer-time {
  display: flex; justify-content: space-between;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* ----- Transport row -------------------------------------- */
.tplayer-transport {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; margin-top: 2px;
}
.tplayer-skip,
.tplayer-rew,
.tplayer-play {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 160ms var(--ease-out), color 160ms var(--ease-out);
}
.tplayer-skip, .tplayer-rew { width: 40px; height: 40px; }
.tplayer-skip svg { width: 20px; height: 20px; }
.tplayer-skip:hover, .tplayer-rew:hover { color: #fff; transform: scale(1.05); }
.tplayer-skip:active, .tplayer-rew:active, .tplayer-play:active { transform: scale(0.94); }

.tplayer-rew {
  width: 42px; height: 42px;
  position: relative;
  flex-direction: column;
  color: rgba(255,255,255,0.92);
}
.tplayer-rew svg { width: 22px; height: 22px; }
.tplayer-skip-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 8px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
  margin-top: -3px;
}

.tplayer-play {
  width: 52px; height: 52px;
  border-radius: 999px;
  background: var(--coral-500);
  color: #fff;
  margin: 0 6px;
  box-shadow:
    0 6px 18px -4px rgba(254,107,107,0.55),
    0 0 0 4px rgba(254,107,107,0.08);
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.tplayer-play:hover {
  background: var(--coral-400, #ff8585);
  transform: scale(1.04);
}
.tplayer-play svg { width: 22px; height: 22px; }
.tplayer-play .ic-play  { display: block; margin-left: 2px; }
.tplayer-play .ic-pause { display: none; }
.tplayer.is-playing .tplayer-play .ic-play  { display: none; }
.tplayer.is-playing .tplayer-play .ic-pause { display: block; }

/* Loading state — soft pulse on the play button */
.tplayer.is-loading .tplayer-play {
  animation: tplayerPulse 1.1s var(--ease-out) infinite;
}
@keyframes tplayerPulse {
  0%, 100% { box-shadow: 0 6px 18px -4px rgba(254,107,107,0.55), 0 0 0 4px rgba(254,107,107,0.08); }
  50%      { box-shadow: 0 6px 22px -3px rgba(254,107,107,0.65), 0 0 0 10px rgba(254,107,107,0.02); }
}

/* Tablet — 2 columns, 3rd cell spans full width */
@media (max-width: 980px) {
  /* Stack the hero one column early: at 901–980px the 2-col grid (360px phone +
     64px gap + padding) no longer fits and crushed the text column. */
  .hero { grid-template-columns: 1fr; gap: 40px; }
  .trythem-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .trythem-grid .tplayer-cell:nth-child(3) {
    grid-column: span 2;
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
  }
}

/* Phone — horizontal swipe carousel, one card at a time, snap-centered.
   Pure CSS scroll-snap (no library). Dots underneath are synced by JS. */
@media (max-width: 640px) {
  .trythem { padding: 40px 0 70px; }
  .trythem-intro { padding: 0 20px; margin-bottom: 30px; }

  .trythem-grid {
    /* Switch off the desktop grid; become a horizontal flex scroller. */
    display: flex;
    grid-template-columns: none;
    align-items: stretch;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Edge gutter — keeps first & last card centered when snapped. Using
       max() so the gutter never collapses below ~11vw on wide phones (where
       the 360px max-width caps the card size). */
    padding-inline: max(calc((100vw - 360px) / 2), 11vw);
    padding-bottom: 8px;
    scroll-padding-inline: max(calc((100vw - 360px) / 2), 11vw);
    /* Hide native scrollbar for a clean swipe surface. */
    scrollbar-width: none;
  }
  .trythem-grid::-webkit-scrollbar { display: none; }

  .trythem-grid .tplayer-cell {
    /* Card width = 78% of viewport, capped at 360px so it looks right on
       larger phones / small tablets that still hit this breakpoint. */
    flex: 0 0 min(78vw, 360px);
    max-width: 360px;
    width: min(78vw, 360px);
    margin: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  /* Cancel the tablet-only "3rd cell spans full width" rule inside the carousel. */
  .trythem-grid .tplayer-cell:nth-child(3) {
    grid-column: auto;
    max-width: 360px;
    margin: 0;
  }

  .tplayer { aspect-ratio: 9 / 13; }
  .tplayer-title { font-size: 16px; }
}

/* Dot indicators — hidden on desktop, only revealed in the mobile carousel. */
.trythem-dots { display: none; }
@media (max-width: 640px) {
  .trythem-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 0 20px;
  }
  .trythem-dot {
    position: relative;
    width: 7px; height: 7px;
    border-radius: 999px;
    border: 0;
    background: rgba(255,255,255,0.18);
    padding: 0;
    cursor: pointer;
    transition:
      background 220ms var(--ease-out),
      width 280ms var(--ease-out);
  }
  /* Invisible ~40px tap area so the 7px dot is comfortably touchable. */
  .trythem-dot::before { content: ""; position: absolute; inset: -16px; }
  .trythem-dot:hover { background: rgba(255,255,255,0.32); }
  .trythem-dot.is-active {
    background: var(--coral-500);
    width: 20px;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .nav { padding: 20px 24px; }
  .nav .links { display: none; }
  .hero { padding: 32px 24px 60px; grid-template-columns: 1fr; gap: 40px; }
  .countdown-wrap { padding: 40px 24px; }
  .countdown-card { grid-template-columns: 1fr; padding: 28px; gap: 28px; }
  .features { grid-template-columns: 1fr; padding: 24px 24px 60px; }
  .footer { flex-direction: column; gap: 14px; padding: 20px 24px 32px; text-align: center; }
  .footer .legal { justify-content: center; flex-wrap: wrap; }

  /* Shrink phone slightly on tablet. `transform: scale` doesn't shrink the
     layout box — without compensation, the .phone still occupies its full
     720px height in flow, leaving dead space below. Negative margin-bottom
     equal to the scaled-away pixels closes that gap. */
  .phone-wrap { min-height: 640px; }
  .phone {
    transform: scale(0.88);
    transform-origin: top center;
    margin-bottom: calc(-720px * 0.12);
  }

  /* ===== How it works — mobile: ONE pinned stage that swaps scenes on scroll =====
     A single full-height sticky "stage" holds the phone + a caption slot, centered
     and held for the whole section. The text column beneath becomes an invisible
     scroll driver: its step / .substep-spacer heights move the same
     IntersectionObserver (setupScrollytelling runs on every viewport), and JS keeps
     .hiw-m-caption in sync with the active scene. No order:-1, no multiple sticky
     contexts, no magic offsets — the phone is the FIRST DOM child (moved by JS) so a
     plain top:0 sticky pins it cleanly; desktop placement is locked via grid-column. */
  .howitworks { padding: 18px 20px 56px; }
  /* The section heading is moved (by JS) to the TOP of the pinned stage, so it stays
     fixed above the swapping scenes and scrolls off first at the section end. No
     background — it sits over the page wash like the rest of the section. */
  .hiw-intro {
    margin: 0; padding: 0;
    max-width: min(92vw, 360px);
  }
  .hiw-intro h2 { margin-top: 8px; }

  /* Single column. Phone is the first child → it pins at the top of the section. */
  .hiw-scrolly {
    display: flex; flex-direction: column;
    grid-template-columns: none;
    gap: 0; position: relative;
  }
  /* Trailing in-flow spacer extends the sticky's travel past the LAST driver so the
     final scene (explore/playlist) keeps a full pinned dwell before the phone
     releases. (padding-bottom doesn't work — flex sticky is bound to the content
     box, so real flow height is required.) */
  .hiw-tail-spacer { display: block; height: 22svh; pointer-events: none; }

  /* --- The pinned stage: step title + phone + caption, centered, held for the
     entire section. Title & caption have fixed min-heights so the phone never
     shifts vertically as the text swaps (rock-steady, snappy). --- */
  .hiw-phone-wrap {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 9px;
    width: auto; align-self: stretch;
    /* The whole stage is pinned, holding [heading, step-title, subtitle, phone,
       caption] CENTERED in the available height (so tall screens don't leave a big
       gap below). `top` keeps a margin above / clears the status bar / notch on real
       phones; the heading is the stage's first child (moved in by JS), so it still
       scrolls off first when the stage releases. */
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    /* center within the safe area: on notched phones the content centers below the
       notch (border-box → padding is inside the height); elsewhere it's centered in
       the full viewport. */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    transform: none; margin: 0;
    z-index: 4;
  }
  /* Constrain the ambient glow to a halo behind the phone (the desktop inset would
     blow up to viewport size here). */
  .hiw-phone-wrap::before {
    inset: auto; top: 50%; left: 50%;
    width: 300px; height: 380px;
    transform: translate(-50%, -62%);
  }
  /* Shrink the 360x720 mockup and collapse its box (both axes) so the caption hugs
     it. transform-origin center + symmetric negative margins = visually centered,
     no leftover layout space, safe on viewports narrower than 360px. */
  .hiw-phone-wrap .phone {
    --s: 0.56;
    transform: scale(var(--s));
    transform-origin: center center;
    margin: calc((var(--s) - 1) * 360px) calc((var(--s) - 1) * 180px);
  }

  /* Macro-step TITLE above the phone (e.g. "Start from a spark") — the step heading,
     mirroring desktop. Populated by JS; changes only between the 5 steps. */
  .hiw-m-title {
    display: flex; align-items: flex-end; justify-content: center;
    width: min(88vw, 360px);
    min-height: 30px;
    margin: 0;
    text-align: center;
    font-family: var(--font-display); font-weight: 700;
    font-size: 19px; line-height: 1.15; letter-spacing: -0.02em;
    color: var(--fg-1);
  }
  .hiw-m-title.is-fade { animation: hiwCapIn 280ms var(--ease-out); }

  /* SUBTITLE under the title (the step's intro paragraph) — clamped to 2 lines and a
     fixed min-height so the phone never shifts as the text swaps. */
  .hiw-m-subtitle {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
    width: min(86vw, 340px);
    min-height: 38px;
    margin: 0;
    text-align: center;
    font-family: var(--font-body); font-size: 13px; line-height: 1.45;
    color: var(--fg-3);
  }
  .hiw-m-subtitle.is-fade { animation: hiwCapIn 280ms var(--ease-out); }

  /* Caption slot BELOW the phone — substep detail (multi-steps) or tag chips (single
     steps). Fixed min-height keeps the phone from shifting on swaps. */
  .hiw-m-caption {
    display: block;
    width: min(86vw, 340px);
    min-height: 74px;
    text-align: center;
  }
  .hiw-m-caption.is-fade { animation: hiwCapIn 280ms var(--ease-out); }
  .hiw-m-caption h3,
  .hiw-m-caption h4 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 17px; line-height: 1.2; letter-spacing: -0.015em;
    color: rgba(255,255,255,0.96); margin: 0 0 5px;
  }
  .hiw-m-caption p {
    font-family: var(--font-body); font-size: 13px; line-height: 1.5;
    color: var(--fg-3); margin: 0 auto; max-width: 320px;
  }
  /* Single-step tag chips, centered under the phone (the .hiw-bullets pill list). */
  .hiw-m-caption .hiw-bullets {
    margin: 2px 0 0; justify-content: center; gap: 7px;
  }
  .hiw-m-caption .hiw-step-num,
  .hiw-m-caption .hiw-sub-tag { display: none; }

  /* --- The text column is now an invisible scroll driver. The negative margin pulls
     it up under the pinned phone so the FIRST scene centers soon after the phone pins
     (cuts the dead "lead-in" scroll at the section start). --- */
  .hiw-text { display: block; margin-top: -46svh; }
  .hiw-step {
    min-height: 0; padding: 0;
    opacity: 1; filter: none; transform: none;
    display: block;
  }
  .hiw-step-multi { padding: 0; position: static; display: block; }
  .hiw-substeps { margin: 0; position: static; }
  /* Hide every in-flow caption/header — the pinned .hiw-m-caption carries the text.
     (display:none elements still expose innerHTML, so JS can read them as the source.) */
  .hiw-step-head,
  .hiw-step-head::before,
  .substeps-display,
  .hiw-step .hiw-step-cap { display: none; }

  /* Scroll room per scene / sub-scene that drives the observer. Kept compact (64vh)
     so the section feels snappy rather than an endless scroll across 12 scenes. */
  .substep-spacer { display: block; height: 64svh; pointer-events: none; }
  .hiw-step:not(.hiw-step-multi) { min-height: 64svh; position: relative; }

  .hiw-dots { display: none; }
}

/* Shorter phones: the pinned section heading eats ~143px, so scale the mockup down
   by available HEIGHT (not width) to keep the whole scene on screen under it. */
@media (max-width: 900px) and (max-height: 760px) {
  .hiw-phone-wrap .phone { --s: 0.50; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .hiw-phone-wrap .phone { --s: 0.42; }
}

@media (max-width: 560px) {
  .hero { padding: 24px 20px 40px; }
  .form { flex-direction: column; padding: 8px; border-radius: 20px; }
  .form input { padding: 12px 14px; }
  .form button { width: 100%; justify-content: center; height: 48px; }
  .form-help { padding-left: 4px; }
  .form-message { width: 100%; justify-content: center; }
  .badge { font-size: 11px; }

  /* Phone hero stays visible on mobile, scaled down */
  .phone-wrap { min-height: 540px; }
  .phone {
    transform: scale(0.75);
    transform-origin: top center;
    margin-bottom: calc(-720px * 0.25);
  }

  .countdown-card { padding: 24px 20px; }
  .countdown-card h3 { font-size: 22px; }
  .counter .unit .n { font-size: 30px; }
  .counter .unit { padding: 14px 6px; }

  .feat { padding: 22px; }
}

@media (max-width: 400px) {
  /* Phone hero at very small viewports — keep visible but heavily scaled */
  .phone-wrap { min-height: 460px; margin: 0 -10px; }
  .phone {
    transform: scale(0.62);
    transform-origin: top center;
    margin-bottom: calc(-720px * 0.38);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   APP-ALIGNMENT ADDITIONS
   New mockup components added to track the live app:
   - notification bell, goal hero card, 24h timeline, community rail
   - calendar fixes, podcast-detail series card, voice catalog pill
   - Scene 5 "Explore": Discover / Following / Notifications / Playlist
   In-mockup headings use Space Grotesk + KPI numbers JetBrains Mono,
   to match the real app's design system (the page chrome keeps its
   own marketing fonts — Plus Jakarta / Fraunces).
   ============================================================ */

/* In-phone text uses the app's display font (Space Grotesk), not the page's marketing font */
.phone,
.tplayer { --font-display: 'Space Grotesk', 'Plus Jakarta Sans', 'SF Pro Display', system-ui, sans-serif; }

/* KPI numbers in JetBrains Mono (matches app DashboardScreen KPI console) */
.hp-kpi .v { font-family: var(--font-mono); font-weight: 700; }
.hp-kpi .v.hp-kpi-time { font-size: 15px; letter-spacing: -0.01em; }

/* ---------- Notification bell (home hero header) ---------- */
.hp-bell {
  position: relative;
  width: 30px; height: 30px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  margin-right: 8px;
}
.hp-bell svg { width: 16px; height: 16px; }
.hp-bell-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px;
  background: var(--coral-500); color: #fff;
  font-family: var(--font-body); font-size: 9px; font-weight: 800;
  line-height: 15px; text-align: center;
  border: 1.5px solid #0F0F14;
  box-shadow: 0 0 8px rgba(255,107,107,0.55);
}

/* ---------- Goal hero card (GoalHeroCard) ---------- */
.goalcard {
  display: flex; align-items: center; gap: 11px;
  background: linear-gradient(135deg, rgba(123,97,255,0.16) 0%, rgba(255,107,107,0.06) 100%);
  border: 1px solid rgba(123,97,255,0.22);
  border-radius: 16px;
  padding: 11px 12px;
}
.goalcard-ringwrap { position: relative; width: 44px; height: 44px; flex: 0 0 44px; }
.goalcard-ringwrap svg { width: 44px; height: 44px; display: block; }
.goalcard-ringnum {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #fff;
}
.goalcard-ringnum i { font-size: 8px; color: rgba(255,255,255,0.5); font-style: normal; }
.goalcard-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.goalcard-eyebrow {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-size: 8px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet-300);
}
.goalcard-eyebrow svg { width: 10px; height: 10px; }
.goalcard-title {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: #fff; letter-spacing: -0.01em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.goalcard-sub {
  font-family: var(--font-body); font-size: 9.5px; color: rgba(255,255,255,0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.goalcard-chev { width: 16px; height: 16px; color: rgba(255,255,255,0.4); flex: 0 0 16px; }

/* ---------- La tua giornata — 24h timeline (TimelineRow) ---------- */
.tl-section { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.tl-row {
  display: flex; gap: 4px; overflow: hidden;
  background: rgba(0,0,0,0.18); border-radius: 12px;
  padding: 10px 8px;
}
.tl-slot {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 2px 0;
}
.tl-h {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.4); font-variant-numeric: tabular-nums;
}
.tl-dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.14); }
.tl-done .tl-h, .tl-sched .tl-h { color: rgba(255,255,255,0.7); }
.tl-done .tl-dot  { background: var(--success); }
.tl-sched .tl-dot { background: #FFB300; }
.tl-fail .tl-dot  { background: #FF5252; }
.tl-now .tl-h {
  color: #fff; background: var(--coral-500);
  width: 22px; height: 22px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(255,107,107,0.4); margin-top: -2px;
}
.tl-now .tl-dot { background: var(--coral-500); box-shadow: 0 0 6px rgba(255,107,107,0.6); }

/* ---------- Dalla community (CommunityRail) ---------- */
.comm-section { display: flex; flex-direction: column; gap: 10px; padding: 0 4px; }
.comm-row { display: flex; gap: 10px; overflow: hidden; margin: 0 -4px; padding: 0 4px; }
.comm-card { flex: 0 0 104px; display: flex; flex-direction: column; gap: 6px; }
.comm-card .cov {
  width: 104px; height: 104px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06); overflow: hidden; background: var(--ink-30);
}
.comm-card .cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comm-card .t {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
  color: rgba(255,255,255,0.92); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.comm-card .by {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-body); font-size: 9px; color: rgba(255,255,255,0.45);
}
.comm-card .by::before {
  content: ""; width: 12px; height: 12px; border-radius: 999px; flex: 0 0 12px;
  background: linear-gradient(135deg, #2B1A66, #4B2EA8);
}

/* ---------- Voice catalog pill (generation config) ---------- */
.ssb-pill {
  font-family: var(--font-body); font-size: 9px; font-weight: 800;
  color: var(--violet-300);
  background: rgba(123,97,255,0.16); border: 1px solid rgba(123,97,255,0.3);
  border-radius: 999px; padding: 2px 7px; flex: 0 0 auto;
}

/* ---------- Podcast detail — "Parte di una serie" card ---------- */
.det-series {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(123,97,255,0.16) 0%, rgba(123,97,255,0.04) 100%);
  border: 1px solid rgba(123,97,255,0.28);
  border-radius: 12px; padding: 9px 11px;
  text-decoration: none; cursor: default;
}
.det-series-ico {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px;
  background: rgba(123,97,255,0.2); color: var(--violet-300);
  display: flex; align-items: center; justify-content: center;
}
.det-series-ico svg { width: 15px; height: 15px; }
.det-series-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.det-series-label {
  font-family: var(--font-body); font-size: 8px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet-300);
}
.det-series-name {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  color: rgba(255,255,255,0.95); letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.det-series-prog {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  color: rgba(255,255,255,0.6); flex: 0 0 auto;
}
.det-series-chev { width: 14px; height: 14px; color: rgba(255,255,255,0.4); flex: 0 0 14px; }

/* ============================================================
   SCENE 5 — Explore (Discover / Following / Notifications / Playlist)
   ============================================================ */
.hiw-phone-wrap[data-scene="explore"] { --scene-tint: rgba(123,97,255,0.24); }

/* Tighter padding for the dense explore screens */
.sc-pad-disc, .sc-pad-prof, .sc-pad-notif, .sc-pad-pl {
  padding: 22px 16px 16px; gap: 12px;
}

/* ----- 5.1 Discover (Scopri) ----- */
.disc-seg {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px; padding: 3px; gap: 2px;
}
.disc-seg-tab {
  display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.05;
  padding: 7px 2px; border-radius: 9px;
  font-family: var(--font-body); font-size: 8px; font-weight: 600;
  color: rgba(255,255,255,0.6);
  white-space: nowrap; overflow: hidden;
}
.disc-seg-tab.is-active {
  background: linear-gradient(90deg, #FF6B6B 0%, #FF3D5A 100%);
  color: #fff; font-weight: 700;
  box-shadow: 0 3px 10px rgba(255,107,107,0.35);
}
.disc-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--ink-30); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 9px 12px;
  font-family: var(--font-body); font-size: 11px; color: rgba(255,255,255,0.45);
}
.disc-search svg { width: 14px; height: 14px; color: rgba(255,255,255,0.5); flex: 0 0 14px; }

/* "In evidenza" hero (CollectionHeroCard) */
.disc-hero {
  position: relative; height: 128px; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08); background: var(--ink-30);
  display: flex;
}
.disc-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.disc-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(150deg, rgba(255,107,107,0.34) 0%, rgba(123,97,255,0.13) 45%, rgba(5,5,8,0.92) 100%),
    linear-gradient(180deg, transparent 10%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0.95) 100%);
}
.disc-hero-content { position: relative; margin-top: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; width: 100%; }
.disc-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
}
.disc-hero-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--coral-500); }
.disc-hero-title {
  font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff;
  letter-spacing: -0.02em; line-height: 1.1; text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.disc-hero-sub {
  font-family: var(--font-body); font-size: 9.5px; color: rgba(255,255,255,0.85); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.disc-hero-cta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.disc-hero-play {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; color: #0D0D0D; border-radius: 999px; padding: 5px 12px;
  font-family: var(--font-brand); font-weight: 700; font-size: 10px;
}
.disc-hero-play svg { width: 11px; height: 11px; color: #0D0D0D; }
.disc-hero-count { font-family: var(--font-body); font-size: 9px; font-weight: 500; color: rgba(255,255,255,0.7); }

/* Rails (DiscoveryRail) — titolo Poppins + "Vedi tutti" */
.disc-rail { display: flex; flex-direction: column; gap: 10px; }
.disc-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.disc-rail-head > span:first-child {
  font-family: var(--font-brand); font-weight: 700; font-size: 15px;
  color: rgba(255,255,255,0.96); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.disc-rail-all {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  font-family: var(--font-body); font-size: 9.5px; font-weight: 600; color: var(--coral-500);
}
.disc-rail-all svg { width: 11px; height: 11px; }
.disc-rail-row { display: flex; gap: 10px; overflow: hidden; margin: 0 -2px; padding: 0 2px; }

/* DiscoveryCard — cover landscape (ratio ~0.56), ♥/🔖 + play FAB bianco */
.disc-card { flex: 0 0 150px; display: flex; flex-direction: column; gap: 5px; }
.disc-card .cov {
  position: relative; width: 150px; height: 84px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08); overflow: hidden; background: var(--ink-30);
}
.disc-card .cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.disc-card-grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%); }
.disc-card-acts { position: absolute; top: 6px; right: 6px; display: flex; gap: 5px; }
.disc-card-acts i {
  width: 20px; height: 20px; border-radius: 999px;
  background: rgba(13,13,13,0.62); border: 1px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.disc-card-acts svg { width: 11px; height: 11px; }
.disc-card-play {
  position: absolute; bottom: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 999px; background: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.disc-card-play svg { width: 11px; height: 11px; color: #0D0D0D; margin-left: 1px; }
.disc-card .t {
  font-family: var(--font-brand); font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.95); line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.disc-card-sub { font-family: var(--font-display); font-size: 9px; font-weight: 600; color: var(--coral-500); letter-spacing: 0.02em; }
.disc-card-by { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-body); font-size: 8.5px; color: rgba(255,255,255,0.45); }
.disc-card-by svg { width: 10px; height: 10px; color: var(--coral-500); flex: 0 0 10px; }

/* ----- 5.2 Profile / Following (Seguiti) — hero blur + 4 stat + seguito anche da ----- */
/* Flusso normale (NON il flex height:100% di .sc-pad) per evitare che il contenuto
   alto comprima la hero — la barra KPI resta SOTTO il tasto Segui, mai sopra. */
.sc-pad-prof { display: block; height: auto; padding: 0; gap: 0; }
.prof-hero { position: relative; overflow: hidden; }
.prof-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px); transform: scale(1.25); opacity: 0.6; }
.prof-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,13,0.3) 0%, rgba(13,13,13,0.78) 60%, #0D0D0D 100%); }
.prof-hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 16px 16px; }
.prof-avatar2 {
  width: 58px; height: 58px; border-radius: 999px;
  background: linear-gradient(135deg, #4B2EA8, #FF6B6B);
  border: 3px solid #0D0D0D;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-brand); font-weight: 700; font-size: 18px; color: #fff;
}
.prof-name2 { font-family: var(--font-brand); font-weight: 700; font-size: 17px; color: #fff; letter-spacing: -0.01em; margin-top: 3px; }
.prof-member { font-family: var(--font-body); font-size: 10px; color: rgba(255,255,255,0.6); }
.prof-followbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 8px; min-width: 130px; height: 32px; border-radius: 999px;
  background: #fff; color: #0D0D0D; font-family: var(--font-brand); font-weight: 600; font-size: 12px;
}
.prof-followbtn svg { width: 13px; height: 13px; color: #0D0D0D; }
.prof-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--ink-30); border-radius: 16px; overflow: hidden;
  margin: 8px 14px 0;
}
.prof-stat { padding: 11px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; border-left: 1px solid rgba(255,255,255,0.05); }
.prof-stat:first-child { border-left: 0; }
.prof-stat .n { font-family: var(--font-brand); font-weight: 700; font-size: 15px; color: #fff; }
.prof-stat .l { font-family: var(--font-body); font-size: 8.5px; color: rgba(255,255,255,0.55); }
.prof-mutual { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; }
.prof-mutual-avs { display: inline-flex; }
.prof-mutual-avs i {
  width: 20px; height: 20px; border-radius: 999px;
  border: 1.5px solid #0D0D0D; margin-left: -7px;
  background: linear-gradient(135deg, #2B1A66, #4B2EA8);
}
.prof-mutual-avs i:first-child { margin-left: 0; }
.prof-mutual-avs i:nth-child(2) { background: linear-gradient(135deg, #7B61FF, #FF6B6B); }
.prof-mutual-avs i:nth-child(3) { background: linear-gradient(135deg, #FF6B6B, #FFB347); }
.prof-mutual-txt { flex: 1; font-family: var(--font-body); font-size: 9.5px; color: rgba(255,255,255,0.55); line-height: 1.35; }
.prof-seg { grid-template-columns: 1fr 1fr; margin: 14px 16px 0; }
.prof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 0; }
.prof-grid .disc-card { flex: none; width: auto; }
.prof-grid .disc-card .cov { width: 100%; height: 66px; }

/* ----- 5.3 Notifications (Notifiche) — header con chiudi, icona rounded, hint swipe ----- */
.notif-head { display: flex; align-items: center; gap: 8px; }
.notif-head > svg { width: 18px; height: 18px; color: #fff; flex: 0 0 18px; }
.notif-head-title {
  flex: 1; font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: rgba(255,255,255,0.96); letter-spacing: -0.01em;
}
.notif-clear {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-body); font-size: 10px; font-weight: 600; color: var(--coral-500);
}
.notif-clear svg { width: 12px; height: 12px; }
.notif-close {
  width: 26px; height: 26px; border-radius: 999px; flex: 0 0 26px;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
}
.notif-close svg { width: 15px; height: 15px; }
.notif-list { display: flex; flex-direction: column; gap: 8px; }
.notif-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  background: #15151C; border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px; padding: 10px 12px 10px 14px; overflow: hidden;
}
.notif-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--coral-500)); }
.notif-ico {
  width: 34px; height: 34px; border-radius: 11px; flex: 0 0 34px;
  background: color-mix(in srgb, var(--c, var(--coral-500)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--coral-500)) 38%, transparent);
  color: var(--c, var(--coral-500));
  display: flex; align-items: center; justify-content: center;
}
.notif-ico svg { width: 16px; height: 16px; }
.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-title {
  font-family: var(--font-body); font-weight: 600; font-size: 11.5px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-sub {
  font-family: var(--font-body); font-size: 10px; color: rgba(255,255,255,0.5); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notif-time { font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,0.4); flex: 0 0 auto; align-self: flex-start; padding-top: 2px; }
.notif-hint { text-align: center; font-family: var(--font-body); font-size: 9px; color: rgba(255,255,255,0.4); margin-top: 4px; }

/* ----- 5.3 Serie da Scopri (SeriesScreen — banner + lista episodi) ----- */
.ser-scene { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.ser-banner { position: relative; height: 150px; flex: 0 0 auto; }
.ser-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ser-banner-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,13,0.45) 0%, rgba(13,13,13,0.05) 30%, rgba(13,13,13,0.6) 68%, #0D0D0D 100%); }
.ser-back { position: absolute; top: 10px; left: 10px; z-index: 2; width: 28px; height: 28px; border-radius: 999px; background: rgba(0,0,0,0.4); color: #fff; display: flex; align-items: center; justify-content: center; }
.ser-back svg { width: 16px; height: 16px; }
.ser-banner-inner { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.ser-pill { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 3px 8px; border-radius: 8px; background: rgba(123,97,255,0.9); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.14em; color: #fff; }
.ser-pill svg { width: 10px; height: 10px; color: #fff; }
.ser-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #fff; letter-spacing: -0.02em; line-height: 1.1; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.ser-desc { font-family: var(--font-body); font-size: 9.5px; color: rgba(255,255,255,0.82); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ser-meta { font-family: var(--font-body); font-size: 9px; color: rgba(255,255,255,0.7); }
.ser-meta b { color: #fff; font-weight: 600; text-decoration: underline; }
.ser-cta-row { flex: 0 0 auto; padding: 12px 16px 8px; }
.ser-play { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #0D0D0D; border-radius: 999px; padding: 8px 18px; font-family: var(--font-brand); font-weight: 700; font-size: 12px; }
.ser-play svg { width: 13px; height: 13px; color: #0D0D0D; }
.ser-list-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin: 0 16px 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); }
.ser-list-head > span:first-child { font-family: var(--font-body); font-weight: 700; font-size: 13px; color: #fff; }
.ser-list-count { font-family: var(--font-body); font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.08); border-radius: 999px; padding: 1px 7px; }
.ser-eps { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; overflow: hidden; }
.ser-ep { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 8px; }
.ser-ep-cur { border-color: rgba(255,107,107,0.5); background: rgba(255,107,107,0.08); }
.ser-ep-num { width: 22px; flex: 0 0 22px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: rgba(255,255,255,0.45); display: flex; align-items: center; justify-content: center; }
.ser-ep-num.is-prog { color: var(--coral-500); }
.ser-ep-num .dot-done { width: 20px; height: 20px; border-radius: 999px; background: #34D399; color: #0D0D0D; display: flex; align-items: center; justify-content: center; }
.ser-ep-num .dot-done svg { width: 12px; height: 12px; }
.ser-ep-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: 0 0 44px; border: 1px solid rgba(255,255,255,0.06); }
.ser-ep-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ser-ep-t { font-family: var(--font-body); font-weight: 600; font-size: 11px; color: #fff; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ser-ep-status { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: 9px; color: rgba(255,255,255,0.5); }
.ser-ep-status .dot { width: 5px; height: 5px; border-radius: 999px; flex: 0 0 5px; background: rgba(255,255,255,0.3); }
.ser-ep-status .mut { color: rgba(255,255,255,0.4); }
.ser-ep-status.s-done { color: #34D399; }
.ser-ep-status.s-done .dot { background: #34D399; }
.ser-ep-status.s-prog { color: var(--coral-500); }
.ser-ep-status.s-prog .dot { background: var(--coral-500); }
.ser-ep-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden; margin-top: 1px; }
.ser-ep-bar i { display: block; height: 100%; background: var(--coral-500); border-radius: 2px; }
.ser-ep-acts { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.ser-ep-acts > svg { width: 15px; height: 15px; color: rgba(255,255,255,0.5); }
.ser-ep-play { width: 28px; height: 28px; border-radius: 999px; background: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 28px; }
.ser-ep-play svg { width: 13px; height: 13px; color: #0D0D0D; margin-left: 1px; }