/* PhiPTV — landing.css (index.html only; loads after site.css)
   The story sections: hand-off hero, pillars, versus, synced devices, the
   evening timeline, parental-controls panel, platform roadmap.
   Every mock UI here is built from elements + classes: the CSP forbids inline
   styles, so sizes such as chart bar heights are classes (.h3 … .h9). */

.grad {
  background: linear-gradient(100deg, var(--glow) 0%, #fff 42%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-landing .hero { padding-block-end: clamp(32px, 5vw, 64px); }
.page-landing .hero h1 { max-inline-size: 13ch; font-size: clamp(40px, 5.4vw, 70px); line-height: 1.02; }
@media (min-width: 960px) { .page-landing .hero { grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); } }

/* Shared progress bar. scaleX keeps the "playing" animation off the layout
   path; every .live bar runs the same keyframes, so the devices stay in step. */
.bar { display: block; block-size: 4px; border-radius: 4px; background: rgba(186, 158, 255, 0.18); overflow: hidden; }
.bar-fill { display: block; block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--glow)); transform-origin: 0 50%; transform: scaleX(0.38); }
@media (prefers-reduced-motion: no-preference) {
  .bar-fill.live { animation: playing 16s linear infinite alternate; }
  .pulse { animation: pulse-dot 2.2s var(--ease) infinite; }
  .stage { animation: rise 900ms var(--ease) 200ms both; }
  .float-a { animation: bob 7s ease-in-out infinite; }
  .float-b { animation: bob 8s ease-in-out -2s infinite; }
  .float-c { animation: bob 9s ease-in-out -4s infinite; }
  .sync-bus { animation: bus-glow 3.2s ease-in-out infinite; }
}
@keyframes playing { from { transform: scaleX(0.36); } to { transform: scaleX(0.5); } }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(88, 224, 168, 0.55); } 60% { box-shadow: 0 0 0 8px rgba(88, 224, 168, 0); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes bus-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Sections fade up as they enter the viewport where the browser supports
   scroll-driven animations; everywhere else they are simply visible. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
  }
}

/* ── Hero stage: TV + phone hand-off ─────────────────── */
.stage { position: relative; padding-block-end: clamp(40px, 7vw, 72px); padding-inline-end: clamp(12px, 3vw, 36px); }
.stage::before {
  content: ""; position: absolute; inset: 4% 0 6% 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.42), transparent);
  filter: blur(46px);
}
.stage-tv { position: relative; }
.stage-tv img { inline-size: 100%; block-size: auto; border-radius: var(--r-lg); box-shadow: var(--shadow), 0 0 0 1px var(--line-strong); }
.stage-tv::after {
  content: ""; position: absolute; inset-inline: 38%; inset-block-end: -14px; block-size: 14px;
  background: linear-gradient(180deg, rgba(186, 158, 255, 0.28), transparent);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}
.phone {
  position: absolute; inset-inline-end: 0; inset-block-end: 0;
  inline-size: clamp(118px, 31%, 196px); aspect-ratio: 9 / 18.4;
  padding: 7px; border-radius: 30px; rotate: 4deg;
  background: linear-gradient(160deg, #2A1A52, #0D0818);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65), 0 0 0 1.5px rgba(186, 158, 255, 0.4), 0 0 60px rgba(139, 92, 246, 0.35);
}
.phone-screen {
  position: relative; block-size: 100%; overflow: hidden; border-radius: 24px;
  background: linear-gradient(180deg, #1A1030, #0C0719 70%);
  padding: 26px 10px 10px; display: grid; align-content: start; gap: 8px;
}
.phone-notch { position: absolute; inset-block-start: 8px; inset-inline: 36%; block-size: 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.7); }
.phone-kicker { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; }
.cw { display: grid; gap: 6px; padding: 8px; border-radius: 14px; background: rgba(186, 158, 255, 0.07); border: 1px solid var(--line); }
.cw-art { display: block; aspect-ratio: 16 / 10; border-radius: 9px; background: linear-gradient(135deg, #3B2380, #8B5CF6 60%, #BA9EFF); }
.cw-title { font-size: 11.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-meta { font-size: 9.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.cw-btn { display: grid; place-items: center; min-block-size: 24px; border-radius: 999px; background: var(--violet); color: #fff; font-size: 10.5px; font-weight: 700; }
.float {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--text);
  background: rgba(26, 16, 48, 0.78); border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.float-a { inset-block-start: -16px; inset-inline-start: 6%; }
.float-b { inset-block-end: clamp(52px, 9vw, 96px); inset-inline-start: -2%; }
.float-c { inset-block-start: -22px; inset-inline-end: 2%; color: var(--warn); border-color: rgba(255, 198, 107, 0.4); }
.pulse { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--success); flex: 0 0 auto; }
@media (max-width: 560px) { .float { font-size: 11.5px; padding: 7px 11px; } .float-c { display: none; } .float-b { inset-inline-start: 0; } }

/* ── Pillars ─────────────────────────────────────────── */
.pillars {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.pillars li { display: grid; gap: 6px; align-content: start; padding: 24px 26px; background: linear-gradient(180deg, rgba(139, 92, 246, 0.07), transparent 70%), var(--bg); }
.pillars strong { font-size: 17px; letter-spacing: -0.01em; }
.pillars span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }

/* ── Versus ──────────────────────────────────────────── */
.versus-head { display: none; }
.versus { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.versus li { display: grid; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.vs-them, .vs-us { display: grid; gap: 8px; align-content: start; padding: 22px 26px; }
.vs-them { color: var(--muted); background: rgba(10, 6, 20, 0.55); }
.vs-them p, .vs-us p { font-size: 16px; line-height: 1.55; }
.vs-us { position: relative; background: linear-gradient(120deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.04) 70%); }
.vs-us strong { color: #fff; }
.vs-tag { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.vs-tag::before { content: ""; inline-size: 16px; block-size: 16px; border-radius: 50%; flex: 0 0 auto; background-repeat: no-repeat; background-position: center; background-size: 10px; }
.vs-them .vs-tag { color: rgba(148, 134, 176, 0.85); }
.vs-them .vs-tag::before { background-color: rgba(255, 107, 122, 0.14); background-image: linear-gradient(45deg, transparent 44%, var(--error) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--error) 44% 56%, transparent 56%); }
.vs-us .vs-tag { color: var(--success); }
.vs-us .vs-tag::before { background-color: rgba(88, 224, 168, 0.16); box-shadow: inset 0 0 0 1.5px rgba(88, 224, 168, 0.7); background-image: radial-gradient(circle, var(--success) 0 3px, transparent 3.5px); background-size: 100%; }
@media (min-width: 820px) {
  .versus-head { display: grid; grid-template-columns: 1fr 1.2fr; padding-inline: 26px; margin-block-end: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .versus-head span:last-child { color: var(--glow); padding-inline-start: 26px; }
  .versus li { grid-template-columns: 1fr 1.2fr; }
  .vs-tag { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vs-them, .vs-us { padding: 26px; position: relative; padding-inline-start: 58px; }
  .vs-them::before, .vs-us::before { content: ""; position: absolute; inset-inline-start: 26px; inset-block-start: 30px; inline-size: 18px; block-size: 18px; border-radius: 50%; background-repeat: no-repeat; background-position: center; }
  .vs-them::before { background-color: rgba(255, 107, 122, 0.14); background-size: 10px; background-image: linear-gradient(45deg, transparent 44%, var(--error) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--error) 44% 56%, transparent 56%); }
  .vs-us::before { background-color: rgba(88, 224, 168, 0.16); box-shadow: inset 0 0 0 1.5px rgba(88, 224, 168, 0.7); background-image: radial-gradient(circle, var(--success) 0 3.5px, transparent 4px); }
}

/* ── Bands + split layout ────────────────────────────── */
.band { border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(139, 92, 246, 0.09), rgba(139, 92, 246, 0.02)); }
.band-family { background: radial-gradient(60vw 60vh at 85% 20%, rgba(88, 224, 168, 0.07), transparent 70%), linear-gradient(180deg, rgba(139, 92, 246, 0.09), rgba(139, 92, 246, 0.02)); }
.split { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
.split .section-head { margin-block-end: 28px; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split-top { align-items: start; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .sticky-head { position: sticky; inset-block-start: 112px; }
}
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-inline-start: 34px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.ticks li strong { color: var(--text); }
.ticks li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%;
  background: rgba(139, 92, 246, 0.2); box-shadow: inset 0 0 0 1.5px rgba(186, 158, 255, 0.55);
}
.ticks li::after {
  content: ""; position: absolute; inset-inline-start: 7px; inset-block-start: 7px; inline-size: 5px; block-size: 9px;
  border: solid var(--glow); border-width: 0 2px 2px 0; rotate: 45deg;
}
.aside { margin-block-start: 24px; color: var(--muted); font-size: 14.5px; padding-inline-start: 14px; border-inline-start: 2px solid var(--line-strong); }

/* ── Synced devices ──────────────────────────────────── */
.sync-demo { display: grid; justify-items: center; }
.sync-devices { inline-size: 100%; display: grid; grid-template-columns: 46fr 30fr 16fr; gap: clamp(10px, 2.4vw, 24px); align-items: end; }
.sd { position: relative; display: grid; gap: 10px; justify-items: center; padding-block-end: 30px; }
.sd::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: calc(50% - 1px); inline-size: 2px; block-size: 24px; background: linear-gradient(180deg, transparent, var(--violet)); }
.sd-screen {
  inline-size: 100%; display: flex; flex-direction: column; gap: clamp(4px, 0.8vw, 8px); padding: 9%;
  border-radius: clamp(8px, 1.4vw, 14px); border: 1.5px solid var(--line-strong);
  background: linear-gradient(180deg, #1F1340, #0D0818); box-shadow: var(--shadow);
}
.sd-tv .sd-screen { aspect-ratio: 16 / 9.4; }
.sd-tab .sd-screen { aspect-ratio: 4 / 3.1; }
.sd-phone .sd-screen { aspect-ratio: 9 / 17; border-radius: clamp(8px, 1.6vw, 16px); padding: 12% 10%; }
.sd-art { display: block; flex: 1 1 auto; min-block-size: 0; border-radius: 6px; background: linear-gradient(135deg, #3B2380, #8B5CF6 60%, #BA9EFF); }
.sd-line { display: block; block-size: 5px; inline-size: 62%; border-radius: 4px; background: rgba(243, 238, 255, 0.55); }
.sd-line.short { inline-size: 38%; background: rgba(148, 134, 176, 0.6); }
.sd-phone .sd-line { inline-size: 84%; }
.sd-phone .sd-line.short { inline-size: 56%; }
.sd .bar { block-size: 3px; }
.sd-label { color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; }
.sync-bus { inline-size: 78%; block-size: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--violet) 12%, var(--glow) 50%, var(--violet) 88%, transparent); box-shadow: 0 0 18px rgba(139, 92, 246, 0.8); }
.sync-account {
  position: relative; margin-block-start: 26px; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 15px;
  background: var(--surface-hi); border: 1px solid var(--line-strong); box-shadow: var(--glow-shadow);
}
.sync-account::before { content: ""; position: absolute; inset-block-end: 100%; inset-inline-start: calc(50% - 1px); inline-size: 2px; block-size: 26px; background: linear-gradient(180deg, var(--glow), var(--violet)); }

/* ── Timeline ────────────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 14px; }
.timeline::before { content: ""; position: absolute; inset-block: 30px 30px; inset-inline-start: 27px; inline-size: 2px; background: linear-gradient(180deg, var(--violet), rgba(139, 92, 246, 0.1)); }
.timeline li {
  position: relative; display: grid; gap: 8px; padding: 22px 24px 22px 64px;
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface);
}
.timeline li::before {
  content: ""; position: absolute; inset-inline-start: 19px; inset-block-start: 26px; inline-size: 18px; block-size: 18px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--violet); box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.16);
}
.timeline h3 { font-size: 20px; }
.timeline li > p:last-child { color: var(--muted); font-size: 15.5px; }
.tl-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.tl-time { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--bg); background: var(--glow); border-radius: 6px; padding: 2px 8px; }
.tl-where { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ── Parental-controls panel ─────────────────────────── */
.pc-panel {
  display: grid; gap: 0; max-inline-size: 460px; inline-size: 100%; justify-self: center;
  border-radius: var(--r-xl); border: 1px solid var(--line-strong); overflow: hidden;
  background: linear-gradient(180deg, var(--surface-alt), var(--surface));
  box-shadow: var(--shadow), 0 0 80px rgba(88, 224, 168, 0.08);
}
.pc-head { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-block-end: 1px solid var(--line); background: rgba(88, 224, 168, 0.05); }
.pc-avatar { inline-size: 48px; block-size: 48px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: #06281B; background: linear-gradient(135deg, #58E0A8, #2FA77A); }
.pc-avatar svg { inline-size: 28px; block-size: 28px; }
.pc-id { flex: 1; min-inline-size: 0; }
.pc-name { font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.pc-sub { color: var(--muted); font-size: 13.5px; }
.pc-lock { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--warn); background: rgba(255, 198, 107, 0.09); border: 1px solid rgba(255, 198, 107, 0.35); }
.pc-lock svg { inline-size: 14px; block-size: 14px; }
.pc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 16px 24px; border-block-end: 1px solid var(--line); }
.pc-row:last-child { border-block-end: 0; }
.pc-row > span:first-child { color: var(--muted); font-size: 14.5px; }
.pc-row strong { font-size: 15.5px; font-variant-numeric: tabular-nums; }
.pc-stack .bar, .pc-stack small, .pc-stack .pc-tags, .pc-stack .pc-bars { flex: 1 1 100%; }
.pc-stack .bar { block-size: 6px; }
.pc-used { transform: scaleX(0.58); background: linear-gradient(90deg, var(--success), var(--warn)); }
.pc-row small { color: var(--muted); font-size: 12.5px; }
.pc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-tags b, .pc-tags i { font-style: normal; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.pc-tags b { color: var(--success); background: rgba(88, 224, 168, 0.1); border: 1px solid rgba(88, 224, 168, 0.4); }
.pc-tags i { color: var(--muted); border: 1px dashed var(--line-strong); }
.pc-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; block-size: 56px; }
.pc-bars i { display: block; border-radius: 5px 5px 2px 2px; background: rgba(186, 158, 255, 0.28); }
.pc-bars .today { background: linear-gradient(180deg, var(--glow), var(--violet)); }
.h3 { block-size: 30%; } .h4 { block-size: 40%; } .h5 { block-size: 50%; } .h6 { block-size: 60%; } .h7 { block-size: 72%; } .h9 { block-size: 92%; }

/* ── Tweaks to shared landing pieces ─────────────────── */
.page-landing .feature { min-block-size: 0; }
.page-landing .screens .is-phone { grid-row: auto; }
.page-landing .screens .is-phone img { inline-size: min(100%, 200px); }
#get .hero-actions { justify-content: center; }