/* ============================================================
   SNAPSHOT EDUCATIONAL SOLUTIONS — Commercial Website
   styles.css — v2 (split hero + card-scroll sections)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
p { margin: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Poppins', Arial, sans-serif;
  color: #1d1d1f;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  --blue:        #3D5367;   /* snapshotDarkBlue  */
  --blue-deep:   #2d3f4f;   /* darker shade for footers / nav */
  --blue-light:  #4e6478;   /* lighter shade for hover states */
  --yellow:      #EAD2A1;   /* snapshotDarkYellow */
  --white:       #ffffff;
  --grey-bg:     #F5F5F7;
  --grey-mid:    #6e6e73;
  --grey-dark:   #1d1d1f;
  --radius:      20px;
  --radius-sm:   12px;
  --section-h-pad: clamp(80px, 8vw, 220px);
  --content-max:   1600px;
  --transition:  0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-light);
  padding-left: 0.08em; /* compensate: letter-spacing adds space after each char but not before the first */
}

.hero-headline {
  font-size: clamp(52px, 5.5vw, 88px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--blue);
}

.section-title {
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--blue);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 50px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--blue);
  color: var(--white);   /* matches app: backgroundColor=snapshotDarkBlue, foregroundColor=white */
}
.btn-primary:hover {
  background: var(--blue-deep);
  box-shadow: 0 8px 30px rgba(61, 83, 103, 0.35);
}

.btn-ghost {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid rgba(61,83,103,0.28);
}
.btn-ghost:hover {
  background: rgba(61,83,103,0.06);
  border-color: var(--blue);
}

.btn-lg { padding: 18px 36px; font-size: 16px; }

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  /* Slim marketing-nav height — closer to industry standard (Stripe ~70px,
     Apple ~48px) so the ribbon doesn't dominate the top of the viewport. */
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), backdrop-filter var(--transition), box-shadow var(--transition);
}

.nav-inner {
  width: 100%;
  max-width: var(--content-max);
  padding: 0 var(--section-h-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav.scrolled {
  background: rgba(61, 83, 103, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo-img {
  /* Brand logo at 100px — extends ~14px below the 72px nav into the
     transparent area above content, no visible "overflow into chrome"
     since the unscrolled nav has no background. When the user scrolls
     past the hero, the nav goes solid and the logo overflow sits flush
     above the content (handled by hero padding-top + section
     scroll-margin-top below). */
  height: 100px;
  width: auto;
  display: block;
  transition: opacity 0.25s;
}

/* Links */
.nav-links {
  display: flex; align-items: center;
  gap: 36px; list-style: none;
}
.nav-links a {
  font-size: 14px; font-weight: 500;
  color: var(--blue);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--blue-deep); }
.nav.scrolled .nav-links a { color: rgba(255,255,255,0.72); }
.nav.scrolled .nav-links a:hover { color: #fff; }

/* CTA */
.nav-cta-btn {
  font-size: 14px;
  font-weight: 500;
  color: rgba(31,56,100,0.65);
  text-decoration: none;
  border-radius: 999px;
  padding: 8px 0;
  border: 2px solid transparent;
  background: transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s, padding 0.2s;
  white-space: nowrap;
}
.nav-cta-btn:hover { color: var(--blue); }

.nav.scrolled .nav-cta-btn {
  color: rgba(255,255,255,0.72);
  background: var(--blue);
  border-color: rgba(255,255,255,0.72);
  padding: 8px 20px;
}
.nav.scrolled .nav-cta-btn:hover {
  color: #fff;
  background: var(--blue-deep);
  border-color: #fff;
}

/* ============================================================
   SECTION 1 — HERO (split)
   ============================================================ */

.hero {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

/* Left panel — text */
.hero-left {
  background: var(--grey-bg);
  display: flex;
  flex-direction: column;
  /* "safe center" centres content vertically when it fits, but falls back
     to flex-start (top-aligned) when content would overflow — prevents the
     eyebrow being clipped at the top on shorter viewports where the hero
     overflow:hidden was eating the overflow. Supported in Chrome 93+ /
     Firefox 63+ / Safari 14+. */
  justify-content: safe center;
  /* Top padding clears the 72px nav PLUS the 100px logo's bottom overflow
     (~14px below the nav box) with a comfortable breathing margin. */
  padding: 116px var(--section-h-pad) 80px;
  gap: 0;
}

.hero-label {
  margin-bottom: 28px;
}

.hero-headline {
  margin-bottom: 28px;
}

.hero-sub {
  font-size: 20px;
  font-weight: 400;
  color: var(--grey-mid);
  line-height: 1.5;
  margin-bottom: 48px;
  max-width: 420px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-actions .btn-lg {
  min-width: 200px;
  text-align: center;
  justify-content: center;
}

/* Right panel — video.
   Background is white (matches the hero video's frames) so there's no
   grey-to-white flash while the video is loading. */
.hero-right {
  position: relative;
  background: #ffffff;
  overflow: hidden;
}

/* Mobile-only inline image — desktop uses .hero-right video instead.
   The mobile @media block at the bottom of this file flips it to display:block. */
.hero-mobile-media { display: none; }

/* Mobile-only flat carousels for the Why Snapshot section (option B).
   Desktop keeps the nested-pill pattern in .card-track-outer. The mobile
   @media block flips this to display:block. */
.why-mobile-carousels { display: none; }

/* Mobile-only product carousels (Option A — three stacked carousels).
   Mobile @media block flips this to display:block. */
.products-mobile-carousels { display: none; }

/* Desktop replacement for the legacy .product-card showcase. Three flat
   product carousels (one per product), built by buildDesktopProductCarousels.
   Hidden on mobile via the @media block at the bottom of the file. The
   legacy .product-card above is hidden on every viewport now. */
.product-showcase > .product-card { display: none; }
.products-desktop-carousels {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 0 var(--section-h-pad);
  max-width: var(--content-max);
  margin: 0 auto;
}

.product-desktop-section { position: relative; }

.product-desktop-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 18px;
  gap: 20px;
}

.product-desktop-section-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -0.02em;
  margin: 0;
}

.product-desktop-arrows { display: flex; gap: 8px; }

.product-desktop-arrow {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(61, 83, 103, 0.22);
  background: transparent;
  color: var(--blue);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.product-desktop-arrow:hover {
  background: rgba(61, 83, 103, 0.06);
  border-color: var(--blue);
}
.product-desktop-arrow:disabled { opacity: 0.35; cursor: default; }

.product-desktop-track-outer {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Match the track's left padding so scroll-snap lands the active card
     flush with the padded edge, not at scrollLeft=0 where the shadow
     would clip. */
  scroll-padding-left: 20px;
}
.product-desktop-track-outer::-webkit-scrollbar { display: none; }

.product-desktop-track {
  display: flex;
  gap: 24px;
  /* Horizontal padding so the card box-shadow has room to render on the
     left of the first card and right of the last card. The right side
     is roomier because when scrolled to the last card with snap-align:
     start the card's full body sits to the right of the snapport — the
     extra padding ensures shadow + rounded corner have visible space. */
  padding: 6px 48px 6px 20px;
}

/* Card chrome — sized so the panel layouts breathe but don't dwarf the
   content. Reduced ~15% from the original 580px to 493px because the
   intro / st4s / pricing / get-started layouts had visible empty space
   below the body copy. The features card variant keeps its own 680px
   lock further down (it's sized around the 14:9 video). */
.product-desktop-card {
  flex-shrink: 0;
  width: min(calc(100% - 6px), 1080px);
  min-height: 493px;
  background: #ffffff;
  border-radius: 22px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.10),
              0 0 0 1px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Intro card ── image left + body right.
   No align-self override — the card stretches to match the tallest
   sibling in its carousel (the Features card sets that height via
   its own height lock, which all other cards then follow). */
.product-desktop-card--intro .product-desktop-card-inner {
  display: flex;
  flex-direction: row;
  height: 100%;
  min-height: 493px;
}
.product-desktop-card--intro .product-desktop-intro-img-wrap {
  flex: 1;
  background: #f5f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-desktop-card--intro .product-desktop-intro-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-desktop-card--intro .product-desktop-intro-body {
  flex: 1;
  padding: 56px 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.product-desktop-card--intro .product-desktop-eyebrow {
  display: inline-block;
  background: var(--yellow);
  color: var(--blue);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: flex-start;
}
.product-desktop-card--intro .product-desktop-title {
  font-size: 40px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
}
.product-desktop-card--intro .product-desktop-desc {
  font-size: 16px;
  color: var(--grey-mid);
  line-height: 1.7;
  margin: 0;
}
.product-desktop-card--intro .product-desktop-price-hint {
  font-size: 14px;
  color: var(--blue);
  font-weight: 600;
  margin: 8px 0 0;
}

/* ── Features card ── feature list (left) + spin-animated hero (right).
   Pinned to a fixed height so it doesn't stretch with sibling cards
   (Pricing / Get Started can be much taller). align-self: flex-start
   opts out of the carousel track's default align-items: stretch — this
   card defines the row's natural max height which other cards then
   stretch to match. Reduced ~10% from the original 680px to 612px so
   the whole product carousel feels less tall. */
.product-desktop-card--features {
  align-self: flex-start;
  height: 612px;
  min-height: 612px;
  max-height: 612px;
}
.product-desktop-card--features .product-desktop-card-inner {
  display: flex;
  flex-direction: row;
  height: 612px;
  min-height: 612px;
  max-height: 612px;
  /* No overflow:hidden here — the outer .product-desktop-card already
     clips with border-radius. Adding a redundant clip on this layer was
     forcing the video into an extra composited rasterisation step,
     which Chrome/Safari do at sub-native pixel density when there are
     stacked rounded clips above a <video>. The legacy .product-content
     skipped this same clip and got crisp playback for the same reason. */
}
.product-desktop-card--features .product-desktop-feat-list {
  width: 280px;
  flex-shrink: 0;
  /* Top/bottom padding tightened in line with the right column so the
     left column's vertical rhythm matches the now-shorter card. */
  padding: 36px 0 36px 48px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Hide overflow at the column level; the inner .product-desktop-feat-labels
     list gets its own scroll so heading + tagline stay pinned at the top. */
  overflow: hidden;
  min-height: 0;
}
/* "Key features" — small uppercase eyebrow so it orients without competing
   with the dynamic caption title on the right (which is the loudest thing
   on the card and updates per click). */
.product-desktop-card--features .product-desktop-feat-heading {
  font-size: 11px;
  font-weight: 700;
  color: rgba(61, 83, 103, 0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}
.product-desktop-card--features .product-desktop-feat-tagline {
  font-size: 13px;
  color: var(--grey-mid);
  line-height: 1.55;
  margin: 6px 0 18px;
}

/* Apple-clean tab labels — text-only when inactive, filled-blue when active.
   Same pattern we adopted for the .aio-pill rails. The labels list takes
   the remaining column height (after heading + tagline) and scrolls if a
   product has more features than fit (e.g. Enterprise with 9 features). */
.product-desktop-card--features .product-desktop-feat-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Subtle native scrollbar — keeps the affordance without a heavy chrome bar. */
  scrollbar-width: thin;
  scrollbar-color: rgba(61, 83, 103, 0.25) transparent;
  /* Bit of right padding so the scrollbar sits flush against the card edge
     without crowding the label text. */
  padding-right: 8px;
}
.product-desktop-card--features .product-desktop-feat-labels::-webkit-scrollbar {
  width: 6px;
}
.product-desktop-card--features .product-desktop-feat-labels::-webkit-scrollbar-thumb {
  background: rgba(61, 83, 103, 0.22);
  border-radius: 3px;
}
.product-desktop-card--features .product-desktop-feat-labels::-webkit-scrollbar-track {
  background: transparent;
}
.product-desktop-card--features .product-desktop-feat-label {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(61, 83, 103, 0.55);
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.product-desktop-card--features .product-desktop-feat-label:hover {
  background: rgba(61, 83, 103, 0.06);
  color: var(--blue);
}
.product-desktop-card--features .product-desktop-feat-label.active {
  background: var(--blue);
  color: #fff;
  font-weight: 600;
}

/* Right column — video pair (stacked / cross-fade) + caption beneath.
   Padding tightened (32/24 → 22/16) to free vertical space for the 14:9
   video inside the now-shorter 612px card. */
.product-desktop-card--features .product-desktop-feat-display {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 32px 16px;
  gap: 10px;
  min-width: 0;
}
/* 14:9 to match the legacy .feat-vid-wrap and the aspect ratio the Rotato
   source clips were rendered at. Without this, flex:1 + object-fit:cover
   was cropping ~70px top and bottom of every feature video. */
.product-desktop-card--features .product-desktop-feat-vid-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 14 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  flex-shrink: 0;
}
.product-desktop-card--features .product-desktop-feat-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* No object-fit — matches the legacy .feat-vid which let the video
     stretch to fill the 14:9 wrap (the CSS default for <video> is `fill`).
     With Rotato sources that aren't natively 14:9 the slight vertical
     stretch is imperceptible, and the device fills the frame the way the
     original showcase rendered it instead of leaving empty bars. */
  transition: opacity 0.4s ease;
}
.product-desktop-card--features .product-desktop-feat-caption {
  flex-shrink: 0;
  min-height: 84px;
  padding: 6px 4px 0;
}
/* Caption title is the loudest type on the card — matches the legacy
   showcase's 26px size so the active feature reads as the focal point.
   1.5s fade in/out over a 5-second cycle: 0–1.5s fade out, 1.5–3.5s
   invisible (video spin happens here), 3.5–5s fade in with new copy. */
.product-desktop-card--features .product-desktop-feat-cap-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--blue);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  transition: opacity 1.5s ease, transform 1.5s ease;
}
.product-desktop-card--features .product-desktop-feat-cap-text {
  font-size: 15px;
  color: var(--grey-mid);
  line-height: 1.6;
  margin: 0;
  transition: opacity 1.5s ease, transform 1.5s ease;
}
.product-desktop-card--features .product-desktop-feat-cap-title.exiting,
.product-desktop-card--features .product-desktop-feat-cap-text.exiting {
  opacity: 0;
  transform: translateY(6px);
}

/* ── ST4S card ── badge left + body right. */
.product-desktop-card--st4s .product-desktop-card-inner {
  display: flex;
  flex-direction: row;
  height: 100%;
  min-height: 493px;
  padding: 56px;
  gap: 56px;
  align-items: center;
}
.product-desktop-card--st4s .product-desktop-st4s-badge {
  flex-shrink: 0;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-desktop-card--st4s .product-desktop-st4s-badge img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.product-desktop-card--st4s .product-desktop-st4s-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.product-desktop-card--st4s .product-desktop-st4s-headline {
  font-size: 28px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}
.product-desktop-card--st4s .product-desktop-st4s-intro {
  font-size: 14px;
  color: var(--grey-mid);
  line-height: 1.65;
  margin: 0;
}
.product-desktop-card--st4s .product-desktop-st4s-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.product-desktop-card--st4s .product-desktop-st4s-checks li {
  font-size: 14px;
  color: var(--blue);
  padding-left: 26px;
  position: relative;
  line-height: 1.5;
}
.product-desktop-card--st4s .product-desktop-st4s-checks li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blue);
  font-weight: 700;
}

/* ── Pricing card ── hosts the legacy buildPricing layout (.price-cards,
   .price-ent-layout, .price-card etc.) inside a padded card body. The
   layout itself is governed by the existing .price-* CSS — this rule
   just provides the white card chrome and breathing room. */
.product-desktop-card--pricing .product-desktop-card-inner {
  padding: 40px 40px 36px;
  height: 100%;
  min-height: 493px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Get Started card ── hosts buildGetStarted's rich layouts:
   - self-serve (Teachers): email signup form + platform-download buttons
   - 4-week-trial / enterprise: animated stepped cards
   The legacy .gs-* CSS handles the inside; we just frame it. */
.product-desktop-card--get-started .product-desktop-card-inner {
  padding: 40px 40px 36px;
  height: 100%;
  min-height: 493px;
  display: flex;
  flex-direction: column;
}

.product-desktop-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.product-desktop-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(61, 83, 103, 0.22);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.product-desktop-dots .dot.active {
  background: var(--blue);
  transform: scale(1.2);
}

/* Mobile-only sub-feature chip list under each Features card.
   Generated by the addFeatureSubLists() IIFE in main.js. Hidden on
   desktop — desktop visitors get the popup deep-dives instead. */
.feature-sub-list { display: none; }

.hero-right video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ============================================================
   CARD SECTIONS — shared pattern
   ============================================================ */

.card-section {
  padding: 50px 0 120px;
  /* Clip the carousel at the viewport edge (full-width boundary) so card
     shadows on the last active card are never cut off. The outer clip was
     on .card-track-outer which sat too close to the card's right edge. */
  overflow: hidden;
  /* When an anchor link (e.g. "Features", "Products" in the nav) scrolls the
     section into view, leave room for the 72px nav + 14px logo overflow
     so the eyebrow lands cleanly below the logo instead of behind it. */
  scroll-margin-top: 110px;
}

.card-section.bg-grey { background: var(--grey-bg); }
.card-section.bg-white { background: var(--white); }

/* Max-width container — centres content on wide screens */
.card-section-inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Section header — stays inside horizontal padding */
.card-section-header {
  padding: 0 var(--section-h-pad);
  margin-bottom: 52px;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.card-section-header .label {
  display: block;
  margin-bottom: 14px;
}

/* ── Card carousel track ── */

.card-track-outer {
  overflow: visible;
  cursor: grab;
  user-select: none;
}
.card-track-outer.is-dragging { cursor: grabbing; }

.card-track {
  display: flex;
  gap: 20px;
  padding-left: var(--section-h-pad);
  padding-right: var(--section-h-pad);
  /* transition applied by JS after first paint */
  will-change: transform;
}

/* ── Individual card — fills viewport width minus a 220px peek ── */

.snap-card {
  /* card_width = min(viewport, content-max) - left_pad - peek */
  width: calc(min(100vw, var(--content-max)) - var(--section-h-pad) - 240px);
  border-radius: 24px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 4px 24px rgba(0,0,0,0.09);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease, opacity 0.4s ease, transform 0.4s ease;
}

/* ── Carousel peek states (desktop) ───────────────────────────
   The carousel JS tags each card with one of these classes so the
   active card is fully alive, the peek card is dimmed + click-to-
   advance, and any further-off cards are fully out of the way. */
.snap-card--active { opacity: 1; }

.snap-card--peek {
  opacity: 0.4;
  transform: scale(0.985);
  cursor: pointer;
}
/* Make the whole peek card a click target — children can't intercept,
   so any click on the peek bubbles up and the carousel advances. The
   active card keeps full interactivity. */
.snap-card--peek * { pointer-events: none; }
.snap-card--peek:hover { opacity: 0.55; }

.snap-card--away {
  opacity: 0;
  pointer-events: none;
}

.card-section.bg-grey .snap-card { background: var(--white); }
.card-section.bg-white .snap-card { background: var(--grey-bg); box-shadow: none; }

/* Image area — large, fixed height so it doesn't balloon on wide screens */
.snap-card-image {
  width: 100%;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(31,56,100,0.28);
  text-transform: uppercase;
  flex-shrink: 0;
  overflow: hidden;
}

.snap-card-image img,
.snap-card-image video {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Accent colours per section */
.section-why      .snap-card-image { background: #dce4f0; }
.section-features .snap-card-image { background: #fdf3cf; color: rgba(150,115,0,0.4); }

/* The width and flex-direction overrides for .section-features .snap-card
   live further down (around line 1423) where the rest of the Features
   card styles are. They were duplicated up here briefly while debugging
   a cascade conflict. */

/* Disable the single-card peek/fade pattern for the Features rail. That
   fade was designed for the original Why Snapshot showcase where one
   card was active and the next was a faded peek. The Features rail
   shows 2-3 cards at once, and fading the leading card to opacity 0 as
   it scrolls out caused it to "drop" rather than slide smoothly. With
   this override every card stays fully opaque while the carousel JS
   still drives the translateX transition. */
.section-features .snap-card--peek,
.section-features .snap-card--away {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.section-features .snap-card--peek * { pointer-events: auto; }

/* Top-aligned rail controls — same pattern as the Why Snapshot rails
   (.why-desktop-arrows). Right-aligned, sits between the section header
   and the carousel track. Tight bottom margin keeps the cards close
   to the section title. */
.features-rail-controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 var(--section-h-pad);
  max-width: var(--content-max);
  margin: 0 auto 12px;
}

/* Tighten the gap between the Features section H2 ("Everything your
   school needs to run.") and the rail-controls / cards beneath. The
   default .card-section-header margin-bottom is 52px which felt too
   loose under the slim arrow row. */
.section-features .card-section-header {
  margin-bottom: 24px;
}
.features-rail-controls .carousel-arrow {
  /* Reset the legacy circle-on-grey style → ghost-circle to match the
     Why Snapshot / Products rail arrows. */
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(61, 83, 103, 0.22);
  background: transparent;
  color: var(--blue);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.features-rail-controls .carousel-arrow:hover {
  background: rgba(61, 83, 103, 0.06);
  border-color: var(--blue);
}
.features-rail-controls .carousel-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Bottom carousel-nav now hosts only dots + counter — centre them. */
.section-features .carousel-nav {
  justify-content: center;
}
.section-products .snap-card-image { background: #d8e6f5; }
.section-start    .snap-card-image { background: #ddf0dd; color: rgba(0,90,0,0.35); }

/* ── Why Snapshot — tighter spacing so heading + cards + nav fit one screen ── */

.section-why {
  padding-top: 60px;
  padding-bottom: 60px;
}

.section-why .card-section-header {
  margin-bottom: 28px;
}

/* The legacy nested-pill cards (#aioCard / #platformCard / #integrationCard)
   and the founder card used to be the desktop carousel. They're now hidden
   on every viewport and live in the DOM purely as the data source for the
   desktop and mobile flat-carousel builders. */
.section-why > .card-track-outer,
.section-why > .carousel-nav {
  display: none;
}

/* ── Why Snapshot — flat desktop carousels ──────────────────
   Three themed rails, each with six cards. Same architecture
   as the mobile flat-carousels (native CSS scroll-snap,
   IntersectionObserver-driven dots) but sized for desktop and
   with arrow buttons for mouse-driven nav. Hidden on mobile. */
.why-desktop-carousels {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 0 var(--section-h-pad);
  max-width: var(--content-max);
  margin: 0 auto;
}

.why-desktop-section {
  position: relative;
}

.why-desktop-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 18px;
  gap: 20px;
}

.why-desktop-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -0.02em;
  margin: 0;
}

/* Apple-style ghost arrow controls on the right of each rail header. */
.why-desktop-arrows {
  display: flex;
  gap: 8px;
}

.why-desktop-arrow {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(61, 83, 103, 0.22);
  background: transparent;
  color: var(--blue);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.why-desktop-arrow:hover {
  background: rgba(61, 83, 103, 0.06);
  border-color: var(--blue);
}

.why-desktop-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.why-desktop-track-outer {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Match the track's left padding so scroll-snap still lands the active
     card flush with the visible padding edge, not at scrollLeft=0. */
  scroll-padding-left: 20px;
}

.why-desktop-track-outer::-webkit-scrollbar { display: none; }

.why-desktop-track {
  display: flex;
  gap: 24px;
  /* Horizontal padding gives the card box-shadow room to render on the
     left of the first card and right of the last card — without it the
     shadow gets clipped flush against the track-outer edge. Vertical
     padding keeps top/bottom shadow visible. */
  padding: 6px 20px;
}

.why-desktop-card {
  flex-shrink: 0;
  /* Sized so two cards sit comfortably side-by-side with a generous peek
     of the third on a typical 1440px viewport. Larger feel, closer to the
     scale of the previous showcase cards. */
  width: clamp(440px, 32vw, 560px);
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.10),
              0 0 0 1px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

/* Image floats inside the card with a small white inset on top + sides
   instead of sitting flush against the card edge. Two reasons:
   1. The macOS-window chrome inside each screenshot has its own rounded
      corners. Flush-to-edge meant the card's outer 22px radius clipped
      those, producing a "double-rounded" / chopped-corner look.
   2. Insetting gives the screenshot a Linear / Apple-style "floating
      device on white card" feel, matching the product showcases. */
.why-desktop-card-image {
  margin: 14px 14px 0;
  width: calc(100% - 28px);
  aspect-ratio: 16 / 9;
  /* White background — multi-platform device renders (phones, tablets,
     Windows desktops) have varied native aspect ratios. With object-fit:
     contain (below), the device sits centred and any letterbox space is
     pure white, matching the card body so each device appears to "float"
     on the card rather than be cropped inside a tinted frame. */
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-desktop-card-image img {
  width: 100%;
  height: 100%;
  /* contain (not cover) so portrait phones and landscape tablets aren't
     cropped to a 16:9 frame. The 16:9 app screenshots in the All-in-one-
     place rail still fill the frame exactly because the source matches
     the box ratio. */
  object-fit: contain;
  display: block;
}

.why-desktop-card-body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.why-desktop-card-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -0.015em;
  margin: 0;
}

.why-desktop-card-desc {
  font-size: 15px;
  color: var(--grey-mid);
  line-height: 1.55;
  margin: 0;
}

.why-desktop-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.why-desktop-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(61, 83, 103, 0.22);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.why-desktop-dots .dot.active {
  background: var(--blue);
  transform: scale(1.2);
}

/* ── Built by Teachers — founder card (Option D) ── */

.snap-card--founder { cursor: default; }

.founder-d-inner {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 36px 36px;
  min-height: 540px;
}

.founder-d-circle-yellow {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: var(--yellow);
  opacity: 1;
  top: -80px; right: -70px;
  pointer-events: none;
}

.founder-d-circle-blue {
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 1;
  bottom: -70px; left: -80px;
  pointer-events: none;
}

.founder-d-content {
  position: relative;
  z-index: 1;
}

.founder-d-label {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-transform: none;
  margin: 0 0 6px;
}

.founder-d-heading {
  font-size: 14px;
  font-weight: 400;
  color: #777;
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0 0 16px;
}

.founder-d-body {
  font-size: 16px;
  color: var(--grey-mid);
  line-height: 1.6;
  margin: 0 0 14px;
}
.founder-d-body:last-child { margin-bottom: 0; }

.founder-d-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.founder-d-attribution {
  text-align: right;
  border-right: 4px solid var(--yellow);
  padding-right: 14px;
}

.founder-d-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--grey-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 4px;
}

.founder-d-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--blue);
  letter-spacing: 0.04em;
  margin: 0;
}

/* ── Why Snapshot — framed card with heading overlay ── */

.section-why .snap-card {
  box-shadow: 0 4px 32px rgba(0,0,0,0.10);
  outline: 1px solid rgba(0,0,0,0.06);
}

.section-why .snap-card-image {
  position: relative;
  height: 380px;
  padding-top: 3px;
  background: var(--grey-bg);
}

.section-why .snap-card-image img {
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - 3px);
  object-fit: cover;
  object-position: center center;
}

.why-card-overlay {
  position: absolute;
  bottom: 16px;
  left: 36px;
}

/* ── All-in-one card animation ── */
/* ── All-in-one interactive card ── */
.aio-card {
  cursor: default;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.aio-card-header {
  padding: 20px 32px 0;
  flex-shrink: 0;
}

.aio-card-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.aio-card-subtitle {
  font-size: 14px;
  color: #777;
  margin: 0;
  min-height: 1.4em;
  transition: opacity 0.3s ease;
}

.aio-card-body {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  padding: 7px 0 0 32px;
  gap: 0;
}

/* Left pills column */
.aio-pills {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  width: 200px;
  padding-right: 24px;
}

/* Apple-clean tab pills: inactive is text-only on a transparent chip, hover
   reveals a faint tint, active is the only filled state. The contrast between
   "no chrome" and "filled blue" makes the selected tab unmistakable. */
.aio-pill {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(61, 83, 103, 0.55);
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.aio-pill:hover {
  background: rgba(61, 83, 103, 0.06);
  color: var(--blue);
}

.aio-pill.active {
  background: var(--blue);
  color: #fff;
  font-weight: 600;
}

/* Right image panel */
.aio-image-panel {
  flex: 1;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-right: 0;
}

.aio-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.aio-img.active {
  opacity: 1;
}

.why-card-overlay h3 {
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  color: var(--grey-dark);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 18px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

/* Card body */
.snap-card-body {
  padding: 32px 36px 36px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.snap-card-body h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--grey-dark);
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  line-height: 1.15;
}

.snap-card-body p {
  font-size: 16px;
  color: var(--grey-mid);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 28px;
  max-width: 580px;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
  transition: gap 0.2s;
}
.card-link:hover { gap: 10px; }
.card-link-arrow { font-size: 18px; line-height: 1; }

/* ============================================================
   FEATURE CARDS — narrow, text-top, image-bottom (Apple style)
   Overrides the default snap-card for .section-features only
   ============================================================ */

.section-features .snap-card {
  /* Match the Why Snapshot rail card size — two cards visible plus a peek
     of the third on a typical 1440px viewport. */
  width: clamp(440px, 32vw, 560px);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  display: flex;
  /* Image on top, body on the bottom — DOM is body-then-image, so reverse
     puts the image first visually, matching the Why Snapshot rail rhythm. */
  flex-direction: column-reverse;
  /* hover ring via outline */
  outline: 2px solid transparent;
  outline-offset: 0px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    outline-color 0.25s ease;
}

.section-features .snap-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(61,83,103,0.18);
  outline-color: rgba(61,83,103,0.22);
}

/* Text block — body sits below the image now (column-reverse on the
   parent). Use flex column with min-height so the "Learn more ›" CTA
   can be pinned to the bottom-right corner regardless of strapline
   length, giving every card a consistent footer rhythm. */
.section-features .snap-card-body {
  padding: 18px 24px 18px;
  flex: 1 1 auto;
  min-height: 160px;
  display: flex;
  flex-direction: column;
}

/* Override general .snap-card-body p rule for feature cards */
.section-features .snap-card-body p {
  flex: none;
  margin-bottom: 0;
  max-width: none;
}

.feature-card-heading {
  font-size: 19px;
  font-weight: 700;
  color: var(--grey-dark);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 2px;
}

.feature-card-strapline {
  font-size: 14px;
  color: var(--grey-mid);
  line-height: 1.55;
  margin: 0;
}

/* Apple-style "Learn more ›" CTA — text-only link with a chevron that
   nudges right on card hover. Injected into each card body by the
   feature-modal JS so the interaction is signposted without needing
   to touch the per-card markup. Pinned to the bottom-right of the
   body (margin-top: auto pushes it down, align-self: flex-end pushes
   it right). */
.feature-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  align-self: flex-end;
  padding-top: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
  letter-spacing: -0.01em;
  transition: gap 0.2s ease, color 0.2s ease;
}
.feature-card-cta::after {
  content: '\203A';   /* › single right-pointing angle quotation mark */
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.section-features .snap-card:hover .feature-card-cta {
  color: var(--blue-deep);
  gap: 8px;
}
.section-features .snap-card:hover .feature-card-cta::after {
  transform: translateX(2px);
}

/* Image block — fixed 16:9 ratio, top of card now (column-reverse flips
   it). Rotato export standard: "Screen 16:9" preset — the default.
   Rounded only on top corners so it sits flush with the rounded card
   outline; padding-top instead of padding-bottom for the same reason. */
.section-features .snap-card-image {
  flex: 0 0 auto;
  width: 100%;
  height: 230px;
  padding-top: 20px;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(61,83,103,0.25);
}

.section-features .snap-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* ── Dot navigation ── */

.carousel-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 36px var(--section-h-pad) 0;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.section-why .carousel-nav {
  justify-content: center;
  padding-top: 24px;
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s, width 0.3s ease, border-radius 0.3s ease;
  flex-shrink: 0;
}

.carousel-dot.active {
  width: 28px;
  border-radius: 4px;
  background: var(--blue);
}

.carousel-counter {
  font-size: 13px;
  font-weight: 500;
  color: var(--grey-mid);
  margin-left: 4px;
}

.carousel-arrows {
  display: flex;
  gap: 8px;
}

.carousel-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.07);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--grey-dark);
  transition: background 0.2s;
  line-height: 1;
}
.carousel-arrow:hover { background: rgba(0,0,0,0.13); }
.carousel-arrow:disabled { opacity: 0.3; cursor: default; }

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

.footer {
  background: var(--blue);
  padding: 20px 20px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Main four-column body */
.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-bottom: 14px;
  gap: 40px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Col 2 — tagline */
.footer-tagline {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.footer-email {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  transition: color 0.2s;
}
.footer-email:hover { color: #fff; }

/* Col 3 — socials */
.footer-col--socials {
  gap: 10px;
}

.footer-follow {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  margin-bottom: 4px;
}

.footer-socials {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.footer-social-icon {
  color: rgba(255,255,255,0.6);
  transition: color 0.2s;
  display: flex;
  align-items: center;
}
.footer-social-icon svg {
  width: 28px;
  height: 28px;
}
.footer-social-icon:hover { color: #fff; }

/* Col 4 — legal links */
.footer-col--links a {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  transition: color 0.2s;
}
.footer-col--links a:hover { color: #fff; }

/* Bottom strip */
.footer-bottom {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}

.footer-bottom a {
  color: rgba(255,255,255,0.3);
  transition: color 0.2s;
}
.footer-bottom a:hover { color: rgba(255,255,255,0.7); }

.footer-bottom-sep {
  opacity: 0.4;
}

/* ============================================================
   LEGAL SLIDE-OVER
   ============================================================ */

.legal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.legal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.legal-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(620px, 100vw);
  background: #fff;
  overflow-y: auto;
  padding: 48px 48px 80px;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.legal-overlay.open .legal-panel {
  transform: translateX(0);
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
  padding: 0;
  transition: color 0.2s;
}
.legal-back:hover { color: var(--blue-deep); }

.legal-content h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--grey-dark);
  margin-bottom: 28px;
  line-height: 1.2;
}
.legal-content h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--grey-dark);
  margin-top: 28px;
  margin-bottom: 10px;
}
.legal-content h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-dark);
  margin-top: 20px;
  margin-bottom: 8px;
}
.legal-content p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--grey-mid);
  margin-bottom: 14px;
}
.legal-content ul,
.legal-content ol {
  font-size: 14px;
  line-height: 1.75;
  color: var(--grey-mid);
  padding-left: 20px;
  margin-bottom: 14px;
}
.legal-content li { margin-bottom: 4px; }
.legal-content a {
  color: var(--blue);
  text-decoration: underline;
}
.legal-content a:hover { color: var(--blue-deep); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }


/* ============================================================
   PRODUCT SHOWCASE
   ============================================================ */

.product-showcase {
  padding: 50px 0 120px;
}

/* ── Product card — aligns to same edges as other section content ── */
.product-card {
  display: flex;
  width: calc(100% - 2 * var(--section-h-pad));
  max-width: calc(var(--content-max) - 2 * var(--section-h-pad));
  margin: 0 auto;
  background: var(--grey-bg);
  border-radius: 24px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06);
  overflow: hidden;
  min-height: 460px;
}

/* ── Left column: product selector cards ── */
.product-card-left {
  width: 240px;
  flex-shrink: 0;
  padding: 54px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start;
  border-right: 1px solid rgba(0,0,0,0.12);
}

.product-pill {
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0 12px 12px 0;
  padding: 14px 16px;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.product-pill:hover {
  background: rgba(61,83,103,0.06);
  border-left-color: rgba(61,83,103,0.2);
}

.product-pill.active {
  background: rgba(61,83,103,0.09);
  border-left-color: var(--blue);
}

.product-pill-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.3;
}

/* ── Expandable details (Devices + Who it's for) ── */
.product-pill-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.25,0.46,0.45,0.94),
              opacity 0.3s ease;
}

.product-pill.active .product-pill-details {
  max-height: 360px;
  opacity: 1;
  transition-delay: 0.08s;
}

.product-pill-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(61,83,103,0.10);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.product-pill.active .product-pill-detail:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.18s;
}

.product-pill.active .product-pill-detail:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.26s;
}

.product-pill.active .product-pill-detail:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.34s;
}

.product-pill.active .product-pill-detail:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.42s;
}

.product-pill-detail-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(61,83,103,0.45);
}

.product-pill-detail-value {
  font-size: 11.5px;
  font-weight: 500;
  color: #444;
  line-height: 1.4;
}

/* ── Right column ── */
.product-card-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Ribbon (sits on grey background) ── */
.product-ribbon {
  display: flex;
  gap: 0;
  padding: 0 12px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.product-ribbon::-webkit-scrollbar { display: none; }

/* ── White content area ── */
.product-content {
  flex: 1;
  min-height: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  margin: 8px 8px 8px 0;
}

.ribbon-tab {
  padding: 18px 13px 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(61,83,103,0.65);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.ribbon-tab:hover { color: var(--blue); }

.ribbon-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 600;
}

/* ── Panels ── */
.product-panels {
  position: relative;
  min-height: 380px;
}

.product-panel {
  display: none;
  padding: 36px 40px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.product-panel.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Overview panel fills the JS-locked panel height ── */
.product-panel[data-panel="overview"] {
  height: 100%;
  box-sizing: border-box;
}

.product-panel[data-panel="get-started"] {
  height: 100%;
  box-sizing: border-box;
}

.product-panel[data-panel="get-started"] .product-gs-wrap {
  height: 100%;
}

.product-overview-layout {
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 100%;
}

.product-overview-img-wrap {
  flex: 1;
  min-height: 150px;
  border-radius: 14px;
  overflow: hidden;
  background: #f0f3f6;
}

.product-overview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-overview-body { flex-shrink: 0; }

.product-label {
  display: inline-block;
  background: var(--yellow);
  color: var(--blue);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.product-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.25;
  margin-bottom: 14px;
}

.product-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.75;
}

/* ── Features — spin layout ── */
.feat-layout {
  display: flex;
  flex-direction: row-reverse;
  gap: 32px;
  align-items: flex-start;
  min-height: 360px;
}

.feat-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 190px;
  flex-shrink: 0;
  padding-top: 4px;
}

.feat-label {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.feat-label:hover { background: rgba(61,83,103,0.07); }

.feat-label.active {
  background: var(--blue);
  color: #fff;
}

.feat-display {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.feat-vid-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 14 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}

.feat-vid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #fff;
}

.feat-vid-b {
  opacity: 0;
  z-index: 0;
}

.feat-vid-a {
  z-index: 1;
}

.feat-vid {
  transition: opacity 0.12s ease;
}

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

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

.feat-caption {
  text-align: center;
  max-width: 480px;
}

.feat-caption--exit  { animation: featCaptionExit  1500ms ease-in  forwards; }
.feat-caption--enter { animation: featCaptionEnter 2500ms ease-out forwards; }

.feat-caption-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 6px;
}

.feat-caption-text {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

/* ── Video panel ── */
.product-vid-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  aspect-ratio: 16/9;
  max-height: 440px;
}

.product-vid {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product-vid-expand {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background 0.2s;
}

.product-vid-expand:hover { background: rgba(0,0,0,0.88); }

/* ── Pricing ── */

/* Enterprise: card + modules side by side */
.price-ent-layout {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.price-ent-layout .price-cards--single {
  flex-shrink: 0;
}

.price-ent-modules {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  justify-content: center;
}

.price-ent-module {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(45,125,70,0.50);
  background: rgba(45,125,70,0.08);
}

.price-ent-module-name {
  font-size: 13px;
  font-weight: 600;
  color: #2d7d46;
}

.price-ent-module-billing {
  font-size: 11px;
  font-weight: 500;
  color: rgba(45,125,70,0.65);
  white-space: nowrap;
}

.price-cards {
  display: flex;
  gap: 20px;
}

.price-cards--single .price-card {
  max-width: 380px;
}

.price-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 48px 40px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

.price-card--dark {
  background: var(--blue);
  border-color: transparent;
}

.price-number {
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -3px;
  color: var(--blue);
}

.price-card--dark .price-number { color: #fff; }

.price-period {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  gap: 2px;
}

.price-period span {
  font-size: 13px;
  font-weight: 400;
  color: #999;
  line-height: 1.4;
}

.price-card--dark .price-period span { color: rgba(255,255,255,0.5); }

.price-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--blue);
  margin-top: 36px;
}

.price-card--dark .price-name { color: #fff; }

.price-note {
  font-size: 13px;
  color: #aaa;
  margin-top: 10px;
  flex: 1;
}

.price-card--dark .price-note { color: rgba(255,255,255,0.45); }

.price-cta {
  display: inline-block;
  margin-top: 40px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: var(--blue);
  color: #fff;
  align-self: flex-start;
  transition: opacity 0.2s;
}

.price-cta:hover { opacity: 0.8; }

.price-card--dark .price-cta {
  background: #fff;
  color: var(--blue);
}

.price-panel-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 28px;
  padding: 20px 24px;
  background: #f0f3f6;
  border-radius: 14px;
  font-size: 14px;
  color: #444;
  line-height: 1.65;
}

.price-panel-badge {
  flex-shrink: 0;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 1px;
}

.price-panel-note--trial {
  background: #f0f9f3;
  border: 1.5px solid #c3e6cb;
}

.price-panel-note--nolockin {
  padding: 12px 18px;
  font-size: 13px;
}

.price-panel-badge--trial {
  background: #2d7d46;
}

/* Trial card */
.price-card--trial {
  border: 2px solid #2d7d46;
  background: #f6fdf8;
  position: relative;
}

.price-card--trial .price-number { color: #2d7d46; }
.price-card--trial .price-period span { color: #6aab7e; }
.price-card--trial .price-name { color: #1a5c30; }
.price-card--trial .price-note { color: #5a8c6a; }

.price-card--trial .price-cta {
  background: #2d7d46;
  color: #fff;
}

.price-trial-badge {
  display: inline-block;
  background: #2d7d46;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
}

/* Tighten card padding when three cards sit together */
.price-cards:has(.price-card:nth-child(3)) .price-card {
  padding: 22px 24px;
}

.price-cards:has(.price-card:nth-child(3)) .price-number {
  font-size: 48px;
  letter-spacing: -2px;
}

.price-cards:has(.price-card:nth-child(3)) .price-period {
  margin-top: 6px;
}

.price-cards:has(.price-card:nth-child(3)) .price-name {
  margin-top: 14px;
  font-size: 15px;
}

.price-cards:has(.price-card:nth-child(3)) .price-note {
  margin-top: 6px;
}

.price-cards:has(.price-card:nth-child(3)) .price-cta {
  margin-top: 16px;
  padding: 10px 20px;
  font-size: 13px;
}

.price-footer {
  margin-top: 16px;
  font-size: 12px;
  color: #bbb;
  text-align: right;
}

/* ── Teachers pricing: school promo block ── */
.price-school-promo {
  margin-top: 16px;
  padding: 16px 20px;
  background: rgba(61,83,103,0.05);
  border-radius: 12px;
  border-left: 3px solid var(--blue);
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price-panel-badge--promo {
  background: var(--blue);
  color: #fff;
  align-self: flex-start;
}

.pricing-detail {
  font-size: 14px;
  color: #555;
  line-height: 1.75;
  max-width: 520px;
}

/* ── ST4S Panel ── */
.st4s-layout {
  display: flex;
  gap: 52px;
  align-items: flex-start;
}

.st4s-badge-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
}

.st4s-badge-img {
  width: 180px;
  height: auto;
}

.st4s-body {
  flex: 1;
}

.st4s-headline {
  font-size: 22px;
  font-weight: 700;
  color: #2D2E6D;
  margin-bottom: 14px;
  line-height: 1.3;
}

.st4s-intro {
  font-size: 14px;
  color: #555;
  line-height: 1.75;
  margin-bottom: 22px;
  max-width: 540px;
}

.st4s-checks {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.st4s-checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #333;
  line-height: 1.55;
}

.st4s-checks li::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%232D2E6D'/%3E%3Cpolyline points='5,10 8.5,13.5 15,7' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.st4s-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.st4s-meta-item {
  font-size: 12px;
  color: #888;
}

.st4s-meta-item strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2D2E6D;
  margin-bottom: 1px;
}

.st4s-report-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.st4s-report-link:hover {
  border-bottom-color: var(--blue);
}

.ribbon-tab.ribbon-tab--hidden {
  display: none;
}

/* ── Get Started ── */
.gs-headline {
  font-size: 22px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 10px;
}

.gs-detail {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 480px;
}

.gs-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.gs-store-btn {
  padding: 11px 24px;
  border-radius: 999px;
  border: 2px solid var(--blue);
  color: var(--blue);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.gs-store-btn:hover,
.gs-store-btn--primary {
  background: var(--blue);
  color: #fff;
}

.gs-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
}

.gs-input {
  padding: 11px 16px;
  border: 1.5px solid #ddd;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.gs-input:focus { border-color: var(--blue); }

.gs-submit {
  padding: 12px 28px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  transition: opacity 0.2s;
}

.gs-submit:hover { opacity: 0.85; }

.gs-submit:disabled {
  cursor: wait;
  opacity: 0.6;
}

/* ───────────────────────────────────────────────────────────────────────────
   Demo signup modal — full-screen overlay used on mobile (and as a fallback
   on desktop) for the hero "Schools — Get Access Today" CTA and the mobile
   Classroom pricing card. JS toggles .demo-modal--open to show it. Mounted
   in index.html at the bottom of <body>; populated on demand.
   ─────────────────────────────────────────────────────────────────────────── */
.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.demo-modal--open { display: flex; }

.demo-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45, 63, 79, 0.55);
  backdrop-filter: blur(4px);
}

.demo-modal-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.demo-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #6e6e73;
  cursor: pointer;
  z-index: 1;
}
.demo-modal-close:hover { color: var(--blue); }

.demo-modal-body {
  padding: 28px 24px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Full-screen on smaller phones — the card fills the viewport rather than
   floating as a small dialog. Same idiom as iOS sheet presentations. */
@media (max-width: 540px) {
  .demo-modal { padding: 0; }
  .demo-modal-card {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
  .demo-modal-body { padding: 56px 20px 24px; }
  /* iOS Safari auto-zooms when an input with font-size < 16px receives
     focus. Bump form inputs + textareas to 16px on mobile so the page
     stays at the intended scale. Desktop keeps the 13px design. */
  .gs-input,
  textarea.gs-input {
    font-size: 16px;
  }
}

/* When the modal is open, lock body scroll so the page doesn't move behind. */
body.demo-modal-lock { overflow: hidden; }

/* Inline server-error block shown above the submit button when the demo
   signup endpoint rejects the submission (bad domain, rate limit, duplicate
   email, network). Hidden by default — set display:block in JS. */
.gs-form-error {
  margin-top: 4px;
  padding: 10px 14px;
  background: rgba(220, 80, 80, 0.08);
  border: 1px solid rgba(220, 80, 80, 0.25);
  border-radius: 10px;
  color: #b03a3a;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.gs-modules {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gs-modules-label {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
}

.gs-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}

.gs-success {
  font-size: 15px;
  color: #2d7d46;
  font-weight: 500;
}

/* ── Demo two-column layout ── */
.gs-demo-layout {
  display: flex;
  gap: 52px;
  align-items: flex-start;
}

.gs-demo-form-col {
  flex: 1;
  min-width: 0;
}

.gs-demo-form-col .gs-detail {
  max-width: 100%;
  margin-bottom: 20px;
}

.gs-form-row {
  display: flex;
  gap: 12px;
}

.gs-form-row .gs-input {
  flex: 1;
  min-width: 0;
}

.gs-demo-access-col {
  flex-shrink: 0;
  width: 220px;
  padding-top: 4px;
}

.gs-access-head {
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 8px;
}

.gs-access-sub {
  font-size: 13px;
  color: #777;
  line-height: 1.65;
  margin-bottom: 20px;
}

.gs-access-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Platform download buttons */
.gs-platform-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1.5px solid #ddd;
  background: #fff;
  text-decoration: none;
  color: #1a1a2e;
  font-family: 'Poppins', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.gs-platform-btn:hover {
  border-color: var(--blue);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.gs-platform-btn span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.gs-platform-label {
  font-size: 10px;
  color: #888;
  font-weight: 400;
}

.gs-platform-btn span > :last-child {
  font-size: 13px;
  font-weight: 700;
}

.gs-platform-btn--apple { background: #000; color: #fff; border-color: #000; }
.gs-platform-btn--apple:hover { border-color: #333; background: #111; }
.gs-platform-btn--apple .gs-platform-label { color: rgba(255,255,255,0.6); }

.gs-platform-btn--web { background: var(--blue); color: #fff; border-color: var(--blue); }
.gs-platform-btn--web:hover { opacity: 0.9; box-shadow: 0 2px 10px rgba(0,90,200,0.25); }
.gs-platform-btn--web .gs-platform-label { color: rgba(255,255,255,0.7); }

/* ── Enterprise Get Started ── */
.gs-ent {
  display: flex;
  flex-direction: column;
}

.gs-ent-header {
  margin-bottom: 20px;
  flex-shrink: 0;
}

.gs-ent-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 8px;
}

.gs-ent-headline {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--blue);
}

/* Expanding card accordion — stroke + tint treatment */
.gs-ent-cards {
  display: flex;
  gap: 16px;
  height: 400px;
}

/* ── Base card structure ── */
.gs-ent-card {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 20px;
  border: 2px solid transparent;
  padding: 16px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: flex-grow 0.45s cubic-bezier(0.4,0,0.2,1),
              background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}

.gs-ent-card.active {
  flex-grow: 3.5;
  cursor: default;
}

/* ── Card 1 — Snapshot yellow ── */
.gs-ent-card:nth-child(1) {
  background: rgba(234,210,161,0.18);
  border-color: rgba(193,155,85,0.50);
}
.gs-ent-card:nth-child(1):hover:not(.active) {
  background: rgba(234,210,161,0.28);
  border-color: rgba(193,155,85,0.75);
}
.gs-ent-card:nth-child(1).active {
  background: rgba(234,210,161,0.32);
  border-color: rgba(193,155,85,0.90);
  box-shadow: 0 4px 20px rgba(193,155,85,0.20);
}
.gs-ent-card:nth-child(1) .gs-ent-card-pill {
  background: #9a7635;
}
.gs-ent-card:nth-child(1) .gs-ent-card-name { color: rgba(154,118,53,0.80); }

/* ── Card 2 — brand blue ── */
.gs-ent-card:nth-child(2) {
  background: rgba(61,83,103,0.10);
  border-color: rgba(61,83,103,0.35);
}
.gs-ent-card:nth-child(2):hover:not(.active) {
  background: rgba(61,83,103,0.16);
  border-color: rgba(61,83,103,0.55);
}
.gs-ent-card:nth-child(2).active {
  background: rgba(61,83,103,0.18);
  border-color: var(--blue);
  box-shadow: 0 4px 20px rgba(61,83,103,0.18);
}
.gs-ent-card:nth-child(2) .gs-ent-card-pill {
  background: var(--blue);
}
.gs-ent-card:nth-child(2) .gs-ent-card-name { color: rgba(61,83,103,0.65); }

/* ── Card 3 — classroom green ── */
.gs-ent-card:nth-child(3) {
  background: rgba(45,125,70,0.10);
  border-color: rgba(45,125,70,0.40);
}
.gs-ent-card:nth-child(3):hover:not(.active) {
  background: rgba(45,125,70,0.16);
  border-color: rgba(45,125,70,0.65);
}
.gs-ent-card:nth-child(3).active {
  background: rgba(45,125,70,0.18);
  border-color: #2d7d46;
  box-shadow: 0 4px 20px rgba(45,125,70,0.18);
}
.gs-ent-card:nth-child(3) .gs-ent-card-pill {
  background: #2d7d46;
}
.gs-ent-card:nth-child(3) .gs-ent-card-name { color: rgba(45,125,70,0.80); }

/* ── Pill (replaces circle badge) ── */
.gs-ent-card-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff;
  align-self: flex-start;
  white-space: nowrap;
  flex-shrink: 0;
  margin-bottom: 12px;
}

/* ── Step name (visible in both states) ── */
.gs-ent-card-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blue);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  transition: color 0.35s, white-space 0.01s;
}

.gs-ent-card.active .gs-ent-card-name {
  color: rgba(61,83,103,0.55);
  white-space: normal;
  margin-bottom: 14px;
}

/* Content — hidden in inactive cards, revealed on active */
.gs-ent-card-content {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.gs-ent-card.active .gs-ent-card-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  overflow-y: auto;
  transition: opacity 0.28s 0.28s ease, transform 0.28s 0.28s ease;
}

/* ── Feature list (steps 2 & 3) ── */
.gs-ent-card-step {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(61,83,103,0.40);
  margin-bottom: 8px;
  flex-shrink: 0;
}

.gs-ent-card-features {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 12px;
}

.gs-ent-card-feature {
  font-size: 18px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.gs-ent-card-desc {
  font-size: 12px;
  color: rgba(61,83,103,0.65);
  line-height: 1.65;
}

/* ── Section layout — heading + body pairs (step 1) ── */
.gs-ent-card-section {
  margin-bottom: 9px;
}
.gs-ent-card-section:last-child { margin-bottom: 0; }

.gs-ent-card-section .gs-ent-card-feature {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.gs-ent-card-section .gs-ent-card-desc {
  font-size: 11.5px;
  line-height: 1.55;
}

/* ── Unique selling point pill (all steps) ── */
.gs-ent-card-unique {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  align-self: flex-start;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Per-step pill colours */
.gs-ent-card:nth-child(1) .gs-ent-card-unique { background: #9a7635; }
.gs-ent-card:nth-child(2) .gs-ent-card-unique { background: var(--blue); }
.gs-ent-card:nth-child(3) .gs-ent-card-unique { background: #2d7d46; }

/* ── Footnote — mirrors GST note under pricing ── */
.gs-ent-note {
  margin-top: 10px;
  font-size: 11px;
  color: rgba(61,83,103,0.42);
  line-height: 1.5;
  flex-shrink: 0;
}

/* ── Self-serve (Teachers) get-started — vertical accordion ── */
.gs-st-layout {
  display: flex;
  gap: 24px;
  height: 100%;
}

.gs-st-left {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.gs-st-headline {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--blue);
  margin-bottom: 14px;
  flex-shrink: 0;
  line-height: 1.2;
}

.gs-st-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.gs-st-card {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 2px solid transparent;
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: flex-grow 0.45s cubic-bezier(0.4,0,0.2,1),
              background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}

.gs-st-card.active {
  flex-grow: 3.5;
  cursor: default;
}

/* Card 1 — gold */
.gs-st-card:nth-child(1) { background: rgba(234,210,161,0.18); border-color: rgba(193,155,85,0.50); }
.gs-st-card:nth-child(1):hover:not(.active) { background: rgba(234,210,161,0.28); border-color: rgba(193,155,85,0.75); }
.gs-st-card:nth-child(1).active { background: rgba(234,210,161,0.32); border-color: rgba(193,155,85,0.90); box-shadow: 0 4px 20px rgba(193,155,85,0.20); }
.gs-st-card:nth-child(1) .gs-ent-card-pill { background: #9a7635; }
.gs-st-card:nth-child(1) .gs-ent-card-name { color: rgba(154,118,53,0.80); }

/* Card 2 — blue */
.gs-st-card:nth-child(2) { background: rgba(61,83,103,0.10); border-color: rgba(61,83,103,0.35); }
.gs-st-card:nth-child(2):hover:not(.active) { background: rgba(61,83,103,0.16); border-color: rgba(61,83,103,0.55); }
.gs-st-card:nth-child(2).active { background: rgba(61,83,103,0.18); border-color: var(--blue); box-shadow: 0 4px 20px rgba(61,83,103,0.18); }
.gs-st-card:nth-child(2) .gs-ent-card-pill { background: var(--blue); }
.gs-st-card:nth-child(2) .gs-ent-card-name { color: rgba(61,83,103,0.65); }

/* Card 3 — green */
.gs-st-card:nth-child(3) { background: rgba(45,125,70,0.10); border-color: rgba(45,125,70,0.40); }
.gs-st-card:nth-child(3):hover:not(.active) { background: rgba(45,125,70,0.16); border-color: rgba(45,125,70,0.65); }
.gs-st-card:nth-child(3).active { background: rgba(45,125,70,0.18); border-color: #2d7d46; box-shadow: 0 4px 20px rgba(45,125,70,0.18); }
.gs-st-card:nth-child(3) .gs-ent-card-pill { background: #2d7d46; }
.gs-st-card:nth-child(3) .gs-ent-card-name { color: rgba(45,125,70,0.80); }

/* Hide name on inactive cards — pill label carries all the info */
.gs-st-card:not(.active) .gs-ent-card-name {
  display: none;
}

/* Active card name */
.gs-st-card.active .gs-ent-card-name {
  color: rgba(61,83,103,0.55);
  white-space: normal;
  margin-bottom: 10px;
}

/* Content reveal — mirrors Enterprise */
.gs-st-card.active .gs-ent-card-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  overflow-y: auto;
  transition: opacity 0.28s 0.28s ease, transform 0.28s 0.28s ease;
}

/* Fixed-width pills so all steps align */
.gs-st-card .gs-ent-card-pill {
  min-width: 250px;
  text-align: center;
  justify-content: center;
}

/* Spacing between body paragraphs */
.gs-st-card .gs-ent-card-desc + .gs-ent-card-desc {
  margin-top: 8px;
}

/* Heading + body blocks inside Teachers get-started steps */
.gs-step-block {
  margin-top: 12px;
}
.gs-step-block:first-child {
  margin-top: 0;
}
.gs-step-heading {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-deep);
  margin-bottom: 2px;
}
.gs-step-block .gs-ent-card-desc {
  margin-top: 0;
}

/* Right column */
.gs-st-right {
  width: 210px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Success state */
.gs-success-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: #f0f9f3;
  border-radius: 14px;
  border: 1.5px solid #b8e6c8;
}

.gs-success-icon {
  width: 36px;
  height: 36px;
  background: #2d7d46;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.gs-success-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a4a2e;
}

.gs-success-msg {
  font-size: 13px;
  color: #3a6b4a;
  line-height: 1.65;
}

/* ── Product video modal ── */
.product-vid-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.product-vid-modal.open {
  opacity: 1;
  pointer-events: all;
}

.product-vid-modal-inner {
  position: relative;
  width: 90%;
  max-width: 900px;
  aspect-ratio: 16/9;
}

.product-vid-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.product-vid-modal-close:hover { opacity: 1; }

.product-vid-modal-video {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: #000;
}


/* ============================================================
   FEATURE MODAL
   ============================================================ */

.feature-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 40, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.feature-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.feature-modal {
  background: #fff;
  border-radius: 24px;
  width: 92vw;
  max-width: 1176px;
  box-shadow: 0 32px 100px rgba(0,0,0,0.25);
  overflow: hidden;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
}

.feature-modal-overlay.open .feature-modal {
  transform: translateY(0) scale(1);
}

/* Header — slim ribbon. Eyebrow sits on the same baseline as the title
   so the header compresses down to a single line of vertical type
   instead of two stacked lines. */
.feature-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  border-bottom: 1px solid #eef0f3;
  flex-shrink: 0;
}

/* Eyebrow + title share one row, separated by a thin divider. */
.feature-modal-header > div {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.feature-modal-header .label {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(61, 83, 103, 0.55);
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  padding-right: 14px;
}

.feature-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #3D5367;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.2;
}

.feature-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f0f2f5;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  flex-shrink: 0;
  margin-top: 4px;
  transition: background 0.2s, color 0.2s;
}
.feature-modal-close:hover { background: #e0e3e8; color: #1a1a1a; }

/* Body */
.feature-modal-body {
  display: flex;
  height: 546px;
}

/* Left panel */
.feature-modal-left {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px;
  border-right: 1px solid #eef0f3;
  gap: 10px;
}

.feature-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #dde1e7;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  color: #3D5367;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
  line-height: 1;
}
.feature-nav-btn:hover:not(:disabled) { background: #f5f7fa; border-color: #3D5367; }
.feature-nav-btn:disabled { opacity: 0.25; cursor: default; }

.feature-tags {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: none;
}
.feature-tags::-webkit-scrollbar { display: none; }

/* Individual tag */
.feature-tag {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}

.feature-tag-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  background: #f4f6f9;
  transition: background 0.25s;
  border-radius: 12px;
}
.feature-tag.active .feature-tag-header {
  background: #3D5367;
  border-radius: 12px 12px 0 0;
}

.feature-tag-plus {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #3D5367;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #3D5367;
  flex-shrink: 0;
  transition: border-color 0.25s, color 0.25s, transform 0.35s ease;
  line-height: 1;
}
.feature-tag.active .feature-tag-plus {
  border-color: #EAD2A1;
  color: #EAD2A1;
  transform: rotate(45deg);
}

.feature-tag-label {
  font-size: 13.5px;
  font-weight: 600;
  color: #3D5367;
  transition: color 0.25s;
  line-height: 1.3;
}
.feature-tag.active .feature-tag-label { color: #fff; }

.feature-tag-description {
  max-height: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.65;
  color: #fff;
  background: #3D5367;
  border-radius: 0 0 12px 12px;
  padding: 0 14px;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
.feature-tag.active .feature-tag-description {
  max-height: 160px;
  padding: 10px 14px 14px;
}

/* Right panel — video */
.feature-modal-right {
  flex: 1;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.feature-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 0.25s ease;
}
.feature-video.fading { opacity: 0; }


/* ============================================================
   RESPONSIVE — phones and small tablets (≤ 768px)
   ============================================================
   The desktop layout above is preserved unchanged. These overrides
   only kick in below 768px (iPhone, most Android phones, small
   tablet portrait). Tablet landscape and desktop fall through to
   the desktop rules.

   Strategy:
     • Drop the nav menu — logo + Login button only (sticky)
     • Stack the hero (text on top, video below)
     • Single-column everything (cards, products, pricing, footer)
     • Convert the feature-modal popup to full-screen takeover
       with a horizontal-scrolling tab strip at the top
     • Larger tap targets (44pt min)
     • Tighter horizontal padding so content uses the full width
   ============================================================ */
@media (max-width: 768px) {

  /* ── Section padding — much tighter on phones ─────────── */
  :root {
    --section-h-pad: 20px;
    --content-max:   100vw;
  }

  /* ── NAV — fully hidden on phones, page starts with the hero video ─ */
  .nav {
    display: none;
  }

  /* ── HERO — single column. Order: label → headline → image → subtitle → buttons.
     The .hero-right (video) panel is hidden entirely; the inline image replaces it. */
  .hero {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .hero-right {
    display: none;
  }

  .hero-left {
    padding: 24px 22px 36px;
  }
  .hero-label {
    margin-bottom: 14px;
    font-size: 12px;
  }
  /* Headline keeps its <br>. "Reset your" on row 1, "expectations." on row 2. */
  .hero-headline {
    font-size: clamp(40px, 11vw, 56px);
    margin-bottom: 18px;
  }

  /* Mobile hero image — Rotato render. Aspect ratio matches the canvas size
     recommended in the project (1:1). Change to 4/5 if you went portrait. */
  .hero-mobile-media {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 4px 0 22px;
    background: var(--grey-bg);
    border-radius: 18px;
    overflow: hidden;
  }
  .hero-mobile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Subtitle — each phrase on its own line on mobile. */
  .hero-sub {
    font-size: 17px;
    margin-bottom: 22px;
    max-width: none;
  }
  .hero-sub span {
    display: block;
  }
  .hero-actions {
    flex-direction: column;
    gap: 8px;
  }
  .hero-actions .btn-lg {
    min-width: 0;
    width: 100%;
    min-height: 44px;
    padding: 11px 18px;
    font-size: 14px;
  }

  /* ── SECTION DELINEATION (mobile Option A — Stripe-style) ───
     Top-level sections already alternate background colours
     (grey hero → white why → grey features → white products).
     Remaining work: more breathing room + a clear "chapter start"
     cue. A small blue accent rule above the eyebrow signals
     "new section starts here" — quiet but unmistakable on scroll. */
  .card-section {
    padding: 56px 0 48px;
  }
  .card-section-header {
    padding: 0 20px;
    margin-bottom: 28px;
  }
  /* Accent rule above the eyebrow — 36×3px blue line. */
  .card-section-header .label {
    display: block;
    position: relative;
    padding-top: 18px;
  }
  .card-section-header .label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 3px;
    background: var(--blue);
    border-radius: 2px;
  }
  /* Section titles on mobile — keep the <br> for explicit line breaks
     ("Next generation" / "education software."), and shrink the font
     a touch so each line fits on iPhone width without wrapping. */
  .section-title {
    font-size: clamp(26px, 7.5vw, 32px);
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
  .section-why {
    padding-top: 56px;
    padding-bottom: 48px;
  }
  .section-why .card-section-header {
    margin-bottom: 24px;
  }
  /* ── Features carousel — hide Learn more CTA and disable modal on mobile ── */
  .feature-card-cta {
    display: none;
  }
  .section-features .snap-card[data-feature] {
    cursor: default;
    pointer-events: none;
  }

  /* Products section gets the same chapter-start treatment. */
  .product-showcase {
    padding-top: 56px;
    padding-bottom: 48px;
  }
  .product-showcase .card-section-header {
    padding: 0 20px;
    margin-bottom: 28px;
  }
  .product-showcase .card-section-header .label {
    display: block;
    position: relative;
    padding-top: 18px;
  }
  .product-showcase .card-section-header .label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 3px;
    background: var(--blue);
    border-radius: 2px;
  }

  /* ── CARDS / CAROUSEL — native scroll-snap with peek + dots ─
     Override the desktop transform-based scroll. JS detects mobile and
     skips its desktop drag-scroll handler so this CSS is in charge. */
  .card-track-outer {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: default;        /* override desktop's grab cursor */
  }
  .card-track-outer::-webkit-scrollbar { display: none; }

  .card-track {
    gap: 12px;
    padding: 4px 20px;
    transform: none !important;   /* defeat desktop JS that sets translateX */
    transition: none !important;
    will-change: auto;
  }

  .snap-card {
    /* Card width: full viewport minus 60px → 20px left padding + 40px peek
       on the right showing the next card. */
    width: calc(100vw - 60px);
    border-radius: 18px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex-shrink: 0;
    background: #ffffff;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(0, 0, 0, 0.04);
  }
  /* Image area — uniform aspect-ratio across all card-types so visual rhythm
     stays consistent (Why Snapshot mini-cards and Features cards match).
     White background blends with the card so any letterbox space around an
     image of a different intrinsic ratio is invisible. */
  .snap-card-image {
    height: auto;
    aspect-ratio: 4 / 3;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .snap-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
  }
  /* Tighten card body text */
  .snap-card-body {
    padding: 16px 18px 20px;
  }
  .snap-card-title {
    font-size: 20px;
  }
  .snap-card-text {
    font-size: 14px;
  }

  /* ── FEATURES SECTION — image on top so cards match Why Snapshot rhythm ─ */
  .section-features .snap-card {
    flex-direction: column-reverse;
  }
  .section-features .snap-card-image {
    /* Override the desktop yellow tint — keep the white panel from .snap-card-image
       so the image floats cleanly with no halo. */
    background: #ffffff;
    color: inherit;
  }
  .feature-card-heading {
    font-size: 18px;
    color: var(--blue);
    margin: 0 0 6px;
  }
  .feature-card-strapline {
    font-size: 14px;
    line-height: 1.5;
  }

  /* Sub-feature chip list — small pills below the strapline showing what's
     included. Tries hard not to feel busy: low-saturation background, thin
     padding, smaller weight than the heading. */
  .feature-sub-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
  }
  .feature-sub-list li {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--blue);
    background: rgba(61, 83, 103, 0.06);
    padding: 5px 9px;
    border-radius: 999px;
    line-height: 1.2;
  }

  /* ── WHY SNAPSHOT — desktop pill cards + desktop flat-carousels are
     hidden on mobile; the .why-mobile-carousels rail takes their place. */
  .section-why .card-track-outer,
  .section-why > .carousel-nav,
  .section-why .why-desktop-carousels {
    display: none;
  }
  .section-why .why-mobile-carousels {
    display: block;
  }
  .why-mini-section {
    /* Larger gap between sub-section carousels so each "chapter"
       (All in One / Multi-platform / No Integration) reads as its own
       beat rather than blending into the next. */
    margin-bottom: 48px;
  }
  .why-mini-section:last-child { margin-bottom: 0; }

  .why-mini-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: -0.02em;
    padding: 0 22px;
    margin: 0 0 14px;
  }

  .why-mini-track-outer {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .why-mini-track-outer::-webkit-scrollbar { display: none; }

  .why-mini-track {
    display: flex;
    gap: 12px;
    padding: 4px 20px;       /* small top/bottom padding so card shadows don't clip */
  }

  .why-mini-card {
    width: calc(100vw - 60px);    /* 20px left padding + 40px right peek */
    flex-shrink: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .why-mini-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .why-mini-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
  }

  .why-mini-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: -0.01em;
    margin: 16px 18px 6px;
  }
  .why-mini-card-desc {
    font-size: 14px;
    color: var(--grey-mid);
    line-height: 1.5;
    margin: 0 18px 18px;
    flex: 1;
  }

  .why-mini-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
  }
  .why-mini-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(61, 83, 103, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .why-mini-dots .dot.active {
    background: var(--blue);
    transform: scale(1.4);
  }

  /* ── PRODUCTS — legacy showcase + new desktop carousels both hidden on
     mobile; the .products-mobile-carousels rail takes over. */
  .product-showcase .product-card,
  .product-showcase > .carousel-nav,
  .product-showcase .products-desktop-carousels {
    display: none;
  }
  .products-mobile-carousels {
    display: block;
  }

  .product-mobile-section {
    /* Same generous chapter-break spacing as Why Snapshot sub-sections. */
    margin-bottom: 48px;
  }
  .product-mobile-section:last-child { margin-bottom: 0; }

  .product-mobile-section-heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: -0.02em;
    padding: 0 22px;
    margin: 0 0 14px;
  }

  /* Card content variants — extend .why-mini-card with product-specific bits. */
  .product-mobile-card {
    /* override the default rigid 4:3 image area; product cards have their own
       internal layout */
  }
  .product-mobile-card-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;       /* never let the carousel's stretched height squash the media */
  }
  .product-mobile-card-media video,
  .product-mobile-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
  }
  /* Intro card hero — source product images are 16:9. Match the container to
     the image so it fills edge-to-edge instead of letterboxing inside a 4:3
     frame (which on Enterprise looked oddly cut off because its sibling
     pricing card is much taller, distorting the layout). */
  .product-mobile-card--intro .product-mobile-card-media {
    aspect-ratio: 16 / 9;
  }
  /* Let the intro body absorb any extra height when sibling cards stretch
     this card taller — keeps the media pinned to the top with no empty gap
     between the body and the bottom of the card. */
  .product-mobile-card--intro .product-mobile-card-body {
    flex: 1;
  }
  .product-mobile-card-body {
    padding: 18px 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .product-mobile-card-body--full {
    flex: 1;
  }
  .product-mobile-card-body--centered {
    align-items: center;
    text-align: center;
    padding: 28px 22px;
    gap: 14px;
  }

  .product-mobile-eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .product-mobile-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--blue);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
  }
  .product-mobile-sub {
    font-size: 13px;
    color: var(--grey-mid);
    margin: -4px 0 4px;
  }
  .product-mobile-desc {
    font-size: 14px;
    color: var(--grey-mid);
    line-height: 1.5;
    margin: 0;
  }
  .product-mobile-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    margin: 4px 0 0;
  }

  /* Features list — same pill style as the Features section's sub-feature chips. */
  .product-mobile-features {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .product-mobile-features li {
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
    background: rgba(61, 83, 103, 0.07);
    padding: 6px 11px;
    border-radius: 999px;
    line-height: 1.2;
  }

  /* Get Started — numbered step list. */
  .product-mobile-steps {
    list-style: none;
    margin: 4px 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .product-mobile-steps li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .product-mobile-step-num {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .product-mobile-step-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue);
    margin: 0 0 2px;
  }
  .product-mobile-step-body {
    font-size: 13px;
    color: var(--grey-mid);
    line-height: 1.5;
    margin: 0;
  }
  .product-mobile-cta {
    align-self: stretch;
    background: var(--blue);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 18px;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
    /* Pin to the bottom of the card body so the steps sit at the top
       and the action is anchored regardless of step-length variation. */
    margin-top: auto;
    transition: background 0.2s ease, transform 0.15s ease;
  }
  .product-mobile-cta:hover {
    background: var(--blue-deep);
  }
  .product-mobile-cta:active {
    transform: scale(0.98);
  }

  /* Store buttons inside the Teachers mobile get-started card */
  .gs-access-btns--mobile-gs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
    width: 100%;
  }
  .gs-access-btns--mobile-gs .gs-platform-btn {
    width: 100%;
    justify-content: center;
  }

  /* Features card — push label + pills to the bottom edge so the video
     gets the top half and the supporting copy reads as a footer. */
  .product-mobile-card--features .product-mobile-card-body {
    margin-top: auto;
    padding: 22px 22px 28px;
    gap: 12px;
  }
  .product-mobile-card--features .product-mobile-name {
    margin-bottom: 2px;
  }

  /* Pricing card — Apple-style centred layout: big number on top, product
     name + supporting note centred, primary CTA pinned to the bottom. */
  .product-mobile-card--pricing .product-mobile-card-body {
    flex: 1;
    align-items: center;
    text-align: center;
    padding: 36px 24px 26px;
    gap: 0;
  }
  .product-mobile-pricing-price {
    font-size: 64px;
    font-weight: 800;
    color: var(--blue);
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 8px 0 0;
  }
  .product-mobile-pricing-period {
    font-size: 13px;
    color: var(--grey-mid);
    line-height: 1.4;
    margin: 10px 0 0;
  }
  .product-mobile-pricing-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: -0.01em;
    margin: 28px 0 0;
  }
  .product-mobile-pricing-note {
    font-size: 13px;
    color: var(--grey-mid);
    line-height: 1.5;
    margin: 8px 0 0;
    max-width: 320px;
  }
  .product-mobile-pricing-cta {
    align-self: stretch;
    margin-top: auto;
  }

  /* Enterprise variant — modules list grouped by billing. The price + name
     stay top-aligned; modules and footer fill the available space; CTA pinned. */
  .product-mobile-card-body--pricing-modules {
    align-items: stretch;
    text-align: left;
    padding: 28px 22px 22px;
  }
  .product-mobile-card-body--pricing-modules .product-mobile-pricing-price {
    align-self: center;
  }
  .product-mobile-card-body--pricing-modules .product-mobile-pricing-name {
    align-self: center;
    margin: 16px 0 0;
  }

  .product-mobile-pricing-tagline {
    align-self: center;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--blue);
    margin: 14px 0 0;
    max-width: 280px;
    line-height: 1.4;
  }

  .pricing-modules {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .pricing-modules-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .pricing-modules-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;
  }
  .pricing-modules-list {
    font-size: 12.5px;
    color: var(--grey-mid);
    line-height: 1.5;
    margin: 0;
  }

  .product-mobile-card-body--pricing-modules .product-mobile-pricing-footer {
    text-align: left;
    margin-top: 16px;
  }

  /* Tiered pricing card (Classroom) — single card with three rows.
     Pricing-table layout: tier name on the left, price on the right,
     thin divider between each row. Single CTA pinned at the bottom. */
  .product-mobile-card-body--pricing-rows {
    flex: 1;
    padding: 28px 22px 22px;
    gap: 0;
  }
  .product-mobile-pricing-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--blue);
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    text-align: center;
  }
  .pricing-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  .pricing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .pricing-row-left {
    flex: 1;
    min-width: 0;
  }
  .pricing-row-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue);
    margin: 0;
    line-height: 1.25;
  }
  .pricing-row-period {
    font-size: 11px;
    color: var(--grey-mid);
    margin: 3px 0 0;
    line-height: 1.3;
  }
  .pricing-row-price {
    font-size: 24px;
    font-weight: 800;
    color: var(--blue);
    letter-spacing: -0.02em;
    line-height: 1;
    flex-shrink: 0;
  }
  .product-mobile-pricing-footer {
    font-size: 12px;
    color: var(--grey-mid);
    margin: 14px 0 0;
    text-align: center;
  }

  /* ST4S badge card — logo prominent (top), single supporting line at bottom. */
  .product-mobile-card--st4s .product-mobile-card-body {
    flex: 1;
    justify-content: space-between;       /* logo top-anchored, line bottom-anchored */
  }
  .product-mobile-st4s-logo {
    width: 220px;
    height: auto;
    object-fit: contain;
    margin: 16px 0 0;
  }
  .product-mobile-st4s-line {
    font-size: 14px;
    color: var(--grey-mid);
    line-height: 1.5;
    margin: 0 0 8px;
    max-width: 320px;
  }

  /* ── AIO-CARD — vertical layout: header → image → pills grid ─ */
  .aio-card-header {
    padding: 22px 22px 0;
  }
  .aio-card-title {
    font-size: 22px;
  }
  /* Reserve enough vertical space for the longest subtitle (~3 lines on iPhone)
     so the image below stays at the same Y position as pills are tapped and
     between cards as you swipe. Keeps the visual rhythm steady. */
  .aio-card-subtitle {
    font-size: 14px;
    min-height: 4.5em;
    line-height: 1.4;
  }
  .aio-card-body {
    flex-direction: column;
    padding: 14px 18px 18px;
    gap: 14px;
    min-height: 0;
  }
  /* Image panel — fixed aspect so the card has a predictable height */
  .aio-image-panel {
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-right: 0;
    flex: 0 0 auto;
    background: #f4f6f9;
  }
  .aio-img {
    object-fit: contain;
    object-position: center center;
  }
  /* Pills as a 2-column grid (3 rows for 6 items) */
  .aio-pills {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding-right: 0;
    justify-content: stretch;
    gap: 8px;
  }
  /* Pill buttons. Mobile-only restyle so they read as proper button affordances:
     white background + border when inactive, filled blue with shadow lift when active. */
  .aio-pill {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background: #ffffff;
    border: 1.5px solid rgba(61, 83, 103, 0.18);
    color: var(--blue);
    transition: background 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  }
  .aio-pill:hover {
    border-color: rgba(61, 83, 103, 0.4);
  }
  .aio-pill:active {
    transform: scale(0.97);
  }
  .aio-pill.active {
    background: var(--blue);
    color: #ffffff;
    border-color: var(--blue);
    box-shadow: 0 6px 14px rgba(61, 83, 103, 0.28);
  }

  /* ── CAROUSEL NAV — show dots, hide arrows ─ */
  .carousel-nav {
    padding: 14px 20px 0;
    justify-content: center;
  }
  .carousel-arrow,
  .carousel-arrows,
  .carousel-counter {
    display: none !important;
  }
  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  .carousel-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(61, 83, 103, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .carousel-dots .dot.active {
    background: var(--blue);
    transform: scale(1.25);
  }

  /* ── PRODUCT SHOWCASE — stack the side selector on top ─ */
  .product-card {
    flex-direction: column;
    width: calc(100% - 40px);
    min-height: 0;
    border-radius: 18px;
  }
  .product-card-left {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    padding: 14px 14px 14px;
    gap: 6px;
    scrollbar-width: none;
  }
  .product-card-left::-webkit-scrollbar { display: none; }
  .product-pill {
    flex-shrink: 0;
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: 12px 12px 0 0;
    padding: 10px 14px;
    min-width: 160px;
  }
  .product-pill:hover {
    border-left-color: transparent;
    border-bottom-color: rgba(61,83,103,0.2);
  }
  .product-pill.active {
    border-left-color: transparent;
    border-bottom-color: var(--blue);
  }
  .product-pill-details {
    display: none;   /* details collapse on mobile — content area shows them */
  }
  .product-pill-name {
    font-size: 14px;
    white-space: nowrap;
  }
  .product-card-right {
    width: 100%;
    padding: 18px 18px 22px;
  }
  /* Inside the right panel, layout becomes single-column */
  .product-content {
    margin: 6px;
  }
  .product-ribbon {
    padding: 0 6px;
  }

  /* ── PRICING ROWS — stack ─────────────────────────── */
  .pricing-row {
    flex-direction: column;
    gap: 10px;
  }
  .pricing-cell {
    width: 100%;
  }

  /* ── FEATURE MODAL POPUP — full-screen takeover ──── */
  .feature-modal-overlay {
    align-items: stretch;
    justify-content: stretch;
    background: rgba(20, 30, 40, 0.92);
  }
  .feature-modal {
    width: 100vw;
    max-width: none;
    height: 100vh;
    border-radius: 0;
    box-shadow: none;
    transform: translateY(20px);
  }
  .feature-modal-overlay.open .feature-modal {
    transform: translateY(0);
  }
  .feature-modal-header {
    padding: 14px 16px;
  }
  .feature-modal-title {
    font-size: 18px;
  }

  /* Body becomes a vertical stack: tab strip on top, then video, then text */
  .feature-modal-body {
    flex-direction: column;
    height: calc(100vh - 56px);    /* minus header */
    overflow: hidden;
  }

  /* Tab strip — was a vertical column, now a horizontal scroll row */
  .feature-modal-left {
    width: 100%;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid #eef0f3;
    padding: 10px 12px;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    flex-shrink: 0;
    scrollbar-width: none;
  }
  .feature-modal-left::-webkit-scrollbar { display: none; }

  /* Hide prev/next nav buttons on mobile — touch-scroll instead */
  .feature-nav-btn { display: none; }

  /* Tags row */
  .feature-tags {
    flex-direction: row;
    overflow-y: hidden;
    overflow-x: visible;
    flex: 0 0 auto;
    width: auto;
    gap: 8px;
  }
  .feature-tag {
    flex-shrink: 0;
  }
  .feature-tag-header {
    padding: 9px 14px;
  }
  /* Hide the description body inside each tag — too noisy on a horizontal strip */
  .feature-tag-body { display: none; }
  .feature-tag.active .feature-tag-header {
    border-radius: 12px;
  }

  /* Video + text panel */
  .feature-modal-right {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 14px 16px 22px;
  }
  .feature-video-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    flex-shrink: 0;
  }
  .feature-modal-caption {
    font-size: 15px;
    margin-top: 14px;
  }

  /* ── PRODUCT VIDEO MODAL — full-screen ─────────────── */
  .product-vid-modal-inner {
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
  }
  .product-vid-modal-close {
    top: 12px;
    right: 12px;
  }

  /* ── FOOTER — stack columns ────────────────────────── */
  .footer-main {
    flex-direction: column;
    gap: 22px;
    padding: 20px 22px 22px;
  }
  .footer-col {
    width: 100%;
  }
  .footer-tagline {
    font-size: 20px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding: 14px 22px;
  }
  .footer-bottom-sep { display: none; }

  /* ── BUTTONS — touch-friendly minimums ───────────── */
  .btn-lg {
    min-height: 48px;
    padding: 14px 22px;
    font-size: 15px;
  }

  /* ── REVEAL ANIMATIONS — disable on mobile to avoid jank during scroll ─ */
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* ============================================================
   RESPONSIVE — large phones / small tablet portrait (769–960px)
   ============================================================
   Mostly desktop-like but reduce horizontal padding and tighten
   the hero so it doesn't dominate the screen.
   ============================================================ */
@media (min-width: 769px) and (max-width: 960px) {
  :root {
    --section-h-pad: 48px;
  }
  .hero-headline {
    font-size: clamp(46px, 6vw, 72px);
  }
  .feature-modal {
    width: 96vw;
    height: 92vh;
  }
}