/* Vantix Media Technologies. Obsidian ground, layered surfaces separated by
   1px hairlines, monochrome type and an off-white primary button, no glows.
   Type is the platform's own: SF Pro on Apple devices, then Inter, then the
   system face, with size-specific tracking (SKILL_APPLE_DESIGN.md, section 15). Motion is transform and opacity only,
   and every animation stops under prefers-reduced-motion. */

:root {
  /* Surfaces, darkest to lightest: page, card, raised. */
  --bg: #0A0C11;
  --panel: rgba(255, 255, 255, 0.03);
  --panel-2: rgba(255, 255, 255, 0.05);
  --raised: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #F5F5F7;
  --muted: #A1A1AA;
  --faint: #71717A;
  /* Quiet labels above headings (eyebrows, kickers): silver, never a colour. */
  --label: #86868B;
  /* Sapphire is kept for small fills (the Downloader code, icon tiles) and
     links. Buttons are monochrome: see .btn-primary. */
  --accent: #2563EB;
  --accent-hover: #3B74F0;
  --accent-ink: #FFFFFF;
  --accent-text: #7AA7FF;
  --accent-wash: rgba(37, 99, 235, 0.12);
  --bad: #FF6B6B;
  --head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif;
  --body: var(--head);
  /* Tracking by size: tighter as type grows, open below 14px. */
  --track-display: -0.028em;
  --track-h2: -0.022em;
  --track-h3: -0.015em;
  --track-body: -0.01em;
  --track-small: 0;
  --track-caps: 0.04em;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lux: cubic-bezier(0.23, 1, 0.32, 1);
  --bar-h: 64px;
  --rail-w: 0px;
  --wrap: 1180px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* height: auto keeps an <img width height> in proportion when max-width shrinks it. */
img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; background: #F5F5F7; color: #090A0F;
  font-weight: 500; border-radius: 10px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }

/* ---- Rail (wide screens): the app's own sidebar -------------------------
   Obsidian over a frosted blur. An icon is lit sapphire while its section is on
   screen or while it is hovered or focused; its name slides out to the right. */
.rail { display: none; }
.bar { /* narrow screens */
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar-h);
  background: rgba(10, 12, 17, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.bar-in { height: 100%; display: flex; align-items: center; gap: 28px; padding-inline: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 18px/1 var(--head); letter-spacing: var(--track-h3); }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.menu-btn {
  margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: transparent; cursor: pointer; position: relative;
}
.menu-btn span, .menu-btn::before, .menu-btn::after {
  content: ""; position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--text);
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.menu-btn::before { top: 16px; }
.menu-btn span { top: 21px; }
.menu-btn::after { top: 26px; }
.menu-btn[aria-expanded="true"]::before { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"]::after { transform: translateY(-5px) rotate(-45deg); }
.menu-btn[aria-expanded="true"] span { opacity: 0; }
.nav {
  position: absolute; left: 0; right: 0; top: var(--bar-h); display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100dvh - var(--bar-h)); overflow-y: auto; padding: 10px 14px 22px;
  background: rgba(10, 12, 17, 0.94);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line);
  visibility: hidden; opacity: 0; transform: translate3d(0, -8px, 0);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
}
.nav.open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav a {
  display: flex; align-items: center; gap: 16px; padding: 14px 12px; border-radius: 14px; text-decoration: none;
  color: var(--muted); font: 500 16px/1 var(--head); letter-spacing: var(--track-body); transition: color 0.2s, background-color 0.2s;
}
.nav a svg { width: 24px; height: 24px; flex: none; }
.nav a:hover, .nav a[aria-current="true"] { color: var(--text); background: var(--raised); }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04); color: #F5F5F7; text-decoration: none; cursor: pointer;
  font: 500 15px/1 var(--head); letter-spacing: var(--track-body);
  transition: transform 0.24s var(--lux), background-color 0.2s, border-color 0.2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); }
/* Feedback on the press itself, not the release. */
.btn:active { transform: scale(0.97); transition-duration: 0.1s; }
/* Off-white surface with near-black text, as on Linear and Apple in dark mode:
   no colour, no shadow, no glow. */
.btn-primary { background: #F5F5F7; border-color: rgba(255, 255, 255, 0.9); color: #090A0F; }
.btn-primary:hover { background: #FFFFFF; border-color: #FFFFFF; }
/* A plain .btn is the secondary button; the class names it where that helps. */
.btn-secondary { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.10); color: #F5F5F7; }
/* The secondary call to action on a light fill: white with dark text. */
.btn-light { background: #FFFFFF; border-color: #FFFFFF; color: #0A0C11; }
.btn-light:hover { background: #E2E8F0; border-color: #E2E8F0; }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; border-radius: 8px; }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 16px; border-radius: 10px; }
.btn[aria-disabled="true"] { cursor: default; }
.btn[aria-disabled="true"]:not(.btn-primary):hover { background: var(--panel-2); border-color: var(--line-strong); transform: none; }
.btn:disabled { opacity: 0.7; cursor: default; transform: none; }


/* ---- Hero ------------------------------------------------------------- */
.hero { position: relative; padding: calc(var(--bar-h) + 72px) 0 80px; overflow: clip; }
.hero .wrap { position: relative; z-index: 1; }
.hero-copy { max-width: 860px; margin-inline: auto; text-align: center; }
.hero h1 {
  font: 600 clamp(34px, 5.2vw, 48px)/1.08 var(--head); letter-spacing: var(--track-display); text-wrap: balance; color: var(--text);
}
/* A headline is one colour from end to end: no grey or coloured phrase inside it. */
h1 :is(em, span, strong, b, i, .grad), h2 :is(em, span, strong, b, i, .grad) {
  font-style: normal; color: inherit; background: none; -webkit-text-fill-color: currentColor;
}
.lede { margin-top: 20px; font-size: 16px; line-height: 1.65; letter-spacing: var(--track-body); color: var(--muted); text-wrap: pretty; }
.hero .lede { max-width: 600px; margin-inline: auto; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.hero-note { margin-top: 16px; font-size: 13px; letter-spacing: var(--track-small); color: var(--faint); }
.hero-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin-top: 20px;
  font-size: 13px; line-height: 1.4; letter-spacing: var(--track-small); color: var(--faint);
}
/* One quiet line: the items are separated by a middle dot with air on both sides. */
.hero-meta span + span::before { content: "\00B7"; margin: 0 12px; }
.btn-amazon svg { color: #ff9900; }

/* Fire TV Stick: the Downloader code, a pill that stays readable at a glance. */
.firetv-row { display: flex; justify-content: center; margin-top: 24px; }
/* A hairline capsule on the card surface; the code is the only fill. */
.firetv {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  max-width: 100%; padding: 8px 10px 8px 18px; border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  color: var(--text); font-size: 15px; line-height: 1.4; text-align: left;
}
.firetv > svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.firetv strong { font-weight: 600; }
.firetv-text { flex: 0 1 auto; }
.dl-code {
  padding: 8px 14px; border-radius: 10px; background: var(--accent); color: var(--accent-ink);
  font: 600 18px/1 var(--head); letter-spacing: 0.12em; font-variant-numeric: tabular-nums;
  user-select: all; white-space: nowrap;
}
@media (max-width: 600px) {
  .firetv { border-radius: 16px; padding: 12px 14px; justify-content: flex-start; }
  .firetv-text { flex: 1 1 100%; }
}

/* The TV: a centrepiece, 85% of the content area, with its own light. */
.tv { position: relative; width: calc((100vw - var(--rail-w)) * 0.85); max-width: 1800px; margin: 64px auto 0; }
/* The ambient light layers stay in the markup and draw nothing. */
.glow-soft, .glow { display: none; }
.frame {
  position: relative; z-index: 1; padding: clamp(6px, 0.9vw, 16px); border-radius: clamp(14px, 1.8vw, 28px);
  background: linear-gradient(180deg, #2a2f38, #14171c);
  border: 1px solid var(--line-strong);
  box-shadow: 0 70px 140px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.frame-screen { border-radius: clamp(8px, 1vw, 16px); overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.frame-screen img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Sections --------------------------------------------------------- */
.sec { padding: 80px 0; position: relative; overflow-x: clip; }   /* glows and the tilted phones may extend past the edge; the page never scrolls sideways */

/* ---- Phone showcase: a fanned cluster in 3D --------------------------- */
.showcase-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; }
.showcase-copy .sub { margin-top: 16px; max-width: 480px; color: var(--muted); font-size: 16px; }

/* The stage holds the perspective; the cluster is tilted as one object, so
   every phone shares the same depth and overlaps the one before it. The glow
   sits outside the perspective, behind everything, and drifts slower than the
   page (see main.js). */
.stage { position: relative; container-type: inline-size; perspective: 1200px; min-height: 40px; }
.cluster {
  --pw: min(300px, calc(100cqw / 2.3));   /* one phone's width */
  --step: 0.62;                            /* how far each phone sits from the one before */
  position: relative; z-index: 1; margin-inline: auto; transform-style: preserve-3d;
  width: calc(var(--pw) * (1 + 2 * var(--step)));
  height: calc(var(--pw) * 2.5);
  transform: rotateY(-15deg) rotateX(5deg);
}
.phone {
  position: absolute; margin: 0; width: var(--pw);
  left: calc(var(--i) * var(--pw) * var(--step));
  top: calc((2 - var(--i)) * var(--pw) * 0.1);     /* the staircase: each phone a step higher */
  transform: translate3d(0, 0, calc(var(--i) * 26px));
}
/* iPhone: titanium rail, black bezel, glass, island. Sizes follow --pw. */
.phone-frame {
  position: relative; padding: calc(var(--pw) * 0.034); border-radius: calc(var(--pw) * 0.17);
  background: linear-gradient(145deg, #4a505a, #1a1d23 38%, #2e333b 70%, #14161b);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 calc(var(--pw) * 0.014) #08090b,
    0 60px 100px -30px rgba(0, 0, 0, 0.95),
    0 24px 44px -18px rgba(0, 0, 0, 0.75);
}
.phone-frame::before, .phone-frame::after { content: ""; position: absolute; width: calc(var(--pw) * 0.012); border-radius: 2px; background: #3a3f48; }
.phone-frame::before { left: calc(var(--pw) * -0.011); top: 15%; height: 5%; box-shadow: 0 calc(var(--pw) * 0.2) 0 0 #3a3f48, 0 calc(var(--pw) * 0.33) 0 0 #3a3f48; }
.phone-frame::after { right: calc(var(--pw) * -0.011); top: 25%; height: 10%; }
.phone-screen { position: relative; border-radius: calc(var(--pw) * 0.138); overflow: hidden; background: #000; aspect-ratio: 1080 / 2400; }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }
.phone-screen::before { /* dynamic island */
  content: ""; position: absolute; z-index: 2; left: 50%; top: calc(var(--pw) * 0.028); width: 27%; height: calc(var(--pw) * 0.075);
  transform: translateX(-50%); border-radius: 999px; background: #000;
}
.phone-screen::after { /* glass */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 34%);
}

/* Slide and settle: from 100px to the right and invisible, to place, over
   1.2s on a long ease-out. Each phone starts a beat after the last. */
.js .settle .phone {
  opacity: 0; transform: translate3d(100px, 0, calc(var(--i) * 26px));
  transition: opacity 1.2s var(--lux) calc(var(--i) * 90ms), transform 1.2s var(--lux) calc(var(--i) * 90ms);
  will-change: transform, opacity;
}
.js .settle.in .phone { opacity: 1; transform: translate3d(0, 0, calc(var(--i) * 26px)); will-change: auto; }

/* ---- Two-column sections (text and a screen) ------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.split.flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.sub { margin-top: 16px; max-width: 560px; color: var(--muted); font-size: 16px; line-height: 1.65; letter-spacing: var(--track-body); }


/* ---- Headings: plain sentences, sized by how much the section matters --- */
h3 { letter-spacing: var(--track-h3); }
.sec h2 { font: 600 clamp(26px, 2.8vw, 32px)/1.15 var(--head); letter-spacing: var(--track-h2); text-wrap: balance; max-width: 28ch; }
.sec.big h2 { font-size: clamp(28px, 3vw, 32px); line-height: 1.15; letter-spacing: var(--track-h2); max-width: 26ch; }
.sec.big { padding-block: 80px; }
.sec.big .frame, .sec.big .split, .sec.big .devices, .sec.big .cols { margin-top: 40px; }
.release { margin-top: 20px; font-size: 14px; letter-spacing: var(--track-small); color: var(--text); }
.release span { color: var(--muted); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); }
.cols p { margin-top: 16px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.narrow { max-width: 820px; }
.wrap.narrow { width: min(100% - 48px, 820px); }

/* ---- Questions ------------------------------------------------------- */
.faq h2 { margin-bottom: 24px; }
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; cursor: pointer; list-style: none;
  font: 600 17px/1.4 var(--head); letter-spacing: var(--track-h3); transition: color 0.2s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px; border: solid var(--muted); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform 0.3s var(--lux), border-color 0.2s;
}
.qa details[open] summary::after { transform: rotate(-135deg); border-color: var(--text); }
.qa summary:hover { color: var(--accent-text); }
.qa details p { padding: 0 40px 20px 0; color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 66ch; }

/* ---- Release notes --------------------------------------------------- */
.whatsnew[hidden] { display: none; }
.whatsnew h2 { margin-bottom: 24px; }
.log li { display: grid; grid-template-columns: 120px 1fr; gap: 4px 28px; padding: 20px 0; border-top: 1px solid var(--line); }
.log li:last-child { border-bottom: 1px solid var(--line); }
.log .v { font: 600 17px/1.4 var(--head); letter-spacing: var(--track-h3); }
.log .d { grid-column: 1; font-size: 13px; letter-spacing: var(--track-small); color: var(--muted); }
.log ul { grid-column: 2; grid-row: 1 / span 2; }
.log ul li { display: block; padding: 3px 0; border: 0; color: var(--muted); font-size: 15px; }

/* ---- Sync note under the license card -------------------------------- */
.sync { max-width: 720px; margin: 40px auto 0; }
.sync h3 { font: 600 18px/1.35 var(--head); letter-spacing: var(--track-h3); }
.sync p { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.7; }

/* ---- Devices ---------------------------------------------------------- */
.devices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Frosted card: 3% white over a 20px blur, a 1px hairline, no shadow. */
.panel, .glass, .prov-card, .license-card {
  background: var(--panel); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.panel { padding: 28px; border-radius: 20px; }
.panel h3 { margin-bottom: 14px; font: 600 18px/1.35 var(--head); letter-spacing: var(--track-h3); }
.panel li { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--text); font-size: 15px; }
.panel li:first-of-type { border-top: 0; }
.panel .k { flex: none; width: 52px; font: 500 12px/2 var(--head); letter-spacing: var(--track-caps); color: var(--label); }
.panel.no .k { color: var(--bad); }
.panel .k.soon { color: var(--muted); }
.reqs { margin-top: 16px; padding: 18px 22px; border-radius: 16px; border: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.reqs .know { margin-top: 22px; color: var(--muted); font-size: 15px; }
.know li { position: relative; padding: 4px 0 4px 20px; }
.know li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }

/* ---- License ---------------------------------------------------------- */
.license-card { max-width: 720px; margin-inline: auto; padding: 32px; border-radius: 24px; }
.license-card h2 { font: 600 clamp(24px, 2.6vw, 28px)/1.15 var(--head); letter-spacing: var(--track-h2); max-width: none; }
.license-card .lede { margin-top: 10px; font-size: 16px; text-align: left; }
.field-label { display: block; margin: 24px 0 8px; font: 600 12px/1 var(--head); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.idfield { flex: 1 1 240px; }
.field-input {
  width: 100%; min-height: 46px; padding: 0 16px; border-radius: 12px; background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); font: 500 16px/1 var(--head); letter-spacing: 0.06em;
  transition: border-color 0.2s;
}
.field-input::placeholder { color: var(--faint); }
.field-input:focus { outline: none; border-color: var(--accent); }
.field-input[aria-invalid="true"] { border-color: var(--bad); }
.field-hint { margin-top: 10px; font-size: 14px; color: var(--muted); }
.license-result { min-height: 1.5em; margin-top: 18px; }
.result { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--bg); }
.result-dot { flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: #8a929c; }
.result.is-ok .result-dot { background: #34C759; }
.result.is-error .result-dot { background: var(--bad); }
.result-title { font: 600 15px/1.5 var(--head); }
.result-detail { font-size: 14px; color: var(--muted); }
.privacy-note { margin-top: 18px; font-size: 14px; color: var(--muted); }
.privacy-note a { text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }

.disclaimer { max-width: 760px; margin: 40px auto 0; text-align: center; font-size: 14px; letter-spacing: var(--track-small); color: var(--muted); }

/* ---- Footer ----------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); padding: 56px 0 36px; background: #07080C; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.foot .brand { margin-bottom: 16px; }
.foot-statement { max-width: 460px; font-size: 14px; line-height: 1.6; letter-spacing: var(--track-small); color: var(--muted); }
.foot-maker { margin-top: 10px; }
.foot-links { display: grid; grid-template-columns: repeat(3, auto); justify-content: end; gap: 12px 56px; align-content: start; }
.foot-links h4 { margin: 0 0 12px; font: 600 11px/1 var(--head); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--faint); }
.foot-links a { display: block; padding: 5px 0; text-decoration: none; font-size: 14px; color: var(--text); transition: color 0.2s; }
.foot-links a:hover { color: var(--accent-text); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; letter-spacing: var(--track-small); color: var(--muted); }
.foot-base > span:first-child { max-width: 72ch; }

/* ---- Reveal: slide up and fade in -------------------------------------- */

/* ---- OEM licensing ------------------------------------------------------
   The enterprise section: a hairline above it instead of a tinted band, the
   same frosted cards, and the accent held to the icon tiles. */
.providers { border-top: 1px solid var(--line); }
.providers h2 { max-width: 24ch; }
/* A quiet silver pill: sentence case as written, no colour. */
.eyebrow {
  display: inline-flex; align-items: center; margin-bottom: 16px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02);
  font: 500 12px/1 var(--head); letter-spacing: var(--track-caps); color: var(--label);
}
.prov-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.prov-card { padding: 24px 22px 26px; border-radius: 20px; transition: border-color 0.2s; }
.prov-card:hover { border-color: var(--line-strong); }
.prov-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); }
.prov-ico svg { width: 20px; height: 20px; }
.prov-card h3 { font: 600 17px/1.35 var(--head); letter-spacing: var(--track-h3); }
.prov-card p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.prov-cta { margin-top: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.prov-legal { max-width: 64ch; font-size: 13px; line-height: 1.6; letter-spacing: var(--track-small); color: var(--faint); }
.cast-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#cast .sub { max-width: 640px; }
#cast .know { margin-top: 40px; }
@media (max-width: 1100px) { .prov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .cast-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cast-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .prov-grid { grid-template-columns: 1fr; } .prov-cta .btn { width: 100%; } }

.js .reveal {
  opacity: 0; transform: translate3d(0, 24px, 0); will-change: transform, opacity;
  transition: opacity 0.7s var(--lux) calc(var(--i, 0) * 70ms), transform 0.8s var(--lux) calc(var(--i, 0) * 70ms);
}
.js .reveal.in { opacity: 1; transform: none; will-change: auto; }

/* ---- Wide screens: the rail replaces the top bar ----------------------- */
@media (min-width: 1024px) {
  :root { --rail-w: 76px; }
  .bar { display: none; }
  html { scroll-padding-top: 24px; }
  main { margin-left: var(--rail-w); }
  .foot { padding-left: var(--rail-w); }
  .wrap { width: min(100% - 96px, var(--wrap)); }
  .hero { padding-top: 96px; }
  .rail {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--rail-w);
    display: flex; flex-direction: column; align-items: center; padding: 26px 0 22px;
    background: rgba(10, 12, 17, 0.78);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    border-right: 1px solid var(--line);
  }
  .rail-logo { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 26px; border-radius: 14px; transition: transform 0.3s var(--lux); }
  .rail-logo:hover { transform: scale(1.08); }
  .rail-logo img { width: 30px; height: 30px; border-radius: 8px; }
  .rail-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .rail-low { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); width: 36px; }
  .rail-link {
    position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px;
    color: var(--muted); text-decoration: none;
    transition: color 0.25s var(--lux), background-color 0.25s var(--lux), transform 0.25s var(--lux);
  }
  .rail-link svg { width: 25px; height: 25px; }
  .rail-link:hover, .rail-link:focus-visible { color: var(--text); background: var(--raised); }
  .rail-link[aria-current="true"] { color: var(--accent-text); background: var(--accent-wash); }
  .rail-link:active { transform: scale(0.95); }
  .rail-link[aria-current="true"]::before { /* the active bar */
    content: ""; position: absolute; left: -14px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0;
    background: var(--accent-text);
  }
  .tip { /* the name, sliding out beside the icon */
    position: absolute; left: calc(100% + 14px); top: 50%; padding: 8px 12px; border-radius: 10px; white-space: nowrap;
    background: #1C1F26; border: 1px solid var(--line-strong); color: var(--text);
    font: 500 13px/1 var(--head); letter-spacing: var(--track-small); pointer-events: none;
    opacity: 0; transform: translate3d(-6px, -50%, 0); transition: opacity 0.2s, transform 0.3s var(--lux);
  }
  .rail-link:hover .tip, .rail-link:focus-visible .tip { opacity: 1; transform: translate3d(0, -50%, 0); }
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 1020px) {
  .split, .split.flip { grid-template-columns: 1fr; }
  .split .copy { order: -1; }
  .cols { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sec { padding: 64px 0; }
  .sec.big { padding-block: 64px; }
  .sec.big .frame, .sec.big .split, .sec.big .devices, .sec.big .cols { margin-top: 32px; }
  .log li { grid-template-columns: 1fr; }
  .log ul { grid-column: 1; grid-row: auto; }
  .showcase-grid { grid-template-columns: 1fr; gap: 56px; }
  .showcase-copy { max-width: 560px; margin-inline: auto; }
  .showcase-copy .sub,   .stage { width: min(100%, 720px); margin-inline: auto; }
  .devices { grid-template-columns: 1fr; }
  .setup, .devs { margin-top: 64px; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-links { justify-content: start; grid-template-columns: repeat(auto-fit, minmax(140px, max-content)); gap: 12px 40px; }
}
@media (max-width: 760px) {
  :root { --bar-h: 60px; }
  .wrap { width: min(100% - 40px, var(--wrap)); }
  .cluster { --step: 0.5; --pw: min(300px, calc(100cqw / 2.1)); transform: rotateY(-11deg) rotateX(3deg); }
  .tv { width: 92vw; margin-top: 48px; }
  .hero { padding: calc(var(--bar-h) + 40px) 0 64px; }
    .license-card { padding: 26px 20px; }
  .panel { padding: 24px 20px; }
  .btn-lg { width: 100%; padding: 0 18px; }
  .cta .btn { flex: 1 1 100%; }
  /* The pill stays one row: label left, code right. */
  .firetv { display: flex; flex-wrap: nowrap; justify-content: space-between; width: 100%; }
  .firetv > svg { display: none; }
  .firetv-text { font-size: 15px; }
  /* The caption stacks as three short centred lines, so no dot is left stranded. */
  .hero-meta { flex-direction: column; align-items: center; }
  .hero-meta span + span::before { content: none; }
}

/* ---- SEO landing pages (firestick.html, tivimate-alternative.html) ------
   Same charcoal ground and frosted glass as the home page; no script, no rail.
   body.pg drops the rail's margin that main and the footer keep on wide screens. */
body.pg { --rail-w: 0px; }
.pg-bar {
  position: sticky; top: 0; z-index: 50; height: var(--bar-h);
  background: rgba(10, 12, 17, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.pg-bar-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.pg-links { display: flex; align-items: center; gap: 4px; }
.pg-links a { padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--muted); font: 500 14px/1 var(--head); letter-spacing: var(--track-small); transition: color 0.2s, background-color 0.2s; }
.pg-links a:hover, .pg-links a[aria-current="page"] { color: var(--text); background: var(--raised); }

.pg-hero { position: relative; padding: 72px 0 48px; overflow: clip; }
.pg-hero .wrap { position: relative; z-index: 1; }
.pg-hero-copy { max-width: 860px; margin-inline: auto; text-align: center; }
.pg-hero h1 { font: 600 clamp(32px, 5vw, 48px)/1.08 var(--head); letter-spacing: var(--track-display); text-wrap: balance; color: var(--text); }
.pg-hero .lede { max-width: 640px; margin-inline: auto; }
.pg-hero .cta { margin-top: 28px; }
.pg-hero .firetv-row { margin-top: 24px; }

.pg-sec { padding: 40px 0; position: relative; }
.pg-sec h2 { font: 600 clamp(24px, 2.8vw, 32px)/1.15 var(--head); letter-spacing: var(--track-h2); text-wrap: balance; max-width: 28ch; }
.pg-sec .sub { margin-top: 12px; max-width: 62ch; color: var(--muted); font-size: 16px; }

/* Frosted card: see .panel above for the surface. */
.glass { padding: 26px; border-radius: 20px; }
.glass h3 { font: 600 17px/1.35 var(--head); letter-spacing: var(--track-h3); }
.glass p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.glass p strong, .glass li strong { color: var(--text); font-weight: 600; }

.steps { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.step { position: relative; }
.step-n {
  display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 16px; border-radius: 10px;
  background: var(--raised); border: 1px solid var(--line); color: var(--text); font: 600 16px/1 var(--head); font-variant-numeric: tabular-nums;
}
.step .dl-code { display: inline-block; margin-top: 12px; font-size: 20px; }

.pg-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pg-list { margin-top: 14px; }
.pg-list li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--text); font-size: 15px; line-height: 1.5; }
.pg-list li:first-child { border-top: 0; }
.pg-list li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 9px; border-radius: 50%; background: var(--accent-text); }
/* Numbered variant: the step number replaces the dot. */
ol.pg-list { counter-reset: step; }
ol.pg-list li { counter-increment: step; }
ol.pg-list li::before { content: counter(step); width: 18px; height: auto; margin-top: 0; border-radius: 0; background: none; color: var(--label); font-weight: 500; font-variant-numeric: tabular-nums; }
.pg-price { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 16px; }
.pg-price:first-of-type { border-top: 0; }
.pg-price span:last-child { font: 600 16px/1.4 var(--head); font-variant-numeric: tabular-nums; }
.pg-fine { margin-top: 14px; font-size: 13px; color: var(--faint); line-height: 1.6; letter-spacing: var(--track-small); }

/* Quick technical summary: short factual answers right under the hero, on the
   card surface with a hairline and no shadow. */
.pg-tldr { padding: 0 0 24px; }
.geo-tldr {
  max-width: 860px; margin-inline: auto; padding: 20px 24px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  text-align: left;
}
.geo-tldr-label { font-size: 12px; font-weight: 500; letter-spacing: var(--track-caps); color: var(--label); }
.geo-tldr dl { margin-top: 12px; }
.geo-tldr dl > div { display: grid; grid-template-columns: 148px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.geo-tldr dl > div:first-child { border-top: 0; padding-top: 4px; }
.geo-tldr dt { font-size: 14px; font-weight: 600; letter-spacing: var(--track-body); color: var(--text); }
.geo-tldr dd { margin: 0; font-size: 15px; line-height: 1.6; letter-spacing: var(--track-body); color: var(--muted); }
.geo-tldr dd strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.geo-tldr a { color: var(--accent-text); text-decoration: underline; text-decoration-color: rgba(122, 167, 255, 0.4); text-underline-offset: 3px; }
.geo-tldr a:hover { text-decoration-color: currentColor; }
@media (max-width: 600px) {
  .geo-tldr { padding: 16px 18px; }
  .geo-tldr dl > div { grid-template-columns: 1fr; gap: 4px; }
}

.pg-table { width: 100%; margin-top: 32px; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); }
.pg-table th, .pg-table td { padding: 16px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55; }
.pg-table thead th { border-top: 0; font: 600 11px/1 var(--head); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); background: var(--panel-2); }
.pg-table tbody th { width: 30%; font: 600 15px/1.5 var(--head); letter-spacing: var(--track-h3); color: var(--text); }
.pg-table td { color: var(--muted); }

.pg-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.pg-more { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 24px; }
.pg-more a { color: var(--text); text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.3); }
.pg-more a:hover { color: var(--accent-text); }
.pg-crumbs { margin-bottom: 18px; font-size: 13px; letter-spacing: var(--track-small); color: var(--muted); }
.pg-crumbs a { color: var(--muted); text-underline-offset: 3px; }
.pg-crumbs a:hover { color: var(--accent-text); }
.pg .qa { margin-top: 24px; }
.pg-legal { max-width: 760px; margin: 0 auto; text-align: center; font-size: 13px; line-height: 1.6; letter-spacing: var(--track-small); color: var(--faint); }

@media (max-width: 900px) {
  .steps, .pg-grid { grid-template-columns: 1fr; }
  .pg-hero { padding: 48px 0 32px; }
  .pg-sec { padding: 32px 0; }
}
@media (max-width: 600px) {
  .pg-links a { padding: 10px 10px; font-size: 14px; }
  .glass { padding: 22px 18px; }
  .pg-hero .cta .btn { width: 100%; }
  .pg-table th, .pg-table td { display: block; width: auto !important; padding: 0 18px; border-top: 0; }
  .pg-table tbody tr { display: block; padding: 16px 0; border-top: 1px solid var(--line); }
  .pg-table thead { display: none; }
  .pg-table tbody th { padding-bottom: 4px; }
  .pg-cta .btn { width: 100%; }
  .pg-bar-in { width: min(100% - 32px, var(--wrap)); }
}
@media (prefers-reduced-motion: reduce) { .pg-links a { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .settle .phone { opacity: 1; transform: translate3d(0, 0, calc(var(--i) * 26px)); transition: none; }
  .btn, .btn:active { transition: none; transform: none; }
}

/* ---- Landscape phones: the same frame turned on its side -------------- */
.land { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); justify-content: center; margin-top: 40px; }
.lphone { margin: 0; flex: 1 1 360px; max-width: 560px; }
.lphone-frame {
  position: relative; padding: clamp(6px, 1.2vw, 14px); border-radius: clamp(22px, 3.6vw, 44px);
  background: linear-gradient(145deg, #4a505a, #1a1d23 38%, #2e333b 70%, #14161b);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 0 0 3px #08090b, 0 50px 80px -30px rgba(0, 0, 0, 0.95), 0 20px 40px -18px rgba(0, 0, 0, 0.75);
}
.lphone-screen { position: relative; border-radius: clamp(16px, 2.6vw, 32px); overflow: hidden; background: #000; aspect-ratio: 2400 / 1080; }
.lphone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lphone-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 34%); }
#landscape .sub { max-width: 640px; }

/* ---- Vantix Cast page: four iPhone screenshots under the hero ---------- */
.cast-shots { margin: 40px auto 0; max-width: 1040px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 28px); }
.cast-shot { margin: 0; text-align: center; }
.cast-shot img {
  display: block; width: 100%; height: auto; border-radius: clamp(18px, 2.4vw, 30px);
  border: 1px solid var(--line-strong); background: #000;
  box-shadow: 0 40px 70px -34px rgba(0, 0, 0, 0.95);
}
.cast-shot figcaption { margin-top: 12px; color: var(--muted); font: 500 14px/1.4 var(--head); letter-spacing: var(--track-small); }
@media (max-width: 900px) { .cast-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; } }
/* Four links in the page bar: on a phone the brand already leads home, and
   the rest scroll sideways instead of widening the page. */
.pg-links a { white-space: nowrap; flex: none; }
@media (max-width: 600px) {
  .pg-bar-in .brand { flex: none; }
  .pg-links { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .pg-links::-webkit-scrollbar { display: none; }
  .pg-links a[href="./"] { display: none; }
}

/* Home page: pointer to Vantix Cast. A frosted card like the others, the
   app's sapphire held to its icon tile and button. */
.cast-cta {
  margin-top: 40px; padding: 26px 28px; display: flex; align-items: center; gap: 24px;
  border-radius: 24px; border: 1px solid var(--line); background: var(--panel);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.cast-cta-ico {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px;
  background: var(--accent); color: var(--accent-ink);
}
.cast-cta-ico svg { width: 26px; height: 26px; }
.cast-cta-copy { flex: 1 1 auto; min-width: 0; }
.cast-cta-kicker { margin: 0 0 8px; font: 500 12px/1 var(--head); letter-spacing: var(--track-caps); color: var(--label); }
.cast-cta h3 { font: 600 18px/1.3 var(--head); letter-spacing: var(--track-h3); text-wrap: balance; }
.cast-cta-copy > p:last-child { margin-top: 8px; max-width: 60ch; color: var(--muted); font-size: 15px; line-height: 1.6; }
.cast-cta .cast-cta-btn { flex: none; }
@media (max-width: 900px) {
  .cast-cta { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 20px; }
  .cast-cta .cast-cta-btn { width: 100%; }
}

/* body.theme-sapphire (/cast, /firestick) once opted into Obsidian and
   Electric Sapphire; the whole site uses that palette now, so the class adds
   nothing and stays only so those pages need no change. */

/* Firestick guide: four steps, and the legal notice. */
.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .steps-4 { grid-template-columns: 1fr; } }
.legal-box {
  margin-top: 32px; padding: 24px 26px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--panel);
}
/* A notice, not an alarm: amber on the title only. */
.legal-box h3 { font: 600 17px/1.35 var(--head); letter-spacing: var(--track-h3); color: #FFD27A; }
.legal-box p { margin-top: 8px; color: var(--text); font-size: 15px; line-height: 1.65; }
.legal-box p strong { font-weight: 600; }

/* Comparison table on a phone: the header row is hidden, so each cell names its column. */
@media (max-width: 600px) {
  .pg-table td[data-label] { padding-top: 6px; }
  .pg-table td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font: 500 12px/1.3 var(--head); letter-spacing: var(--track-caps); color: var(--label);
  }
}

/* Footer: legal links in the bottom row. */
.foot-base a { color: inherit; text-underline-offset: 3px; }
.foot-base a:hover { color: var(--text); }
.foot-links a[aria-current="page"] { color: var(--accent-text); }

/* Product screenshots on the guide pages: a 1px hairline, no shadow. */
.img-container { margin: 32px 0; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.02); }
.img-container img { display: block; width: 100%; height: auto; }
.img-container figcaption { padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.img-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 560px; margin: 32px auto; }
.img-pair .img-container { margin: 0; }
.img-container.img-hero { max-width: 960px; margin: 40px auto 0; }
.img-container.img-narrow { max-width: 680px; margin-inline: auto; }