/* Raven launch site — layout + components for /, /developer, /enterprise.
   Load order: /assets/fonts.css → raven-brand.css (tokens + typography) → launch.css.
   Ported from raven-website-prototype main.css (branding block lives in raven-brand.css).
*/

.section {
  overflow-x: hidden;
}

/* ============================================
   SHARED COMPONENTS (branding: change here to update all)
   ============================================ */

/* Buttons – base .btn + vars above; change :root --glass-btn-* to style all glass buttons */
.btn {
  cursor: pointer;
  font-family: 'Libre Franklin', sans-serif;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn--primary {
  background: var(--glass-btn-bg) !important;
  color: var(--white) !important;
  border: 1px solid var(--glass-btn-border) !important;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.btn--primary:hover {
  background: var(--glass-btn-bg-hover) !important;
  border-color: var(--glass-btn-border-hover) !important;
  color: var(--white) !important;
}

.btn--secondary {
  background: var(--glass-btn-bg);
  color: var(--moon-silver);
  border: 1px solid var(--glass-btn-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}

.btn--secondary:hover {
  background: var(--glass-btn-bg-hover);
  border-color: var(--glass-btn-border-hover);
  color: var(--white);
}

.btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Icons – size/color for SVG wrappers */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.icon svg {
  width: 1em;
  height: 1em;
}

/* Cards – feature cards; .card__img, .card__title, .card__text */
.card__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Section layout – .section__title, .section__subtitle, .section__content, .section__bg-video, .section__overlay */
.section__content {
  position: relative;
  z-index: 2;
}

.section--hero {
  padding-top: 100px;
  overflow: hidden;
}

/* Try Raven Prism section: full-screen cta.jpg + two cards */
.section--reserve.try-section {
  position: relative;
  background-color: var(--umbra-black);
  overflow: hidden;
}

.try-section__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.try-section__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1;
}

.try-section .section__content {
  z-index: 2;
}

/* Developer CTA: the image floats — edges feather into the black page on every side (no hard rectangle),
   a soft vignette keeps the headline readable, and a faint violet glow sits behind the buttons */
.section--reserve.try-section.try-section--vignette {
  background-color: var(--pure-black);
}

.try-section--vignette .try-section__bg {
  inset: 4% 3%;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
}

/* Phone: the section hugs its content instead of filling the screen, so the landscape photo (cover)
   shows far more of the scene and there's no empty black band before the footer */
@media (max-width: 767.98px) {
  .section--reserve.try-section.try-section--vignette {
    min-height: 0 !important;
    padding-block: 6.5rem !important;
  }

  .try-section--vignette .try-section__bg {
    background-position: 32% 50%;
  }

  /* Same compact, side-by-side buttons as the developer hero */
  .try-section--vignette .d-flex {
    flex-wrap: nowrap !important;
    gap: 0.6rem !important;
  }

  .try-section--vignette .btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem;
  }
}

.try-section--vignette .try-section__bg::after {
  background:
    radial-gradient(ellipse 55% 40% at 50% 68%, rgba(136, 102, 222, 0.24), transparent 70%),
    radial-gradient(ellipse 50% 50% at 50% 48%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.6) 55%, #000 100%);
}

.try-section__subline {
  max-width: 36em;
}

.try-card.feature-card {
  transform: none;
  height: 100%;
}

.try-card .try-card__title {
  font-size: 1.5rem;
}

.try-card .try-card__subtitle {
  font-size: 1rem;
  opacity: 0.9;
}

.try-card .try-card__subline {
  font-size: 0.875rem;
  opacity: 0.85;
  transition: opacity 0.4s ease;
}

.try-card .try-card__subline--reveal {
  opacity: 0;
}

.try-card .try-card__subline--reveal.is-visible {
  opacity: 0.85;
}

.try-card .try-card__footer {
  opacity: 0.8;
}

/* Form inputs */
.form__input.email-input {
  padding-right: 60px;
  border-radius: 15px;
}

/* ============================================
   NAVBAR
   ============================================ */

.navbar {
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  box-shadow: var(--glass-shadow);
}

.floating-navbar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  border-radius: 20px;
  padding: 0.75rem 2rem;
  z-index: 1030;
  background: rgba(13, 13, 13, 0.55) !important;
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* Navbar divider before Reserve: vertical hairline in the bar, horizontal rule in the phone menu */
.floating-navbar .nav-divider {
  align-self: center;
  width: 1px;
  height: 1.1rem;
  margin: 0 0.6rem;
  background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 991.98px) {
  .floating-navbar .nav-divider {
    align-self: stretch;
    width: auto;
    height: 1px;
    margin: 0.5rem 0;
  }
}

@media (max-width: 991px) {
  .floating-navbar {
    width: 95%;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
  }
}

@media (max-width: 768px) {
  .floating-navbar {
    top: 15px;
    width: calc(100% - 30px);
    border-radius: 10px;
    padding: 0.5rem 1rem;
  }
  
  .navbar-brand {
    padding: 0.4rem 1rem;
  }

  /* .floating-navbar prefix: beats the general .navbar-brand img (30px) rule further down. The image has a little
     built-in padding, so 25.5px gives ~19px of visible mark, matching the menu lines. */
  .floating-navbar .navbar-brand img {
    height: 25.5px;
  }

  /* Phones: logo and menu button sit closer to the bar's edges (no container / brand side padding), and the menu
     button has no border — just the three lines. Keyboard focus still gets a visible ring. */
  .floating-navbar {
    padding: 0.5rem 1.4rem;
  }

  .floating-navbar > .container {
    padding-left: 0;
    padding-right: 0;
  }

  .floating-navbar .navbar-brand {
    padding-left: 0.25rem;
    padding-right: 0;
  }

  .floating-navbar .navbar-toggler {
    padding: 0.25rem;
    border: 0;
    box-shadow: none;
  }

  .floating-navbar .navbar-toggler:focus {
    box-shadow: none;
  }

  /* Three lines drawn edge to edge (no empty band above / below like Bootstrap's icon), sized so the lines match
     the logo's mark beside it in height (width: between a classic menu icon and the logo's) */
  .floating-navbar .navbar-toggler .navbar-toggler-icon {
    width: 31.5px;
    height: 19.5px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.5 22'%3e%3cpath stroke='rgba%28218, 221, 229, 1%29' stroke-linecap='round' stroke-width='2' d='M1 1h33.5M1 11h33.5M1 21h33.5'/%3e%3c/svg%3e");
    background-size: 100% 100%;
  }

  .floating-navbar .navbar-toggler:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
    border-radius: 6px;
  }
}

.navbar-brand {
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: var(--white) !important;
}

.navbar-brand img {
  height: 30px;
  width: auto;
}

.floating-navbar .navbar-toggler {
  border-color: var(--moon-silver);
}

.floating-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28218, 221, 229, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-link {
  color: var(--moon-silver) !important;
  font-size: 18px;
  font-weight: 400;
  position: relative;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: var(--white) !important;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--moon-silver);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 80%;
}

/* "Reserve" (navbar, and the Reserve buttons on home) is set in the rose-gold shimmer (.rose-gold-text): the one
   action that leads to the hardware itself */
.nav-link--reserve::after {
  background: #e7b9a4;
}

/* Rose-gold rim with a band of light slowly travelling round it: the Reserve buttons on home (white label), and on
   the Reserve page the selected edition and the open batch. The glass rim is a gradient masked to a 1px ring
   (liquid-glass.css / .lg::before); these selectors outrank it. Same motion as the invite card's edge. */
@property --rose-rim-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.btn.btn--rose-rim::before,
.rsv-edition:has(.rsv-edition__input:checked)::before,
.rsv-timeline__item.is-active .rsv-timeline__card::before {
  background: conic-gradient(from var(--rose-rim-angle),
    rgba(231, 185, 164, 0.25),
    #f6d3c2 12%,
    rgba(231, 185, 164, 0.25) 30%,
    rgba(255, 241, 234, 0.9) 50%,
    rgba(231, 185, 164, 0.25) 70%,
    #e2a48c 88%,
    rgba(231, 185, 164, 0.25));
  animation: roseRimTurn 14s linear infinite;
}

@keyframes roseRimTurn {
  to { --rose-rim-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .btn.btn--rose-rim::before,
  .rsv-edition:has(.rsv-edition__input:checked)::before,
  .rsv-timeline__item.is-active .rsv-timeline__card::before {
    animation: none;
  }
}

/* While a Reserve button is on screen (common.js), the navbar link goes silver like the others: an opaque text
   colour over the clipped gradient, so the change crossfades */
.nav-link--reserve .rose-gold-text {
  transition: color 0.6s ease;
}

.nav-link--reserve.is-quiet .rose-gold-text {
  color: var(--moon-silver);
}

.nav-link--reserve.is-quiet:hover .rose-gold-text {
  color: var(--white);
}

.nav-link--reserve.is-quiet::after {
  background: var(--moon-silver);
}

/* The rose-gold navbar Reserve is a home-page moment: on every other page it's plain white */
body:not([data-page="home"]) .nav-link--reserve .rose-gold-text {
  color: var(--white);
}

body:not([data-page="home"]) .nav-link--reserve::after {
  background: var(--white);
}

/* ============================================
   PRISM BAR (white glass, hidden when not scrolling; subtle moving rainbow)
   ============================================ */

.prism-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  --prism-intensity: 0;
  --prism-offset: 0;
  /* Change this one variable to scale bar opacity (base + gradient) */
  --prism-bar-opacity: 1.5;
  /* Hidden when not scrolling; stretches with scroll speed */
  height: calc(var(--prism-intensity) * 160px);
  opacity: var(--prism-intensity);
  z-index: 1025;
  pointer-events: none;
  /* Base and gradient use --prism-bar-opacity so you can tweak in one place */
  background-color: rgba(235, 228, 255, calc(0.04 * var(--prism-bar-opacity)));
  /* Rainbow moves with scroll – opacity scaled by --prism-bar-opacity */
  background-image: linear-gradient(
    90deg,
    rgba(180, 120, 255, calc(0.08 * var(--prism-bar-opacity))),
    rgba(255, 100, 130, calc(0.06 * var(--prism-bar-opacity))),
    rgba(255, 180, 80, calc(0.06 * var(--prism-bar-opacity))),
    rgba(140, 100, 255, calc(0.1 * var(--prism-bar-opacity))),
    rgba(160, 90, 255, calc(0.12 * var(--prism-bar-opacity))),
    rgba(200, 120, 255, calc(0.12 * var(--prism-bar-opacity))),
    rgba(180, 100, 255, calc(0.1 * var(--prism-bar-opacity))),
    rgba(180, 120, 255, calc(0.08 * var(--prism-bar-opacity)))
  );
  background-size: 200% 100%;
  background-position: calc(var(--prism-offset) * 100%) 0;
  backdrop-filter: blur(var(--glass-blur-strong)) hue-rotate(calc(var(--prism-offset) * 80deg)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) hue-rotate(calc(var(--prism-offset) * 80deg)) saturate(1.2);
  border-top: 1px solid rgba(255, 255, 255, calc(0.12 * var(--prism-bar-opacity)));
  box-shadow: 0 -2px 12px rgba(0, 0, 0, calc(0.08 * var(--prism-bar-opacity))), 0 0 0 1px rgba(255, 255, 255, calc(0.06 * var(--prism-bar-opacity))) inset;
  transition: height 0.08s ease-out, opacity 0.15s ease-out, background-position 0.12s ease-out;
  /* Gradient boundary: 0% opacity at top, 100% at bottom (no solid edge) */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 100%);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  border-top: 1px solid var(--glass-border);
  padding: 2.5rem 0;
  margin-top: 0;
  color: var(--moon-silver);
}

.site-footer__top {
  margin-bottom: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin-bottom: 0.75rem;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--moon-silver);
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.2s ease;
}

.site-footer__link:hover {
  color: var(--white);
}

.site-footer__icon {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 0.9;
}

.site-footer__icon--svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.site-footer__icon--svg svg {
  width: 24px;
  height: 24px;
  display: block;
  color: inherit;
}

.site-footer__link:hover .site-footer__icon,
.site-footer__link:hover .site-footer__icon--svg svg {
  opacity: 1;
}

.site-footer__link--icon-only {
  padding: 0.35rem;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

.site-footer__made-in-line {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.9;
}

.site-footer__made-in-btn {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  opacity: inherit;
  cursor: pointer;
}

/* "Made in USA" popup: a narrow card (two sentences don't need the large modal width) */
#madeInUsaModal .modal-dialog {
  max-width: min(460px, calc(100% - 2rem));
}

/* Even padding round the card, and the close button centred on the video's top-right corner (--pad: the body
   padding, so the video's corner sits at --pad from the card's top and right edges) */
#madeInUsaModal .modal-content {
  --pad: 2.25rem;
  --close: 48px;
}

#madeInUsaModal .modal-body.opt-out-modal__body {
  padding: var(--pad);
}

#madeInUsaModal .modal-header {
  top: calc(var(--pad) - var(--close) / 2);
  right: calc(var(--pad) - var(--close) / 2);
}

/* The clip fills its frame at its own shape: full height (printer base included), cropped only at the sides so the
   printer is centred (~1.5:1; no empty band from the image box's min-height) */
#madeInUsaModal .opt-out-modal__image-wrap {
  min-height: 0;
}

#madeInUsaModal .opt-out-modal__image {
  display: block;
  height: auto;
  max-height: none;
  aspect-ratio: 1640 / 960; /* common/made_in_usa_v3.jpg, as cropped */
  object-fit: cover;
}

@media (max-width: 576px) {
  #madeInUsaModal .modal-content {
    --pad: 1.75rem;
    --close: 44px;
  }
}

/* "Made in USA" popup: the heading and text rise into place with the printer's build plate in the clip */
#madeInUsaModal .opt-out-modal__title,
#madeInUsaModal .opt-out-modal__body-text {
  opacity: 0;
  transform: translateY(32px);
}

/* Same length as the clip (made_in_usa_print_slow_full.mp4, 1.27s) and a constant speed, like the plate rising: heading
   and text move together as one block; the fade completes early so it's readable for most of the rise */
#madeInUsaModal.is-revealed .opt-out-modal__title,
#madeInUsaModal.is-revealed .opt-out-modal__body-text {
  animation: madeInRise 1.27s linear both;
}

@keyframes madeInRise {
  0% { opacity: 0; transform: translateY(32px); }
  40% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #madeInUsaModal .opt-out-modal__title,
  #madeInUsaModal .opt-out-modal__body-text {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

.site-footer__made-in-btn:hover {
  color: inherit;
  text-decoration: underline;
  opacity: 1;
}

.site-footer__made-in-line--preview {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.5rem;
}

.site-footer__made-in-line--preview .site-footer__made-in-sep {
  opacity: 0.65;
  user-select: none;
}

.site-footer__learn-more-about {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  opacity: inherit;
}

.site-footer__learn-more-about:hover {
  color: inherit;
  text-decoration: underline;
  opacity: 1;
}

.site-footer__legal {
  padding-top: 1.5rem;
  border-top: 1px solid var(--glass-border);
  text-align: center;
}

.site-footer__legal-sentence {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.85;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .site-footer {
    padding: 1.75rem 0;
  }

  .site-footer__legal-sentence {
    font-size: 0.8rem;
  }
}

/* Legacy button names (alias to shared) – use .btn--primary / .btn--secondary for new code */
.btn-indigo-violet,
.btn-purple {
  background-color: var(--indigo-violet);
  color: var(--white);
  border: none;
}

.btn-indigo-violet:hover,
.btn-purple:hover {
  background-color: var(--indigo-violet-hover);
  color: var(--white);
}

.btn-gray {
  background-color: var(--moon-silver);
  color: var(--umbra-black);
  border: none;
}

.btn-gray:hover {
  background-color: var(--moon-silver-hover);
  color: var(--umbra-black);
}

/* ============================================
   SECTIONS – Hero
   ============================================ */

.hero-section {
  background-color: var(--pure-black);
  position: relative;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Hero copy floats at the bottom on every screen size (align-items-end in the markup) */
#section1.hero-section {
  padding-bottom: calc(clamp(2.5rem, 8vh, 6rem) + env(safe-area-inset-bottom, 0px));
}

/* Phone: even rhythm — title → subtitle 12px, subtitle → buttons 24px, equal-width buttons 12px apart */
@media (max-width: 767.98px) {
  /* Crop split: 45% of the trimmed width comes off the left, 55% off the right */
  #section1 .hero-video {
    object-position: 45% 50%;
  }


  #section1 .section__title {
    margin-bottom: 0.75rem !important;
  }

  #section1 .section__subtitle {
    margin-bottom: 1.5rem !important;
  }

  /* Compact, side by side — same as the developer hero (sizes from the global phone .btn-lg rule) */
  #section1 .hero-section__ctas {
    flex-wrap: nowrap !important;
    gap: 0.6rem !important;
  }

  #section1 .hero-section__ctas .btn {
    white-space: nowrap;
  }
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--glass-overlay);
  z-index: 1;
}

.hero-section--preview {
  overflow: hidden;
  --hero-exit: 0;
}

/* Preview hero: video starts full-bleed; shrinks toward “card” frame as you scroll out (inverse of index §4) */
.hero-section--preview .hero-video {
  transform: scale(calc(1 - 0.4 * var(--hero-exit)));
  transform-origin: center center;
  border-radius: calc(24px * var(--hero-exit));
  border: 1px solid rgba(255, 255, 255, calc(0.14 * var(--hero-exit)));
  box-shadow: 0 calc(20px * var(--hero-exit)) calc(50px * var(--hero-exit)) rgba(0, 0, 0, calc(0.4 * var(--hero-exit)));
  transition: transform 0.1s linear, border-radius 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  will-change: transform;
}

/* Preview hero: left-aligned deck + tagline over video */
.hero-section--preview .preview-hero-head {
  text-align: left;
  max-width: 100%;
  margin-left: clamp(0.5rem, 2vw, 1.25rem);
  margin-bottom: clamp(0.75rem, 2.5vh, 1.5rem);
}

.hero-section--preview .preview-hero-deck {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(0.9rem, 2.2vw, 1.15rem);
  line-height: 1.25;
  opacity: 0.92;
}

.hero-section--preview .preview-hero-tagline {
  white-space: nowrap;
  font-size: clamp(1.05rem, 1.2vw + 1.02rem, 3.85rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-align: left;
}

@media (max-width: 575.98px) {
  /* Same left inset as hero tagline/deck: was fluid px-3 + .preview-hero-head margin — fold margin into padding and reuse for about */
  .hero-section--preview .preview-hero-head {
    margin-left: 0;
    margin-bottom: clamp(0.25rem, 0.55vh, 0.45rem);
  }

  .hero-section--preview .section__content,
  .preview-about-section > .container {
    --preview-phone-inline: calc(1rem + clamp(0.5rem, 2vw, 1.25rem));
  }

  .hero-section--preview .section__content {
    padding-bottom: 0.75rem !important;
    padding-left: var(--preview-phone-inline) !important;
    padding-right: 1rem !important;
  }

  /* No extra .row / .col gutter — inset comes only from padding (matches .preview-about-section) */
  .hero-section--preview .section__content > .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .hero-section--preview .section__content > .row > [class*='col-'] {
    padding-left: 0;
    padding-right: 0;
  }

  .preview-about-section > .container {
    padding-left: var(--preview-phone-inline) !important;
    padding-right: 1rem !important;
  }

  .hero-section--preview .preview-hero-tagline {
    white-space: normal;
    font-size: clamp(1.28rem, 3.5vw + 0.985rem, 2rem);
  }

  .hero-section--preview .preview-hero-deck {
    font-size: clamp(0.985rem, 2.35vw + 0.82rem, 1.2rem);
    margin-top: 0.25rem;
  }

  /* Stronger shrink toward “card” at full --hero-exit (desktop keeps 0.4 factor) */
  .hero-section--preview .hero-video {
    transform: scale(calc(1 - 0.56 * var(--hero-exit)));
  }
}

.about-section {
  background-color: var(--moon-silver);
}

/* Preview page: long-form About (numbered blocks + figure) */
.preview-about-section {
  background-color: var(--pure-black);
  padding-bottom: clamp(3rem, 8vw, 5rem);
  scroll-margin-top: 6rem;
}

.preview-about-section--no-hero {
  padding-top: clamp(4.5rem, 12vw, 7rem);
}

.preview-2-landing-title {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.preview-2-watch {
  width: 100%;
}

.preview-2-watch-btn {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.preview-2-watch.is-open .preview-2-watch-btn {
  display: none;
}

.preview-2-watch-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s ease,
    margin-top 0.35s ease;
  margin-top: 0;
}

.preview-2-watch-panel.is-open {
  max-height: min(1200px, calc(100vh - 8rem));
  opacity: 1;
  margin-top: 1rem;
  pointer-events: auto;
}

.preview-2-watch-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--pure-black);
}

.preview-2-watch-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.preview-3-page {
  background-color: var(--pure-black);
  min-height: 100vh;
}

.preview-3-section {
  background-color: var(--pure-black);
  text-align: left;
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(2rem, 6vh, 4rem);
  padding-bottom: clamp(2rem, 6vh, 4rem);
}

.preview-3-section .container-fluid {
  width: 100%;
}

.preview-3-title {
  font-family: 'Libre Franklin', sans-serif;
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  padding-top: clamp(3.5rem, 16vh, 12rem);
}

.learn-more-back {
  position: fixed;
  top: clamp(0.75rem, 2vh, 1.25rem);
  left: clamp(0.75rem, 2vw, 1.25rem);
  z-index: 100;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 0.95rem;
  color: var(--moon-silver);
  text-decoration: none;
  padding: 0.35rem 0.5rem;
  border-radius: 0.35rem;
}

.learn-more-back:hover {
  color: var(--white);
  text-decoration: underline;
}

.preview-3-inner {
  width: 100%;
  max-width: min(32rem, 100%);
  margin-left: auto;
  margin-right: auto;
}

.preview-3-section .preview-about-block__title {
  font-family: 'Libre Franklin', sans-serif;
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.preview-3-section .preview-about-block {
  padding-top: clamp(0.75rem, 1.5vw, 1.125rem);
  padding-bottom: clamp(0.75rem, 1.5vw, 1.125rem);
}

.preview-3-section .preview-about-block:first-of-type {
  padding-top: 0.5rem;
}

.preview-3-section .preview-about-block__figure {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

/* Preview 4 (/preview/4): full-viewport hero — video, tagline, Discord + Learn more */
.preview-4-hero.hero-section {
  overflow: hidden;
}

.preview-4-hero-inner {
  max-width: min(40rem, 100%);
}

.preview-4-hero-title {
  font-family: 'Libre Franklin', sans-serif;
  font-size: clamp(1.35rem, 3.5vw, 2.25rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Preview 5 (/preview/5): launch video, photo strip, short copy, CTAs */
.preview-5-page {
  min-height: 100vh;
  background-color: var(--pure-black);
}

.preview-5-main {
  padding-bottom: clamp(3rem, 8vw, 5rem);
}

.preview-5-hero {
  max-width: min(72rem, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(0.75rem, 2vw, 1.25rem);
  padding-right: clamp(0.75rem, 2vw, 1.25rem);
}

.preview-5-video-shell {
  width: 100%;
  max-width: min(64rem, 100%);
  margin-left: auto;
  margin-right: auto;
}

.preview-5-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
}

.preview-5-launch-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.preview-5-tagline {
  font-family: 'Libre Franklin', sans-serif;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.preview-5-deck {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.preview-5-gallery-scroll {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  width: 100%;
  max-width: min(72rem, 100%);
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(2.75rem, 7vw, 4.75rem);
  margin-bottom: clamp(3.25rem, 9vw, 5.5rem);
}

.preview-5-gallery-item {
  min-width: 0;
}

.preview-5-gallery-img-wrap {
  aspect-ratio: 4 / 3;
  background-color: rgba(255, 255, 255, 0.06);
}

.preview-5-gallery-img {
  object-fit: cover;
}

.preview-5-copy {
  max-width: min(36rem, 100%);
}

.preview-5-body {
  font-size: 1.0625rem;
  line-height: 1.65;
}

.preview-5-bullet {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
}

.preview-5-bullet::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background-color: var(--moon-silver);
  opacity: 0.65;
}

@media (min-width: 576px) {
  .preview-5-gallery-scroll {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .preview-5-gallery-scroll {
    grid-template-columns: repeat(6, 1fr);
    gap: 0.65rem;
  }
}

/* Preview 6: fullscreen hero + overlay teaser, learn copy, gallery, lead line, rest + CTAs */
.preview-6-page {
  min-height: 100vh;
  background-color: var(--pure-black);
}

.preview-6-main {
  padding-bottom: clamp(3rem, 8vw, 5rem);
}

.preview-6-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 0;
}

.preview-6-video-bleed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  background-color: #000;
  z-index: 0;
}

.preview-6-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
}

.preview-6-hero-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: auto;
  pointer-events: none;
  padding: clamp(1.75rem, 10vh, 3.5rem) clamp(0.75rem, 3vw, 1.25rem) calc(env(safe-area-inset-bottom, 0px) + clamp(3.25rem, 9vh, 5.75rem));
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.94) 0%,
    rgba(0, 0, 0, 0.62) 38%,
    rgba(0, 0, 0, 0.2) 68%,
    transparent 100%
  );
}

.preview-6-hero-overlay .preview-6-rail.preview-6-rail--hero {
  margin-left: clamp(1rem, 4vw, 2rem);
  margin-right: auto;
  margin-top: 0;
  margin-bottom: clamp(0.4rem, 1.5vh, 0.85rem);
  max-width: min(26rem, calc(100vw - 2rem));
  pointer-events: none;
}

.preview-6-rail--hero .preview-6-tagline,
.preview-6-rail--hero .preview-6-deck {
  text-shadow: 0 0.06em 0.3em rgba(0, 0, 0, 0.95);
}

.preview-6-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.preview-6-rail {
  max-width: min(40rem, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 3.5vw, 1.85rem);
  padding-right: clamp(1rem, 3.5vw, 1.85rem);
  margin-top: clamp(1.75rem, 4.5vw, 2.75rem);
  text-align: left;
}

.preview-6-rail--titles {
  margin-top: 0;
}

.preview-6-tagline {
  font-family: 'Libre Franklin', sans-serif;
  font-size: clamp(1.65rem, 4.5vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-align: left;
}

.preview-6-deck {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
  text-align: left;
  opacity: 0.9;
}

.preview-6-body {
  font-size: 1.125rem;
  line-height: 1.7;
  text-align: left;
}

.preview-6-lead {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.preview-6-lead .preview-6-rail {
  margin-top: 0;
}

.preview-6-learn {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.preview-6-learn-inner {
  width: 100%;
  max-width: min(40rem, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1rem, 3.5vw, 1.85rem);
  padding-right: clamp(1rem, 3.5vw, 1.85rem);
  text-align: left;
}

.preview-6-learn-title {
  font-family: 'Libre Franklin', sans-serif;
  font-size: clamp(1.35rem, 3.2vw, 1.95rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-align: left;
}

.preview-6-learn .preview-about-intro {
  text-align: left;
}

.preview-6-learn .preview-about-block__title,
.preview-6-learn .preview-about-block__body {
  text-align: left;
}

.preview-6-learn .preview-about-block {
  padding-top: clamp(1.1rem, 2.5vw, 1.5rem);
  padding-bottom: clamp(1.1rem, 2.5vw, 1.5rem);
}

.preview-6-gallery-block {
  margin-top: clamp(2.25rem, 6vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 7vw, 4rem);
  padding-left: clamp(0.5rem, 2vw, 1rem);
  padding-right: clamp(0.5rem, 2vw, 1rem);
}

.preview-6-gallery {
  column-count: 2;
  column-gap: 0.65rem;
}

@media (min-width: 768px) {
  .preview-6-gallery {
    column-count: 3;
    column-gap: 0.85rem;
  }
}

.preview-6-gallery__item {
  break-inside: avoid;
  margin-bottom: 0.65rem;
}

@media (min-width: 768px) {
  .preview-6-gallery__item {
    margin-bottom: 0.85rem;
  }
}

.preview-6-gallery__img-wrap {
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.05);
}

.preview-6-gallery__img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.preview-6-rest .preview-6-rail {
  margin-top: 0;
}

.preview-6-rest .preview-6-bullets {
  width: 100%;
}

.preview-6-bullet {
  margin-bottom: 0.4rem;
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  padding-left: 0.9rem;
}

.preview-6-bullet:last-child {
  margin-bottom: 0;
}

/* Preview hub (/preview): grid of links to Preview 1–6 */
.preview-hub-page {
  min-height: 100vh;
  background-color: var(--pure-black);
}

.preview-hub-main {
  padding-bottom: clamp(2rem, 6vw, 4rem);
}

.preview-hub-intro {
  max-width: min(40rem, 100%);
  padding-top: clamp(4rem, 16vh, 9rem);
}

.preview-hub-heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.preview-hub-grid {
  max-width: min(72rem, 100%);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

@media (min-width: 576px) {
  .preview-hub-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 992px) {
  .preview-hub-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
  }
}

.preview-hub-card {
  min-height: 6.5rem;
  padding: 1rem 1.15rem;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: inherit;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.preview-hub-card:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.preview-hub-card:focus-visible {
  outline: 2px solid var(--moon-silver);
  outline-offset: 2px;
}

.preview-hub-card__title {
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  line-height: 1.25;
}

.preview-about-inner {
  width: 100%;
  max-width: min(32rem, calc(100vw - 2rem));
  margin-left: auto;
  margin-right: auto;
}

.preview-about-inner.preview-about-inner--wider {
  max-width: min(36rem, calc(100vw - 2rem));
}

.preview-about-header {
  margin-top: clamp(0rem, 0.75vw, 0.5rem);
}

.preview-about-intro {
  font-size: 1.125rem;
  line-height: 1.65;
}

.preview-about-block {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.preview-about-block:last-child {
  margin-bottom: 0;
}

.preview-about-block__title {
  font-family: 'Libre Franklin', sans-serif;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
}

.preview-about-block__num {
  display: block;
  font-weight: 400;
  color: var(--moon-silver);
  margin-bottom: 0.125rem;
}

.preview-about-block__name {
  display: block;
  font-weight: 700;
  color: var(--moon-silver);
  letter-spacing: 0.01em;
}

.preview-about-block__body {
  font-size: 1.0625rem;
  line-height: 1.65;
}

.preview-about-block__figure {
  max-width: min(420px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.preview-about-inner--wider .preview-about-block__figure {
  max-width: 100%;
}

.preview-about-block__img-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.preview-about-block__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-about-block__caption {
  line-height: 1.5;
  opacity: 0.9;
}

.features-section {
  background: linear-gradient(135deg, var(--indigo-violet) 0%, var(--umbra-black) 100%);
}

/* ============================================
   SECTIONS – Intelligence, meet design
   ============================================ */

.intelligence-design-section {
  background-color: var(--pure-black);
  overflow: hidden;
}

.intelligence-design-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
  transform: scale(0.6);
  transform-origin: center center;
  border-radius: 24px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: transform 1.5s ease, border-radius 1.5s ease, border 1.5s ease, box-shadow 1.5s ease;
}

.intelligence-design-section.video-scaled-up .intelligence-design-video {
  transform: scale(1);
  border-radius: 0;
  border-color: transparent;
  box-shadow: none;
}

.intelligence-design-heading {
  z-index: 1;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  width: 100%;
  text-align: center;
}

.contact-section {
  background-color: var(--pure-black);
}

/* ============================================
   SECTIONS – Made for Creators
   ============================================ */

.maker-section-wrapper {
  position: relative;
  background-color: var(--pure-black);
}

/* Section 2: standalone first panel (full-height section) */
#section2.maker-section-wrapper {
  overflow: hidden;
}
#section2 .maker-panel-bg {
  position: absolute;
  inset: 0;
  background-image: var(--maker-panel-bg-desktop);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#section2 .maker-panel-bg-mobile {
  display: none;
  position: absolute;
  inset: 0;
  background-image: var(--maker-panel-bg-mobile);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#section2 .maker-panel-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-overlay);
}

/* Subtle radial prism bloom – light falling and refracting on one area */
#section2 .maker-panel-prism-bloom {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Soft warm core – light spot */
    radial-gradient(
      ellipse 70% 55% at 62% 28%,
      rgba(255, 252, 248, 0.22) 0%,
      rgba(255, 250, 242, 0.1) 30%,
      rgba(255, 248, 240, 0.04) 55%,
      transparent 75%
    ),
    /* Prism fringe – cool edge */
    radial-gradient(
      ellipse 85% 65% at 68% 32%,
      transparent 35%,
      rgba(200, 228, 255, 0.06) 48%,
      rgba(180, 218, 255, 0.02) 60%,
      transparent 72%
    ),
    /* Prism fringe – warm edge */
    radial-gradient(
      ellipse 80% 60% at 56% 35%,
      transparent 40%,
      rgba(255, 230, 210, 0.05) 52%,
      rgba(255, 220, 200, 0.02) 65%,
      transparent 78%
    );
}

#section2 .maker-panel-overlay {
  position: relative;
  z-index: 2;
  min-height: 100vh;
}

/* ============================================
   SECTIONS – Your Craft slideshow
   ============================================ */

.maker-slideshow-section {
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-color: var(--pure-black);
}

.maker-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--umbra-black);
}

/* 4 background layers stacked (absolute), one visible by idx */
.maker-slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}

.maker-slide-bg.maker-slide-bg-active {
  opacity: 1;
  z-index: 1;
}

.maker-slide-bg-inner {
  position: absolute;
  inset: 0;
  background-image: var(--slide-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: filter 0.55s ease;
}

.maker-slide-bg:not(.maker-slide-bg-active) .maker-slide-bg-inner {
  filter: blur(8px);
}

.maker-slide-bg.maker-slide-bg-active .maker-slide-bg-inner {
  filter: blur(0);
}

.maker-slide-bg-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-overlay);
}

.maker-slide-bg .maker-slide-bg-mobile {
  display: none;
  position: absolute;
  inset: 0;
  background-image: var(--slide-bg-mobile);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: filter 0.55s ease;
}

.maker-slide-bg:not(.maker-slide-bg-active) .maker-slide-bg-mobile {
  filter: blur(8px);
}

.maker-slide-bg.maker-slide-bg-active .maker-slide-bg-mobile {
  filter: blur(0);
}

.maker-slide-bg-has-video .maker-slide-bg-inner.maker-slide-bg-video-wrap {
  background-image: none;
}

.maker-slide-bg-video-wrap .maker-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.maker-slide-bg-video-wrap .maker-bg-video-mobile {
  display: none;
}

/* Top overlay: text + 4 buttons (liquid glass gradient) */
.maker-slideshow-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.1) 40%, transparent 55%);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.maker-slideshow-overlay .container {
  pointer-events: none;
}

.maker-slide-copy {
  display: none;
}

.maker-slide-copy.maker-slide-copy-active {
  display: block;
}

.maker-slideshow-overlay .maker-panel-heading {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
  text-align: left;
}

.maker-slideshow-nav {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;
  pointer-events: auto;
}

.maker-slideshow-buttons {
  display: flex;
  gap: 12px;
  pointer-events: auto;
}

.maker-slide-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 1rem;
  border-radius: 9999px;
  border: 1px solid var(--glass-btn-border);
  background: var(--glass-btn-bg);
  color: var(--white);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.maker-slide-btn:hover {
  background: var(--glass-btn-bg-hover);
  border-color: var(--glass-btn-border-hover);
  color: var(--white);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

/* Active pill only: light background, dark text for contrast */
.maker-slide-btn.maker-slide-btn-active {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--umbra-black);
  box-shadow: var(--glass-shadow);
}

.maker-slideshow-and-more {
  width: 100%;
  text-align: left;
  margin-top: 0.5rem;
  pointer-events: auto;
}

.maker-slide-btn-text {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9999px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.35rem 0.75rem;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.maker-slide-btn-text:hover {
  color: var(--white);
  background: var(--glass-btn-bg-hover);
  border-color: var(--glass-btn-border-hover);
}

.maker-slide-btn-text.maker-slide-btn-text-active {
  color: var(--white);
  text-decoration: underline;
  background: var(--glass-btn-bg);
  border-color: var(--glass-btn-border);
}

.maker-slide-chevron {
  margin-left: 0.2em;
  opacity: 0.9;
}

@media (max-width: 768px) {
  .maker-slide-bg .maker-slide-bg-mobile {
    display: block;
  }
  .maker-slide-bg .maker-slide-bg-inner:not(.maker-slide-bg-video-wrap) {
    background-image: none !important;
  }
  .maker-slide-bg-video-wrap .maker-bg-video-desktop {
    display: none;
  }
  .maker-slide-bg-video-wrap .maker-bg-video-mobile {
    display: block;
  }
  /* Section 2: use mobile bg image on small screens */
  #section2 .maker-panel-bg {
    background-image: none !important;
  }
  #section2 .maker-panel-bg-mobile {
    display: block;
  }
  /* Developer page hero: use mobile bg image on small screens */
  .developer-hero__bg {
    background-image: none !important;
  }
  .developer-hero__bg-mobile {
    display: block !important;
  }
  /* Section 2: move text overlay up on mobile */
  #section2 .maker-panel-overlay .container {
    transform: translateY(-250px);
  }
  /* Section 3 (slideshow): move text overlay up on mobile */
  #section3 .maker-slideshow-overlay .container {
    transform: translateY(-150px);
  }
  /* Perpetual power (Raven Wings): shift bg video left on phone */
  .raven-wings-bg-video {
    left: -110%!important;
  }
  /* Eye Control: shift bg video left on phone */
  .eye-control-bg-video {
    left: -40%!important;
  }
}

/* Developer hero: show mobile bg from 992px down (tablets + phones) */
@media (max-width: 991px) {
  .developer-hero__bg {
    background-image: none !important;
  }
  .developer-hero__bg-mobile {
    display: block !important;
  }
}

.maker-panel-heading em,
.maker-subheading em {
  font-style: italic;
}

.maker-subheading {
  max-width: 32em;
  pointer-events: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

/* Phone: every large button uses one compact size (~48px tall — above the 44pt minimum tap target).
   !important beats Bootstrap's px-5 / py-3 utilities and older per-section phone rules. */
@media (max-width: 767.98px) {
  .btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
  }

  .d-flex:has(> .btn-lg) {
    gap: 0.6rem !important;
  }
}

/* "surveillance capitalism" in the privacy tagline: the phrase the section stands against. Rose gold — the colour of
   the camera cover in the animation beside it (the thing that protects you), as gradient text. */
.opt-out-section__tagline em {
  font-weight: 600;
  /* Rose gold with a brighter band of light that slowly glides across, like light catching the metal cover */
  background: linear-gradient(100deg, #e2a48c 0%, #f0c4b0 30%, #fff1ea 45%, #f0c4b0 60%, #e2a48c 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Italic glyphs lean past the box on the right; widen the painted area so the last "m" isn't clipped */
  padding-right: 0.12em;
  margin-right: -0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* alternate: the light sweeps one way, rests, then sweeps back — no visible restart */
  animation: roseGoldShimmer 4s ease-in-out infinite alternate;
}

@keyframes roseGoldShimmer {
  0%, 15% { background-position: 100% 0; }
  85%, 100% { background-position: 0% 0; }
}

/* Rose gold for the premium moment — reserving: "Reserve" in the navbar (text) and the Reserve buttons on home (rim,
   .btn--rose-rim), plus the Reserve page's selected edition and open batch. Same slow band of light as the privacy
   tagline, upright. */
.rose-gold-text {
  background: linear-gradient(100deg, #e2a48c 0%, #f0c4b0 30%, #fff1ea 45%, #f0c4b0 60%, #e2a48c 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: roseGoldShimmer 4.5s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .opt-out-section__tagline em,
  .rose-gold-text {
    animation: none;
    background-position: 50% 0;
  }
}

/* ============================================
   SECTIONS – Opt out by default
   ============================================ */

/* Black section; product image runs flush to the left screen edge (the render is cropped
   on that side), copy on the right. Phone: copy first, image below. */
.opt-out-section {
  /* .section's overflow-x: hidden turns this into its own scroll box (inner scrolling on phones); clip doesn't */
  overflow-x: clip;
  overflow-y: visible;
  background-color: var(--pure-black);
  padding-block: clamp(2.5rem, 5vh, 4rem) clamp(4rem, 8vh, 7rem);
  /* A full screen of its own, content centred in black space, so it reads as a section rather than a strip */
  min-height: 100vh;
  min-height: 100svh;
}

/* Camera-cover toggle: the whole video is the button */
.opt-out-section__cover {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.opt-out-section__cover:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
}

/* Camera-cover canvas (right half of the frame on laptop), flush to the left edge like the old render.
   The open-cover still shows as its background until the frames are drawn. Width is capped as well as height
   (85vh), so on wide / short screens the box keeps the frames' 1080:1216 shape instead of stretching sideways. */
.opt-out-section__video {
  display: block;
  width: min(100%, calc(85vh * 1080 / 1216));
  height: auto;
  aspect-ratio: 1080 / 1216;
  background: var(--pure-black) var(--cover-poster) left center / contain no-repeat;
}

.opt-out-section__text {
  max-width: 640px;
  padding: 0 1.5rem;
}


@media (min-width: 768px) {
  /* 45% image | 5% gap | 50% copy */
  .opt-out-section__image-col {
    flex: 0 0 45%;
    max-width: 45%;
  }

  .opt-out-section__text-col {
    flex: 0 0 50%;
    max-width: 50%;
    margin-left: 5%;
  }

  .opt-out-section__text {
    padding: 0 3rem 0 2rem;
  }
}

@media (max-width: 767.98px) {
  /* Phone: at least one screen tall. The section itself is the column (wrappers become
     display: contents), text keeps its natural height, and the image fills the leftover
     space — but never narrower than 60vw (the section grows instead on very short phones). */
  .opt-out-section {
    flex-direction: column;
    align-items: stretch !important;
    justify-content: center;
    padding-block: 1.5rem 1.25rem;
  }

  .opt-out-section > .container-fluid,
  .opt-out-section .row,
  .opt-out-section__text-col,
  .opt-out-section__text {
    display: contents;
  }

  /* Order: title → tagline → image → body → button */
  .opt-out-section__title,
  .opt-out-section__tagline,
  .opt-out-section__body {
    flex: 0 0 auto;
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .opt-out-section__title { order: 1; margin-bottom: 0.5rem !important; }
  .opt-out-section__tagline { order: 2; margin-bottom: 0 !important; }

  /* Full-width 16:9 camera-cover video; the leftover height goes to space around it */
  .opt-out-section__image-col {
    order: 3 !important;
    flex: 0 0 auto !important;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 1rem 0 1rem;
  }

  .opt-out-section__video {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: none;
    background-image: var(--cover-poster-mobile);
  }

  .opt-out-section__body {
    order: 4;
    font-size: 1rem !important; /* body copy on phones, not lead-sized */
    line-height: 1.6;
    margin-bottom: 1rem !important;
  }

  .opt-out-section__cta {
    order: 5;
    flex: 0 0 auto;
    align-self: flex-start;
    margin-left: 1.5rem;
  }
}

/* Opt Out modal – liquid glass */
.opt-out-modal {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  color: var(--moon-silver);
  padding: 0;
  overflow: hidden;
}

.opt-out-modal .modal-body.opt-out-modal__body {
  padding: 4rem 2.75rem 3.25rem 2.75rem;
  padding-top: 4rem;
}

.opt-out-modal .modal-header {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 10;
  padding: 0;
  border: none;
}

.opt-out-modal__close-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: var(--glass-btn-bg) !important;
  border: 1px solid var(--glass-btn-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.opt-out-modal__close-btn:hover {
  background: var(--glass-btn-bg-hover) !important;
  border-color: var(--glass-btn-border-hover);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
  color: var(--white);
}

.opt-out-modal__close-icon {
  display: block;
  line-height: 0;
}

.opt-out-modal__close-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.opt-out-modal__image-wrap {
  min-height: 200px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
  margin-bottom: 2rem;
}

.opt-out-modal__image {
  display: block;
  object-fit: cover;
  max-height: 280px;
  width: 100%;
}

.opt-out-modal__placeholder {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg-strong);
  color: var(--moon-silver);
  font-size: 0.9rem;
  padding: 2rem;
}

.opt-out-modal__title {
  margin: 0;
  margin-bottom: 0.5rem;
}

.opt-out-modal__subtitle {
  margin: 0;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.opt-out-modal__text {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

.opt-out-modal__body-text {
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
  color: var(--moon-silver);
}

.demo-modal__body ul {
  list-style-type: disc;
  padding-left: 1.25rem;
}

.demo-modal__body ul li {
  margin-bottom: 0.25rem;
}

.demo-modal__body p + p {
  margin-top: 1rem;
}


@media (max-width: 576px) {
  .opt-out-modal .modal-body.opt-out-modal__body {
    padding: 3.5rem 1.5rem 2.25rem 1.5rem;
    padding-top: 3.5rem;
  }

  .opt-out-modal .modal-header {
    top: 1rem;
    right: 1rem;
  }

  .opt-out-modal__close-btn {
    width: 44px;
    height: 44px;
  }
}

/* ============================================
   SECTIONS – Features (carousel & cards)
   ============================================ */

/* Base feature card (e.g. try section) – glass style */
.feature-card,
.card.feature-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  height: 95%;
  transform: scale(1);
}

.feature-card:hover {
  transform: scale(1.02);
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

/* Get to know Raven Prism: full-bg image card, title + subtitle at top, third line at bottom */
.feature-card--bg {
  position: relative;
  width: 100%;
  height: 30rem;
  min-height: 30rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  transform: scale(1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card--bg:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

/* Shared feature card with bg image: inner div + vignette (no border gap) */
.feature-card--bg-image {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.feature-card__bg-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background-image: var(--feature-card-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.feature-card__bg-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.55) 22%,
    rgba(0, 0, 0, 0.35) 40%,
    transparent 55%,
    rgba(0, 0, 0, 0.2) 75%,
    rgba(0, 0, 0, 0.45) 88%,
    rgba(0, 0, 0, 0.72) 100%
  );
}

.feature-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 45%, transparent 100%);
  z-index: 0;
  pointer-events: none;
}

.feature-card__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem 1.25rem 1rem;
  gap: 0.25rem;
}

.feature-card__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.feature-card__subtitle {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 400;
  opacity: 0.95;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.feature-card__line {
  margin: 0;
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 400;
  opacity: 0.9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Enterprise features only: larger cards → larger type, especially bottom line */
.section--features-enterprise {
  padding-top: 4rem;
}
.section--features-enterprise .feature-card__subtitle {
  font-size: 1.05rem !important;
}
.section--features-enterprise .feature-card__title {
  font-size: 2rem !important;
}
.section--features-enterprise .feature-card__line {
  font-size: 1.3rem !important;
  line-height: 1.6 !important;
}

.sensory-carousel-wrapper {
  position: relative;

}

.sensory-carousel-container {
  min-width: 100vw;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sensory-carousel-container::-webkit-scrollbar {
  display: none;
}

.sensory-carousel {
  display: flex;
  width: auto;
  margin: 0;
  flex-wrap: nowrap;
  gap: 1rem;
  padding: 0.75rem;
  padding-right: max(2rem, 200vw);
  transition: transform 0.5s ease;
}

.sensory-carousel-item {
  flex: 0 0 20rem;
  min-width: 0;
}

.carousel-controls {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}

.carousel-btn {
  background: var(--glass-btn-bg);
  border: 1px solid var(--glass-btn-border);
  color: var(--white);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}

.carousel-btn:hover {
  background: var(--glass-btn-bg-hover);
  border-color: var(--glass-btn-border-hover);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

@media (max-width: 768px) {
  /* Clip carousel on mobile so 130% width doesn’t cause page horizontal scroll (index + developer capabilities) */
  .sensory-carousel-wrapper,
  .sensory-carousel-wrapper--cards {
    overflow-x: hidden;
    width: 100%;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
  }

  .carousel-controls {
    gap: 0.75rem;
  }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Default: animate on load (for pages/sections without animate-on-scroll) */
.animate-fade-up {
  animation: fadeInUp 1s ease both;
}

.animate-fade-up-delay-1 {
  animation: fadeInUp 1s ease 0.2s both;
}

.animate-fade-up-delay-2 {
  animation: fadeInUp 1s ease 0.4s both;
}

/* Scroll-triggered: each element animates when it scrolls into view (.is-inview, common.js) */
.animate-on-scroll .animate-fade-up,
.animate-on-scroll .animate-fade-up-delay-1,
.animate-on-scroll .animate-fade-up-delay-2 {
  opacity: 0;
  transform: translateY(30px);
  animation: none;
}

.animate-on-scroll .animate-fade-up.is-inview {
  animation: fadeInUp 1s ease both;
}

.animate-on-scroll .animate-fade-up-delay-1.is-inview {
  animation: fadeInUp 1s ease 0.2s both;
}

.animate-on-scroll .animate-fade-up-delay-2.is-inview {
  animation: fadeInUp 1s ease 0.4s both;
}


/* ============================================
   SECTIONS – 3D Model viewer
   ============================================ */

#section5.section-black,
.opt-out-section,
.eye-control-section,
.section-video-wrapper,
.about-page-section,
.enterprise-page-section,
.error-page-section {
  background-color: var(--pure-black);
}

.about-page-section,
.enterprise-page-section {
  padding-top: 100px;
}

.about-page-section {
  padding-top: 280px !important;
  padding-bottom: 4rem !important;
}
.about-page-section__title {
  margin-bottom: 4rem !important;
}
.about-page-section {
  transition: padding 1.0s ease, min-height 1.0s ease, align-items 1.0s ease;
}
.about-page-section #about-glass-container {
  transition: min-height 1.0s ease;
  overflow: visible;
  container-type: inline-size;
  container-name: about-glass;
}
/* About glass: bg and content separated (absolute / relative) */
.about-glass__bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  pointer-events: none;
  transform-origin: center center;
  transform: scaleX(var(--about-glass-scale, 1));
  transition: transform 0.12s ease-out;
}
.about-glass__content {
  position: relative;
  z-index: 1;
  padding: 5rem 3rem;
}
/* Removed: section stretch + glass min-height at breakpoint (was causing sudden jump).
   At breakpoint we only scale the bg horizontally now. Re-add below if you want full-height glass. */
/* .about-page-section.about-glass-expanded { min-height: 100vh !important; align-items: stretch; padding-top: 2rem !important; padding-bottom: 2rem !important; } */
/* .about-page-section.about-glass-expanded .container.section__content { flex: 1; display: flex; flex-direction: column; } */
/* .about-page-section.about-glass-expanded #about-glass-container { min-height: calc(100vh - 4rem); flex: 1; } */

.error-page-section .error-page__code {
  font-size: 5rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

.about-page-section .about-glass__content {
  padding: 5rem 3rem !important;
}

@media (max-width: 576px) {
  .about-page-section .about-glass__content {
    padding-bottom: 7rem !important;
    padding-top: 2.5rem !important;
  }
  .about-page-section .about-glass__content .d-flex.flex-wrap {
    gap: 1rem !important;
    margin-top: 0.5rem !important;
  }
}

/* About page: image cards (2×2 grid) – glassmorphism, image + caption */
.about-image-card {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}
.about-image-card:hover {
  border-color: var(--glass-border-strong);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.about-image-card__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}
.about-image-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* One center-aligned sentence under each image row */
.about-image-row-caption {
  margin: 0;
  padding: 0;
  text-align: center;
}

/* About Core team section – same background as about */
.about-core-team-section {
  background-color: var(--pure-black);
}

/* Flip wrapper: same height as card, perspective for 3D */
.about-team-card-flip {
  min-height: 36rem;
  height: 36rem;
  perspective: 1000px;
  cursor: pointer;
  outline: none;
}
.about-team-card-flip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
.about-team-card-flip.is-flipped .about-team-card-flip__inner {
  transform: rotateY(180deg);
}
.about-team-card-flip__front,
.about-team-card-flip__back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: inherit;
}
.about-team-card-flip__back {
  transform: rotateY(180deg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.about-team-card-flip__back-bg {
  position: absolute;
  inset: 0;
  background-image: var(--feature-card-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: inherit;
}
.about-team-card-flip__back-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.5);
}
.about-team-card-flip__back-glass {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 2rem 1.75rem;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  border: 1px solid var(--glass-border);
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.about-team-card-flip__back-glass .about-team-card__name {
  font-size: 1.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.about-team-card-flip__back-glass .about-team-card__title {
  font-size: 1.2rem;
  opacity: 0.95;
  margin-bottom: 1.25rem;
}
.about-team-card-flip__back-line {
  margin: 0 0 0.85rem;
  font-size: 1.35rem;
  line-height: 1.6;
  opacity: 0.95;
}
.about-team-card-flip__back-line:last-child {
  margin-bottom: 0;
}
.about-team-card-flip__back-more {
  width: 100%;
  text-align: right;
}
.about-team-card-flip__more-link {
  font-size: 1rem;
}
.about-team-card-flip__more-link:hover {
  opacity: 0.9;
  color: var(--white);
}

/* Core team cards – same glassiness as feature_card.html: bg image + vignette + content at bottom */
.about-team-card {
  position: relative;
  min-height: 36rem;
  height: 36rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-team-card-flip:hover .about-team-card-flip__front .about-team-card {
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.about-team-card-flip.is-flipped:hover .about-team-card-flip__front .about-team-card {
  transform: none;
}
.about-team-card .feature-card__bg-inner {
  border-radius: inherit;
}
/* Team photos show clean: no top/bottom vignette (the name strip below has its own dark glass) */
.about-team-card .feature-card__bg-inner::before {
  content: none;
}
/* Bottom strip: stronger, darker frosted glass so the name/title stay readable on light photos */
.about-team-card__content {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-top: auto;
  padding: 1.25rem 1.25rem 1rem;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.4);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.about-team-card__name {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.about-team-card__title {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Where they've been · what they shipped — a quiet third line under the role on the tile's front */
.about-team-card__highlight {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.62);
}

/* "Our team has built at": a quiet row of white logos above the team grid. Logos are drawn white whatever their
   own colours (filter), dimmed, and brighten on hover; each one's height is set in asset_paths.json. */
.about-built-at {
  margin-bottom: clamp(2.5rem, 6vh, 3.5rem);
}

.about-built-at__label {
  margin: 0 0 1.25rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moon-silver);
}

.about-built-at__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem clamp(2rem, 4vw, 3.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-built-at__logos img {
  display: block;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: opacity 0.25s ease;
}

.about-built-at__logos li:hover img {
  opacity: 1;
}

/* Phones: three to a row, centred in their cells, a little smaller */
@media (max-width: 767.98px) {
  .about-built-at__logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    gap: 1.75rem 1rem;
  }

  .about-built-at__logos img {
    max-width: 100%;
    transform: scale(0.85);
  }
}

.section-video-wrapper {
  background-color: transparent;
}

/* Product video section: header row, then main (video + overlay buttons) */
.section-video-inner {
  width: 100%;
  padding-top: 100px;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
}

.section-video-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  gap: 1rem;
}

.section-video-heading {
  margin: 0;
  text-align: left;
  flex-shrink: 0;
}

.section-video-main {
  position: relative;
  width: 100%;
  height: 620px;
  flex: 1;
  min-height: 620px;
}

/* Hidden (JS adds .is-pending) until the turntable's first frame is drawn, then the panel, turntable and pills fade
   in together. On the children, so the section's own scroll-in animation (animate-fade-up-*) is left alone. */
.section-video-main > * {
  transition: opacity 0.6s ease;
}

.section-video-main.is-pending > * {
  opacity: 0;
  pointer-events: none;
}

.section-video-canvas-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 620px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  /* The render's own flat background (data/asset_paths.json turntable.background), so the frames' edges vanish */
  background: #18181c;
  /* Vertical swipes scroll the page; horizontal ones turn the glasses (product-video.js) */
  touch-action: pan-y;
}

/* The turntable (a canvas of opaque frames, 1400×564: glasses, disc and reflections on the render's background,
   cropped to their union; the glasses turn about 49.1% across). At 75% of the panel's width the glasses are the size
   they were (0.9 of the old full-bleed size); centred 60% across — right of the spec list — and the content's middle
   55% down. Scales with the panel. */
.section-video-canvas-wrap .section-video-player {
  display: block;
  position: absolute;
  top: 55%;
  left: 60%;
  width: 75%;
  height: auto;
  transform: translate(-49%, -58.9%);
  z-index: 1;
}

/* Take a closer look controls — geometry and type measured off Apple's viewer (Watch Ultra, 1440 wide): arrows 23px
   in from the edge, list 23px past them, 56px pills 12px apart; 44px close button 12px / 16px from the corner */
.section-video-buttons-col {
  position: absolute;
  left: 23px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: auto;
}

.section-video-buttons-wrap {
  display: flex;
  align-items: center;
  gap: 23px;
}

/* Up / down arrows: only while a card is open (as on Apple's) */
.section-video-nav-keys {
  display: flex !important;
  flex-direction: column;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.section-video-buttons-col.has-expanded .section-video-nav-keys {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

.section-video-nav-left,
.section-video-nav-right {
  display: none !important;
  flex-shrink: 0;
}

.section-video-nav-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--white);
  transition: background 0.2s, box-shadow 0.2s;
}

/* White in every state (Bootstrap's .btn hover / focus / active colours are dark) */
.section-video-nav-btn,
.section-video-nav-btn:hover,
.section-video-nav-btn:focus,
.section-video-nav-btn:focus-visible,
.section-video-nav-btn:active,
.section-video-close-btn,
.section-video-close-btn:hover,
.section-video-close-btn:focus,
.section-video-close-btn:focus-visible,
.section-video-close-btn:active {
  color: var(--white) !important;
}

.section-video-nav-btn svg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.section-video-close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 11;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--white);
  transition: background 0.2s, opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
}

.section-video-close-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.section-video-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}


/* ============================================
   SECTIONS – Raven Wings (perpetual power)
   ============================================ */

.raven-wings-section .raven-wings-bg-video {
  position: absolute;
  top: -10%;
  left: 40%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%; /* Adjust crop: left % (0=left, 50=center, 100=right), top % (0=top, 50=center, 100=bottom) */
  z-index: 0;
  display: block;
}
/* Optional: shift video position (e.g. if object-position isn’t enough) — uncomment and set values in % or px */
/* .raven-wings-section .raven-wings-bg-video { left: 0%; top: 0%; } */

/* ============================================
   SECTIONS – Eye Control (full-screen video)
   ============================================ */

.eye-control-section {
  padding: 0;
}
.eye-control-bg-video {
  position: absolute;
  top: 50%;
  left: 40%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}
/* Eye Control only (Battery reuses .eye-control-bg-video with the older positioning):
   fill the section; as screens narrow, 77% of the trimmed width comes off the left, 23% off the right */
.section--eye-control .eye-control-bg-video {
  top: 0;
  left: 0 !important; /* beats the old phone "left: -40%" override */
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  transform: none;
  object-fit: cover;
  object-position: 77% 50%;
}

/* Battery (Raven Wings) video: plain responsive fill — centered, trims evenly; none of the old
   offset/phone "left: -40%" positioning inherited from .eye-control-bg-video */
.section--battery .eye-control-bg-video {
  top: 0;
  left: 0 !important;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  transform: none;
  object-fit: cover;
  object-position: 50% 50%;
}

.eye-control-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* Raven Wings section: the video sits in the lower part; the band above it holds the title and copy (so they never
   cover the glasses) and is filled with the video's own top edge, stretched upward and blurred (.battery-band,
   edge-extend.js), so band and footage read as one scene. Desktop zooms in a little toward the glasses (the clip's far
   left has a face late in the loop); phones frame the swap itself (hand + Wing at the temple's end). */
.section--battery {
  --battery-video-top: 30%;
  background-color: var(--pure-black);
}

.section--battery .eye-control-bg-video {
  top: var(--battery-video-top);
  height: calc(100% - var(--battery-video-top));
  object-position: 50% 35%;
  transform: scale(1.22);
  transform-origin: 70% 45%;
}

.battery-band {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--battery-video-top) + 4px); /* a hair over the video's top edge: no seam */
  z-index: 0;
  filter: blur(24px);
  transform: scaleX(1.06); /* the blur's soft side edges fall outside the section */
  pointer-events: none;
}

/* A circular vignette over the whole section (band too), centred on the glasses and deep in the corners, so the hair
   moving at the top left of the clip falls into shadow; plus a light darkening behind the copy so it reads */
.section--battery .eye-control-overlay {
  background:
    radial-gradient(circle at 55% 56%, transparent 28%, rgba(0, 0, 0, 0.45) 48%, rgba(0, 0, 0, 0.82) 68%, rgba(0, 0, 0, 0.95) 85%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.2) 22%, transparent 40%);
}

.section--battery .section__content {
  padding-top: clamp(6rem, 14vh, 9rem);
}

.section--battery .battery-title {
  font-size: clamp(2.6rem, 4.6vw, 4.5rem);
  margin-bottom: 1rem;
}

/* The section's two text styles under the title: body (silver) and the link (white, underlined) */
.battery-copy {
  max-width: 52rem;
  margin: 0 auto;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--moon-silver);
}

/* "all-day performance": rose gold (.rose-gold-text), semibold */
.battery-copy__highlight {
  font-weight: 600;
}

.battery-copy__link {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  transition: text-decoration-color 0.2s ease;
}

.battery-copy__link:hover,
.battery-copy__link:focus-visible {
  color: var(--white);
  text-decoration-color: var(--white);
}

/* Bottom: the HDK link over a soft dark fade */
.battery-ecosystem {
  position: absolute;
  inset: auto 0 0;
  padding: clamp(4rem, 12vh, 7rem) 1.5rem clamp(2rem, 6vh, 3.5rem);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
}

@media (max-width: 767.98px) {
  .section--battery {
    --battery-video-top: 40%;
  }

  .section--battery .eye-control-bg-video {
    object-position: 40% 40%;
    transform: none;
  }

  /* Phone: a very wide oval, so the vignette only darkens the top and bottom */
  .section--battery .eye-control-overlay {
    background:
      radial-gradient(ellipse 260% 58% at 50% 60%, transparent 45%, rgba(0, 0, 0, 0.6) 75%, rgba(0, 0, 0, 0.9) 100%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.2) 28%, transparent 46%);
  }

  .section--battery .section__content {
    padding-top: 5.5rem;
  }

  .battery-copy {
    font-size: 0.9rem;
    padding: 0 0.75rem;
  }
}

.eye-control-kicker {
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: var(--moon-silver);
}
.eye-control-subtitle {
  max-width: 32em;
}

/* ============================================
   SECTIONS – Home Linux (developer Linux opener, split text left / terminal right)
   ============================================ */

.home-linux {
  padding-block: 3rem clamp(6rem, 14vh, 10rem);
  background-color: var(--pure-black);
}
/* Home "Hardware" / "Software" labels under Take a closer look: silver, not the developer page's violet.
   Rhythm: title → label 1.5rem, label → content 1.5rem, Hardware → Software 3rem. */
.specs-kicker.home-kicker {
  color: var(--moon-silver);
  margin-bottom: 1.5rem;
}
.section-video-header + .home-kicker {
  margin-top: 1.5rem;
}
.home-linux__inner {
  /* Same content width as .section-video-inner so Software lines up with Hardware */
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.home-linux__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
}
.home-linux__side {
  justify-self: end;
  width: min(560px, 100%);
}
/* Home Linux terminal: classic terminal colours so it stands out (green prompt, white commands, cyan output,
   traffic-light dots, a slightly brighter frame); the developer page keeps its violet version */
.home-linux .spec-terminal {
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(28, 28, 32, 0.9) 0%, rgba(14, 14, 16, 0.9) 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.home-linux .spec-terminal__dots span:nth-child(1) { background: #ff5f57; }
.home-linux .spec-terminal__dots span:nth-child(2) { background: #febc2e; }
.home-linux .spec-terminal__dots span:nth-child(3) { background: #28c840; }

/* Like a real terminal theme, kept quiet: a muted sage prompt, output in the default (soft grey) text colour */
.home-linux .spec-terminal__prompt {
  color: #8fb79a;
}

.home-linux .spec-terminal__out {
  color: rgba(255, 255, 255, 0.62);
  opacity: 1;
}

.home-linux .spec-terminal__cursor {
  background: #8fb79a;
}

.home-linux .home-linux__terminal {
  width: 100%;
  margin: 0;
}
@media (max-width: 768px) {
  .home-linux {
    /* + .section-video-inner's 2rem bottom padding on phones = the same 3rem break */
    padding-block: 1rem 5rem;
  }
  .home-linux__inner {
    padding: 0 12px;
  }
  .home-linux__grid {
    grid-template-columns: 1fr;
  }
  .home-linux__side {
    justify-self: stretch;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .display-1 {
    font-size: 3rem !important;
  }
  
  /* Hero subtitles: 20px lead on phones (buttons and body text are 16px) */
  .subtitle {
    font-size: 1.25rem !important;
  }
  
  .display-2 {
    font-size: 2.5rem !important;
  }

  /* Section 6 (product video) responsive: stack header → main (video + overlay) → buttons row */
  .section-video-inner {
    flex-direction: column;
    justify-content: flex-start;
    padding: 2rem 12px 2rem;
    min-height: 0;
  }

  .section-video-header {
    flex-shrink: 0;
  }

  .section-video-heading {
    margin: 0;
  }

  /* Phones (after Apple's "Take a closer look"): a full-bleed, borderless product area that the turntable video
     holds, with the spec pills / open card floating over the lower part of it. */
  .section-video-main {
    position: relative;
    height: 540px;
    min-height: 540px;
    flex: 0 0 auto;
    width: calc(100% + 24px);
    margin: 0 -12px;
  }

  .section-video-canvas-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #18181c;
  }

  /* Sized so the glasses always fit the screen with 8px to spare (at their widest — the Display view — they span 71.5%
     of the frame, so ×1.4), up to 628px (0.9 of the old full-bleed size); wider than the screen, so the disc's soft
     edges run off it. Centred (they turn about 49.1% across), the content's middle 269px down, above the open card. */
  .section-video-canvas-wrap .section-video-player {
    --tt-w: min(628px, calc((100vw - 16px) * 1.4));
    top: calc(269px - var(--tt-w) * 0.2888);
    bottom: auto;
    left: 50%;
    right: auto;
    width: var(--tt-w);
    max-width: none;
    height: auto;
    transform: translateX(-49%);
  }

  /* Full-bleed on phones: no rim light round the panel (liquid-glass.css gives it one on wider screens) */
  .section-video-canvas-wrap::before {
    display: none;
  }

  /* Apple's phone viewer: 36px close button 20px from the corner */
  .section-video-close-btn {
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
  }

  .section-video-close-btn svg {
    width: 16px;
    height: 16px;
  }

  /* Full-bleed row so a centred card has Apple's 40px side margins (310px on a 390px phone) */
  .section-video-buttons-col {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    transform: none;
    width: auto;
    margin: 0;
    padding: 0;
    z-index: 10;
    pointer-events: auto;
    background: none;
  }

  .section-video-buttons-wrap {
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: 100%;
  }

}

@media (max-width: 480px) {
  .display-1 {
    font-size: 2.5rem !important;
  }
  
  .display-2 {
    font-size: 2rem !important;
  }
  
}

/* ============================================
   SECTIONS – Reserve (contact / invite code)
   ============================================ */

.email-input {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border-strong) !important;
  color: var(--white) !important;
  transition: all 0.3s ease;
  padding: 15px 30px;
  box-shadow: var(--glass-shadow);
}

.email-input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.email-input:focus {
  background: var(--glass-bg-strong) !important;
  border-color: var(--indigo-violet) !important;
  color: var(--white) !important;
  box-shadow: 0 0 0 0.2rem rgba(136, 102, 222, 0.25), var(--glass-shadow) !important;
  outline: none !important;
}

.email-form-wrapper {
  position: relative;
  width: 100%;
  padding: 12px;
}

.email-submit-btn {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(136, 102, 222, 0.65);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-btn-border);
  color: var(--white);
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--glass-shadow);
}

.email-submit-btn:hover {
  background: rgba(136, 102, 222, 0.85);
  border-color: var(--glass-btn-border-hover);
  color: var(--white);
}

/* ---------- Take a closer look: pills → cards (after Apple's viewer; motion in product-video.js) ----------
   Collapsed: content-width glass pills ("(+) Label"). Open: a card that reads "Label. Detail…" (like Apple's
   "Battery life and fast charging. Get long-lasting…"). Width / height animate on a spring in JS; here only the
   content fades: the detail eases in just after the card starts to grow, and a closing pill's label fades back in
   once it has nearly settled (Apple: ~0.36s in, over ~0.38s). Sizes and type are Apple's, measured: desktop 56px pill,
   14px / 32px side insets, 17px/21px semibold label, 24px icon + 14px gap; 423px card, 28px padding, 17px/25px text.
   Phones: 16px inset, 14px/18px label; card 40px in from each edge, 24px padding, 14px/20px text. Glass:
   liquid-glass.css. */
.video-view-btn {
  --pv-card-w: 423px;
  --pv-card-pad: 28px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  height: auto;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0 32px 0 14px !important;
  border: 0 !important;
  border-radius: 28px !important;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  color: var(--white) !important;
  font-size: 17px;
  line-height: 21px;
  letter-spacing: -0.374px;
  box-sizing: border-box;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.video-view-btn-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.video-view-btn-content {
  display: block;
  min-width: 0;
}

.video-view-btn-label {
  font-weight: 600;
}

.video-view-btn-detail {
  display: none;
  font-weight: 400;
  opacity: 0;
}

/* Open card */
.video-view-btn.active {
  width: var(--pv-card-w);
  min-height: 0;
  padding: var(--pv-card-pad) !important;
  align-items: flex-start;
  white-space: normal;
  line-height: 25px;
}

.video-view-btn.active .video-view-btn-icon {
  display: none;
}

/* The text is laid out once at the card's final width and the growing card reveals it, as on Apple's — instead of
   re-wrapping every frame while the width animates */
.video-view-btn.active .video-view-btn-content {
  flex: none;
  width: calc(var(--pv-card-w) - 2 * var(--pv-card-pad));
}

.video-view-btn.active .video-view-btn-label {
  transition: none;
}

.video-view-btn.active .video-view-btn-label::after {
  content: '.';
}

.video-view-btn.active .video-view-btn-detail {
  display: inline;
  opacity: 0.92;
  animation: pvDetailIn 0.42s ease 0.12s both;
}

@keyframes pvDetailIn {
  from { opacity: 0; }
  to { opacity: 0.92; }
}

/* Closing: the label waits until the pill has nearly settled, then fades back in */
.video-view-btn:not(.active) .video-view-btn-label {
  animation: pvLabelIn 0.38s ease 0.36s both;
}

@keyframes pvLabelIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .video-view-btn.active .video-view-btn-detail,
  .video-view-btn .video-view-btn-label {
    animation: none !important;
  }
}

/* Phones: a scrolling row of pills. Opening one first scrolls it to the centre (if it isn't already), then the pill
   itself grows into the card, exactly as on desktop, while its neighbours fade away; next / previous ease the card to
   the new spec's height; closing shrinks it back into its pill. Arrows: round frosted-glass buttons (like the close
   button) in the margins either side of the card, centred on it. */
@media (max-width: 768px) {
  .section-video-nav-keys {
    display: none !important;
  }

  .section-video-nav-left,
  .section-video-nav-right {
    display: none !important;
  }

  .section-video-buttons-wrap {
    position: relative;
  }

  /* Vertical padding keeps the glass shadows inside the scroller's clip */
  .section-video-buttons {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 12px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 24px 20px 8px;
    /* JS owns this row's scroll position while cards grow / shrink; browser scroll anchoring would nudge it */
    overflow-anchor: none;
  }

  .section-video-buttons::-webkit-scrollbar {
    display: none;
  }

  /* While a card is open the row doesn't scroll by hand (swipes step the specs instead), and it gets slack at both
     ends — half a screen of padding on the left, a screen-wide spacer on the right — so the first / last card can sit
     centred and the scroll position isn't clamped while the last card is still growing out of its narrower pill.
     (A spacer, not padding: that much padding would widen the row itself past the screen.) */
  .section-video-buttons-col.has-expanded .section-video-buttons {
    overflow-x: hidden;
    padding-left: 50vw;
  }

  .section-video-buttons-col.has-expanded .section-video-buttons::after {
    content: '';
    flex: 0 0 100vw;
    height: 1px;
  }

  .video-view-btn {
    --pv-card-w: min(calc(100vw - 80px), 423px);
    --pv-card-pad: 24px;
    padding: 0 32px 0 16px !important;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.224px;
  }

  .video-view-btn.active {
    line-height: 20px;
  }

  .section-video-buttons-col.has-expanded .video-view-btn:not(.active) {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  .video-view-btn:not(.active) {
    transition: opacity 0.3s ease, background 0.25s ease, box-shadow 0.25s ease;
  }

  .section-video-buttons-col.has-expanded .section-video-nav-left,
  .section-video-buttons-col.has-expanded .section-video-nav-right {
    display: inline-flex !important;
    position: absolute;
    top: auto;
    bottom: calc(8px + (var(--pv-card-h, 128px) - 36px) / 2);
    z-index: 4;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: bottom 0.4s ease;
  }

  .section-video-buttons-col.has-expanded .section-video-nav-left {
    left: 2px;
  }

  .section-video-buttons-col.has-expanded .section-video-nav-right {
    right: 2px;
  }
}

/* ============================================
   UNUSED ON INDEX – styles for other pages (Developer, Enterprise, Geek out, About, etc.)
   Keep here for those templates; change branding in shared components above.
   ============================================ */

.prism-section {
  background: linear-gradient(135deg, var(--indigo-violet) 0%, var(--umbra-black) 100%);
}

.developer-section {
  background-color: var(--umbra-black);
}

/* Developer page hero – dark background, no video */
.developer-hero {
  background-color: var(--pure-black);
  position: relative;
  overflow: hidden;
}

.developer-hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg-desktop);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.developer-hero__bg-mobile {
  display: none;
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg-mobile);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Hero image floats: edges feather into the black page on every side (mask covers the mobile image too),
   with a dark vignette so the fade passes through black, not gray. Same treatment as the developer CTA. */
.developer-hero__bg {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
}

.developer-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, transparent 0%, rgba(0, 0, 0, 0.25) 55%, #000 100%);
  pointer-events: none;
}

.developer-hero .section__content {
  z-index: 2;
}

/* Phone: glasses move up into the clear centre of the feather mask; copy + buttons sit low, buttons side by side */
@media (max-width: 767.98px) {
  .developer-hero.section--hero {
    align-items: flex-end !important;
  }

  .developer-hero__bg-mobile {
    transform: translateY(-22%);
  }

  .developer-hero .section__content {
    padding-bottom: 18vh;
  }

  .developer-hero .section__subtitle {
    margin-bottom: 1.75rem !important;
  }

  .developer-hero .d-flex {
    flex-wrap: nowrap !important;
    gap: 0.6rem !important;
  }

  .developer-hero .btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem;
  }
}

/* Developer page code blocks – glass style */
.dev-code-inline,
.dev-code-block {
  background: var(--glass-btn-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}

.dev-code-block pre {
  font-size: 14px;
  line-height: 1.6;
}

.dev-code-block code {
  color: var(--moon-silver);
}

/* So Many Apps – horizontal scrolling (full width/height, heading overlay, slower speed) */
.app-montage-section {
  width: 100vw;
  min-width: 100%;
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  background-color: var(--pure-black);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.app-montage-section__overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  text-align: center;
  padding: 0 1rem;
}

.app-montage-section__overlay::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 120vmax;
  height: 120vmax;
  max-width: 200%;
  max-height: 200%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.6) 25%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0.12) 70%,
    transparent 85%
  );
  z-index: -1;
}

.app-montage-section__overlay .section__title {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 1),
               0 4px 12px rgba(0, 0, 0, 1),
               0 8px 24px rgba(0, 0, 0, 0.9);
}

.app-montage-section__tracks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

/* Vignette painted over the full-height video (exactly #000 at the edges, so it never shows a hard rectangle):
   top and bottom fade to black, the sides fade a little, and a soft dark glow sits behind the title. An overlay rather than mask-image because Safari can
   ignore masks on <video>. */
.app-montage-section__tracks::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 26% at 50% 50%, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0) 86%, #000 100%),
    linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, #000 100%);
}

/* Phones: a slightly taller top / bottom fade and a lighter side fade (the narrow screen hides the sides) */
@media (max-width: 768px) {
  .app-montage-section__tracks::after {
    background:
      linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 84%, #000 100%),
      linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0) 92%, rgba(0, 0, 0, 0.6) 100%);
  }
}

/* The montage stays dark until the title has faded up (.is-inview, common.js), then fades in just after it.
   Behind @supports so a browser without :has() just shows it as before (never stuck hidden). */
@supports selector(:has(*)) {
  .app-montage-section__tracks {
    opacity: 0;
    transition: opacity 1.6s ease 0.6s;
  }

  .app-montage-section:has(.app-montage-section__overlay .is-inview) .app-montage-section__tracks {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-montage-section__tracks {
    transition: none;
  }
}

/* Pre-rendered montage loop (scripts/make_montage_video.py), rendered for the full-height section */
.app-montage-section__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* App Montage Hero – legacy (kept for reference) */
.app-montage-hero {
  padding-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.app-montage-hero__tracks {
  position: absolute;
  inset: 0;
  top: 100px;
  width: 100%;
  overflow: hidden;
  z-index: 0;
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.app-montage-hero__overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem 1rem;
}

.app-montage-hero__box {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  box-shadow: 0 0 100px 40px rgba(0, 0, 0, 0.35);
  border-radius: 1rem;
  padding: 1.5rem 2.5rem;
  max-width: 52rem;
  width: 90%;
  margin: 0 auto;
}

.app-montage-hero__subheading {
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.4;
}

.app-montage-cta {
  font-size: 1rem;
  animation: app-montage-cta-pulse 3s ease-in-out infinite;
  opacity: 0.85;
}

@keyframes app-montage-cta-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* So Many Apps – liquid glass grid (full viewport, heading overlay) */
.app-grid-section {
  min-height: 100vh;
  height: 100vh;
  background-color: var(--pure-black);
  padding-top: 0;
  overflow: hidden;
}

.app-grid-heading--overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  text-align: center;
  padding: 0 1rem;
}

.app-grid-wrapper {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.app-grid-card {
  aspect-ratio: 1;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.app-grid-card:hover,
.app-grid-card:focus {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
  outline: none;
}

.app-grid-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 0;
  transition: opacity 0.35s ease-in-out;
}

.app-grid-card__content--out {
  opacity: 0;
}

.app-grid-card__content--in {
  opacity: 1;
}

.app-grid-card__icon-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.app-grid-card__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.app-grid-card__title {
  font-size: 0.7rem;
  line-height: 1.2;
  color: var(--moon-silver);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
}

@media (max-width: 767px) {
  .app-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(50, 1fr);
    gap: 4px;
  }

  .app-grid-card__title {
    font-size: 0.65rem;
  }

  .app-grid-card__icon-wrap,
  .app-grid-card__icon {
    width: 20px;
    height: 20px;
  }
}

/* Developer quote block (MIT Reality Hack) */
.dev-quote {
  margin: 0;
  padding: 0;
  border: none;
}

.dev-quote__text {
  font-weight: 400;
  line-height: 1.3;
}

/* Get Started merged section – pills and cards */
/* Get Started in Minutes – heading + a 16:9 video box sized to show the whole laptop (no full-screen min height) */
.get-started-video-section {
  background-color: var(--pure-black);
  display: flex;
  flex-direction: column;
}

.get-started-video-section__head {
  flex: 0 0 auto;
  min-height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7rem 1rem 1.5rem;
}

.get-started-video-section__head-inner {
  max-width: min(72rem, 100%);
}

.get-started-video-section__subtitle {
  max-width: 40rem;
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.get-started-video-section__subtitle--visible {
  opacity: 1;
}

.get-started-video-section__head .section__title {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 1),
               0 4px 12px rgba(0, 0, 0, 1),
               0 8px 24px rgba(0, 0, 0, 0.9);
}

.get-started-video-section__video-wrap {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  height: min(56.25vw, 70vh);
  position: relative;
  overflow: hidden;
  /* It's a <button> (tap toggles the lid): reset button chrome */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.get-started-video-section__video-wrap:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: -4px;
}

.get-started-video-section__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}

@media (max-width: 768px) {
  .get-started-video-section__head {
    min-height: 0;
    padding: 5.5rem 1.25rem 0.5rem;
  }
  /* Laptop at ~86% of screen width; box just tall enough for the zoomed frame */
  .get-started-video-section__video-wrap {
    height: 68vw;
    margin-bottom: 1.5rem;
  }
  .get-started-video-section__video {
    transform: scale(1.2);
    transform-origin: center center;
  }
}

.get-started-merged .get-started-pill {
  min-height: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.get-started-merged .get-started-sim-card {
  border-left: 3px solid var(--indigo-violet);
}

.get-started-merged .dev-quote-card {
  border-left: 3px solid rgba(255, 255, 255, 0.4);
}

.get-started-merged .dev-quote-card .dev-quote__text {
  font-size: 1.5rem;
  line-height: 1.4;
}

@media (min-width: 992px) {
  .get-started-merged .dev-quote-card .dev-quote__text {
    font-size: 1.75rem;
  }
}

@media (max-width: 768px) {
  .dev-quote__text {
    font-size: 1.5rem;
  }
  .get-started-merged .get-started-pill {
    min-height: 4rem;
  }
}


.about-section {
  background-color: var(--moon-silver);
}

.features-section {
  background: linear-gradient(135deg, var(--indigo-violet) 0%, var(--umbra-black) 100%);
}

/* Maker sticky layout (not used on current index) */
.maker-sticky-zone {
  position: relative;
}

.maker-heading-block-wrap {
  padding-top: 30%;
  width: 100%;
}

.maker-title-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.maker-sticky-heading-bar {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  z-index: 5;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  background: linear-gradient(to right, rgba(13, 13, 13, 0.45) 0%, rgba(13, 13, 13, 0) 55%);
}

.maker-sticky-heading-bar.maker-sticky-heading-released {
  position: absolute;
  top: var(--release-top);
  margin-bottom: 0;
}

.maker-slide-tagline {
  font-size: 1.25rem;
  font-weight: 400;
  opacity: 0.95;
}

/* ============================================
   DEVELOPER PAGE
   ============================================ */

.dev-section {
  background-color: var(--pure-black);
  position: relative;
}

.dev-section .section__content {
  position: relative;
  z-index: 2;
}

/* Section 1: App Montage */
.dev-montage {
  padding-top: 100px;
}

.dev-montage-track-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.dev-montage-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: dev-montage-scroll 45s linear infinite;
  padding: 0.5rem 0;
}

.dev-montage-item {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 9999px;
  font-size: 0.95rem;
  color: var(--moon-silver);
  white-space: nowrap;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.dev-montage-more {
  font-size: 1rem;
  letter-spacing: 0.02em;
  animation: dev-montage-pulse 2.5s ease-in-out infinite;
}

@keyframes dev-montage-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes dev-montage-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Section 2: Why Build — pillars (left-aligned) */
.dev-quote {
  max-width: 32em;
  font-size: 1.25rem;
  line-height: 1.7;
}

.dev-pillar {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.dev-pillar:hover {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
}

.dev-pillar-title {
  font-size: 1.15rem;
}

.dev-pillar-list li {
  padding: 0.15rem 0;
  border-bottom: 1px solid transparent;
}

.dev-pillar-list li + li {
  margin-top: 0.1rem;
}

/* Section 3: Real Proof */
.dev-proof-quote {
  max-width: 28em;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--white);
}

/* Section 4: DX */
.dev-checklist {
  font-size: 1.1rem;
}

.dev-check-item {
  color: var(--moon-silver);
}

.dev-dx-python {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}

.dev-dx-python ul li {
  padding: 0.25rem 0;
}

/* Developer page: code block */
.dev-code-block {
  font-family: 'Libre Franklin', monospace;
}

.dev-code-inline {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--moon-silver);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.dev-code-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--glass-border);
  overflow-x: auto;
}

.dev-code-pre {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  white-space: pre;
}

.dev-code-pre code {
  color: var(--moon-silver);
  background: none;
  padding: 0;
}

/* Section 5: Simulator */
.dev-sim-list li {
  padding: 0.35rem 0;
}

.dev-sim-cta {
  font-family: 'PPValve', sans-serif;
}

/* Section 6: Community */
.dev-community-list li {
  padding: 0.35rem 0;
}

.dev-own-hardware {
  max-width: 32em;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}

/* Keep Proof and Tagline centered */
.dev-proof .section__content,
.dev-tagline .section__content {
  text-align: center;
}

/* Tagline */
.dev-tagline {
  border-top: 1px solid var(--glass-border);
}

/* ============================================
   HOME: WHAT CAN IT DO? (#section2) — highlights gallery
   ============================================ */

.what-it-does-section {
  /* One slide = the page content column; title shares its left edge */
  /* Apple "highlights" gallery proportions: card = content column min(87.5vw, 1260px) */
  --wid-slide-w: min(1260px, 87.5vw);
  --wid-gap: 1.25rem;
  --wid-radius: 28px;
  --wid-card-bg: #1d1d1f;
  padding-block: clamp(4rem, 8vh, 7rem) clamp(2.5rem, 5vh, 4rem);
  background-color: var(--pure-black);
  overflow: visible; /* allow sticky controls */
  overflow-x: clip;
}

/* Makers gallery (#section4): pure black, same as the privacy section below it */
#section4.what-it-does-section {
  background-color: var(--pure-black);
}

.what-it-does-section__inner {
  width: var(--wid-slide-w);
}

/* Full-bleed track; active slide snaps to the content column's left edge, next one peeks in */
/* The subtitle's accent word: the subtitle's own colour with a soft white highlight sweeping across it now and then */
.what-it-does-section__accent {
  background: linear-gradient(100deg, currentColor 0%, currentColor 40%, #ffffff 50%, currentColor 60%, currentColor 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: wid-accent-shimmer 4.5s ease-in-out 1s infinite;
}

@keyframes wid-accent-shimmer {
  0% { background-position: 100% 0; }
  35%, 100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .what-it-does-section__accent {
    animation: none;
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}

.what-it-does-carousel__track {
  display: flex;
  gap: var(--wid-gap);
  /* 100% = track width (excludes the scrollbar), so this lines up with the centered title */
  padding-inline: calc((100% - var(--wid-slide-w)) / 2);
  scroll-padding-inline: calc((100% - var(--wid-slide-w)) / 2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.what-it-does-carousel__track::-webkit-scrollbar {
  display: none;
}

.what-it-does-carousel__track:focus-visible {
  outline: none;
}

.what-it-does-carousel__track:focus-visible .what-it-does-carousel__slide.is-active .what-it-does-section__frame {
  outline: 2px solid var(--indigo-violet);
  outline-offset: 4px;
}

.what-it-does-carousel__slide {
  flex: 0 0 var(--wid-slide-w);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.what-it-does-carousel__slide:not(.is-active) {
  cursor: pointer;
}

/* Rounded card: video on top, liquid-glass name strip underneath (a blurred reflection of
   the video). Laptop/tablet: 2:1 video, card capped at ~80vh tall. Phone: portrait
   4:5 card with pre-cropped 10:9 videos (see the max-width media query below). */
.what-it-does-section__frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--wid-radius);
  overflow: hidden;
  background-color: var(--wid-card-bg);
}

.what-it-does-section__video {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9; /* overridden below: 2:1 on laptop/tablet, 10:9 on phones */
  object-fit: cover;
}

/* Laptop/tablet: video is always 2:1. Card width is capped by width (87.5vw, 1260px) AND by
   height, so video + name strip never exceed ~80% of the screen height (strip ≈ 5.5rem). */
@media (min-width: 768px) {
  .what-it-does-section {
    --wid-slide-w: min(1260px, 87.5vw, calc((80vh - 5.5rem) * 2));
    --wid-slide-w: min(1260px, 87.5vw, calc((80svh - 5.5rem) * 2));
  }

  .what-it-does-section__video {
    aspect-ratio: 2 / 1;
  }
}

/* Strip: blurred mirror of the video behind a soft tint and a light top edge; text centered */
.what-it-does-section__caption {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 1.75rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* While a lazy slide's video hasn't loaded, hide its strip (JS adds .is-ready on first frame).
   Scoped to .is-media-managed so captions still show if JS is off. Space is kept to avoid jumps. */
.what-it-does-carousel.is-media-managed .what-it-does-section__caption {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.what-it-does-carousel.is-media-managed .what-it-does-section__frame.is-ready .what-it-does-section__caption {
  opacity: 1;
}

.what-it-does-section__caption::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.38));
}

/* Tiny canvas stretched and blurred; oversized so the blur's soft edges fall outside the strip */
.what-it-does-section__reflection {
  position: absolute;
  top: -30%;
  left: -30%;
  z-index: -2;
  width: 160%;
  height: 160%;
  filter: blur(10px) saturate(1.5) brightness(0.9);
  pointer-events: none;
}

.what-it-does-section__caption-name {
  font-family: 'PPValve', sans-serif;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--white);
}

.what-it-does-section__caption-role {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--moon-silver);
}

/* Single-line caption (use-case slides) */
.what-it-does-section__caption-line {
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--white);
}

/* Controls: centered dot pill; sticks to viewport bottom while gallery is on screen */
.what-it-does-carousel__controls {
  position: sticky;
  bottom: 1.5rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.what-it-does-carousel__dots {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 56px;
  padding: 0 1.5rem;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
}

.what-it-does-carousel__dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: width 0.4s ease, background-color 0.3s ease;
}

.what-it-does-carousel__dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* Active dot stretches into a track; the fill shows the current video's progress */
.what-it-does-carousel__dot.is-active {
  width: 48px;
  background: rgba(255, 255, 255, 0.35);
}

.what-it-does-carousel__dot-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left center;
}

.what-it-does-carousel__dot:not(.is-active) .what-it-does-carousel__dot-fill {
  transform: scaleX(0) !important;
}

/* Browsing by hand (what-it-does.js): the active dot stays stretched to mark the slide, but no longer fills; it
   sits solid white instead */
.what-it-does-carousel.is-manual .what-it-does-carousel__dot.is-active .what-it-does-carousel__dot-fill {
  transform: none !important;
  background: var(--white);
}

.what-it-does-carousel__dot:focus-visible {
  outline: 2px solid var(--indigo-violet);
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  .what-it-does-section {
    --wid-slide-w: 86vw;
    --wid-gap: 0.75rem;
    --wid-radius: 18px;
  }

  .what-it-does-carousel__dots {
    height: 48px;
    padding: 0 1.125rem;
  }

  /* Portrait card on phones. The video gets a fixed, slightly-wider-than-square shape
     (crops in a little from the sides) and the name strip takes the remaining height. */
  .what-it-does-section__frame {
    aspect-ratio: 4 / 5;
  }

  /* Matches the pre-cropped *_mobile.mp4 files (10:9), so nothing is cropped in the browser.
     Crop position is chosen when generating them: scripts/make_video_crops.py --phone-anchor */
  .what-it-does-section__video {
    aspect-ratio: 10 / 9;
    /* Safety net: if a 16:9 file ever lands here, keep its right edge rather than center-cropping */
    object-position: 100% 50%;
  }

  .what-it-does-section__caption {
    padding: 1rem 1.25rem;
  }

  .what-it-does-section__caption-name {
    font-size: 1.125rem;
  }

  /* Last name on its own line on phones */
  .what-it-does-section__caption-name-last {
    display: block;
  }

  .what-it-does-section__caption-role {
    font-size: 0.875rem;
  }

  .what-it-does-section__caption-line {
    font-size: 0.9375rem;
  }

  /* One-liner cards: strip sizes to its text instead of filling a 4:5 card. The min-height
     keeps every card in the carousel the same height (two lines of text fit comfortably). */
  .what-it-does-section__frame--line {
    aspect-ratio: auto;
  }

  .what-it-does-section__frame--line .what-it-does-section__caption {
    min-height: 5rem;
    padding: 0.75rem 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .what-it-does-carousel__track {
    scroll-behavior: auto;
  }

  .what-it-does-carousel__dot {
    transition: none;
  }
}

/* ============================================
   HOME: RESERVE BANNER (#section-reserve-banner) — full-bleed preview-site hero still + CTA
   ============================================ */

.reserve-banner {
  background-color: var(--pure-black);
}

.reserve-banner__bg,
.reserve-banner__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.reserve-banner__bg img {
  object-fit: cover;
  object-position: center center;
}

/* Same 28% scrim as the preview hero, a touch darker behind the text for legibility */
.reserve-banner__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 60%),
    rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

/* The photo's lower half holds the subject, so the text block lives in the upper half with its
   bottom edge (the button) 20–50px above the photo's midline (scales with screen height). The image is object-fit: cover and
   centered, so its vertical middle always equals the section's middle at every resolution
   (the phone crop is a side-crop of the same photo, so the same holds there). */
.reserve-banner__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% + clamp(20px, 5vh, 50px));
  z-index: 1;
}

.reserve-banner__subtitle {
  max-width: 36rem;
}

/* ============================================
   DEVELOPER: PRECISION (#section-precision) — Oura "Accuracy starts at the finger" pattern:
   centered headline → wide rounded media → two-column copy → 4 divided stats
   ============================================ */

.precision-section {
  background-color: var(--pure-black);
  padding-block: clamp(4rem, 10vh, 8rem);
}

/* Same content column as the galleries */
.precision-section__inner {
  width: min(1260px, 87.5vw);
}

.precision-section__title {
  margin-bottom: clamp(2.5rem, 5vh, 3.5rem);
}

.precision-section__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: 28px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 55%, #1c1c1f 0%, #0b0b0c 70%);
}

.precision-section__image {
  display: block;
  height: 86%;
  width: auto;
  max-width: 90%;
  object-fit: contain;
}

.precision-section__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.precision-section__copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  margin-block: clamp(3rem, 7vh, 5rem) clamp(3rem, 7vh, 5rem);
}

.precision-section__subtitle {
  font-size: clamp(2rem, 3.4vw, 3.5rem);
  line-height: 1.1;
  margin: 0;
}

.precision-section__body {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--white);
  margin: 0;
}

.precision-section__body + .precision-section__body {
  margin-top: 1rem;
}

.precision-section__body--muted {
  color: var(--moon-silver);
  opacity: 0.8;
}

/* Stats: 4 across with thin dividers (2×2 on tablet, stacked on phone) */
.precision-section__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.precision-section__stat {
  padding: 0 clamp(1rem, 2.5vw, 2.5rem);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.precision-section__stat:first-child {
  padding-left: 0;
}

.precision-section__stat:last-child {
  padding-right: 0;
  border-right: 0;
}

.precision-section__stat p {
  margin: 0;
}

.precision-section__stat-value {
  font-size: clamp(2.25rem, 3.4vw, 3.75rem);
  white-space: nowrap;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 0.5rem !important;
}

.precision-section__stat-label {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--white);
}

.precision-section__stat-note {
  margin-top: 0.375rem !important;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--moon-silver);
  opacity: 0.7;
}

@media (max-width: 991.98px) {
  .precision-section__stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 3rem;
  }

  .precision-section__stat,
  .precision-section__stat:first-child,
  .precision-section__stat:last-child {
    padding: 0 1.5rem 0 0;
    border-right: 0;
  }
}

@media (max-width: 767.98px) {
  .precision-section__inner {
    width: 86vw;
  }

  .precision-section__media {
    aspect-ratio: 4 / 5;
    border-radius: 18px;
  }

  .precision-section__image {
    width: 92%;
    height: auto;
  }

  .precision-section__copy {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .precision-section__stats {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
    text-align: center;
  }

  .precision-section__stat,
  .precision-section__stat:first-child,
  .precision-section__stat:last-child {
    padding: 0;
  }
}

/* Privacy popup: paragraphs from copy.json */
.opt-out-modal__body-text p + p {
  margin-top: 1rem;
}

/* ============================================
   DEVELOPER: SPECS — "Under the hood." intro, bento grid with pure-CSS visuals, tech specs sheet
   ============================================ */

.specs-wrap {
  width: min(1260px, 87.5vw);
  margin: 0 auto;
}

.specs-kicker,
.spec-tile__kicker {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a48af0;
}

/* ---------- Intro ---------- */
.specs-intro {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 12vh, 9rem) clamp(3rem, 7vh, 5rem);
  background-color: var(--pure-black);
}

.specs-intro__glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(1100px, 120vw);
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(136, 102, 222, 0.28) 0%, rgba(136, 102, 222, 0.06) 45%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.specs-intro__subtitle {
  max-width: 40rem;
}

.specs-highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(3rem, 7vh, 5rem);
}

.specs-highlight {
  padding: 0.5rem 1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.specs-highlight:first-child {
  border-left: 0;
}

.specs-highlight p {
  margin: 0;
}

.specs-highlight__value {
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #c9bbf3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.specs-highlight__unit {
  margin-left: 0.15em;
  font-size: 0.38em;
  letter-spacing: 0.02em;
}

.specs-highlight__label {
  margin-top: 0.75rem !important;
  font-size: 0.9375rem;
  color: var(--moon-silver);
  opacity: 0.8;
}

/* ---------- Bento ---------- */
.specs-bento-section {
  padding-block: clamp(3rem, 7vh, 5rem);
  background-color: var(--pure-black);
}

.specs-bento-section__subtitle {
  max-width: none;
}

.specs-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}

.spec-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: 1.75rem;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.015) 100%);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

/* Cursor spotlight (position set by specs.js) */
.spec-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, -20%), rgba(136, 102, 222, 0.16), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.specs-bento:hover .spec-tile::before {
  opacity: 1;
}

.spec-tile:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.spec-tile--hero { grid-column: span 7; grid-row: span 2; }
.spec-tile--wide { grid-column: span 5; }
.spec-tile--third { grid-column: span 4; }
.spec-tile--half { grid-column: span 6; }
.spec-tile--narrow { grid-column: span 3; }

/* Full width (the on-device models tile, last): visual on the left, copy on the right on wide screens */
.spec-tile--full {
  grid-column: 1 / -1;
  min-height: 0;
}

/* Room for the visual's "FPGA" label (it hangs below the grid) before the copy, when stacked */
.spec-tile--full .spec-visual {
  margin-bottom: 2.25rem;
}

@media (min-width: 992px) {
  .spec-tile--full {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
    padding: 2.25rem 3rem;
  }

  .spec-tile--full .spec-visual {
    flex: 0 0 auto;
    width: 300px;
    min-height: 220px;
    margin-bottom: 0;
  }

  .spec-tile--full .spec-fpga {
    transform: scale(1.35);
  }

  .spec-tile--full .spec-tile__copy {
    flex: 1 1 auto;
  }

  .spec-tile--full .spec-tile__title {
    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  }

  .spec-tile--full .spec-tile__body {
    font-size: 1.05rem;
  }
}

.spec-visual {
  position: relative;
  flex: 1 1 auto;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.spec-tile--hero .spec-visual {
  min-height: 320px;
}

.spec-tile__copy p,
.spec-tile__copy h3 {
  margin: 0;
}

.spec-tile__title {
  margin-top: 0.5rem !important;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--white);
}

.spec-tile--hero .spec-tile__title {
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
}

/* "Learn more about our Design Decisions" under the spec grid */
.specs-design-link {
  margin: 2.5rem 0 0;
  text-align: center;
}

.specs-design-link a {
  font-size: 1.05rem;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  transition: text-decoration-color 0.2s ease;
}

.specs-design-link a:hover,
.specs-design-link a:focus-visible {
  text-decoration-color: var(--white);
}

.spec-tile__body {
  margin-top: 0.5rem !important;
  font-size: 0.975rem;
  line-height: 1.5;
  color: var(--moon-silver);
  opacity: 0.85;
}

/* Animations run only while the grid is on screen (specs.js) */
.specs-bento:not(.is-animating) .spec-visual,
.specs-bento:not(.is-animating) .spec-visual * {
  animation-play-state: paused !important;
}

/* --- Visual: field of view --- */
.spec-fov {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.spec-fov__eye {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px 4px rgba(164, 138, 240, 0.7);
}

.spec-fov__wedge {
  position: absolute;
  left: 50%;
  bottom: 31px;
  width: 640px;
  height: 640px;
  margin-left: -320px;
  transform: translateY(50%);
  background: conic-gradient(from -15deg at 50% 50%, rgba(136, 102, 222, 0.55) 0deg 30deg, transparent 30deg 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0 34%, transparent 50%);
  mask: radial-gradient(circle at 50% 50%, #000 0 34%, transparent 50%);
  animation: specBreathe 4s ease-in-out infinite;
}

.spec-fov__arc {
  position: absolute;
  left: 50%;
  bottom: 31px;
  width: 560px;
  height: 560px;
  margin-left: -280px;
  transform: translateY(50%);
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.14);
}

.spec-fov__panel {
  position: absolute;
  left: 50%;
  bottom: 220px;
  width: 104px;
  height: 64px;
  margin-left: -52px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 30px rgba(136, 102, 222, 0.35);
}

.spec-fov__panel span {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.75);
}

.spec-fov__panel span:nth-child(2) { width: 70%; opacity: 0.7; }
.spec-fov__panel span:nth-child(3) { width: 45%; opacity: 0.5; }

.spec-fov__label {
  position: absolute;
  left: calc(50% + 72px);
  bottom: 250px;
  font-family: 'PPValve', sans-serif;
  font-size: 2rem;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff, #b9a6ef);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Visual: cores --- */
.spec-cores {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 56px);
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.spec-cores__core {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid rgba(164, 138, 240, 0.45);
  background: linear-gradient(135deg, rgba(136, 102, 222, 0.35), rgba(136, 102, 222, 0.08));
  animation: specCorePulse 2.4s ease-in-out infinite;
}

.spec-cores__core:nth-child(2) { animation-delay: 0.3s; }
.spec-cores__core:nth-child(3) { animation-delay: 0.9s; }
.spec-cores__core:nth-child(4) { animation-delay: 0.6s; }

.spec-cores__tag {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--moon-silver);
  opacity: 0.6;
}

/* --- Visual: memory --- */
.spec-memory {
  width: min(320px, 90%);
}

.spec-memory__bar {
  position: relative;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 12px);
}

.spec-memory__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6b4fb8, #a48af0);
  box-shadow: 0 0 20px rgba(136, 102, 222, 0.6);
  animation: specMemory 6s ease-in-out infinite;
}

.spec-memory__ticks {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--moon-silver);
}

/* --- Visual: gaze --- */
.spec-gaze {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.spec-gaze__eye {
  position: relative;
  width: 132px;
  height: 64px;
  border-radius: 50% / 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.spec-gaze__pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #c9bbf3, #6b4fb8 60%, #2a1f4d);
  box-shadow: 0 0 14px rgba(136, 102, 222, 0.8);
  animation: specGaze 4.5s ease-in-out infinite;
}

.spec-gaze__targets {
  display: flex;
  gap: 36px;
}

.spec-gaze__targets span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  animation: specTarget 4.5s ease-in-out infinite;
}

.spec-gaze__targets span:nth-child(1) { animation-delay: 0s; }
.spec-gaze__targets span:nth-child(2) { animation-delay: 1.5s; }
.spec-gaze__targets span:nth-child(3) { animation-delay: 3s; }

/* --- Visual: terminal --- */
.spec-terminal {
  width: min(280px, 92%);
  padding: 0.9rem 1rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.45);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

.spec-terminal p {
  margin: 0;
}

.spec-terminal__dots {
  display: flex;
  gap: 6px;
  margin-bottom: 0.6rem;
}

.spec-terminal__dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.spec-terminal__prompt {
  color: #a48af0;
}

.spec-terminal__out {
  color: var(--moon-silver);
  opacity: 0.75;
}

.spec-terminal__cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: #a48af0;
  animation: specBlink 1.1s steps(1) infinite;
}

/* --- Visual: graphics --- */
.spec-gl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  perspective: 600px;
}

.spec-gl__cube {
  position: relative;
  width: 70px;
  height: 70px;
  transform-style: preserve-3d;
  animation: specSpin 9s linear infinite;
}

.spec-gl__cube span {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1.5px solid rgba(164, 138, 240, 0.7);
  background: rgba(136, 102, 222, 0.08);
}

.spec-gl__cube span:nth-child(1) { transform: translateZ(35px); }
.spec-gl__cube span:nth-child(2) { transform: rotateY(90deg) translateZ(35px); }
.spec-gl__cube span:nth-child(3) { transform: rotateX(90deg) translateZ(35px); }

.spec-gl__text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--moon-silver);
  opacity: 0.7;
}

/* --- Visual: FPGA (logic cells lighting up in sequence) --- */
.spec-fpga {
  position: relative;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.spec-fpga__grid {
  display: grid;
  grid-template-columns: repeat(6, 22px);
  gap: 7px;
}

.spec-fpga__grid span {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.spec-fpga__grid span.is-lit {
  border-color: rgba(164, 138, 240, 0.45);
  animation: specFpga 3s ease-in-out infinite;
  animation-delay: calc(var(--d) * 0.35s);
}

.spec-fpga__tag {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--moon-silver);
  opacity: 0.7;
}

@keyframes specFpga {
  0%, 100% { background: rgba(136, 102, 222, 0.08); box-shadow: none; }
  30%, 45% { background: rgba(164, 138, 240, 0.75); box-shadow: 0 0 14px rgba(136, 102, 222, 0.6); }
}

/* --- Visual: brightness (1500+ nits): a lens with a heads-up panel that brightens as the bar fills --- */
.spec-bright {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.spec-bright__lens {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 100px;
  border-radius: 34px 34px 42px 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}

.spec-bright__panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 74px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(233, 226, 255, 0.7);
  background: rgba(233, 226, 255, 0.12);
  animation: specBrightPanel 3.2s ease-in-out infinite;
}

.spec-bright__panel i {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: #e9e2ff;
}

.spec-bright__panel i:nth-child(2) { width: 75%; }
.spec-bright__panel i:nth-child(3) { width: 50%; }

.spec-bright__bar {
  position: relative;
  width: 10px;
  height: 92px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.spec-bright__bar span {
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  border-radius: inherit;
  background: linear-gradient(0deg, rgba(136, 102, 222, 0.85), #e9e2ff);
  box-shadow: 0 0 12px rgba(200, 186, 255, 0.5);
  animation: specBrightBar 3.2s ease-in-out infinite;
}

@keyframes specBrightPanel {
  0%, 100% { filter: brightness(0.6); box-shadow: 0 0 6px rgba(200, 186, 255, 0.2); }
  55%, 80% { filter: brightness(1.25); box-shadow: 0 0 28px rgba(200, 186, 255, 0.75); }
}

@keyframes specBrightBar {
  0%, 100% { height: 30%; }
  55%, 80% { height: 96%; }
}

/* --- Visual: camera (13MP, 84° HFOV) --- */
.spec-camera {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.spec-camera__lens {
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #0b0b10 0 26%, #1c1830 27% 40%, #0b0b10 41% 52%, #2a2445 53% 56%, #0b0b10 57% 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.9), 0 0 30px rgba(136, 102, 222, 0.18);
}

.spec-camera__iris {
  position: absolute;
  top: 28%;
  left: 30%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}

.spec-camera__specs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.spec-camera__specs em {
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--moon-silver);
  opacity: 0.8;
}

/* --- Visual: audio --- */
.spec-audio {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 96px;
}

.spec-audio span {
  width: 6px;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(180deg, #c9bbf3, #6b4fb8);
  transform-origin: center;
  animation: specBars 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.11s);
}

/* --- Visual: wireless --- */
.spec-wireless {
  width: 150px;
  height: 110px;
  overflow: visible;
}

.spec-wireless__arc {
  fill: none;
  stroke: rgba(164, 138, 240, 0.9);
  stroke-width: 9;
  stroke-linecap: round;
  animation: specWave 2.4s ease-in-out infinite;
}

.spec-wireless__arc--1 { animation-delay: 0s; }
.spec-wireless__arc--2 { animation-delay: 0.3s; }
.spec-wireless__arc--3 { animation-delay: 0.6s; }

.spec-wireless__dot {
  fill: #a48af0;
  filter: drop-shadow(0 0 6px rgba(164, 138, 240, 0.9));
}

/* --- Visual: sensors --- */
.spec-sensors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 260px;
}

.spec-sensors__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.85rem;
  color: var(--white);
}

.spec-sensors__chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a48af0;
  box-shadow: 0 0 8px #a48af0;
  animation: specBeakon 2.4s ease-in-out infinite;
}

.spec-sensors__chip:nth-child(2)::before { animation-delay: 0.8s; }
.spec-sensors__chip:nth-child(3)::before { animation-delay: 1.6s; }

/* --- Visual: Raven Wings --- */
.spec-wings {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.spec-wings__pair {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.spec-wings__cell {
  position: relative;
  width: 84px;
  height: 30px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  padding: 4px;
}

.spec-wings__cell::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 4px;
  height: 12px;
  margin-top: -6px;
  border-radius: 0 3px 3px 0;
  background: rgba(255, 255, 255, 0.4);
}

.spec-wings__cell i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #6b4fb8, #a48af0);
}

.spec-wings__cell--a i { animation: specCellA 5s ease-in-out infinite; }
.spec-wings__cell--b i { animation: specCellB 5s ease-in-out infinite; }

.spec-wings__swap {
  font-size: 1.25rem;
  color: var(--moon-silver);
  opacity: 0.7;
}

/* --- Keyframes --- */
@keyframes specBreathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@keyframes specCorePulse {
  0%, 100% { box-shadow: 0 0 0 rgba(136, 102, 222, 0); border-color: rgba(164, 138, 240, 0.35); }
  50% { box-shadow: 0 0 22px rgba(136, 102, 222, 0.55); border-color: rgba(201, 187, 243, 0.9); }
}
@keyframes specMemory { 0%, 15% { width: 0%; } 40%, 55% { width: 50%; } 80%, 100% { width: 100%; } }
@keyframes specGaze {
  0%, 22% { transform: translateX(-34px); }
  33%, 55% { transform: translateX(0); }
  66%, 88% { transform: translateX(34px); }
  100% { transform: translateX(-34px); }
}
@keyframes specTarget {
  0%, 30% { background: #c9bbf3; box-shadow: 0 0 12px #a48af0; }
  34%, 100% { background: rgba(255, 255, 255, 0.2); box-shadow: none; }
}
@keyframes specBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes specSpin { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } }
@keyframes specBeakon { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes specBars { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes specWave { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@keyframes specCellA { 0%, 10% { width: 100%; } 50%, 60% { width: 18%; } 100% { width: 100%; } }
@keyframes specCellB { 0%, 10% { width: 18%; } 50%, 60% { width: 100%; } 100% { width: 18%; } }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .specs-bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .spec-tile--hero { grid-column: span 2; grid-row: auto; }
  .spec-tile--wide,
  .spec-tile--third,
  .spec-tile--half,
  .spec-tile--narrow { grid-column: span 1; }
}

@media (max-width: 767.98px) {
  .specs-wrap {
    width: 86vw;
  }

  .specs-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2.25rem;
  }

  .specs-highlight {
    padding-inline: 0.5rem;
  }

  .specs-highlight:nth-child(odd) {
    border-left: 0;
  }

  /* Scales with the column so "ARM64" fits narrow phones (e.g. a folded Galaxy Z Fold cover screen, ~344px) */
  .specs-highlight__value {
    font-size: min(3rem, 9.5vw);
  }

  .specs-bento {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .spec-tile--hero,
  .spec-tile--wide,
  .spec-tile--third,
  .spec-tile--half,
  .spec-tile--narrow {
    grid-column: span 1;
  }

  .spec-tile {
    min-height: 300px;
    padding: 1.5rem;
    border-radius: 22px;
  }

  .spec-tile--hero .spec-visual {
    min-height: 270px;
  }

  /* Field of view, scaled down so the arc and the "30°" label fit a narrow tile */
  .spec-fov__wedge {
    width: 440px;
    height: 440px;
    margin-left: -220px;
  }

  .spec-fov__arc {
    width: 420px;
    height: 420px;
    margin-left: -210px;
  }

  .spec-fov__panel {
    bottom: 150px;
  }

  .spec-fov__label {
    left: calc(50% + 62px);
    bottom: 176px;
    font-size: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spec-visual,
  .spec-visual *,
  .spec-sensors__chip::before {
    animation: none !important;
  }
}

/* ============================================
   DEVELOPER: RAVEN FRAMEWORK SHOWCASE (#raven-framework) + BUILD TIMELINE (#when-to-build)
   ============================================ */

.fw-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 12vh, 8rem) clamp(3rem, 7vh, 5rem);
  background-color: var(--pure-black);
}

.fw-section__glow {
  position: absolute;
  right: -10%;
  top: 25%;
  width: 900px;
  height: 700px;
  background: radial-gradient(ellipse at center, rgba(136, 102, 222, 0.22) 0%, transparent 65%);
  pointer-events: none;
}

.fw-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}

.fw-head__body {
  max-width: 40rem;
}

.fw-stage {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 1.25rem;
  align-items: stretch;
}

/* Code window */
.fw-window {
  min-width: 0;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(20, 18, 30, 0.9), rgba(8, 8, 12, 0.95));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  overflow: hidden;
}

.fw-window__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.fw-window__bar span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.fw-window__bar em {
  margin-left: 0.75rem;
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--moon-silver);
  opacity: 0.6;
}

.fw-code {
  margin: 0;
  padding: 1.25rem 1.4rem 1.5rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  scrollbar-width: thin;
}

.fw-code .k { color: #b99cff; }
.fw-code .s { color: #f2c48d; }
.fw-code .f { color: #8fd3ff; }
.fw-code .n { color: #f2c48d; }
.fw-code .c { color: rgba(218, 221, 229, 0.45); font-style: italic; }

/* Live preview: square "display" with a gaze dot that dwells on the button */
.fw-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.75rem;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}

.fw-preview__display {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  border-radius: 22px;
  background:
    radial-gradient(circle at 30% 20%, rgba(136, 102, 222, 0.18), transparent 55%),
    #07070a;
  border: 1px solid rgba(164, 138, 240, 0.25);
  box-shadow: 0 0 60px rgba(136, 102, 222, 0.18), inset 0 0 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.fw-preview__title {
  margin: 0;
  font-size: 1.6rem;
  color: var(--white);
}

.fw-preview__button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.3rem 0.75rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-size: 0.95rem;
  animation: fwButton 5s ease-in-out infinite;
}

.fw-preview__ring {
  width: 26px;
  height: 26px;
  transform: rotate(-90deg);
}

.fw-preview__ring circle {
  fill: none;
  stroke: #a48af0;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 107;
  stroke-dashoffset: 107;
  animation: fwDwell 5s ease-in-out infinite;
}

.fw-preview__gaze {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: rgba(201, 187, 243, 0.9);
  box-shadow: 0 0 16px 4px rgba(136, 102, 222, 0.7);
  animation: fwGaze 5s ease-in-out infinite;
  pointer-events: none;
}

.fw-preview__caption {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--moon-silver);
  opacity: 0.65;
}

@keyframes fwGaze {
  0% { left: 22%; top: 22%; }
  25% { left: 70%; top: 30%; }
  40%, 82% { left: 38%; top: 61%; }
  100% { left: 22%; top: 22%; }
}

@keyframes fwDwell {
  0%, 42% { stroke-dashoffset: 107; }
  76% { stroke-dashoffset: 0; }
  86% { stroke-dashoffset: 0; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes fwButton {
  0%, 76% { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); }
  80% { background: rgba(136, 102, 222, 0.55); border-color: rgba(201, 187, 243, 0.9); box-shadow: 0 0 24px rgba(136, 102, 222, 0.6); }
  92%, 100% { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); box-shadow: none; }
}

/* Component / peripheral chips */
.fw-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
}

.fw-list__label {
  margin: 0 0 0.85rem;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moon-silver);
  opacity: 0.65;
}

.fw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fw-chip {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--white);
}

.fw-chip--peripheral {
  border-color: rgba(164, 138, 240, 0.35);
  background: rgba(136, 102, 222, 0.08);
}

/* Own-stack card (full width under the framework features) */
.fw-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 2rem;
  align-items: center;
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
}

/* "or" divider: the Linux card is an alternative path, not another framework feature */
.fw-or {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moon-silver);
}

.fw-or::before,
.fw-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

.fw-or span {
  opacity: 0.6;
}

/* Terminal-flavoured card: near-black, violet hairline, monospace kicker, glow behind the shell */
.fw-own {
  min-height: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-color: rgba(164, 138, 240, 0.28);
  background:
    radial-gradient(ellipse 45% 90% at 85% 50%, rgba(136, 102, 222, 0.14), transparent 70%),
    linear-gradient(180deg, #0a0a0e 0%, #050507 100%);
}

.fw-own__copy {
  max-width: 36rem;
}

.fw-own .spec-tile__kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  color: #c9bbf3;
}

.fw-own .spec-tile__kicker::before {
  content: '$ ';
  opacity: 0.6;
}

.fw-own__terminal {
  flex: 0 0 auto;
  width: 300px;
}

/* Simulator card (laptop video) inside the framework showcase */
.fw-sim {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  min-height: 0;
  margin-top: 1.25rem;
}

.fw-sim__media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.fw-sim__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Raven HDK (coming soon) ---------- */
.hdk-section {
  padding-block: clamp(3rem, 7vh, 5rem);
  background-color: var(--pure-black);
}

.hdk-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
}

.hdk-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -15%;
  top: -30%;
  width: 70%;
  height: 160%;
  background: radial-gradient(ellipse at center, rgba(136, 102, 222, 0.16) 0%, transparent 65%);
  pointer-events: none;
}

.hdk-panel__badge {
  margin: 0 0 1.25rem !important;
}

.hdk-panel__body {
  max-width: 30rem;
}

.hdk-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 220px;
}

.hdk-visual__wing {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 64px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.hdk-visual__wing-label {
  font-size: 0.85rem;
  color: var(--white);
  letter-spacing: 0.02em;
}

.hdk-visual__port {
  position: absolute;
  right: -5px;
  top: 50%;
  width: 10px;
  height: 18px;
  margin-top: -9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.55);
}

.hdk-visual__cable {
  position: relative;
  width: clamp(80px, 12vw, 160px);
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 6px, transparent 6px 12px);
}

.hdk-visual__cable span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #c9bbf3;
  box-shadow: 0 0 10px rgba(164, 138, 240, 0.9);
  animation: hdkData 2.4s linear infinite;
}

.hdk-visual__cable span:nth-child(2) { animation-delay: 0.8s; }
.hdk-visual__cable span:nth-child(3) { animation-delay: 1.6s; }

.hdk-visual__module {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 150px;
  height: 150px;
  border-radius: 24px;
  border: 1px dashed rgba(164, 138, 240, 0.55);
  background: rgba(136, 102, 222, 0.06);
}

.hdk-visual__usb {
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--white);
}

.hdk-visual__pins {
  display: flex;
  gap: 6px;
}

.hdk-visual__pins i {
  width: 6px;
  height: 14px;
  border-radius: 2px;
  background: rgba(201, 187, 243, 0.7);
}

.hdk-visual__module-label {
  font-size: 0.8rem;
  color: var(--moon-silver);
  opacity: 0.8;
}

@keyframes hdkData {
  from { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  to { left: calc(100% - 7px); opacity: 0; }
}

@media (max-width: 991.98px) {
  .fw-sim,
  .hdk-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .hdk-visual { min-height: 170px; }
  .hdk-visual__wing { width: 118px; height: 52px; border-radius: 16px; }
  .hdk-visual__wing-label { font-size: 0.72rem; }
  .hdk-visual__cable { width: 48px; }
  .hdk-visual__module { width: 112px; height: 112px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hdk-visual__cable span {
    animation: none !important;
    opacity: 0;
  }
}

/* ---------- Linux opener ---------- */
.linux-opener {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 14vh, 10rem) clamp(3rem, 7vh, 5rem);
  background-color: var(--pure-black);
}

.linux-opener__glow {
  position: absolute;
  left: 50%;
  top: 55%;
  width: min(1000px, 120vw);
  height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(136, 102, 222, 0.18) 0%, rgba(136, 102, 222, 0.04) 45%, transparent 70%);
  pointer-events: none;
}

.linux-opener__subtitle {
  max-width: 42rem;
}

.linux-opener__terminal {
  width: min(560px, 100%);
  margin: clamp(2.5rem, 6vh, 3.5rem) auto 0;
  padding: 1.1rem 1.4rem 1.3rem;
  text-align: left;
  font-size: 0.95rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

/* ---------- SDK + HDK kits ---------- */
.kits-section {
  padding-block: clamp(2rem, 5vh, 3.5rem) clamp(4rem, 9vh, 6rem);
  background-color: var(--pure-black);
}

.kits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.kit-card {
  min-height: 0;
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.kit-card__badge {
  align-self: flex-start;
  margin: 0 0 1rem !important;
}

.kit-card__title {
  margin: 0 0 0.5rem;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.1;
  color: var(--white);
}

.kit-card .spec-tile__body {
  max-width: 30rem;
  font-size: 1.05rem;
}

/* Cards stretch to equal height; pinning the button row to the bottom keeps SDK/HDK buttons level */
.kit-card__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto;
}

.kit-card .spec-tile__body {
  margin-bottom: 1.5rem;
}

/* ---------- Raven Framework statement ---------- */
.fw-statement {
  padding-block: clamp(5rem, 12vh, 8rem);
  background-color: var(--pure-black);
}

.fw-statement__head {
  max-width: none;
}

.fw-statement__body {
  max-width: none;
}

.fw-statement .specs-bento {
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
}

@media (max-width: 991.98px) {
  .kits-grid {
    grid-template-columns: 1fr;
  }
}

/* Purple accent line in a headline (e.g. "Get started in minutes with / Raven Framework") */
.title-accent {
  background: linear-gradient(180deg, #efe9ff 0%, #c4b2ff 55%, #a990ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Parent titles carry dark text-shadows; with transparent text they bleed through and mute the gradient */
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(150, 120, 255, 0.35));
}

/* ---------- Framework features ---------- */
.specs-bento--features .spec-tile {
  min-height: 330px;
}

/* python */
.fx-code {
  width: min(100%, 340px);
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.5);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.86);
  overflow: hidden;
}

.fx-code p { margin: 0; white-space: nowrap; }
.fx-code .k { color: #b99cff; }
.fx-code .f { color: #8fd3ff; }
.fx-code .s { color: #f2c48d; }

/* sensors (wider chip set) */
.spec-sensors--wide {
  max-width: 300px;
}

/* UI kit ("Beautiful"): a gaze dot moves between elements; whatever it looks at scales up */
.fx-ui {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(100%, 240px);
  padding: 0.9rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.fx-ui__card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0.8rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.fx-ui__line { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.6); }
.fx-ui__line--short { width: 60%; opacity: 0.6; }

.fx-ui__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fx-ui__button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  color: var(--white);
}

.fx-ui__toggle {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(136, 102, 222, 0.55);
}

.fx-ui__toggle i {
  position: absolute;
  top: 3px;
  left: 21px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
}

.fx-ui__focus {
  transform-origin: center;
  transition: none;
}

.fx-ui__focus--1 { animation: fxFocus1 6s ease-in-out infinite; }
.fx-ui__focus--2 { animation: fxFocus2 6s ease-in-out infinite; }
.fx-ui__focus--3 { animation: fxFocus3 6s ease-in-out infinite; }

@keyframes fxFocus1 {
  0%, 4% { transform: scale(1); box-shadow: none; }
  10%, 26% { transform: scale(1.06); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.18); }
  32%, 100% { transform: scale(1); box-shadow: none; }
}

@keyframes fxFocus2 {
  0%, 37% { transform: scale(1); }
  43%, 59% { transform: scale(1.12); background: rgba(255, 255, 255, 0.16); }
  65%, 100% { transform: scale(1); }
}

@keyframes fxFocus3 {
  0%, 70% { transform: scale(1); }
  76%, 92% { transform: scale(1.16); }
  98%, 100% { transform: scale(1); }
}

@keyframes fxGazePath {
  0%, 28% { left: 50%; top: 30%; }
  35%, 61% { left: 22%; top: 76%; }
  68%, 94% { left: 84%; top: 76%; }
  100% { left: 50%; top: 30%; }
}

.fx-ui__gaze {
  position: absolute;
  left: 50%;
  top: 30%;
  margin: -6px 0 0 -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(201, 187, 243, 0.9);
  box-shadow: 0 0 12px 3px rgba(136, 102, 222, 0.7);
  animation: fxGazePath 6s ease-in-out infinite;
  pointer-events: none;
}

/* Agent chat */
.fx-agent {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(100%, 270px);
}

.fx-agent__bubble {
  max-width: 85%;
  padding: 0.55rem 0.85rem;
  border-radius: 16px;
  font-size: 0.8rem;
  line-height: 1.35;
}

.fx-agent__bubble--you {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.fx-agent__bubble--agent {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  border: 1px solid rgba(164, 138, 240, 0.4);
  background: rgba(136, 102, 222, 0.14);
  color: #e6defb;
}

.fx-agent__bubble--agent b {
  color: #c9bbf3;
  font-weight: 400;
}

.fx-agent__typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: 0.5rem 0.7rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.fx-agent__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation: fxTyping 1.2s ease-in-out infinite;
}

.fx-agent__typing i:nth-child(2) { animation-delay: 0.15s; }
.fx-agent__typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes fxTyping {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-3px); opacity: 1; }
}

/* Spatial: stacked planes in perspective */
.fx-spatial {
  position: relative;
  width: 200px;
  height: 140px;
  perspective: 700px;
}

.fx-spatial__plane {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 92px;
  margin: -46px 0 0 -75px;
  border-radius: 14px;
  border: 1px solid rgba(164, 138, 240, 0.5);
  background: linear-gradient(135deg, rgba(136, 102, 222, 0.22), rgba(136, 102, 222, 0.04));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fxFloat 6s ease-in-out infinite;
}

.fx-spatial__plane--1 { transform: rotateY(-28deg) rotateX(12deg) translateZ(40px); }
.fx-spatial__plane--2 { transform: rotateY(-28deg) rotateX(12deg) translateZ(0); opacity: 0.7; animation-delay: -2s; }
.fx-spatial__plane--3 { transform: rotateY(-28deg) rotateX(12deg) translateZ(-40px); opacity: 0.45; animation-delay: -4s; }

@keyframes fxFloat {
  0%, 100% { margin-top: -46px; }
  50% { margin-top: -54px; }
}

/* Simulator window */
.fx-sim {
  width: min(100%, 280px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 10, 14, 0.85);
  overflow: hidden;
}

.fx-sim__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.fx-sim__bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.fx-sim__bar em {
  margin-left: 0.5rem;
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  color: var(--moon-silver);
  opacity: 0.6;
}

.fx-sim__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: radial-gradient(circle at 50% 50%, rgba(136, 102, 222, 0.14), transparent 70%);
}

.fx-sim__display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 110px;
  height: 110px;
  border-radius: 14px;
  border: 1px solid rgba(164, 138, 240, 0.3);
  background: #07070a;
  box-shadow: 0 0 30px rgba(136, 102, 222, 0.2);
}

.fx-sim__title {
  font-family: 'PPValve', sans-serif;
  font-size: 0.8rem;
  color: var(--white);
}

.fx-sim__pill {
  width: 52px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  animation: fxPill 3s ease-in-out infinite;
}

@keyframes fxPill {
  0%, 60% { background: rgba(255, 255, 255, 0.08); }
  75% { background: rgba(136, 102, 222, 0.6); }
  100% { background: rgba(255, 255, 255, 0.08); }
}

/* ---------- Ready to Build — option A (no image) ---------- */
.cta-plain {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 15vh, 10rem);
  background-color: var(--pure-black);
}

.cta-plain__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1000px, 120vw);
  height: 560px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(136, 102, 222, 0.22) 0%, rgba(136, 102, 222, 0.05) 45%, transparent 70%);
  pointer-events: none;
}

.cta-plain__tagline {
  font-size: 0.9rem;
  color: var(--moon-silver);
  opacity: 0.6;
}

/* ---------- Ready to Build — option B: violet buttons over the image ---------- */
.btn--violet {
  background: linear-gradient(180deg, rgba(136, 102, 222, 0.55), rgba(76, 52, 150, 0.6)) !important;
  border-color: rgba(201, 187, 243, 0.6) !important;
  color: #fff !important;
  box-shadow: 0 10px 34px rgba(136, 102, 222, 0.35) !important;
}

.btn--violet:hover,
.btn--violet:focus-visible {
  background: linear-gradient(180deg, rgba(150, 118, 232, 0.7), rgba(88, 62, 168, 0.7)) !important;
  box-shadow: 0 12px 40px rgba(136, 102, 222, 0.5) !important;
}

.btn--violet-outline {
  border-color: rgba(201, 187, 243, 0.55) !important;
  color: #e6defb !important;
  background: rgba(40, 26, 80, 0.35) !important;
}

.btn--violet-outline:hover,
.btn--violet-outline:focus-visible {
  background: rgba(60, 40, 112, 0.5) !important;
}

@media (prefers-reduced-motion: reduce) {
  .fx-ui__focus,
  .fx-ui__gaze,
  .fx-agent__typing i,
  .fx-spatial__plane,
  .fx-sim__pill {
    animation: none !important;
  }
}

/* ---------- When can you build? ---------- */
.timeline-section {
  padding-block: clamp(4rem, 10vh, 7rem);
  background-color: var(--pure-black);
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
}

/* Track runs through both nodes; the "Now" half is lit */
.timeline__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 8px, transparent 8px 16px);
}

.timeline__progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  background: linear-gradient(90deg, rgba(136, 102, 222, 0), #a48af0);
  box-shadow: 0 0 12px rgba(136, 102, 222, 0.7);
}

.timeline__stage {
  position: relative;
  padding-top: 3rem;
}

.timeline__stage p,
.timeline__stage h3 {
  margin: 0;
}

.timeline__node {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.4);
  background: var(--pure-black);
}

.timeline__stage.is-active .timeline__node {
  border: 0;
  background: #a48af0;
  box-shadow: 0 0 0 6px rgba(136, 102, 222, 0.2), 0 0 24px rgba(136, 102, 222, 0.9);
  animation: timelinePulse 2.4s ease-in-out infinite;
}

.timeline__when {
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  line-height: 1;
  color: var(--white);
}

/* Small year under "Now" / "Next year" */
.timeline__year {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
}

.timeline__stage:not(.is-active) .timeline__when {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.55);
}

.timeline__badge {
  display: inline-block;
  margin-top: 1rem !important;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(164, 138, 240, 0.45);
  background: rgba(136, 102, 222, 0.12);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: #c9bbf3;
}

.timeline__title {
  margin-top: 1.25rem !important;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.15;
  color: var(--white);
}

.timeline__body {
  margin-top: 0.85rem !important;
  margin-bottom: 1.5rem !important;
  max-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--moon-silver);
  opacity: 0.85;
}

@keyframes timelinePulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(136, 102, 222, 0.2), 0 0 24px rgba(136, 102, 222, 0.9); }
  50% { box-shadow: 0 0 0 12px rgba(136, 102, 222, 0.08), 0 0 32px rgba(136, 102, 222, 1); }
}

@media (max-width: 991.98px) {
  .fw-stage,
  .fw-lists {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .fw-code {
    font-size: 0.74rem;
  }

  .fw-own {
    flex-direction: column;
    align-items: stretch;
  }

  .fw-own__terminal {
    width: 100%;
  }

  /* Timeline goes vertical: track down the left edge */
  .timeline {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-left: 2.5rem;
  }

  .timeline__track {
    left: 11px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 8px, transparent 8px 16px);
  }

  .timeline__progress {
    inset: 0 0 auto 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, rgba(136, 102, 222, 0), #a48af0);
  }

  .timeline__stage {
    padding-top: 0;
  }

  .timeline__node {
    left: -2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fw-preview__gaze,
  .fw-preview__ring circle,
  .fw-preview__button,
  .timeline__stage.is-active .timeline__node {
    animation: none !important;
  }

  .fw-preview__gaze { left: 38%; top: 61%; }
  .fw-preview__ring circle { stroke-dashoffset: 0; }
}

/* ============================================
   HOME: SUBTLE PURPLE ACCENTS — hero gradient and ambient background glows (makers gallery, privacy, product viewer).
   Buttons, video cards and the product viewer stay neutral. Scoped to body[data-page="home"].
   ============================================ */

/* Hero: deep violet-black rising from the bottom, behind the copy */
body[data-page="home"] #section1::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  z-index: 1;
  background: linear-gradient(to top, rgba(12, 7, 26, 0.85) 0%, rgba(12, 7, 26, 0.35) 45%, transparent 100%);
  pointer-events: none;
}

body[data-page="home"] #section1 .section__content {
  z-index: 2;
}

/* Ambient glows (behind content, very low opacity; soft white) */
body[data-page="home"] #section4.what-it-does-section,
body[data-page="home"] #section6 {
  position: relative;
  isolation: isolate;
}

body[data-page="home"] #section4.what-it-does-section::before,
body[data-page="home"] #section6::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(20px);
}

body[data-page="home"] #section4.what-it-does-section::before {
  left: 50%;
  top: 0;
  width: min(1200px, 120vw);
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 70%);
}

/* No glow behind the privacy section: it stays pure #000 (a white glow lifted it to ~#030303–#090909) */

body[data-page="home"] #section6::before {
  left: 50%;
  bottom: 5%;
  width: min(1100px, 110vw);
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, transparent 65%);
}

/* ============================================
   ENTERPRISE (/enterprise) — home-page vibe, minimal and static (people print / PDF it;
   print layout in enterprise-print.css)
   ============================================ */

/* ---------- Hero: full-bleed still with a vignette, copy bottom-left ---------- */
.ent-hero {
  background-color: var(--pure-black);
}

.ent-hero__media,
.ent-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.ent-hero__img {
  object-fit: cover;
  object-position: 50% 40%;
}

/* Phone: the glasses sat right where the copy starts — scale the still up and lift it so they clear the text
   (the bottom edge it leaves is under the black fade anyway) */
@media (max-width: 575.98px) {
  .ent-hero__img {
    transform: translateY(-12%) scale(1.08);
    transform-origin: 50% 50%;
  }
}

/* Darken toward the bottom-left so the copy reads, fade into the black page below */
.ent-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.6) 28%, transparent 62%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, transparent 55%);
  pointer-events: none;
}

/* Sits low so the copy clears the glasses in the (preview-site) hero still */
.ent-hero .section__content {
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
}

.ent-hero__subtitle {
  max-width: 44rem;
  margin-bottom: 2rem;
}

/* "Now shipping pilots" — small glass pill with a live dot */
.ent-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.25rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--white);
}

.ent-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ee2a8;
  box-shadow: 0 0 10px rgba(126, 226, 168, 0.7);
}

/* ---------- Use cases: 2 × 3 image cards ---------- */
.ent-uses {
  padding-block: clamp(5rem, 11vh, 7rem) clamp(2rem, 5vh, 3rem);
  background-color: var(--pure-black);
}

.ent-uses__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

/* Column, so the caption strip fills the card when the other card in its row has a longer (wrapping) caption */
.ent-use {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  border-radius: 22px;
  background-color: #1d1d1f;
}

/* Native image shape (1512 × 784) so the baked-in heads-up panels are never cropped */
.ent-use__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1512 / 784;
  object-fit: cover;
}

/* Frosted strip: a blurred, mirrored copy of the image's bottom edge under a soft tint (the home
   gallery's caption look, in CSS instead of a canvas) */
.ent-use__line {
  position: relative;
  isolation: isolate;
  flex: 1;
  overflow: hidden;
  margin: 0;
  padding: 1.15rem 1.5rem 1.3rem;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--white);
}

.ent-use__line::before {
  content: '';
  position: absolute;
  inset: -40px;
  z-index: -2;
  background: var(--use-img) center bottom / cover no-repeat;
  transform: scaleY(-1);
  filter: blur(26px) saturate(1.3);
}

.ent-use__line::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(22, 22, 26, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* ---------- Features: spec-style cards (privacy, power, platform, wear) ---------- */
.ent-features {
  padding-block: clamp(3rem, 7vh, 5rem);
  background-color: var(--pure-black);
}

.ent-features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.ent-feature {
  padding: 1.5rem 1.5rem 1.6rem;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.015) 100%);
}

.ent-feature__kicker {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a48af0;
}

.ent-feature__title {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--white);
}

.ent-feature__line {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--moon-silver);
}

/* ---------- CTA: full-width split, pitch left / actions right ---------- */
.ent-cta {
  padding-block: clamp(3rem, 8vh, 5rem) clamp(4rem, 10vh, 6rem);
  background-color: var(--pure-black);
}

.ent-cta__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 4rem;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.75rem, 4vw, 3.5rem);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.015) 100%);
}

.ent-cta__subtitle {
  max-width: 38rem;
}

/* Button and email share a centre line so neither looks pushed to the edge */
.ent-cta__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.ent-cta__email a {
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--moon-silver);
  text-decoration: none;
}

.ent-cta__email a:hover {
  color: var(--white);
}

/* "Made in USA" (components/launch/made_in_usa.html): a tiny muted flag and small caps, kept quiet under the email */
/* The US flag after "Made in USA" (components/launch/flag_us.html): sized to the text it follows, sitting on the
   same line like a letter would, a hair's space after "USA" */
.made-in-flag {
  display: inline-block;
  height: 0.72em;
  width: auto;
  margin-left: 0.32em;
  vertical-align: -0.04em;
  border-radius: 2px;
}

.made-in-usa {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* ---------- Floating "Save as PDF" (bottom-right): liquid glass ---------- */
.ent-pdf-fab {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  /* Light sheen on top of a strong, saturated blur of whatever scrolls underneath */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.7);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 10px 30px rgba(0, 0, 0, 0.4);
  font-size: 0.9rem;
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ent-pdf-fab:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.09) 100%);
  border-color: rgba(255, 255, 255, 0.34);
}

.ent-pdf-fab:focus-visible {
  outline: 2px solid var(--indigo-violet);
  outline-offset: 3px;
}

@media (max-width: 991.98px) {
  .ent-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  .ent-uses__grid,
  .ent-features__grid {
    grid-template-columns: 1fr;
  }

  /* Phone cuts are 10:9 */
  .ent-use__img {
    aspect-ratio: 10 / 9;
  }

  .ent-use__line::before {
    background-image: var(--use-img-mobile);
  }

  /* Smaller on phones so it covers as little content as possible; label stays */
  .ent-pdf-fab {
    gap: 0.35rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.75rem;
  }

  .ent-pdf-fab svg {
    width: 14px;
    height: 14px;
  }

  /* CTA stacks: pitch, then actions, all left-aligned */
  .ent-cta__panel {
    flex-direction: column;
    align-items: flex-start;
  }

  .ent-cta__side {
    align-items: flex-start;
  }

  .ent-cta__actions .btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem;
  }
}

/* ============================================
   CAREERS (/careers, /careers/<slug>) — moved from site.css when the page joined the launch styles
   ============================================ */
.careers-job-card {
  color: inherit;
}

.careers-job-card:hover .careers-job-card__title {
  text-decoration: underline;
}

/* .section's overflow-x: hidden also clips vertically, cutting off the first card's hover scale + shadow
   (the list has no top padding); clip only sideways */
.careers-list-section {
  overflow-x: clip;
  overflow-y: visible;
}

.careers-job-detail__section + .careers-job-detail__section {
  margin-top: 3rem;
}

/* Careers job body: rendered from uploaded markdown, no Bootstrap utility classes on its tags */
.careers-job-body h2,
.careers-job-body h3 {
  color: #fff;
  font-weight: 400;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.careers-job-body h2:first-child,
.careers-job-body h3:first-child {
  margin-top: 0;
}

.careers-job-body p,
.careers-job-body li {
  color: var(--moon-silver);
  font-size: 1.25rem;
}

.careers-job-body p {
  margin-bottom: 1.25rem;
}

.careers-job-body ul,
.careers-job-body ol {
  padding-left: 1.25rem;
  margin-bottom: 1.25rem;
}

.careers-job-body li {
  margin-bottom: 0.5rem;
}

.careers-job-body strong {
  color: #fff;
  font-weight: 600;
}

.careers-job-body a {
  color: #fff;
  text-decoration: underline;
}

.careers-resume-drop {
  display: block;
  border: 1px dashed var(--glass-border-strong, var(--glass-border));
  border-radius: 14px;
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--moon-silver);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.careers-resume-drop:hover,
.careers-resume-drop.is-dragover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.04);
}

.careers-resume-drop__filename {
  display: block;
  color: #fff;
  margin-top: 0.75rem;
  font-weight: 600;
  word-break: break-all;
}

.careers-job-section .about-page-section__title {
  margin-bottom: 1.5rem !important;
}

#careers-hero-section.about-page-section {
  padding-bottom: 1.5rem !important;
}

#careers-hero-section .about-page-section__title {
  margin-bottom: 2rem !important;
}

/* Match the floating navbar's outer width exactly, instead of Bootstrap's stepped .container widths */
.careers-container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 991px) {
  .careers-container {
    width: 95%;
  }
}

@media (max-width: 768px) {
  .careers-container {
    width: calc(100% - 30px);
  }
}

/* ============================================
   RESERVE (/reserve, /reserve/success) — product / buy page, liquid glass
   ============================================ */

/* ---------- Page + ambient light ---------- */
/* Glass needs something behind it: the product shot, heavily blurred, glows behind the top of the page
   and fades into black further down (like album art behind a music player). */
.rsv-page {
  position: relative;
  overflow-x: clip;
  background-color: var(--pure-black);
}

.rsv-ambient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(170vh, 1700px);
  z-index: 0;
  background: var(--rsv-ambient) 50% 70% / cover no-repeat;
  /* Desaturated so the glow reads as neutral light, not purple (raise saturate() to bring colour back) */
  filter: blur(90px) saturate(0.35);
  opacity: 0.45;
  transform: scale(1.15);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
  pointer-events: none;
}

/* Experiment: pure black, no ambient glow — delete this rule to bring the glow back */
.rsv-ambient {
  display: none;
}

.rsv-page > .section {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Batches above the next section, so the ⓘ pop-over that hangs into it stays on top (and its link clickable) */
.rsv-page > .rsv-timeline {
  z-index: 2;
}

/* ---------- Liquid glass ---------- */
/* No hard border: a frosted, saturated blur, a soft inner highlight, and light catching the rim — bright at
   the top-left, fading out, a faint kick at the bottom-right (gradient masked to a 1px ring). */
.lg {
  position: relative;
  isolation: isolate;
  border: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.045) 55%, rgba(255, 255, 255, 0.07) 100%);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.28),
    inset 0 -1px 1px rgba(255, 255, 255, 0.06),
    0 12px 34px rgba(0, 0, 0, 0.35);
}

.lg::before,
.lg-rim::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.16) 20%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0) 62%,
    rgba(255, 255, 255, 0.14) 82%,
    rgba(255, 255, 255, 0.5) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Soft glare across the top of the glass */
.lg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 30% -30%, rgba(255, 255, 255, 0.16), transparent 60%);
  pointer-events: none;
}

/* ---------- Buy panel ---------- */
.rsv {
  /* .section's overflow-x: hidden makes a scroll container, which breaks the sticky image; clip doesn't */
  overflow-x: clip;
  padding-top: clamp(7rem, 14vh, 9rem);
  padding-bottom: clamp(3rem, 8vh, 5rem);
}

.rsv__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* Image stays in view while the panel scrolls (desktop); rim light like the glass, deep soft shadow */
.rsv__media {
  position: sticky;
  top: 6.5rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: 32px;
  background-color: #0b0b0d;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
}

.rsv__media.lg-rim::before {
  z-index: 1;
}

/* Product shot at its own shape (new.png, 1283 × 992) — no crop */
.rsv__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1283 / 992;
}

/* "Raven Prism 1" stays on one line: scales with the panel instead of the global display-2 size */
.rsv__panel .section__title {
  font-size: clamp(2.5rem, 4.6vw, 4.5rem) !important;
  white-space: nowrap;
}

.rsv-price {
  margin-bottom: 2rem;
}

.rsv-price__amounts {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.rsv-price__due {
  font-size: clamp(2.5rem, 3.6vw, 3rem);
  line-height: 1.05;
  color: var(--white);
}

.rsv-price__due-label {
  font-size: 1rem;
  color: var(--moon-silver);
}

.rsv__editions {
  display: grid;
  gap: 0.9rem;
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0;
}

/* Edition cards: radio inputs styled as selectable liquid-glass cards */
.rsv-edition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.rsv-edition:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0.09) 100%);
}

.rsv-edition__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Selected: brighter glass, stronger rim, faint halo — no outline */
.rsv-edition:has(.rsv-edition__input:checked) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0.12) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 -1px 1px rgba(255, 255, 255, 0.1),
    0 12px 34px rgba(0, 0, 0, 0.35),
    0 0 44px rgba(231, 185, 164, 0.1);
}

.rsv-edition:has(.rsv-edition__input:focus-visible) {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

.rsv-edition__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.rsv-edition__kicker {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moon-silver);
}

.rsv-edition__name {
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--white);
}

.rsv-edition__ships {
  font-size: 0.95rem;
  color: var(--moon-silver);
}

.rsv-edition__offer {
  /* Same style as the price's "Tentative price" note */
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.rsv-edition__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  font-size: 1.15rem;
  color: var(--white);
}

.rsv-edition__price small {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Batch pill sitting on the card's top edge (small liquid-glass capsule) */
.rsv-edition__badge {
  position: absolute;
  top: -0.75rem;
  right: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--white);
}

.rsv-edition__badge.lg {
  background: linear-gradient(180deg, rgba(60, 60, 66, 0.85) 0%, rgba(34, 34, 38, 0.85) 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 6px 18px rgba(0, 0, 0, 0.4);
}

.rsv-edition__badge.is-closed {
  color: rgba(255, 255, 255, 0.5);
}

/* Live dot on the open batch: soft glow breathing + a ring that radiates out */
.rsv-edition__badge-dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(var(--rsv-live-rgb, 255, 255, 255), 0.7);
  animation: rsvLiveGlow 2s ease-in-out infinite;
}

.rsv-edition__badge-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  animation: rsvLivePing 2s ease-out infinite;
}

@keyframes rsvLiveGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(var(--rsv-live-rgb, 255, 255, 255), 0.5); }
  50% { box-shadow: 0 0 10px rgba(var(--rsv-live-rgb, 255, 255, 255), 0.95); }
}

@keyframes rsvLivePing {
  0% { transform: scale(1); opacity: 0.9; }
  80%, 100% { transform: scale(3.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rsv-edition__badge-dot,
  .rsv-edition__badge-dot::after {
    animation: none;
  }
}

.rsv-edition__status {
  flex-shrink: 0;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--moon-silver);
}

.rsv-edition__status.lg {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* Sold out: same glass, quieter */
.rsv-edition.is-sold-out {
  cursor: not-allowed;
}

.rsv-edition.is-sold-out:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.045) 55%, rgba(255, 255, 255, 0.07) 100%);
}

.rsv-edition.is-sold-out::before {
  opacity: 0.45;
}

.rsv-edition.is-sold-out .rsv-edition__body {
  opacity: 0.5;
}

.rsv-edition.is-sold-out .rsv-edition__name {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

/* Price summary */
.rsv__summary {
  margin: 0 0 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.rsv__summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.rsv__summary-row dt {
  display: flex;
  flex-direction: column;
  font-weight: 400;
  color: var(--moon-silver);
}

.rsv__summary-row dt span {
  font-size: 0.85rem;
  opacity: 0.75;
}

.rsv__summary-row dd {
  margin: 0;
  color: var(--white);
}

.rsv__summary-row.is-total dt,
.rsv__summary-row.is-total dd {
  font-size: 1.15rem;
  color: var(--white);
}

/* Reserve for $49 (and the success page button): liquid-glass capsule, white text */
.rsv__cta.lg {
  color: var(--white);
  font-weight: 500;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0.12) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px rgba(255, 255, 255, 0.1),
    0 14px 36px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(255, 255, 255, 0.06);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.rsv__cta.lg::before {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.3) 25%,
    rgba(255, 255, 255, 0.05) 48%,
    rgba(255, 255, 255, 0.05) 60%,
    rgba(255, 255, 255, 0.3) 80%,
    rgba(255, 255, 255, 0.85) 100%);
}

.rsv__cta.lg:hover,
.rsv__cta.lg:focus-visible {
  color: var(--white);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 55%, rgba(255, 255, 255, 0.16) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -1px 1px rgba(255, 255, 255, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 50px rgba(255, 255, 255, 0.1);
}

.rsv__cta.lg:active {
  transform: scale(0.99);
}

/* "Batch 4" under the Reserve button: quiet, in rose gold (it's the batch you're reserving into) */
/* "Prescription built in" + ⓘ under the edition picker (details in the .rsv-info pop-over) */
.rsv__rx {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

/* The pop-over spans the row (not just the little ⓘ), so it always fits on phones */
.rsv__rx {
  position: relative;
}

.rsv__rx .rsv-info {
  position: static;
}

.rsv__rx .rsv-info__pop {
  left: 0;
  right: 0;
  width: auto;
  max-width: 24rem;
}

.rsv__rx .rsv-info__toggle {
  width: 1rem;
  height: 1rem;
  font-size: 0.65rem;
}

.rsv__batch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: #e7b9a4;
}

/* its live dot glows rose gold too */
.rsv__batch .rsv-edition__badge-dot {
  background: #f0c4b0;
  --rsv-live-rgb: 231, 185, 164;
}

.rsv__batch .rsv-edition__badge-dot::after {
  border-color: rgba(231, 185, 164, 0.85);
}

/* Shown above the button when checkout couldn't start (?checkout=error|unavailable) */
.rsv__alert {
  margin: 0 0 0.9rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 140, 140, 0.35);
  background: rgba(255, 90, 90, 0.08);
  font-size: 0.9rem;
  color: #ffd2d2;
}

/* ---------- Below the buy panel ---------- */
/* Batch timeline (developer-page style, in white): dashed track, lit progress up to the open batch, solid nodes for
   allocated batches, a pulsing node on the open one, dashed rings for what's next. Glass cards under each node. */
.rsv-timeline {
  /* .section's overflow-x: hidden would clip the ⓘ pop-over; the page wrapper already clips sideways */
  overflow: visible;
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 8vh, 5rem) clamp(1rem, 3vh, 2rem);
}

.rsv-timeline__subtitle {
  max-width: none;
  margin-bottom: 2.5rem;
}

.rsv-timeline__rail {
  --gap: 1rem;
  --node: 22px;
  position: relative;
}

.rsv-timeline__track {
  position: absolute;
  top: calc(var(--node) / 2 - 1px);
  left: calc(var(--node) / 2);
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 8px, transparent 8px 16px);
}

/* Lit up to the open batch's node: each column is (100% + gap) / count wide */
.rsv-timeline__progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc((100% + var(--gap) + var(--node) / 2) / var(--count) * var(--active));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.95));
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

.rsv-timeline__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--count), 1fr);
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rsv-timeline__item {
  position: relative;
  padding-top: calc(var(--node) + 1.25rem);
}

.rsv-timeline__node {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  background: var(--pure-black);
}

/* Allocated / full: solid ring with a filled centre */
.rsv-timeline__item.is-past .rsv-timeline__node {
  border: 2px solid rgba(255, 255, 255, 0.55);
}

.rsv-timeline__item.is-past .rsv-timeline__node span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
}

/* Open batch: bright, pulsing */
.rsv-timeline__item.is-active .rsv-timeline__node {
  background: var(--white);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14), 0 0 24px rgba(255, 255, 255, 0.7);
  animation: rsvTimelinePulse 2.4s ease-in-out infinite;
}

/* Next / upcoming: dashed ring */
.rsv-timeline__item.is-future .rsv-timeline__node {
  border: 2px dashed rgba(255, 255, 255, 0.4);
}

@keyframes rsvTimelinePulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14), 0 0 24px rgba(255, 255, 255, 0.7); }
  50% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.05), 0 0 32px rgba(255, 255, 255, 0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .rsv-timeline__item.is-active .rsv-timeline__node {
    animation: none;
  }
}

.rsv-timeline__card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.15rem 1.25rem;
  border-radius: 20px;
}

.rsv-timeline__name {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
  color: var(--white);
}

.rsv-timeline__when {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--moon-silver);
}

.rsv-timeline__edition {
  margin: -0.5rem 0 0.75rem;
  font-size: 0.85rem;
  color: var(--white);
}

.rsv-timeline__who {
  flex: 1;
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--moon-silver);
}

.rsv-timeline__status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.rsv-timeline__item:not(.is-active) .rsv-timeline__card {
  opacity: 0.72;
}

.rsv-timeline__item.is-active .rsv-timeline__card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0.12) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    0 12px 34px rgba(0, 0, 0, 0.35),
    0 0 44px rgba(231, 185, 164, 0.1);
}

.rsv-timeline__item.is-active .rsv-timeline__who,
.rsv-timeline__item.is-active .rsv-timeline__status {
  color: var(--white);
}

/* Not finalised yet (batches after the open one): sketched, not built — dashed outline, no glass, quieter text */
.rsv-timeline__spacer {
  flex: 1;
}

.rsv-timeline__item.is-future .rsv-timeline__card {
  opacity: 1;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
}

.rsv-timeline__item.is-future .rsv-timeline__card::before,
.rsv-timeline__item.is-future .rsv-timeline__card::after {
  display: none;
}

.rsv-timeline__item.is-future .rsv-timeline__name {
  color: rgba(255, 255, 255, 0.55);
}

.rsv-timeline__item.is-future .rsv-timeline__when {
  color: rgba(255, 255, 255, 0.4);
}

.rsv-timeline__item.is-future .rsv-timeline__status {
  color: rgba(255, 255, 255, 0.4);
}

/* ⓘ on a timeline card (Batch 3 Early Bird note): small glass circle; the note opens as a glass pop-over */
.rsv-info {
  display: inline-flex;
  position: relative;
  margin-left: 0.35rem;
  text-transform: none;
  letter-spacing: normal;
}

.rsv-info__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Sized to the 12px uppercase status text it sits beside */
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.6rem;
  font-style: italic;
  line-height: 1;
  color: var(--white);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s ease;
}

.rsv-info__toggle::-webkit-details-marker {
  display: none;
}

.rsv-info__toggle:hover,
.rsv-info[open] .rsv-info__toggle {
  background: rgba(255, 255, 255, 0.18);
}

.rsv-info__toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}

.rsv-info__pop {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -0.5rem;
  z-index: 20;
  width: min(17rem, 80vw);
  padding: 0.85rem 1rem;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--white);
  background: linear-gradient(180deg, rgba(60, 60, 66, 0.92) 0%, rgba(30, 30, 34, 0.94) 100%);
}

.rsv-info__pop a {
  color: var(--white);
  white-space: nowrap;
}

/* The card holding an open note sits above its neighbours and at full strength */
.rsv-timeline__item:has(.rsv-info[open]) {
  z-index: 10;
}

.rsv-timeline__item:has(.rsv-info[open]) .rsv-timeline__card {
  opacity: 1;
}

/* Below desktop: vertical — track and progress down the left, node beside each card */
@media (max-width: 1199.98px) {
  .rsv-timeline__rail {
    --gap: 0.85rem;
    padding-left: calc(var(--node) + 1.1rem);
  }

  .rsv-timeline__track {
    top: calc(var(--node) / 2);
    bottom: 0;
    left: calc(var(--node) / 2 - 1px);
    right: auto;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 8px, transparent 8px 16px);
  }

  /* Lit down to the open batch: JS-free — sized by the items before it (see .is-active::before) */
  .rsv-timeline__progress {
    display: none;
  }

  .rsv-timeline__list {
    grid-template-columns: 1fr;
  }

  .rsv-timeline__item {
    padding-top: 0;
  }

  .rsv-timeline__node {
    top: 1.15rem;
    left: calc(-1 * (var(--node) + 1.1rem));
  }

  /* Solid lit segment from the top of the list down to the open batch's node */
  .rsv-timeline__item.is-past::before,
  .rsv-timeline__item.is-active::before {
    content: '';
    position: absolute;
    left: calc(-1 * (var(--node) / 2 + 1.1rem) - 1px);
    width: 2px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
  }

  .rsv-timeline__item.is-past::before {
    top: 1.15rem;
    bottom: calc(-1 * var(--gap) - 1.15rem);
  }

  .rsv-timeline__item.is-active::before {
    display: none;
  }
}


.rsv-steps,
.rsv-box {
  padding-block: clamp(3rem, 8vh, 5rem);
}

.rsv-box {
  padding-bottom: clamp(3rem, 7vh, 4.5rem);
}

.rsv-section-title {
  margin-bottom: 2rem;
  font-size: clamp(2rem, 3.4vw, 3rem);
}

.rsv-steps__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rsv-step {
  padding: 1.6rem 1.6rem 1.75rem;
  border-radius: 24px;
}

.rsv-step__num {
  display: block;
  margin-bottom: 0.9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--moon-silver);
  opacity: 0.7;
}

.rsv-step__title {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  color: var(--white);
}

.rsv-step__line {
  margin: 0;
  line-height: 1.55;
  color: var(--moon-silver);
}

.rsv-box__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.rsv-box__item {
  overflow: hidden;
  padding: 0 0 1.75rem;
  border-radius: 26px;
  text-align: center;
}

/* Product photos (glasses, Wings, case on fabric): full bleed across the top of the card, clipped by the card's own
   rounded corners */
.rsv-box__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 1rem;
}

/* The glass rim (.lg::before, a masked 1px ring) is normally drawn behind the content; lift it over the photo so the
   card's outline runs unbroken round the photo's edges too */
.rsv-box__item.lg::before {
  z-index: 1;
}

.rsv-box__name {
  margin: 0;
  font-size: 1.2rem;
  color: var(--white);
}

.rsv-box__line {
  margin: 0.35rem 1rem 0;
  font-size: 0.9rem;
  color: var(--moon-silver);
}

.rsv-box__extra {
  margin-top: 1.5rem;
  text-align: right;
  font-size: 1.05rem;
  color: var(--moon-silver);
}

/* Last line before the footer: questions or refunds */
.rsv-contact {
  padding-block: 0 clamp(4rem, 10vh, 6rem);
}

.rsv-contact__line {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  font-size: 1rem;
  color: var(--moon-silver);
}

.rsv-contact__line a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.rsv-contact__line a:hover {
  border-bottom-color: var(--white);
}

/* ---------- Reservation confirmed (/reserve/success) ---------- */
.rsv-done {
  display: flex;
  align-items: center;
  min-height: 80vh;
  padding-block: clamp(8rem, 16vh, 10rem) clamp(4rem, 10vh, 6rem);
}

/* Centred on the page: check, title, lines, button and contact all on one axis */
.rsv-done__panel {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.rsv-done__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 1.75rem;
  border-radius: 50%;
  color: #7ee2a8;
}

.rsv-done__line {
  margin: 0 0 2rem;
  line-height: 1.6;
  color: var(--moon-silver);
}

.rsv-done__contact {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: var(--moon-silver);
}

.rsv-done__contact a {
  color: var(--white);
}

@media (max-width: 991.98px) {
  .rsv__layout {
    grid-template-columns: 1fr;
  }

  .rsv__media {
    position: static;
  }
}

@media (max-width: 767.98px) {
  .rsv-box__grid,
  .rsv-steps__list {
    grid-template-columns: 1fr;
  }

  .rsv-edition {
    padding: 1.1rem 1.15rem;
  }

  .rsv-edition__name {
    font-size: 1.3rem;
  }
}