/* ============================================
   Aurora — Homepage (Premium SaaS redesign)
   Hero, parallax, section transitions, cards
   ============================================ */

/* --- Hero --- */
.hero {
  position: relative;
  overflow: hidden;
  /* Slightly less than 100vh so the top of the demo section peeks
     above the fold — users immediately see there is more below. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: calc(88px + env(safe-area-inset-top, 0px));
  padding-bottom: var(--space-8);
  /* Transparent base — the body's ambient gradient + the aurora orbs
     are now the only color source. No bottom radial = no seam. */
  background: transparent;
}

/* NOTE: The hero deliberately has no bottom darkening or fade. Every
   section on the homepage is transparent, so the fixed body::before
   ambient layer reads as one continuous field from the top of the
   page to the footer — there are no visible seams between sections. */
.hero::before { content: none; }
[data-theme="light"] .hero::before { content: none; }

/* Subtle grain overlay for hero depth. Fades fully transparent well
   before the hero's bottom edge so the grain doesn't form a visible
   edge against the next section — the fade continues the one field. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 90%);
          mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 90%);
}

/* Hero is fully transparent; the fixed-attachment ambient layer on the
   body provides all background color consistently across every section. */
[data-theme="light"] .hero { background: transparent; }

/* =============================================
   CURSOR-FOLLOW AURORA SPOTLIGHT
   A soft glow that tracks the cursor inside the hero.
   Controlled by --mx, --my custom props set from JS.
   ============================================= */
.hero__spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle 420px at var(--mx, 50%) var(--my, 50%),
    rgba(52,211,153,0.12) 0%,
    rgba(56,189,248,0.08) 35%,
    transparent 70%);
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  mix-blend-mode: screen;
}
.hero:hover .hero__spotlight { opacity: 1; }

[data-theme="light"] .hero__spotlight {
  background: radial-gradient(circle 420px at var(--mx, 50%) var(--my, 50%),
    rgba(43,182,133,0.22) 0%,
    rgba(245,158,11,0.14) 35%,
    transparent 70%);
  mix-blend-mode: multiply;
}

/* =============================================
   HERO TITLE — character-by-character reveal with blur
   Each .hero__title-char animates in sequence.
   ============================================= */
.hero__title-char {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(10px);
  animation: title-char-in 620ms var(--ease-out) forwards;
}
@keyframes title-char-in {
  0%   { opacity: 0; filter: blur(6px); transform: translateY(10px); }
  60%  { opacity: 1; filter: blur(1px); transform: translateY(0); }
  100% { opacity: 1; filter: blur(0);    transform: translateY(0); }
}

/* =============================================
   FEATURE CARD — 3D tilt on hover, driven by JS.
   --rx, --ry = rotation; --gx, --gy = glare position.
   ============================================= */
.feature-card {
  transform-style: preserve-3d;
  transform: perspective(1000px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg))
             translateZ(0);
  transition: transform 200ms var(--ease-out),
              border-color var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease);
}
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 200px at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
  pointer-events: none;
}
.feature-card:hover::after { opacity: 1; }
[data-theme="light"] .feature-card::after {
  background: radial-gradient(circle 200px at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,0.5) 0%, transparent 60%);
}

/* =============================================
   SCROLL-LINKED AURORA HUE SHIFT
   Subtle: as you scroll, hero background orbs shift
   hue slightly. Driven by --scroll-progress 0-1 from JS.
   ============================================= */
.hero__bg-layer {
  filter: blur(var(--orb-blur, 120px)) hue-rotate(calc(var(--scroll-progress, 0) * 20deg));
}

/* =============================================
   MAGNETIC HOVER for buttons
   ============================================= */
.button {
  transform: translate(var(--tx, 0), var(--ty, 0));
}
.button.button-primary:hover,
.button.button-secondary:hover {
  /* Keeps existing hover lift by letting JS-set --ty add to it */
}


.hero__bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  /* Fade the orbs into transparency at the hero's bottom so there is
     no hard luminance edge where the hero ends. The ambient body layer
     takes over smoothly underneath. */
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%,
    #000 55%,
    rgba(0,0,0,0.7) 80%,
    transparent 100%);
          mask-image: linear-gradient(180deg,
    #000 0%,
    #000 55%,
    rgba(0,0,0,0.7) 80%,
    transparent 100%);
}

.hero__bg-layer {
  position: absolute; border-radius: 50%; will-change: transform;
}

/* Wider, softer, more overlapping aurora orbs with very long transparent tails
   so no hard edges appear anywhere in the hero. */
.hero__bg-layer--1 {
  width: 1400px; height: 900px; top: -30%; right: -20%;
  background: radial-gradient(ellipse at center,
    rgba(56,189,248,0.22) 0%,
    rgba(56,189,248,0.12) 25%,
    rgba(52,211,153,0.06) 50%,
    rgba(52,211,153,0.02) 70%,
    transparent 90%);
  filter: blur(140px); animation: aurora-drift 22s ease-in-out infinite;
}

.hero__bg-layer--2 {
  width: 1200px; height: 800px; bottom: -20%; left: -15%;
  background: radial-gradient(ellipse at center,
    rgba(52,211,153,0.18) 0%,
    rgba(52,211,153,0.09) 30%,
    rgba(245,158,11,0.05) 55%,
    rgba(245,158,11,0.02) 75%,
    transparent 92%);
  filter: blur(120px); animation: aurora-drift 28s ease-in-out infinite reverse;
}

.hero__bg-layer--3 {
  width: 900px; height: 700px; top: 25%; left: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(56,189,248,0.1) 0%,
    rgba(26,108,162,0.06) 35%,
    rgba(19,34,52,0.2) 60%,
    transparent 85%);
  filter: blur(100px); animation: aurora-drift 35s ease-in-out infinite 3s;
}

/* Fourth background layer — warm accent extended with a longer tail */
.hero__bg-layer--4 {
  width: 800px; height: 600px; bottom: 5%; right: 20%;
  background: radial-gradient(ellipse at center,
    rgba(245,158,11,0.1) 0%,
    rgba(245,158,11,0.04) 40%,
    transparent 80%);
  filter: blur(110px); animation: aurora-drift 30s ease-in-out infinite 6s;
}

/* Light-mode aurora orbs — same composition, warmer palette,
   higher opacity so they read clearly on the pale background. */
[data-theme="light"] .hero__bg-layer--1 {
  background: radial-gradient(ellipse at center,
    rgba(56,189,248,0.28) 0%,
    rgba(56,189,248,0.15) 25%,
    rgba(43,182,133,0.08) 50%,
    rgba(43,182,133,0.03) 70%,
    transparent 90%);
}
[data-theme="light"] .hero__bg-layer--2 {
  background: radial-gradient(ellipse at center,
    rgba(43,182,133,0.24) 0%,
    rgba(43,182,133,0.12) 30%,
    rgba(245,158,11,0.08) 55%,
    rgba(245,158,11,0.03) 75%,
    transparent 92%);
}
[data-theme="light"] .hero__bg-layer--3 {
  background: radial-gradient(ellipse at center,
    rgba(56,189,248,0.14) 0%,
    rgba(26,108,162,0.08) 35%,
    rgba(255,220,180,0.2) 60%,
    transparent 85%);
}
[data-theme="light"] .hero__bg-layer--4 {
  background: radial-gradient(ellipse at center,
    rgba(245,158,11,0.18) 0%,
    rgba(245,158,11,0.08) 40%,
    transparent 80%);
}

/* --- Lock screen interactive preview --- */
.lock-demo-section {
  padding-top: clamp(28px, 4vw, 60px);
  padding-bottom: clamp(28px, 5vw, 64px);
  overflow: hidden;
  scroll-margin-top: 96px;
}

.section.cv-auto {
  --scene-progress: 0;
  --scene-glow: 0;
}

.section.cv-auto::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(920px, calc(100% - 48px));
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(52,211,153,0.42), rgba(56,189,248,0.28), transparent);
  opacity: calc(0.14 + (var(--scene-glow, 0) * 0.34));
  transform: translateX(-50%) scaleX(calc(0.62 + (var(--scene-progress, 0) * 0.38)));
  transform-origin: 50% 50%;
}

.section.is-scene-active .section-title {
  text-shadow: 0 16px 54px rgba(52,211,153,0.08);
}

.lock-demo-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.lock-demo {
  position: relative;
  min-height: 480px;
  aspect-ratio: 2.04 / 1;
  border-radius: clamp(24px, 3.2vw, 42px);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  color: #f7e8ff;
  background: #1a0c3a;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 36px 110px rgba(5, 3, 18, 0.34),
    inset 0 0 0 1px rgba(255,255,255,0.035);
  transform: translateY(calc((0.5 - var(--scene-progress, 0.5)) * 10px));
  transform-origin: center center;
  transition:
    border-color 320ms var(--ease),
    box-shadow 320ms var(--ease),
    transform 420ms var(--ease-out);
}

.lock-demo:not(.is-open):hover,
.lock-demo:not(.is-open):focus-within {
  border-color: color-mix(in srgb, var(--lock-art-accent, #7dd3fc) 42%, rgba(255,255,255,0.12));
  box-shadow:
    0 42px 126px rgba(5, 3, 18, 0.42),
    0 0 56px color-mix(in srgb, var(--lock-art-accent, #7dd3fc) 14%, transparent),
    inset 0 0 0 1px rgba(255,255,255,0.055);
  transform: translateY(calc((0.5 - var(--scene-progress, 0.5)) * 10px));
}

.lock-demo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--lock-art-accent, #7dd3fc) 22%, transparent), transparent 34%);
  opacity: 0;
  transition: opacity 320ms var(--ease), transform 520ms var(--ease);
  transform: scale(0.98);
}

.lock-demo.is-playing::after {
  opacity: 0.38;
  transform: scale(1);
}

.lock-demo.is-loading .lock-player {
  cursor: progress;
}

.lock-demo:focus-visible,
.lock-demo-hint:focus-visible,
.lock-player button:focus-visible,
.lock-player__seek:focus-visible {
  outline: 3px solid rgba(52, 211, 153, 0.72);
  outline-offset: 4px;
}

.lock-demo__wallpaper,
.lock-demo__wallpaper::before,
.lock-demo__wallpaper::after,
.lock-demo__shape {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lock-demo__wallpaper {
  z-index: -2;
  background-color: #101820;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.30)),
    url("/assets/demo/photo_background.webp?v=20260523b");
  background-size: cover, cover;
  background-position: center, center;
  transition: filter 520ms var(--ease), transform 700ms var(--ease);
}

.lock-demo.is-playing .lock-demo__wallpaper {
  filter: saturate(1.12) brightness(1.05);
  transform: scale(1.012);
}

.lock-demo__wallpaper::before {
  content: "";
  background:
    linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.14)),
    radial-gradient(ellipse at 50% 58%, transparent 0%, rgba(0,0,0,0.08) 52%, rgba(0,0,0,0.34) 100%);
  opacity: 1;
}

.lock-demo__wallpaper::after {
  content: "";
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.18));
  z-index: 2;
}

.lock-demo__shape {
  display: none;
  filter: blur(1px);
  opacity: 0.72;
}

.lock-demo__shape--one {
  clip-path: polygon(0 0, 19% 0, 24% 9%, 30% 19%, 39% 24%, 45% 37%, 54% 44%, 58% 56%, 65% 63%, 70% 100%, 0 100%);
  background: linear-gradient(155deg, rgba(24, 12, 78, 0.9), rgba(8, 24, 44, 0.78));
}

.lock-demo__shape--two {
  clip-path: polygon(0 0, 20% 0, 25% 7%, 30% 16%, 37% 20%, 43% 29%, 50% 33%, 52% 45%, 60% 56%, 64% 100%, 0 100%);
  background: linear-gradient(152deg, rgba(84, 211, 154, 0.17), rgba(91, 35, 126, 0.48) 55%, rgba(18, 7, 50, 0.34));
  transform: translateX(13%);
  opacity: 0.6;
}

.lock-demo__shape--three {
  clip-path: polygon(70% 0, 100% 0, 100% 100%, 58% 100%, 55% 87%, 59% 70%, 63% 56%, 66% 40%, 73% 25%);
  background: linear-gradient(165deg, rgba(30, 10, 81, 0.2), rgba(16, 5, 55, 0.74));
  opacity: 0.64;
}

.lock-demo__shape--four {
  clip-path: polygon(0 52%, 17% 65%, 35% 70%, 46% 100%, 0 100%);
  background: linear-gradient(150deg, rgba(10, 5, 42, 0.76), rgba(33, 13, 74, 0.7));
  opacity: 0.8;
}

.lock-demo__notch {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 50%;
  width: clamp(168px, 22vw, 260px);
  height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: clamp(9px, 1.15vw, 15px);
  border-radius: 0 0 12px 12px;
  background: transparent;
  color: rgba(222, 241, 255, 0.9);
  box-shadow: none;
  transform: translateX(-50%);
  transform-origin: 50% 0;
  isolation: isolate;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  transition:
    width 220ms var(--ease),
    height 220ms var(--ease),
    opacity 300ms var(--ease),
    transform 360ms var(--ease),
    filter 360ms var(--ease);
}

.lock-demo__notch::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 90%;
  z-index: -1;
  border-radius: inherit;
  background: #000;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1);
  transform: translateX(-50%) scale(1);
  transform-origin: 50% 0;
  transition:
    transform 360ms var(--ease),
    box-shadow 360ms var(--ease);
}

.lock-demo__notch svg {
  position: relative;
  z-index: 1;
  margin-top: 0;
  transform: translateX(0);
  transition: transform 360ms var(--ease), color 360ms var(--ease);
}

.lock-demo__notch:hover {
  color: #fff;
}

.lock-demo__notch:hover svg {
  transform: translateX(-10px);
}

.lock-demo__notch:hover::before {
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.14);
  transform: translateX(-50%) scale(1);
}

.lock-demo__clock {
  position: absolute;
  z-index: 3;
  width: min(760px, 88%);
  top: clamp(74px, 6.8vw, 126px);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 8px 30px rgba(0,0,0,0.26);
}

.lock-demo__date {
  font-size: clamp(23px, 2.45vw, 36px);
  line-height: 1.08;
  font-weight: 700;
}

.lock-demo__time {
  margin-top: clamp(7px, 0.8vw, 11px);
  font-size: clamp(68px, 6.8vw, 118px);
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: 0;
}

.lock-demo__status {
  margin-top: clamp(14px, 1.7vw, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 24px);
  color: rgba(255,255,255,0.72);
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 700;
}

.lock-demo__status span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.lock-player {
  position: absolute;
  z-index: 3;
  top: 69%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(320px, 24vw, 440px);
  max-width: calc(100% - 40px);
  margin: 0;
  padding: clamp(16px, 1.3vw, 24px);
  border-radius: clamp(22px, 1.5vw, 28px);
  background: rgba(24, 33, 48, 0.58);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 18px 58px rgba(0,0,0,0.26);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
          backdrop-filter: blur(20px) saturate(150%);
}

.lock-player::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 22%, rgba(255,255,255,0.13) 46%, transparent 68%);
  opacity: 0;
  transform: translateX(-120%);
}

.lock-demo.is-playing .lock-player::after {
  animation: lock-player-sheen 3.8s var(--ease) infinite;
}

@keyframes lock-player-sheen {
  0%, 38% { transform: translateX(-120%); opacity: 0; }
  48% { opacity: 0.75; }
  74%, 100% { transform: translateX(120%); opacity: 0; }
}

@media (min-width: 821px) {
  .lock-player {
    width: clamp(288px, 21.5vw, 392px);
  }
}

.lock-player__top {
  display: grid;
  grid-template-columns: clamp(52px, 3.2vw, 64px) minmax(0, 1fr) 34px;
  align-items: center;
  gap: clamp(12px, 1vw, 18px);
}

.lock-player__art {
  position: relative;
  width: clamp(52px, 3.1vw, 62px);
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(52,211,153,0.18), rgba(96,165,250,0.12)),
    url('/assets/artwork/spotify-dirty-paws.webp') center / cover;
  box-shadow: 0 14px 30px rgba(0,0,0,0.24);
}

.lock-player__source {
  position: absolute;
  z-index: 2;
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(30, 215, 96, 0.92);
  color: #062411;
  font-size: 0;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 5px 14px rgba(0,0,0,0.24);
}

.lock-player__source::before {
  content: "S";
  font-size: 9px;
  line-height: 1;
}

.lock-player__art [data-lock-demo-art] {
  display: block;
  width: 100%;
  height: 100%;
  background: url('/assets/artwork/spotify-dirty-paws.webp') center / cover;
}

.lock-player__meta {
  min-width: 0;
  text-align: left;
}

.lock-player__meta strong,
.lock-player__meta span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lock-player__meta strong {
  color: rgba(255,255,255,0.96);
  font-size: clamp(16px, 0.95vw, 19px);
  line-height: 1.1;
  font-weight: 800;
}

.lock-player__meta span {
  margin-top: 3px;
  color: rgba(255,255,255,0.72);
  font-size: clamp(14px, 0.85vw, 17px);
  line-height: 1.1;
  font-weight: 700;
}

.lock-player button {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.78);
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.lock-player button:hover {
  color: #fff;
  transform: translateY(-1px);
}

.lock-player__menu {
  width: 34px;
  height: 34px;
  gap: 3px;
  grid-auto-flow: column;
  opacity: 0.55;
}

.lock-player__menu span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
}

.lock-player__progress-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  margin-top: clamp(14px, 1vw, 18px);
  color: rgba(255,255,255,0.66);
  font-weight: 800;
  font-size: clamp(12px, 0.75vw, 14px);
}

.lock-player__progress {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.24);
}

.lock-player__progress span {
  display: block;
  width: calc(var(--lock-progress, 62) * 1%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,0.26), rgba(255,255,255,0.56));
  transition: width 260ms ease;
}

.lock-player__progress .lock-player__buffer {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--lock-buffer, 0) * 1%);
  background: rgba(255,255,255,0.18);
}

.lock-player__progress [data-lock-demo-progress] {
  position: relative;
  z-index: 1;
}

.lock-player__seek {
  position: absolute;
  inset: -10px 0;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  opacity: 0;
}

.lock-player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 28px;
}

.lock-player__seek::-moz-range-thumb {
  width: 18px;
  height: 28px;
  border: 0;
  background: transparent;
}

.lock-player__controls {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: clamp(14px, 1vw, 18px);
}

.lock-player__controls button {
  min-width: 40px;
  min-height: 40px;
}

.lock-player__controls svg {
  max-width: clamp(23px, 1.45vw, 29px);
  max-height: clamp(23px, 1.45vw, 29px);
}

.lock-player__play svg {
  max-width: clamp(31px, 1.9vw, 38px);
  max-height: clamp(31px, 1.9vw, 38px);
}

.lock-player__play {
  color: #fff;
}

.lock-player__pause-icon {
  display: none;
}

.lock-demo.is-playing .lock-player__play-icon {
  display: none;
}

.lock-demo.is-playing .lock-player__pause-icon {
  display: block;
}

.lock-demo:not(.is-playing) .menu-preview.menu-preview--lock .menu-preview__bars span {
  animation: none;
  opacity: 0.48;
  transform: scaleY(0.58);
}

.lock-demo.is-playing .lock-player {
  border-color: color-mix(in srgb, var(--lock-art-accent, #7dd3fc) 36%, rgba(255,255,255,0.14));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 18px 58px rgba(0,0,0,0.26),
    0 0 54px color-mix(in srgb, var(--lock-art-accent, #7dd3fc) 18%, transparent);
}

.lock-demo.is-buffering .lock-player__play {
  opacity: 0.68;
}

.lock-demo__unlock {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: clamp(16px, 2.2vw, 34px);
  margin: 0 auto;
  text-align: center;
  color: rgba(255,255,255,0.62);
  font-size: clamp(18px, 1.4vw, 24px);
  font-weight: 800;
  transition: transform 240ms ease, color 240ms ease, opacity 240ms ease;
}

.lock-demo.is-unlocked .lock-demo__unlock {
  color: rgba(255,255,255,0.9);
  transform: translateY(-4px);
}

.lock-demo__clock,
.lock-demo__notch,
.lock-player,
.lock-demo__unlock {
  transition:
    width 220ms var(--ease),
    height 220ms var(--ease),
    opacity 300ms var(--ease),
    transform 360ms var(--ease),
    filter 360ms var(--ease);
}

.lock-demo.is-open .lock-demo__clock,
.lock-demo.is-open .lock-demo__notch,
.lock-demo.is-open .lock-player,
.lock-demo.is-open .lock-demo__unlock {
  opacity: 0;
  pointer-events: none;
  filter: blur(8px);
}

.lock-demo.is-open .lock-demo__clock {
  transform: translate(-50%, -12px) scale(0.97);
}

.lock-demo.is-open .lock-demo__notch {
  transform: translate(-50%, -14px) scale(0.94);
}

.lock-demo.is-open .lock-player {
  transform: translate(-50%, -44%) scale(0.96);
}

.lock-demo.is-open .lock-demo__unlock {
  transform: translateY(14px);
}

.lock-demo__open-surface {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  pointer-events: none;
  overflow: hidden;
  transition:
    opacity 360ms var(--ease),
    transform 440ms var(--ease);
}

.lock-demo__open-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2,7,12,0.16), rgba(2,7,12,0.06) 28%, rgba(2,7,12,0.28)),
    radial-gradient(circle at 78% 20%, rgba(52,211,153,0.14), transparent 28%),
    radial-gradient(circle at 22% 72%, rgba(56,189,248,0.12), transparent 30%);
}

.lock-demo__open-surface[hidden] {
  display: none !important;
}

.lock-demo.is-open .lock-demo__open-surface {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.lock-demo__close {
  position: absolute;
  top: clamp(58px, 5.6vw, 74px);
  right: clamp(16px, 2vw, 26px);
  z-index: 7;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(5,9,15,0.68);
  color: rgba(255,255,255,0.82);
  cursor: pointer;
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  transition: transform 180ms var(--ease), color 180ms var(--ease), background 180ms var(--ease);
}

.lock-demo__close:hover {
  color: #fff;
  background: rgba(5,9,15,0.84);
  transform: translateY(-1px);
}

.lock-demo__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.lock-demo__interactive-cue {
  position: absolute;
  z-index: 7;
  left: clamp(18px, 2vw, 28px);
  top: clamp(62px, 5.8vw, 78px);
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(5,9,15,0.46);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.68);
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.lock-demo-hint {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(244, 214, 199, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: max-content;
  max-width: 100%;
  margin: clamp(26px, 4vw, 42px) auto 0;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 800;
  cursor: pointer;
}

.lock-demo-hint:hover {
  color: var(--text-primary);
}

[data-theme="light"] .lock-demo-hint {
  color: rgba(92, 58, 42, 0.82);
}

@media (max-width: 820px) {
  .lock-demo-wrap {
    max-width: 720px;
    padding: 0 var(--space-6);
  }

  .lock-demo {
    min-height: 550px;
    aspect-ratio: auto;
    border-radius: 30px;
  }

  .lock-demo__clock {
    top: 96px;
  }

  .lock-player {
    top: 66%;
    border-radius: 28px;
  }
}

@media (max-width: 768px) {
  .lock-demo-wrap {
    padding: 0 var(--space-4);
  }
}

@media (max-width: 540px) {
  .lock-demo-section {
    padding-top: 22px;
  }

  .lock-demo {
    min-height: 540px;
    border-radius: 24px;
  }

  .lock-demo__clock { width: calc(100% - 28px); top: 78px; }

  .lock-demo__date {
    font-size: 22px;
  }

  .lock-demo__time {
    font-size: clamp(60px, 19vw, 84px);
  }

  .lock-demo__status {
    display: none;
  }

  .lock-demo__interactive-cue {
    top: 60px;
    left: 14px;
    font-size: 10px;
  }

  .lock-demo__close {
    top: 118px;
    right: 14px;
    width: 38px;
    height: 38px;
  }

  .lock-player {
    width: calc(100% - 42px);
    top: 64%;
    padding: 15px;
    border-radius: 24px;
  }

  .lock-player__top {
    grid-template-columns: 52px minmax(0, 1fr) 28px;
    gap: 12px;
  }

  .lock-player__art {
    width: 52px;
    border-radius: 12px;
  }

  .lock-player__meta strong {
    font-size: 16px;
  }

  .lock-player__meta span {
    font-size: 14px;
  }

  .lock-player__progress-row {
    grid-template-columns: 26px minmax(0, 1fr) 26px;
    gap: 8px;
    margin-top: 18px;
    font-size: 13px;
  }

  .lock-player__controls {
    gap: 3px;
    margin-top: 18px;
  }

  .lock-player__controls button {
    min-width: 36px;
    min-height: 38px;
  }

  .lock-player__controls svg {
    max-width: 28px;
    max-height: 28px;
  }

  .lock-player__play svg {
    max-width: 35px;
    max-height: 35px;
  }

  .lock-demo__unlock {
    bottom: 18px;
    font-size: 19px;
  }

  .lock-demo-hint {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lock-demo *,
  .lock-demo-hint {
    transition: none !important;
  }
}

.hero__content {
  position: relative; z-index: 3;
  max-width: 820px; margin: 0 auto; padding: 0 var(--space-6);
  animation: fade-up 0.9s var(--ease-out) both;
}

.hero__eyebrow {
  margin-bottom: var(--space-6);
  animation: fade-up 0.8s var(--ease-out) 0.1s both;
}

.hero__title {
  font-size: var(--text-hero-desktop);
  font-weight: 700;
  line-height: 1.04;
  margin-bottom: var(--space-6);
  /* -0.04em reads more "display type" — Apple/Linear-style tight tracking.
     Anything tighter than -0.045em starts collapsing character pairs. */
  letter-spacing: 0;
  animation: fade-up 0.8s var(--ease-out) 0.2s both;
  /* Soft radial glow behind headline for depth */
  text-shadow: 0 1px 0 rgba(255,255,255,0.04);
  text-wrap: balance;
}

/* The hero title is split into animated character spans by main.js.
   Hide the unsplit title only when JS is definitely running so the
   browser does not paint the headline once, then repaint it as spans. */
.js .hero__title:not([data-split="1"]) {
  animation: none;
  opacity: 0;
}

/* Title uses solid current-color so child character spans (split by JS
   for the reveal animation) render correctly. A subtle downward opacity
   fade-off on the chars themselves provides visual depth. */
.hero__title { color: var(--text-primary); }

.hero__title-word {
  display: inline-block;
}

.hero__title-word + .hero__title-word {
  margin-left: 0;
}

/* Gradient word accent (optional — add .hero__title-accent span in HTML) */
.hero__title-accent {
  background: linear-gradient(135deg, var(--accent-green), var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__subtitle {
  font-size: var(--text-hero-body-desktop);
  color: var(--text-secondary);
  /* 1.7 was essay-length; marketing copy wants tighter, more confident */
  line-height: 1.55;
  margin: 0 auto var(--space-3);
  max-width: 560px;
  /* Slight negative tracking on subtitle pairs it visually with the tight-tracked title */
  letter-spacing: 0;
  text-wrap: pretty;
  animation: fade-up 0.8s var(--ease-out) 0.3s both;
}

/* Reinforcing line under the subtitle. Smaller, muted, slightly later in
   the reveal sequence. Anchors the audience ("Designed for Mac users…")
   without competing visually with the headline/subtitle pair. */
.hero__support {
  font-size: 14px;
  color: var(--text-tertiary, var(--text-secondary));
  opacity: 0.78;
  line-height: 1.5;
  letter-spacing: 0;
  margin: 0 auto var(--space-5);
  max-width: 520px;
  animation: fade-up 0.8s var(--ease-out) 0.45s both;
}

.hero__actions {
  display: flex; gap: var(--space-3);
  justify-content: center; flex-wrap: wrap;
  margin-bottom: var(--space-8);
  animation: fade-up 0.8s var(--ease-out) 0.4s both;
}

.hero__btn-download {
  min-width: 198px;
  box-shadow:
    var(--glow-green),
    0 18px 46px rgba(52,211,153,0.16),
    inset 0 1px 0 rgba(255,255,255,0.24);
}

.hero__meta {
  display: flex; gap: var(--space-6);
  justify-content: center; flex-wrap: wrap;
  font-size: var(--text-small); color: var(--text-muted);
  animation: fade-up 0.8s var(--ease-out) 0.5s both;
}

.hero__meta-item {
  display: flex; align-items: center; gap: 6px;
}

.hero__meta-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-green); opacity: 0.6;
}

/* --- Chip variant: small pill showing system requirements + trial flag --- */
.hero__meta--chips {
  gap: 8px;
  font-size: 12.5px;
  margin-top: var(--space-2);
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  white-space: nowrap;
  line-height: 1;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.hero-chip svg { opacity: 0.7; }
.hero-chip:hover {
  border-color: rgba(255,255,255,0.18);
  color: var(--text-primary);
}
.hero-chip--accent {
  background: rgba(84,211,154,0.10);
  border-color: rgba(84,211,154,0.35);
  color: #54D39A;
  font-weight: 600;
}
.hero-chip--accent:hover {
  background: rgba(84,211,154,0.16);
  border-color: rgba(84,211,154,0.5);
  color: #54D39A;
}
.hero-chip__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #54D39A;
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.82); }
}

/* --- Product proof: quiet desktop fact rail, compact mobile card --- */
.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: min(760px, calc(100% - 40px));
  margin: var(--space-6) auto 0;
  padding: 1px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.055) 16%, rgba(255,255,255,0.055) 84%, transparent),
    linear-gradient(90deg, transparent, rgba(52,211,153,0.11) 50%, transparent);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: fade-up 0.8s var(--ease-out) 0.62s both;
}

.hero-proof__item {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  min-height: 68px;
  align-content: center;
  padding: 11px 22px;
  text-align: left;
  border-radius: 0;
  overflow: visible;
}

.hero-proof__item::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--accent-green);
  box-shadow:
    0 0 0 4px rgba(52,211,153,0.08),
    0 0 18px rgba(52,211,153,0.22);
}

.hero-proof__item + .hero-proof__item {
  border-left: 1px solid rgba(255,255,255,0.10);
}

.hero-proof__label {
  grid-column: 2;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(84,211,154,0.88);
}

.hero-proof__title {
  grid-column: 2;
  display: block;
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.22;
  letter-spacing: 0;
  color: var(--text-primary);
}

.hero-proof__body {
  display: none;
}

[data-theme="light"] .hero-proof__item {
  background: transparent;
}

[data-theme="light"] .hero-proof__item::before {
  background: var(--accent-green);
  box-shadow:
    0 0 0 4px rgba(43,182,133,0.10),
    0 0 16px rgba(43,182,133,0.20);
}

[data-theme="light"] .hero-proof {
  border-top-color: rgba(18,33,48,0.12);
  border-bottom-color: rgba(18,33,48,0.08);
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.62) 16%, rgba(255,255,255,0.62) 84%, transparent),
    linear-gradient(90deg, transparent, rgba(43,182,133,0.12) 50%, transparent);
}

[data-theme="light"] .hero-proof__item + .hero-proof__item {
  border-left-color: rgba(18,33,48,0.08);
}

@media (max-width: 760px) {
  .hero-proof {
    grid-template-columns: 1fr;
    gap: 0;
    width: min(430px, calc(100% - 28px));
    margin-top: var(--space-4);
    padding: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)),
      rgba(4, 10, 18, 0.18);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 22px 54px rgba(0,0,0,0.18);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    counter-reset: hero-proof;
  }
  .hero-proof__item {
    counter-increment: hero-proof;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    min-height: auto;
    gap: 3px;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hero-proof__item + .hero-proof__item {
    border-top: 1px solid rgba(255,255,255,0.08);
    border-left: 0;
    border-radius: 0;
  }
  .hero-proof__item::before {
    content: counter(hero-proof, decimal-leading-zero);
    position: static;
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(52, 211, 153, 0.28);
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.08);
    color: var(--accent-green);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 1;
  }
  .hero-proof__label,
  .hero-proof__title,
  .hero-proof__body {
    grid-column: 2;
  }
  .hero-proof__label {
    font-size: 9px;
    letter-spacing: 0.16em;
  }
  .hero-proof__title {
    font-size: 15px;
    line-height: 1.18;
  }
  .hero-proof__body {
    display: block;
    max-width: none;
    font-size: 12.5px;
    line-height: 1.38;
  }

  [data-theme="light"] .hero-proof {
    border-color: rgba(18,33,48,0.10);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.62)),
      rgba(255,255,255,0.68);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.86),
      0 22px 54px rgba(18,33,48,0.10);
  }
  [data-theme="light"] .hero-proof__item + .hero-proof__item {
    border-top-color: rgba(18,33,48,0.08);
  }
}

/* --- Live download counter --- */
.hero__download-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-3) auto 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(84,211,154,0.06);
  border: 1px solid rgba(84,211,154,0.18);
  font-size: 12.5px;
  color: var(--text-secondary);
  animation: fade-up 0.8s var(--ease-out) 0.6s both;
}
.hero__download-count strong {
  color: #54D39A;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  transition: transform 0.4s var(--ease-out);
  display: inline-block;
}
.hero__download-count.is-ticking strong {
  transform: translateY(-1px) scale(1.04);
}
.hero__download-count.is-ticking {
  border-color: rgba(84,211,154,0.5);
  background: rgba(84,211,154,0.12);
}
.hero__download-count-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #54D39A;
  box-shadow: 0 0 0 0 rgba(84,211,154,0.7);
  animation: download-pulse 2.4s ease-out infinite;
}
@keyframes download-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(84,211,154,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(84,211,154,0); }
  100% { box-shadow: 0 0 0 0 rgba(84,211,154,0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-chip__dot,
  .hero__download-count-dot {
    animation: none;
  }
}

/* =============================================
   SECTION TRANSITION MESH — smooth gradients
   between sections instead of hard edges
   ============================================= */
.section-mesh {
  position: relative;
  height: 160px;
  margin: -80px 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.section-mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(52,211,153,0.04) 0%, transparent 70%);
  filter: blur(40px);
}

.section-mesh--warm::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(245,158,11,0.03) 0%, transparent 70%);
}

.section-mesh--cyan::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(56,189,248,0.04) 0%, transparent 70%);
}

/* =============================================
   LIVE MENU BAR PREVIEW
   ============================================= */
.menu-preview-section {
  position: relative;
  background: transparent;
}

.menu-preview {
  --preview-accent: #34d399;
  --preview-accent-2: #5eead4;
  --preview-wallpaper-a: rgba(52,211,153,0.56);
  --preview-wallpaper-b: rgba(96,165,250,0.44);
  --preview-wallpaper-c: rgba(244,114,182,0.28);
  --preview-bar: rgba(5,9,15,0.56);
  display: grid;
  gap: var(--space-6);
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 40px;
}

.menu-preview-section .section-header {
  margin-bottom: var(--space-7);
}

.menu-preview[data-menu-preview-state="focus"] {
  --preview-accent: #22c55e;
  --preview-accent-2: #a3e635;
  --preview-wallpaper-a: rgba(34,197,94,0.52);
  --preview-wallpaper-b: rgba(14,165,233,0.34);
  --preview-wallpaper-c: rgba(250,204,21,0.20);
  --preview-bar: rgba(4,16,13,0.62);
}

.menu-preview[data-menu-preview-state="calendar"] {
  --preview-accent: #60a5fa;
  --preview-accent-2: #c084fc;
  --preview-wallpaper-a: rgba(96,165,250,0.50);
  --preview-wallpaper-b: rgba(192,132,252,0.32);
  --preview-wallpaper-c: rgba(45,212,191,0.22);
  --preview-bar: rgba(7,14,28,0.64);
}

.menu-preview[data-menu-preview-state="writing"] {
  --preview-accent: #f472b6;
  --preview-accent-2: #fbbf24;
  --preview-wallpaper-a: rgba(244,114,182,0.42);
  --preview-wallpaper-b: rgba(251,191,36,0.26);
  --preview-wallpaper-c: rgba(56,189,248,0.24);
  --preview-bar: rgba(20,10,20,0.64);
}

.menu-preview__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.menu-preview__control {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.052);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.menu-preview__control svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.menu-preview__control:hover {
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.078);
  transform: translateY(-1px);
}

.menu-preview__control:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.menu-preview__control.is-active {
  color: #061017;
  border-color: rgba(52,211,153,0.86);
  background: linear-gradient(135deg, rgba(52,211,153,0.98), rgba(94,234,212,0.86));
  box-shadow: none;
}

.menu-preview__device {
  position: relative;
  min-height: clamp(430px, 42vw, 540px);
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.16);
  background: #07111b;
  box-shadow:
    0 34px 100px rgba(0,0,0,0.36),
    0 0 0 1px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.42);
  isolation: isolate;
}

.menu-preview__device::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 18px 34px rgba(255,255,255,0.035),
    inset 0 -42px 80px rgba(0,0,0,0.30);
}

.menu-preview__device::after {
  content: none;
}

.menu-preview__wallpaper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, var(--preview-wallpaper-a), transparent 24%),
    radial-gradient(circle at 82% 24%, var(--preview-wallpaper-b), transparent 26%),
    radial-gradient(circle at 52% 92%, var(--preview-wallpaper-c), transparent 28%),
    linear-gradient(145deg, #07101b 0%, #0d2331 46%, #17141f 100%);
  filter: saturate(1.08);
  z-index: -2;
  transition: background 520ms var(--ease), filter 520ms var(--ease);
  animation: wallpaper-breathe 14s ease-in-out infinite alternate;
}

.menu-preview__wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.34)),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.16), transparent 32%);
  z-index: -1;
}

.menu-preview__bar {
  position: relative;
  z-index: 2;
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(360px, 470px) minmax(150px, 1fr);
  align-items: start;
  gap: 14px;
  padding: 0 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 42%),
    var(--preview-bar);
  border-bottom: 1px solid rgba(255,255,255,0.13);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  color: rgba(255,255,255,0.82);
  transition: background 420ms var(--ease), border-color 420ms var(--ease);
}

@keyframes wallpaper-breathe {
  from { transform: scale(1); filter: saturate(1.04) brightness(1); }
  to { transform: scale(1.035); filter: saturate(1.16) brightness(1.04); }
}

.menu-preview__desktop {
  position: absolute;
  inset: 86px 34px 100px;
  z-index: 1;
  pointer-events: none;
}

.menu-preview__desktop-stack {
  position: absolute;
  display: grid;
  gap: 10px;
}

.menu-preview__desktop-stack--left {
  left: 0;
  top: 42px;
}

.menu-preview__desktop-stack--right {
  right: 0;
  top: 18px;
}

.menu-preview__desktop-chip {
  min-width: 118px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.58);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 18px 42px rgba(0,0,0,0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(0);
  transition:
    color 420ms var(--ease),
    border-color 420ms var(--ease),
    background 420ms var(--ease),
    opacity 420ms var(--ease),
    transform 420ms var(--ease);
}

.menu-preview[data-menu-preview-state="media"] .menu-preview__desktop-stack--left .menu-preview__desktop-chip:first-child,
.menu-preview[data-menu-preview-state="focus"] .menu-preview__desktop-stack--right .menu-preview__desktop-chip:first-child,
.menu-preview[data-menu-preview-state="calendar"] .menu-preview__desktop-stack--right .menu-preview__desktop-chip:last-child,
.menu-preview[data-menu-preview-state="writing"] .menu-preview__desktop-stack--left .menu-preview__desktop-chip:last-child {
  color: rgba(255,255,255,0.86);
  border-color: color-mix(in srgb, var(--preview-accent) 44%, rgba(255,255,255,0.12));
  background: color-mix(in srgb, var(--preview-accent) 20%, rgba(255,255,255,0.08));
  transform: translateY(-2px);
}

.menu-preview__brand,
.menu-preview__status {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  min-height: 54px;
  white-space: nowrap;
}

.menu-preview__brand span,
.menu-preview__status span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-preview__status {
  justify-content: flex-end;
  gap: 10px;
}

.menu-preview__apple {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: currentColor;
  transform: translateY(-1px);
}

.menu-preview__wifi,
.menu-preview__battery {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.menu-preview__wifi svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-preview__battery svg {
  width: 30px;
  height: 15px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

.menu-preview__battery svg path {
  fill: currentColor;
  stroke: none;
}

.menu-preview__battery-fill {
  fill: currentColor;
  stroke: none;
  opacity: 0.92;
}

.menu-preview__slot {
  display: flex;
  align-self: start;
  justify-content: center;
  min-width: 0;
}

.menu-preview__pill {
  width: min(100%, 470px);
  min-height: 42px;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 10px;
  border-radius: var(--radius-button);
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
  animation: menu-preview-pop 360ms var(--ease) both;
  transition: border-color 360ms var(--ease), background 360ms var(--ease), box-shadow 360ms var(--ease);
}

.menu-preview[data-menu-preview-state="media"] .menu-preview__pill,
.menu-preview[data-menu-preview-state="focus"] .menu-preview__pill {
  width: min(357px, 100%);
  min-height: 50px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #030304, #010102);
  border-color: #020203;
  border-top: 0;
  box-shadow: none;
}

.menu-preview[data-menu-preview-state="focus"] .menu-preview__pill {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px 10px 8px 14px;
}

.menu-preview__pill:not([hidden]) {
  border-color: color-mix(in srgb, var(--preview-accent) 36%, rgba(255,255,255,0.18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 14px 40px color-mix(in srgb, var(--preview-accent) 18%, transparent);
}

.menu-preview[data-menu-preview-state="media"] .menu-preview__pill:not([hidden]),
.menu-preview[data-menu-preview-state="focus"] .menu-preview__pill:not([hidden]) {
  border-color: #020203;
  box-shadow: none;
}

.menu-preview__pill[hidden],
.menu-preview__notch[hidden] {
  display: none;
}

.menu-preview.is-media-expanded [data-menu-preview-panel="media"],
.menu-preview.is-focus-running [data-menu-preview-card="focus"] {
  display: none;
}

.menu-preview.is-focus-running [data-menu-preview-panel="focus"] {
  display: grid;
}

.menu-preview__art,
.menu-preview__album {
  background:
    linear-gradient(135deg, rgba(52,211,153,0.22), rgba(96,165,250,0.18)),
    url('/assets/artwork/spotify-dirty-paws.webp') center / cover;
}

.menu-preview__art {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  position: relative;
  border: 0;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), filter 260ms var(--ease);
}

.menu-preview[data-menu-preview-state="media"] .menu-preview__art {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.26);
}

.menu-preview__art:hover {
  transform: scale(1.04);
  filter: saturate(1.08);
}

.menu-preview__art:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.24),
    0 10px 26px rgba(0,0,0,0.28);
}

.menu-preview__source-badge {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  position: absolute;
  left: 38px;
  top: 6px;
  border-radius: 999px;
  background: #1ed760;
  color: #031208;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(0,0,0,0.42);
  z-index: 2;
}

.menu-preview__source-badge--large {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 28px;
  height: 28px;
  margin: 0;
  font-size: 14px;
}

.menu-preview__source-badge svg {
  display: block;
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.menu-preview__source-badge--large svg {
  width: 18px;
  height: 18px;
}

.menu-preview__copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  font-size: 11px;
  line-height: 1.15;
}

.menu-preview__copy strong,
.menu-preview__copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-preview__copy strong {
  color: #fff;
  font-weight: 700;
}

.menu-preview__copy span {
  color: rgba(255,255,255,0.68);
}

.menu-preview__progress {
  width: 72px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
}

.menu-preview__progress span {
  display: block;
  width: 58%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--preview-accent), var(--preview-accent-2));
}

.menu-preview__bars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  justify-content: flex-end;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #ff817c;
  cursor: pointer;
  position: relative;
  transition: background 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease);
}

.menu-preview__bars span {
  width: 2px;
  height: 14px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: 50% 100%;
  animation: preview-bars 850ms ease-in-out infinite;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}

.menu-preview__bars span:nth-child(2) { animation-delay: 110ms; height: 19px; }
.menu-preview__bars span:nth-child(3) { animation-delay: 220ms; height: 13px; }
.menu-preview__bars span:nth-child(4) { animation-delay: 330ms; height: 17px; }

.menu-preview__bars::before,
.menu-preview__bars::after {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: scaleY(0.72);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}

.menu-preview__bars::before { left: 9px; }
.menu-preview__bars::after { right: 9px; }

.menu-preview__bars:hover,
.menu-preview__bars:focus-visible,
.menu-preview__pill.is-paused .menu-preview__bars {
  background: rgba(255,129,124,0.12);
  color: #fff;
}

.menu-preview__bars:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,129,124,0.22);
}

.menu-preview__bars:hover span,
.menu-preview__bars:focus-visible span,
.menu-preview__pill.is-paused .menu-preview__bars span {
  opacity: 0;
  animation-play-state: paused;
}

.menu-preview__bars:hover::before,
.menu-preview__bars:hover::after,
.menu-preview__bars:focus-visible::before,
.menu-preview__bars:focus-visible::after,
.menu-preview__pill.is-paused .menu-preview__bars::before,
.menu-preview__pill.is-paused .menu-preview__bars::after {
  opacity: 1;
  transform: scaleY(1);
}

@keyframes preview-bars {
  0%, 100% { transform: scaleY(0.54); opacity: 0.72; }
  50% { transform: scaleY(1); opacity: 1; }
}

.menu-preview__pause-button {
  --focus-progress: 0turn;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background:
    radial-gradient(circle at center, #070707 0 55%, transparent 56%),
    conic-gradient(#ff9a3d 0 var(--focus-progress), rgba(255,255,255,0.16) var(--focus-progress) 1turn);
  position: relative;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.08),
    0 0 0 1px rgba(255,255,255,0.08);
}

.menu-preview__pause-button::before,
.menu-preview__pause-button::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: #ff9a3d;
}

.menu-preview__pause-button::before { left: 11px; }
.menu-preview__pause-button::after { right: 11px; }

.menu-preview__pause-button.is-paused::before {
  left: 13px;
  top: 11px;
  bottom: auto;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #ff9a3d;
  border-radius: 0;
  background: transparent;
}

.menu-preview__pause-button.is-paused::after {
  content: none;
}

.menu-preview__focus-ring,
.menu-preview__spark,
.menu-preview__date {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--preview-accent) 24%, transparent);
  color: color-mix(in srgb, var(--preview-accent-2) 84%, white);
}

.menu-preview__focus-ring {
  border: 5px solid color-mix(in srgb, var(--preview-accent) 28%, transparent);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--preview-accent) 82%, white);
}

.menu-preview__spark::before {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 34%, 98% 50%, 61% 66%, 50% 100%, 39% 66%, 2% 50%, 39% 34%);
}

.menu-preview__date {
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.menu-preview__mini-button,
.menu-preview__wide-button {
  border: 0;
  border-radius: var(--radius-button-sm);
  background: linear-gradient(135deg, var(--preview-accent), var(--preview-accent-2));
  color: #061017;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.menu-preview__mini-button {
  min-height: 30px;
  padding: 0 12px;
}

.menu-preview__wide-button {
  width: 100%;
  min-height: 38px;
  margin-top: 12px;
}

.menu-preview__notch {
  position: absolute;
  top: 54px;
  left: 50%;
  z-index: 3;
  width: min(88%, 430px);
  min-height: 0;
  padding: 18px;
  border-radius: var(--radius-card-sm);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.07)),
    rgba(8,13,22,0.82);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 28px 80px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  transform: translateX(-50%);
  color: #fff;
  animation: menu-preview-pop 380ms var(--ease) both;
  transition: border-color 420ms var(--ease), box-shadow 420ms var(--ease);
}

.menu-preview__notch:not([hidden]) {
  border-color: color-mix(in srgb, var(--preview-accent) 30%, rgba(255,255,255,0.16));
  box-shadow:
    0 28px 80px rgba(0,0,0,0.34),
    0 0 70px color-mix(in srgb, var(--preview-accent) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

.menu-preview[data-menu-preview-state="media"] .menu-preview__notch {
  top: 84px;
  width: min(306px, calc(100% - 72px));
  max-width: none;
  padding: 14px;
  border-radius: 22px;
  background: rgba(42,49,48,0.86);
  border-color: rgba(255,255,255,0.14);
  transform: translateX(-50%);
}

.menu-preview[data-menu-preview-state="focus"] .menu-preview__notch {
  top: 54px;
  width: min(360px, calc(100% - 60px));
  min-height: 0;
  padding: 20px;
  border-radius: 28px;
  background: #050505;
  border-color: rgba(255,255,255,0.10);
}

.menu-preview__card-head,
.menu-preview__card-body,
.menu-preview__event-row,
.menu-preview__chips {
  display: flex;
  align-items: center;
}

.menu-preview__card-head {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  color: rgba(255,255,255,0.62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-preview__card-body {
  gap: 14px;
}

.menu-preview__album {
  width: 86px;
  height: 86px;
  flex: 0 0 auto;
  border-radius: var(--radius-card-sm);
  box-shadow: 0 18px 44px rgba(0,0,0,0.32);
}

.menu-preview__big-player {
  display: grid;
  gap: 8px;
}

.menu-preview__album--large {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.04)),
    url('/assets/artwork/spotify-dirty-paws.webp') center / cover;
  overflow: hidden;
  box-shadow:
    0 22px 60px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 520ms var(--ease), box-shadow 520ms var(--ease), filter 520ms var(--ease);
}

.menu-preview__album--large::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.20), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(255,255,255,0.18), transparent 20%);
  opacity: 0.82;
  pointer-events: none;
}

.menu-preview__album--large::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 36%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.22));
  pointer-events: none;
}

.menu-preview[data-menu-preview-state="media"] .menu-preview__notch:hover .menu-preview__album--large {
  transform: translateY(-2px) scale(1.01);
  filter: saturate(1.08);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.20);
}

.menu-preview__player-meta {
  display: grid;
  gap: 4px;
  text-align: center;
}

.menu-preview__player-meta span,
.menu-preview__time-row {
  color: rgba(255,255,255,0.64);
  font-weight: 800;
}

.menu-preview__player-meta strong {
  color: #fff;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
}

.menu-preview__timeline {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.24);
}

.menu-preview__timeline span {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: #f4f5f5;
  transition: width 220ms linear;
}

.menu-preview__time-row,
.menu-preview__transport {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-preview__time-row {
  font-size: 11px;
}

.menu-preview__transport {
  color: rgba(255,255,255,0.72);
  padding: 0 8% 0;
}

.menu-preview__spotify-control {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,0.72);
  cursor: pointer;
  padding: 0;
  transition: color 180ms var(--ease), transform 180ms var(--ease), background 180ms var(--ease);
}

.menu-preview__spotify-control svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.menu-preview__spotify-control--shuffle svg,
.menu-preview__spotify-control--repeat svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-preview__spotify-control:hover {
  color: #fff;
  transform: scale(1.07);
}

.menu-preview__spotify-control:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.18);
}

.menu-preview__spotify-control--play {
  width: 36px;
  height: 36px;
  background: #fff;
  color: #050505;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}

.menu-preview__spotify-control--play svg {
  width: 18px;
  height: 18px;
}

.menu-preview__focus-widget {
  display: grid;
  gap: 14px;
}

.menu-preview__focus-widget-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}

.menu-preview__focus-widget-head strong {
  color: #fff;
  font-size: 22px;
}

.menu-preview__focus-icon,
.menu-preview__focus-add {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: #121212;
}

.menu-preview__focus-icon {
  position: relative;
}

.menu-preview__focus-icon::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 3px solid rgba(255,255,255,0.82);
  border-right-color: rgba(255,255,255,0.26);
  border-radius: 999px;
}

.menu-preview__focus-shortcut {
  padding: 7px 12px;
  border-radius: 999px;
  background: #181818;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  font-weight: 800;
}

.menu-preview__focus-add {
  position: relative;
}

.menu-preview__focus-add::before,
.menu-preview__focus-add::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,0.82);
  border-radius: 999px;
}

.menu-preview__focus-add::before {
  left: 10px;
  right: 10px;
  top: 17px;
  height: 2px;
}

.menu-preview__focus-add::after {
  top: 10px;
  bottom: 10px;
  left: 17px;
  width: 2px;
}

.menu-preview__focus-card {
  padding: 14px 16px 16px;
  border-radius: 18px;
  background: #121d2d;
  border: 1px solid rgba(126,159,211,0.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.menu-preview__focus-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.menu-preview__focus-card-top strong {
  color: #f7f8fb;
  font-size: 20px;
}

.menu-preview__focus-card-top span {
  padding: 4px 10px;
  border-radius: 7px;
  background: #28446d;
  border: 1px solid #496a9f;
  color: #eef4ff;
  font-size: 15px;
  font-weight: 800;
}

.menu-preview__focus-time {
  margin-top: 10px;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.menu-preview__focus-start {
  margin-top: 22px;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 850;
  position: relative;
  padding-left: 32px;
}

.menu-preview__focus-start::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  border-left: 13px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.menu-preview__card-body strong,
.menu-preview__event-row strong {
  display: block;
  margin-bottom: 5px;
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
}

.menu-preview__card-body p,
.menu-preview__card-note,
.menu-preview__event-row span {
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-size: 13px;
  line-height: 1.5;
}

.menu-preview__focus-meter {
  height: 12px;
  overflow: hidden;
  margin: 26px 0 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}

.menu-preview__focus-meter span {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--preview-accent), var(--preview-accent-2));
}

.menu-preview__dock {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  background: rgba(255,255,255,0.075);
  box-shadow:
    0 20px 54px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(22px) saturate(1.28);
  -webkit-backdrop-filter: blur(22px) saturate(1.28);
  transform: translateX(-50%);
  opacity: 0.82;
  pointer-events: none;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}

.menu-preview__dock span {
  width: 19px;
  height: 19px;
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(255,255,255,0.58), rgba(255,255,255,0.14));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.36),
    0 7px 16px rgba(0,0,0,0.16);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}

.menu-preview[data-menu-preview-state="media"] .menu-preview__dock span:nth-child(2),
.menu-preview[data-menu-preview-state="focus"] .menu-preview__dock span:nth-child(4) {
  transform: translateY(-4px) scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.44),
    0 12px 24px rgba(0,0,0,0.22);
}

.menu-preview__dock span:nth-child(2) {
  background: linear-gradient(135deg, var(--preview-accent), rgba(255,255,255,0.18));
}

.menu-preview__dock span:nth-child(4) {
  background: linear-gradient(135deg, var(--preview-accent-2), rgba(255,255,255,0.18));
}

@keyframes menu-preview-pop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.menu-preview__pill {
  animation-name: menu-preview-pill-pop;
}

@keyframes menu-preview-pill-pop {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.menu-preview__event-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 14px;
  border-radius: var(--radius-card-sm);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}

.menu-preview__event-row span {
  text-align: right;
}

.menu-preview__chips {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.menu-preview__chips span {
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 12px;
  font-weight: 700;
}

[data-theme="light"] .menu-preview__control {
  background: rgba(255,255,255,0.70);
  border-color: rgba(15,23,42,0.12);
  color: rgba(17,24,39,0.66);
}

[data-theme="light"] .menu-preview__control:hover {
  color: #111827;
  border-color: rgba(16,185,129,0.34);
  background: rgba(255,255,255,0.94);
}

[data-theme="light"] .menu-preview__control.is-active {
  color: #052016;
  border-color: rgba(5,150,105,0.48);
  background: linear-gradient(135deg, rgba(52,211,153,0.92), rgba(125,211,252,0.72));
  box-shadow: none;
}

[data-theme="light"] .menu-preview__device {
  border-color: rgba(15,23,42,0.10);
  box-shadow:
    0 34px 100px rgba(15,23,42,0.18),
    inset 0 1px 0 rgba(255,255,255,0.74);
}

@media (max-width: 900px) {
  .menu-preview__device {
    min-height: 520px;
  }
  .menu-preview__bar {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .menu-preview__brand,
  .menu-preview__status {
    display: none;
  }
  .menu-preview__desktop {
    display: none;
  }
}

@media (max-width: 560px) {
  .menu-preview-section .section-header {
    margin-bottom: var(--space-6);
  }
  .menu-preview-section .section-title {
    font-size: 30px;
    line-height: 1.08;
  }
  .menu-preview-section .section-subtitle {
    font-size: 16px;
    line-height: 1.45;
  }
  .menu-preview {
    padding-top: 36px;
  }
  .menu-preview__controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .menu-preview__control {
    justify-content: center;
    padding: 0 10px;
    min-height: 44px;
  }
  .menu-preview__device {
    min-height: 520px;
    border-radius: var(--radius-card-sm);
  }
  .menu-preview__bar {
    padding: 10px;
  }
  .menu-preview__pill {
    width: 100%;
  }
  .menu-preview[data-menu-preview-state="media"] .menu-preview__pill,
  .menu-preview[data-menu-preview-state="focus"] .menu-preview__pill {
    width: min(100%, 289px);
  }
  .menu-preview__progress {
    display: none;
  }
  .menu-preview__notch {
    top: 78px;
    width: calc(100% - 24px);
    padding: 15px;
  }
  .menu-preview[data-menu-preview-state="media"] .menu-preview__notch {
    top: 78px;
    width: min(286px, calc(100% - 28px));
  }
  .menu-preview__card-body {
    align-items: flex-start;
  }
  .menu-preview__album {
    width: 70px;
    height: 70px;
  }
  .menu-preview__dock {
    bottom: 18px;
    gap: 7px;
    padding: 7px 8px;
  }
  .menu-preview__dock span {
    width: 16px;
    height: 16px;
    border-radius: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-preview__pill,
  .menu-preview__notch {
    animation: none;
  }
  .menu-preview__wallpaper,
  .menu-preview__bar,
  .menu-preview__desktop-chip,
  .menu-preview__album--large,
  .menu-preview__timeline span,
  .menu-preview__bars span,
  .menu-preview__dock,
  .menu-preview__dock span {
    transition: none;
    animation: none;
  }
}

.menu-preview.menu-preview--lock {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.menu-preview.menu-preview--lock .menu-preview__controls {
  position: absolute;
  z-index: 6;
  left: clamp(18px, 2vw, 28px);
  top: clamp(94px, 9vw, 126px);
  display: grid;
  grid-template-columns: 1fr;
  width: min(148px, 18vw);
  gap: 9px;
  padding: 0;
}

.menu-preview.menu-preview--lock .menu-preview__control {
  justify-content: flex-start;
  min-height: 42px;
  padding: 0 13px 0 11px;
  border-radius: 0 12px 12px 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.055)),
    rgba(5,9,15,0.46);
  color: rgba(255,255,255,0.74);
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, var(--preview-accent) 34%, transparent),
    0 14px 32px rgba(0,0,0,0.14);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

.menu-preview.menu-preview--lock .menu-preview__control.is-active {
  border-color: rgba(52,211,153,0.72);
  background: linear-gradient(135deg, rgba(52,211,153,0.98), rgba(94,234,212,0.86));
  color: #061017;
}

.menu-preview.menu-preview--lock .menu-preview__device {
  position: absolute;
  inset: 0;
  min-height: 0;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.menu-preview.menu-preview--lock .menu-preview__device::before,
.menu-preview.menu-preview--lock .menu-preview__device::after,
.menu-preview.menu-preview--lock .menu-preview__wallpaper {
  content: none;
  display: none;
}

.menu-preview.menu-preview--lock .menu-preview__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 54px;
  padding: 0 clamp(18px, 2.4vw, 30px);
  border-bottom-color: rgba(255,255,255,0.08);
  border-radius: 0;
  background: color-mix(in srgb, var(--preview-bar) 42%, rgba(4,8,14,0.2));
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.menu-preview.menu-preview--lock .menu-preview__desktop {
  inset: 94px clamp(28px, 4vw, 54px) 88px clamp(188px, 20vw, 238px);
}

.menu-preview.menu-preview--lock .menu-preview__dock {
  bottom: 26px;
}

.menu-preview.menu-preview--lock[data-menu-preview-state="media"] .menu-preview__notch {
  top: 76px;
  width: min(326px, calc(100% - 220px));
  background: rgba(5,8,13,0.76);
}

.menu-preview.menu-preview--lock[data-menu-preview-state="focus"] .menu-preview__notch,
.menu-preview.menu-preview--lock[data-menu-preview-state="calendar"] .menu-preview__notch,
.menu-preview.menu-preview--lock[data-menu-preview-state="writing"] .menu-preview__notch {
  top: 82px;
  width: min(430px, calc(100% - 240px));
  background:
    linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)),
    rgba(5,9,15,0.76);
}

@media (max-width: 900px) {
  .menu-preview.menu-preview--lock .menu-preview__device {
    min-height: 0;
  }

  .menu-preview.menu-preview--lock .menu-preview__desktop {
    display: block;
    inset: 92px 22px 82px 168px;
  }
}

@media (max-width: 560px) {
  .menu-preview.menu-preview--lock {
    padding-top: 0;
  }

  .menu-preview.menu-preview--lock .menu-preview__controls {
    left: 13px;
    right: 13px;
    top: 74px;
    width: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .menu-preview.menu-preview--lock .menu-preview__control {
    justify-content: center;
    min-height: 38px;
    padding: 0;
    border-radius: 12px;
    font-size: 0;
  }

  .menu-preview.menu-preview--lock .menu-preview__control svg {
    width: 17px;
    height: 17px;
  }

  .menu-preview.menu-preview--lock .menu-preview__device {
    min-height: 0;
  }

  .menu-preview.menu-preview--lock .menu-preview__bar {
    min-height: 50px;
    padding: 8px 12px;
  }

  .menu-preview.menu-preview--lock .menu-preview__desktop {
    display: none;
  }

  .menu-preview.menu-preview--lock[data-menu-preview-state="media"] .menu-preview__notch {
    top: 126px;
    width: min(262px, calc(100% - 24px));
  }

  .menu-preview.menu-preview--lock[data-menu-preview-state="focus"] .menu-preview__notch,
  .menu-preview.menu-preview--lock[data-menu-preview-state="calendar"] .menu-preview__notch,
  .menu-preview.menu-preview--lock[data-menu-preview-state="writing"] .menu-preview__notch {
    top: 126px;
    width: calc(100% - 28px);
  }

  .menu-preview.menu-preview--lock .menu-preview__dock {
    bottom: 14px;
  }
}

/* =============================================
   FEATURE CARDS (Home)
   ============================================= */
.feature-card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  transition: all var(--dur-slow) var(--ease);
  position: relative;
  overflow: hidden;
}

/* Subtle shimmer on hover */
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 200%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(52,211,153,0.03) 50%, transparent 100%);
  transition: left 0.6s var(--ease);
  pointer-events: none;
}
.feature-card:hover::before {
  left: 100%;
}

.feature-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-soft);
  transform: translateY(-4px);
}

.feature-card__icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-button-sm);
  background: rgba(52,211,153,0.07);
  border: 1px solid rgba(52,211,153,0.12);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
  color: var(--accent-green);
  transition: all var(--dur-med) var(--ease);
}
.feature-card:hover .feature-card__icon {
  background: rgba(52,211,153,0.12);
  box-shadow: 0 0 20px rgba(52,211,153,0.1);
  transform: scale(1.05);
}

.aurora-symbol {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  color: var(--accent-green);
}

.aurora-symbol span,
.aurora-symbol::before,
.aurora-symbol::after {
  position: absolute;
  content: "";
  display: block;
  box-sizing: border-box;
}

.aurora-symbol--media {
  border-radius: 9px;
  background:
    radial-gradient(circle at 68% 34%, rgba(255, 143, 184, 0.88) 0 17%, transparent 18%),
    linear-gradient(145deg, rgba(255,255,255,0.22), transparent 38%),
    linear-gradient(150deg, #f0b78d, #6f4d89 48%, #21395e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 9px 18px rgba(0,0,0,0.18);
}
.aurora-symbol--media::before {
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
}
.aurora-symbol--media span:nth-child(1) {
  left: 4px;
  bottom: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1ed760;
  border: 2px solid rgba(7, 12, 18, 0.72);
}
.aurora-symbol--media span:nth-child(2),
.aurora-symbol--media span:nth-child(3) {
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
}
.aurora-symbol--media span:nth-child(2) { right: 8px; height: 9px; }
.aurora-symbol--media span:nth-child(3) { right: 13px; height: 14px; }

.aurora-symbol--widgets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
}
.aurora-symbol--widgets span {
  position: relative;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.aurora-symbol--widgets span:nth-child(1) { background: linear-gradient(145deg, rgba(52,211,153,0.92), rgba(24,85,65,0.86)); }
.aurora-symbol--widgets span:nth-child(2) { background: linear-gradient(145deg, rgba(96,165,250,0.9), rgba(37,64,136,0.88)); }
.aurora-symbol--widgets span:nth-child(3) { background: linear-gradient(145deg, rgba(255,143,184,0.9), rgba(105,45,98,0.88)); }
.aurora-symbol--widgets span:nth-child(4) { background: linear-gradient(145deg, rgba(245,158,11,0.9), rgba(95,62,18,0.88)); }

.aurora-symbol--calendar {
  border-radius: 8px;
  background: linear-gradient(180deg, #f6f8ff 0 24%, #172334 24% 100%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 18px rgba(0,0,0,0.18);
}
.aurora-symbol--calendar::before {
  left: 5px;
  top: 4px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 15px 0 0 #ef4444;
}
.aurora-symbol--calendar span:nth-child(1) {
  left: 6px;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: #60a5fa;
  box-shadow: 9px 0 0 rgba(255,255,255,0.28), 18px 0 0 rgba(255,255,255,0.18), 0 9px 0 rgba(255,255,255,0.22), 9px 9px 0 #34d399;
}
.aurora-symbol--calendar span:nth-child(2) {
  right: 5px;
  bottom: 5px;
  width: 12px;
  height: 3px;
  border-radius: 999px;
  background: #34d399;
}
.aurora-symbol--calendar span:nth-child(3) {
  left: 6px;
  bottom: 5px;
  width: 7px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.26);
}

.aurora-symbol--ai {
  border-radius: 11px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0 10%, transparent 11%),
    conic-gradient(from 12deg, #ff5ea8, #ff8c3b, #ffd23f, #49d1a7, #5a9cff, #ff5ea8);
  box-shadow: 0 0 18px rgba(255,140,200,0.34);
}
.aurora-symbol--ai::before {
  inset: 6px;
  border-radius: 8px;
  background: #0a0e14;
}
.aurora-symbol--ai span:nth-child(1) {
  left: 13px;
  top: 4px;
  width: 4px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  transform: rotate(45deg);
}
.aurora-symbol--ai span:nth-child(2) {
  left: 4px;
  top: 13px;
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.84);
  transform: rotate(45deg);
}
.aurora-symbol--ai span:nth-child(3) {
  right: 3px;
  top: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.aurora-symbol--focus {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #0f1724 0 42%, transparent 43%),
    conic-gradient(#34d399 0.78turn, rgba(255,255,255,0.14) 0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 0 18px rgba(52,211,153,0.18);
}
.aurora-symbol--focus::before {
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52,211,153,0.45), rgba(52,211,153,0.08));
}
.aurora-symbol--focus span:nth-child(1) {
  left: 14px;
  top: 8px;
  width: 2px;
  height: 9px;
  border-radius: 999px;
  background: #fff;
  transform-origin: 1px 7px;
  transform: rotate(120deg);
}
.aurora-symbol--focus span:nth-child(2) {
  left: 13px;
  top: 13px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
}

.aurora-symbol--clipboard {
  border-radius: 9px;
  background: linear-gradient(180deg, #f8fafc, #cbd5e1);
  box-shadow: 0 9px 18px rgba(0,0,0,0.18);
}
.aurora-symbol--clipboard::before {
  left: 9px;
  top: -2px;
  width: 12px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, #9aa7b7, #64748b);
}
.aurora-symbol--clipboard span:nth-child(1),
.aurora-symbol--clipboard span:nth-child(2),
.aurora-symbol--clipboard span:nth-child(3) {
  left: 7px;
  height: 3px;
  border-radius: 999px;
  background: #64748b;
}
.aurora-symbol--clipboard span:nth-child(1) { top: 11px; width: 16px; }
.aurora-symbol--clipboard span:nth-child(2) { top: 17px; width: 13px; }
.aurora-symbol--clipboard span:nth-child(3) { top: 23px; width: 18px; background: #34d399; }

.aurora-symbol--privacy {
  clip-path: polygon(50% 4%, 88% 20%, 88% 48%, 82% 68%, 66% 86%, 50% 96%, 34% 86%, 18% 68%, 12% 48%, 12% 20%);
  background: linear-gradient(160deg, #34d399, #1b6f7a 55%, #102033);
  box-shadow: 0 10px 18px rgba(0,0,0,0.18);
}
.aurora-symbol--privacy::before {
  left: 9px;
  top: 10px;
  width: 12px;
  height: 9px;
  border-radius: 3px;
  border: 2px solid rgba(255,255,255,0.9);
  border-top: 0;
}
.aurora-symbol--privacy::after {
  left: 10px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 999px 999px 0 0;
  border: 2px solid rgba(255,255,255,0.9);
  border-bottom: 0;
}

.aurora-symbol--themes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  align-items: stretch;
}
.aurora-symbol--themes span {
  position: relative;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
}
.aurora-symbol--themes span:nth-child(1) { background: linear-gradient(180deg, #0b1220, #34d399); }
.aurora-symbol--themes span:nth-child(2) { background: linear-gradient(180deg, #f9fafb, #60a5fa); }
.aurora-symbol--themes span:nth-child(3) { background: linear-gradient(180deg, #251435, #ff8fb8); }
.aurora-symbol--themes span:nth-child(4) { background: linear-gradient(180deg, #161b22, #f59e0b); }

[data-theme="light"] .aurora-symbol--ai::before {
  background: #f8fafc;
}

.feature-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-card-title);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.feature-card__body {
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: 1.6;
}

.feature-card__demo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin-top: var(--space-5);
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: var(--radius-card-sm);
  background: rgba(255,255,255,0.035);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.25;
  transform: translateY(3px);
  opacity: 0.78;
  transition:
    opacity 280ms var(--ease),
    transform 280ms var(--ease),
    border-color 280ms var(--ease),
    background 280ms var(--ease);
}

.feature-card:hover .feature-card__demo {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(84,211,154,0.22);
  background: rgba(84,211,154,0.055);
}

.feature-card__demo-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.feature-card__demo-copy strong {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feature-card__demo-copy span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feature-card__demo-art,
.feature-card__demo-date,
.feature-card__demo-ring,
.feature-card__demo-dot {
  flex: 0 0 auto;
}

.feature-card__demo-art {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0)),
    linear-gradient(135deg, #7c3aed, #10b981);
  box-shadow: 0 8px 22px rgba(16,185,129,0.18);
}

.feature-card__demo--media {
  min-height: 50px;
  background: #040405;
  border-color: rgba(255,255,255,0.08);
}

.feature-card__demo--media .feature-card__demo-art {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}

.feature-card__demo-source {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: -18px;
  align-self: start;
  border-radius: 999px;
  background: #1ed760;
  color: #031208;
  font-size: 9px;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(0,0,0,0.34);
}

.feature-card__demo-bars {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.feature-card__demo-bars span {
  width: 3px;
  height: 15px;
  border-radius: 999px;
  background: #ff817c;
  transform-origin: 50% 100%;
  animation: preview-bars 850ms ease-in-out infinite;
}

.feature-card__demo-bars span:nth-child(2) { animation-delay: 110ms; height: 20px; }
.feature-card__demo-bars span:nth-child(3) { animation-delay: 220ms; height: 13px; }
.feature-card__demo-bars span:nth-child(4) { animation-delay: 330ms; height: 18px; }

.feature-card__demo-progress {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}

.feature-card__demo-progress span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #54D39A, #5DD9FF);
  transition: width 600ms var(--ease-out);
}

.feature-card:hover .feature-card__demo-progress span {
  width: 74%;
}

.feature-card__demo--widgets,
.feature-card__demo--actions,
.feature-card__demo--themes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-card__demo--actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card__demo--widgets span,
.feature-card__demo--actions span {
  min-width: 0;
  padding: 7px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.055);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 260ms var(--ease), background 260ms var(--ease), color 260ms var(--ease);
}

.feature-card:hover .feature-card__demo--widgets span,
.feature-card:hover .feature-card__demo--actions span {
  background: rgba(84,211,154,0.12);
  color: var(--text-primary);
}

.feature-card:hover .feature-card__demo--widgets span:nth-child(2),
.feature-card:hover .feature-card__demo--actions span:nth-child(2) {
  transform: translateY(-2px);
}

.feature-card__demo-date {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(96,165,250,0.14);
  border: 1px solid rgba(96,165,250,0.20);
  color: #9cc8ff;
  font-weight: 750;
}

.feature-card__demo-ring {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: conic-gradient(#54D39A 0 64%, rgba(255,255,255,0.10) 64% 100%);
  box-shadow: inset 0 0 0 6px rgba(8,14,22,0.88);
  transition: transform 500ms var(--ease-out);
}

.feature-card:hover .feature-card__demo-ring {
  transform: rotate(38deg);
}

.feature-card__demo--focus {
  justify-content: space-between;
  background: #121d2d;
  border-color: rgba(126,159,211,0.26);
}

.feature-card__demo--focus .feature-card__demo-copy strong {
  font-size: 20px;
  letter-spacing: 0.02em;
}

.feature-card__demo-play {
  position: relative;
  padding-left: 20px;
  color: #fff;
  font-weight: 850;
}

.feature-card__demo-play::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  border-left: 10px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.feature-card__demo--clipboard {
  justify-content: space-between;
}

.feature-card__demo--clipboard strong {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(84,211,154,0.12);
  color: #84f0bf;
  font-size: 10px;
}

.feature-card__demo-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #54D39A;
  box-shadow: 0 0 0 4px rgba(84,211,154,0.08);
}

.feature-card__demo--permissions {
  justify-content: space-between;
}

.feature-card__demo--permissions span:first-child {
  color: var(--text-primary);
  font-weight: 650;
}

.feature-card__demo--themes span {
  min-height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}

.feature-card__demo--themes span:nth-child(1) { background: linear-gradient(135deg, #101821, #54D39A); }
.feature-card__demo--themes span:nth-child(2) { background: linear-gradient(135deg, #f7f8fa, #60a5fa); }
.feature-card__demo--themes span:nth-child(3) { background: linear-gradient(135deg, #1d1530, #ff8fb8); }
.feature-card__demo--themes span:nth-child(4) { background: linear-gradient(135deg, #171b20, #f59e0b); }

.feature-card:hover .feature-card__demo--themes span:nth-child(2) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(96,165,250,0.18);
}

[data-theme="light"] .feature-card__demo {
  background: rgba(18,33,48,0.035);
  border-color: rgba(18,33,48,0.075);
}

[data-theme="light"] .feature-card:hover .feature-card__demo {
  background: rgba(43,182,133,0.07);
  border-color: rgba(43,182,133,0.18);
}

[data-theme="light"] .feature-card__demo-progress,
[data-theme="light"] .feature-card__demo--widgets span,
[data-theme="light"] .feature-card__demo--actions span {
  background: rgba(18,33,48,0.055);
}

[data-theme="light"] .feature-card__demo-ring {
  box-shadow: inset 0 0 0 6px rgba(255,255,255,0.92);
}

@media (prefers-reduced-motion: reduce) {
  .feature-card__demo,
  .feature-card__demo *,
  .feature-card__demo::before,
  .feature-card__demo::after {
    transition: none !important;
    animation: none !important;
  }
}

/* =============================================
   PRICING SECTION
   ============================================= */
.plans-section {
  position: relative;
  padding-top: 0;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  /* 1080px is the shared pricing-grid width across home + license.
     Wide enough that three cards breathe, narrow enough that each
     card keeps a tight, premium column feel. */
  max-width: 1080px;
  margin: 0 auto;
}

/* Two-card variant (license.html). Tighter max-width centers the
   two plans instead of letting them stretch across the 3-col grid,
   which previously left Monthly + Lifetime feeling off-balance. */
.plans-grid--duo {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
}

/* Carousel dots + hint are hidden on desktop */
.plans-dots, .plans-swipe-hint { display: none; }

.plan-card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: all var(--dur-med) var(--ease);
  position: relative;
}

.plan-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.plan-card.is-selected {
  border-color: rgba(52,211,153,0.4);
  box-shadow: var(--glow-green);
}

/* Keyboard focus ring — JS adds tabindex+role=button so the card
   is reachable. Without an explicit focus-visible rule the default
   browser outline lands on the card edge but isn't visible against
   the dark surface; this matches the rest of the site's focus tone. */
.plan-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.plan-card.is-selected:focus-visible {
  /* When selected the green glow is already present; layer the
     focus ring on top so both cues remain. */
  box-shadow: var(--glow-green), var(--focus-ring);
}

/* Badge — centered exactly ON the card's top border line.
   top:0 + translate(-50%,-50%) puts the badge's vertical midline on
   the edge regardless of its actual height. */
.plan-card__badge {
  position: absolute;
  top: 0; left: 50%; transform: translate(-50%, -50%);
  font-size: var(--text-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.plan-card__badge--popular {
  background: rgb(52, 211, 153);
  color: #0A0E14;
  border: 1px solid rgba(52,211,153,0.25);
}

[data-theme="light"] .plan-card__badge--popular {
    background: rgba(52, 211, 153, 0.793);
    color: #000;
    border: 1px solid rgba(52, 211, 153, 0.25);
}

.plan-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-card-title); font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
}

.plan-card__icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-block;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.plan-card__icon::before,
.plan-card__icon::after {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
}
.plan-card__icon--trial {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--surface-card) 0 42%, transparent 43%),
    conic-gradient(var(--accent-green) 0.75turn, rgba(255,255,255,0.16) 0);
  border: 1px solid rgba(52,211,153,0.32);
}
.plan-card__icon--trial::before {
  left: 8px;
  top: 4px;
  width: 2px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: 1px 5px;
  transform: rotate(125deg);
}
.plan-card__icon--monthly {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.92) 0 10%, transparent 11%),
    linear-gradient(135deg, #34d399, #38bdf8 60%, #a78bfa);
}
.plan-card__icon--monthly::before {
  left: 8px;
  top: 3px;
  width: 2px;
  height: 12px;
  border-radius: 999px;
  background: #fff;
}
.plan-card__icon--monthly::after {
  left: 3px;
  top: 8px;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: #fff;
}
.plan-card__icon--lifetime {
  clip-path: polygon(50% 4%, 90% 22%, 90% 50%, 82% 70%, 64% 88%, 50% 98%, 36% 88%, 18% 70%, 10% 50%, 10% 22%);
  background: linear-gradient(150deg, #facc15, #34d399 58%, #0f766e);
}
.plan-card__icon--lifetime::before {
  left: 5px;
  top: 7px;
  width: 8px;
  height: 5px;
  border-left: 2px solid rgba(255,255,255,0.95);
  border-bottom: 2px solid rgba(255,255,255,0.95);
  transform: rotate(-45deg);
}
.plan-card__price {
  font-family: var(--font-rounded), var(--font-heading);
  font-size: 32px; font-weight: 700;
  margin-bottom: var(--space-2);
  display: flex; align-items: baseline; gap: 4px;
}
.plan-card__price-suffix {
  font-size: var(--text-small);
  font-weight: 400;
  color: var(--text-muted);
}

.plan-card__desc {
  font-size: var(--text-small);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.plan-card__features {
  flex: 1; margin-bottom: var(--space-5);
}

.plan-card__feature {
  font-size: var(--text-small);
  color: var(--text-secondary);
  padding: 5px 0;
  display: flex; align-items: center; gap: 8px;
}

.plan-card__check {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(52,211,153,0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.plan-card__check svg {
  width: 10px; height: 10px;
  stroke: var(--accent-green); stroke-width: 2.5; fill: none;
}

.plan-card .button { width: 100%; }

/* Select indicator */
.plan-card__selector {
  position: absolute;
  top: 14px; right: 14px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  transition: all var(--dur-med) var(--ease);
}
.plan-card.is-selected .plan-card__selector {
  border-color: var(--accent-green);
  background: var(--accent-green);
}
.plan-card.is-selected .plan-card__selector::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #06090f;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.plans-footer {
  width: min(1080px, 100%);
  margin: var(--space-7, 1.75rem) auto 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(310px, 1.25fr) repeat(3, minmax(0, 0.75fr));
  gap: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 18px;
  background:
    radial-gradient(circle at 16% 0%, rgba(52,211,153,0.14), transparent 38%),
    radial-gradient(circle at 92% 8%, rgba(56,189,248,0.10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    rgba(7,16,27,0.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 18px 54px rgba(0,0,0,0.16);
  text-align: left;
}

.plans-footer__summary,
.plans-footer__note {
  position: relative;
  min-height: 0;
}

.plans-footer__summary {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 4px 22px 4px 4px;
}

.plans-footer__eyebrow {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(84,211,154,0.92);
}

.plans-footer__summary h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.55vw, 24px);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--text-primary);
}

.plans-footer__summary p,
.plans-footer__note p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.plans-footer__summary p {
  font-size: 14px;
  max-width: 48ch;
}

.plans-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.plans-footer__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.plans-footer__action:hover,
.plans-footer__action:focus-visible {
  border-color: rgba(84,211,154,0.38);
  background: rgba(84,211,154,0.08);
  transform: translateY(-1px);
}

.plans-footer__action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.plans-footer__action--primary {
  border-color: rgba(52,211,153,0.32);
  background: rgba(52,211,153,0.12);
  color: rgba(228,255,245,0.98);
}

.plans-footer__note {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 4px 12px;
  align-content: start;
  padding: 8px 18px;
  border-left: 1px solid rgba(255,255,255,0.09);
}

.plans-footer__note-icon {
  position: relative;
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(52,211,153,0.22), transparent 62%),
    rgba(52,211,153,0.12);
  border: 1px solid rgba(52,211,153,0.18);
}

.plans-footer__note-icon::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: 5px;
  height: 8px;
  border-right: 2px solid var(--accent-green);
  border-bottom: 2px solid var(--accent-green);
  transform: rotate(45deg);
}

.plans-footer__note strong {
  display: block;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--text-primary);
}

.plans-footer__note p {
  font-size: 12.5px;
  max-width: 27ch;
}

.plans-footer__note a {
  color: var(--accent-green);
  text-decoration: none;
  border-bottom: 1px solid rgba(52,211,153,0.30);
}

.plans-footer__note a:hover,
.plans-footer__note a:focus-visible {
  border-bottom-color: var(--accent-green);
}

/* =============================================
   FAQ 2-column
   ============================================= */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  /* Match header container width so FAQ cards align with the nav. */
  max-width: 1200px;
  margin: 0 auto;
}

.faq-card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  transition: all var(--dur-med) var(--ease);
}
.faq-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.faq-card__q {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: 600;
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.faq-card__a {
  font-size: var(--text-small);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* =============================================
   FINAL CTA
   ============================================= */
.final-cta {
  text-align: center;
  position: relative;
  overflow: hidden;
  overflow: clip;
}

.final-cta__bg { position: absolute; inset: 0; pointer-events: none; }
.final-cta__glow {
  position: absolute;
  width: min(1100px, 96vw); height: 520px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(52,211,153,0.05) 0%, rgba(56,189,248,0.03) 40%, transparent 75%);
  filter: blur(90px);
  animation: aurora-pulse 6s ease-in-out infinite;
}
[data-theme="light"] .final-cta__glow {
  background: radial-gradient(ellipse, rgba(43,182,133,0.10) 0%, rgba(245,158,11,0.06) 40%, transparent 75%);
}

/* =============================================
   HERO DOWNLOAD BUTTONS
   ============================================= */
.hero__btn-download,
.hero__btn-appstore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero__btn-download svg,
.hero__btn-appstore svg {
  flex-shrink: 0;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .hero__title { font-size: var(--text-hero-tablet); }
  .hero__subtitle { font-size: var(--text-hero-body-tablet); }
  /* Pricing stays 3-col on tablet — users expect to see all tiers at
     a glance. Tighten gap + interior padding so cards fit cleanly
     down to 768px. Below that, the mobile carousel kicks in.
     (No extra horizontal padding here — .container already provides it.) */
  .plans-grid { gap: var(--space-3); max-width: 100%; }
  .plan-card { padding: var(--space-5); }
  .plans-footer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .plans-footer__summary {
    grid-column: 1 / -1;
    padding: 4px 4px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .plans-footer__actions { justify-content: flex-start; }
  .plans-footer__summary + .plans-footer__note {
    border-left: 0;
  }
  .faq-grid { grid-template-columns: 1fr; }
}

@media (min-width: 769px) and (max-height: 840px) {
  .hero {
    align-items: flex-start;
    min-height: max(100svh, 760px);
    padding-top: calc(82px + env(safe-area-inset-top, 0px));
    padding-bottom: 40px;
  }
  .hero__content {
    max-width: 760px;
  }
  .hero__eyebrow,
  .hero__title {
    margin-bottom: var(--space-4);
  }
  .hero__title {
    font-size: 56px;
    line-height: 1.02;
  }
  .hero__subtitle {
    font-size: 17px;
    line-height: 1.45;
    margin-bottom: var(--space-2);
  }
  .hero__support {
    margin-bottom: var(--space-5);
  }
  .hero__actions {
    margin-bottom: var(--space-5);
  }
  .hero-proof {
    margin-top: var(--space-4);
  }
  .hero__scroll-indicator {
    bottom: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .hero__scroll-indicator-label {
    display: none;
  }
}

@media (min-width: 769px) and (max-height: 700px) {
  .hero {
    min-height: auto;
    padding-bottom: 52px;
  }
  .hero__scroll-indicator {
    display: none;
  }
}

/* =============================================
   PRICING CAROUSEL (mobile only)
   Horizontal scroll-snap — selected card snaps to
   center. Non-center cards dim + shrink slightly
   so the focused plan reads as "the chosen one".
   ============================================= */
@media (max-width: 768px) {
  .plans-footer {
    margin-top: var(--space-5);
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .plans-footer__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .plans-footer__action {
    min-height: 40px;
    padding-inline: 10px;
    font-size: 12.5px;
  }

  .plans-footer__summary,
  .plans-footer__note {
    min-height: 0;
    padding: 16px 6px;
  }

  .plans-footer__summary {
    padding-top: 4px;
    padding-bottom: 16px;
  }

  .plans-footer__note {
    border-top: 1px solid rgba(255,255,255,0.08);
    border-left: 0;
  }

  .plans-footer__note-icon {
    margin-bottom: 0;
  }

  .plans-footer__note strong {
    margin-top: 0;
  }

  .plans-grid:not([data-plans-grid]) {
    grid-template-columns: 1fr;
  }

  .plans-grid[data-plans-grid] {
    display: flex;
    gap: var(--space-4);
    max-width: none;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Padding so first/last card can snap to center */
    scroll-padding-inline: 50%;
    /* Tightened horizontal padding gives the cards
       more usable width on phones — the snap centering
       still aligns each card in the viewport. */
    padding: 20px max(4vw, 14px) 40px;
    margin-inline: calc(-1 * var(--space-4)); /* break out of container pad */
    /* Native inertia on iOS */
    -webkit-overflow-scrolling: touch;
    /* Hide native scrollbar — dots are the indicator */
    scrollbar-width: none;
    perspective: 1200px;
  }
  .plans-grid[data-plans-grid]::-webkit-scrollbar { display: none; }

  .plans-grid[data-plans-grid] > .plan-card {
    /* Wider cards so content isn't cramped on phones —
       ~92% of viewport, capped to 420px so they don't
       get unwieldy on tablets. */
    flex: 0 0 92%;
    max-width: 420px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    /* Default state is "fully visible" — no pre-shrink.
       Fading happens only once a sibling is `is-centered`
       (rule below), so before the JS observer kicks in
       all cards still look correctly sized. */
    transform: scale(1);
    opacity: 1;
    transition: transform 0.45s var(--ease-out), opacity 0.35s var(--ease), box-shadow 0.35s var(--ease);
    will-change: transform, opacity;
  }
  /* When the carousel has identified a centered card,
     gently fade + shrink the others. Subtler than before
     so the centered card doesn't have to compensate. */
  .plans-grid[data-plans-grid]:has(.is-centered) > .plan-card:not(.is-centered) {
    transform: scale(0.95);
    opacity: 0.65;
  }
  /* The centered card gets the green ring + lift. */
  .plans-grid[data-plans-grid] > .plan-card.is-centered {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 0 0 1px var(--accent-green);
    z-index: 1;
  }
  /* Kill the tablet stacking for ≤768 */
  .plans-grid[data-plans-grid] { grid-template-columns: unset; }

  /* Dots below the carousel */
  .plans-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: var(--space-3);
  }
  .plans-dots__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-soft);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 0.3s var(--ease-out), background 0.3s var(--ease);
  }
  .plans-dots__dot.is-active {
    width: 24px;
    border-radius: 4px;
    background: var(--accent-green);
  }
  .plans-dots__dot:focus-visible {
    outline: 2px solid var(--accent-green);
    outline-offset: 3px;
  }

  /* "Swipe to compare" hint — fades once the user has swiped at least once */
  .plans-swipe-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    margin: var(--space-4) auto 0;
    font-size: 12px;
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 0.6;
    width: 100%;
    text-align: center;
    animation: swipe-nudge 2.2s ease-in-out infinite;
  }
  .plans-swipe-hint svg {
    animation: swipe-arrow 2.2s ease-in-out infinite;
  }
  .plans-swipe-hint.is-hidden { opacity: 0; pointer-events: none; }
}

@media (max-width: 420px) {
  .plans-footer__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plans-footer__action--primary {
    grid-column: 1 / -1;
  }
}

@keyframes swipe-nudge { 0%,100% { opacity: 0.5; } 50% { opacity: 0.85; } }
@keyframes swipe-arrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .plans-swipe-hint, .plans-swipe-hint svg { animation: none; }
  .plans-grid[data-plans-grid] > .plan-card { transition: none; }
}

@media (max-width: 768px) {
  .hero {
    min-height: 100svh;
    padding-top: calc(112px + env(safe-area-inset-top, 0px));
    padding-bottom: 72px;
  }
  .hero__content { max-width: 100%; padding-left: var(--space-5); padding-right: var(--space-5); }
  .hero__eyebrow { margin-bottom: var(--space-5); }
  .hero__title {
    font-size: var(--text-hero-mobile);
    line-height: 1.1;
    margin-bottom: var(--space-5);
  }
  .hero__subtitle {
    font-size: var(--text-hero-body-mobile);
    max-width: 35ch;
    line-height: 1.55;
    margin-bottom: var(--space-8);
  }
  .hero__support,
  .hero__meta,
  .hero-proof {
    display: none;
  }
  .hero__actions {
    gap: var(--space-3);
    margin-bottom: 0;
  }
  .hero__actions .button { min-height: 52px; }
  .hero__download-count { font-size: 12px; padding: 5px 12px; }
  .section-mesh { height: 80px; margin: -40px 0; }
}

@media (max-width: 480px) {
  .hero {
    padding-top: calc(104px + env(safe-area-inset-top, 0px));
    padding-bottom: 68px;
  }
  .hero__content { padding-left: 22px; padding-right: 22px; }
  .hero__eyebrow { margin-bottom: var(--space-5); }
  .hero__title { margin-bottom: var(--space-5); }
  .hero__subtitle { line-height: 1.5; }
  .plans-grid[data-plans-grid],
  .compare-table-wrap {
    margin-inline: -14px;
    max-width: calc(100% + 28px);
  }
  .pillars-grid {
    margin-inline: -14px;
  }
}

@media (max-width: 360px) {
  .hero__title { font-size: 31px; }
  .hero__subtitle { font-size: 14px; }
  .hero__support { font-size: 12.5px; }
  .hero-chip { font-size: 11.5px; padding-inline: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .section-mesh::before {
    animation: none;
    filter: none;
  }
  .hero::after { display: none; }
  .feature-card::before { display: none; }
}

/* =================================================================
   HERO TITLE — subtle "breath" animation.
   Very small idle letter-spacing shift to keep the title alive.
   Only applied when the character split has finished (is-settled).
   ================================================================= */
@keyframes hero-breath {
  0%, 100% { letter-spacing: 0; }
  50%      { letter-spacing: 0.005em; }
}
.hero__title.is-settled {
  animation: hero-breath 7s ease-in-out 1.2s infinite;
  will-change: letter-spacing;
}
@media (prefers-reduced-motion: reduce) {
  .hero__title.is-settled { animation: none; }
}

/* POPULAR PLAN styles were moved to styles.css so both the home and
   license pages get the aurora ring + scale boost from a single source
   of truth. See "SHARED PREMIUM CARD" block in styles.css. */

/* =================================================================
   FEATURE CARD — conic gradient border on hover.
   Paired with the 3D tilt already applied from JS.
   ================================================================= */
.feature-card {
  position: relative;
  isolation: isolate;
  border-radius: 14px;
  border-color: rgba(255,255,255,0.105);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.048), rgba(255,255,255,0.018)),
    rgba(255,255,255,0.018);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
}
.feature-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--ring-angle, 0deg),
    transparent 0%,
    rgba(52,211,153,0.55) 20%,
    rgba(56,189,248,0.55) 40%,
    transparent 60%,
    transparent 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.feature-card:hover::before {
  opacity: 1;
  animation: feature-ring-spin 4s linear infinite;
}
@keyframes feature-ring-spin {
  to { --ring-angle: 360deg; }
}
@property --ring-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

[data-theme="light"] .feature-card::before {
  background: conic-gradient(from var(--ring-angle, 0deg),
    transparent 0%,
    rgba(43,182,133,0.7) 20%,
    rgba(245,158,11,0.55) 40%,
    transparent 60%,
    transparent 100%);
}

[data-theme="light"] .feature-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.72)),
    rgba(255,255,255,0.78);
  border-color: rgba(18,33,48,0.095);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 1px 0 rgba(18,33,48,0.025);
}

@media (prefers-reduced-motion: reduce) {
  .feature-card:hover::before { animation: none; }
}

/* ============================================================
   HERO SCROLL INDICATOR
   Sits near the bottom of the hero, bobs gently, clickable.
   ============================================================ */
.hero__scroll-indicator {
  position: absolute;
  bottom: calc(var(--space-6));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 3;
  border-radius: 999px;
  transition: color 300ms var(--ease), transform 400ms var(--ease);
  opacity: 0;
  animation: scroll-indicator-in 900ms ease-out 1.6s both;
}
.hero__scroll-indicator:hover { color: var(--text-primary); }
.hero__scroll-indicator:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.hero__scroll-indicator-label {
  opacity: 0.85;
}
.hero__scroll-indicator-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--fill-glass);
  animation: chevron-bob 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes scroll-indicator-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes chevron-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (max-width: 768px) {
  .hero__scroll-indicator { bottom: 12px; font-size: 11px; }
  .hero__scroll-indicator-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-indicator { animation: none; opacity: 1; }
  .hero__scroll-indicator-chevron { animation: none; }
}

/* ============================================================
   FEATURE CARD ICON — hover micro-animation
   Each card gets a different motion: bounce, pulse, shake, glow.
   ============================================================ */
.feature-card__icon {
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
              background 300ms var(--ease),
              color 300ms var(--ease);
}
.feature-card:hover .feature-card__icon {
  background: rgba(52,211,153,0.16);
  color: var(--accent-green);
}

/* Stagger per card — :nth-of-type among sibling .feature-card.
   Boosted specificity with .reveal-row so the hover animation wins
   over the on-reveal entrance keyframes declared later in this file. */
.features-grid .reveal-row .feature-card:nth-of-type(1):hover .feature-card__icon,
.features-grid .feature-card:nth-of-type(1):hover .feature-card__icon {
  animation: icon-bounce 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.features-grid .reveal-row .feature-card:nth-of-type(2):hover .feature-card__icon,
.features-grid .feature-card:nth-of-type(2):hover .feature-card__icon {
  animation: icon-wobble 0.7s ease-out;
}
.features-grid .reveal-row .feature-card:nth-of-type(3):hover .feature-card__icon,
.features-grid .feature-card:nth-of-type(3):hover .feature-card__icon {
  animation: icon-pulse 1s ease-in-out;
}
.features-grid .reveal-row .feature-card:nth-of-type(4):hover .feature-card__icon,
.features-grid .feature-card:nth-of-type(4):hover .feature-card__icon {
  animation: icon-glow 1.2s ease-in-out;
}

@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-6px) scale(1.05); }
  60%      { transform: translateY(2px) scale(0.98); }
}
@keyframes icon-wobble {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg); }
  50%      { transform: rotate(6deg); }
  75%      { transform: rotate(-3deg); }
}
@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.12); }
  70%      { transform: scale(0.96); }
}
@keyframes icon-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(52,211,153,0); }
  50%      { box-shadow: 0 0 0 8px rgba(52,211,153,0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .feature-card:hover .feature-card__icon { animation: none !important; }
}

/* Raise z-index on icon so it doesn't clash with the conic ring */
.feature-card__icon { position: relative; z-index: 1; }

/* AI feature card variant — rainbow accent */
.feature-card--ai {
  border-color: rgba(255,140,200,0.28);
  background: linear-gradient(160deg, rgba(255,94,168,0.05), rgba(90,156,255,0.04));
}
.feature-card__icon--ai {
  background: transparent;
  box-shadow: none;
}
.feature-card__icon--ai:hover,
.feature-card:hover .feature-card__icon--ai {
  background: rgba(255,255,255,0.04);
}
.feature-card__ai-swirl {
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #FF5EA8, #FF8C3B, #FFD23F, #49D1A7, #5A9CFF, #FF5EA8);
  position: relative;
  box-shadow: 0 0 14px rgba(255,140,200,0.35);
  animation: ai-spin 8s linear infinite;
}
.feature-card__ai-swirl::after {
  content: '';
  position: absolute; inset: 5px;
  border-radius: 50%;
  background: #0A0E14;
}
@media (prefers-reduced-motion: reduce) {
  .feature-card__ai-swirl { animation: none; }
}
.feature-card__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #FF5EA8, #5A9CFF);
  color: #FFFFFF;
  vertical-align: 3px;
}
.feature-card__link {
  color: #FF8FB8;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.feature-card__link:hover {
  color: #FF5EA8;
  text-decoration: underline;
}

/* =============================================
   APPLE INTELLIGENCE SECTION
   On-device AI showcase — rainbow gradient accents,
   interactive Clipboard/Quick Notes demo, promise row
   ============================================= */
.ai-section {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding-bottom: clamp(56px, 7vw, 104px);
  background:
    linear-gradient(180deg, transparent 0%, rgba(9,16,24,0.46) 36%, rgba(9,16,24,0.40) 68%, transparent 100%),
    linear-gradient(115deg, transparent 0%, rgba(52,211,153,0.08) 36%, rgba(56,189,248,0.07) 64%, transparent 100%);
}

.ai-section .container { position: relative; z-index: 1; }
.ai-section__head { margin-bottom: var(--space-10); }

/* On-device writing eyebrow pill. Panel is a ::before, text uses
   background-clip:text so the wordmark gets the rainbow gradient. */
.ai-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-6);
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(90deg, #FF5EA8, #FF8C3B 25%, #FFD23F 50%, #49D1A7 75%, #5A9CFF);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: ai-eyebrow-shimmer 6s linear infinite;
}
.ai-eyebrow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(12,16,24,0.55);
  border: 1px solid rgba(255,140,200,0.22);
  z-index: -1;
}
@keyframes ai-eyebrow-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.ai-eyebrow__mark {
  width: 20px; height: 20px;
  flex-shrink: 0;
  display: inline-block;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 140, 200, 0.3));
  /* Keep the mark visible (background-clip:text makes text invisible on non-gradient fg) */
  -webkit-text-fill-color: initial;
}

/* Showcase 2-column grid */
.ai-showcase {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
  margin-bottom: var(--space-10);
}
@media (max-width: 920px) {
  .ai-showcase { grid-template-columns: 1fr; }
}

/* --- Left: demo card --- */
.ai-demo {
  background: rgba(10,14,22,0.82);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
/* Rainbow glow frame */
.ai-demo::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,94,168,0.35), rgba(255,210,63,0.22) 35%, rgba(73,209,167,0.28) 65%, rgba(90,156,255,0.35));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.9;
}

.ai-demo__tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  margin-bottom: var(--space-4);
}
.ai-demo__tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.ai-demo__tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.03); }
.ai-demo__tab.is-active {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.ai-demo__panel[hidden] { display: none; }

.ai-demo__io {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 12px 14px;
}
.ai-demo__io + .ai-demo__io { margin-top: 10px; }
.ai-demo__io-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary, var(--text-secondary));
  opacity: 0.7;
  margin-bottom: 6px;
}
.ai-demo__io-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 100%;
}
.ai-demo__io--out {
  background: linear-gradient(180deg, rgba(73,209,167,0.06), rgba(90,156,255,0.04));
  border-color: rgba(73,209,167,0.18);
  transition: opacity 0.3s var(--ease-out);
}
.ai-demo__io--out .ai-demo__io-text { color: var(--text-primary); }
.ai-demo__io-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF5EA8, #5A9CFF);
  flex-shrink: 0;
}
.ai-demo__io-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
  letter-spacing: 0;
}

/* Trigger button with gradient AI mark */
.ai-demo__trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 0;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
  position: relative;
  overflow: hidden;
}
.ai-demo__trigger:hover {
  transform: translateY(-1px);
  border-color: rgba(255,140,200,0.4);
  background: linear-gradient(180deg, rgba(255,94,168,0.12), rgba(90,156,255,0.08));
}
.ai-demo__trigger.is-running {
  pointer-events: none;
}
.ai-demo__trigger.is-running .ai-demo__trigger-mark {
  animation: ai-spin 1.2s linear infinite;
}
.ai-demo__trigger-mark {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #FF5EA8, #FF8C3B, #FFD23F, #49D1A7, #5A9CFF, #FF5EA8);
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(255,140,200,0.35);
  position: relative;
}
.ai-demo__trigger-mark::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #0A0E14;
}
@keyframes ai-spin {
  to { transform: rotate(360deg); }
}
.ai-demo__trigger-kbd {
  margin-left: auto;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 11px;
  color: var(--text-tertiary, var(--text-secondary));
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  letter-spacing: 0.02em;
}

/* Loading shimmer while "generating" */
.ai-demo__io--out.is-loading {
  position: relative;
}
.ai-demo__io--out.is-loading .ai-demo__io-text,
.ai-demo__io--out.is-loading .ai-demo__io-title,
.ai-demo__io--out.is-loading .ai-demo__actions {
  opacity: 0.35;
  filter: blur(2px);
  transition: opacity 0.3s, filter 0.3s;
}
.ai-demo__io--out.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: ai-shimmer 1.4s linear infinite;
  pointer-events: none;
}
@keyframes ai-shimmer {
  0%   { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-demo__trigger.is-running .ai-demo__trigger-mark,
  .ai-demo__io--out.is-loading::after { animation: none; }
}

/* Action-item list */
.ai-demo__actions {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-demo__actions li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.ai-demo__actions li svg {
  width: 14px; height: 14px;
  color: #49D1A7;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 50%;
  background: rgba(73,209,167,0.15);
  box-sizing: content-box;
}

/* --- Right: feature cards --- */
.ai-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ai-feature {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card-sm, 14px);
  padding: var(--space-4) var(--space-5);
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
.ai-feature:hover {
  border-color: rgba(255,140,200,0.3);
  transform: translateY(-2px);
  background: rgba(255,255,255,0.035);
}
.ai-feature__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,94,168,0.18), rgba(90,156,255,0.18));
  color: #FFFFFF;
  margin-bottom: 10px;
}
.ai-feature__title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text-primary);
  letter-spacing: 0;
}
.ai-feature__body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 100%;
}
.ai-feature__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.ai-feature__chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 11.5px;
  color: var(--text-secondary);
}

/* --- Promise row (on-device, explicit, fallback, background notify) --- */
.ai-promises {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--border-soft);
  margin-bottom: var(--space-6);
}
@media (max-width: 920px) {
  .ai-promises { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .ai-promises { grid-template-columns: 1fr; }
}
.ai-promise {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ai-promise svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #49D1A7;
}
.ai-promise__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.3;
}
.ai-promise__body {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 2px;
}

.ai-requirements {
  max-width: 720px;
  margin: 0 auto;
  font-size: 12.5px;
  color: var(--text-tertiary, var(--text-secondary));
  opacity: 0.7;
  line-height: 1.6;
  text-align: center;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  justify-content: center;
}
.ai-requirements svg { margin-top: 3px; flex-shrink: 0; }

/* =============================================
   PRO INCLUDES GRID
   Replaces the old Free-vs-Pro table on /pricing.
   Plain checklist of what a Pro license unlocks —
   no fictional Free column. Two responsive cols.
   ============================================= */
.pro-includes-grid {
  max-width: 960px;
  margin: 0 auto;
  list-style: none;
  padding: var(--space-6) var(--space-5);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-6);
  row-gap: var(--space-3);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-soft);
  background: var(--surface-card, rgba(255,255,255,0.02));
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.pro-includes-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.5;
}
.pro-includes-item__check {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(52, 211, 153, 0.14);
  color: var(--accent-green);
  margin-top: 1px;
}
@media (max-width: 640px) {
  .pro-includes-grid {
    grid-template-columns: 1fr;
    padding: var(--space-5) var(--space-4);
  }
}

/* =============================================
   COMPARISON TABLE (Aurora vs typical alternative)
   Appears near the end of the homepage.
   ============================================= */
.compare-section { position: relative; }
.compare-table-wrap {
  max-width: 960px;
  margin: 0 auto;
  overflow-x: auto;
  position: relative;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-soft);
  background: var(--surface-card, rgba(255,255,255,0.02));
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  color: var(--text-primary);
}
.compare-table thead th {
  text-align: left;
  padding: var(--space-5) var(--space-5);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--surface-muted, rgba(255,255,255,0.025));
  border-bottom: 1px solid var(--border-soft);
  vertical-align: bottom;
  white-space: nowrap;
}
.compare-table__col { text-align: center; }
.compare-table__colnote {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-tertiary, var(--text-secondary));
  opacity: 0.7;
  margin-top: 2px;
}
.compare-table__col--us {
  color: var(--text-primary);
  position: relative;
}
.compare-table__col--us::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(84,211,154,0.10), rgba(84,211,154,0));
  pointer-events: none;
}
.compare-table__uslogo {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(84,211,154,0.18);
  color: #54D39A;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  vertical-align: -5px;
}
.compare-table tbody th,
.compare-table tfoot th {
  text-align: left;
  padding: 14px var(--space-5);
  font-weight: 500;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.compare-table tbody td,
.compare-table tfoot td {
  padding: 14px var(--space-5);
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
  color: var(--text-secondary);
  vertical-align: middle;
  position: relative;
}
.compare-table tbody tr:nth-child(even) th,
.compare-table tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.015);
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody td.yes,
.compare-table tfoot td.compare-table__price--us {
  color: #54D39A;
  font-weight: 600;
}
.compare-table tbody td.yes::before {
  content: '✓';
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background: rgba(84,211,154,0.14);
  color: #54D39A;
  font-weight: 700;
  font-size: 13px;
  margin-right: 6px;
  vertical-align: -3px;
}
.compare-table tbody td.no {
  color: var(--text-tertiary, var(--text-secondary));
  opacity: 0.55;
}
.compare-table tbody td.no::before {
  content: '—';
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  margin-right: 6px;
  color: var(--text-tertiary, var(--text-secondary));
}
.compare-table tbody td.partial {
  color: var(--text-secondary);
}
.compare-table tbody td.partial::before {
  content: '~';
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background: rgba(250,204,21,0.14);
  color: #facc15;
  font-weight: 700;
  font-size: 13px;
  margin-right: 6px;
  vertical-align: -3px;
}
.compare-table tfoot th,
.compare-table tfoot td {
  border-top: 1px solid var(--border-soft);
  border-bottom: none;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  font-size: 15px;
  background: var(--surface-muted, rgba(255,255,255,0.025));
}
.compare-table__price { font-weight: 600; color: var(--text-primary); }
.compare-table__price--us { color: #54D39A; }

.compare-footnote {
  max-width: 720px;
  margin: var(--space-8) auto 0;
  font-size: 13px;
  color: var(--text-tertiary, var(--text-secondary));
  opacity: 0.7;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .compare-table-wrap {
    margin-inline: calc(-1 * var(--space-4));
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    scrollbar-width: thin;
    max-width: calc(100% + (2 * var(--space-4)));
    background:
      linear-gradient(90deg, transparent calc(100% - 36px), rgba(8, 13, 21, 0.72) 100%),
      var(--surface-card, rgba(255,255,255,0.02));
  }
  .compare-table {
    min-width: 760px;
    font-size: 13.5px;
  }
  .compare-table thead th,
  .compare-table tbody th,
  .compare-table tbody td,
  .compare-table tfoot th,
  .compare-table tfoot td {
    padding: 12px 10px;
  }
  .compare-table thead th:first-child,
  .compare-table tbody th,
  .compare-table tfoot th {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 260px;
    max-width: 260px;
    white-space: normal;
    background:
      linear-gradient(90deg, rgba(8,13,21,0.98), rgba(8,13,21,0.92));
    box-shadow: 1px 0 0 var(--border-soft);
  }
  .compare-table thead th:first-child {
    z-index: 3;
  }
  .compare-table tbody th { font-size: 13px; }
  .compare-table__colnote { display: none; }
  [data-theme="light"] .compare-table thead th:first-child,
  [data-theme="light"] .compare-table tbody th,
  [data-theme="light"] .compare-table tfoot th {
    background:
      linear-gradient(90deg, rgba(248,250,252,0.98), rgba(248,250,252,0.94));
  }
}

@media (max-width: 480px) {
  .compare-table-wrap {
    margin-inline: -14px;
    max-width: calc(100% + 28px);
  }
}

/* ============================================================
   REQUEST DEMO / QUOTE
   A high-intent conversion section with a restrained product
   parallax backdrop. The section is for teams, reviewers, and
   studios without turning the whole site into enterprise SaaS.
   ============================================================ */
.quote-section {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.quote-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.quote-section__wash,
.quote-section__line {
  position: absolute;
  display: block;
  will-change: transform;
}

.quote-section__wash {
  height: 44%;
  width: min(980px, 94vw);
  border-radius: 32px;
  filter: blur(34px);
  opacity: calc(0.16 + (var(--scene-glow, 0) * 0.16));
}

.quote-section__wash--one {
  left: -24%;
  top: 12%;
  transform: rotate(-8deg);
  background: linear-gradient(90deg, transparent, rgba(52,211,153,0.30), rgba(56,189,248,0.16), transparent);
}

.quote-section__wash--two {
  right: -26%;
  bottom: -6%;
  transform: rotate(9deg);
  background: linear-gradient(90deg, transparent, rgba(56,189,248,0.24), rgba(245,158,11,0.10), transparent);
}

.quote-section__line {
  height: 1px;
  left: 50%;
  width: min(980px, 86vw);
  background: linear-gradient(90deg, transparent, rgba(52,211,153,0.40), rgba(56,189,248,0.26), transparent);
  transform-origin: center;
  opacity: calc(0.16 + (var(--scene-glow, 0) * 0.28));
}

.quote-section__line--one {
  top: 18%;
  transform: translateX(-50%) rotate(-2deg);
}

.quote-section__line--two {
  bottom: 15%;
  transform: translateX(-50%) rotate(2deg);
}

.quote-section__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.quote-section__copy {
  max-width: 520px;
}

.quote-section__copy .section-title,
.quote-section__copy .section-subtitle {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.quote-section__proof {
  display: grid;
  gap: 12px;
  margin-top: var(--space-8);
}

.quote-section__proof-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.quote-section__proof-item:last-child {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.quote-section__proof-kicker {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  color: rgba(84,211,154,0.92);
}

.quote-section__proof-item strong {
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.2;
}

.quote-section__proof-item span:last-child {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.quote-section__surface {
  position: relative;
  display: grid;
  gap: 18px;
}

.quote-form {
  border: 1px solid rgba(255,255,255,0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.028)),
    rgba(6, 12, 22, 0.60);
  box-shadow:
    0 28px 90px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(24px) saturate(1.24);
  -webkit-backdrop-filter: blur(24px) saturate(1.24);
}

.quote-form {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(52,211,153,0.15), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(56,189,248,0.12), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.028)),
    rgba(6, 12, 22, 0.60);
}

.quote-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.quote-form__intro {
  display: grid;
  gap: 14px;
  align-items: start;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.quote-form__intro h3 {
  margin: 0 0 6px;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.12;
  letter-spacing: 0;
}

.quote-form__intro p {
  max-width: 520px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.quote-form__eyebrow {
  display: inline-flex;
  margin-bottom: 9px;
  color: var(--accent-green);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.quote-form__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  max-width: none;
}

.quote-form__badges span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.76);
  font-size: 12px;
  font-weight: 700;
}

.quote-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.quote-form__field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.quote-form__field span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.055);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  padding: 0 12px;
  outline: none;
  transition:
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.quote-form textarea {
  min-height: 108px;
  resize: vertical;
  padding-top: 11px;
  line-height: 1.5;
}

.quote-form input::placeholder,
.quote-form textarea::placeholder {
  color: color-mix(in srgb, var(--text-muted) 80%, transparent);
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  border-color: rgba(52,211,153,0.52);
  background: rgba(255,255,255,0.075);
  box-shadow: var(--focus-ring);
}

.quote-form__field.is-valid input,
.quote-form__field.is-valid select,
.quote-form__field.is-valid textarea {
  border-color: rgba(52,211,153,0.55);
  box-shadow: 0 0 0 1px rgba(52,211,153,0.1);
}

.quote-form__field.is-invalid input,
.quote-form__field.is-invalid select,
.quote-form__field.is-invalid textarea {
  border-color: rgba(255,99,99,0.68);
  box-shadow: 0 0 0 3px rgba(255,99,99,0.12);
}

.quote-form__submit {
  width: 100%;
  justify-content: center;
  margin-top: 2px;
}

.quote-form__note,
.quote-form__status {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.quote-form__status {
  min-height: 18px;
}

.quote-form__status.is-success {
  color: var(--accent-green);
}

.quote-form__status.is-error {
  color: #fca5a5;
}

.quote-form.is-submitting {
  opacity: 0.82;
}

[data-theme="light"] .quote-section__proof-item {
  border-top-color: rgba(18,33,48,0.10);
}

[data-theme="light"] .quote-section__proof-item:last-child {
  border-bottom-color: rgba(18,33,48,0.08);
}

[data-theme="light"] .quote-form {
  border-color: rgba(18,33,48,0.10);
  background:
    radial-gradient(circle at 18% 0%, rgba(43,182,133,0.14), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(56,189,248,0.12), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.62)),
    rgba(255,255,255,0.72);
  box-shadow:
    0 26px 80px rgba(18,33,48,0.10),
    inset 0 1px 0 rgba(255,255,255,0.82);
}

[data-theme="light"] .quote-form__intro {
  border-bottom-color: rgba(18,33,48,0.08);
}

[data-theme="light"] .quote-form__badges span {
  background: rgba(255,255,255,0.58);
  border-color: rgba(18,33,48,0.08);
  color: rgba(18,33,48,0.66);
}

[data-theme="light"] .quote-form input,
[data-theme="light"] .quote-form select,
[data-theme="light"] .quote-form textarea {
  background: rgba(255,255,255,0.70);
  border-color: rgba(18,33,48,0.12);
}

[data-theme="light"] .quote-form__status.is-error {
  color: #b91c1c;
}

@media (max-width: 920px) {
  .quote-section__inner {
    grid-template-columns: 1fr;
  }

  .quote-section__copy {
    max-width: 720px;
    margin: 0 auto;
  }

  .quote-section__copy .section-title,
  .quote-section__copy .section-subtitle {
    text-align: center;
  }
}

@media (max-width: 560px) {
  .quote-section {
    padding-top: var(--space-14);
    padding-bottom: var(--space-14);
  }

  .quote-section__proof-item {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .quote-form__row,
  .quote-form__row--compact {
    grid-template-columns: 1fr;
  }

}

/* ============================================================
   REDUCED-DATA MODE — home-page decoratives
   Freezes hero aurora drift and AI eyebrow shimmer when the
   user has opted into data-saving.
   ============================================================ */
@media (prefers-reduced-data: reduce) {
  .ai-eyebrow,
  .ai-demo__trigger-mark {
    animation: none !important;
  }

  .ai-demo__io--out.is-loading::before {
    animation: none !important;
    background: var(--fill-glass, rgba(255,255,255,0.04)) !important;
  }

  .hero-aurora,
  .hero__aurora,
  .hero__glow {
    animation: none !important;
  }

  .hero__download-count.is-ticking {
    animation: none !important;
  }
}

/* ============================================================
   LIGHT MODE — on-device writing block
   The AI section is heavily dark-tuned (rgba white fills over
   a dark canvas). In light mode those surfaces disappear into
   the page and borders turn invisible. This block re-skins the
   demo card, feature tiles, promises row, chips, and the eyebrow
   pill so the section reads correctly on the pale light bg.
   ============================================================ */
[data-theme="light"] .ai-section {
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.72) 34%, rgba(255,255,255,0.62) 70%, transparent 100%),
    linear-gradient(115deg, transparent 0%, rgba(43,182,133,0.07) 36%, rgba(56,140,240,0.07) 64%, transparent 100%);
}

/* Eyebrow pill — light glass panel instead of dark */
[data-theme="light"] .ai-eyebrow::before {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,94,168,0.25);
  box-shadow: 0 6px 18px rgba(18,33,48,0.06);
}
/* Darker, denser gradient stops in light mode — the original yellow
   (#FFD23F) was illegible on a white pill. Pulls the mid-stop to a
   richer amber and shifts every hue down ~15% in lightness. */
[data-theme="light"] .ai-eyebrow {
  background-image: linear-gradient(90deg, #D63E84 0%, #E0701F 25%, #C68A12 50%, #1F9E78 75%, #2D6FD9 100%);
}

/* Demo card */
[data-theme="light"] .ai-demo {
  background: rgba(255,255,255,0.72);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 18px 48px rgba(18,33,48,0.08);
}
[data-theme="light"] .ai-demo::before {
  background: linear-gradient(135deg, rgba(255,94,168,0.4), rgba(255,177,63,0.28) 35%, rgba(43,182,133,0.32) 65%, rgba(56,140,240,0.4));
  opacity: 0.7;
}

/* Tab strip */
[data-theme="light"] .ai-demo__tabs {
  background: rgba(0,0,0,0.035);
  border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .ai-demo__tab:hover {
  background: rgba(0,0,0,0.04);
}
[data-theme="light"] .ai-demo__tab.is-active {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 1px 3px rgba(18,33,48,0.1);
}

/* Input/output blocks */
[data-theme="light"] .ai-demo__io {
  background: rgba(255,255,255,0.55);
  border-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .ai-demo__io--out {
  background: linear-gradient(180deg, rgba(43,182,133,0.08), rgba(56,140,240,0.06));
  border-color: rgba(43,182,133,0.22);
}

/* Trigger button */
[data-theme="light"] .ai-demo__trigger {
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.55));
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .ai-demo__trigger:hover {
  background: linear-gradient(180deg, rgba(255,94,168,0.1), rgba(56,140,240,0.08));
  border-color: rgba(255,94,168,0.35);
}
/* Inner dot sits on a light surface now, not a dark one */
[data-theme="light"] .ai-demo__trigger-mark::after {
  background: #FFFFFF;
}
[data-theme="light"] .ai-demo__trigger-kbd {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
  color: var(--text-secondary);
}

/* Loading shimmer reads as a darker sweep on light bg */
[data-theme="light"] .ai-demo__io--out.is-loading::after {
  background: linear-gradient(110deg, transparent 30%, rgba(18,33,48,0.08) 50%, transparent 70%);
}

/* Action-list checkmarks */
[data-theme="light"] .ai-demo__actions li svg {
  color: #2BB685;
  background: rgba(43,182,133,0.14);
}

/* Feature cards */
[data-theme="light"] .ai-feature {
  background: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 8px 24px rgba(18,33,48,0.04);
}
[data-theme="light"] .ai-feature:hover {
  background: rgba(255,255,255,0.78);
  border-color: rgba(255,94,168,0.35);
  box-shadow: 0 12px 32px rgba(18,33,48,0.08);
}
[data-theme="light"] .ai-feature__ico {
  background: linear-gradient(135deg, rgba(255,94,168,0.22), rgba(56,140,240,0.22));
  color: #7A3B5B;
}
[data-theme="light"] .ai-feature__chip {
  background: rgba(0,0,0,0.035);
  border-color: rgba(0,0,0,0.08);
  color: var(--text-secondary);
}

/* Promises row */
[data-theme="light"] .ai-promises {
  background: rgba(255,255,255,0.5);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .ai-promise svg { color: #2BB685; }

/* ============================================================
   LIGHT MODE — comparison table + plan cards
   Both surfaces use near-white rgba fills tuned for the dark
   canvas. On light mode those vanish; override with pale glass
   that sits cleanly on the pale page bg.
   ============================================================ */
[data-theme="light"] .compare-table-wrap {
  background: rgba(255,255,255,0.7);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 12px 40px rgba(18,33,48,0.06);
}
[data-theme="light"] .compare-table thead th {
  background: rgba(248,251,253,0.88);
  color: var(--text-secondary);
}
[data-theme="light"] .compare-table tfoot th,
[data-theme="light"] .compare-table tfoot td {
  background: rgba(248,251,253,0.74);
}
[data-theme="light"] .compare-table__col--us::before {
  background: linear-gradient(180deg, rgba(43,182,133,0.14), rgba(43,182,133,0));
}
[data-theme="light"] .compare-table__price--us { color: #2BB685; }
[data-theme="light"] .compare-table__uslogo {
  background: rgba(43,182,133,0.22);
  color: #2BB685;
}
[data-theme="light"] .compare-table tbody td.partial::before {
  background: rgba(234,160,25,0.18);
  color: #B87D0C;
}

/* Plan cards already use --surface-card which is themed, but the
   hover shadow + popular badge still read dark — soften both */
[data-theme="light"] .plan-card {
  box-shadow: 0 6px 20px rgba(18,33,48,0.04);
}
[data-theme="light"] .plan-card:hover {
  box-shadow: 0 16px 40px rgba(18,33,48,0.08);
  border-color: rgba(43,182,133,0.35);
}
[data-theme="light"] .plan-card.is-selected {
  border-color: rgba(43,182,133,0.5);
  box-shadow: 0 0 0 1px rgba(43,182,133,0.25), 0 16px 40px rgba(43,182,133,0.15);
}

[data-theme="light"] .plans-footer {
  color: var(--text-primary);
  background:
    radial-gradient(circle at 16% 0%, rgba(43,182,133,0.12), transparent 38%),
    radial-gradient(circle at 92% 8%, rgba(56,140,240,0.07), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.48)),
    rgba(255,255,255,0.66);
  border-color: rgba(18,33,48,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.74),
    0 16px 42px rgba(18,33,48,0.07);
}

[data-theme="light"] .plans-footer__summary {
  border-bottom-color: rgba(18,33,48,0.08);
}

[data-theme="light"] .plans-footer__note {
  border-left-color: rgba(18,33,48,0.08);
}

[data-theme="light"] .plans-footer__action {
  border-color: rgba(18,33,48,0.10);
  background: rgba(255,255,255,0.62);
}

[data-theme="light"] .plans-footer__action:hover,
[data-theme="light"] .plans-footer__action:focus-visible {
  border-color: rgba(43,182,133,0.38);
  background: rgba(43,182,133,0.09);
}

[data-theme="light"] .plans-footer__action--primary {
  color: #0f3d31;
  border-color: rgba(43,182,133,0.34);
  background: rgba(43,182,133,0.14);
}

/* ============================================================
   FEATURE CARD ICONS — one-shot reveal animations
   When a .reveal-row enters the viewport and gains .is-visible,
   each card's icon plays a distinct micro-animation once.
   Hover animations (defined above) still fire independently.
   ============================================================ */
.features-grid .reveal-row .feature-card__icon {
  will-change: transform, opacity;
}
/* Default pop-in so late-coming cards never appear static */
.features-grid .reveal-row.is-visible .feature-card__icon {
  animation: feat-icon-pop 700ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
/* Per-card variations — matches the feature semantics.
   Nth-of-type maps onto the card order within each row. */
.features-grid .reveal-row.is-visible .feature-card:nth-of-type(1) .feature-card__icon {
  animation: feat-icon-beat 900ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: 120ms;
}
.features-grid .reveal-row.is-visible .feature-card:nth-of-type(2) .feature-card__icon {
  animation: feat-icon-tile 800ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: 220ms;
}
/* Row-level stagger so the two rows feel cascaded */
.features-grid .reveal-row:nth-child(2).is-visible .feature-card:nth-of-type(1) .feature-card__icon {
  animation: feat-icon-ring 950ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: 120ms;
}
.features-grid .reveal-row:nth-child(2).is-visible .feature-card:nth-of-type(2) .feature-card__icon {
  animation: feat-icon-swirl 900ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: 220ms;
}
.features-grid .reveal-row:nth-child(3).is-visible .feature-card:nth-of-type(1) .feature-card__icon {
  animation: feat-icon-shield 850ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: 120ms;
}
.features-grid .reveal-row:nth-child(3).is-visible .feature-card:nth-of-type(2) .feature-card__icon {
  animation: feat-icon-lock 850ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: 220ms;
}

@keyframes feat-icon-pop {
  0%   { opacity: 0; transform: translateY(8px) scale(0.9); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Media card — heartbeat pulse, echoes playback */
@keyframes feat-icon-beat {
  0%   { opacity: 0; transform: scale(0.86); }
  35%  { opacity: 1; transform: scale(1.12); }
  55%  { transform: scale(0.98); }
  80%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
/* Widgets — tile shuffle */
@keyframes feat-icon-tile {
  0%   { opacity: 0; transform: rotate(-8deg) translateY(8px); }
  50%  { opacity: 1; transform: rotate(3deg) translateY(0); }
  100% { transform: rotate(0) translateY(0); }
}
/* Notifications — bell ring */
@keyframes feat-icon-ring {
  0%   { opacity: 0; transform: rotate(0); }
  30%  { opacity: 1; transform: rotate(-14deg); }
  50%  { transform: rotate(10deg); }
  70%  { transform: rotate(-6deg); }
  85%  { transform: rotate(3deg); }
  100% { transform: rotate(0); }
}
/* AI card — swirl rotate-in */
@keyframes feat-icon-swirl {
  0%   { opacity: 0; transform: rotate(-40deg) scale(0.85); }
  70%  { opacity: 1; transform: rotate(8deg) scale(1.05); }
  100% { transform: rotate(0) scale(1); }
}
/* Privacy shield — scale-in with a soft bounce */
@keyframes feat-icon-shield {
  0%   { opacity: 0; transform: translateY(10px) scale(0.8); }
  55%  { opacity: 1; transform: translateY(-3px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}
/* Built-for-mac (lock) — top-down drop */
@keyframes feat-icon-lock {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.9); }
  60%  { opacity: 1; transform: translateY(2px) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}

/* Stroke draw-on effect for line SVGs inside feature icons.
   Uses stroke-dash tricks to "write" the icon as it lands. */
.features-grid .reveal-row.is-visible .feature-card__icon svg path,
.features-grid .reveal-row.is-visible .feature-card__icon svg rect,
.features-grid .reveal-row.is-visible .feature-card__icon svg circle,
.features-grid .reveal-row.is-visible .feature-card__icon svg polyline,
.features-grid .reveal-row.is-visible .feature-card__icon svg line {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: feat-icon-draw 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms forwards;
}
@keyframes feat-icon-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .features-grid .reveal-row.is-visible .feature-card__icon,
  .features-grid .reveal-row.is-visible .feature-card__icon svg * {
    animation: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   PRICING MICRO-ANIMATIONS
   Badge pulses softly, check-ticks cascade on reveal, and an
   Apple-style sheen sweeps across the card on hover.
   ============================================================ */

/* 1) "Most Popular" badge — subtle pulsing halo that catches the eye
      without being flashy. Pauses on hover so it doesn't compete with
      the sheen effect.
      NOTE: do NOT set position: relative here — the base .plan-card__badge
      rule uses position: absolute, and an absolute element is already a
      containing block for absolutely-positioned descendants. Overriding
      to relative silently broke the top:0 / translate(-50%,-50%) centering. */
.plan-card__badge--popular::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: inherit;
  opacity: 0.55;
  z-index: -1;
  animation: plan-badge-pulse 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none;
}
.plan-card:hover .plan-card__badge--popular::before,
.plan-card.is-selected .plan-card__badge--popular::before {
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 300ms ease;
}
@keyframes plan-badge-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  60%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* 2) Price digits glow briefly when the card becomes selected — makes
      the ticker count-up feel like it "lands" on the chosen price. */
.plan-card.is-selected .plan-card__price {
  animation: plan-price-flash 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes plan-price-flash {
  0%   { text-shadow: 0 0 0 rgba(52, 211, 153, 0); }
  35%  { text-shadow: 0 0 18px rgba(52, 211, 153, 0.55); }
  100% { text-shadow: 0 0 0 rgba(52, 211, 153, 0); }
}

/* 3) Check-ticks cascade — when the pricing grid enters view, each
      feature row's check bubble pops in, then the checkmark strokes.
      reveal-stagger + is-visible is the trigger from main.js. */
.plans-grid.reveal-stagger.is-visible .plan-card__check {
  animation: plan-check-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.plans-grid.reveal-stagger.is-visible .plan-card:nth-of-type(1) .plan-card__check { animation-delay: 80ms; }
.plans-grid.reveal-stagger.is-visible .plan-card:nth-of-type(2) .plan-card__check { animation-delay: 160ms; }
.plans-grid.reveal-stagger.is-visible .plan-card:nth-of-type(3) .plan-card__check { animation-delay: 240ms; }
.plans-grid.reveal-stagger.is-visible .plan-card .plan-card__feature:nth-of-type(2) .plan-card__check { animation-delay: calc(80ms + 60ms); }
.plans-grid.reveal-stagger.is-visible .plan-card .plan-card__feature:nth-of-type(3) .plan-card__check { animation-delay: calc(80ms + 120ms); }
.plans-grid.reveal-stagger.is-visible .plan-card .plan-card__feature:nth-of-type(4) .plan-card__check { animation-delay: calc(80ms + 180ms); }
.plans-grid.reveal-stagger.is-visible .plan-card .plan-card__feature:nth-of-type(5) .plan-card__check { animation-delay: calc(80ms + 240ms); }
.plans-grid.reveal-stagger.is-visible .plan-card .plan-card__feature:nth-of-type(6) .plan-card__check { animation-delay: calc(80ms + 300ms); }
@keyframes plan-check-pop {
  0%   { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* The checkmark itself draws on via stroke-dasharray */
.plans-grid.reveal-stagger.is-visible .plan-card__check svg polyline {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: plan-check-draw 420ms cubic-bezier(0.65, 0, 0.35, 1) 180ms forwards;
}
@keyframes plan-check-draw {
  to { stroke-dashoffset: 0; }
}

/* 4) Hover sheen — a diagonal gradient sweeps across the card when
      pointed at. Uses a mask-only pseudo so it never blocks clicks.
      IMPORTANT: we clip the SHEEN itself (clip-path on ::after) instead
      of the card (overflow:hidden). The card must stay unclipped so the
      "MOST POPULAR" badge — which sits translate(-50%,-50%) on the top
      border — is not sliced in half. */
.plan-card {
  position: relative;
  border-radius: 14px;
  border-color: rgba(255,255,255,0.105);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.018);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
}
.plan-card::after {
  content: '';
  position: absolute;
  clip-path: inset(0 round 14px);
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255, 255, 255, 0.08) 42%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.08) 58%,
    transparent 80%
  );
  transform: translateX(-110%);
  transition: transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
  mix-blend-mode: screen;
  border-radius: inherit;
}
.plan-card:hover::after {
  transform: translateX(110%);
}
[data-theme="light"] .plan-card::after {
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(52, 211, 153, 0.06) 42%,
    rgba(52, 211, 153, 0.12) 50%,
    rgba(52, 211, 153, 0.06) 58%,
    transparent 80%
  );
  mix-blend-mode: multiply;
}

[data-theme="light"] .plan-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.74)),
    rgba(255,255,255,0.82);
  border-color: rgba(18,33,48,0.095);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 1px 0 rgba(18,33,48,0.025);
}

/* 5) Price tabular-nums so the ticker count-up doesn't jitter-shift */
.plan-card__price [data-ticker] {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 1.6ch;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .plan-card__badge--popular::before,
  .plan-card.is-selected .plan-card__price,
  .plans-grid.reveal-stagger.is-visible .plan-card__check,
  .plans-grid.reveal-stagger.is-visible .plan-card__check svg polyline {
    animation: none !important;
  }
  .plan-card::after { display: none; }
  .plans-grid.reveal-stagger.is-visible .plan-card__check svg polyline {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

/* ============================================================
   VALUE PROPOSITION — bridge from demo to workflows
   --------------------------------------------------------------
   This section earns its scroll space with three concrete reasons
   the compact top-edge surface matters before the page moves into
   feature-specific workflow cards.
   ============================================================ */
.value-prop {
  padding-top: var(--space-16);
  padding-bottom: var(--space-20);
}

.value-prop__inner {
  max-width: 1080px;
}

.value-prop__proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(920px, 100%);
  margin: var(--space-10) auto 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at calc(var(--scene-progress, 0.5) * 100%) 0%, rgba(52,211,153,0.12), transparent 34%),
    linear-gradient(90deg, transparent, rgba(255,255,255,0.045) 14%, rgba(255,255,255,0.045) 86%, transparent),
    linear-gradient(90deg, transparent, rgba(52,211,153,0.10) 50%, transparent);
}

.value-prop__item {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 24px 26px;
  text-align: left;
  opacity: 0;
  transform: translateY(18px);
}

.value-prop.is-visible .value-prop__item {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 560ms var(--ease-out),
    transform 680ms var(--ease-out);
}

.value-prop.is-visible .value-prop__item:nth-child(1) { transition-delay: 80ms; }
.value-prop.is-visible .value-prop__item:nth-child(2) { transition-delay: 180ms; }
.value-prop.is-visible .value-prop__item:nth-child(3) { transition-delay: 280ms; }

.value-prop__item + .value-prop__item {
  border-left: 1px solid rgba(255,255,255,0.10);
}

.value-prop__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(84,211,154,0.88);
}

.value-prop__item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.18;
  letter-spacing: 0;
  color: var(--text-primary);
}

.value-prop__item p {
  margin: 0;
  max-width: 28ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.value-prop__proof--mac {
  position: relative;
  grid-template-columns: minmax(440px, 1.08fr) minmax(340px, 0.92fr);
  grid-template-rows: repeat(3, minmax(130px, auto));
  gap: 10px;
  width: min(1040px, 100%);
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at 16% 0%, rgba(52,211,153,0.22), transparent 38%),
    radial-gradient(circle at 84% 8%, rgba(56,189,248,0.14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.022)),
    rgba(5,13,22,0.58);
  box-shadow:
    0 34px 100px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.12);
  overflow: hidden;
}

.value-prop__proof--mac::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 20px;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.05) 50%, transparent),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 96px);
  pointer-events: none;
  opacity: 0.72;
}

.value-prop__proof--mac .value-prop__item {
  position: relative;
  z-index: 1;
  min-height: 0;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    rgba(8,18,29,0.50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.value-prop__proof--mac .value-prop__item + .value-prop__item {
  border-left: 1px solid rgba(255,255,255,0.09);
}

.value-prop__proof--mac .value-prop__item--native {
  grid-row: 1 / span 3;
  display: grid;
  align-content: space-between;
  min-height: 454px;
  padding: 24px;
  background:
    radial-gradient(circle at 24% 8%, rgba(52,211,153,0.20), transparent 38%),
    radial-gradient(circle at 88% 34%, rgba(56,189,248,0.13), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.024)),
    rgba(8,18,28,0.62);
}

.value-prop__proof--mac .value-prop__item--native > strong {
  max-width: 16ch;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.02;
}

.value-prop__proof--mac .value-prop__item--native > p {
  max-width: 36ch;
}

.mac-trust__device {
  position: relative;
  width: 100%;
  margin-bottom: var(--space-7);
}

.mac-trust__screen {
  position: relative;
  min-height: 266px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 78%, rgba(52,211,153,0.16), transparent 35%),
    radial-gradient(circle at 82% 22%, rgba(56,189,248,0.15), transparent 34%),
    linear-gradient(180deg, rgba(55,99,119,0.42), rgba(7,16,27,0.86));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 20px 54px rgba(0,0,0,0.23);
}

.mac-trust__menu {
  height: 36px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 18px;
  background: rgba(5,10,17,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  color: rgba(235,247,255,0.56);
  font-size: 11px;
}

.value-prop__proof--mac .mac-trust__menu strong {
  color: rgba(245,250,255,0.88);
  font-size: 11px;
  line-height: 1;
}

.mac-trust__menu span:last-child {
  justify-self: end;
}

.mac-trust__notch {
  position: absolute;
  top: 36px;
  left: 50%;
  width: 136px;
  height: 28px;
  border-radius: 0 0 18px 18px;
  background: rgba(2,7,12,0.96);
  transform: translateX(-50%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.07);
}

.mac-trust__surface {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  width: min(360px, calc(100% - 54px));
  margin: 48px auto 0;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(5,12,21,0.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 16px 36px rgba(0,0,0,0.24);
}

.mac-trust__art {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(135deg, #34d399, #38bdf8 52%, #f472b6);
  box-shadow: 0 0 24px rgba(56,189,248,0.22);
}

.mac-trust__track,
.mac-trust__shelf,
.mac-trust__meter {
  display: grid;
}

.mac-trust__track {
  gap: 7px;
}

.mac-trust__track i {
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
}

.mac-trust__track i:first-child {
  width: 128px;
  background: rgba(255,255,255,0.72);
}

.mac-trust__track i:last-child {
  width: 86px;
}

.mac-trust__meter {
  grid-auto-flow: column;
  align-items: center;
  gap: 3px;
}

.mac-trust__meter i {
  width: 3px;
  height: 13px;
  border-radius: 999px;
  background: var(--accent-green);
  box-shadow: 0 0 12px rgba(52,211,153,0.44);
}

.mac-trust__meter i:nth-child(2) { height: 20px; }
.mac-trust__meter i:nth-child(3) { height: 16px; }

.mac-trust__shelf {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(384px, calc(100% - 40px));
  margin: 20px auto 0;
}

.mac-trust__shelf span {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  color: rgba(235,247,255,0.62);
  font-size: 11px;
  font-weight: 700;
}

.mac-trust__permission {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(84,211,154,0.20);
  border-radius: 14px;
  background: rgba(4,10,17,0.48);
  color: rgba(235,255,247,0.78);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

.mac-trust__permission span,
.mac-trust__status-icon {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(52,211,153,0.14);
  border: 1px solid rgba(52,211,153,0.26);
}

.mac-trust__permission span::after,
.mac-trust__status-icon::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 5px;
  height: 8px;
  border-right: 2px solid var(--accent-green);
  border-bottom: 2px solid var(--accent-green);
  transform: rotate(45deg);
}

.value-prop__proof--mac .mac-trust__permission strong {
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
  color: rgba(235,255,247,0.82);
}

.mac-trust__status {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 22px;
  background:
    linear-gradient(90deg, rgba(52,211,153,0.09), transparent 42%),
    rgba(9,18,28,0.48);
}

.value-prop__proof--mac .mac-trust__status strong {
  margin-top: 7px;
  font-size: clamp(18px, 1.45vw, 21px);
}

.value-prop__proof--mac .mac-trust__status p {
  max-width: 42ch;
  margin-top: 5px;
}

.mac-trust__status-icon {
  width: 34px;
  height: 34px;
  align-self: start;
  margin-top: 2px;
}

.mac-trust__status-icon::after {
  left: 11px;
  top: 8px;
  width: 7px;
  height: 11px;
}

.mac-trust__tag {
  align-self: start;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: rgba(235,247,255,0.62);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.value-prop__item--permissions {
  background:
    radial-gradient(circle at 92% 0%, rgba(244,114,182,0.12), transparent 38%),
    linear-gradient(90deg, rgba(52,211,153,0.09), transparent 42%),
    rgba(9,18,28,0.48) !important;
}

[data-theme="light"] .value-prop__proof--mac {
  border-color: rgba(18,33,48,0.11);
  background:
    radial-gradient(circle at 16% 0%, rgba(43,182,133,0.16), transparent 38%),
    radial-gradient(circle at 84% 8%, rgba(56,140,240,0.10), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.86), rgba(255,255,255,0.50)),
    rgba(255,255,255,0.70);
  box-shadow:
    0 24px 72px rgba(18,33,48,0.10),
    inset 0 1px 0 rgba(255,255,255,0.74);
}

[data-theme="light"] .value-prop__proof--mac .value-prop__item {
  border-color: rgba(18,33,48,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.48)),
    rgba(255,255,255,0.64);
}

[data-theme="light"] .mac-trust__screen {
  border-color: rgba(18,33,48,0.10);
  background:
    radial-gradient(circle at 18% 78%, rgba(43,182,133,0.13), transparent 35%),
    radial-gradient(circle at 82% 22%, rgba(56,140,240,0.12), transparent 34%),
    linear-gradient(180deg, rgba(229,247,245,0.72), rgba(195,224,226,0.56) 44%, rgba(246,250,249,0.70));
}

[data-theme="light"] .mac-trust__menu,
[data-theme="light"] .mac-trust__notch {
  background: rgba(18,33,48,0.86);
}

[data-theme="light"] .mac-trust__surface {
  border-color: rgba(18,33,48,0.12);
  background: rgba(255,255,255,0.74);
}

[data-theme="light"] .mac-trust__track i:first-child {
  background: rgba(18,33,48,0.60);
}

[data-theme="light"] .mac-trust__track i,
[data-theme="light"] .mac-trust__shelf span {
  background: rgba(18,33,48,0.12);
}

[data-theme="light"] .mac-trust__permission {
  border-color: rgba(43,182,133,0.24);
  background: rgba(255,255,255,0.70);
  color: rgba(15,61,49,0.76);
}

[data-theme="light"] .value-prop__proof--mac .mac-trust__permission strong {
  color: rgba(15,61,49,0.82);
}

[data-theme="light"] .mac-trust__status,
[data-theme="light"] .value-prop__item--permissions {
  background:
    linear-gradient(90deg, rgba(43,182,133,0.10), transparent 42%),
    rgba(255,255,255,0.62) !important;
}

[data-theme="light"] .mac-trust__tag {
  border-color: rgba(18,33,48,0.10);
  background: rgba(255,255,255,0.58);
  color: rgba(18,33,48,0.54);
}

[data-theme="light"] .value-prop__proof {
  border-top-color: rgba(18,33,48,0.12);
  border-bottom-color: rgba(18,33,48,0.08);
  background:
    radial-gradient(circle at calc(var(--scene-progress, 0.5) * 100%) 0%, rgba(43,182,133,0.14), transparent 34%),
    linear-gradient(90deg, transparent, rgba(255,255,255,0.66) 14%, rgba(255,255,255,0.66) 86%, transparent),
    linear-gradient(90deg, transparent, rgba(43,182,133,0.12) 50%, transparent);
}

[data-theme="light"] .value-prop__item + .value-prop__item {
  border-left-color: rgba(18,33,48,0.08);
}

@media (max-width: 760px) {
  .value-prop {
    padding-top: var(--space-10);
    padding-bottom: var(--space-16);
  }

  .value-prop__proof {
    grid-template-columns: 1fr;
    width: min(430px, 100%);
    gap: 12px;
    margin-top: var(--space-8);
    border: 0;
    background: transparent;
  }

  .value-prop__item {
    padding: 22px 20px 23px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 8px;
    background:
      radial-gradient(circle at 50% 0%, rgba(52,211,153,0.11), transparent 60%),
      rgba(255,255,255,0.035);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
  }

  .value-prop__item + .value-prop__item {
    border-top: 1px solid rgba(255,255,255,0.09);
    border-left: 0;
  }

  .value-prop__item p {
    max-width: 32ch;
    margin: 0 auto;
  }

  .value-prop__proof--mac {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .value-prop__proof--mac::before {
    display: none;
  }

  .value-prop__proof--mac .value-prop__item,
  .value-prop__proof--mac .value-prop__item--native {
    grid-row: auto;
    align-content: start;
    min-height: 0;
    margin-right: 0;
    padding: 18px;
    border-radius: 18px;
    background:
      radial-gradient(circle at 50% 0%, rgba(52,211,153,0.11), transparent 60%),
      rgba(255,255,255,0.035);
    text-align: left;
  }

  .mac-trust__device {
    margin-bottom: var(--space-5);
  }

  .mac-trust__screen {
    min-height: 218px;
    border-radius: 16px;
  }

  .mac-trust__surface {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    width: calc(100% - 28px);
    gap: 10px;
    margin-top: 42px;
    padding: 10px 12px;
  }

  .mac-trust__art {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .mac-trust__track i:first-child { width: min(112px, 28vw); }
  .mac-trust__track i:last-child { width: min(78px, 22vw); }

  .mac-trust__shelf {
    width: calc(100% - 28px);
    gap: 6px;
    margin-top: 14px;
  }

  .mac-trust__shelf span {
    min-height: 30px;
    font-size: 10px;
  }

  .mac-trust__permission {
    left: 14px;
    right: 14px;
    bottom: 12px;
    padding: 9px 10px;
  }

  .value-prop__proof--mac .value-prop__item--native > strong {
    max-width: none;
    font-size: 25px;
    line-height: 1.18;
  }

  .value-prop__proof--mac .value-prop__item--native > p {
    max-width: 34ch;
  }

  .mac-trust__status {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
    text-align: left;
  }

  .mac-trust__status-icon {
    width: 30px;
    height: 30px;
  }

  .mac-trust__status-icon::after {
    left: 9px;
    top: 7px;
  }

  .value-prop__proof--mac .mac-trust__status strong {
    margin-top: 5px;
    font-size: 17px;
  }

  .value-prop__proof--mac .mac-trust__status p,
  .value-prop__proof--mac .value-prop__item p {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    font-size: 13px;
    line-height: 1.45;
  }

  .mac-trust__tag {
    display: none;
  }

  [data-theme="light"] .value-prop__item + .value-prop__item {
    border-top-color: rgba(18,33,48,0.10);
  }

  [data-theme="light"] .value-prop__item {
    border-color: rgba(18,33,48,0.10);
    background:
      radial-gradient(circle at 50% 0%, rgba(43,182,133,0.12), transparent 60%),
      rgba(255,255,255,0.62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
  }

  [data-theme="light"] .value-prop__proof--mac .value-prop__item,
  [data-theme="light"] .value-prop__proof--mac .value-prop__item--native {
    background:
      radial-gradient(circle at 50% 0%, rgba(43,182,133,0.12), transparent 60%),
      rgba(255,255,255,0.62);
  }

  [data-theme="light"] .mac-trust__status,
  [data-theme="light"] .value-prop__item--permissions {
    background:
      linear-gradient(90deg, rgba(43,182,133,0.10), transparent 42%),
      rgba(255,255,255,0.62) !important;
  }
}

/* ============================================================
   WORKFLOW DEMO — product chooser
   ============================================================ */
.workflow-demo-section {
  padding-top: clamp(52px, 7vw, 96px);
  padding-bottom: clamp(56px, 8vw, 112px);
  overflow: hidden;
}

.workflow-demo__head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.58fr);
  align-items: end;
  gap: clamp(24px, 5vw, 72px);
  margin-bottom: clamp(24px, 4vw, 42px);
}

.workflow-demo__head .section-subtitle {
  margin: 0;
  max-width: 46ch;
  text-align: left;
}

.workflow-demo {
  position: relative;
  display: grid;
  gap: 18px;
}

.workflow-demo__tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--border-soft) 74%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(circle at 16% 0%, rgba(38,194,255,0.09), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--fill-glass) 86%, transparent), color-mix(in srgb, var(--surface-card) 82%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    0 18px 54px rgba(0,0,0,0.10);
}

.workflow-demo__tab {
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font: 700 13px/1 var(--font-body);
  letter-spacing: 0;
  transition:
    background-color 180ms var(--ease),
    border-color 180ms var(--ease),
    color 180ms var(--ease),
    box-shadow 180ms var(--ease);
}

.workflow-demo__tab svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workflow-demo__tab:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--fill-glass-strong) 72%, transparent);
}

.workflow-demo__tab:active {
  transform: translateY(1px);
  transition-duration: 80ms;
}

.workflow-demo__tab.is-active {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--workflow-accent, var(--accent-green)) 38%, var(--border-soft));
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--workflow-accent, var(--accent-green)) 18%, transparent), transparent 56%),
    color-mix(in srgb, var(--surface-elevated) 78%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 14px 32px color-mix(in srgb, var(--workflow-accent, var(--accent-green)) 11%, transparent);
}

.workflow-demo__tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.workflow-demo__stage {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-soft) 76%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--workflow-accent, var(--accent-green)) 18%, transparent), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(84,211,154,0.10), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-dark) 76%, transparent), rgba(5,10,17,0.38));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--workflow-accent, var(--accent-green)) 30%, transparent),
    inset 0 -1px 0 rgba(255,255,255,0.035);
}

.workflow-demo__stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--workflow-accent, var(--accent-green)) 48%, transparent), transparent);
  pointer-events: none;
}

.workflow-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  min-height: 510px;
  padding: clamp(22px, 4vw, 42px);
}

.workflow-panel[hidden] {
  display: none;
}

.workflow-panel.is-active {
  animation: workflow-panel-in 340ms var(--ease-out) both;
}

@keyframes workflow-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.workflow-panel__preview {
  min-width: 0;
}

.workflow-mac {
  position: relative;
  min-height: 390px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: clamp(22px, 3vw, 32px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), transparent 14%),
    radial-gradient(circle at 21% 20%, color-mix(in srgb, var(--workflow-accent, var(--accent-green)) 28%, transparent), transparent 28%),
    radial-gradient(circle at 78% 76%, rgba(245,158,11,0.12), transparent 25%),
    linear-gradient(135deg, #070c15 0%, #132034 48%, #071016 100%);
  box-shadow:
    0 34px 92px rgba(0,0,0,0.34),
    0 0 62px color-mix(in srgb, var(--workflow-accent, var(--accent-green)) 10%, transparent),
    inset 0 0 0 1px rgba(255,255,255,0.045);
}

.workflow-mac::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(118px, 28%, 156px);
  height: 27px;
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(180deg, #03050a, #050711);
  transform: translateX(-50%);
  z-index: 5;
  box-shadow:
    0 12px 28px rgba(0,0,0,0.34),
    inset 0 -1px 0 rgba(255,255,255,0.055);
}

.workflow-mac::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(95,116,148,0.48);
  transform: translateX(-50%);
  z-index: 6;
  box-shadow: 24px 0 0 rgba(43,53,72,0.38);
}

.workflow-mac__bar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(112px, 30%, 170px);
  height: 48px;
  padding: 0 clamp(18px, 4vw, 26px);
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  background:
    linear-gradient(180deg, rgba(8,13,22,0.74), rgba(8,13,22,0.38));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.workflow-mac__bar span:first-child {
  display: none;
}

.workflow-mac__bar strong {
  min-width: 0;
  justify-self: start;
  overflow: hidden;
  color: rgba(255,255,255,0.92);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-mac__bar span:last-child {
  justify-self: end;
  text-align: right;
}

.workflow-surface {
  position: absolute;
  left: 50%;
  top: 106px;
  z-index: 3;
  width: min(520px, calc(100% - 48px));
  min-height: 150px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.058)),
    rgba(5, 11, 20, 0.72);
  box-shadow:
    0 26px 78px rgba(0,0,0,0.42),
    0 0 48px color-mix(in srgb, var(--workflow-accent, var(--accent-green)) 15%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.10);
  transform: translateX(-50%);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
}

.workflow-surface__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.workflow-surface__copy span,
.workflow-surface__copy em {
  overflow: hidden;
  color: rgba(255,255,255,0.62);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-surface__copy span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--workflow-accent, var(--accent-green)) 82%, white);
}

.workflow-surface__copy strong {
  overflow: hidden;
  color: #fff;
  font: 800 clamp(19px, 2.4vw, 30px)/1.08 var(--font-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-surface__copy em {
  font-style: normal;
}

.workflow-surface__art,
.workflow-date,
.workflow-focus-ring,
.workflow-spark,
.workflow-widget-grid {
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  border-radius: 18px;
}

.workflow-surface__art {
  background:
    radial-gradient(circle at 30% 24%, #fff, transparent 9%),
    radial-gradient(circle at 72% 72%, #f59e0b, transparent 18%),
    linear-gradient(135deg, #7c3aed, #ec4899 54%, #22c55e);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

.workflow-surface__wave {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}

.workflow-surface__wave span {
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--workflow-accent, var(--accent-green)) 82%, white);
  animation: workflow-wave 940ms ease-in-out infinite;
}

.workflow-surface__wave span:nth-child(2) { height: 28px; animation-delay: 110ms; }
.workflow-surface__wave span:nth-child(3) { height: 14px; animation-delay: 220ms; }
.workflow-surface__wave span:nth-child(4) { height: 23px; animation-delay: 330ms; }

@keyframes workflow-wave {
  0%, 100% { transform: scaleY(0.68); opacity: 0.72; }
  50% { transform: scaleY(1); opacity: 1; }
}

.workflow-focus-ring {
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    conic-gradient(color-mix(in srgb, var(--workflow-accent, var(--accent-cyan)) 90%, white) 0.72turn, rgba(255,255,255,0.12) 0),
    rgba(255,255,255,0.06);
}

.workflow-focus-ring span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(5, 10, 17, 0.9);
  color: #fff;
  font: 800 19px/1 var(--font-heading);
}

.workflow-date {
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, #ef4444 0 30%, #fff 30% 100%);
  color: #172033;
  font: 900 21px/1 var(--font-heading);
}

.workflow-surface--calendar button {
  min-width: 64px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--workflow-accent, var(--accent-cyan)) 78%, white);
  color: #061018;
  font: 800 12px/1 var(--font-body);
}

.workflow-widget-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  width: 96px;
  padding: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.045));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.13),
    0 12px 28px rgba(0,0,0,0.18);
}

.workflow-widget-grid span {
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  border-radius: 9px;
  color: rgba(255,255,255,0.88);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--workflow-accent, var(--accent-green)) 28%, rgba(255,255,255,0.12)), rgba(255,255,255,0.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

.workflow-widget-grid span:nth-child(2) { background: linear-gradient(145deg, rgba(96,165,250,0.32), rgba(255,255,255,0.045)); }
.workflow-widget-grid span:nth-child(3) { background: linear-gradient(145deg, rgba(236,72,153,0.28), rgba(255,255,255,0.045)); }
.workflow-widget-grid span:nth-child(4) { background: linear-gradient(145deg, rgba(245,158,11,0.26), rgba(255,255,255,0.045)); }

.workflow-spark {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0 8%, transparent 9%),
    conic-gradient(from 20deg, #34d399, #38bdf8, #ec4899, #f59e0b, #34d399);
}

.workflow-spark::before,
.workflow-spark::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: #fff;
}

.workflow-spark::after {
  transform: rotate(90deg);
}

.workflow-mac__desktop {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.workflow-mac__desktop span {
  min-width: 0;
  overflow: hidden;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,0.105);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.045));
  color: rgba(255,255,255,0.76);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
}

.workflow-panel__copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 16px;
}

.workflow-panel__copy .button {
  justify-self: start;
  min-width: min(260px, 100%);
}

.workflow-panel__kicker {
  margin: 0;
  color: color-mix(in srgb, var(--workflow-accent, var(--accent-green)) 84%, white);
  font: 800 11px/1.2 var(--font-mono);
  text-transform: uppercase;
}

.workflow-panel__copy h3 {
  margin: 0;
  color: var(--text-primary);
  font: 800 clamp(28px, 4vw, 48px)/1.02 var(--font-heading);
  letter-spacing: 0;
}

.workflow-panel__copy p:not(.workflow-panel__kicker) {
  margin: 0;
  max-width: 44ch;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.65;
}

.workflow-panel__list {
  display: grid;
  gap: 10px;
  margin: 2px 0 6px;
  padding: 0;
  list-style: none;
}

.workflow-panel__list li {
  position: relative;
  padding-left: 22px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
}

.workflow-panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.54em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--workflow-accent, var(--accent-green));
  box-shadow: 0 0 18px color-mix(in srgb, var(--workflow-accent, var(--accent-green)) 44%, transparent);
}

.workflow-demo[data-active-workflow="media"] { --workflow-accent: #a78bfa; }
.workflow-demo[data-active-workflow="focus"] { --workflow-accent: #38bdf8; }
.workflow-demo[data-active-workflow="calendar"] { --workflow-accent: #60a5fa; }
.workflow-demo[data-active-workflow="widgets"] { --workflow-accent: #34d399; }
.workflow-demo[data-active-workflow="writing"] { --workflow-accent: #ec4899; }

[data-theme="light"] .workflow-demo__tabs,
[data-theme="light"] .workflow-demo__stage {
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--workflow-accent, var(--accent-green)) 14%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.44));
  border-color: rgba(18,33,48,0.1);
}

[data-theme="light"] .workflow-demo__tab.is-active {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--workflow-accent, var(--accent-green)) 20%, transparent), transparent 56%),
    rgba(255,255,255,0.84);
}

[data-theme="light"] .workflow-panel__preview {
  filter: drop-shadow(0 22px 50px rgba(18,33,48,0.08));
}

@media (max-width: 980px) {
  .workflow-demo__head,
  .workflow-panel {
    grid-template-columns: 1fr;
  }

  .workflow-demo__head .section-subtitle {
    max-width: 62ch;
  }

  .workflow-panel {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .workflow-demo-section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-16);
  }

  .workflow-demo__tabs {
    grid-template-columns: repeat(5, minmax(104px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .workflow-demo__tabs::-webkit-scrollbar {
    display: none;
  }

  .workflow-demo__tab {
    scroll-snap-align: start;
  }

  .workflow-panel {
    padding: 18px;
  }

  .workflow-panel__copy .button {
    justify-self: stretch;
  }

  .workflow-mac {
    min-height: 332px;
    border-radius: 22px;
  }

  .workflow-mac::before {
    width: 116px;
    height: 24px;
    border-radius: 0 0 10px 10px;
  }

  .workflow-mac::after {
    top: 8px;
    width: 5px;
    height: 5px;
    box-shadow: 19px 0 0 rgba(43,53,72,0.38);
  }

  .workflow-mac__bar {
    height: 43px;
    gap: 96px;
    padding: 0 15px;
    font-size: 11px;
  }

  .workflow-mac__bar strong {
    font-size: 11px;
  }

  .workflow-surface {
    top: 76px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: calc(100% - 28px);
    min-height: 132px;
    gap: 10px;
    padding: 16px;
    border-radius: 18px;
  }

  .workflow-surface__art,
  .workflow-date,
  .workflow-focus-ring,
  .workflow-spark,
  .workflow-widget-grid {
    width: 58px;
    height: 58px;
    border-radius: 15px;
  }

  .workflow-widget-grid {
    width: 72px;
    gap: 4px;
    padding: 5px;
  }

  .workflow-widget-grid span {
    border-radius: 7px;
    font-size: 7.5px;
  }

  .workflow-focus-ring span {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }

  .workflow-surface__wave {
    width: 48px;
    height: 48px;
    gap: 4px;
  }

  .workflow-surface__wave span {
    width: 3px;
    height: 15px;
  }

  .workflow-surface__wave span:nth-child(2) { height: 23px; }
  .workflow-surface__wave span:nth-child(3) { height: 12px; }
  .workflow-surface__wave span:nth-child(4) { height: 19px; }

  .workflow-surface--calendar button {
    min-width: 54px;
    height: 34px;
  }

  .workflow-surface__copy strong {
    font-size: clamp(17px, 5.4vw, 19px);
  }

  .workflow-mac__desktop {
    left: 14px;
    right: 14px;
    bottom: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .workflow-mac__desktop span {
    padding: 8px 6px;
    border-radius: 9px;
    font-size: 10px;
  }

  .workflow-panel__copy h3 {
    font-size: clamp(27px, 10vw, 38px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-panel.is-active,
  .workflow-surface__wave span {
    animation: none;
  }
}

/* ============================================================
   PILLARS — always-visible thumbnail cards (Apple-refined)
   --------------------------------------------------------------
   Four "what Aurora does" cards. Each card has a notch-framed
   thumbnail on top, a small tinted kicker, a bold title, a
   concise strapline, and a hover-reveal arrow bottom-right.
   Each pillar carries its own --pillar-accent hue so hover
   states and kickers feel varied, not monotone-green.
   ============================================================ */
.pillars {
  position: relative;
}

.pillars__head {
  margin-bottom: var(--space-8);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

/* Card shell — softer chrome at rest so the thumbnail does the
   talking. --pillar-accent is set per-card inline; falls back to
   accent-green for any card that forgets to declare one. */
.pillar {
  --pillar-accent: var(--accent-green);
  --pillar-accent-soft: color-mix(in srgb, var(--pillar-accent) 30%, transparent);
  --pillar-accent-glow: color-mix(in srgb, var(--pillar-accent) 22%, transparent);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
    var(--surface-card, rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255,255,255,0.105);
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
  transition:
    opacity 520ms var(--ease-out),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms var(--ease),
    box-shadow 320ms var(--ease);
}

@media (min-width: 769px) {
  .pillars .pillar {
    opacity: 0;
    transform: translateY(22px);
  }

  .pillars.is-visible .pillar {
    opacity: 1;
    transform: translateY(0);
  }

  .pillars.is-visible .pillar:nth-child(1) { transition-delay: 80ms; }
  .pillars.is-visible .pillar:nth-child(2) { transition-delay: 160ms; }
  .pillars.is-visible .pillar:nth-child(3) { transition-delay: 240ms; }
  .pillars.is-visible .pillar:nth-child(4) { transition-delay: 320ms; }
}

[data-theme="light"] .pillar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.74)),
    #ffffff;
  border-color: rgba(15, 23, 42, 0.095);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 1px 0 rgba(15, 23, 42, 0.03);
}

/* Thumbnail — inset from card edges so it reads as a framed
   product shot, not a banner. The small margin + inner radius
   picks up the Apple "floating artwork" feel. */
.pillar__thumb {
  position: relative;
  width: calc(100% - 20px);
  margin: 10px 10px 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(10, 14, 22, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.pillar__thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="light"] .pillar__thumb {
  border-color: rgba(15, 23, 42, 0.05);
}

/* Footer — more generous padding, left-aligned content, arrow in
   the bottom-right corner. Flex column so arrow sticks to bottom. */
.pillar__foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-5) var(--space-4) var(--space-5);
  flex: 1;
}

/* Kicker — small uppercase category label, tinted with the
   pillar accent. Replaces the "01 / 02 / 03 / 04" index row. */
.pillar__kicker {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pillar-accent);
  opacity: 0.95;
  margin: 0 0 2px;
  line-height: 1;
}
[data-theme="light"] .pillar__kicker {
  /* Darken the accent tone slightly in light mode so small-caps
     stay readable on white. color-mix produces a deeper hue. */
  color: color-mix(in srgb, var(--pillar-accent) 85%, #0f172a 15%);
}

/* Title — bolder and a touch larger. Still display-friendly, not
   hero-scale. */
.pillar__title {
  font-family: var(--font-heading);
  font-size: clamp(20px, 1.45vw, 22px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0;
  color: var(--text-primary);
}

/* Description — max 2 lines at a comfortable reading column. */
.pillar__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
  max-width: 38ch;
}

/* Arrow — bottom-right "explore" affordance. Subtle at rest, eases
   right + fully opaque on hover. Inherits the pillar accent so the
   hover motion pulls the eye toward the chosen tile. */
.pillar__arrow {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--text-secondary);
  background: transparent;
  opacity: 0.55;
  transform: translateX(0);
  transition:
    color 260ms var(--ease),
    opacity 260ms var(--ease),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    background 260ms var(--ease);
}
.pillar__arrow svg { width: 16px; height: 16px; display: block; }

/* --- HOVER / FOCUS — lift, accent-tinted border, arrow slide.
   Deeper shadow + inset accent ring on hover gives each card a
   "comes forward" feel; the inset is the same accent at 40%
   opacity so it reads as a colored highlight, not a generic glow. */
.pillar:hover,
.pillar:focus-visible,
.pillar.is-active {
  transform: translateY(-6px);
  border-color: var(--pillar-accent-soft);
  box-shadow:
    0 28px 60px -24px var(--pillar-accent-glow),
    0 8px 24px -12px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px color-mix(in srgb, var(--pillar-accent) 18%, transparent);
  outline: none;
}
[data-theme="light"] .pillar:hover,
[data-theme="light"] .pillar:focus-visible,
[data-theme="light"] .pillar.is-active {
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.04),
    0 28px 60px -26px color-mix(in srgb, var(--pillar-accent) 50%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--pillar-accent) 22%, transparent);
}

.pillar:hover .pillar__thumb img,
.pillar:focus-visible .pillar__thumb img,
.pillar.is-active .pillar__thumb img {
  transform: scale(1.06);
}

.pillar:hover .pillar__arrow,
.pillar:focus-visible .pillar__arrow,
.pillar.is-active .pillar__arrow {
  color: var(--pillar-accent);
  opacity: 1;
  transform: translateX(4px);
  background: color-mix(in srgb, var(--pillar-accent) 12%, transparent);
}

/* Sibling dim — kept so the active card commands attention, but
   the un-hovered cards still show everything (no content hiding). */
@supports selector(:has(*)) {
  .pillars-grid:has(.pillar:hover) .pillar:not(:hover),
  .pillars-grid:has(.pillar:focus-visible) .pillar:not(:focus-visible) {
    opacity: 0.7;
  }
}
.pillars-grid.is-dim-others .pillar:not(.is-active) {
  opacity: 0.7;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
  .pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
}

/* Dots + swipe hint default hidden — only the carousel viewport surfaces them */
.pillars-dots,
.pillars-swipe-hint { display: none; }

/* =============================================
   PILLARS CAROUSEL (mobile only, ≤768px)
   Same snap-scroll pattern as .plans-grid so the
   four cards compress into one focused viewport
   instead of stacking four screen-heights tall.
   ============================================= */
@media (max-width: 768px) {
  .pillars-grid {
    display: flex;
    grid-template-columns: unset;
    gap: var(--space-4);
    max-width: none;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-inline: 50%;
    padding: 20px max(8vw, 24px) 32px;
    margin-inline: calc(-1 * var(--space-4));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    perspective: 1200px;
  }
  .pillars-grid::-webkit-scrollbar { display: none; }

  .pillars-grid > .pillar {
    flex: 0 0 82%;
    max-width: 360px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform: scale(0.92);
    opacity: 0.55;
    transition:
      transform 0.45s var(--ease-out),
      opacity 0.35s var(--ease),
      box-shadow 0.35s var(--ease);
    will-change: transform, opacity;
  }
  .pillars-grid > .pillar.is-centered {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 0 0 1px var(--accent-green);
    z-index: 1;
  }
  /* The centered card already gets a ring — suppress the :has() dim rule so
     it doesn't double-fight with the scroll-snap focus */
  .pillars-grid:has(.pillar:hover) .pillar:not(:hover),
  .pillars-grid:has(.pillar:focus-visible) .pillar:not(:focus-visible),
  .pillars-grid.is-dim-others .pillar:not(.is-active) { opacity: inherit; }

  /* Thumbnail keeps 16:9 on mobile — single-column cards don't need the 3:2 */
  .pillar__thumb { aspect-ratio: 16 / 9; }

  /* Dots below the carousel — same visual system as .plans-dots */
  .pillars-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: var(--space-3);
  }
  .pillars-dots__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-soft);
    border: none;
    padding: 0;
    cursor: pointer;
    transition:
      width var(--dur-fast) var(--ease),
      background var(--dur-fast) var(--ease),
      transform var(--dur-fast) var(--ease);
  }
  .pillars-dots__dot.is-active {
    width: 26px;
    border-radius: 999px;
    background: var(--accent-green);
    transform: none;
  }
  .pillars-dots__dot:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .pillars-swipe-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-2);
    font-size: 12px;
    color: var(--text-tertiary);
    transition: opacity var(--dur-base) var(--ease);
  }
  .pillars-swipe-hint.is-hidden { opacity: 0; pointer-events: none; }
}

@media (max-width: 480px) {
  .pillars-grid {
    margin-inline: -14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lock-demo,
  .value-prop__item,
  .pillars .pillar {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .section.cv-auto::after {
    transform: translateX(-50%);
  }

  .lock-player::after {
    display: none;
  }

  .pillars-grid { scroll-behavior: auto; }
  .pillars-grid > .pillar { transition: none; }
}

/* --- REDUCED MOTION / REDUCED DATA --- */
@media (prefers-reduced-motion: reduce) {
  .pillar,
  .pillar__thumb img,
  .pillar__arrow {
    transition: none !important;
  }
  .pillar:hover,
  .pillar:focus-visible,
  .pillar.is-active { transform: none; }
  .pillar:hover .pillar__thumb img,
  .pillar:focus-visible .pillar__thumb img,
  .pillar.is-active .pillar__thumb img { transform: none; }
  .pillar:hover .pillar__arrow,
  .pillar:focus-visible .pillar__arrow,
  .pillar.is-active .pillar__arrow { transform: none; }
}
@media (prefers-reduced-data: reduce) {
  .pillar__thumb img { display: none; }
}

/* =============================================
   STICKY-PINNED MANIFESTO
   Outer section gives the paragraph one fullscreen
   sticky reveal beat. The inner sticky child holds
   the paragraph centered while JS maps pin progress
   to sequential `.is-lit` words.
   ============================================= */
.scroll-manifesto {
  --manifesto-block-padding: var(--space-8);
  /* Keep the fullscreen reading beat, but remove the long empty hold before
     and after the paragraph. */
  height: calc(132vh + (var(--manifesto-block-padding) * 2));
  padding-block: var(--manifesto-block-padding);
  position: relative;
  background: transparent;
}
.scroll-manifesto__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  padding: calc(var(--space-6) + 56px) var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.scroll-manifesto__text {
  max-width: 980px;
  margin: 0 auto;
  font-family: var(--font-heading);
  font-size: 44px;
  line-height: 1.16;
  letter-spacing: 0;
  font-weight: 600;
  text-align: center;
  text-wrap: balance;
  /* `contain: paint` isolates the repaint when individual
     words change color so the rest of the section never has
     to repaint with them. Avoiding `layout`/`style` here —
     they can subtly interact with sticky positioning in
     some Chromium builds. */
  contain: paint;
}
.scroll-manifesto__word {
  display: inline-block;
  color: rgba(255, 255, 255, 0.46);
  /* Subtle 90ms transition smooths the snap without the
     paint storm of the original 120ms. Short enough that it
     feels tied to scroll, long enough to mask sub-pixel
     scroll oscillations from trackpad inertia. */
  transition: color 0.09s linear, text-shadow 0.18s ease-out;
}
[data-theme="light"] .scroll-manifesto__word {
  color: rgba(25, 20, 15, 0.52);
}
.scroll-manifesto__word.is-lit {
  color: var(--text-primary);
}
/* Reading-torch: the word that *just* lit gets a soft glow,
   then fades back to plain text as the next word lights.
   Adds rhythm to the reveal — your eye follows the highlight
   instead of seeing all-lit-text-up-to-here as one block. */
.scroll-manifesto__word.is-current {
  text-shadow: 0 0 18px rgba(52, 211, 153, 0.45);
}
[data-theme="light"] .scroll-manifesto__word.is-current {
  text-shadow: 0 0 14px rgba(20, 140, 100, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-manifesto__word.is-current { text-shadow: none; }
}

/* Reduced motion: snap straight to "all lit" so
   the copy reads as a normal paragraph. */
@media (prefers-reduced-motion: reduce) {
  .scroll-manifesto {
    min-height: 100svh;
    height: auto;
    padding-block: var(--space-24);
    display: flex;
    align-items: center;
  }
  .scroll-manifesto__sticky {
    position: static;
    height: auto;
    padding: 0 var(--space-4);
  }
  .scroll-manifesto__word {
    color: var(--text-primary);
  }
}

@media (max-width: 1024px) {
  .scroll-manifesto__text {
    max-width: 820px;
    font-size: 36px;
    line-height: 1.18;
  }
}

/* Mobile: keep the same fullscreen behavior with a shorter,
   still deliberate pin distance. */
@media (max-width: 768px) {
  .scroll-manifesto {
    --manifesto-block-padding: var(--space-6);
    height: calc(124vh + (var(--manifesto-block-padding) * 2));
  }
  .scroll-manifesto__sticky {
    padding: calc(var(--space-6) + 56px) var(--space-4) var(--space-6);
  }
  .scroll-manifesto__text {
    font-size: 28px;
    line-height: 1.22;
  }
  .scroll-manifesto__word {
    transition: color 0.08s linear;
  }
  .scroll-manifesto__word.is-current {
    text-shadow: none;
  }
}

@media (max-width: 480px) {
  .scroll-manifesto__text {
    font-size: 24px;
  }
}

/* =============================================
   AURORA REVEAL
   Sticky-pinned brand beat in the middle of the
   homepage. The outer section is tall enough
   so the inner sticky child stays pinned for
   plenty of scroll. The full image holds first;
   as the user scrolls, the title contracts from
   oversized black type into a readable image mask.
   After the title settles back down, the subtitle fades in beneath it. JS writes a
   few CSS variables so browser engines follow the
   same scroll path. Reduced-motion users skip
   straight to the final state.
   ============================================= */
.aurora-reveal {
  position: relative;
  --aurora-fade: 0;
  --aurora-bg-fade: 0;
  --aurora-subtitle: 0;
  --aurora-black: 0;
  --aurora-color-fill: 0;
  /* JS writes a bounded scale here directly. Keep this conservative so the
     text mask never becomes a giant GPU texture that clips mid-scroll. */
  --aurora-scale: 0.86;
  /* Sit above the body's ambient aurora layer
     (which uses z-index: 0) so the bg image is
     fully visible, not tinted by it. */
  z-index: 1;
  height: 190vh;
  background: #000;
  /* image-set() lets browsers pick the smaller WebP
     (~83 KB) and fall back to a progressive JPEG
     (~167 KB) for the rare browser without WebP.
     The full-resolution PNG (~1.8 MB) lives on under
     /press for the press kit but isn't shipped here. */
  --aurora-reveal-img: image-set(
    url('/assets/screenshots/image.webp') type('image/webp'),
    url('/assets/screenshots/image.jpg') type('image/jpeg')
  );
}
.aurora-reveal__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background: #000;
}
.aurora-reveal__bg {
  position: absolute;
  inset: 0;
  background-image: var(--aurora-reveal-img);
  background-size: cover;
  background-position: center;
  background-color: #000;
  background-repeat: no-repeat;
  z-index: 0;
  transform: translateZ(0);
  opacity: calc(1 - var(--aurora-bg-fade, 0));
  contain: strict;
}
.aurora-reveal__bg.is-hidden {
  visibility: hidden;
}
/* Keep the reveal paint path simple: the full-bleed image fades under a
   solid black plate, avoiding mask/matte redraws on first scroll. */
.aurora-reveal__sticky::before,
.aurora-reveal__sticky::after {
  content: none;
}
/* Solid black plate. It rises while the screenshot fades away, so the
   section ends on real black while the word keeps its image-filled clip. */
.aurora-reveal__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  pointer-events: none;
  opacity: var(--aurora-black, 0);
}
.aurora-reveal__content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 var(--space-6);
  width: 100%;
  pointer-events: none;
}

.aurora-reveal__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(128px, 19vw, 300px);
  line-height: 1;
  letter-spacing: 0;
  margin: 0;
  text-align: center;
  position: relative;
  background: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  transform-origin: center;
  /* Keep the scale pass transform-only; JS supplies the unitless value. */
  transform: translate3d(0, 0, 0) scale3d(var(--aurora-scale, 0.8), var(--aurora-scale, 0.8), 1);
  opacity: var(--aurora-fade, 1);
  backface-visibility: hidden;
}

.aurora-reveal__title::before,
.aurora-reveal__title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: block;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  pointer-events: none;
  backface-visibility: hidden;
}

.aurora-reveal__title::before {
  color: #050505;
  -webkit-text-fill-color: #050505;
  opacity: calc(1 - var(--aurora-color-fill, 0));
  text-shadow: none;
}

.aurora-reveal__title:not(.has-image-fill)::after {
  content: none;
}

.aurora-reveal__title.is-image-fill-complete::before {
  content: none;
}

.aurora-reveal__title::after {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: var(--aurora-reveal-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: var(--aurora-color-fill, 0);
  filter: none;
  text-shadow: none;
}

.aurora-reveal__subtitle {
  margin: 0 auto;
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.92);
  margin-top: clamp(16px, 3vh, 36px);
  opacity: var(--aurora-subtitle, 0);
  transform: translateY(calc(14px * (1 - var(--aurora-subtitle, 0))));
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

.aurora-reveal.is-prearmed .aurora-reveal__bg,
.aurora-reveal.is-prearmed .aurora-reveal__overlay,
.aurora-reveal.is-prearmed .aurora-reveal__title::after {
  will-change: opacity;
}

.aurora-reveal.is-animating .aurora-reveal__title {
  will-change: opacity;
}

.aurora-reveal.is-transform-promoted .aurora-reveal__title {
  will-change: transform, opacity;
}

.aurora-reveal.is-animating .aurora-reveal__subtitle {
  will-change: opacity, transform;
}

.aurora-reveal.is-after-reveal .aurora-reveal__sticky {
  background: #000;
}

/* JS drives the reveal custom properties across scroll windows. The opening
   scale is calculated from the word's real bounds and the viewport, so the
   mask beat starts far beyond desktop and phone screens. */
/* Reduced motion: snap to the final readable state.
   Vars set as if scroll-pass = 100%. */
@media (prefers-reduced-motion: reduce) {
  .aurora-reveal {
    min-height: 100vh;
    height: auto;
    --aurora-fade: 1;
    --aurora-bg-fade: 1;
    --aurora-subtitle: 1;
    --aurora-black: 1;
    --aurora-color-fill: 1;
    --aurora-scale: 0.86;
  }
  .aurora-reveal__title::before {
    content: none;
  }
  .aurora-reveal__title::after {
    content: attr(data-text);
  }
}

@media (max-width: 1120px) {
  .aurora-reveal__title {
    font-size: clamp(118px, 22vw, 260px);
  }
}

/* Mobile: keep the letters feeling full-screen without asking the browser
   to rasterize quite such a large transformed text layer on scroll. */
@media (max-width: 768px) {
  .aurora-reveal {
    height: 170vh;
    --aurora-scale: 0.9;
  }
  .aurora-reveal__title {
    font-size: clamp(92px, 30vw, 136px);
    transform: translate3d(0, 0, 0) scale3d(var(--aurora-scale, 0.9), var(--aurora-scale, 0.9), 1);
  }
  .aurora-reveal__title::before {
    text-shadow: none;
  }
  .aurora-reveal__subtitle {
    font-size: 17px;
  }
}

@media (max-width: 420px) {
  .aurora-reveal__title {
    font-size: clamp(84px, 29vw, 124px);
  }
}