/* ==========================================================================
   OPTITOOLS FLAGSHIP — the product-page system.
   Born on the OptiCord page and shared by every product page: Apple's
   87.5% / 1680px content, 160/128/96 px rhythm, a sticky local nav, real
   windows staged in real perspective, and motion that is only ever
   transform or opacity so the compositor does the work. Motion states are
   opt-in through html classes set before first paint (oc-js, oc-motion,
   oc-booting), so every page reads complete without JavaScript and under
   Reduce Motion. Each world sets its own light below; components read only
   the tokens.
   Shared nav, footer, fonts and the WebGL sky come from opti.css and the
   scene engine.
   ========================================================================== */
body[data-flagship] {
  --oc-ink: #f5f6fb;
  --oc-dim: #b3b9cb;
  --oc-faint: #858ea4;
  --oc-line: rgba(224, 230, 255, .09);
  --oc-discord: #5865f2;
  --oc-content: min(1680px, 87.5%);
  --oc-gutter: max(6.25%, calc((100% - 1680px) / 2));
  --oc-pad: 160px;
  --oc-ease: cubic-bezier(.22, 1, .36, 1);
  --oc-glide: cubic-bezier(.16, 1, .3, 1);
  --oc-ease-quad: cubic-bezier(.455, .03, .515, .955);
  --oc-hover: cubic-bezier(0, 0, .5, 1);
  --oc-local-h: 52px;
  --oc-shadow: 0 50px 110px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .08);
  --oc-action-ink: #fff;
  background: var(--bg);
}
/* ---- each world's light ---- */
body[data-world="cord"] {
  --accent: #3b9eff;
  --accent-ink: #b9e2ff;
  --accent-soft: rgba(25, 139, 255, .12);
  --accent-line: rgba(80, 171, 255, .38);
  --oc-action: #0071e3;
  --oc-action-hover: #0065cc;
  --oc-action-rgb: 0, 113, 227;
  --oc-card: #0b111b;
  --oc-rgb: 25, 139, 255;
  --oc-rgb-2: 40, 154, 255;
  --oc-rgb-3: 99, 186, 255;
  --oc-grad: linear-gradient(105deg, #edf7ff 0%, #77c8ff 48%, #258dff 100%);
  --oc-grad-plus: linear-gradient(105deg, #edf7ff 0%, #77c8ff 55%, #258dff 100%);
  --oc-grad-num: linear-gradient(95deg, #7dccff, #258dff);
  --oc-grad-step: linear-gradient(90deg, #7cc8ff, #198bff);
  --oc-icon-glow: #168cff99;
  --oc-rule: rgba(148, 195, 232, .24);
  --oc-theme-light: 25, 139, 255;
}
body[data-world="mac"] {
  --oc-action: #7c3aed;
  --oc-action-hover: #6d28d9;
  --oc-action-rgb: 124, 58, 237;
  --oc-card: #0d0b19;
  --oc-rgb: 139, 92, 246;
  --oc-rgb-2: 167, 139, 250;
  --oc-rgb-3: 196, 181, 253;
  --oc-grad: linear-gradient(105deg, #f5f1ff 0%, #c9b8fe 48%, #8b5cf6 100%);
  --oc-grad-plus: linear-gradient(105deg, #f5f1ff 0%, #c9b8fe 55%, #8b5cf6 100%);
  --oc-grad-num: linear-gradient(95deg, #cbbcfd, #8b5cf6);
  --oc-grad-step: linear-gradient(90deg, #cbbcfd, #8b5cf6);
  --oc-icon-glow: #8b5cf699;
  --oc-rule: rgba(196, 181, 253, .22);
  --oc-theme-light: 139, 92, 246;
}
body[data-world="sound"] {
  --oc-action: #c026d3;
  --oc-action-hover: #a21caf;
  --oc-action-rgb: 192, 38, 211;
  --oc-card: #130a17;
  --oc-rgb: 217, 70, 239;
  --oc-rgb-2: 232, 121, 249;
  --oc-rgb-3: 240, 171, 252;
  --oc-grad: linear-gradient(105deg, #fdf4ff 0%, #f3b4fc 48%, #d946ef 100%);
  --oc-grad-plus: linear-gradient(105deg, #fdf4ff 0%, #f3b4fc 55%, #d946ef 100%);
  --oc-grad-num: linear-gradient(95deg, #f3b4fc, #d946ef);
  --oc-grad-step: linear-gradient(90deg, #f3b4fc, #d946ef);
  --oc-icon-glow: #d946ef99;
  --oc-rule: rgba(240, 171, 252, .22);
  --oc-theme-light: 217, 70, 239;
}
body[data-world="load"] {
  --oc-action: #0071e3;
  --oc-action-hover: #0065cc;
  --oc-action-rgb: 0, 113, 227;
  --oc-card: #09101c;
  --oc-rgb: 56, 152, 246;
  --oc-rgb-2: 96, 165, 250;
  --oc-rgb-3: 147, 197, 253;
  --oc-grad: linear-gradient(105deg, #eef7ff 0%, #9dd0ff 48%, #3b82f6 100%);
  --oc-grad-plus: linear-gradient(105deg, #eef7ff 0%, #9dd0ff 55%, #3b82f6 100%);
  --oc-grad-num: linear-gradient(95deg, #9dd0ff, #3b82f6);
  --oc-grad-step: linear-gradient(90deg, #9dd0ff, #3b82f6);
  --oc-icon-glow: #3b82f699;
  --oc-rule: rgba(147, 197, 253, .22);
  --oc-theme-light: 56, 152, 246;
}
body[data-world="tube"] {
  --oc-action: #e11d48;
  --oc-action-hover: #be123c;
  --oc-action-rgb: 225, 29, 72;
  --oc-card: #150a0e;
  --oc-rgb: 244, 63, 94;
  --oc-rgb-2: 251, 113, 133;
  --oc-rgb-3: 253, 164, 175;
  --oc-grad: linear-gradient(105deg, #fff1f2 0%, #fdb0ba 48%, #f43f5e 100%);
  --oc-grad-plus: linear-gradient(105deg, #fff1f2 0%, #fdb0ba 55%, #f43f5e 100%);
  --oc-grad-num: linear-gradient(95deg, #fdb0ba, #f43f5e);
  --oc-grad-step: linear-gradient(90deg, #fdb0ba, #f43f5e);
  --oc-icon-glow: #f43f5e99;
  --oc-rule: rgba(253, 164, 175, .22);
  --oc-theme-light: 244, 63, 94;
}
body[data-world="extras"] {
  --oc-action: #69e6bc;
  --oc-action-hover: #8ff0cf;
  --oc-action-rgb: 105, 230, 188;
  --oc-action-ink: #04120d;
  --oc-card: #08120f;
  --oc-rgb: 16, 185, 129;
  --oc-rgb-2: 105, 230, 188;
  --oc-rgb-3: 167, 243, 208;
  --oc-grad: linear-gradient(105deg, #ecfdf5 0%, #9df3cf 48%, #10b981 100%);
  --oc-grad-plus: linear-gradient(105deg, #ecfdf5 0%, #9df3cf 55%, #10b981 100%);
  --oc-grad-num: linear-gradient(95deg, #9df3cf, #10b981);
  --oc-grad-step: linear-gradient(90deg, #9df3cf, #10b981);
  --oc-icon-glow: #10b98199;
  --oc-rule: rgba(167, 243, 208, .2);
  --oc-theme-light: 16, 185, 129;
}

/* The site nav scrolls away; the product nav below it sticks. */
body[data-flagship] .nav,
body[data-flagship] .nav.is-scrolled {
  position: absolute;
  padding: 15px 0;
  border-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body[data-flagship] .nav__inner { min-height: 34px; }
/* the shared vignette is weighted to the bottom of the screen, which is
   exactly where these pages put their horizon and their sunrise */
body[data-flagship] .vignette { background: radial-gradient(140% 110% at 50% 45%, transparent 62%, rgba(3, 4, 8, .5) 100%); }

.oc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- local navigation ---------- */
.oc-local {
  position: sticky;
  top: 0;
  z-index: 90;
  height: var(--oc-local-h);
  margin-top: 64px;
  border-bottom: 1px solid var(--oc-line);
  background: rgba(5, 6, 11, .72);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
.oc-local__inner {
  width: var(--oc-content);
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 30px;
}
.oc-local__name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--oc-ink);
  font: 600 21px/1 var(--font-display);
  letter-spacing: -.03em;
  text-decoration: none;
}
.oc-local__name span { color: var(--accent-ink); font: 500 10px/1 var(--font-mono); letter-spacing: .14em; opacity: .75; }
.oc-local__name img { width: 28px; height: 28px; border-radius: 7px; }
.oc-local__links { display: flex; align-items: center; gap: 26px; }
.oc-local__links a { color: var(--oc-dim); font: 500 12px/1 var(--font-body); text-decoration: none; transition: color .2s; }
.oc-local__links a:hover, .oc-local__links a[aria-current] { color: var(--oc-ink); }
.oc-local__cta {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--oc-action);
  color: var(--oc-action-ink);
  font: 600 12px/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s;
}
.oc-local__cta:hover { background: var(--oc-action-hover); }
.oc-local__actions { display: flex; align-items: center; gap: 10px; }
.oc-local__discord {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 11px;
  border-radius: 999px;
  background: rgba(88, 101, 242, .16);
  box-shadow: inset 0 0 0 1px rgba(137, 148, 255, .45);
  color: #e3e6ff;
  font: 600 12px/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, box-shadow .2s, color .2s;
}
.oc-local__discord svg { width: 15px; height: 15px; fill: currentColor; }
.oc-local__discord:hover { background: #5865f2; color: #fff; box-shadow: inset 0 0 0 1px #5865f2; }

/* ---------- page frame ---------- */
.oc-page { position: relative; z-index: 2; }
.oc-page > section { padding: 0; overflow: clip; scroll-margin-top: var(--oc-local-h); }
.oc-page > section::before { content: none; }
.oc-page img { height: auto; }
.oc-container { width: var(--oc-content); margin-inline: auto; }
.oc-section { padding-block: var(--oc-pad) !important; }
/* raised bands fade in and out of the sky instead of cutting it off */
.oc-tone-raised {
  background: linear-gradient(180deg, rgba(5, 6, 11, 0) 0, rgba(8, 9, 18, .88) 160px, rgba(8, 9, 18, .88) calc(100% - 160px), rgba(5, 6, 11, 0) 100%);
}

.oc-page h1, .oc-page h2, .oc-page h3 {
  margin: 0;
  color: var(--oc-ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.oc-page h2 { font-size: 80px; line-height: 1.05; }
.oc-page h2 span, .oc-hero__title span {
  background: var(--oc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.oc-page p { letter-spacing: -.01em; text-wrap: pretty; }

.oc-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: var(--accent-ink);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.oc-eyebrow span { color: var(--oc-faint); }
.oc-intro--center .oc-eyebrow { justify-content: center; }
.oc-intro { padding-bottom: 80px; }
.oc-intro h2 { max-width: 16ch; }
.oc-intro > p:last-child { max-width: 44ch; margin: 30px 0 0; color: var(--oc-dim); font: 500 21px/1.43 var(--font-body); }
.oc-intro--center { text-align: center; }
/* copy that can sit over the planet's rings keeps a dark halo; gradient text
   takes a drop-shadow filter because a text-shadow would paint over its fill */
.oc-intro > p:last-child, .oc-chapter__copy p, .oc-chapter__copy h3, .oc-calls__coda, .oc-final h2 + p { text-shadow: 0 2px 18px rgba(5, 6, 11, .95), 0 0 3px rgba(5, 6, 11, .7); }
.oc-intro h2, .oc-final h2 { filter: drop-shadow(0 4px 22px rgba(5, 6, 11, .8)); }
.oc-calls__coda em { text-shadow: none; }
.oc-intro--center h2, .oc-intro--center > p:last-child { margin-inline: auto; }

.oc-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--oc-action);
  color: var(--oc-action-ink);
  font: 600 15px/1 var(--font-body);
  letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: 0 12px 32px -18px rgba(var(--oc-action-rgb), .45);
  transition: background .25s, transform .3s var(--oc-hover);
}
.oc-btn:hover { background: var(--oc-action-hover); transform: scale(1.02); }
.oc-link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-ink); font: 500 15px/1 var(--font-body); text-decoration: none; }
.oc-link svg, .oc-ring__controls svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.oc-link:hover { text-decoration: underline; text-underline-offset: 4px; }
[data-state="playing"] > .oc-i-play, [data-state="paused"] > .oc-i-pause { display: none; }
html:not(.oc-js) .oc-swatches, html:not(.oc-js) .oc-dotnav, html:not(.oc-js) .oc-ring__controls, html:not(.oc-js) .oc-ring__hint { display: none; }
html:not(.oc-motion) .oc-swatches__play, html:not(.oc-motion) .oc-dotnav__play { display: none; }

/* ================= hero: a stack of real windows in depth ================= */
.oc-hero {
  position: relative;
  min-height: max(700px, calc(100svh - 116px));
  display: flex;
  align-items: center;
  padding: 40px 0 72px !important;
}
.oc-hero__inner {
  width: var(--oc-content);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "title deck" "sub deck" "foot deck";
  grid-template-rows: auto auto 1fr;
  align-items: start;
  column-gap: 3%;
}
.oc-hero__title {
  grid-area: title;
  align-self: end;
  max-width: 11ch;
  font-size: 84px !important;
  line-height: 1.02 !important;
  text-shadow: 0 6px 40px rgba(5, 6, 11, .85);
}
.oc-hero__sub {
  grid-area: sub;
  max-width: 34ch;
  margin: 24px 0 0;
  color: var(--oc-dim);
  font: 500 21px/1.43 var(--font-body);
  text-shadow: 0 2px 20px rgba(5, 6, 11, .9);
}
.oc-hero__foot { grid-area: foot; display: grid; gap: 34px; margin-top: 40px; }
.oc-hero__actions { display: flex; align-items: center; gap: 26px; }
.oc-hero__actions .oc-link { text-shadow: 0 2px 16px rgba(5, 6, 11, .9); }

.oc-deck {
  --dx: 3.2%;
  --dy: -6.2%;
  --dz: -170px;
  grid-area: deck;
  align-self: center;
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 776;
  margin: 12% 0 0;
  perspective: 2100px;
  perspective-origin: 45% 10%;
}
.oc-deck__rig {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translate3d(0, var(--exit-y, 0px), 0) rotateX(calc(6deg + var(--pitch, 0deg) + var(--exit-tilt, 0deg))) rotateY(calc(-14deg + var(--yaw, 0deg)));
}
.oc-deck__card {
  --r: 0;
  --o: 1;
  --shade: 0;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: var(--o);
  transform: translate3d(calc(var(--r) * var(--dx)), calc(var(--r) * var(--dy)), calc(var(--r) * var(--dz)));
}
.oc-deck__shot { position: relative; width: var(--shot-w, 100%); transform-style: preserve-3d; }
.oc-deck__shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: var(--rad, 1.05% / 1.68%);
  border: 1px solid rgba(229, 235, 255, .28);
  background: linear-gradient(125deg, rgba(255, 255, 255, .07), transparent 35%, transparent 70%, rgba(var(--oc-theme-light), .05));
  transform: translateZ(1px);
}
.oc-deck__shot img {
  display: block;
  width: 100%;
  border-radius: var(--rad, 1.05% / 1.68%);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .09);
}
.oc-deck__shade {
  position: absolute;
  inset: 0;
  border-radius: var(--rad, 1.05% / 1.68%);
  background: #05060b;
  opacity: var(--shade);
  pointer-events: none;
}
.oc-motion .oc-deck__card { transition: transform 1.05s var(--oc-glide), opacity .8s ease; }
.oc-motion .oc-deck__shade { transition: opacity .9s ease; }
.oc-deck__card.is-flying {
  opacity: 0;
  transform: translate3d(-16%, 12%, 420px) rotateY(12deg) rotateX(-6deg);
  transition: transform .62s cubic-bezier(.55, 0, .7, .4), opacity .5s ease-in;
}
.oc-booting .oc-deck__card:not(.is-in) { opacity: 0; transform: translate3d(34%, -26%, -1500px) rotateY(-10deg); }
.oc-deck__card.no-anim, .oc-deck__card.no-anim .oc-deck__shade { transition: none !important; }

.oc-swatches { display: flex; align-items: center; gap: 16px; }
.oc-swatches__row { display: flex; align-items: center; gap: 10px; }
.oc-swatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sw-b) 0%, var(--sw-b) 38%, var(--sw-a) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  transition: box-shadow .25s, transform .3s var(--oc-hover);
}
.oc-swatch:hover { transform: scale(1.08); }
.oc-swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 2px var(--bg), 0 0 0 3.5px var(--oc-ink); }
.oc-swatches__play, .oc-dotnav__play {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-left: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--oc-dim);
  transition: background .2s, color .2s;
}
.oc-swatches__play:hover, .oc-dotnav__play:hover { background: rgba(255, 255, 255, .16); color: var(--oc-ink); }
.oc-swatches__play svg, .oc-dotnav__play svg { width: 11px; height: 11px; fill: currentColor; }
.oc-swatches__name { min-width: 11ch; margin: 0; color: var(--oc-dim); font: 500 13px/1 var(--font-body); text-shadow: 0 2px 12px rgba(5, 6, 11, .9); }

/* hero choreography: stack flies in, the line lands at 60 %, the headline at 95 % */
.oc-booting .oc-hero [data-hero-reveal],
.oc-booting .oc-hero [data-hero-title] { opacity: 0; transform: translateY(50px); }
.oc-motion .oc-hero [data-hero-reveal],
.oc-motion .oc-hero [data-hero-title] { transition: opacity .85s ease-in, transform 1.05s var(--oc-ease); }
.oc-booting .oc-hero.is-sub-in [data-hero-reveal],
.oc-booting .oc-hero.is-title-in [data-hero-title] { opacity: 1; transform: none; }

/* ================= highlights: every card stages one real window ================= */
.oc-highlights__head { margin-bottom: 48px; }
.oc-highlights__head h2 { font-size: 56px !important; line-height: 1.07 !important; }
.oc-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--oc-gutter);
  padding-inline: var(--oc-gutter);
  scrollbar-width: none;
}
.oc-rail::-webkit-scrollbar { display: none; }
.oc-rail:focus-visible { outline-offset: -3px; }
.oc-hl {
  position: relative;
  flex: 0 0 min(1680px, 87.5vw);
  height: clamp(540px, 74svh, 740px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  align-items: center;
  overflow: hidden;
  padding-left: clamp(36px, 4vw, 64px);
  border-radius: 28px;
  background: radial-gradient(90% 80% at 85% 60%, rgba(var(--oc-rgb), .10), transparent 62%), var(--oc-card);
  box-shadow: inset 0 0 0 1px var(--oc-line);
  scroll-snap-align: start;
}
.oc-hl__copy { position: relative; z-index: 1; max-width: 420px; }
.oc-hl__copy h3 { font-size: 44px; line-height: 1.06; }
.oc-hl__copy p { margin: 18px 0 0; color: var(--oc-dim); font: 500 19px/1.47 var(--font-body); }
.oc-hl__copy .oc-hl__eyebrow { margin: 0 0 20px; color: var(--accent-ink); font: 500 11px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.oc-hl__stage { position: relative; height: 100%; perspective: 1600px; perspective-origin: 0% 45%; }
.oc-hl__win {
  position: absolute;
  top: 50%;
  left: 2%;
  width: 88%;
  max-width: none;
  border-radius: var(--rad, 1.05% / 1.68%);
  box-shadow: var(--oc-shadow);
  transform-origin: 0% 50%;
  transform: translate3d(0, -50%, 0) rotateY(calc(-9deg + var(--depth-y, 0deg))) rotateX(calc(3deg + var(--depth-x, 0deg)));
}
.oc-hl__win--framed { border-radius: 1.4% / 2.2%; }
.oc-motion .oc-hl__win { transition: transform 1.5s var(--oc-glide), opacity 1s ease; }
.oc-motion .oc-rail[data-ready] .oc-hl:not(.is-current) .oc-hl__win { opacity: .5; transform: translate3d(8%, -50%, -160px) rotateY(-26deg) rotateX(6deg); }
/* Light lives behind the product; the capture itself stays crisp. */
.oc-hl__stage::before {
  content: ""; position: absolute; inset: 18% 0 8%; pointer-events: none;
  background: radial-gradient(ellipse, var(--hl-glow, rgba(var(--oc-rgb-2), .13)), transparent 68%);
  transform: translateZ(-100px);
}
.oc-hl--messages { --hl-glow: rgba(47, 123, 255, .2); background: radial-gradient(90% 80% at 85% 60%, rgba(47, 123, 255, .14), transparent 62%), var(--oc-card); }
.oc-hl--discover { --hl-glow: rgba(240, 157, 87, .13); background: radial-gradient(90% 80% at 85% 60%, rgba(240, 157, 87, .09), transparent 62%), var(--oc-card); }
.oc-hl--themes { --hl-glow: rgba(74, 239, 152, .13); background: radial-gradient(90% 80% at 85% 60%, rgba(74, 239, 152, .09), transparent 62%), var(--oc-card); }
.oc-hl--calls { background: radial-gradient(ellipse at 75% 65%, #102b46 0%, #0b1726 40%, #090e16 75%); }
/* A detail lifted straight out of the same capture and magnified: the real
   control, standing in front of its window with its own depth and shadow. */
.oc-hl__stage { transform-style: preserve-3d; }
.oc-hl__detail {
  position: absolute;
  z-index: 2;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 34px 70px -22px rgba(0, 0, 0, .9), 0 12px 24px -12px rgba(0, 0, 0, .7);
  pointer-events: none;
  transform: translate3d(0, 0, 90px) rotateY(calc(-9deg + var(--depth-y, 0deg) * 1.4)) rotateX(calc(3deg + var(--depth-x, 0deg) * 1.4));
}
.oc-hl__detail--spatial { left: 30%; top: 12%; width: 27%; border-radius: 18px; }
.oc-hl__detail--bubble { left: 38%; top: 27%; width: 52%; border-radius: 22px; box-shadow: 0 0 0 1px rgba(166, 205, 255, .35), 0 30px 60px -20px rgba(0, 40, 140, .8), 0 0 50px -10px rgba(52, 120, 246, .55); }
.oc-hl__detail--card { left: 5%; top: 16%; width: 30%; }
.oc-hl__detail--message { left: 7%; top: 56%; width: 50%; box-shadow: 0 0 0 1px rgba(120, 255, 170, .25), 0 30px 60px -22px rgba(0, 0, 0, .9), 0 0 44px -12px rgba(74, 239, 152, .45); }
.oc-motion .oc-hl__detail { transition: transform 1.3s var(--oc-glide) .28s, opacity .8s ease .28s; }
.oc-motion .oc-rail[data-ready] .oc-hl:not(.is-current) .oc-hl__detail { opacity: 0; transform: translate3d(-4%, 18%, -40px) rotateY(-24deg) rotateX(8deg); transition-delay: 0s; }

.oc-dotnav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; }
.oc-dotnav__dots {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}
.oc-dotnav__dots button {
  position: relative;
  width: 8px;
  height: 8px;
  overflow: hidden;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
  transition: width .5s var(--oc-ease), background .3s;
}
.oc-dotnav__dots button:hover { background: rgba(255, 255, 255, .6); }
.oc-dotnav__dots button[aria-current="true"] { width: 36px; background: rgba(255, 255, 255, .28); }
.oc-dotnav__dots button[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--oc-ink);
  transform-origin: left;
}
.oc-dotnav.is-playing .oc-dotnav__dots button[aria-current="true"]::after { animation: oc-dwell var(--dwell, 6150ms) linear both; }
@keyframes oc-dwell { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.oc-dotnav__play { width: 44px; height: 44px; margin: 0; background: rgba(255, 255, 255, .07); }
.oc-dotnav__play svg { width: 13px; height: 13px; }

/* ================= calls: pinned scene between the two planets =================
   The frame rises out of the sky tipped back 34° at 1.5×, settles upright,
   then four real recordings play in turn while the world behind swings the
   link between the OptiCord planet and the Discord one. OptiCord's own
   window gets the lit edge; Discord's stays plain. */
.oc-calls { padding-top: var(--oc-pad) !important; }
.oc-calls .oc-intro { padding-bottom: 96px; }
.oc-scene { position: relative; }
.oc-chapter { margin: 0; }
.oc-chapter__media {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 70px 150px -50px rgba(0, 0, 0, .95);
}
.oc-chapter--cord .oc-chapter__media {
  box-shadow: 0 0 0 1px rgba(var(--oc-rgb-3), .5), 0 0 60px -6px rgba(var(--oc-rgb), .45), 0 70px 150px -50px rgba(0, 0, 0, .95);
}
.oc-chapter__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, .07), transparent 32%);
}
.oc-chapter__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.oc-chapter__side {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  color: var(--oc-ink);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.oc-chapter__side img { width: 18px; height: 18px !important; border-radius: 5px; box-shadow: 0 0 14px rgba(var(--oc-rgb), .55); }
.oc-chapter__side strong { font-weight: 500; color: var(--accent-ink); }
.oc-chapter__side span { color: var(--oc-faint); }
.oc-chapter__side span::before { content: "·"; margin-right: 9px; color: var(--oc-faint); }
.oc-chapter__side i { width: 8px; height: 8px; margin: 0 5px; border-radius: 50%; background: #9ba3b5; }
.oc-chapter__side.is-discord strong { color: #c9cfdc; }
.oc-chapter__copy h3 { font-size: 32px; line-height: 1.125; letter-spacing: -.035em; }
.oc-chapter__copy h3 + p { max-width: 50ch; margin: 12px 0 0; color: var(--oc-dim); font: 400 17px/1.5 var(--font-body); }

/* fallback column: Reduce Motion, short windows, large text */
.oc-scene__sticky { display: grid; gap: 96px; width: min(1180px, 87.5%); margin: 0 auto; }
.oc-scene .oc-chapter__media { aspect-ratio: 1648 / 1038; }
.oc-scene .oc-chapter__copy { margin-top: 28px; }
.oc-steps { display: none; }

body.oc-scene-on .oc-scene { height: 640svh; }
body.oc-scene-on .oc-scene__sticky {
  --fw: min(1240px, 84vw, calc((100svh - var(--oc-local-h) - 200px) * 1.5877));
  --fh: calc(var(--fw) / 1.5877);
  --ftop: calc(var(--oc-local-h) + max(20px, (100svh - var(--oc-local-h) - var(--fh) - 160px) / 2));
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100svh;
  overflow: clip;
  padding: 0;
}
body.oc-scene-on .oc-chapter { position: absolute; inset: 0; pointer-events: none; perspective: 1500px; perspective-origin: 50% 30%; }
body.oc-scene-on .oc-chapter__rig {
  position: absolute;
  left: 50%;
  top: var(--ftop);
  width: var(--fw);
  aspect-ratio: 1648 / 1038;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: translate3d(-50%, var(--sy, 0px), 0) rotateX(var(--rx, 0deg)) scale(var(--ss, 1));
}
body.oc-scene-on .oc-chapter__media {
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: rotateY(-14deg) translateZ(-120px);
  transition: opacity .6s ease, transform .9s var(--oc-glide);
}
body.oc-scene-on .oc-chapter.is-before .oc-chapter__media { transform: rotateY(14deg) translateZ(-120px); }
body.oc-scene-on .oc-chapter.is-active .oc-chapter__media { opacity: 1; transform: none; }
body.oc-scene-on .oc-chapter__copy {
  position: absolute;
  left: calc(50% - var(--fw) / 2);
  top: calc(var(--ftop) + var(--fh) + 32px);
  width: var(--fw);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 56px;
  align-items: start;
  margin: 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .35s ease, transform .35s ease;
}
body.oc-scene-on .oc-chapter__side { grid-column: 1 / -1; }
body.oc-scene-on .oc-chapter__copy h3 + p { margin: 2px 0 0; }
body.oc-scene-on .oc-scene__sticky.is-settled .oc-chapter.is-active .oc-chapter__copy {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease .15s, transform .8s var(--oc-ease) .15s;
}
body.oc-scene-on .oc-steps {
  position: absolute;
  right: calc(50% - var(--fw) / 2);
  top: calc(var(--ftop) + var(--fh) + 16px);
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity .5s ease;
}
body.oc-scene-on .oc-scene__sticky.is-settled .oc-steps { opacity: 1; }
.oc-steps button {
  display: grid;
  gap: 10px;
  min-width: 78px;
  padding: 6px 4px;
  color: var(--oc-faint);
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
  transition: color .3s;
}
.oc-steps button:hover, .oc-steps button[aria-current="true"] { color: var(--oc-ink); }
.oc-steps i { display: block; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.oc-steps b { display: block; height: 100%; background: var(--oc-ink); transform-origin: left; transform: scaleX(var(--fill, 0)); }
.oc-steps button[data-side="cord"] b { background: var(--oc-grad-step); }
body.oc-scene-on.oc-scene-near .oc-chapter__rig { will-change: transform; }
.oc-calls__coda {
  margin: 0;
  padding: 40px 20px var(--oc-pad);
  color: var(--oc-ink);
  font: 700 44px/1.1 var(--font-display);
  letter-spacing: -.04em;
  text-align: center;
  text-wrap: balance;
}
.oc-calls__coda span { display: inline-block; }
.oc-calls__coda em {
  font-style: normal;
  background: var(--oc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 1068px) {
  .oc-chapter__copy h3 { font-size: 28px; }
}
@media (max-width: 900px) {
  body.oc-scene-on .oc-chapter__copy { display: block; }
  body.oc-scene-on .oc-chapter__copy h3 + p { margin-top: 12px; }
  body.oc-scene-on .oc-steps { top: auto; bottom: 22px; right: 50%; transform: translateX(50%); }
  .oc-steps { gap: 4px; }
  .oc-steps button { min-width: 0; width: 64px; font-size: 9.5px; letter-spacing: .08em; }
}
@media (max-width: 734px) {
  .oc-scene__sticky { gap: 72px; width: calc(100% - 28px); }
  .oc-chapter__media { border-radius: 12px; }
  .oc-chapter__copy h3 { font-size: 24px; line-height: 1.1667; }
  .oc-calls__coda { font-size: 30px; }
}

/* ================= messages ================= */
.oc-messages__stage { position: relative; width: min(1320px, 87.5%); margin: 0 auto; perspective: 2400px; perspective-origin: 50% 0%; }
.oc-messages__stage img, .oc-native__stage img {
  width: 100%;
  border-radius: 1.05% / 1.68%;
  box-shadow: 0 70px 140px -50px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .09);
}
.oc-motion .oc-messages__window {
  transform-origin: 50% 100%;
  transform: translate3d(0, var(--sy, 0px), 0) rotateX(var(--rx, 0deg)) scale(var(--ss, 1));
}
.oc-motion .oc-messages__stage.is-near .oc-messages__window { will-change: transform; }
.oc-messages__window { position: relative; transform-style: preserve-3d; }
.oc-messages__window::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(202, 215, 255, .3); border-radius: 1.05% / 1.68%;
  background: linear-gradient(115deg, rgba(235, 244, 255, .06), transparent 28%);
  transform: translateZ(1px);
}
.oc-messages__stage::before {
  content: ""; position: absolute; inset: 30% -12% -18%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 65%, rgba(82, 91, 255, .15), transparent 65%);
}

.oc-translate {
  display: grid;
  grid-template-columns: minmax(0, .36fr) minmax(0, .64fr);
  align-items: center;
  gap: 6%;
  margin-top: var(--oc-pad);
}
.oc-translate__copy h3 { font-size: 48px; line-height: 1.08; }
.oc-translate__copy h3 + p { max-width: 32ch; margin: 22px 0 34px; color: var(--oc-dim); font: 500 19px/1.47 var(--font-body); }
.oc-flip { perspective: 2400px; }
.oc-flip__card { position: relative; transform-style: preserve-3d; transform: rotateY(-8deg) rotateX(3deg); }
.oc-motion .oc-flip__card { transition: transform 1.1s var(--oc-glide); }
.oc-translate.is-on .oc-flip__card { transform: rotateY(-188deg) rotateX(3deg); }
.oc-flip__face {
  display: block;
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 120px -40px rgba(0, 0, 0, .95);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.oc-flip__face--back { position: absolute; inset: 0; transform: rotateY(180deg); }
.oc-switch { display: inline-flex; align-items: center; gap: 14px; padding: 0; color: var(--oc-ink); font: 600 17px/1 var(--font-body); }
.oc-switch__track { position: relative; width: 51px; height: 31px; border-radius: 999px; background: rgba(255, 255, 255, .18); transition: background .3s; }
.oc-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  transition: transform .35s var(--oc-ease);
}
.oc-switch[aria-checked="true"] .oc-switch__track { background: var(--accent); }
.oc-switch[aria-checked="true"] .oc-switch__thumb { transform: translateX(20px); }

/* ================= under the bonnet ================= */
.oc-native__stage { width: min(1240px, 80%); margin: 0 auto; perspective: 2200px; perspective-origin: 70% 40%; }
.oc-native__stage img { transform-origin: 100% 50%; transform: rotateY(-7deg) rotateX(2deg); }
.oc-motion .oc-native__stage img { transition: transform 1.6s var(--oc-glide), opacity 1.1s ease; }
.oc-motion .oc-native__stage:not(.is-visible) img { opacity: .2; transform: translate3d(24%, 0, -320px) rotateY(-40deg) rotateX(4deg); }
.oc-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin-top: 110px; }
.oc-facts div { margin: 0; }
.oc-facts dt { margin-bottom: 12px; color: var(--oc-ink); font: 600 21px/1.2 var(--font-display); letter-spacing: -.02em; }
.oc-facts dd { margin: 0; color: var(--oc-dim); font: 400 17px/1.47 var(--font-body); }

/* ================= tab gallery ================= */
.oc-tabs__list {
  width: max-content;
  max-width: 100%;
  display: flex;
  gap: 4px;
  margin: 0 auto;
  padding: 4px;
  overflow-x: auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  scrollbar-width: none;
}
.oc-tabs__list::-webkit-scrollbar { display: none; }
.oc-tabs__list button { flex: 0 0 auto; padding: 11px 20px; border-radius: 999px; color: var(--oc-dim); font: 500 15px/1 var(--font-body); transition: background .3s, color .3s; }
.oc-tabs__list button:hover { color: var(--oc-ink); }
.oc-tabs__list button[aria-selected="true"] { background: rgba(255, 255, 255, .16); color: var(--oc-ink); }
.oc-tabs__list button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.oc-tabs__panels { max-width: 1240px; margin: 73px auto 0; perspective: 2000px; }
.oc-tabs__shot { width: 100%; border-radius: 18px; box-shadow: var(--oc-shadow); }
.oc-tabs__shot--cutout { border-radius: 1.05% / 1.68%; }
.oc-tabs__panel p { max-width: 46ch; margin: 36px auto 0; color: var(--oc-dim); font: 600 21px/1.38 var(--font-display); letter-spacing: -.02em !important; text-align: center; }
.oc-tabs__panel p strong { color: var(--oc-ink); font-weight: 600; }
.oc-tabs__panel[hidden] { display: none; }
.oc-motion .oc-tabs__panel .oc-tabs__shot { animation: oc-panel-in .9s var(--oc-glide) both; transform-origin: 50% 100%; }
.oc-motion .oc-tabs__panel p { animation: oc-fade .6s ease .15s both; }
@keyframes oc-panel-in { from { opacity: 0; transform: translate3d(0, 40px, -120px) rotateX(12deg); } to { opacity: 1; transform: none; } }
@keyframes oc-fade { from { opacity: 0; } to { opacity: 1; } }

/* ================= parity: what carries over, and what OptiCord adds ================= */
.oc-parity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1240px; margin-top: 96px; }
.oc-parity__col { padding: 40px 44px 44px; border-radius: 28px; background: var(--oc-card); box-shadow: inset 0 0 0 1px var(--oc-line); }
.oc-parity__col--plus { background: radial-gradient(120% 90% at 100% 0%, rgba(var(--oc-rgb), .16), transparent 60%), var(--oc-card); box-shadow: inset 0 0 0 1px rgba(var(--oc-rgb-3), .28); }
.oc-parity h3 { margin-bottom: 26px; font-size: 28px; line-height: 1.15; }
.oc-parity__col--plus h3 { background: var(--oc-grad-plus); -webkit-background-clip: text; background-clip: text; color: transparent; }
.oc-parity ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.oc-parity li { position: relative; padding-left: 30px; color: var(--oc-dim); font: 500 17px/1.4 var(--font-body); }
.oc-parity li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255, 255, 255, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.5 2.4 5.1-5.4' fill='none' stroke='%23e8edf8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.oc-parity__col--plus li { color: var(--oc-ink); }
.oc-parity__col--plus li::before { background-color: rgb(var(--oc-rgb)); box-shadow: 0 0 14px rgba(var(--oc-rgb), .6); }

/* ================= themes: windows on a continuous perspective arc ================= */
.oc-ring {
  --ring-w: min(680px, 48vw);

  position: relative;
  height: calc(var(--ring-w) * .625 + 120px);
  margin-top: 20px;
  perspective: 2300px;
  perspective-origin: 50% 30%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.oc-ring.is-dragging { cursor: grabbing; }
.oc-ring:focus-visible { outline-offset: 8px; }
.oc-ring__spin {
  position: absolute;
  left: 50%;
  top: 30px;
  width: var(--ring-w);
  height: calc(var(--ring-w) * .625);
  margin-left: calc(var(--ring-w) / -2);
  transform-style: preserve-3d;

}
.oc-ring__item {
  --i: 0;
  --face: 1;
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  opacity: var(--face);
  transform: translate3d(calc(var(--slot, 0) * 76%), calc(var(--distance, 0) * 20px), calc(var(--distance, 0) * -260px)) rotateY(calc(var(--slot, 0) * -26deg));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.oc-ring__item img { width: 100%; border-radius: 1.2% / 1.9%; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); pointer-events: none; }
.oc-ring__item--settings img { border-radius: 12px; }
.oc-ring__item figcaption { opacity: var(--caption, 1); position: absolute; left: 0; right: 0; bottom: -44px; color: var(--oc-ink); font: 600 17px/1.2 var(--font-display); letter-spacing: -.02em; text-align: center; }
.oc-ring__controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 28px; }
.oc-ring__controls button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--oc-ink);
  transition: background .2s;
}
.oc-ring__controls button:hover { background: rgba(255, 255, 255, .18); }
.oc-ring__controls svg { width: 14px; height: 14px; }
.oc-ring__name { min-width: 16ch; margin: 0; color: var(--oc-dim); font: 500 14px/1 var(--font-mono); letter-spacing: .06em; text-align: center; }
.oc-ring__play { display: block; margin: 18px auto 0; padding: 8px 14px; color: var(--oc-dim); font: 500 12px/1 var(--font-body); border-radius: 999px; }
.oc-ring__play:hover { color: var(--oc-ink); background: #ffffff0d; }
html:not(.oc-motion) .oc-ring__play { display: none; }
.oc-ring::before { content: ""; position: absolute; inset: 20% 10% -10%; background: radial-gradient(ellipse, rgba(var(--oc-rgb), .08), transparent 66%); pointer-events: none; }

.oc-ring__hint { margin: 16px 0 0; color: var(--oc-faint); font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-align: center; text-transform: uppercase; }

/* ================= why ================= */
.oc-why__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; margin-block: 0; padding: 0; list-style: none; }
.oc-why__list li { padding-top: 30px; border-top: 1px solid var(--oc-rule); }
.oc-why .oc-intro h2 { max-width: 20ch; }
.oc-why__list span {
  display: block;
  margin-bottom: 22px;
  background: var(--oc-grad-num);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 700 44px/1 var(--font-display);
  letter-spacing: -.04em;
}
.oc-why__list h3 { font-size: 28px; line-height: 1.14; }
.oc-why__list p { margin: 14px 0 0; color: var(--oc-dim); font: 400 17px/1.47 var(--font-body); }

/* ================= final: the camera lands back on the planet ================= */
.oc-final {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  padding: max(120px, 16svh) 0 calc(var(--oc-pad) + 22svh) !important;
  text-align: center;
}
.oc-final__inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.oc-final__inner .oc-eyebrow { justify-content: center; }
.oc-final__icon { width: 112px; height: 112px !important; margin: 0 0 28px; border-radius: 25px; box-shadow: 0 18px 60px -28px var(--oc-icon-glow); }
.oc-final h2 { max-width: 13ch; text-shadow: 0 6px 40px rgba(5, 6, 11, .85); }
.oc-final h2 + p { max-width: 38ch; margin: 28px auto 34px; color: var(--oc-dim); font: 500 21px/1.43 var(--font-body); text-shadow: 0 2px 20px rgba(5, 6, 11, .9); }
.oc-final__note { margin: 22px 0 0; color: var(--oc-faint); font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }

/* Beta requests use the site's contact panel and email handoff. */
.oc-beta .modal__panel { border-color: #65b8ff38; background: #090f18; }
.oc-beta .modal__panel > .mono-label { margin-bottom: 14px; color: var(--accent-ink); }
.oc-beta #beta-description { margin-bottom: 28px; }
.oc-beta__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.oc-beta .field textarea { min-height: 92px; }
.oc-beta .btn--accent { background: var(--oc-action); color: white; }
.oc-beta .btn--accent:hover { background: var(--oc-action-hover); }
@media (max-width: 480px) { .oc-beta__fields { grid-template-columns: 1fr; gap: 0; } }

/* ---------- StaggerReveal: 30px travel, 0.15 s steps ---------- */
.oc-motion [data-reveal] [data-reveal-item] {
  transition: opacity .9s var(--oc-ease-quad), transform .7s var(--oc-ease-quad);
  transition-delay: calc(var(--i, 0) * 150ms);
}
.oc-motion [data-reveal]:not(.is-visible) [data-reveal-item] { opacity: 0; transform: translateY(30px); }
.oc-motion [data-reveal].is-revealing [data-reveal-item] { will-change: transform, opacity; }

/* ================= viewport bands ================= */
@media (max-width: 1440px) {
  .oc-hero__title { font-size: 76px !important; }
  .oc-hl__copy h3 { font-size: 40px; }
}
@media (max-width: 1068px) {
  body[data-flagship] { --oc-pad: 128px; }
  .oc-page h2 { font-size: 64px !important; line-height: 1.0625 !important; }
  .oc-highlights__head h2 { font-size: 48px !important; }
  .oc-intro > p:last-child, .oc-final h2 + p { font-size: 19px; }

  .oc-hero { min-height: 0; padding: 48px 0 88px !important; }
  .oc-hero__inner { grid-template-columns: 1fr; grid-template-areas: "title" "sub" "deck" "foot"; grid-template-rows: none; justify-items: center; text-align: center; }
  .oc-hero__title { max-width: 12ch; font-size: 64px !important; }
  .oc-hero__sub { max-width: 38ch; margin-inline: auto; font-size: 19px; }
  .oc-deck { --dx: 0%; --dy: -9.5%; --dz: -120px; width: min(100%, 720px); margin: 18% auto 0; perspective-origin: 50% 0%; }
  .oc-deck__rig { transform: translate3d(0, var(--exit-y, 0px), 0) rotateX(calc(9deg + var(--pitch, 0deg) + var(--exit-tilt, 0deg))) rotateY(var(--yaw, 0deg)); }
  .oc-hero__foot { justify-items: center; margin-top: 36px; }

  .oc-hl { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; height: 640px; padding: 44px 44px 0; }
  .oc-hl__copy { max-width: 520px; }
  .oc-hl__copy h3 { font-size: 34px; }
  .oc-hl__copy p { font-size: 17px; margin-top: 12px; }
  .oc-hl__stage { perspective-origin: 50% 0%; }
  .oc-hl__win { top: auto; bottom: -4%; left: 4%; width: 92%; transform-origin: 50% 100%; transform: rotateX(10deg); }
  .oc-motion .oc-rail[data-ready] .oc-hl:not(.is-current) .oc-hl__win { transform: translate3d(0, 10%, -120px) rotateX(24deg); }
  .oc-hl__stage--fan .oc-hl__win { width: 64%; }
  .oc-hl__stage--fan .oc-hl__win:nth-child(1) { left: 4%; bottom: 22%; transform: translate3d(0, 0, -260px) rotateY(-20deg); }
  .oc-hl__stage--fan .oc-hl__win:nth-child(2) { left: 18%; bottom: 10%; transform: translate3d(0, 0, -130px) rotateY(-20deg); }
  .oc-hl__stage--fan .oc-hl__win:nth-child(3) { left: 32%; bottom: -2%; transform: rotateY(-20deg); }
  .oc-motion .oc-rail[data-ready] .oc-hl:not(.is-current) .oc-hl__stage--fan .oc-hl__win { transform: translate3d(8%, 10%, -360px) rotateY(-30deg); }

  .oc-translate { grid-template-columns: 1fr; gap: 48px; }
  .oc-translate__copy h3 { font-size: 40px; }
  .oc-facts, .oc-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 40px; }
  .oc-parity { grid-template-columns: 1fr; margin-top: 72px; }
  .oc-local__links { gap: 20px; }
  .oc-tabs__panels { margin-top: 36px; }
  .oc-ring { --ring-w: min(460px, 56vw); }
}
@media (max-width: 734px) {
  body[data-flagship] { --oc-pad: 96px; --oc-content: calc(100% - 40px); --oc-gutter: 20px; }
  .oc-local__links { display: none; }
  .oc-local__name { font-size: 19px; }
  .oc-local__discord { padding: 6px 8px; }
  .oc-local__discord span { display: none; }
  .oc-page h2 { font-size: 48px !important; line-height: 1.0835 !important; }
  .oc-highlights__head h2 { font-size: 40px !important; }
  .oc-intro { padding-bottom: 56px; }
  .oc-intro > p:last-child { margin-top: 22px; }
  .oc-hero { padding: 36px 0 72px !important; }
  .oc-hero__title { font-size: 52px !important; }
  .oc-hero__sub { font-size: 17px; }
  .oc-deck { --dy: -10.5%; --dz: -95px; margin-top: 22%; }
  .oc-swatches { flex-direction: column; gap: 14px; }
  .oc-hl { flex-basis: calc(100vw - 40px); height: 560px; padding: 30px 26px 0; border-radius: 22px; }
  .oc-hl__copy h3 { font-size: 28px; }
  .oc-hl__copy p { font-size: 16px; }
  .oc-hl__win { left: -2%; width: 104%; }
  .oc-hl__detail--spatial { left: 56%; top: 4%; width: 34%; }
  .oc-hl__detail--bubble { left: 22%; top: 18%; width: 74%; }
  .oc-hl__detail--card { left: 52%; top: 8%; width: 44%; }
  .oc-hl__detail--message { left: 8%; top: 40%; width: 80%; }
  .oc-messages__stage, .oc-native__stage { width: calc(100% - 20px); }
  .oc-translate__copy h3 { font-size: 32px; }
  .oc-facts { margin-top: 72px; }
  .oc-tabs__list { margin-inline: 0; }
  .oc-tabs__list button { padding: 10px 15px; font-size: 14px; }
  .oc-tabs__panel p { font-size: 19px; }
  .oc-parity__col { padding: 30px 26px 32px; border-radius: 22px; }
  .oc-parity h3 { font-size: 24px; }
  .oc-ring { --ring-w: 70vw; perspective: 1400px; height: calc(var(--ring-w) * .625 + 110px); }
  .oc-final { padding-top: 96px !important; }
}
@media (max-width: 480px) {
  .oc-page h2 { font-size: 40px !important; line-height: 1.1 !important; }
  .oc-highlights__head h2 { font-size: 34px !important; }
  .oc-hero__title { font-size: 44px !important; }
  .oc-hl { height: 520px; padding: 26px 22px 0; }
  .oc-hl__copy h3 { font-size: 25px; }
  .oc-facts, .oc-why__list { grid-template-columns: 1fr; gap: 36px; }
  .oc-why__list h3 { font-size: 24px; }
  .oc-local__name span { display: none; }
}
@media (max-width: 374px) {
  .oc-page h2 { font-size: 34px !important; }
  .oc-hero__title { font-size: 40px !important; }
  .oc-swatch { width: 20px; height: 20px; }
  .oc-swatches__row { gap: 8px; }
}

/* Reduce Motion: nothing travels, nothing scrubs, nothing autoplays. The
   windows keep their resting angles; video playback uses native controls. */
@media (prefers-reduced-motion: reduce) {
  .oc-deck__card, .oc-deck__shade, .oc-hl__win, .oc-flip__card, .oc-dotnav__dots button, .oc-switch__thumb, .oc-switch__track { transition: none !important; }
  .oc-native__stage img { opacity: 1 !important; }
  .oc-hl__detail { transition: none !important; }
  .oc-tabs__panel .oc-tabs__shot, .oc-tabs__panel p { animation: none !important; }
}

html:not(.oc-js) .oc-ring { height: auto; overflow-x: auto; cursor: auto; }
html:not(.oc-js) .oc-ring__spin { position: static; display: flex; gap: 24px; width: auto; height: auto; margin: 0; padding: 0 var(--oc-gutter) 60px; }
html:not(.oc-js) .oc-ring__item { position: relative; flex: 0 0 min(680px, 80vw); opacity: 1; transform: none; }

/* ==========================================================================
   PRODUCT PAGES — the components OptiMac, OptiSound, OptiLoad, OptiTube and
   OptiExtras add to the system. Same geometry, same easing, same rule:
   light lives behind the product, and the product itself stays crisp.
   ========================================================================== */

/* ---------- local nav: the price sits beside Buy, as Apple does ---------- */
.oc-local__price { color: var(--oc-dim); font: 500 12px/1 var(--font-body); white-space: nowrap; }
.oc-local__name img.is-icon { border-radius: 0; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
/* some app icons carry their own transparent margin; they sit at the same
   optical size as the others */
.oc-local__name img.is-padded { scale: 1.32; }
.oc-final__icon--padded { scale: 1.3; }
.oc-cards--after { margin-top: 96px; }

/* ---------- hero: an eyebrow above the headline, views instead of swatches ---------- */
.oc-hero__head { grid-area: title; align-self: end; }
.oc-hero__head .oc-eyebrow { margin-bottom: 26px; }
.oc-hero__head .oc-hero__title { grid-area: auto; }
.oc-booting .oc-hero .oc-hero__head .oc-eyebrow { opacity: 0; transform: translateY(24px); }
.oc-motion .oc-hero .oc-hero__head .oc-eyebrow { transition: opacity .85s ease-in, transform 1.05s var(--oc-ease); }
.oc-booting .oc-hero.is-title-in .oc-hero__head .oc-eyebrow { opacity: 1; transform: none; }

.oc-views { display: flex; align-items: center; gap: 12px; }
.oc-views__row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px var(--oc-line);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.oc-views__btn {
  position: relative;
  padding: 11px 17px 13px;
  border-radius: 999px;
  color: var(--oc-dim);
  font: 500 14px/1 var(--font-body);
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background .35s var(--oc-ease), color .25s;
}
.oc-views__btn:hover { color: var(--oc-ink); }
.oc-views__btn[aria-pressed="true"] { background: rgba(255, 255, 255, .13); color: var(--oc-ink); }
.oc-views__btn i { position: absolute; left: 17px; right: 17px; bottom: 5px; height: 2px; overflow: hidden; border-radius: 2px; }
.oc-views__btn[aria-pressed="true"] i { background: rgba(255, 255, 255, .12); }
.oc-views__btn[aria-pressed="true"] i::after { content: ""; position: absolute; inset: 0; background: var(--oc-grad-step); transform: scaleX(1); transform-origin: left; }
.oc-views__row.is-playing .oc-views__btn[aria-pressed="true"] i::after { animation: oc-dwell var(--dwell, 5000ms) linear both; }
.oc-views__btn[data-clip][aria-pressed="true"] i::after, .oc-views__row.is-playing .oc-views__btn[data-clip][aria-pressed="true"] i::after { animation: none; transform: scaleX(var(--p, 0)); }
.oc-views .oc-swatches__play { margin-left: 2px; }
html:not(.oc-js) .oc-views { display: none; }

/* ---------- centred hero: for a headline that needs the full measure ----------
   Headline, line and actions over the product, the stack of windows below
   them tipped back towards the planet, and the view picker under the stack
   where a carousel's dots would be. */
.oc-hero--center { min-height: 0; padding: 72px 0 32px !important; }
.oc-hero--center .oc-hero__inner {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "sub" "foot" "deck" "views";
  grid-template-rows: none;
  justify-items: center;
  text-align: center;
}
.oc-hero--center .oc-hero__head .oc-eyebrow { justify-content: center; }
.oc-hero--center .oc-hero__title { max-width: 18ch; margin-inline: auto; font-size: 80px !important; }
.oc-hero--center .oc-hero__sub { max-width: 46ch; margin-inline: auto; }
.oc-hero--center .oc-hero__foot { justify-items: center; margin-top: 36px; }
.oc-hero--center .oc-deck { --dx: 0%; --dy: -6.5%; --dz: -150px; width: min(100%, 1060px); margin: 8% auto 0; perspective-origin: 50% 0%; }
.oc-hero--center .oc-deck__rig { transform: translate3d(0, var(--exit-y, 0px), 0) rotateX(calc(12deg + var(--pitch, 0deg) + var(--exit-tilt, 0deg))) rotateY(var(--yaw, 0deg)); }
.oc-booting .oc-hero--center .oc-deck__card:not(.is-in) { opacity: 0; transform: translate3d(0, -34%, -1700px); }
.oc-hero--center .oc-views { grid-area: views; margin-top: 44px; }

/* a deck window can be a recording */
.oc-deck__shot video { display: block; width: 100%; height: auto; border-radius: var(--rad, 1.05% / 1.68%); background: #05060b; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .09); }
.oc-deck--single .oc-deck__rig { transform: translate3d(0, var(--exit-y, 0px), 0) rotateX(calc(4deg + var(--pitch, 0deg) + var(--exit-tilt, 0deg))) rotateY(calc(-12deg + var(--yaw, 0deg))); }
.oc-deck__glow {
  position: absolute; inset: 8% -6% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 60%, rgba(var(--oc-rgb), .22), transparent 70%);
  filter: blur(10px);
}

/* ---------- numbers band ---------- */
.oc-stats { padding: 8px 0 var(--oc-pad) !important; }
.oc-stats__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin: 0 auto;
  padding-top: 46px;
  border-top: 1px solid var(--oc-rule);
}
.oc-stats__list > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; margin: 0; }
.oc-stats__list dd {
  margin: 0;
  background: var(--oc-grad-num);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 700 64px/1 var(--font-display);
  letter-spacing: -.05em;
  white-space: nowrap;
}
.oc-stats__list dt { color: var(--oc-dim); font: 500 17px/1.35 var(--font-body); letter-spacing: -.01em; }

/* ---------- feature tiles, bento ---------- */
.oc-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.oc-tile {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 40px 40px 44px;
  border-radius: 28px;
  background: radial-gradient(120% 90% at 100% 0%, rgba(var(--oc-rgb), .12), transparent 55%), var(--oc-card);
  box-shadow: inset 0 0 0 1px var(--oc-line);
  transition: transform .6s var(--oc-hover), box-shadow .5s;
}
.oc-tile:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(var(--oc-rgb-3), .24), 0 40px 80px -50px rgba(var(--oc-rgb), .55); }
.oc-tile--wide { grid-column: span 2; }
.oc-tile__icon {
  width: 54px;
  height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(var(--oc-rgb-2), .3), rgba(var(--oc-rgb), .07));
  box-shadow: inset 0 0 0 1px rgba(var(--oc-rgb-3), .32), 0 14px 34px -14px rgba(var(--oc-rgb), .7);
  color: var(--accent-ink);
}
.oc-tile__icon svg { width: 25px; height: 25px; }
.oc-tile h3 { margin-top: auto; padding-top: 56px; font-size: 28px; line-height: 1.14; letter-spacing: -.03em; }
.oc-tile p { max-width: 40ch; margin: 12px 0 0; color: var(--oc-dim); font: 400 17px/1.47 var(--font-body); }
.oc-tile__tag {
  position: absolute;
  top: 30px;
  right: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-ink);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.oc-tile__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--oc-rgb-2)); box-shadow: 0 0 12px rgba(var(--oc-rgb-2), .9); }
.oc-motion .oc-tile__tag::before { animation: oc-pulse 2.4s ease-in-out infinite; }
@keyframes oc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* a wide tile can hold a real capture, bleeding off its corner */
.oc-tile--shot { padding-right: 46%; }
.oc-tile__shot {
  position: absolute;
  right: -6%;
  bottom: -10%;
  width: 56%;
  border-radius: var(--rad, 12px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -30px rgba(0, 0, 0, .9);
  transform: perspective(1600px) rotateY(-14deg) rotateX(6deg);
  transform-origin: 100% 100%;
  transition: transform 1.2s var(--oc-glide);
}
.oc-tile--shot:hover .oc-tile__shot { transform: perspective(1600px) rotateY(-8deg) rotateX(3deg) translate3d(-2%, -2%, 0); }

/* ---------- a big window: a recording or a capture, standing up as it climbs ---------- */
.oc-window-stage { position: relative; width: min(1240px, 87.5%); margin: 0 auto; perspective: 2400px; perspective-origin: 50% 0%; }
.oc-window-stage::before {
  content: ""; position: absolute; inset: 30% -12% -18%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 65%, rgba(var(--oc-rgb), .16), transparent 65%);
}
.oc-window {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #06070c;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 70px 140px -50px rgba(0, 0, 0, .95);
  transform-style: preserve-3d;
}
.oc-window > video, .oc-window > img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 16 / 10); object-fit: cover; }
.oc-window::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  background: linear-gradient(115deg, rgba(235, 244, 255, .05), transparent 28%);
}
.oc-motion .oc-window[data-settle-target] {
  transform-origin: 50% 100%;
  transform: translate3d(0, var(--sy, 0px), 0) rotateX(var(--rx, 0deg)) scale(var(--ss, 1));
}
.oc-motion [data-settle].is-near [data-settle-target] { will-change: transform; }
.oc-window-stage--narrow { width: min(560px, 87.5%); }
.oc-window-stage--narrow .oc-window { border-radius: 26px; }

/* the reader's own control for a playing recording */
.oc-play {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(22, 24, 32, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: var(--oc-ink);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  transition: background .2s, transform .3s var(--oc-hover);
}
.oc-play:hover { background: rgba(40, 43, 56, .8); transform: scale(1.06); }
.oc-play svg { width: 12px; height: 12px; fill: currentColor; }
.oc-play[data-state="playing"] .oc-i-play, .oc-play[data-state="paused"] .oc-i-pause { display: none; }

/* ---------- copy beside a staged window ---------- */
.oc-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 7%; }
.oc-split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.oc-split--flip .oc-split__copy { order: 2; }
.oc-split__copy h2 { font-size: 64px !important; line-height: 1.06 !important; }
.oc-split__copy > p { max-width: 40ch; margin: 26px 0 0; color: var(--oc-dim); font: 500 19px/1.5 var(--font-body); }
.oc-split__copy > p, .oc-split__copy .oc-checks li, .oc-stats__list dt { text-shadow: 0 2px 18px rgba(5, 6, 11, .95), 0 0 3px rgba(5, 6, 11, .7); }
.oc-split__copy h2 { filter: drop-shadow(0 4px 22px rgba(5, 6, 11, .8)); }
.oc-split__copy > p strong { color: var(--oc-ink); font-weight: 600; }
.oc-split__copy .oc-checks { margin-top: 30px; }
.oc-split__stage { position: relative; perspective: 1800px; perspective-origin: 0% 45%; }
.oc-split--flip .oc-split__stage { perspective-origin: 100% 45%; }
.oc-split__stage::before {
  content: ""; position: absolute; inset: 10% -4% -8%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(var(--oc-rgb-2), .14), transparent 66%);
  transform: translateZ(-80px);
}
.oc-split__win {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--rad, 14px);
  background: #06070c;
  box-shadow: var(--oc-shadow);
  transform-origin: 0% 50%;
  transform: rotateY(calc(-9deg + var(--depth-y, 0deg))) rotateX(calc(3deg + var(--depth-x, 0deg)));
}
.oc-split--flip .oc-split__win { transform-origin: 100% 50%; transform: rotateY(calc(9deg + var(--depth-y, 0deg))) rotateX(calc(3deg + var(--depth-x, 0deg))); }
.oc-split__win video, .oc-split__win img { display: block; width: 100%; height: auto; border-radius: inherit; }
.oc-split__win--portrait { width: min(420px, 78%); margin-inline: auto; border-radius: 22px; }
.oc-motion .oc-split__win { transition: transform 1.5s var(--oc-glide), opacity 1s ease; }
.oc-motion .oc-split__stage:not(.is-visible) .oc-split__win { opacity: .2; transform: translate3d(16%, 0, -280px) rotateY(-36deg) rotateX(4deg); }
.oc-motion .oc-split--flip .oc-split__stage:not(.is-visible) .oc-split__win { transform: translate3d(-16%, 0, -280px) rotateY(36deg) rotateX(4deg); }
.oc-split + .oc-split { margin-top: var(--oc-pad); }

.oc-checks { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.oc-checks li { position: relative; padding-left: 32px; color: var(--oc-dim); font: 500 17px/1.45 var(--font-body); }
.oc-checks li strong { color: var(--oc-ink); font-weight: 600; }
.oc-checks li::before {
  content: ""; position: absolute; left: 0; top: .18em; width: 20px; height: 20px; border-radius: 50%;
  background: rgb(var(--oc-rgb)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.5 2.4 5.1-5.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 0 14px rgba(var(--oc-rgb), .55);
}

/* ---------- a filmstrip of real captures, each with its caption ---------- */
.oc-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; max-width: 1240px; margin: 0 auto; }
.oc-strip figure { margin: 0; perspective: 1600px; }
.oc-strip img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 4 / 3);
  object-fit: cover;
  object-position: top center;
  border-radius: 18px;
  box-shadow: var(--oc-shadow);
  transition: transform 1.1s var(--oc-glide);
}
.oc-strip figure:hover img { transform: translateY(-6px) rotateX(3deg); }
.oc-strip figcaption { margin-top: 18px; color: var(--oc-ink); font: 600 19px/1.3 var(--font-display); letter-spacing: -.02em; }
.oc-strip figcaption span { display: block; margin-bottom: 8px; color: var(--accent-ink); font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- side by side ---------- */
.oc-versus { max-width: none; }
.oc-versus__scroll {
  overflow-x: auto;
  border-radius: 28px;
  background: var(--oc-card);
  box-shadow: inset 0 0 0 1px var(--oc-line);
  scrollbar-width: thin;
}
.oc-versus__scroll:focus-visible { outline-offset: 3px; }
.oc-versus table { width: 100%; min-width: 620px; border-collapse: collapse; }
.oc-versus th, .oc-versus td {
  padding: 22px 30px;
  border-top: 1px solid var(--oc-line);
  color: var(--oc-dim);
  font: 400 17px/1.42 var(--font-body);
  text-align: left;
  vertical-align: top;
}
.oc-versus thead th { padding: 32px 30px 22px; border-top: 0; color: var(--oc-faint); font: 600 21px/1.2 var(--font-display); letter-spacing: -.02em; }
.oc-versus thead th.is-us span { background: var(--oc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.oc-versus tbody th { width: 21%; padding-top: 26px; color: var(--oc-faint); font: 500 11.5px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.oc-versus .is-us { width: 40%; background: linear-gradient(180deg, rgba(var(--oc-rgb), .1), rgba(var(--oc-rgb), .045)); color: var(--oc-ink); font-weight: 500; }
.oc-versus tbody tr:last-child .is-us { border-bottom-left-radius: 0; }
.oc-versus tbody tr { transition: background .25s; }
.oc-versus tbody tr:hover { background: rgba(255, 255, 255, .02); }

/* ---------- plain cards: comparisons worth reading ---------- */
.oc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.oc-card {
  margin: 0;
  padding: 34px 34px 38px;
  border-radius: 24px;
  background: var(--oc-card);
  box-shadow: inset 0 0 0 1px var(--oc-line);
  transition: box-shadow .4s, transform .6s var(--oc-hover);
}
.oc-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(var(--oc-rgb-3), .2); }
.oc-card h3 { font-size: 21px; line-height: 1.22; letter-spacing: -.02em; }
.oc-card p { margin: 12px 0 0; color: var(--oc-dim); font: 400 15px/1.58 var(--font-body); }
.oc-card a { color: var(--accent-ink); text-underline-offset: 3px; }
.oc-card__icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 26px; border-radius: 13px; background: rgba(var(--oc-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--oc-rgb-3), .24); color: var(--accent-ink); }
.oc-card__icon svg { width: 21px; height: 21px; }
/* grids stagger in quicker steps, and only while they arrive, so a hover
   never waits behind a reveal delay */
.oc-motion [data-reveal] .oc-card[data-reveal-item], .oc-motion [data-reveal] .oc-tile[data-reveal-item] {
  transition: opacity .9s var(--oc-ease-quad), transform .6s var(--oc-hover), box-shadow .5s;
}
.oc-motion [data-reveal].is-revealing .oc-card[data-reveal-item], .oc-motion [data-reveal].is-revealing .oc-tile[data-reveal-item] {
  transition: opacity .9s var(--oc-ease-quad) calc(min(var(--i, 0), 5) * 90ms), transform .7s var(--oc-ease-quad) calc(min(var(--i, 0), 5) * 90ms), box-shadow .5s;
}

/* ---------- questions ---------- */
.oc-faq__list { width: min(980px, var(--oc-content)); margin: 0 auto; border-bottom: 1px solid var(--oc-line); }
.oc-faq details { border-top: 1px solid var(--oc-line); }
.oc-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 2px;
  color: var(--oc-ink);
  font: 600 21px/1.3 var(--font-display);
  letter-spacing: -.02em;
  list-style: none;
  cursor: pointer;
  transition: color .2s;
}
.oc-faq summary::-webkit-details-marker { display: none; }
.oc-faq summary:focus-visible { outline-offset: 2px; border-radius: 6px; }
.oc-faq summary i {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  transition: background .3s, transform .5s var(--oc-ease);
}
.oc-faq summary i::before, .oc-faq summary i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px;
  border-radius: 2px; background: var(--oc-ink);
}
.oc-faq summary i::after { transform: rotate(90deg); }
.oc-faq summary:hover i { background: rgba(255, 255, 255, .14); }
.oc-faq details[open]:not(.is-closing) summary i { transform: rotate(45deg); background: rgba(var(--oc-rgb), .3); }
.oc-faq__a { overflow: hidden; }
.oc-faq__a p { max-width: 68ch; margin: 0; padding: 0 58px 30px 2px; color: var(--oc-dim); font: 400 17px/1.58 var(--font-body); }
.oc-faq__a a { color: var(--accent-ink); text-underline-offset: 3px; }
.oc-faq__a code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); font: 500 .9em/1 var(--font-mono); }

/* ---------- buy: the camera lands; copy on the left, the checkout in glass on
   the right, and the star comes up under the card ---------- */
.oc-buy { text-align: left; }
.oc-buy__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; column-gap: 7%; }
.oc-buy__copy { display: flex; flex-direction: column; align-items: flex-start; }
.oc-buy__copy .oc-eyebrow { justify-content: flex-start; }
.oc-buy__copy h2 { max-width: 12ch; }
.oc-buy .oc-buy__copy .oc-buy__lede { max-width: 40ch; margin: 22px 0 0; }
.oc-buy__card {
  padding: 26px 28px 22px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(22, 24, 36, .8), rgba(10, 11, 19, .84));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 60px 120px -50px rgba(0, 0, 0, .95), 0 0 90px -30px rgba(var(--oc-rgb), .32);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
}
.oc-buy__label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; color: var(--oc-faint); font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.oc-buy__label strong { color: var(--oc-ink); font-weight: 500; }
.oc-buy__card .oc-buy__paypal { width: 100%; }

.oc-buy .oc-buy__price { margin: 28px 0 0; color: var(--oc-ink); font: 700 64px/1 var(--font-display); letter-spacing: -.05em; text-shadow: 0 6px 40px rgba(5, 6, 11, .85); }
.oc-buy .oc-buy__price small { margin-left: 12px; color: var(--oc-faint); font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; vertical-align: middle; }
.oc-buy .oc-buy__lede { max-width: 44ch; margin: 24px auto 34px; color: var(--oc-dim); font: 500 21px/1.43 var(--font-body); text-shadow: 0 2px 20px rgba(5, 6, 11, .9); }
.oc-buy__paypal { width: min(380px, 100%); min-height: 52px; margin: 0 auto; }
.oc-buy__paypal .btn--accent, .oc-buy__paypal .oc-btn { width: 100%; }
/* the hosted button repeats the icon, name and price this section already
   shows; its photo goes, its form and buttons stay exactly as PayPal draws them */
.oc-buy__paypal [id^="carousel-container-"] { display: none !important; }
.oc-final__icon--art { border-radius: 0; box-shadow: none; filter: drop-shadow(0 22px 44px rgba(var(--oc-rgb), .42)) drop-shadow(0 4px 10px rgba(0, 0, 0, .55)); }
.oc-buy .oc-final__note { margin-top: 26px; }

/* ---------- bands for the product components ---------- */
@media (max-width: 1440px) {
  .oc-split__copy h2 { font-size: 56px !important; }
}
@media (max-width: 1068px) {
  .oc-hero--center { padding: 48px 0 24px !important; }
  .oc-hero--center .oc-hero__title { font-size: 64px !important; }
  .oc-hero--center .oc-deck { --dy: -8.5%; --dz: -120px; width: min(100%, 760px); margin-top: 12%; }
  .oc-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .oc-stats__list dd { font-size: 56px; }
  .oc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-tile--wide { grid-column: 1 / -1; }
  .oc-tile { min-height: 280px; padding: 34px 32px 36px; }
  .oc-tile h3 { font-size: 24px; }
  .oc-split, .oc-split--flip { grid-template-columns: 1fr; gap: 56px; }
  .oc-split--flip .oc-split__copy { order: 0; }
  .oc-split__copy h2 { font-size: 48px !important; }
  .oc-split__win, .oc-split--flip .oc-split__win { transform-origin: 50% 100%; transform: rotateX(8deg); }
  .oc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-strip { gap: 24px 18px; }
  .oc-buy__inner { grid-template-columns: minmax(0, 1fr); row-gap: 48px; justify-items: stretch; }
  .oc-buy__card { width: min(100%, 460px); }
  .oc-views__btn { padding: 10px 14px 12px; font-size: 13px; }
  .oc-views__btn i { left: 14px; right: 14px; }
}
@media (max-width: 734px) {
  .oc-hero--center .oc-hero__title { font-size: 48px !important; }
  .oc-hero--center .oc-deck { --dy: -10%; --dz: -90px; margin-top: 16%; }
  .oc-hero--center .oc-views { margin-top: 32px; }
  .oc-local__price { display: none; }
  .oc-stats__list dd { font-size: 44px; }
  .oc-stats__list dt { font-size: 15px; }
  .oc-bento, .oc-cards { grid-template-columns: 1fr; gap: 16px; }
  .oc-tile { min-height: 0; padding: 30px 26px 32px; border-radius: 22px; }
  .oc-tile h3 { padding-top: 40px; }
  .oc-tile--shot { padding-right: 26px; padding-bottom: 58%; }
  .oc-tile__shot { right: -8%; bottom: -8%; width: 88%; }
  .oc-window-stage { width: calc(100% - 20px); }
  .oc-window { border-radius: 12px; }
  .oc-split__copy h2 { font-size: 40px !important; }
  .oc-split__copy > p { font-size: 17px; }
  .oc-strip { grid-template-columns: 1fr; }
  .oc-versus__scroll { border-radius: 20px; }
  .oc-versus th, .oc-versus td { padding: 18px 18px; font-size: 15px; }
  .oc-versus thead th { padding: 24px 18px 16px; font-size: 18px; }
  .oc-card { padding: 28px 24px 30px; border-radius: 20px; }
  .oc-faq summary { padding: 22px 0; font-size: 18px; }
  .oc-faq__a p { padding-right: 8px; font-size: 16px; }
  .oc-buy .oc-buy__price { font-size: 52px; }
  .oc-buy .oc-buy__copy .oc-buy__lede { font-size: 17px; }
  .oc-buy__copy { align-items: center; text-align: center; }
  .oc-buy__copy .oc-eyebrow { justify-content: center; }
  .oc-buy__card { padding: 22px 20px 18px; border-radius: 22px; }
  .oc-views { flex-wrap: wrap; justify-content: center; }
  .oc-views__row { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .oc-views__row::-webkit-scrollbar { display: none; }
  /* when the views outrun the pill, they slide under the play button, which stays put */
  .oc-views__row .oc-swatches__play { position: sticky; right: 0; z-index: 1; flex: none; background: #232533; box-shadow: 0 0 0 4px #1b1c26, -20px 0 16px 0 #161822; }
}
@media (max-width: 480px) {
  .oc-hero--center .oc-hero__title { font-size: 40px !important; }
  .oc-stats__list { gap: 32px 20px; }
  .oc-stats__list dd { font-size: 38px; }
  .oc-local__actions .oc-local__cta { padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .oc-tile, .oc-card, .oc-tile__shot, .oc-strip img, .oc-split__win, .oc-faq summary i { transition: none !important; }
  .oc-tile__tag::before { animation: none !important; }
}

/* ---------- OptiLoad and friends: a live readout, a button that is a tile,
   the sites it pulls from, and the extension picker ---------- */
.oc-readout {
  position: absolute;
  left: 3%;
  top: 5.5%;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 8px 14px 9px;
  border-radius: 999px;
  background: rgba(10, 12, 20, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  color: var(--oc-dim);
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  transform: translateZ(30px);
}
.oc-readout b { color: var(--oc-ink); font: 600 18px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
button.oc-tile { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.oc-tile:focus-visible { outline-offset: 4px; }
.oc-tile__go { display: inline-flex; align-items: center; gap: 4px; margin-top: 16px; color: var(--accent-ink); font: 500 15px/1 var(--font-body); }
.oc-tile__go svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.oc-brands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.oc-brands li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--oc-card);
  box-shadow: inset 0 0 0 1px var(--oc-line);
  color: var(--oc-dim);
  font: 500 14px/1.2 var(--font-body);
  transition: box-shadow .3s, color .3s, transform .5s var(--oc-hover);
}
.oc-brands li:hover { color: var(--oc-ink); transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(var(--oc-rgb-3), .24); }
.oc-brands svg { width: 24px; height: 24px; flex: none; }
.oc-brands__more { margin: 34px 0 0; color: var(--oc-faint); font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-align: center; text-transform: uppercase; }

.oc-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; max-width: 520px; }
.oc-picks a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--oc-card);
  box-shadow: inset 0 0 0 1px var(--oc-line);
  color: var(--oc-ink);
  text-decoration: none;
  transition: box-shadow .3s, transform .5s var(--oc-hover);
}
.oc-picks a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(var(--oc-rgb-3), .3), 0 20px 40px -24px rgba(var(--oc-rgb), .6); }
.oc-picks svg { width: 30px; height: 30px; flex: none; }
.oc-picks b { display: block; font: 600 17px/1.2 var(--font-display); letter-spacing: -.02em; }
.oc-picks span span { display: block; margin-top: 4px; color: var(--oc-faint); font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.oc-sheet .modal__panel { border-color: rgba(var(--oc-rgb-3), .22); background: #0a0d17; }
.oc-sheet .modal__panel h2 span { background: var(--oc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.oc-sheet .oc-picks { max-width: none; margin-top: 26px; }

@media (max-width: 1068px) {
  .oc-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 734px) {
  .oc-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .oc-brands li { padding: 14px; font-size: 13px; }
  .oc-picks { grid-template-columns: 1fr; }
  .oc-readout { top: 4%; padding: 6px 10px 7px; font-size: 9px; }
  .oc-readout b { font-size: 14px; }
}

/* a recording with sound gets a volume pill beside its play button; it
   starts muted and the speaker shows it */
.oc-volume {
  --v: 0%;
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  right: 66px;
  bottom: 18px;
  z-index: 2;
  width: 136px;
  height: 40px;
  margin: 0;
  padding: 0 16px 0 38px;
  border-radius: 999px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f3f4fb' d='M2 6h2.4L8 3v10l-3.6-3H2z'/%3E%3Cpath fill='none' stroke='%23f3f4fb' stroke-width='1.3' stroke-linecap='round' d='M10.6 6.2 13.4 9.8M13.4 6.2l-2.8 3.6'/%3E%3C/svg%3E") 14px 50% / 15px no-repeat, rgba(22, 24, 32, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  cursor: pointer;
}
.oc-volume.is-on { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f3f4fb' d='M2 6h2.4L8 3v10l-3.6-3H2z'/%3E%3Cpath fill='none' stroke='%23f3f4fb' stroke-width='1.3' stroke-linecap='round' d='M10.3 5.6a3.4 3.4 0 0 1 0 4.8M12.3 3.6a6.2 6.2 0 0 1 0 8.8'/%3E%3C/svg%3E") 14px 50% / 15px no-repeat, rgba(22, 24, 32, .62); }
.oc-volume:hover { background-color: rgba(40, 43, 56, .8); }
.oc-volume::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgb(var(--oc-rgb-2)) var(--v), rgba(255, 255, 255, .26) var(--v)); }
.oc-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.oc-volume::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .26); }
.oc-volume::-moz-range-progress { height: 3px; border-radius: 3px; background: rgb(var(--oc-rgb-2)); }
.oc-volume::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.oc-volume:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 734px) { .oc-volume { width: 112px; } }

/* only the window in front of a deck shows its controls, and they sit
   above the glass so its sheen never washes them out */
.oc-deck__shot > :is(.oc-play, .oc-volume, .oc-readout) { translate: 0 0 2px; }
.oc-deck__card :is(.oc-play, .oc-volume, .oc-readout) { transition: opacity .35s ease, visibility 0s, background .2s, transform .3s var(--oc-hover); }
.oc-deck__card:not(.is-front) :is(.oc-play, .oc-volume, .oc-readout) { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }

/* a capture that isn't one rectangle (two panels, a menu hanging off its
   window) takes its shadow and its depth from its own outline */
.oc-deck__shot--free::after, .oc-deck__shot--free .oc-deck__shade { display: none; }
.oc-deck__shot--free img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .7)) brightness(calc(1 - var(--shade, 0))); }
.oc-motion .oc-deck__shot--free img { transition: filter .9s ease; }
img.oc-hl__win--free, img.oc-split__win--free, .hp-tile__media img.is-free { border-radius: 0; box-shadow: none; background: none; filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .7)); }

/* ---------- a terminal session, staged like any other window ---------- */
.oc-term {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #05070a;
  box-shadow: var(--oc-shadow);
  color: var(--oc-dim);
  font: 400 14px/1.85 var(--font-mono);
  text-align: left;
}
.oc-term__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: linear-gradient(180deg, #12161b, #0b0e12);
  color: var(--oc-faint);
  font-size: 11px;
  letter-spacing: .08em;
}
.oc-term__bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.oc-term__bar i:nth-child(2) { background: #febc2e; }
.oc-term__bar i:nth-child(3) { background: #28c840; }
.oc-term__bar span { flex: 1; margin-right: 52px; text-align: center; }
.oc-term__body { min-height: 260px; padding: 22px 26px 28px; }
.oc-term .p { color: rgb(var(--oc-rgb-2)); }
.oc-term .c { color: var(--oc-faint); }
.oc-term .ok { color: var(--accent-ink); }
.oc-term .caret { display: inline-block; width: 9px; height: 16px; background: rgb(var(--oc-rgb-2)); vertical-align: -3px; }
.oc-motion .oc-term .caret { animation: oc-caret 1.1s steps(1) infinite; }
@keyframes oc-caret { 50% { opacity: 0; } }
/* the session types itself out when the window arrives */
.oc-motion .oc-term__body > div { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .5s var(--oc-ease); }
.oc-motion .is-visible .oc-term__body > div { opacity: 1; transform: none; }
.oc-motion .is-visible .oc-term__body > div:nth-child(2) { transition-delay: .5s; }
.oc-motion .is-visible .oc-term__body > div:nth-child(3) { transition-delay: 1.1s; }
.oc-motion .is-visible .oc-term__body > div:nth-child(4) { transition-delay: 1.8s; }
.oc-motion .is-visible .oc-term__body > div:nth-child(5) { transition-delay: 2.3s; }
.oc-motion .is-visible .oc-term__body > div:nth-child(6) { transition-delay: 3.0s; }
.oc-motion .is-visible .oc-term__body > div:nth-child(7) { transition-delay: 3.5s; }
.oc-split__stage .oc-term { transform-origin: 0% 50%; transform: rotateY(calc(-9deg + var(--depth-y, 0deg))) rotateX(calc(3deg + var(--depth-x, 0deg))); }
.oc-motion .oc-split__stage .oc-term { transition: transform 1.5s var(--oc-glide), opacity 1s ease; }
.oc-motion .oc-split__stage:not(.is-visible) .oc-term { opacity: .2; transform: translate3d(16%, 0, -280px) rotateY(-36deg) rotateX(4deg); }
.oc-table-caption { margin: 0 0 16px; color: var(--oc-faint); font: 500 11px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.oc-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 34px; }
.oc-cta-row--center { justify-content: center; }
.oc-btn svg { width: 14px; height: 14px; margin-left: 8px; fill: none; stroke: currentColor; stroke-width: 2; }
.oc-final__icon--svg { display: block; border-radius: 26px; box-shadow: 0 18px 60px -28px var(--oc-icon-glow); }
.oc-versus--spaced { margin-top: 96px; }
@media (max-width: 1068px) {
  .oc-split__stage .oc-term { transform-origin: 50% 100%; transform: rotateX(8deg); }
}
@media (max-width: 734px) {
  .oc-term { font-size: 12px; }
  .oc-term__body { min-height: 0; padding: 18px 18px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .oc-term__body > div { opacity: 1 !important; transform: none !important; }
}

/* a centred hero with no windows: the world behind it is the picture */
.oc-hero--bare { min-height: calc(100svh - 116px); align-items: center; padding: 0 0 10svh !important; }
.oc-hero--bare .oc-hero__title { font-size: 96px !important; }
.oc-local__name .oc-x-icon { width: 28px; height: 28px; flex: none; }
.oc-final__icon--svg svg { display: block; width: 100%; height: 100%; }
@media (max-width: 1068px) { .oc-hero--bare .oc-hero__title { font-size: 72px !important; } }
@media (max-width: 734px) { .oc-hero--bare { min-height: 78svh; } .oc-hero--bare .oc-hero__title { font-size: 56px !important; } }
@media (max-width: 734px) {
  .oc-views, .oc-hero--center .oc-views { max-width: 100%; }
}
@media (max-width: 480px) {
  .oc-views__btn { padding: 9px 10px 11px; font-size: 12px; }
  .oc-views__btn i { left: 10px; right: 10px; }
  .oc-views .oc-swatches__play { width: 26px; height: 26px; }
}

/* ==========================================================================
   HOMEPAGE — apple.com/iphone's page, flown through the OptiTools galaxy:
   a title and a dock of every app over the atlas, a carousel of the latest,
   the lineup on a rail, why buy here, get to know the apps (tiles that open
   into sheets), the essentials, the side-by-side and the questions.
   ========================================================================== */
body[data-world="home"] {
  --oc-action: #0071e3;
  --oc-action-hover: #0065cc;
  --oc-action-rgb: 0, 113, 227;
  --oc-card: #0c0d18;
  --oc-rgb: 139, 122, 255;
  --oc-rgb-2: 167, 139, 250;
  --oc-rgb-3: 196, 181, 253;
  --oc-grad: linear-gradient(105deg, #f5f2ff 0%, #cabdff 45%, #7fa6ff 100%);
  --oc-grad-plus: linear-gradient(105deg, #f5f2ff 0%, #cabdff 55%, #7fa6ff 100%);
  --oc-grad-num: linear-gradient(95deg, #cabdff, #7fa6ff);
  --oc-grad-step: linear-gradient(90deg, #cabdff, #7fa6ff);
  --oc-icon-glow: #8b7aff99;
  --oc-rule: rgba(196, 181, 253, .2);
  --oc-theme-light: 139, 122, 255;
  --hp-new: #ffa35c;
}

/* ---------- hero: the title over the atlas, every app docked beneath ---------- */
.hp-hero {
  position: relative;
  min-height: max(740px, calc(100svh - 116px));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 56px;
  padding: 72px 0 40px !important;
  cursor: grab;
}
.hp-hero:active { cursor: grabbing; }
.hp-hero__head { position: relative; z-index: 4; width: var(--oc-content); margin-inline: auto; cursor: auto; }
.hp-hero__head > * { max-width: 760px; }
/* the title and its tagline, the way Apple sets "iPhone" over "Designed to be loved." */
.hp-hero__title { max-width: 9ch; font-size: 96px !important; line-height: .98 !important; letter-spacing: -.055em !important; text-shadow: 0 6px 40px rgba(5, 6, 11, .85); }
.hp-hero__title span { background: var(--oc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hp-hero__title span { display: block; width: max-content; max-width: 100vw; margin-top: 18px; font-size: 44px; line-height: 1.08; letter-spacing: -.04em; text-shadow: none; filter: drop-shadow(0 4px 22px rgba(5, 6, 11, .85)); }
.hp-hero__sub { max-width: 42ch; margin: 28px 0 0; color: var(--oc-dim); font: 500 21px/1.43 var(--font-body); text-shadow: 0 2px 20px rgba(5, 6, 11, .95), 0 0 3px rgba(5, 6, 11, .7); }
.hp-hero__actions { display: flex; align-items: center; gap: 26px; margin-top: 36px; }
.hp-hero__actions .oc-link { text-shadow: 0 2px 16px rgba(5, 6, 11, .9); }
.oc-booting .hp-hero [data-hero-reveal], .oc-booting .hp-hero [data-hero-title] { opacity: 0; transform: translateY(40px); }
.oc-motion .hp-hero [data-hero-reveal], .oc-motion .hp-hero [data-hero-title] { transition: opacity .9s ease-in, transform 1.1s var(--oc-ease); }
.oc-motion .hp-hero [data-hero-reveal] { transition-delay: .25s; }
.oc-booting .hp-hero.is-title-in [data-hero-title], .oc-booting .hp-hero.is-sub-in [data-hero-reveal] { opacity: 1; transform: none; }

.hp-chapternav { position: relative; z-index: 4; width: var(--oc-content); margin-inline: auto; cursor: auto; }
.hp-chapternav ul {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 auto;
  padding: 10px;
  list-style: none;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 28px;
  background: rgba(10, 12, 22, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  scrollbar-width: none;
}
.hp-chapternav ul::-webkit-scrollbar { display: none; }
.hp-chapternav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 96px;
  padding: 12px 10px 11px;
  border-radius: 20px;
  color: var(--oc-dim);
  font: 500 12.5px/1.2 var(--font-body);
  letter-spacing: -.005em;
  text-decoration: none;
  transition: background .35s var(--oc-ease), color .25s;
}
.hp-chapternav a:hover, .hp-chapternav a:focus-visible { background: rgba(255, 255, 255, .07); color: var(--oc-ink); }
.hp-chapternav img, .hp-chapternav .hp-glyph { width: 50px; height: 50px; object-fit: contain; transition: transform .6s var(--oc-hover); }
.hp-chapternav img.is-padded { scale: 1.28; }
.hp-chapternav a:hover img, .hp-chapternav a:hover .hp-glyph { transform: translateY(-3px); }
.hp-chapternav .hp-glyph { display: grid; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, .07); color: var(--oc-ink); }
.hp-chapternav .hp-glyph svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hp-chapternav b { display: block; margin-top: -4px; color: var(--hp-new); font: 500 10.5px/1 var(--font-body); }
.oc-motion .hp-chapternav li { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .9s var(--oc-ease); transition-delay: calc(.9s + var(--i, 0) * 70ms); }
.oc-motion .hp-hero.is-title-in .hp-chapternav li, html:not(.oc-booting) .hp-chapternav li { opacity: 1; transform: none; }

/* ---------- a section head in Apple's gallery form: title left, link right ---------- */
.hp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.hp-head h2 { font-size: 56px !important; line-height: 1.07 !important; filter: drop-shadow(0 4px 22px rgba(5, 6, 11, .8)); }
.hp-head a { flex: none; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; color: var(--accent-ink); font: 500 15px/1 var(--font-body); text-decoration: none; }
.hp-head a svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hp-head a:hover { text-decoration: underline; text-underline-offset: 4px; }
.oc-hl__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.oc-hl__win--video { overflow: hidden; background: #05060b; }
.oc-hl__win--video video { display: block; width: 100%; height: auto; }
.oc-hl__win--tall { width: auto; min-width: 0; height: 86%; aspect-ratio: 826 / 1120; left: 20%; }
.oc-hl__win--tall video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- a gallery rail with Apple's paddles ---------- */
.hp-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--oc-gutter);
  padding: 6px var(--oc-gutter) 14px;
  scrollbar-width: none;
}
.hp-rail::-webkit-scrollbar { display: none; }
.hp-rail > * { flex: none; scroll-snap-align: start; }
.hp-rail:focus-visible { outline-offset: -3px; }
.hp-paddles { display: flex; justify-content: flex-end; gap: 12px; width: var(--oc-content); margin: 22px auto 0; }
.hp-paddles button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--oc-ink);
  transition: background .25s, opacity .25s;
}
.hp-paddles button:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
.hp-paddles button:disabled { opacity: .32; cursor: default; }
.hp-paddles svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html:not(.oc-js) .hp-paddles { display: none; }

/* ---------- the lineup: one card per app ---------- */
.hp-card { width: clamp(280px, 23.5vw, 360px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.hp-card__tile {
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 400;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(var(--c), .42), rgba(var(--c), .1) 52%, transparent 78%),
    radial-gradient(120% 90% at 50% 120%, rgba(var(--c), .22), transparent 60%),
    linear-gradient(180deg, #11131f, #07080e);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  text-decoration: none;
}
.hp-card__tile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(1px 1px at 20% 30%, #fff9, transparent), radial-gradient(1px 1px at 70% 18%, #fff7, transparent), radial-gradient(1.2px 1.2px at 84% 64%, #fff8, transparent), radial-gradient(1px 1px at 32% 78%, #fff6, transparent), radial-gradient(1px 1px at 58% 88%, #fff5, transparent), radial-gradient(1.4px 1.4px at 12% 60%, #fff7, transparent);
  opacity: .8;
}
.hp-card__tile img, .hp-card__tile .hp-card__art {
  position: relative;
  width: 50%;
  height: auto;
  filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .6)) drop-shadow(0 0 40px rgba(var(--c), .35));
  transition: transform 1.1s var(--oc-glide), filter .6s;
}
.hp-card__tile img.is-padded { scale: 1.26; }
.hp-card:hover .hp-card__tile img, .hp-card:hover .hp-card__tile .hp-card__art { transform: translateY(-10px) scale(1.04) rotate(-2deg); filter: drop-shadow(0 44px 54px rgba(0, 0, 0, .65)) drop-shadow(0 0 60px rgba(var(--c), .55)); }
.hp-card__badge { min-height: 15px; margin: 26px 0 0; color: var(--hp-new); font: 500 12px/1.2 var(--font-body); }
.hp-card__name { margin: 6px 0 0; color: var(--oc-ink); font: 700 28px/1.1 var(--font-display) !important; letter-spacing: -.035em !important; }
.hp-card__name span { color: rgb(var(--c)); }
.hp-card__role { margin: 10px 0 0; color: var(--oc-faint); font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.hp-card__desc { max-width: 30ch; margin: 14px auto 0; color: var(--oc-dim); font: 400 15px/1.47 var(--font-body); }
.hp-card__price { margin: 18px 0 0; color: var(--oc-ink); font: 700 30px/1 var(--font-display); letter-spacing: -.03em; }
.hp-card__price small { display: block; margin-top: 8px; color: var(--oc-faint); font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.hp-card__price.is-text { font-size: 21px; }
.hp-card__ctas { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 24px; }
.hp-card__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 26px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgb(var(--c));
  color: var(--oc-ink);
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .25s, color .25s, transform .4s var(--oc-hover), box-shadow .3s;
}
.hp-card__buy:hover { background: rgb(var(--c)); color: #05060b; transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgb(var(--c)), 0 16px 34px -16px rgba(var(--c), .9); }

/* ---------- why buy here ---------- */
.hp-why {
  position: relative;
  width: clamp(290px, 25vw, 380px);
  min-height: 460px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 32px 30px 30px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(20, 22, 36, .86), rgba(11, 12, 21, .9));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.hp-why__eyebrow { margin: 0 0 12px; color: var(--accent-ink); font: 600 12px/1.2 var(--font-body); letter-spacing: .01em; }
.hp-why h3 { font-size: 28px; line-height: 1.14; letter-spacing: -.03em; }
.hp-why p { margin: 14px 0 0; color: var(--oc-dim); font: 400 15px/1.5 var(--font-body); }
/* the foot of a card: the way in (a document, an app, a badge) sits where art would */
.hp-why__foot { position: relative; margin-top: auto; padding-top: 34px; display: flex; flex-direction: column; align-items: center; }
.hp-why__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-bottom: 6px;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
  color: var(--oc-ink);
  font: 500 15px/1 var(--font-body);
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background .25s, color .25s, box-shadow .25s, transform .3s var(--oc-hover);
}
.hp-why__btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hp-why__btn:hover { background: #f5f5f7; color: #05060b; box-shadow: 0 16px 34px -16px rgba(255, 255, 255, .45); transform: translateY(-1px); }
.hp-why__btn:focus-visible, .hp-why__app:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.hp-why__badge { width: 112px; height: 112px; filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .6)) drop-shadow(0 0 32px rgba(0, 156, 222, .28)); }
.hp-why__app { display: flex; flex-direction: column; align-items: center; gap: 14px; border-radius: 26px; color: var(--accent-ink); font: 500 15px/1 var(--font-body); text-decoration: none; }
.hp-why__app .oc-x-icon { width: 112px; height: 112px; filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .6)) drop-shadow(0 0 32px rgba(105, 230, 188, .3)); transition: transform 1s var(--oc-glide), filter .6s; }
.hp-why__app span { display: inline-flex; align-items: center; gap: 4px; }
.hp-why__app span svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hp-why__app:hover span { text-decoration: underline; text-underline-offset: 4px; }
.hp-why__app:hover .oc-x-icon { transform: translateY(-8px) scale(1.04) rotate(-2deg); filter: drop-shadow(0 30px 36px rgba(0, 0, 0, .65)) drop-shadow(0 0 44px rgba(105, 230, 188, .45)); }
.hp-why__flag { width: 150px; height: auto; margin-bottom: -6px; overflow: visible; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55)); }
.hp-why__icons { position: relative; margin-top: auto; padding-top: 30px; display: flex; justify-content: center; }
.hp-why__icons img { width: 64px; height: 64px; margin: 0 -8px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .6)); }
.hp-why__icons img.is-padded { scale: 1.26; }

/* ---------- get to know: tall tiles that open into sheets ---------- */
.hp-tile {
  position: relative;
  width: clamp(290px, 26vw, 400px);
  aspect-ratio: 400 / 680;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  padding: 0;
  border-radius: 28px;
  background: #07080e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  color: var(--oc-ink);
  text-align: left;
  cursor: pointer;
}
.hp-tile__copy { position: relative; z-index: 2; padding: 30px 30px 0; }
.hp-tile__copy span { display: block; margin-bottom: 10px; color: rgb(var(--c, var(--oc-rgb-3))); font: 600 12px/1.2 var(--font-body); }
.hp-tile__copy strong { display: block; max-width: 15ch; font: 700 28px/1.12 var(--font-display); letter-spacing: -.03em; }
.hp-tile__media { position: absolute; inset: 0; }
.hp-tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #07080e 0%, rgba(7, 8, 14, .82) 26%, rgba(7, 8, 14, 0) 52%); }
.hp-tile__media img { position: absolute; left: 12%; top: 34%; width: 150%; max-width: none; height: auto; border-radius: var(--rad, 12px); box-shadow: 0 30px 70px -20px #000, 0 0 0 1px rgba(255, 255, 255, .1); transform-origin: 0 0; transition: transform 1.2s var(--oc-glide); }
.hp-tile:hover .hp-tile__media img { transform: translate3d(-3%, -2%, 0) scale(1.02); }
.hp-tile__media--icon { display: grid; place-items: center; background: radial-gradient(70% 55% at 50% 64%, rgba(var(--c), .45), transparent 70%); }
.hp-tile__media--icon img { position: relative; left: auto; top: 10%; width: 54%; border-radius: 0; box-shadow: none; filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .6)); }
.hp-tile__plus {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(245, 246, 251, .92);
  color: #05060b;
  transition: transform .4s var(--oc-hover), background .25s;
}
.hp-tile__plus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.hp-tile:hover .hp-tile__plus { transform: scale(1.08); background: #fff; }
.hp-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* the sheet a tile opens: Apple's modal, in the dark */
.hp-sheet .modal__panel {
  width: min(1060px, 100%);
  max-height: calc(100svh - 44px);
  padding: 72px 76px 64px;
  border: 0;
  border-radius: 30px;
  background: #0a0b14;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 60px 160px rgba(0, 0, 0, .8);
}
.hp-sheet .modal__close { top: 20px; right: 20px; border: 0; background: rgba(255, 255, 255, .1); color: var(--oc-ink); }
.hp-sheet .modal__close:hover { background: rgba(255, 255, 255, .18); color: var(--oc-ink); }
.hp-sheet__eyebrow { margin: 0 0 14px; color: rgb(var(--c, var(--oc-rgb-3))); font: 600 14px/1.2 var(--font-body); }
.hp-sheet h2 { max-width: 20ch; margin: 0 0 20px; font: 700 56px/1.06 var(--font-display) !important; letter-spacing: -.045em !important; }
.hp-sheet h2 span { background: var(--oc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hp-sheet__lede { max-width: 52ch; margin: 0 0 40px; color: var(--oc-dim); font: 500 19px/1.5 var(--font-body); }
.hp-sheet__media { position: relative; overflow: hidden; margin: 0 0 40px; border-radius: 18px; background: #05060b; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.hp-sheet__media video, .hp-sheet__media img { display: block; width: 100%; height: auto; }
/* a cut-out window stands in the sheet on its own corners, no box around it */
.hp-sheet__media--cut { overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.hp-sheet__media--cut img { border-radius: var(--rad); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -30px rgba(0, 0, 0, .9); }
.hp-sheet .oc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hp-sheet .oc-card { background: rgba(255, 255, 255, .035); }
.hp-sheet__more { margin-top: 36px; }

/* ---------- essentials ---------- */
.hp-ess { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hp-ess__card {
  position: relative;
  min-height: 660px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 50px 44px 0;
  border-radius: 28px;
  background: radial-gradient(100% 70% at 50% 100%, rgba(var(--c), .2), transparent 62%), var(--oc-card);
  box-shadow: inset 0 0 0 1px var(--oc-line);
  text-align: center;
}
.hp-ess__card h3 { font-size: 32px; line-height: 1.12; letter-spacing: -.035em; }
.hp-ess__card > p { max-width: 42ch; margin: 14px auto 0; color: var(--oc-dim); font: 400 17px/1.47 var(--font-body); }
.hp-ess__card .oc-link { margin-top: 18px; }
.hp-ess__art { width: 100%; margin-top: auto; padding-top: 44px; }
.hp-ess__art .oc-term { transform: perspective(1600px) rotateX(12deg); transform-origin: 50% 100%; border-radius: 16px 16px 0 0; }
.hp-ess__art .oc-term__body { min-height: 0; }
.hp-ess__art .oc-picks { max-width: none; margin: 0 auto 44px; }
.hp-ess__phone { width: min(340px, 78%); margin: 0 auto; border-radius: 28px 28px 0 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 -20px 60px -20px rgba(var(--c), .5); }
.hp-ess__phone video { display: block; width: 100%; height: auto; }

@media (max-width: 1068px) {
  .hp-hero__title { font-size: 76px !important; }
  .hp-hero__title span { font-size: 36px; }
  .hp-head h2 { font-size: 44px !important; }
  .hp-ess { grid-template-columns: 1fr; }
  .hp-sheet .modal__panel { padding: 64px 44px 48px; }
  .hp-sheet h2 { font-size: 44px !important; }
}
@media (max-width: 734px) {
  .hp-hero { min-height: 0; gap: 40px; padding: 48px 0 28px !important; }
  .hp-hero__title { font-size: 56px !important; }
  .hp-hero__title span { width: auto; font-size: 28px; }
  .hp-hero__sub { font-size: 17px; }
  .hp-chapternav ul { justify-content: flex-start; border-radius: 22px; }
  .hp-chapternav a { min-width: 80px; font-size: 11.5px; }
  .hp-chapternav img, .hp-chapternav .hp-glyph { width: 42px; height: 42px; }
  .hp-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 32px; }
  .hp-head h2 { font-size: 36px !important; }
  .hp-card { width: 78vw; }
  .hp-why { width: 80vw; min-height: 420px; }
  .hp-tile { width: 78vw; }
  .hp-ess__card { min-height: 520px; padding: 40px 24px 0; }
  .hp-sheet .modal__panel { padding: 64px 22px 32px; border-radius: 22px; }
  .hp-sheet h2 { font-size: 34px !important; }
  .hp-sheet .oc-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-card__tile img, .hp-tile__media img, .hp-chapternav img { transition: none !important; }
  .hp-chapternav li { opacity: 1 !important; transform: none !important; }
}

/* OptiCord's icon is a square render: it takes the macOS icon corner */
img.is-square { border-radius: 22.5%; }