/* Orbia — getorbia.app. One stylesheet for every page. */

:root {
  color-scheme: dark;
  --bg: #07060e;
  --bg-2: #0d0b18;
  --text: #f5f3ff;
  --muted: #b9b3cf;
  --faint: #8e88a8;
  --line: rgba(255, 255, 255, 0.1);
  --grad: linear-gradient(92deg, #4f7dff 0%, #a64dff 38%, #ff3db7 70%, #ff8a4c 100%);
  --radius: 28px;
  --max: 1180px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Deep purple light behind everything, and a fine grain like the product images. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 700px at 85% -10%, rgba(124, 58, 255, 0.34), transparent 62%),
    radial-gradient(800px 640px at -12% 28%, rgba(255, 52, 178, 0.16), transparent 60%),
    radial-gradient(1000px 760px at 50% 115%, rgba(64, 92, 255, 0.24), transparent 62%),
    var(--bg);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: #c9b8ff; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid #b58cff; outline-offset: 3px; border-radius: 8px; }

img { max-width: 100%; height: auto; display: block; }

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

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Keep the gradient's last letter (and the full stop) inside the box. */
  padding-right: 0.06em;
}

.skip {
  position: absolute; left: -999px; top: 8px;
  background: #fff; color: #000; padding: 8px 14px; border-radius: 999px; z-index: 100;
}
.skip:focus { left: 16px; }

/* ---------- Liquid Glass ---------- */

.glass {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035) 42%, rgba(255, 255, 255, 0.055) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -18px 30px -24px rgba(0, 0, 0, 0.55),
    0 30px 70px -28px rgba(0, 0, 0, 0.75);
}
/* The bevel: a bright rim at the top left fading round the edge, with a faint cyan/pink fringe. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1.2px;
  border-radius: inherit;
  background: linear-gradient(140deg,
    rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.16) 22%, rgba(255, 255, 255, 0.05) 52%,
    rgba(120, 220, 255, 0.22) 78%, rgba(255, 120, 210, 0.28) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* A soft light catching the top of the glass. */
.glass::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; left: 6%;
  width: 55%; height: 46%;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 70% at 30% 0%, rgba(255, 255, 255, 0.13), transparent 70%);
  pointer-events: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--muted);
}
.chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 12px rgba(255, 61, 183, 0.8);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font: 600 17px/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary {
  background: #fff;
  color: #0b0914;
  box-shadow: 0 10px 30px -8px rgba(166, 77, 255, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}
.btn-primary:hover { color: #0b0914; box-shadow: 0 14px 36px -8px rgba(255, 61, 183, 0.6); }
.btn-glass { color: #fff; }
.btn-glass:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
.btn-sm { min-height: 38px; padding: 0 18px; font-size: 15px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 14px;
  z-index: 50;
  margin-top: 14px;
}
.site-header .bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.42em;
  margin-right: auto;
}
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.site-header nav { display: flex; gap: 4px; }
.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  padding: 8px 14px;
  border-radius: 999px;
}
.site-header nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 96px 0 72px;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 56px;
}
.hero h1 {
  margin: 22px 0 22px;
  font-size: clamp(54px, 7.4vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.018em;
  font-weight: 800;
}
.hero .lead {
  margin: 0 0 34px;
  max-width: 30ch;
  font-size: clamp(19px, 1.7vw, 22px);
  color: var(--muted);
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.meta {
  margin: 20px 0 0;
  font-size: 15px;
  color: var(--faint);
}
.meta span + span::before { content: "·"; margin: 0 8px; color: #6b6585; }

.hero-art {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 560px;
  width: 100%;
  justify-self: end;
}
.hero-art .shape {
  position: absolute;
  left: 2%; top: 0;
  width: 100%;
  filter: drop-shadow(0 40px 80px rgba(120, 40, 255, 0.35));
  animation: float 9s ease-in-out infinite;
}
.hero-art .sphere-1 { position: absolute; width: 64px; left: -4%; top: 58%; animation: float 7s ease-in-out infinite reverse; }
.hero-art .sphere-2 { position: absolute; width: 44px; right: 2%; bottom: 0; animation: float 8s ease-in-out infinite; }
.hero-art .card {
  position: absolute;
  padding: 14px;
  border-radius: 24px;
}
.hero-art .card-live { left: -4%; top: 20%; width: 62%; }
.hero-art .card-notice { right: -4%; bottom: 15%; width: 72%; }
.hero-art .card .label {
  margin: 12px 4px 2px;
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art .shape, .hero-art .sphere-1, .hero-art .sphere-2 { animation: none; }
}

/* ---------- Orbia's orb (the mascot) ---------- */
.mascot { position: absolute; height: auto; pointer-events: none; filter: drop-shadow(0 10px 24px rgba(124, 92, 255, 0.35)); }
/* Strolling along the top of the "Music playing" card. */
.hero-art .mascot-hero { width: 15%; left: 6%; top: 20%; z-index: 4; transform: translateY(-88%); animation: stroll 9s ease-in-out infinite; }
/* Saying hi from the top of the price card. */
.price-card { position: relative; }
.price-card .mascot-price { width: 92px; right: 34px; top: 0; transform: translateY(-62%); animation: bob 4.5s ease-in-out infinite; }
.lost .mascot-lost { position: static; display: block; width: 120px; margin: 0 auto 6px; animation: bob-small 4.5s ease-in-out infinite; }
@keyframes stroll {
  0%, 100% { transform: translate(0, -88%) rotate(0deg); }
  50% { transform: translate(46px, -88%) rotate(160deg); }
}
@keyframes bob {
  0%, 100% { transform: translateY(-62%); }
  50% { transform: translateY(-74%); }
}
@keyframes bob-small {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .mascot { animation: none !important; }
}

/* A strip of "screen" with the menu bar's edge, so a notch render hangs from it like on a Mac. */
.screen {
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 70%),
    #0a0912;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.screen img { width: 100%; height: auto; }
.screen.pad-x { padding: 0 9% 26px; }
.screen.pad-x-lg { padding: 0 27% 26px; }

/* ---------- Sections ---------- */

section { position: relative; }
.section { padding: 88px 0; }
.section-head { max-width: 920px; margin: 0 auto 50px; text-align: center; }
.eyebrow {
  margin: 0 0 14px;
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c7a8ff;
}
h2 {
  margin: 0 0 16px;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-weight: 800;
}
.section-head p { margin: 0 auto; max-width: 56ch; font-size: 19px; color: var(--muted); }

/* Decorative 3D shapes behind sections. */
.deco { position: absolute; z-index: -1; pointer-events: none; user-select: none; }

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }

.card {
  padding: 18px;
}
.card h3 {
  margin: 18px 4px 6px;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.card p { margin: 0 4px 4px; color: var(--muted); font-size: 16px; }
.num {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  margin: 16px 4px 0;
  border-radius: 50%;
  font: 700 13px/1 var(--mono);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 18px rgba(166, 77, 255, 0.35);
}
.num + h3 { margin-top: 12px; }

/* The big open-notch panel. */
.panel { padding: 22px; }
.panel .screen { border-radius: 20px; }
.panel .screen img { width: 100%; }

.also {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 30px auto 0;
  max-width: 900px;
  padding: 0;
  list-style: none;
}
.also li { padding: 8px 16px; border-radius: 999px; font-size: 15px; color: var(--muted); }

/* Tools */
.tool { padding: 26px 24px 24px; }
.tool .icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 26px -8px rgba(166, 77, 255, 0.6);
}
.tool .icon svg { width: 26px; height: 26px; }
.tool h3 { margin: 18px 0 6px; }
.tool p { margin: 0; }
.kbd {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 7px;
  font: 600 14px/1.5 var(--mono);
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Glass looks */
.looks-note { margin: 26px 0 0; text-align: center; color: var(--muted); font-size: 16px; }

/* Pricing */
.price-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 44px 44px 40px;
  text-align: center;
  border-radius: 36px;
}
.price-card .brandmark { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: 0.42em; font-size: 15px; }
.price-card .brandmark img { width: 40px; height: 40px; border-radius: 10px; }
.price {
  margin: 24px 0 4px;
  font-size: 84px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.price small { font-size: 22px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.ticks { list-style: none; padding: 0; margin: 28px auto 32px; text-align: left; display: grid; gap: 12px; max-width: 360px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: #e6e1f7; }
.ticks svg { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.price-card .actions { justify-content: center; }
.fine { margin: 22px 0 0; font-size: 14px; line-height: 1.5; color: var(--faint); }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border-radius: 22px; padding: 0; }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 60px 22px 26px;
  font-size: 19px;
  font-weight: 650;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 26px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid #cbb6ff;
  border-bottom: 2px solid #cbb6ff;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .answer { padding: 0 26px 22px; color: var(--muted); }
.faq .answer p { margin: 0 0 10px; }
.faq .answer p:last-child { margin: 0; }

/* Footer */
.site-footer { padding: 70px 0 54px; border-top: 1px solid var(--line); margin-top: 40px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.site-footer .brand { margin-right: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-footer nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.site-footer nav a:hover { color: #fff; }
.site-footer .copy { width: 100%; margin: 6px 0 0; color: var(--faint); font-size: 14px; }

/* ---------- Article pages (Spotify, Privacy) ---------- */

.doc { padding: 80px 0 40px; }
.doc .wrap { max-width: 820px; }
.doc h1 {
  margin: 18px 0 14px;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-weight: 800;
}
.doc .lead { font-size: 20px; color: var(--muted); margin: 0 0 34px; }
.doc h2 { font-size: clamp(26px, 3.4vw, 34px); margin: 0 0 18px; }
.doc .block { padding: 28px 30px; margin: 0 0 18px; }
.doc .block p { margin: 0 0 12px; color: #e3ddf5; }
.doc .block p:last-child { margin-bottom: 0; }
.doc .block ul { margin: 0; padding-left: 22px; color: #e3ddf5; }
.doc .block li { margin: 0 0 10px; }
.doc .block li:last-child { margin-bottom: 0; }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 14px; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 54px;
  color: #e3ddf5;
  min-height: 36px;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: -3px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  font: 700 12px/1 var(--mono);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 16px rgba(166, 77, 255, 0.35);
}
code {
  font: 600 0.9em/1.4 var(--mono);
  padding: 2px 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: #fff;
  overflow-wrap: anywhere;
}
.callout { border-left: 3px solid #b58cff; }

/* 404 */
.lost { position: relative; min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 80px 0; }
.lost h1 { font-size: clamp(64px, 12vw, 150px); margin: 0; line-height: 1; letter-spacing: -0.05em; font-weight: 800; }
.lost p { color: var(--muted); font-size: 20px; margin: 14px 0 30px; }

/* ---------- Smaller screens ---------- */

@media (max-width: 980px) {
  .hero { padding: 64px 0 40px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 24px; }
  .hero-art { justify-self: center; max-width: 520px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: 84px 0; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .deco { display: none; }
  .screen.pad-x-lg { padding: 0 9% 26px; }
  .site-header nav { display: none; }
  .site-header .bar { gap: 10px; }
  .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: auto; }
  .hero h1 { margin-top: 18px; }
  .hero-art .card-live { left: 0; width: 76%; }
  .hero-art .card-notice { right: 0; width: 84%; }
  .actions .btn { flex: 1 1 auto; }
  .section { padding: 68px 0; }
  .section-head { margin-bottom: 36px; }
  .section-head p { font-size: 17px; }
  .price-card { padding: 34px 22px 30px; }
  .price { font-size: 68px; }
  .faq summary { font-size: 17px; padding: 18px 50px 18px 20px; }
  .faq .answer { padding: 0 20px 18px; }
  .doc .block { padding: 22px 20px; }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
}

/* ---------- Help, Terms and What's new ---------- */

.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: -10px 0 26px; }
.toc a {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.toc a:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }
.doc section.block, .doc article.block { scroll-margin-top: 110px; }
.doc .block .steps { margin: 4px 0 14px; }
.doc .block .steps:last-child { margin-bottom: 0; }
.fine-print { color: var(--faint) !important; font-size: 15px; }
.release-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-bottom: 10px; }
.release-head h2 { margin: 0; }
.release-meta { margin: 0 !important; color: var(--faint) !important; font-size: 15px; }
.release-meta span + span::before { content: "·"; margin: 0 8px; color: #6b6585; }
.site-header nav a[aria-current="page"] { color: #fff; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chip-quiet { padding: 7px 4px; font-size: 13px; color: var(--faint); }
.site-footer .copy a { color: inherit; }

@media (max-width: 720px) {
  .toc { margin-top: -6px; }
  .toc a { font-size: 13px; padding: 6px 12px; }
}
.doc .block ul + p, .doc .block ol + p { margin-top: 14px; }

/* ---------- Recordings ---------- */
.grid > *, .panel, .card { min-width: 0; }
.screen.video { display: block; padding: 0; background: #07060e; }
.screen video { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }

/* ---------- Home page, November 2026: the pet up front ---------- */
.hero-pet { padding: 84px 0 30px; }
.hero-pet .wrap { display: block; }
.hero-copy { max-width: 880px; margin: 0 auto; text-align: center; }
.hero-copy .chips { justify-content: center; }
.hero-copy h1 { font-size: clamp(50px, 7vw, 98px); }
.hero-copy .lead { max-width: 48ch; margin-inline: auto; }
.hero-copy .actions { justify-content: center; }
.hero-stage { position: relative; max-width: 1140px; margin: 54px auto 0; }
.hero-stage .shape {
  position: absolute; z-index: -1; width: 44%; right: -12%; top: -34%;
  filter: drop-shadow(0 40px 80px rgba(120, 40, 255, 0.35));
  animation: float 9s ease-in-out infinite;
}
.hero-frame { padding: 14px; border-radius: 32px; }
.hero-frame .screen { border-radius: 20px; }
.hero-stage .mascot-hero { width: 86px; left: 3%; top: 0; z-index: 2; transform: translateY(-66%); animation: bob 4.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-stage .shape { animation: none; } }

.pet-layout { display: grid; gap: 20px; }
.pet-video { padding: 14px; }
.pet-points { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pet-points li { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 24px; min-width: 0; }
.pet-points h3 { margin: 2px 0 6px; font-size: 19px; line-height: 1.2; }
.pet-points p { margin: 0; color: var(--muted); font-size: 16px; }
.pp-icon {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.pp-icon svg { width: 24px; height: 24px; }
.species { list-style: none; padding: 0; margin: 26px auto 0; max-width: 920px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.species li {
  padding: 6px 14px; border-radius: 999px; font-size: 14px; color: var(--muted);
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}


@media (max-width: 980px) {
  .pet-points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .hero-pet { padding: 56px 0 10px; }
  .hero-stage { margin-top: 40px; }
  .hero-stage .mascot-hero { width: 60px; }
  .hero-frame { padding: 8px; border-radius: 22px; }
  .hero-frame .screen { border-radius: 15px; }
  .pet-video { padding: 8px; }
  .species li { font-size: 13px; padding: 5px 11px; }
}
.hero-pet { padding-top: 60px; }
.hero-copy h1 { font-size: clamp(46px, 6vw, 84px); margin: 18px 0 18px; }
.hero-copy .lead { margin-bottom: 26px; }
.hero-stage { margin-top: 40px; }

/* ---------- Home page, November 2026 (2): pick what to watch ---------- */


/* The stage: one clip at a time, chosen with the tabs. Without the page's script every clip is listed. */
.stage { padding: 22px; }
.stage-top { display: none; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
.shot { min-width: 0; }
.shot[hidden] { display: none; }
.shot .screen { border-radius: 20px; }
.shot-text { margin: 16px 6px 2px; }
.shot h3 { margin: 0 0 6px; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.shot p { margin: 0; color: var(--muted); font-size: 16.5px; }

.stage.is-live .stage-top { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 20px; }
.stage.is-live .shots { display: block; }
.stage.is-live .shot-s .screen { max-width: 960px; margin-inline: auto; }
.stage.is-live .shot-m .screen { max-width: 1000px; margin-inline: auto; }
.stage.is-live .shot-tall .screen { max-width: 900px; margin-inline: auto; }
.stage.is-live .shot-text { max-width: 64ch; min-height: 5.4em; margin: 18px auto 0; text-align: center; }
.stage.is-live .shot:not([hidden]) { animation: shot-in 0.28s ease both; }
@keyframes shot-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .stage.is-live .shot:not([hidden]) { animation: none; } }

.seg { display: inline-flex; max-width: 100%; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line); }
.seg-btn, .pill { appearance: none; border: 0; cursor: pointer; font-family: var(--sans); color: var(--muted); }
.seg-btn { padding: 10px 18px; border-radius: 999px; background: none; font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; }
.seg-btn:hover, .pill:hover { color: #fff; }
.seg-btn[aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; padding: 2px; }
.pill { position: relative; flex: none; padding: 9px 15px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; font-weight: 500; line-height: 1; white-space: nowrap; }
.pill[hidden] { display: none; }
.pill[aria-selected="true"] { color: #fff; background: rgba(166, 77, 255, 0.28); box-shadow: inset 0 0 0 1px rgba(200, 160, 255, 0.55); }
/* How far the clip has played, while the stage moves on by itself. */
.pill i { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--p, 0%); background: var(--grad); }
.stage.is-manual .pill i { display: none; }

/* The two Macs: Apple's product pictures, with the recording playing behind the screen's opening. The
   MacBook stands in front of the display's corner and is shown larger than its real size beside the
   display, so its screen can be read (the owner's choice, 15 November 2026). */
.devices { display: flex; align-items: flex-end; justify-content: center; width: min(1300px, 100vw - 40px); margin: 0 0 34px 50%; transform: translateX(-50%); }
.device { margin: 0; min-width: 0; }
.d-display { width: 64%; }
.d-macbook { position: relative; z-index: 2; width: 42%; margin-left: -8%; }
.devices.is-live .device { cursor: pointer; }
.device .frame { position: relative; display: block; }
.device .frame img { position: relative; z-index: 1; width: 100%; height: auto; pointer-events: none; }
.device .frame video { position: absolute; z-index: 0; object-fit: cover; background: #07060e; }
.d-display .frame video { left: 2.5%; top: 3.3%; width: 95%; height: 69.4%; }
.d-macbook .frame video { left: 10.75%; top: 11.25%; width: 78.5%; height: 77.5%; }
.device figcaption { margin-top: 16px; text-align: center; font-size: 15px; font-weight: 600; color: var(--faint); }
.device figcaption::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); vertical-align: 1px; }
.devices.is-live .device.is-on figcaption { color: #fff; }
.devices.is-live .device.is-on figcaption::before { background: var(--grad); box-shadow: 0 0 12px rgba(255, 61, 183, 0.8); }

@media (max-width: 980px) {
  /* One Mac at a time, large enough to see. */
  .devices { display: block; width: auto; max-width: 620px; margin: 0 auto 34px; transform: none; }
  .d-display, .d-macbook { width: 100%; }
  .d-macbook { max-width: 520px; margin-inline: auto; }
  .devices .d-macbook { margin-left: auto; }
  .device + .device { margin-top: 30px; }
  .devices.is-live .device:not(.is-on) { display: none; }
  .devices.is-live .device + .device { margin-top: 0; }
}
@media (max-width: 720px) {
  .stage { padding: 14px; }
  .shots { grid-template-columns: minmax(0, 1fr); }
  .stage.is-live .stage-top { align-items: stretch; }
  .seg { align-self: center; }
  .seg-btn { padding: 10px 13px; font-size: 14px; }
  .pills { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px; }
  .pills::-webkit-scrollbar { display: none; }
  .stage.is-live .shot-text { min-height: 7.2em; }
}

/* ---------- Home page, November 2026 (3): bright palette, one section per function, the reveal ---------- */

/* The palette: sky #7bbbff, ink #050f2a, ice #f2fdff, lavender #b8a9ff. Gradient text is a deeper run of the
   same blues and violets, so it reads on the light ground. */
:root {
  color-scheme: light;
  --sky: #7bbbff; --ink: #050f2a; --ice: #f2fdff; --lav: #b8a9ff;
  --bg: #f2fdff; --bg-2: #e6ecff;
  --text: #050f2a; --muted: #3c4670; --faint: #6a7397;
  --line: rgba(5, 15, 42, 0.1);
  --grad: linear-gradient(92deg, #2f6bff 0%, #6a5cff 45%, #9a7dff 78%, #5aa2ff 100%);
}
body::before {
  background:
    radial-gradient(1000px 760px at 88% -8%, rgba(184, 169, 255, 0.8), transparent 62%),
    radial-gradient(900px 700px at -10% 24%, rgba(123, 187, 255, 0.6), transparent 60%),
    radial-gradient(1100px 800px at 50% 112%, rgba(123, 187, 255, 0.65), transparent 62%),
    linear-gradient(180deg, #f2fdff 0%, #ebe8ff 50%, #dfeaff 100%);
}
body::after { opacity: 0.035; }
a { color: #2f43c4; }
a:hover { color: var(--ink); }
:focus-visible { outline-color: #5b6cff; }

.glass {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0.64));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(5, 15, 42, 0.05), 0 26px 60px -32px rgba(5, 15, 42, 0.4);
}
.glass::before { background: linear-gradient(140deg, #fff 0%, rgba(255, 255, 255, 0.5) 30%, rgba(123, 187, 255, 0.4) 70%, rgba(184, 169, 255, 0.6) 100%); }
.glass::after { background: radial-gradient(ellipse 80% 70% at 30% 0%, rgba(255, 255, 255, 0.65), transparent 70%); }
.chip .dot { box-shadow: 0 0 12px rgba(106, 92, 255, 0.7); }

.btn-primary { background: var(--ink); color: var(--ice); box-shadow: 0 12px 30px -12px rgba(5, 15, 42, 0.6); }
.btn-primary:hover { color: #fff; box-shadow: 0 16px 36px -12px rgba(47, 107, 255, 0.7); }
.btn-glass, .btn-glass:hover { color: var(--ink); }
.btn-glass:hover { background: rgba(255, 255, 255, 0.85); }
.brand { color: var(--ink); }
.site-header nav a:hover { color: var(--ink); background: rgba(5, 15, 42, 0.06); }
.site-header nav a[aria-current="page"] { color: var(--ink); }
.meta span + span::before, .release-meta span + span::before { color: #9aa3c4; }
.eyebrow { color: #4a50d4; }
.num { color: var(--ink); background: rgba(255, 255, 255, 0.75); box-shadow: inset 0 0 0 1px rgba(5, 15, 42, 0.1); }
.tool .icon { background: var(--ink); box-shadow: 0 10px 26px -10px rgba(5, 15, 42, 0.5); }
.kbd { color: var(--ink); background: rgba(5, 15, 42, 0.07); box-shadow: inset 0 0 0 1px rgba(5, 15, 42, 0.12); }
.ticks li { color: var(--text); }
.ticks svg circle { fill: rgba(106, 92, 255, 0.18); }
.ticks svg path { stroke: #2b37b8; }
.faq summary::after { border-color: #5b54d6; }
.site-footer nav a:hover { color: var(--ink); }
.doc .block p, .doc .block ul, .steps li { color: #26305a; }
.steps li::before { color: var(--ink); background: rgba(255, 255, 255, 0.75); box-shadow: inset 0 0 0 1px rgba(5, 15, 42, 0.12); }
code { color: var(--ink); background: rgba(5, 15, 42, 0.06); box-shadow: inset 0 0 0 1px rgba(5, 15, 42, 0.1); }
.callout { border-left-color: #6a5cff; }
.toc a { background: rgba(255, 255, 255, 0.65); box-shadow: inset 0 0 0 1px rgba(5, 15, 42, 0.08); }
.toc a:hover { color: var(--ink); background: #fff; }
.pp-icon { background: var(--ink); box-shadow: none; }
.species li { background: rgba(255, 255, 255, 0.65); box-shadow: inset 0 0 0 1px rgba(5, 15, 42, 0.08); }
/* Recordings stay what they are: dark screens. */
.screen { background: #07060e; box-shadow: 0 0 0 1px rgba(5, 15, 42, 0.1); }

/* Jump straight to a function. */
.jump { padding: 6px 0 0; }
.jump-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.jump-row a { padding: 9px 16px; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; color: #2b376f; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px rgba(5, 15, 42, 0.08); }
.jump-row a:hover { color: var(--ice); background: var(--ink); }

/* One section per function, each with its own small stage. */
.feature { padding: 72px 0; scroll-margin-top: 70px; }
.feature .section-head { margin-bottom: 30px; }
.feature h2 { font-size: clamp(32px, 4.2vw, 54px); }
#macs, #glass, #pet, #pricing, #faq { scroll-margin-top: 70px; }
.stage-top { display: none; }
.stage.is-live .stage-top { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 20px; }
/* The tab bar: one rounded bar, the chosen tab filled. */
.pills { display: inline-flex; flex-wrap: nowrap; justify-content: flex-start; gap: 2px; max-width: 100%; padding: 5px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; background: rgba(5, 15, 42, 0.07); margin: 0; }
.pills::-webkit-scrollbar { display: none; }
.pill { padding: 11px 18px; background: none; box-shadow: none; color: #33408a; font-size: 15px; font-weight: 500; }
.pill:hover { color: var(--ink); }
.pill[aria-selected="true"] { color: var(--ice); background: var(--ink); box-shadow: 0 8px 18px -10px rgba(5, 15, 42, 0.7); }
.pill i { height: 3px; background: linear-gradient(90deg, var(--sky), var(--lav)); }
.seg { background: rgba(5, 15, 42, 0.07); box-shadow: none; }
.seg-btn { color: #33408a; }
.seg-btn:hover { color: var(--ink); }
.seg-btn[aria-pressed="true"] { color: var(--ice); background: var(--ink); box-shadow: none; }
.device figcaption { color: var(--faint); }
.device figcaption::before { background: rgba(5, 15, 42, 0.18); }
.devices.is-live .device.is-on figcaption { color: var(--ink); }

/* The grid of nine. Plain, it is just a grid; with the reveal on, its section is pinned while scrolling plays it. */
.reveal { padding: 72px 0; scroll-margin-top: 70px; }
.reveal-stage { width: min(var(--max), 100% - 32px); margin-inline: auto; }
.reveal-words { max-width: 860px; margin: 0 auto 44px; text-align: center; }
.reveal-words img { margin: 0 auto 22px; border-radius: 16px; box-shadow: 0 16px 34px -16px rgba(5, 15, 42, 0.6); }
.reveal-big { margin: 0; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.14; letter-spacing: -0.015em; font-weight: 800; color: var(--ink); }
.reveal-small { margin: 16px 0 0; font-size: 18px; font-weight: 600; color: var(--muted); }
.reveal-head { margin-bottom: 26px; }
.reveal-head h2 { font-size: clamp(32px, 4.2vw, 54px); margin-bottom: 0; }
.nine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nine-tile { position: relative; display: block; aspect-ratio: 2 / 1; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #120c2c, #07060e); color: #fff; text-decoration: none; box-shadow: 0 22px 44px -26px rgba(5, 15, 42, 0.65); }
/* Each picture is shown whole, from the top (where the notch is); the caption sits in the dark below it. */
.nine-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0 !important; }
.nine-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; }
.nine-center video { object-fit: cover; }
.nine-tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 13px; font-size: 14.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.86); background: linear-gradient(180deg, transparent, rgba(5, 8, 22, 0.86) 62%); opacity: var(--caption, 1); }
.nine-tile .cap b { color: #fff; }
.nine-tile:hover { color: #fff; }
.nine-tile:hover .cap b { text-decoration: underline; text-underline-offset: 3px; }

.reveal.is-on { height: 340vh; padding: 0; }
.reveal.is-on .reveal-stage { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; display: grid; place-items: center; }
.reveal.is-on .reveal-words, .reveal.is-on .reveal-body { grid-area: 1 / 1; }
.reveal.is-on .reveal-words { margin: 0; padding: 0 20px; }
.reveal.is-on .reveal-small { display: block; }
.reveal.is-on .reveal-body { width: min(1120px, 100% - 48px, (100vh - 250px) * 2); padding-top: 54px; }
.reveal.is-on .nine-tile { will-change: transform, opacity; }
.reveal.is-on .nine-center { z-index: 3; transform-origin: 50% 50%; box-shadow: none; }
.reveal.is-on .reveal-head { opacity: 0; }
.reveal:not(.is-on) .reveal-small { display: none; }

@media (max-width: 980px) {
  .nine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nine-center { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 9; }
  .nine-tile { aspect-ratio: 16 / 10; }
}
@media (max-width: 720px) {
  .feature, .reveal { padding: 54px 0; }
  .jump-row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .jump-row::-webkit-scrollbar { display: none; }
  .jump-row a { flex: none; }
  .stage.is-live .stage-top { align-items: center; }
  .pills { margin-inline: 0; padding-inline: 5px; }
  .pill { padding: 10px 14px; font-size: 14.5px; }
  .nine { gap: 10px; }
  .nine-tile .cap { font-size: 12.5px; padding: 26px 10px 9px; }
  .nine-tile .cap b { display: block; }
}

/* ---------- Home page, November 2026 (4): mixed layouts ---------- */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px rgba(106, 92, 255, 0.55); }

/* The pets, drifting by in two rows. */
.marquee { margin-top: 30px; display: grid; gap: 12px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee-track { display: flex; gap: 12px; width: max-content; margin: 0; padding: 4px 0; list-style: none; animation: drift 46s linear infinite; }
.marquee-row.back .marquee-track { animation-direction: reverse; animation-duration: 40s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee li { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px 11px 16px; border-radius: 999px; font-size: 17px; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px rgba(5, 15, 42, 0.07), 0 10px 22px -16px rgba(5, 15, 42, 0.5); white-space: nowrap; }
@keyframes drift { to { transform: translateX(calc(-50% - 6px)); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee li[aria-hidden="true"] { display: none; }
}

/* Feature cards, two side by side: a label, a headline, a line or two, then the recordings. */
.pair { padding: 26px 0; }
.fcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.fcard { padding: 34px 34px 28px; display: flex; flex-direction: column; scroll-margin-top: 90px; }
.fcard-label { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--muted); }
.fcard h3 { margin: 0 0 12px; font-size: clamp(27px, 3vw, 40px); line-height: 1.06; letter-spacing: -0.015em; font-weight: 800; color: var(--ink); }
.fcard-text { margin: 0 0 26px; font-size: 17.5px; color: var(--muted); max-width: 46ch; }
.fcard-media { margin-top: auto; display: grid; gap: 14px; }
.fcard-media figure { margin: 0; }
.fcard-media .screen { border-radius: 16px; }
.fcard-media figcaption { margin: 8px 4px 0; font-size: 14px; font-weight: 500; color: var(--faint); }

/* A card carousel: slide it, or use the arrows; the next card peeks in. */
.rail { --edge: max(16px, (100vw - var(--max)) / 2); }
.rail-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--edge); padding: 8px var(--edge) 34px; scrollbar-width: none; overscroll-behavior-x: contain; outline-offset: -4px; }
.rail-track::-webkit-scrollbar { display: none; }
.rcard { flex: none; width: min(84vw, 430px); scroll-snap-align: start; padding: 14px 14px 22px; display: flex; flex-direction: column; }
.rcard-media { position: relative; aspect-ratio: 2 / 1; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #120c2c, #07060e); }
.rcard-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; }
.rcard h3 { display: flex; align-items: center; gap: 10px; margin: 20px 10px 8px; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.rcard p { margin: 0 10px; font-size: 16px; color: var(--muted); }
.rcard .rcard-fact { margin-top: auto; padding-top: 22px; font-size: 14.5px; color: var(--faint); }
.rcard-fact b { display: block; color: var(--ink); font-weight: 600; }
.rail-controls { display: none; }
.rail.is-live .rail-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rail-dots { display: inline-flex; align-items: center; gap: 9px; padding: 14px 18px; border-radius: 999px; background: rgba(5, 15, 42, 0.07); }
.rail-dot { appearance: none; border: 0; padding: 0; width: 8px; height: 8px; border-radius: 999px; background: rgba(5, 15, 42, 0.28); cursor: pointer; transition: width 0.25s ease, background 0.25s ease; }
.rail-dot.is-on { width: 34px; background: var(--ink); }
.rail-arrows { display: flex; gap: 10px; }
.rail-btn { appearance: none; border: 0; cursor: pointer; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: rgba(5, 15, 42, 0.08); }
.rail-btn:hover { color: var(--ice); background: var(--ink); }
.rail-btn:disabled { opacity: 0.35; cursor: default; color: var(--ink); background: rgba(5, 15, 42, 0.08); }
.rail-btn svg { width: 20px; height: 20px; }

/* The bento grid: tiles of different sizes, the caption on top of each recording. */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.btile { position: relative; min-width: 0; border-radius: 24px; overflow: hidden; background: #07060e; box-shadow: 0 26px 50px -30px rgba(5, 15, 42, 0.7); }
.btile video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.btile .cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 46px 20px 16px; font-size: 16px; line-height: 1.35; color: rgba(255, 255, 255, 0.86); background: linear-gradient(180deg, transparent, rgba(5, 8, 22, 0.9) 66%); }
.btile .cap b { color: #fff; }
.btile .kbd { color: #fff; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.b-big { grid-column: span 8; grid-row: span 2; aspect-ratio: 1600 / 1040; }
.b-side { grid-column: span 4; }
.b-third { grid-column: span 4; aspect-ratio: 16 / 10; }

@media (max-width: 980px) {
  .fcards { grid-template-columns: minmax(0, 1fr); }
  .b-big { grid-column: span 12; grid-row: auto; }
  .b-side, .b-third { grid-column: span 6; aspect-ratio: 16 / 10; }
}
@media (max-width: 720px) {
  .marquee li { font-size: 15px; padding: 9px 16px 9px 13px; }
  .fcard { padding: 24px 20px 20px; }
  .rail-dots { padding: 12px 14px; gap: 7px; }
  .rail-dot.is-on { width: 24px; }
  .b-side, .b-third { grid-column: span 12; }
  .btile .cap { font-size: 15px; padding: 38px 16px 14px; }
}

/* The open notch's pages: one big card at a time, the next one peeking in. Each card is a dark panel with
   the recording across its top and the words centred under it. */
.rail-big .rail-track { gap: 24px; }
.rail-big .rcard { width: min(88vw, 1120px); padding: 22px 22px 32px; align-items: center; text-align: center; border-radius: 34px; overflow: hidden; color: #fff; background: linear-gradient(180deg, #150e33 0%, #0a0818 62%, #07060e 100%); box-shadow: 0 34px 70px -38px rgba(5, 15, 42, 0.85); }
/* The recording is a whole screen set into the card (rounded on every corner, with a margin around it), so
   it never reads as a picture cut off at the bottom. The words follow straight after it. */
.rail-big .rcard-media { width: 100%; aspect-ratio: auto; border-radius: 22px; overflow: hidden; background: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.rail-big .rcard-media video { position: static; display: block; width: 100%; height: auto; }
.rail-big .rcard h3 { justify-content: center; margin: 26px 24px 8px; font-size: clamp(24px, 2.6vw, 34px); color: #fff; }
.rail-big .rcard h3 .dot { display: none; }
.rail-big .rcard p { margin: 0 24px; max-width: 60ch; font-size: clamp(16px, 1.5vw, 19px); color: rgba(255, 255, 255, 0.76); }
.rail-big .rcard .rcard-fact { margin-top: 14px; padding-top: 0; font-size: 15px; color: rgba(255, 255, 255, 0.5); }
.rail-big .rcard-fact b { display: inline; margin-right: 7px; color: rgba(255, 255, 255, 0.8); }
@media (max-width: 720px) {
  .rail-big .rcard { border-radius: 24px; padding: 12px 12px 24px; }
  .rail-big .rcard-media { border-radius: 14px; }
}
/* The Shelf has a taller recording than the pages, so it stands by itself above the carousel. */
.rail-big.solo { margin-bottom: 24px; }
.rail-big.solo .rcard { width: 100%; scroll-margin-top: 90px; }
/* The page recordings stop just where the tab bar under the notch begins; a soft shade at the bottom of the
   frame keeps that sliver from showing. */
.rail-big:not(.solo) .rcard-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 13%; background: linear-gradient(180deg, rgba(12, 9, 30, 0), #0c091e 82%); pointer-events: none; }
/* The small carousel cards (Notices): the recording at its own shape, with no dark band added under it, which
   read as a picture cut in half. The cards are a little wider so the notice itself is easier to see. */
.rail:not(.rail-big) .rcard { width: min(84vw, 520px); }
.rail:not(.rail-big) .rcard-media { aspect-ratio: auto; background: #07060e; }
.rail:not(.rail-big) .rcard-media video { position: static; display: block; width: 100%; height: auto; }