.brand-opener {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--canvas-deep);
  pointer-events: none;
  animation: opener-shell .9s var(--ease) .04s both;
}

.brand-opener::before {
  content: "";
  position: absolute;
  width: min(520px, 82vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253,243,243,.055), transparent 66%);
  transform: scale(.72);
  animation: opener-halo 1.12s var(--ease) both;
}

.brand-opener-inner {
  position: relative;
  display: grid;
  min-width: min(310px, 78vw);
  justify-items: center;
}

.brand-opener img {
  width: clamp(118px, 12vw, 148px);
  opacity: 0;
  transform: translateY(8px) scale(.97);
  animation: opener-mark 1.12s var(--ease) .08s both;
}

.brand-opener-line {
  width: 100%;
  height: 1px;
  margin-top: 24px;
  overflow: hidden;
  background: var(--hairline-strong);
  transform: scaleX(0);
  animation: opener-line 1s var(--ease) .2s both;
}

.brand-opener small {
  margin-top: 13px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 560;
  letter-spacing: .16em;
  opacity: 0;
  animation: opener-caption .8s var(--ease) .32s both;
}

.opener-seen .brand-opener { display: none; }

@keyframes opener-shell {
  0%, 72% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes opener-mark {
  0% { opacity: 0; transform: translateY(8px) scale(.97); }
  35%, 72% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-4px) scale(1.01); }
}

@keyframes opener-line {
  0% { opacity: 0; transform: scaleX(0); }
  42%, 76% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(.82); }
}

@keyframes opener-caption {
  0% { opacity: 0; transform: translateY(4px); }
  42%, 74% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-2px); }
}

@keyframes opener-halo {
  0% { opacity: 0; transform: scale(.72); }
  48% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.06); }
}

@keyframes hero-first-view {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes hero-product-view {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.js:not(.opener-seen) .hero-copy > * { animation: hero-first-view .62s var(--ease) both; }
.js:not(.opener-seen) .hero-copy > *:nth-child(1) { animation-delay: .36s; }
.js:not(.opener-seen) .hero-copy > *:nth-child(2) { animation-delay: .42s; }
.js:not(.opener-seen) .hero-copy > *:nth-child(3) { animation-delay: .48s; }
.js:not(.opener-seen) .hero-copy > *:nth-child(4) { animation-delay: .54s; }
.js:not(.opener-seen) .hero-copy > *:nth-child(5) { animation-delay: .6s; }
.js:not(.opener-seen) .hero-copy > *:nth-child(6) { animation-delay: .66s; }
.js:not(.opener-seen) .hero-product { animation: hero-product-view .72s var(--ease) .5s both; }

.site-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 7%, rgba(255,255,255,.055), transparent 30%),
    radial-gradient(circle at 84% 22%, rgba(179,54,47,.05), transparent 26%),
    linear-gradient(180deg, var(--canvas) 0%, var(--canvas-deep) 48%, var(--canvas) 100%);
}

.site-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 42%);
}

.shell {
  width: min(var(--shell), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.section { padding-block: var(--section-space); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 18px;
  height: 2px;
  background: var(--mark);
}

h1, h2, h3 { text-wrap: balance; }

h1 {
  max-width: 760px;
  margin-bottom: 26px;
  font-size: clamp(50px, 7.25vw, 102px);
  font-weight: 680;
  letter-spacing: -.065em;
  line-height: .94;
}

h1 span, h2 span { color: var(--ink-soft); }

h2 {
  margin-bottom: 26px;
  font-size: clamp(38px, 5.25vw, 72px);
  font-weight: 640;
  letter-spacing: -.055em;
  line-height: 1;
}

h3 {
  margin-bottom: 14px;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 620;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.section-heading { max-width: 720px; }
.section-heading > p:last-child,
.feature-copy > p,
.hero-lede {
  color: var(--ink-soft);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.68;
}

.section-heading.centered {
  margin-inline: auto;
  text-align: center;
}

.section-heading.centered .eyebrow { justify-content: center; }

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 12px 19px;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-app);
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  transition: background var(--normal) var(--ease), transform var(--normal) var(--ease), color var(--normal) var(--ease);
}

.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--cta); color: var(--ink); }
.button-primary:hover { background: var(--cta-hover); }
.button-soft { background: rgba(255,255,255,.085); color: var(--ink); }
.button-soft:hover, .button-quiet:hover { background: rgba(255,255,255,.13); }
.button-quiet { background: rgba(255,255,255,.05); }
.button-large { min-height: 54px; padding-inline: 24px; font-size: 15px; }
.button-compact { min-height: 40px; padding: 10px 15px; }

.text-link, .arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-app);
  font-size: 14px;
  font-weight: 610;
}

.arrow-link span { color: var(--ink-red); transition: transform var(--normal) var(--ease); }
.arrow-link:hover span { transform: translateX(3px); }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}

.reveal[data-delay="1"] { transition-delay: 70ms; }
.reveal[data-delay="2"] { transition-delay: 140ms; }
.reveal.in-view { opacity: 1; transform: none; }

html:not(.js) .reveal { opacity: 1; transform: none; }

/* Header */
.site-header {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  left: 0;
  padding-top: max(10px, env(safe-area-inset-top));
  transition: background var(--normal) var(--ease), box-shadow var(--normal) var(--ease);
}

.site-header.is-scrolled {
  background: rgba(43,43,42,.9);
  box-shadow: 0 1px 0 var(--hairline);
  backdrop-filter: blur(18px) saturate(110%);
}

.nav-shell { display: flex; min-height: 66px; align-items: center; gap: 28px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  font-family: var(--font-app);
  font-size: 17px;
  font-weight: 690;
  letter-spacing: -.03em;
}

.brand img { width: 34px; height: auto; }

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
  margin-inline: auto;
}

.primary-nav > a {
  position: relative;
  padding-block: 10px;
  color: var(--ink-muted);
  font-family: var(--font-app);
  font-size: 13px;
  font-weight: 560;
  transition: color var(--fast) var(--ease);
}

.primary-nav > a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 2px;
  background: var(--cta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--normal) var(--ease);
}

.primary-nav > a:hover, .primary-nav > a.active { color: var(--ink); }
.primary-nav > a.active::after { transform: scaleX(1); }
.desktop-account { display: flex; align-items: center; gap: 15px; }
.desktop-account .text-link { color: var(--ink-soft); }
.nav-account, .nav-toggle { display: none; }

/* Hero */
.hero {
  min-height: 920px;
  display: flex;
  align-items: center;
  padding-top: 148px;
  padding-bottom: 96px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
  align-items: center;
  gap: clamp(50px, 7vw, 104px);
}

.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { max-width: 700px; font-size: clamp(54px, 5.6vw, 78px); line-height: .96; }
.hero-lede { max-width: 650px; margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 10px; }
.hero-login-link { padding-block: 10px; color: var(--ink-muted); font-size: 13px; }
.hero-login-link:hover { color: var(--ink); }
.hero-microcopy { margin: 0 0 6px; color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; }
.hero-trustline { margin: 0 0 18px; color: var(--ink-faint); font-size: 12px; }
.final-secondary { margin-top: 14px; color: var(--ink-muted); font-size: 13px; }
.final-secondary a { color: var(--ink-muted); }
.final-secondary a:hover { color: var(--ink); }

.hero-entry {
  max-width: 570px;
  margin-bottom: 34px;
}

body.nav-open { overflow: hidden; }

.hero-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.hero-entry a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.042);
  transition: background var(--normal) var(--ease);
}

.hero-entry a:hover { background: rgba(255,255,255,.075); }
.entry-icon {
  display: grid;
  width: 36px;
  height: 30px;
  place-items: center;
  border-radius: var(--radius-xs);
  background: var(--surface-3);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10px;
}

.hero-entry strong, .hero-entry small { display: block; }
.hero-entry strong { font-family: var(--font-app); font-size: 13px; }
.hero-entry small { margin-top: 2px; color: var(--ink-muted); font-size: 11px; }
.hero-entry a > span:last-child { color: var(--ink-red); }
.hero-entry-grid .entry-icon { width: 34px; }
.hero-entry-grid a { padding-inline: 11px; }
.hero-entry-grid strong { font-size: 12px; }
.hero-entry-grid small { font-size: 9px; }

.hero-facts {
  display: flex;
  gap: clamp(24px, 4vw, 48px);
  padding: 0;
  margin: 0;
  list-style: none;
}

.hero-facts li { display: flex; align-items: baseline; gap: 8px; }
.hero-facts strong { font-family: var(--font-mono); font-size: 18px; font-weight: 530; }
.hero-facts span { color: var(--ink-muted); font-size: 11px; }

.hero-product { position: relative; }
.hero-product::before {
  content: "";
  position: absolute;
  inset: 10% 2% -8%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(179,54,47,.07);
  filter: blur(70px);
}

.product-window {
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-xl);
  background: rgba(51,51,49,.92);
  box-shadow: var(--shadow-panel);
  font-family: var(--font-app);
}

.product-bar {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(255,255,255,.025);
}

.product-brand { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 650; }
.product-brand img { width: 24px; }
.connection-state { display: flex; align-items: center; gap: 7px; color: var(--ink-muted); font-size: 10px; }
.connection-state span, .availability i, .trust-copy > div span::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 3px rgba(147,170,153,.1);
}

.scene-tabs { display: flex; gap: 4px; padding: 12px 14px 0; }
.scene-tabs button {
  padding: 9px 13px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.scene-tabs button[aria-selected="true"] { background: var(--surface-hover); color: var(--ink); }
.scene-panel { min-height: 450px; padding: 12px 14px 14px; }

.live-picture {
  position: relative;
  min-height: 292px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 64% 34%, rgba(253,243,243,.16), transparent 5%),
    radial-gradient(circle at 62% 37%, rgba(253,243,243,.07), transparent 23%),
    linear-gradient(145deg, #3f4742 0%, #26312f 38%, #2b2b2a 70%, #3a342e 100%);
}

.picture-grid {
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(135deg, #000, transparent 75%);
}

.live-label {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-xs);
  background: rgba(36,36,35,.74);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .08em;
}
.live-label span, .record-live i, .record-time i { width: 6px; height: 6px; border-radius: 50%; background: var(--mark); }
.picture-title { position: absolute; right: 18px; bottom: 18px; left: 18px; }
.picture-title small, .picture-title strong, .picture-title span { display: block; }
.picture-title small { margin-bottom: 4px; color: var(--ink-muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.picture-title strong { font-size: 25px; letter-spacing: -.04em; }
.picture-title span { color: var(--ink-muted); font-size: 11px; }
.now-row { padding: 14px 4px 10px; }
.now-row > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; }
.now-row strong, .now-row span { font-size: 9px; }
.now-row span { color: var(--ink-muted); }
.progress, .program-progress, .record-track { height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.1); }
.progress span, .program-progress i, .record-track span { display: block; height: 100%; border-radius: inherit; background: var(--mark); }
.equal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.equal-actions button, .program-actions button, .vod-detail button {
  min-height: 38px;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.085);
  font-size: 11px;
  font-weight: 620;
}
.equal-actions button:first-child { background: var(--cta); }

.mini-heading, .studio-save { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 16px; }
.mini-heading small, .mini-heading strong { display: block; }
.mini-heading small { margin-bottom: 3px; color: var(--ink-muted); font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }
.mini-heading strong { font-size: 21px; letter-spacing: -.04em; }
.mini-status { padding: 5px 8px; border-radius: var(--radius-xs); background: var(--surface-hover); color: var(--ink-muted); font-size: 8px; }
.mini-status.good { color: var(--positive); }
.zap-list { display: grid; gap: 7px; }
.zap-item { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 11px; border-radius: var(--radius-md); background: rgba(255,255,255,.045); }
.zap-item.active { box-shadow: inset 3px 0 var(--mark); background: rgba(255,255,255,.075); }
.source-mark, .channel-logo, .remote-logo { display: grid; width: 34px; height: 34px; place-items: center; border-radius: var(--radius-sm); background: var(--surface-3); font-weight: 700; }
.zap-item small, .zap-item strong { display: block; }
.zap-item small { color: var(--ink-muted); font-family: var(--font-mono); font-size: 7px; }
.zap-item strong { font-size: 12px; }
.zap-action { padding: 6px 8px; border-radius: var(--radius-xs); background: rgba(255,255,255,.06); color: var(--ink-soft); font-size: 8px; }
.scene-note { display: flex; align-items: center; gap: 8px; margin: 13px 4px 0; color: var(--ink-muted); font-size: 9px; }
.scene-note span { width: 12px; height: 1px; background: var(--ink-faint); }

.studio-mini { display: grid; grid-template-columns: .8fr 1.2fr; min-height: 287px; overflow: hidden; border-radius: var(--radius-md); background: rgba(0,0,0,.11); }
.studio-groups, .studio-channels { padding: 14px; }
.studio-groups { border-right: 1px solid var(--hairline); }
.studio-groups > span, .studio-channels > span { display: block; margin-bottom: 12px; color: var(--ink-faint); font-family: var(--font-mono); font-size: 7px; letter-spacing: .12em; }
.studio-groups button { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 9px 7px; border: 0; border-radius: var(--radius-xs); background: transparent; font-size: 9px; text-align: left; }
.studio-groups button:first-of-type { background: var(--surface-hover); }
.studio-groups b { color: var(--ink-muted); font-family: var(--font-mono); font-size: 7px; }
.studio-channels div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 10px 7px; border-bottom: 1px solid var(--hairline); }
.studio-channels i { color: var(--ink-faint); font-style: normal; }
.studio-channels b { font-size: 9px; }
.studio-channels em { color: var(--positive); font-family: var(--font-mono); font-size: 6px; font-style: normal; }
.studio-save { padding: 11px 4px 0; color: var(--ink-muted); font-size: 8px; }
.studio-save button { padding: 7px 10px; border: 0; border-radius: var(--radius-xs); background: var(--cta); font-size: 8px; }

.device-dock { display: flex; gap: 7px; padding: 0 14px 14px; }
.device-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(255,255,255,.04); color: var(--ink-muted); font-size: 8px; }
.device-pill.active { background: rgba(147,170,153,.11); color: var(--ink-soft); }
.device-pill i { position: relative; display: block; width: 13px; height: 9px; border: 1px solid currentColor; border-radius: 2px; }
.device-phone { width: 7px !important; height: 12px !important; }
.device-web::after { content: ""; position: absolute; right: 2px; bottom: -3px; left: 2px; height: 1px; background: currentColor; }

/* Proof */
.proof-strip { border-block: 1px solid var(--hairline); background: rgba(255,255,255,.018); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-grid p { min-height: 118px; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 2px 13px; padding: 20px 24px; margin: 0; border-left: 1px solid var(--hairline); }
.proof-grid p:last-child { border-right: 1px solid var(--hairline); }
.proof-grid span { grid-row: 1 / 3; color: var(--ink-faint); font-family: var(--font-mono); font-size: 9px; }
.proof-grid strong { font-family: var(--font-app); font-size: 14px; }
.proof-grid small { color: var(--ink-muted); font-size: 10px; line-height: 1.4; }

/* Ecosystem */
.ecosystem { background: rgba(0,0,0,.08); }
.device-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 66px; }
.device-card { min-height: 540px; display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: rgba(255,255,255,.032); }
.device-card.featured { background: rgba(255,255,255,.055); box-shadow: var(--shadow-soft); }
.device-card-top { display: flex; justify-content: space-between; margin-bottom: 38px; }
.index { color: var(--ink-faint); font-family: var(--font-mono); font-size: 9px; }
.availability { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-muted); font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; }
.availability i { display: block; }
.device-card h3 { margin-top: auto; }
.device-card > p { min-height: 72px; margin-bottom: 24px; color: var(--ink-muted); font-size: 13px; line-height: 1.65; }
.device-card .arrow-link { margin-top: 3px; }
.card-links { display: flex; align-items: center; gap: 18px; margin-top: 3px; }
.sub-link { color: var(--ink-muted); font-family: var(--font-app); font-size: 11px; font-weight: 560; transition: color var(--fast) var(--ease); }
.sub-link:hover { color: var(--ink); }
.tv-code-visual, .browser-code-visual, .phone-code-visual { height: 240px; display: grid; place-items: center; margin-bottom: 32px; }
.tv-screen-mini { position: relative; width: 86%; aspect-ratio: 16/9; overflow: hidden; padding: 16px; border-radius: var(--radius-sm); background: linear-gradient(135deg, #3f4945, #28302e 55%, #403930); box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.tv-screen-mini::after { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px); background-size: 30px 30px; }
.visual-live { position: relative; z-index: 1; padding: 4px 6px; border-radius: 4px; background: var(--mark); font-family: var(--font-mono); font-size: 6px; }
.tv-screen-mini strong, .tv-screen-mini small { position: absolute; z-index: 1; left: 16px; display: block; }
.tv-screen-mini strong { bottom: 28px; font-family: var(--font-app); font-size: 16px; }
.tv-screen-mini small { bottom: 15px; color: var(--ink-muted); font-size: 8px; }
.tv-screen-mini i { position: absolute; z-index: 1; right: 16px; bottom: 16px; left: 16px; height: 2px; background: linear-gradient(90deg, var(--mark) 60%, rgba(255,255,255,.16) 60%); }
.tv-stand-mini { width: 32%; height: 12px; margin-top: -62px; border-bottom: 3px solid rgba(255,255,255,.18); transform: perspective(50px) rotateX(45deg); }
.browser-code-visual { width: 100%; padding-top: 18px; }
.browser-code-visual > div { width: 100%; }
.browser-top { display: flex; height: 28px; align-items: center; gap: 5px; padding: 0 10px; border: 1px solid var(--hairline); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--surface-3); }
.browser-top i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); }
.browser-top span { flex: 1; margin-left: 8px; padding: 4px 8px; border-radius: 3px; background: rgba(0,0,0,.13); color: var(--ink-faint); font-family: var(--font-mono); font-size: 6px; }
.browser-body { position: relative; height: 166px; overflow: hidden; padding: 20px; border: 1px solid var(--hairline); border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: #303330; }
.browser-body b { display: block; width: 43%; height: 14px; margin-bottom: 12px; border-radius: 3px; background: rgba(255,255,255,.16); }
.browser-body span { display: block; width: 62%; height: 5px; margin-bottom: 7px; border-radius: 2px; background: rgba(255,255,255,.08); }
.browser-body span:nth-of-type(2) { width: 54%; }
.browser-body span:nth-of-type(3) { width: 38%; }
.browser-body em { position: absolute; right: 18px; bottom: 18px; width: 43%; height: 72px; border-radius: 7px; background: linear-gradient(135deg, #46514b, #282f2d); box-shadow: inset 3px 0 var(--mark); }
.phone-code-visual { position: relative; width: 132px; height: 240px; margin-inline: auto; border: 1px solid var(--hairline-strong); border-radius: 24px; background: #323230; box-shadow: 0 18px 40px rgba(0,0,0,.24); }
.phone-speaker { position: absolute; top: 10px; width: 28px; height: 3px; border-radius: 99px; background: var(--ink-faint); }
.phone-title { position: absolute; top: 28px; font-family: var(--font-mono); font-size: 7px; letter-spacing: .1em; }
.phone-pad { width: 92px; height: 92px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center; border-radius: 50%; background: rgba(255,255,255,.055); }
.phone-pad i, .phone-pad b { font-size: 9px; font-style: normal; }
.phone-pad i:nth-child(1) { grid-column: 2; }.phone-pad i:nth-child(2) { grid-column: 1; grid-row: 2; }.phone-pad b { grid-column: 2; grid-row: 2; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--cta); }.phone-pad i:nth-child(4) { grid-column: 3; grid-row: 2; }.phone-pad i:nth-child(5) { grid-column: 2; grid-row: 3; }
.phone-home { position: absolute; bottom: 11px; width: 38px; height: 3px; border-radius: 99px; background: var(--ink-faint); }

/* App installation */
.install-section { padding-block: clamp(88px, 9vw, 124px); scroll-margin-top: 76px; border-block: 1px solid var(--hairline); background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)); }
.install-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .65fr); align-items: end; gap: clamp(42px, 7vw, 100px); }
.install-heading h2 { max-width: 760px; margin-bottom: 0; font-size: clamp(42px, 4.5vw, 64px); }
.install-heading > p { max-width: 520px; margin: 0 0 7px; color: var(--ink-soft); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; }
.install-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.install-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: stretch; gap: 24px; min-height: 306px; padding: 20px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: rgba(255,255,255,.032); }
.install-card.featured { background: rgba(255,255,255,.052); box-shadow: var(--shadow-soft); }
.install-visual { min-height: 100%; display: grid; place-items: center; border-radius: var(--radius-md); background: rgba(0,0,0,.11); }
.install-tv { position: relative; width: 116px; aspect-ratio: 16/10; display: grid; place-items: center; border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); background: linear-gradient(145deg, #46504b, #29312f 60%, #3d3732); box-shadow: 0 16px 35px rgba(0,0,0,.24); }
.install-tv::after { content: ""; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 20px 20px; }
.install-tv span { position: relative; z-index: 1; font-family: var(--font-app); font-size: 12px; font-weight: 680; }
.install-tv i { position: absolute; z-index: 1; right: 12px; bottom: 10px; left: 12px; height: 2px; background: linear-gradient(90deg, var(--mark) 55%, rgba(255,255,255,.16) 55%); }
.tv-install-visual > b { width: 46px; height: 7px; margin-top: -54px; border-bottom: 2px solid var(--ink-faint); transform: perspective(30px) rotateX(45deg); }
.install-phone { position: relative; width: 94px; height: 188px; display: grid; place-items: center; border: 1px solid var(--hairline-strong); border-radius: 21px; background: #343432; box-shadow: 0 16px 35px rgba(0,0,0,.28); }
.install-phone::before { content: ""; position: absolute; top: 8px; width: 26px; height: 3px; border-radius: 99px; background: var(--ink-faint); }
.install-phone span { font-family: var(--font-app); font-size: 12px; font-weight: 680; }
.install-phone i { position: absolute; right: 14px; bottom: 28px; left: 14px; height: 2px; background: linear-gradient(90deg, var(--mark) 72%, rgba(255,255,255,.13) 72%); }
.install-phone em { position: absolute; bottom: 10px; color: var(--ink-faint); font-family: var(--font-mono); font-size: 7px; font-style: normal; }
.install-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
.install-platform { margin-bottom: 10px; color: var(--ink-muted); font-family: var(--font-mono); font-size: 10px; font-weight: 650; letter-spacing: .1em; }
.install-copy h3 { margin-bottom: 12px; font-size: 25px; }
.install-copy > p:not(.install-platform) { min-height: 60px; margin-bottom: 16px; color: var(--ink-muted); font-size: 13px; line-height: 1.6; }
.download-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.download-meta span { max-width: 100%; overflow: hidden; padding: 5px 8px; border-radius: var(--radius-xs); background: rgba(255,255,255,.055); color: var(--ink-muted); font-family: var(--font-mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.install-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.install-actions .button { min-height: 42px; padding-inline: 10px; font-size: 11px; }
.install-note { max-width: 760px; margin: 24px auto 0; color: var(--ink-muted); font-size: 10px; line-height: 1.55; text-align: center; }

/* Performance */
.performance-grid, .feature-grid, .companion-grid, .trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(54px, 8vw, 120px); }
.check-list { display: grid; gap: 0; padding: 0; margin: 42px 0 0; list-style: none; }
.check-list li { display: grid; grid-template-columns: 34px 1fr; gap: 2px 14px; padding: 15px 0; border-top: 1px solid var(--hairline); }
.check-list li:last-child { border-bottom: 1px solid var(--hairline); }
.check-list span { grid-row: 1 / 3; color: var(--ink-faint); font-family: var(--font-mono); font-size: 9px; }
.check-list strong { font-family: var(--font-app); font-size: 13px; }
.check-list small { color: var(--ink-muted); font-size: 11px; }
.load-visual { padding: clamp(22px, 3vw, 36px); border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: rgba(255,255,255,.035); box-shadow: var(--shadow-soft); }
.load-top { display: flex; justify-content: space-between; padding-bottom: 23px; border-bottom: 1px solid var(--hairline); }
.load-top span { color: var(--ink-faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }
.load-top strong { font-family: var(--font-app); font-size: 12px; }
.load-track { display: grid; gap: 9px; padding-block: 24px; }
.load-row { display: grid; grid-template-columns: 125px 1fr 64px; align-items: center; gap: 14px; min-height: 54px; padding: 0 15px; border-radius: var(--radius-sm); background: rgba(255,255,255,.028); color: var(--ink-muted); font-size: 10px; }
.load-row i { height: 4px; border-radius: 999px; background: rgba(255,255,255,.07); }
.load-row small { text-align: right; }
.load-row.current { background: rgba(255,255,255,.09); color: var(--ink); box-shadow: inset 3px 0 var(--mark); }
.load-row.current i { background: linear-gradient(90deg, var(--mark) 67%, rgba(255,255,255,.13) 67%); }
.load-row.next { background: rgba(255,255,255,.055); }
.load-row.previous, .load-row.later { opacity: .48; }
.load-row.later i { background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 10px, transparent 10px 15px); }
.load-caption { display: flex; align-items: center; gap: 12px; padding-top: 21px; border-top: 1px solid var(--hairline); }
.load-caption > span { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--positive); }
.load-caption p { margin: 0; color: var(--ink-muted); font-size: 10px; }.load-caption strong { color: var(--ink-soft); }

/* Feature canvases */
.feature-section { border-top: 1px solid var(--hairline); }
.feature-copy > p { margin-bottom: 30px; }
.feature-points { display: grid; gap: 10px; margin-bottom: 34px; }
.feature-points span { display: flex; align-items: center; gap: 11px; color: var(--ink-soft); font-family: var(--font-app); font-size: 13px; }
.feature-points span::before { content: ""; width: 13px; height: 1px; background: var(--mark); }
.feature-grid.reverse .feature-copy { order: 2; }
.product-canvas { overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: rgba(54,54,52,.96); box-shadow: var(--shadow-panel); font-family: var(--font-app); }
.canvas-header { display: flex; min-height: 82px; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--hairline); }
.canvas-header small, .canvas-header strong { display: block; }.canvas-header small { margin-bottom: 2px; color: var(--ink-faint); font-family: var(--font-mono); font-size: 7px; letter-spacing: .12em; }.canvas-header strong { font-size: 19px; letter-spacing: -.035em; }
.canvas-meta { padding: 6px 8px; border-radius: var(--radius-xs); background: var(--surface-hover); color: var(--ink-muted); font-size: 8px; }
.zappilot-visual { padding-bottom: 9px; }
.program-card { display: grid; grid-template-columns: 150px 1fr 144px; align-items: center; gap: 14px; min-height: 104px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.program-card.current { background: rgba(255,255,255,.055); box-shadow: inset 4px 0 var(--mark); }
.program-card.muted { opacity: .45; }
.program-source { display: flex; align-items: center; gap: 9px; }.program-source > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: var(--radius-sm); background: var(--surface-3); font-size: 12px; font-weight: 700; }.program-source p, .program-main p { margin: 0; }.program-source strong, .program-source small, .program-main strong, .program-main small { display: block; }.program-source strong { font-size: 10px; }.program-source small { color: var(--ink-muted); font-size: 8px; }
.program-main { position: relative; padding-right: 72px; }.program-main small { color: var(--ink-muted); font-family: var(--font-mono); font-size: 7px; }.program-main strong { margin-top: 2px; font-size: 13px; }.program-main > span { position: absolute; top: 12px; right: 0; color: var(--ink-muted); font-size: 8px; }.program-progress { margin-top: 10px; }.program-progress.empty i { width: 0; }
.program-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.program-actions button:first-child { background: var(--cta); }.program-actions button.remember { background: rgba(255,255,255,.08); }

.football-section { background: rgba(0,0,0,.07); }
.date-switch { display: flex; align-items: center; gap: 8px; }.date-switch button { width: 25px; height: 25px; border: 0; border-radius: 50%; background: var(--surface-hover); }.date-switch span { color: var(--ink-muted); font-size: 8px; }
.league-row { display: flex; justify-content: space-between; padding: 12px 18px; color: var(--ink-faint); font-family: var(--font-mono); font-size: 7px; letter-spacing: .09em; }
.match-card { display: grid; grid-template-columns: 74px 1fr 190px; align-items: center; min-height: 134px; border-top: 1px solid var(--hairline); }.match-card.live-match { background: rgba(255,255,255,.042); box-shadow: inset 4px 0 var(--mark); }.match-time { display: grid; place-items: center; gap: 4px; }.match-time span { padding: 4px 6px; border-radius: 4px; background: var(--mark); font-family: var(--font-mono); font-size: 7px; }.match-time strong { font-family: var(--font-mono); font-size: 12px; }.match-time small { color: var(--ink-muted); font-size: 8px; }
.teams { padding: 12px 20px; border-inline: 1px solid var(--hairline); }.teams p { display: flex; justify-content: space-between; margin: 0; padding: 5px 0; }.teams strong { font-size: 12px; }.teams b { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.match-source { padding: 12px 16px; }.match-source > span { display: flex; align-items: center; gap: 7px; margin-bottom: 11px; color: var(--ink-muted); font-size: 8px; }.match-source > span i { width: 5px; height: 5px; border-radius: 50%; background: var(--positive); }.match-source > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.match-source button { min-height: 31px; border: 0; border-radius: var(--radius-xs); background: rgba(255,255,255,.075); font-size: 8px; }.live-match .match-source button:first-child { background: var(--cta); }

/* Studio */
.studio-section { background: #282827; border-block: 1px solid var(--hairline); }
.studio-heading { max-width: none; display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 70px; }.studio-heading > p { padding-bottom: 8px; }
.studio-workspace { margin-top: 62px; overflow: hidden; border: 1px solid var(--hairline-strong); border-radius: var(--radius-xl); background: #343432; box-shadow: var(--shadow-panel); font-family: var(--font-app); }
.workspace-toolbar { display: flex; min-height: 74px; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--hairline); background: rgba(255,255,255,.025); }.workspace-toolbar > div { display: flex; align-items: center; gap: 11px; }.workspace-logo { display: grid; width: 37px; height: 32px; place-items: center; border-radius: var(--radius-xs); background: var(--surface-3); font-size: 11px; font-weight: 700; }.workspace-toolbar p { margin: 0; }.workspace-toolbar small, .workspace-toolbar strong { display: block; }.workspace-toolbar small, .workspace-label { color: var(--ink-faint); font-family: var(--font-mono); font-size: 7px; letter-spacing: .1em; }.workspace-toolbar strong { font-size: 12px; }
.workspace-actions { gap: 7px !important; }.workspace-actions span { margin-right: 7px; color: var(--positive); font-size: 8px; }.workspace-actions button { min-height: 34px; padding: 0 12px; border: 0; border-radius: var(--radius-xs); background: var(--surface-hover); font-size: 8px; }.workspace-actions .save { background: var(--cta); }
.workspace-body { display: grid; grid-template-columns: 200px 210px minmax(310px, 1fr) 214px; min-height: 480px; }.source-sidebar, .group-panel, .channel-panel, .inspector-panel { min-width: 0; padding: 16px; border-right: 1px solid var(--hairline); }.inspector-panel { border-right: 0; }
.source-sidebar > button { display: grid; width: 100%; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 9px 7px; margin-top: 8px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; }.source-sidebar > button.active { background: var(--surface-hover); }.source-sidebar button > i { display: grid; width: 31px; height: 31px; place-items: center; border-radius: var(--radius-xs); background: var(--surface-3); color: var(--ink-muted); font-family: var(--font-mono); font-size: 7px; font-style: normal; }.source-sidebar button strong, .source-sidebar button small { display: block; }.source-sidebar button strong { font-size: 9px; }.source-sidebar button small { color: var(--ink-muted); font-size: 7px; }.source-sidebar button b { color: var(--positive); font-size: 6px; }.source-sidebar .add-source { display: block; margin-top: 18px; padding: 10px; background: rgba(255,255,255,.045); color: var(--ink-muted); text-align: center; }
.panel-title { min-height: 50px; display: flex; align-items: flex-start; justify-content: space-between; }.panel-title small, .panel-title strong { display: block; }.panel-title small { color: var(--ink-faint); font-family: var(--font-mono); font-size: 7px; letter-spacing: .1em; }.panel-title strong { margin-top: 2px; font-size: 11px; }.panel-title > button { padding: 6px 7px; border: 0; border-radius: var(--radius-xs); background: var(--surface-hover); color: var(--ink-muted); font-size: 7px; }
.group-list { display: grid; gap: 3px; }.group-list button { display: grid; width: 100%; grid-template-columns: 15px 1fr auto; align-items: center; padding: 10px 8px; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-soft); font-size: 9px; text-align: left; }.group-list button.selected { background: rgba(138,29,29,.14); box-shadow: inset 2px 0 var(--cta); }.group-list button.dim { color: var(--ink-faint); }.group-list i { color: var(--ink-faint); font-style: normal; }.group-list b { color: var(--ink-muted); font-family: var(--font-mono); font-size: 7px; font-weight: 400; }
.panel-title label { width: 98px; }.panel-title input { width: 100%; padding: 7px 8px; border: 0; border-radius: var(--radius-xs); outline: 0; background: rgba(0,0,0,.13); color: var(--ink); font-size: 8px; }.panel-title input::placeholder { color: var(--ink-faint); }
.channel-list { display: grid; }.channel-row { display: grid; grid-template-columns: 18px 31px minmax(100px,1fr) auto 28px; align-items: center; gap: 9px; min-height: 70px; padding: 8px 7px; border-top: 1px solid var(--hairline); }.channel-row.focus-row { background: rgba(255,255,255,.035); }.drag-handle { color: var(--ink-faint); cursor: grab; font-style: normal; }.channel-logo { width: 31px; height: 31px; font-size: 9px; }.channel-row p { min-width: 0; margin: 0; }.channel-row strong, .channel-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.channel-row strong { font-size: 9px; }.channel-row small { color: var(--ink-muted); font-size: 7px; }.channel-row em { color: var(--positive); font-family: var(--font-mono); font-size: 6px; font-style: normal; }.channel-row em.warn { color: var(--warning); }.channel-row button { border: 0; background: transparent; color: var(--ink-faint); font-size: 8px; }
.inspector-panel { background: rgba(0,0,0,.07); }.inspector-logo { display: grid; width: 54px; height: 54px; place-items: center; margin: 22px auto; border-radius: var(--radius-md); background: var(--surface-3); font-size: 16px; font-weight: 700; }.inspector-panel label { display: block; margin-top: 13px; color: var(--ink-muted); font-size: 7px; }.inspector-panel input, .inspector-panel select { width: 100%; margin-top: 5px; padding: 9px; border: 0; border-radius: var(--radius-xs); background: rgba(0,0,0,.13); color: var(--ink-soft); font-size: 8px; }.toggle-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--hairline); color: var(--ink-muted); font-size: 8px; }.toggle { position: relative; width: 25px; height: 14px; border-radius: 99px; background: rgba(255,255,255,.1); }.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); }.toggle.on { background: rgba(138,29,29,.85); }.toggle.on::after { left: 14px; background: var(--ink); }
.studio-benefits { display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center; gap: 24px; margin-top: 28px; }.studio-benefits p { display: grid; grid-template-columns: auto 1fr; gap: 2px 11px; margin: 0; }.studio-benefits p > span { grid-row: 1/3; color: var(--ink-faint); font-family: var(--font-mono); font-size: 8px; }.studio-benefits strong { font-family: var(--font-app); font-size: 11px; }.studio-benefits small { color: var(--ink-muted); font-size: 9px; }

/* Recording */
.recorder-stage { position: relative; height: 330px; overflow: hidden; background: linear-gradient(145deg, #404943 0%, #2b302e 52%, #3b332e 100%); }.recorder-stage::before { content: ""; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 48px 48px; }.record-live { position: absolute; z-index: 1; top: 17px; left: 17px; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--radius-xs); background: rgba(36,36,35,.72); font-family: var(--font-mono); font-size: 7px; letter-spacing: .08em; }.record-wave { position: absolute; right: 28px; bottom: 48px; left: 45%; display: flex; height: 88px; align-items: center; gap: 5px; opacity: .42; }.record-wave i { flex: 1; height: 30%; border-radius: 4px; background: var(--ink-soft); }.record-wave i:nth-child(2n) { height: 75%; }.record-wave i:nth-child(3n) { height: 48%; }.record-wave i:nth-child(5n) { height: 92%; }.recorder-stage > p { position: absolute; z-index: 1; bottom: 27px; left: 22px; margin: 0; }.recorder-stage > p small, .recorder-stage > p strong, .recorder-stage > p span { display: block; }.recorder-stage > p small { color: var(--ink-muted); font-family: var(--font-mono); font-size: 7px; letter-spacing: .1em; }.recorder-stage > p strong { margin: 4px 0; font-size: 25px; letter-spacing: -.04em; }.recorder-stage > p span { color: var(--ink-muted); font-size: 9px; }
.recorder-control { padding: 20px; }.record-time { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 15px; }.record-time span { display: flex; align-items: center; gap: 6px; color: var(--ink-red); font-family: var(--font-mono); font-size: 8px; }.record-time strong { font-family: var(--font-mono); font-size: 15px; font-weight: 500; }.record-time small { color: var(--ink-muted); font-size: 8px; text-align: right; }.record-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; }.record-actions button { min-height: 34px; padding: 0 12px; border: 0; border-radius: var(--radius-xs); background: rgba(255,255,255,.08); font-size: 8px; }.record-actions span { color: var(--ink-muted); font-size: 8px; }

/* Companion */
.companion-section { overflow: hidden; background: rgba(0,0,0,.08); }.companion-visual { display: grid; place-items: center; }.remote-phone { position: relative; width: min(330px, 82%); min-height: 640px; padding: 18px 20px 24px; border: 1px solid var(--hairline-strong); border-radius: 38px; background: #333331; box-shadow: 0 34px 90px rgba(0,0,0,.42); font-family: var(--font-app); }.remote-phone::before { content: ""; position: absolute; top: 11px; left: 50%; width: 58px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.13); transform: translateX(-50%); }.remote-top { display: flex; justify-content: space-between; padding: 8px 4px 24px; color: var(--ink-muted); font-family: var(--font-mono); font-size: 8px; }.remote-top i { width: 17px; height: 7px; border: 1px solid var(--ink-muted); border-radius: 2px; }.remote-device { position: relative; padding: 15px; border-radius: var(--radius-md); background: rgba(255,255,255,.055); }.remote-device small, .remote-device strong { display: block; }.remote-device small { color: var(--ink-faint); font-family: var(--font-mono); font-size: 6px; letter-spacing: .1em; }.remote-device strong { margin-top: 4px; font-size: 15px; }.remote-device > span { position: absolute; top: 19px; right: 14px; display: flex; align-items: center; gap: 5px; color: var(--positive); font-size: 7px; }.remote-device > span i { width: 5px; height: 5px; border-radius: 50%; background: var(--positive); }.remote-now { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; padding: 20px 2px 16px; border-bottom: 1px solid var(--hairline); }.remote-logo { width: 42px; height: 42px; }.remote-now p { margin: 0; }.remote-now small, .remote-now strong, .remote-now p span { display: block; }.remote-now small { color: var(--ink-faint); font-family: var(--font-mono); font-size: 6px; }.remote-now strong { font-size: 12px; }.remote-now p span { color: var(--ink-muted); font-size: 8px; }.remote-now button { border: 0; background: transparent; color: var(--ink-faint); }
.tapzap-pad { width: 220px; height: 220px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px; margin: 22px auto; padding: 11px; border-radius: 50%; background: rgba(255,255,255,.035); }.tapzap-pad button { border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); font-size: 12px; }.tapzap-pad button:hover { background: var(--surface-hover); }.tapzap-pad .ok { background: var(--cta); color: var(--ink); font-size: 10px; font-weight: 650; }.remote-quick { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.remote-quick button { min-height: 40px; border: 0; border-radius: var(--radius-sm); background: rgba(255,255,255,.06); color: var(--ink-soft); font-size: 8px; }.remote-quick button:first-child { background: var(--cta); }.phone-home-bar { width: 76px; height: 4px; margin: 22px auto 0; border-radius: 99px; background: var(--ink-faint); }
.compact-list { margin-bottom: 34px; }.inline-actions { display: flex; align-items: center; gap: 24px; }

/* VOD */
.vod-section { border-block: 1px solid var(--hairline); }.vod-shelf { margin-top: 58px; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: #333331; box-shadow: var(--shadow-panel); font-family: var(--font-app); }.vod-toolbar { display: flex; min-height: 82px; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--hairline); }.vod-toolbar small, .vod-toolbar strong { display: block; }.vod-toolbar small { color: var(--ink-faint); font-family: var(--font-mono); font-size: 7px; letter-spacing: .12em; }.vod-toolbar strong { font-size: 17px; }.vod-toolbar > div { display: flex; gap: 5px; }.vod-toolbar button { padding: 7px 9px; border: 0; border-radius: var(--radius-xs); background: var(--surface-soft); color: var(--ink-muted); font-size: 8px; }
.cover-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 20px 20px 8px; }.cover-card { min-width: 0; padding: 7px; border-radius: var(--radius-md); }.cover-card.selected { background: rgba(138,29,29,.14); box-shadow: inset 3px 0 var(--cta); }.cover-art { position: relative; aspect-ratio: 3/4; overflow: hidden; padding: 15px; border-radius: var(--radius-sm); background: #3f4541; }.cover-art::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 24px 24px; }.cover-art span { position: relative; z-index: 1; color: rgba(255,255,255,.4); font-family: var(--font-mono); font-size: 8px; }.cover-art b { position: absolute; z-index: 1; right: 14px; bottom: 17px; left: 14px; font-size: clamp(14px, 1.7vw, 22px); font-weight: 620; letter-spacing: -.04em; line-height: .9; }.cover-art i { position: absolute; z-index: 1; top: 42%; left: 18%; width: 66%; height: 1px; background: rgba(255,255,255,.38); transform: rotate(-28deg); }.art-two { background: #45403e; }.art-two i { transform: rotate(32deg); }.art-three { background: #34403d; }.art-three i { top: 34%; transform: rotate(-8deg); }.art-four { background: #3e3836; }.art-four i { transform: rotate(48deg); }.cover-card > p { margin: 10px 3px 8px; }.cover-card > p strong, .cover-card > p small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.cover-card > p strong { font-size: 10px; }.cover-card > p small { color: var(--ink-muted); font-size: 8px; }.cover-card > div:last-child:not(.cover-art) { height: 2px; margin: 0 3px 4px; border-radius: 99px; background: rgba(255,255,255,.1); }.cover-card > div:last-child span { display: block; height: 100%; background: var(--mark); }
.vod-detail { display: grid; grid-template-columns: 1fr 1.2fr 170px; align-items: center; gap: 28px; margin: 18px 20px 20px; padding: 18px; border-radius: var(--radius-md); background: rgba(255,255,255,.045); }.vod-detail small, .vod-detail strong, .vod-detail em { display: block; }.vod-detail small { color: var(--ink-faint); font-family: var(--font-mono); font-size: 6px; letter-spacing: .1em; }.vod-detail strong { margin: 3px 0; font-size: 17px; }.vod-detail em { color: var(--ink-muted); font-size: 8px; font-style: normal; }.vod-detail p { margin: 0; color: var(--ink-muted); font-size: 9px; line-height: 1.6; }.vod-detail > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.vod-detail button:first-child { background: var(--cta); }.center-action { display: flex; justify-content: center; margin-top: 28px; }

/* Setup, trust, finale */
.setup-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0; margin: 58px 0 0; list-style: none; }.setup-steps li { min-height: 330px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: rgba(255,255,255,.028); }.setup-steps li > span { color: var(--ink-faint); font-family: var(--font-mono); font-size: 10px; }.setup-steps small { color: var(--ink-faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; }.setup-steps h3 { margin: 8px 0 12px; }.setup-steps p { min-height: 46px; margin-bottom: 24px; color: var(--ink-muted); font-size: 12px; }.setup-steps a { color: var(--ink-soft); font-family: var(--font-app); font-size: 11px; font-weight: 610; }
.setup-links { display: flex; flex-wrap: wrap; gap: 9px 18px; }
.trust-section { border-block: 1px solid var(--hairline); background: rgba(0,0,0,.08); }.trust-grid { align-items: start; }.trust-copy > p { margin-bottom: 34px; color: var(--ink-soft); font-size: 17px; line-height: 1.68; }.trust-copy > div { display: grid; gap: 0; }.trust-copy > div > span { position: relative; display: grid; padding: 15px 0 15px 22px; border-top: 1px solid var(--hairline); }.trust-copy > div > span:last-child { border-bottom: 1px solid var(--hairline); }.trust-copy > div span::before { content: ""; position: absolute; top: 23px; left: 2px; display: block; }.trust-copy strong { font-family: var(--font-app); font-size: 13px; }.trust-copy small { color: var(--ink-muted); font-size: 10px; }
.final-section { padding-top: calc(var(--section-space) * .85); }.final-card { position: relative; overflow: hidden; padding: clamp(42px, 8vw, 100px); border: 1px solid var(--hairline); border-radius: var(--radius-xl); background: rgba(255,255,255,.04); box-shadow: var(--shadow-soft); }.final-card::after { content: ""; position: absolute; top: -30%; right: -8%; width: 52%; aspect-ratio: 1; border-radius: 50%; background: rgba(179,54,47,.06); filter: blur(60px); }.final-card > * { position: relative; z-index: 1; }.final-card h2 { max-width: 900px; }.final-card > p:not(.eyebrow) { max-width: 630px; margin-bottom: 34px; color: var(--ink-soft); font-size: 17px; }.final-mark { position: absolute; z-index: 1; top: clamp(30px, 6vw, 76px); right: clamp(30px, 6vw, 76px); opacity: .22; }.final-mark img { width: 72px; }.final-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

/* Footer */
.site-footer { padding: 74px 0 28px; background: #242423; border-top: 1px solid var(--hairline); }.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 50px; }.footer-brand p { margin: 14px 0 0; color: var(--ink-muted); font-size: 11px; }.footer-links { display: grid; align-content: start; gap: 10px; }.footer-links span { margin-bottom: 4px; color: var(--ink-faint); font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; }.footer-links a { color: var(--ink-muted); font-family: var(--font-app); font-size: 11px; transition: color var(--fast) var(--ease); }.footer-links a:hover { color: var(--ink); }.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 32px; margin-top: 52px; border-top: 1px solid var(--hairline); color: var(--ink-muted); font-family: var(--font-app); font-size: 12px; }.footer-bottom nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }.footer-bottom nav a, .footer-bottom button { padding-block: 8px; color: var(--ink-muted); }.footer-bottom nav a:hover, .footer-bottom button:hover { color: var(--ink); }.footer-bottom button { padding-inline: 0; border: 0; background: transparent; font-size: inherit; font-family: inherit; cursor: pointer; }
.mobile-access { display: none; }

/* Hero visual finish */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 7%;
  right: -9%;
  width: min(72vw, 980px);
  height: 86%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 58% 42%, rgba(147,170,153,.13), transparent 25%),
    radial-gradient(ellipse at 45% 48%, rgba(253,243,243,.075), transparent 48%);
  filter: blur(10px);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 18%;
  right: 2%;
  width: min(55vw, 760px);
  height: 62%;
  border: 1px solid rgba(253,243,243,.045);
  border-radius: 48%;
  pointer-events: none;
  transform: rotate(-3deg);
}

.hero-grid { position: relative; z-index: 1; }

.hero-copy h1 {
  text-shadow: 0 18px 55px rgba(0,0,0,.2);
}

.hero-copy h1 span {
  background: linear-gradient(135deg, rgba(253,243,243,.82), rgba(253,243,243,.58));
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
}

.hero-actions .button-primary {
  box-shadow: 0 15px 34px rgba(138,29,29,.2), inset 0 1px rgba(253,243,243,.09);
}

.hero-product {
  padding-block: 12px 24px;
  perspective: 1400px;
}

.hero-product::before {
  top: -12%;
  right: -9%;
  width: 118%;
  height: 116%;
  border-radius: 46%;
  opacity: .95;
  background:
    radial-gradient(circle at 60% 36%, rgba(147,170,153,.16), transparent 24%),
    radial-gradient(circle at 42% 58%, rgba(253,243,243,.075), transparent 50%);
  filter: blur(34px);
}

.hero-product::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 5%;
  bottom: -1%;
  left: 7%;
  height: 16%;
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  filter: blur(30px);
  transform: perspective(500px) rotateX(68deg);
}

.hero-product .product-window {
  position: relative;
  isolation: isolate;
  border-color: rgba(253,243,243,.21);
  background: linear-gradient(145deg, rgba(59,59,57,.97), rgba(47,47,46,.98));
  box-shadow:
    0 42px 110px rgba(8,8,8,.48),
    0 0 0 1px rgba(253,243,243,.025),
    inset 0 1px rgba(253,243,243,.055);
  transform: translateY(-6px);
}

.hero-product .product-window::before {
  content: "";
  position: absolute;
  z-index: 20;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(253,243,243,.045), transparent 22%, transparent 78%, rgba(253,243,243,.018));
}

.hero-product .live-picture {
  isolation: isolate;
  box-shadow: inset 0 0 90px rgba(5,8,7,.26);
}

.hero-product .live-picture::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -35% -70%;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 44%, rgba(253,243,243,.105) 50%, transparent 56%);
  transform: translateX(-42%);
  animation: hero-signal-reveal 1.25s var(--ease) 1.05s both;
}

@keyframes hero-signal-reveal {
  0% { opacity: 0; transform: translateX(-42%); }
  32% { opacity: 1; }
  100% { opacity: 0; transform: translateX(42%); }
}

@media (max-width: 940px) {
  .hero::after { right: -22%; width: 94vw; }
  .hero-product .product-window { transform: none; }
}

@media (max-width: 700px) {
  .hero::before { top: 48%; right: -54%; width: 150vw; height: 52%; opacity: .72; }
  .hero::after { display: none; }
  .hero-product { padding-block: 0; }
}

/* Responsive */
@media (max-width: 1120px) {
  .primary-nav { gap: 11px; }
  .hero-grid { grid-template-columns: minmax(0,.88fr) minmax(430px,1.12fr); gap: 42px; }
  .workspace-body { grid-template-columns: 180px 190px minmax(300px,1fr); }
  .inspector-panel { display: none; }
  .channel-panel { border-right: 0; }
}

@media (max-width: 940px) {
  .desktop-account { display: none; }
  .nav-toggle { display: grid; width: 44px; height: 44px; place-content: center; gap: 6px; padding: 0; margin-left: auto; border: 0; border-radius: var(--radius-sm); background: rgba(255,255,255,.055); }
  .nav-toggle > span:not(.sr-only) { display: block; width: 18px; height: 1px; background: var(--ink); transition: transform var(--normal) var(--ease); }
  .nav-toggle[aria-expanded="true"] > span:nth-of-type(2) { transform: translateY(3.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] > span:nth-of-type(3) { transform: translateY(-3.5px) rotate(-45deg); }
  .primary-nav { position: absolute; top: calc(100% + 4px); right: var(--gutter); left: var(--gutter); display: none; align-items: stretch; padding: 12px; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: rgba(48,48,47,.98); box-shadow: var(--shadow-panel); }
  .primary-nav.open { display: grid; }
  .primary-nav > a, .primary-nav > a:nth-of-type(2), .primary-nav > a:nth-of-type(3) { display: block; padding: 12px; border-radius: var(--radius-sm); }
  .primary-nav > a::after { display: none; }
  .nav-account { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 8px; }
  .hero { min-height: auto; padding-top: 132px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 760px; }
  .hero-product { width: min(720px, 100%); }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-grid p:nth-child(3) { border-top: 1px solid var(--hairline); }.proof-grid p:nth-child(4) { border-top: 1px solid var(--hairline); border-right: 1px solid var(--hairline); }
  .device-grid { grid-template-columns: 1fr; }.device-card { min-height: 470px; }.tv-code-visual, .browser-code-visual, .phone-code-visual { height: 210px; }.tv-code-visual, .browser-code-visual { width: min(420px,100%); margin-inline: auto; }.device-card > p { min-height: auto; }
  .install-heading { grid-template-columns: 1fr; gap: 18px; }.install-heading > p { max-width: 680px; }
  .install-grid { grid-template-columns: 1fr; }.install-card { grid-template-columns: 150px 1fr; }
  .performance-grid, .feature-grid, .companion-grid, .trust-grid { grid-template-columns: 1fr; }.feature-grid.reverse .feature-copy { order: initial; }.feature-grid.reverse .football-visual { order: 2; }
  .studio-heading { grid-template-columns: 1fr; gap: 10px; }.workspace-body { grid-template-columns: 170px minmax(170px,.7fr) minmax(320px,1.3fr); overflow-x: auto; }.studio-benefits { grid-template-columns: repeat(3, 1fr); }.studio-benefits .button { grid-column: 1 / -1; justify-self: start; }
  .companion-grid .section-heading { order: 1; }.companion-visual { order: 2; }
  .footer-grid { grid-template-columns: 1.6fr repeat(3,1fr); gap: 28px; }
}

@media (max-width: 700px) {
  :root { --section-space: 92px; --gutter: 18px; }
  body { padding-bottom: calc(65px + env(safe-area-inset-bottom)); }
  h1 { font-size: clamp(44px, 13vw, 58px); letter-spacing: -.055em; }
  .hero-copy h1 { font-size: clamp(46px, 12.5vw, 54px); }
  h2 { font-size: clamp(38px, 11vw, 54px); }
  .section-heading > p:last-child, .feature-copy > p, .hero-lede { font-size: 16px; line-height: 1.62; }
  .site-atmosphere::after { background-size: 48px 48px; }
  .hero { padding-top: 116px; padding-bottom: 72px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 54px; }
  .hero-copy { min-width: 0; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }.hero-actions .button { width: 100%; padding-inline: 10px; }
  .hero-entry { margin-bottom: 28px; }
  .hero-entry-grid { grid-template-columns: 1fr; }.hero-entry-grid strong { font-size: 13px; }.hero-entry-grid small { font-size: 10px; }
  .hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.hero-facts li { display: grid; min-width: 0; gap: 0; }.hero-facts strong { font-size: 15px; }.hero-facts span { font-size: 11px; }
  .product-window { border-radius: var(--radius-lg); }.product-bar { padding-inline: 14px; }.connection-state { font-size: 8px; }.scene-tabs { overflow-x: auto; }.scene-panel { min-height: 422px; }.live-picture { min-height: 260px; }.device-dock { overflow-x: auto; padding-bottom: 12px; }.device-pill { flex: 0 0 auto; }
  .proof-grid { grid-template-columns: 1fr; }.proof-grid p { min-height: 94px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }.proof-grid p:first-child { border-top: 0; }
  .device-grid { margin-top: 46px; }.device-card { min-height: 430px; padding: 18px; }.device-card-top { margin-bottom: 22px; }
  .install-section { padding-block: 82px; }.install-heading h2 { font-size: clamp(38px, 10vw, 50px); }.install-heading > p { font-size: 16px; }
  .install-grid { margin-top: 38px; }.install-card { grid-template-columns: 1fr; gap: 18px; padding: 18px; }.install-visual { min-height: 170px; }.install-copy > p:not(.install-platform) { min-height: auto; }.install-actions { grid-template-columns: 1fr; }
  .load-row { grid-template-columns: 105px 1fr; }.load-row small { display: none; }
  .feature-grid { gap: 46px; }.product-canvas { border-radius: var(--radius-lg); }
  .program-card { grid-template-columns: 1fr; gap: 10px; padding: 14px; }.program-source { display: grid; grid-template-columns: 36px 1fr; }.program-main { padding-right: 70px; }.program-actions { grid-template-columns: 1fr 1fr; }.program-card.muted { display: none; }
  .canvas-header { min-height: 72px; padding: 14px; }.date-switch span { display: none; }.match-card { grid-template-columns: 58px 1fr; }.match-source { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; border-top: 1px solid var(--hairline); }.match-source > span { margin: 0; }.teams { border-right: 0; }
  .studio-workspace { margin-top: 42px; border-radius: var(--radius-lg); }.workspace-toolbar { align-items: flex-start; }.workspace-actions > span, .workspace-actions > button:first-of-type { display: none; }.workspace-body { grid-template-columns: 144px 160px 310px; min-height: 430px; }.source-sidebar, .group-panel, .channel-panel { padding: 12px; }.studio-benefits { grid-template-columns: 1fr; gap: 14px; }.studio-benefits .button { grid-column: auto; width: 100%; }
  .recorder-stage { height: 270px; }.record-wave { left: 50%; }.record-time { grid-template-columns: 1fr auto; }.record-time small { display: none; }
  .remote-phone { width: min(310px,94%); min-height: 600px; }.tapzap-pad { width: 200px; height: 200px; }
  .vod-shelf { margin-top: 40px; border-radius: var(--radius-lg); }.vod-toolbar > div { display: none; }.cover-grid { grid-template-columns: repeat(2,1fr); }.cover-card:nth-child(n+3) { display: none; }.cover-art b { font-size: 21px; }.vod-detail { grid-template-columns: 1fr; gap: 12px; }.vod-detail > p { display: none; }
  .setup-steps { grid-template-columns: 1fr; }.setup-steps li { min-height: 250px; }
  .final-card { padding: 42px 24px; }.final-mark { top: 25px; right: 22px; }.final-mark img { width: 48px; }.final-card h2 { padding-top: 34px; }.final-actions { display: grid; grid-template-columns: 1fr 1fr; }.final-actions .arrow-link { grid-column: 1/-1; justify-content: center; padding-top: 10px; }
  .footer-grid { grid-template-columns: repeat(2,1fr); }.footer-brand { grid-column: 1/-1; }.footer-bottom { align-items: flex-start; gap: 20px; }.footer-bottom nav { flex-wrap: wrap; gap: 10px 16px; }
  .mobile-access { position: fixed; z-index: 90; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: .82fr 1.18fr; gap: 7px; padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); border-top: 1px solid var(--hairline-strong); background: rgba(43,43,42,.94); backdrop-filter: blur(18px); }.mobile-access a { display: grid; min-height: 46px; place-items: center; border-radius: var(--radius-sm); background: rgba(255,255,255,.075); font-family: var(--font-app); font-size: 13px; font-weight: 650; }.mobile-access a:last-child { background: var(--cta); }
  body.nav-open .mobile-access, body.ipii-cookie-banner-space .mobile-access { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (max-width: 430px) {
  html .cookie-banner-inner { width: calc(100vw - 14px); max-width: calc(100vw - 14px); }
  html .cookie-banner-options, html .cookie-banner-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-shell { min-height: 60px; }.brand span { font-size: 15px; }.hero-actions { grid-template-columns: 1fr; }.hero-actions .button { width: 100%; }.hero-entry a { padding-inline: 10px; }.hero-entry small { font-size: 10px; }
  .product-bar { min-height: 52px; }.product-brand span { display: none; }.scene-tabs button { flex: 1; padding-inline: 7px; }.scene-panel { min-height: 392px; }.live-picture { min-height: 226px; }.now-row { padding-top: 11px; }.device-pill { padding: 7px; }
  .studio-mini { grid-template-columns: 1fr; }.studio-groups { display: none; }.studio-channels { padding: 12px; }
  .proof-grid p { padding-inline: 18px; }
  .load-visual { padding: 16px; }.load-top { display: grid; gap: 4px; }.load-row { grid-template-columns: 92px 1fr; padding-inline: 11px; }
  .match-source { grid-template-columns: 1fr; gap: 8px; }.match-source > div { width: 100%; }
  .record-actions span { display: none; }
  .remote-phone { width: 100%; padding-inline: 16px; }.tapzap-pad { width: 190px; height: 190px; }
  .cover-grid { gap: 7px; padding-inline: 12px; }.vod-detail { margin-inline: 12px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }.footer-bottom { display: grid; }.footer-bottom nav { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Mobile long-form rhythm: compact chapters with touch-native preview rails. */
@media (max-width: 700px) {
  :root {
    --section-space: 76px;
  }

  h2,
  .install-heading h2 {
    font-size: clamp(34px, 9.7vw, 44px);
    line-height: .98;
    letter-spacing: -.055em;
  }

  .section-heading.centered {
    text-align: left;
  }

  .section-heading.centered .eyebrow {
    justify-content: flex-start;
  }

  .section-heading > p:last-child,
  .feature-copy > p,
  .install-heading > p {
    font-size: 14px;
    line-height: 1.55;
  }

  .proof-strip {
    overflow: hidden;
    padding-block: 14px 18px;
  }

  .proof-grid {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 10px;
    overflow-x: auto;
    padding: 0 18px 8px;
    scroll-padding-inline: 18px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .proof-grid::-webkit-scrollbar,
  .device-grid::-webkit-scrollbar,
  .install-grid::-webkit-scrollbar,
  .setup-steps::-webkit-scrollbar,
  .feature-points::-webkit-scrollbar {
    display: none;
  }

  .proof-grid p,
  .proof-grid p:first-child,
  .proof-grid p:nth-child(3),
  .proof-grid p:nth-child(4) {
    flex: 0 0 72vw;
    min-height: 112px;
    padding: 16px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.026);
    scroll-snap-align: start;
  }

  .proof-grid p span {
    margin-right: 12px;
  }

  .device-grid,
  .install-grid,
  .setup-steps {
    display: flex;
    width: calc(100vw - var(--gutter));
    max-width: none;
    gap: 12px;
    overflow-x: auto;
    padding: 0 var(--gutter) 14px 0;
    scroll-padding-right: var(--gutter);
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .device-grid {
    margin-top: 34px;
  }

  .device-card {
    flex: 0 0 min(82vw, 320px);
    min-height: 402px;
    padding: 20px;
    scroll-snap-align: start;
  }

  .device-card-top {
    margin-bottom: 16px;
  }

  .tv-code-visual,
  .browser-code-visual,
  .phone-code-visual {
    height: 166px;
  }

  .device-card h3 {
    margin-top: 20px;
  }

  .install-section {
    padding-block: 72px;
  }

  .install-heading {
    gap: 14px;
  }

  .install-grid {
    margin-top: 34px;
  }

  .install-card {
    flex: 0 0 min(86vw, 336px);
    align-content: start;
    gap: 16px;
    padding: 18px;
    scroll-snap-align: start;
  }

  .install-visual {
    min-height: 146px;
  }

  .install-actions {
    gap: 8px;
  }

  .install-note {
    font-size: 11px;
    line-height: 1.5;
  }

  .performance-grid,
  .feature-grid,
  .companion-grid,
  .trust-grid {
    gap: 34px;
  }

  .feature-points {
    display: flex;
    width: calc(100vw - var(--gutter));
    gap: 8px;
    overflow-x: auto;
    padding: 2px var(--gutter) 8px 0;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .feature-points span {
    flex: 0 0 auto;
    padding: 10px 12px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.026);
    font-size: 10px;
    scroll-snap-align: start;
  }

  .feature-points span::before {
    display: none;
  }

  .feature-copy > .button {
    min-height: 46px;
  }

  .studio-workspace {
    margin-top: 34px;
  }

  .workspace-body {
    min-height: 380px;
  }

  .remote-phone {
    min-height: 530px;
  }

  .tapzap-pad {
    width: 184px;
    height: 184px;
  }

  .setup-steps {
    margin-top: 38px;
  }

  .setup-steps li {
    flex: 0 0 min(82vw, 320px);
    min-height: 268px;
    padding: 20px;
    scroll-snap-align: start;
  }

  .final-card {
    padding: 38px 22px;
  }

  .final-card h2 {
    padding-top: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-opener { display: none; }
  .js:not(.opener-seen) .hero-copy > *,
  .js:not(.opener-seen) .hero-product { animation: none; }
  .hero-product .live-picture::before { display: none; }
  .reveal { opacity: 1; transform: none; }
}

/* Mobile first view: one promise, two actions, one product proof. */
@media (max-width: 700px) {
  body {
    padding-bottom: 0;
  }

  .shell {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: var(--gutter);
    box-sizing: border-box;
  }

  .brand-opener,
  .mobile-access {
    display: none !important;
  }

  .js:not(.opener-seen) .hero-copy > *,
  .js:not(.opener-seen) .hero-product {
    animation-delay: 0s !important;
    animation-duration: .42s !important;
  }

  .site-header {
    background: linear-gradient(180deg, rgba(43,43,42,.96), rgba(43,43,42,.78));
    backdrop-filter: blur(14px);
  }

  .nav-shell {
    min-height: 64px;
  }

  .hero {
    min-height: auto;
    padding-top: 92px;
    padding-bottom: 46px;
  }

  .hero::before {
    top: -14%;
    right: -76%;
    width: 176vw;
    height: 74%;
    opacity: .82;
    background:
      radial-gradient(ellipse at 58% 38%, rgba(147,170,153,.16), transparent 25%),
      radial-gradient(ellipse at 46% 46%, rgba(253,243,243,.075), transparent 48%);
  }

  .hero-grid {
    gap: 26px;
  }

  .hero-copy {
    width: calc(100vw - (2 * var(--gutter)));
    max-width: calc(100vw - (2 * var(--gutter)));
    min-width: 0;
  }

  .hero-copy .eyebrow {
    margin-bottom: 18px;
    font-size: 8px;
    letter-spacing: .15em;
    white-space: nowrap;
  }

  .hero-copy h1 {
    max-width: 354px;
    margin: 0;
    font-size: clamp(43px, 12.7vw, 51px);
    line-height: .94;
    letter-spacing: -.066em;
    text-wrap: balance;
  }

  .hero-copy h1 span {
    display: block;
    margin-top: 8px;
  }

  .hero-lede {
    max-width: 348px;
    margin: 22px 0 0;
    color: var(--ink-soft);
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    width: calc(100vw - (2 * var(--gutter)));
    max-width: calc(100vw - (2 * var(--gutter)));
    min-width: 0;
    gap: 8px;
    margin-top: 26px;
  }

  .hero-actions .button,
  .hero-login-link {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 52px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    text-decoration: none;
  }

  .hero-login-link {
    display: grid;
    place-items: center;
    border: 1px solid var(--hairline-strong);
    background: rgba(255,255,255,.055);
    color: var(--ink);
  }

  .hero-microcopy {
    margin: 12px 0 0;
    color: var(--ink-faint);
    font-size: 9px;
    letter-spacing: .03em;
  }

  .hero-trustline,
  .hero-entry,
  .hero-facts {
    display: none;
  }

  .hero-product {
    width: calc(100vw - (2 * var(--gutter)));
    max-width: calc(100vw - (2 * var(--gutter)));
    margin: 4px 0 0;
    padding: 0;
    perspective: none;
  }

  .hero-product::after {
    right: 12%;
    bottom: -4%;
    left: 12%;
    height: 14%;
  }

  .hero-product .product-window {
    overflow: hidden;
    border-radius: 18px;
    transform: none;
  }

  .hero-product .product-bar {
    min-height: 48px;
    padding-inline: 13px;
  }

  .hero-product .connection-state {
    gap: 0;
    font-size: 0;
  }

  .hero-product .scene-tabs {
    padding-inline: 8px;
  }

  .hero-product .scene-tabs button {
    min-height: 42px;
    padding-inline: 6px;
    font-size: 10px;
  }

  .hero-product .scene-panel {
    min-height: 0 !important;
  }

  .hero-product .live-picture {
    min-height: 148px !important;
  }

  .hero-product .picture-title {
    right: 16px;
    bottom: 15px;
    left: 16px;
  }

  .hero-product .picture-title strong {
    font-size: 24px;
  }

  .hero-product .now-row {
    padding: 12px 14px 10px;
  }

  .hero-product .equal-actions {
    padding: 0 14px 14px;
  }

  .hero-product .equal-actions button {
    min-height: 42px;
  }

  .hero-product .device-dock {
    display: none;
  }
}

@media (max-width: 390px) {
  .hero-copy h1 {
    max-width: 330px;
    font-size: clamp(42px, 12.4vw, 48px);
  }

  .hero-lede {
    max-width: 334px;
    font-size: 14px !important;
  }
}

@media (max-width: 430px) {
  html .cookie-banner-inner {
    right: 7px;
    left: 7px;
    width: calc(100vw - 14px);
    max-width: calc(100vw - 14px);
    box-sizing: border-box;
  }

  html .cookie-banner-options,
  html .cookie-banner-actions {
    width: 100%;
    min-width: 0;
  }

  html .cookie-banner-actions > * {
    min-width: 0;
    padding-inline: 5px;
    font-size: 10px;
    white-space: nowrap;
  }

  .proof-grid {
    padding-right: calc(28vw - var(--gutter));
  }

  .device-grid,
  .install-grid,
  .setup-steps {
    padding-right: calc(var(--gutter) + 36px);
  }
}