/* Brand tokens mirror panel/com.tim.gpudog/redesign-prototype.html so the
   site and the plugin feel like one product. Any change here should be
   echoed there (and vice versa). */
:root {
  --bg-0:     #0c0c0d;
  --bg-1:     #131315;
  --bg-2:     #1a1a1d;
  --bg-3:     #222226;
  --bg-4:     #2a2a2f;

  --border-1: #232327;
  --border-2: #33333a;

  --txt-0:    #ececec;
  --txt-1:    #a2a2a8;
  --txt-2:    #66666c;
  --txt-3:    #444448;

  --acc:      #6fcf80;
  --acc-dim:  rgba(111, 207, 128, .12);
  --acc-glow: rgba(111, 207, 128, .32);

  --warn:     #c8953a;
  --warn-dim: rgba(200, 149, 58, .14);
  --warn-glow:rgba(200, 149, 58, .45);

  --info:     #5aa9e6;
  --info-dim: rgba(90, 169, 230, .14);

  --err:      #e06262;
  --err-dim:  rgba(224, 98, 98, .14);

  --radius:   6px;
  --radius-lg: 14px;

  --easing:   cubic-bezier(.2,.7,.2,1);
  --sans:     -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --mono:     "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--txt-0);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--txt-1); text-decoration: none; }
a:hover { color: var(--txt-0); }

h1, h2, h3 { margin: 0 0 12px; font-weight: 600; letter-spacing: 0; }
h2 { font-size: 28px; }
h3 { font-size: 18px; }

/* Accessibility helper - visually hides the text while keeping it
   available for screen readers. Used to back up the image-based logo. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Site nav — solid bg; no backdrop-filter (blur caused noticeable paint
   cost on scroll). */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 32px;
  background: var(--bg-0);
  border-bottom: 1px solid var(--border-1);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-icon {
  height: 32px;
  width: auto;
  display: block;
}
.brand-text {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0;
  /* Warm cream - tone-matched to the GPU lettering in the hero logo
     so the nav wordmark reads as the same family. */
  color: #f0e5c4;
}
.brand-text-accent {
  color: var(--warn);
  font-style: italic;
  font-weight: 700;
  margin-left: 1px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}
.nav-links a.cta-link {
  color: var(--bg-0);
  background: var(--warn);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-weight: 600;
  transition: background .15s, transform .08s;
}
.nav-links a.cta-link:hover { background: #d9a04a; }

/* Hero
   Star-field photograph as hero background. A radial vignette darkens
   the edges so the nav + tagline + CTAs stay readable against the
   brightest parts of the sky. A subtle warm radial glow behind the
   logo ties the hero back to the amber brand accent. */
.hero {
  position: relative;
  padding: 78px 32px 72px;
  text-align: center;
  background: var(--bg-0);
  border-bottom: 1px solid var(--border-1);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("assets/stars.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.9;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(200,149,58,.12), transparent 45%),
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(13,13,13,.7) 80%);
}
.hero-inner { max-width: 880px; margin: 0 auto; }

.hero-title {
  margin: 0;
  line-height: 0;
}
.hero-logo-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.hero-logo {
  width: min(620px, 82vw);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 4px 32px rgba(0,0,0,.6));
}

/* Animated sparkle over the letter U in the logo word-mark. Position is
   in % of the wrap so it stays locked to the logo whatever its rendered
   size. Two animations combined: a linear rotate and a softer pulse on
   opacity/filter - split because transform is driven by spin alone. */
.hero-sparkle {
  position: absolute;
  width: 8%;
  aspect-ratio: 1;
  left: 58%;
  top: 22%;
  z-index: 2;
  pointer-events: none;
  transform-origin: center;
  /* Screen blend keeps the sparkle reading as an additive light source
     whether it sits over transparent pixels or the cream letter body. */
  mix-blend-mode: screen;
  animation:
    hero-sparkle-spin 7s linear infinite,
    hero-sparkle-pulse 2.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 14px rgba(255, 230, 160, 1));
  will-change: transform, opacity, filter;
}
@keyframes hero-sparkle-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes hero-sparkle-pulse {
  from {
    opacity: 0.55;
    filter: drop-shadow(0 0 6px rgba(255, 220, 140, 0.55));
  }
  to {
    opacity: 1;
    filter: drop-shadow(0 0 22px rgba(255, 230, 160, 1));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sparkle { animation: none; opacity: 0.85; }
}
.hero-tagline {
  font-size: 16px;
  color: var(--txt-1);
  margin: 24px 0 0;
  font-family: var(--mono);
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
.hero-sub {
  font-size: 16px;
  color: var(--txt-1);
  max-width: 560px;
  margin: 20px auto 0;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.hero-sub span { color: var(--txt-0); font-weight: 600; }
.hero-ctas {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-meta {
  margin-top: 32px;
  font-size: 12px;
  color: var(--txt-2);
  font-family: var(--mono);
  letter-spacing: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.hero-meta span { color: var(--txt-1); }

.featured-reel {
  position: relative;
  width: 100%;
  padding: 40px 0 48px;
  background: var(--bg-0);
  border-bottom: 1px solid var(--border-1);
  overflow: hidden;
}
.featured-reel-head {
  max-width: 1280px;
  margin: 0 auto 20px;
  padding: 0 32px;
}
.featured-reel-label {
  display: inline-block;
  color: var(--txt-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.featured-reel-track-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.featured-reel-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  will-change: transform;
  animation: featured-reel-scroll 60s linear infinite;
}
@keyframes featured-reel-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.featured-reel-track-wrap:hover .featured-reel-track { animation-play-state: paused; }
.featured-reel-card {
  flex: 0 0 auto;
  width: 320px;
  height: 320px;
  display: block;
  object-fit: cover;
  background: var(--bg-2);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  transition: background .15s, border-color .15s, color .15s, transform .08s;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--warn);
  color: var(--bg-0);
}
.btn-primary:hover { background: #d9a04a; color: var(--bg-0); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  color: var(--txt-1);
  border-color: var(--border-2);
}
.btn-ghost:hover { border-color: var(--txt-2); color: var(--txt-0); }
.btn-full { display: block; text-align: center; margin-top: 20px; }

/* Gallery */
.gallery {
  padding: 56px 32px 96px;
  max-width: 1280px;
  margin: 0 auto;
}
.gallery-head { margin-bottom: 40px; text-align: center; }
.gallery-head p {
  color: var(--txt-2);
  max-width: 540px;
  margin: 0 auto 28px;
  font-size: 15px;
}
.gallery-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
#search {
  width: 100%;
  max-width: 420px;
  padding: 9px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius);
  color: var(--txt-0);
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
  transition: border-color .15s, background .15s;
}
#search::placeholder { color: var(--txt-2); }
#search:focus { border-color: var(--border-2); background: var(--bg-3); }

/* Filter chips — mirrors panel/com.tim.gpudog/redesign-prototype.html:
   mono uppercase, 999px radius, tier variants get a coloured dot. Sized
   up vs. the panel version because the site has more horizontal room. */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  align-items: center;
}
.filter-pill {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--txt-1);
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color .15s var(--easing),
              background .15s var(--easing),
              border-color .15s var(--easing);
}
.filter-pill:hover { color: var(--txt-0); border-color: var(--border-2); }
.filter-pill.active {
  color: var(--acc);
  background: var(--acc-dim);
  border-color: var(--acc-glow);
}
/* "All" pill tints neutral instead of acc so it doesn't compete with
   tier chips. */
.filter-pill.all.active {
  color: var(--txt-0);
  background: var(--bg-4);
  border-color: var(--border-2);
}

/* Tier chips — coloured dot signals they filter by tier rather than
   category. Active state tints the whole chip to the dot's colour. */
.chip-tier .chip-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.filter-pill.tier-free .chip-dot { background: var(--acc); }
.filter-pill.tier-pro  .chip-dot { background: var(--warn); }
/* Rainbow dot ties the chip back to the .is-new ring on the cards.
   Same hue-rotate animation runs here so the chip "matches" what it
   filters — visually the dot pulses through the same colour cycle. */
.filter-pill.tier-new .chip-dot {
  background: linear-gradient(135deg, #6fcf80, #5aa9e6, #c973e0, #c8953a, #6fcf80);
  animation: card-new-hue 6s linear infinite;
}

.filter-pill.tier-free.active {
  color: var(--acc);
  background: var(--acc-dim);
  border-color: var(--acc-glow);
}
.filter-pill.tier-pro.active {
  color: var(--warn);
  background: var(--warn-dim);
  border-color: var(--warn-glow);
}
.filter-pill.tier-new.active {
  color: #c973e0;
  background: rgba(201,115,224,.12);
  border-color: rgba(201,115,224,.4);
}

.chip-divider {
  width: 1px;
  height: 20px;
  background: var(--border-2);
  flex-shrink: 0;
  margin: 0 4px;
}

.gallery-body {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.gallery-loading {
  color: var(--txt-3);
  text-align: center;
  padding: 80px 0;
  font-family: var(--mono);
  font-size: 13px;
}

.category {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Section head — mirrors the panel's `.section-head`: mono uppercase
   label, count on the right, growing hairline in the middle. */
.category-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0 10px;
  color: var(--txt-2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.category-head .grow {
  flex: 1;
  height: 1px;
  background: var(--border-1);
}
.category-count {
  color: var(--txt-1);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

/* Card — structure and hover behaviour mirror the panel redesign:
   idle state is a flat tile, hover zooms the thumb (GPU-only transform)
   and swaps the name for a 2-line description overlay. No backdrop-filter
   anywhere in the card stack; blur caused visible paint lag on scroll. */
.card {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform .18s var(--easing),
    border-color .15s,
    box-shadow .2s;
}
.card:hover {
  transform: translateY(-1px);
  border-color: var(--border-2);
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.card:active { transform: translateY(0); }

.card-thumb {
  position: absolute;
  inset: 0;
  background: #0a0a0c;
  background-size: cover;
  background-position: center;
  transition: transform .18s var(--easing);
  transform-origin: center center;
  /* Promote to a GPU layer up-front so the first hover doesn't pay the
     "create composited layer" cost (~50-150 ms lag on first interaction). */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.card:hover .card-thumb { transform: scale(1.12); }
.card:active .card-thumb { transform: scale(1.08); transition-duration: .08s; }

/* Scrim on the thumb itself so it scales with the hover zoom (no hard
   edge popping against the card border). */
.card-thumb::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.35) 55%,
    transparent 100%
  );
  pointer-events: none;
}

/* Hover-preview video. Sits ON TOP of .card-thumb so the static poster
   is the resting visual and the video only fades in once the user hovers
   and the browser has actually pulled enough bytes to start playback.
   Same scale-on-hover transform as .card-thumb so the two stay locked
   together when the card zooms. */
.card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s var(--easing), transform .18s var(--easing);
  transform-origin: center center;
  will-change: opacity, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.card:hover .card-video { opacity: 1; }
.card:hover .card-video,
.card:active .card-video { transform: scale(1.12) translateZ(0); }
.card:active .card-video { transform: scale(1.08) translateZ(0); transition-duration: .08s; }

/* Loader spinner overlay. Toggled by attachVideoHover via .is-loading-video
   on the parent .card; visible only while the user is hovering AND the
   <video> hasn't yet fired canplay. Sits below the badges (z-index < 2)
   but above the video/thumb. Pure CSS spinner so it costs nothing to
   instantiate. */
.card-video-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: rgba(255,255,255,.85);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease-out;
  z-index: 1;
}
.card.is-loading-video .card-video-loader {
  opacity: 1;
  animation: card-video-spin .9s linear infinite;
}
@keyframes card-video-spin {
  to { transform: rotate(360deg); }
}

.card-thumb.missing {
  background: #292e34;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.card-name {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--txt-0);
  text-shadow: 0 1px 4px rgba(0,0,0,.85);
  letter-spacing: 0;
  line-height: 1.2;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .18s;
  /* Soft right-edge fade instead of hard ellipsis. */
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}
.card:hover .card-name { opacity: 0.15; }

/* Hover description — container flex-aligns the child to the bottom so
   short descriptions sit above the card edge instead of clinging to the
   top. Line-clamp is on the child <span> because Chrome drops
   `-webkit-box` to `flow-root` on an absolute + inset:0 element, which
   silently breaks the clamp. */
.card-desc {
  position: absolute;
  inset: 0;
  padding: 12px 12px 14px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.10),
    rgba(0,0,0,.25) 45%,
    rgba(0,0,0,.95)
  );
  color: var(--txt-0);
  font-size: 11px;
  line-height: 1.42;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.card-desc > span {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  width: 100%;
}
.card:hover .card-desc { opacity: 1; transform: translateY(0); }
.card-desc:empty { display: none; }

/* Badges */
.badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 3px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,.55);
  z-index: 2;
}
.badge-free {
  color: var(--acc);
  border: 1px solid var(--acc-glow);
  background: rgba(30, 60, 40, .55);
}
.badge-pro {
  color: var(--warn);
  border: 1px solid rgba(200,149,58,.5);
  background: rgba(50, 40, 20, .55);
}

/* NEW marker — rainbow ring + corner ribbon. Set on cards whose
   `published_at` (from kennel manifest, written by `xtask deploy`) is
   within the last NEW_WINDOW_DAYS.

   The ring lives on a `::before` pseudo so we can apply
   `filter: hue-rotate` to it WITHOUT tinting the card content (name,
   desc, badge would all turn rainbow too if the filter sat on the
   card itself). The mask-composite trick punches a hole through the
   pseudo's interior so only the 1px outline shows.
   `linear-gradient` + `hue-rotate(0→360deg)` loops perfectly because
   filter is a pure colour transform — no tile-edge seam like the
   previous background-position approach had. */
.card.is-new {
  /* Soft halo so the ring reads on dark thumbnails. */
  box-shadow: 0 0 0 1px rgba(111,207,128,.2), 0 0 14px rgba(90,169,230,.18);
}
.card.is-new::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #6fcf80, #5aa9e6, #c973e0, #c8953a, #6fcf80);
  /* Mask-composite cutout: render a full-size box, then subtract the
     padding-box rectangle so only the 1px ring remains visible. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
  animation: card-new-hue 6s linear infinite;
}
@keyframes card-new-hue {
  to { filter: hue-rotate(360deg); }
}
.card.is-new:hover::before { animation-play-state: paused; }
.card .new-ribbon {
  position: absolute;
  bottom: 8px;
  right: -22px;
  width: 80px;
  background: var(--acc, #6fcf80);
  color: #082010;
  font: 800 8.5px/1 var(--mono);
  letter-spacing: 0;
  text-align: center;
  padding: 3px 0;
  transform: rotate(-45deg);
  box-shadow: 0 1px 6px rgba(0,0,0,.5);
  z-index: 6;
  pointer-events: none;
}
/* Crown glyph — copied from panel/com.tim.gpudog/lib/redesign/crown.svg
   with the gold gradient stripped so it inherits `currentColor` from
   whatever container it sits in (PRO badge, Pro plan card, etc.). */
.crown-icon {
  width: 14px;
  height: 10px;
  display: block;
  flex-shrink: 0;
}

.empty-state {
  color: var(--txt-3);
  text-align: center;
  padding: 60px 0;
  font-family: var(--mono);
  font-size: 13px;
}

/* Pricing */
.pricing {
  padding: 96px 32px;
  text-align: center;
  background: var(--bg-1);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}
.pricing-sub {
  color: var(--txt-2);
  max-width: 520px;
  margin: 0 auto 48px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  gap: 20px;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}
.plan {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: left;
}
.plan-pro {
  border-color: rgba(200,149,58,.35);
  box-shadow: 0 0 0 1px rgba(200,149,58,.15), 0 8px 32px rgba(200,149,58,.08);
}
.plan-crown {
  position: absolute;
  top: -14px;
  right: 28px;
  width: 28px;
  height: 28px;
  background: var(--warn);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-0);
}
.plan-crown-svg {
  width: 16px;
  height: 12px;
  display: block;
}
.plan-price {
  font-size: 40px;
  font-weight: 700;
  color: var(--txt-0);
  margin: 8px 0 20px;
  letter-spacing: 0;
}
.plan-price span { font-size: 24px; color: var(--txt-2); }
.plan-price .plan-per {
  font-size: 13px;
  color: var(--txt-2);
  font-weight: 400;
  margin-left: 6px;
}
/* Secondary price line on the Pro plan - sits under the headline
   "$99 one-time" to surface the monthly alternative without
   competing for visual weight. */
.plan-price-alt {
  margin: -14px 0 18px;
  font-size: 14px;
  color: var(--txt-1);
  font-weight: 400;
}
.plan-price-alt strong {
  color: var(--txt-0);
  font-weight: 600;
}
.plan-price-alt .plan-per-alt {
  color: var(--txt-2);
  margin-left: 2px;
}
.plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0;
  color: var(--txt-1);
  font-size: 14px;
}
.plan ul li {
  padding: 8px 0;
  border-top: 1px solid var(--border-1);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.plan ul li:first-child { border-top: 0; }
.plan ul li .check {
  color: var(--acc);
  font-weight: 700;
  font-family: var(--mono);
  width: 14px;
  flex-shrink: 0;
}
.plan ul li .check.pro { color: var(--warn); }
.plan ul li .check.dim { color: var(--txt-3); }

/* FAQ */
.faq {
  padding: 96px 32px;
  max-width: 780px;
  margin: 0 auto;
}
.faq h2 { text-align: center; margin-bottom: 40px; }
.faq dl { margin: 0; }
.faq dt {
  font-weight: 600;
  color: var(--txt-0);
  margin: 24px 0 6px;
  font-size: 15px;
}
.faq dt:first-child { margin-top: 0; }
.faq dd {
  margin: 0;
  color: var(--txt-2);
  font-size: 14.5px;
}

/* Footer */
.site-footer {
  padding: 32px;
  border-top: 1px solid var(--border-1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--txt-3);
}
.footer-brand { color: var(--warn); font-weight: 600; }
.footer-muted { margin-left: 8px; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--txt-2); }
.footer-links a:hover { color: var(--txt-0); }

/* Mobile */
@media (max-width: 680px) {
  .site-nav { padding: 12px 20px; }
  .nav-links { gap: 16px; font-size: 13px; }
  .nav-links a:not(.cta-link) { display: none; }
  .hero { padding: 80px 20px 64px; }
  .hero-tagline { font-size: 14px; }
  .featured-reel { padding: 32px 0 40px; }
  .featured-reel-head { padding: 0 20px; margin-bottom: 16px; }
  .featured-reel-card {
    width: 200px;
    height: 200px;
  }
  .gallery { padding: 56px 20px 64px; }
  .pricing, .faq { padding: 64px 20px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .card-desc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .featured-reel-track { animation: none; }
}