/* ═══════════════════════════════
   SoW Generator — standalone page
   Runs on the SAME fixed-panel engine as the homepage (arrows, dots, one
   screen at a time, no scrollbar) rather than a conventional scroll-down
   page — deliberately not the generic top-to-bottom SaaS template.
   Extends style.css: .panels/.panel/.panel-box/.nav-arrow/.panel-dot/
   .cta-bulb/.panel--cta all come from there, unmodified.

   PALETTE OVERRIDE: Simon wants this page brighter and happier than the
   homepage's dark cinematic look, not a match for it. Every shared
   component (buttons, panel-box, pricing cards, feature cards...) is
   already built on these custom properties, so redefining them here flips
   the whole page from dark to a warm, light theme without rewriting each
   component. Note --cream now holds a DARK colour (it's the primary TEXT
   token, not literally "cream") — same names, flipped meaning, on purpose.
═══════════════════════════════ */
:root {
  --bg: #FFF6E9;
  --cream: #2E2013;
  --cream-dim: rgba(46,32,19,0.7);
  --cream-faint: rgba(46,32,19,0.42);
  --gold: #F2994A;
  --gold-dim: rgba(242,153,74,0.16);
  --gold-border: rgba(242,153,74,0.45);
  --glass: rgba(255,255,255,0.78);
  --glass-border: rgba(46,32,19,0.12);
}

/* ── NAV (fixed, like the homepage's own) ── */
.sow-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: 1.1rem 1.25rem;
  pointer-events: none;
}
.sow-nav .nav-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 1100px;
  width: 100%;
  height: 56px;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.sow-wordmark {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--cream);
  flex: 1;
  padding-left: 0.5rem;
}
.sow-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  background: var(--gold);
  color: #0a0a10;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.2s;
}
.sow-nav .nav-cta:hover { opacity: 0.88; transform: scale(1.04); }
.nav-mute {
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 0.95rem;
  color: var(--cream-dim);
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.nav-mute:hover { background: var(--gold-dim); color: var(--cream); }
.nav-mute[aria-pressed="true"] { color: var(--gold); }

/* ── SPLASH HERO PANEL ── */
.panel--video { padding: 0; }
.splash-video, .splash-scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.splash-video { object-fit: cover; }
.splash-scrim { background: linear-gradient(180deg, rgba(5,6,10,0.5) 0%, rgba(5,6,10,0.1) 45%, rgba(5,6,10,0.8) 100%); }
.splash-captions { position: absolute; left: 0; right: 0; bottom: 12%; padding: 0 1.5rem; text-align: center; }
.splash-caption {
  /* Always light text: this sits over the video + dark scrim, not the page
     background, so it stays legible regardless of the page's own theme. */
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0 auto;
  max-width: 620px;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.9), 0 1px 4px rgba(0,0,0,0.95);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.splash-caption.is-active { opacity: 1; transform: translateY(0); }
.replay-btn {
  position: absolute;
  left: 50%; bottom: 6%;
  transform: translate(-50%, 6px);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: rgba(20,16,10,0.6);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s;
}
.replay-btn.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.replay-btn:hover { background: rgba(20,16,10,0.8); }

/* Points at the arrow once the video's had its one play-through, rather
   than looping forever and never nudging anyone onward. */
.nav-arrow.glow { animation: arrowGlow 1.8s ease-in-out infinite; }
@keyframes arrowGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,153,74,0.5); }
  50% { box-shadow: 0 0 0 10px rgba(242,153,74,0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-arrow.glow { animation: none; box-shadow: 0 0 0 4px rgba(242,153,74,0.35); }
}

/* ── PROOF (inside the standard glass panel-box) ── */
.sow-proof { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 2.5rem; align-items: center; }
.proof-number {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 0.9;
  color: var(--gold);
  margin-bottom: 0.15rem;
}
.sow-lede { font-size: 0.9rem; color: var(--cream-dim); line-height: 1.7; margin: 0.4rem 0 1.1rem; }
.sow-lede--center { max-width: 520px; margin-left: auto; margin-right: auto; text-align: center; }
.proof-frame {
  position: relative;
  display: block;
  padding: 0;
  border-radius: 1rem;
  border: 1px solid var(--glass-border);
  overflow: hidden;
  cursor: zoom-in;
}
.proof-frame img { display: block; width: 100%; height: auto; }
.proof-frame-hint {
  /* Sits on top of the screenshot itself, not the page background, so it
     stays a dark badge with light text regardless of the page's own theme. */
  position: absolute;
  right: 0.75rem; bottom: 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  background: rgba(20,16,10,0.72);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}

@media (max-width: 760px) {
  .sow-proof { grid-template-columns: 1fr; }
}

/* ── FEATURES ── */
.feature-lead {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--glass-border);
}
.feature-lead-icon { width: 76px; flex-shrink: 0; filter: drop-shadow(0 0 24px rgba(200,133,42,0.4)); }
.feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.feature-item .feature-icon { font-size: 1.3rem; display: block; margin-bottom: 0.5rem; }
.feature-item h3 { font-family: var(--font-display); font-size: 0.94rem; font-weight: 700; color: var(--cream); margin-bottom: 0.35rem; }
.feature-item p { font-size: 0.78rem; color: var(--cream-dim); line-height: 1.55; }

@media (max-width: 760px) {
  .feature-lead { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .feature-row { grid-template-columns: 1fr; gap: 1rem; }
}

/* ── WALKTHROUGH CAROUSEL ──
   contain, not cover: the real screenshots range from wide (welcome
   screen) to tall (unit builder), and cover was cropping the tall ones
   badly to force them into one shape. contain always shows the whole
   image; the frame is sized generously so nothing feels small either. */
.carousel { margin-top: 1.25rem; max-width: 560px; }
.carousel-frame {
  position: relative;
  aspect-ratio: 5 / 6;
  max-height: 58vh;
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: rgba(0,0,0,0.04);
  cursor: zoom-in;
}
.carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; }
.carousel-slide.is-active { opacity: 1; }
.carousel-slide img { width: 100%; height: 100%; object-fit: contain; }
.carousel-arrow {
  /* On top of the screenshot itself, so it stays a dark control with light
     icon regardless of the page theme, same reasoning as proof-frame-hint. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(20,16,10,0.55);
  color: #fff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.carousel-arrow:hover { background: var(--gold-dim); border-color: var(--gold-border); }
.carousel-arrow--prev { left: 0.65rem; }
.carousel-arrow--next { right: 0.65rem; }
.carousel-caption { margin-top: 0.85rem; font-size: 0.85rem; color: var(--cream-dim); min-height: 1.4em; }
.carousel-dots { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.15); transition: background 0.2s, transform 0.2s; }
.carousel-dot.is-active { background: var(--gold); transform: scale(1.25); }

/* ── PRICING (4-up) ── */
.pricing-grid--four { grid-template-columns: repeat(4, 1fr); max-width: 1000px; }
.pricing-grid--four .pricing-card--featured { animation: none; box-shadow: 0 0 28px 4px rgba(232,160,32,0.15); }
.pricing-grid--four .pricing-card { padding: 1.1rem 1.1rem 1.25rem; }
.pricing-grid--four .plan-price { font-size: 1.9rem; }

@media (max-width: 900px) {
  .pricing-grid--four { grid-template-columns: repeat(2, 1fr); max-width: 500px; }
}
@media (max-width: 560px) {
  .pricing-grid--four { grid-template-columns: 1fr; max-width: 300px; }
  .sow-wordmark { font-size: 0.95rem; }
}

/* ── FINAL CTA — the real last frame of the robot video (Ed giving a
   thumbs up, both teachers happy) as a full-bleed photo background, not
   an isolated floating icon. Text sits over a bottom scrim so it's
   legible without hiding too much of the actual photo. ── */
.sow-final-photo { padding: 0; overflow: hidden; align-items: flex-end; justify-content: flex-start; }
.sow-final-photo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sow-final-photo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,8,4,0.82) 0%, rgba(10,8,4,0.35) 45%, rgba(10,8,4,0) 75%);
}
.sow-final-photo-content {
  position: relative;
  z-index: 1;
  padding: 2.5rem clamp(1.5rem, 6vw, 4rem);
  max-width: 560px;
}
.sow-final-photo-content h2,
.sow-final-photo-content p,
.sow-final-photo-content .btn-note,
.sow-final-photo-content .btn-note a { color: #fff; }
.sow-final-photo-content .btn-note a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 760px) {
  .sow-final-photo-content { text-align: center; margin: 0 auto; }
}

/* ── DISINTEGRATE TRANSITION (hero video → panel 1) ── */
.disintegrate-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  pointer-events: none;
}
.disintegrate-tile {
  position: absolute;
  background-repeat: no-repeat;
  will-change: transform, opacity;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
}

/* ── LIGHTBOX (zoom on real screenshots so the content is actually legible) ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(5,6,10,0.92);
  padding: 2rem;
}
.lightbox.is-open { display: flex; }
.lightbox-scroll {
  max-width: 92vw;
  max-height: 78vh;
  overflow: auto;
  border-radius: 0.5rem;
  border: 1px solid var(--glass-border);
}
.lightbox-scroll img {
  display: block;
  max-width: 92vw;
  height: auto;
  cursor: zoom-in;
}
.lightbox-scroll img.is-zoomed { max-width: none; width: auto; cursor: zoom-out; }
.lightbox-close {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--glass-border);
  color: var(--cream);
  font-size: 1.3rem;
  line-height: 1;
}
.lightbox-hint { margin-top: 0.9rem; font-size: 0.78rem; color: var(--cream-faint); }

@media (max-width: 600px) {
  .panel { padding: 3.5rem 1.25rem 4rem; }
}