:root {
  --bg: #0c0b10;
  --bg-soft: #15131c;
  --card: #16141d;
  --card-hover: #1d1a26;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #f4f2f7;
  --muted: #a39fb0;
  --muted-2: #76717f;
  --pink: #ff4d6d;
  --pink-2: #ff7aa2;
  --radius: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: #F8F4F1;   /* shows in the overscroll "bounce" at the top/bottom instead of black */
  /* Always reserve the scrollbar gutter so the centred header sits in the same
     place whether or not a page scrolls (homepage scrolls, Company/Investors don't). */
  scrollbar-gutter: stable;
}

body {
  /* Previous font: Inter — css2?family=Inter:wght@400;500;600;700;800 (swap back here + the <link> in index.html to revert) */
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Background aurora glow */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(255, 77, 109, 0.18), transparent 60%),
    radial-gradient(40% 40% at 85% 10%, rgba(150, 90, 255, 0.14), transparent 60%),
    radial-gradient(40% 40% at 15% 15%, rgba(255, 140, 90, 0.10), transparent 60%);
}

body > * { position: relative; z-index: 1; }

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(12, 11, 16, 0.6);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s, opacity .25s;
}
.site-header.scrolled {
  border-bottom-color: var(--border);
  background: rgba(12, 11, 16, 0.85);
  opacity: 0.5;
}
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 64px;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.brand-name { font-size: 18px; letter-spacing: -0.02em; }
.brand-mark { display: block; }
.brand-logo { height: 30px; width: auto; display: block; }

.header-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 24px;
}
/* Every nav item reserves the active pill's border + padding (transparent), so
   marking a page active shows the border without shifting any surrounding text. */
.header-nav a {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--muted);
  transition: color .2s;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 5px 14px;
}
.site-header .header-nav a.nav-current { border-color: #2B0326; color: #2B0326; }
/* Mobile menu: active item shows the bordered pill (matches the Parents page) */
.site-header .mobile-menu a.nav-current {
  border: 1.5px solid #2B0326;
  border-radius: 999px;
  padding: 5px 14px;
  color: #2B0326;
}
.mobile-menu a.nav-current { display: inline-block; align-self: flex-start; }
.header-nav a:hover { color: var(--text); }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s, background .18s, border-color .18s;
}
.btn:active { transform: scale(.97); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--text); }
.site-header .btn-ghost { font-size: 16.5px; }   /* match Educators/Investors nav links */
.btn-light { background: #fff; color: #111; font-weight: 700; }
.btn-light:hover { background: #ececec; }

/* Hamburger + mobile dropdown — hidden on desktop, shown ≤767px */
.nav-toggle {
  display: none;
  margin-left: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: #2B0326;
  transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.mobile-menu { display: none; }

/* Hero */
.hero {
  text-align: center;
  padding: 88px 0 72px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10.8px;
  font-size: 16.2px;            /* 20% larger */
  font-weight: 500;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  padding: 7.2px 16.8px;       /* 20% larger */
  border-radius: 999px;
  margin-bottom: 30px;
  transition: background .18s, border-color .18s;
}
.pill:hover { background: rgba(255,255,255,.07); border-color: var(--border-strong); }
.pill-dot {
  width: 8.4px; height: 8.4px; border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink);
}
.pill-arrow { color: var(--muted-2); }

.hero-title {
  font-size: clamp(32px, 5.6vw, 60.8px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: 18px;
}
.grad-text {
  background: linear-gradient(110deg, var(--pink-2), var(--pink) 55%, #ff9d57);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: clamp(16.32px, 2.304vw, 20.16px);   /* 20% larger */
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 40px;
}
/* Parents hero subtitle — swap wording on mobile */
.hs-mobile { display: none; }
@media (max-width: 767px) {
  .hs-desktop { display: none; }
  .hs-mobile { display: inline; }
}

/* Prompt box */
.prompt {
  max-width: 720px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  padding: 16px 16px 12px;
  text-align: left;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset;
  transition: border-color .2s, box-shadow .2s;
}
.prompt:focus-within {
  border-color: rgba(255,122,162,.45);
  box-shadow: 0 20px 70px -20px rgba(255,77,109,.35), 0 0 0 1px rgba(255,122,162,.15) inset;
}
.prompt-input {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  resize: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  padding: 6px 8px 0;
  max-height: 220px;
}
.prompt-input::placeholder { color: var(--muted-2); }

.prompt-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.prompt-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.prompt-send-group { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 9px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  transition: background .15s, color .15s, border-color .15s;
}
.tool-text { padding: 7px 12px; }
.tool:hover { color: var(--text); background: rgba(255,255,255,.05); border-color: var(--border-strong); }

.send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--pink-2), var(--pink));
  transition: transform .12s, filter .18s, opacity .18s;
}
.send:hover { filter: brightness(1.08); }
.send:active { transform: scale(.92); }
.send:disabled { opacity: .45; cursor: default; }

/* Suggestions */
.suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;               /* Type/Subject/Level align with the Education row */
  gap: 10px;
  margin-top: 22px;
}
/* Education / L&D stacked (L&D below Education), equal width + left-aligned content */
.mode-group { display: inline-flex; flex-direction: column; align-items: stretch; gap: 6px; }
.mode-group .mode-btn { justify-content: flex-start; }
.chip {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--muted);
  font: inherit;
  font-size: 14.85px;          /* 10% larger */
  padding: 8.8px 16.5px;       /* 10% larger */
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.chip:hover { color: var(--text); background: rgba(255,255,255,.08); border-color: var(--border-strong); }
.chip:active { transform: scale(.96); }

/* ============================================================
   Top section — header + hero on the Fruit3D gradient (light)
   ============================================================ */
.top-bg {
  position: relative;
  background: #eaf4fb;
  /* Fill the viewport height (content stays top-anchored; extra gradient
     shows below the education tiers). dvh handles mobile browser chrome. */
  min-height: 100vh;
  min-height: 100dvh;
  /* Header is fixed (out of flow), so reserve its height here to keep the
     hero where it was. */
  padding-top: 64px;
  /* Don't create a stacking context here (override body > * { z-index: 1 }).
     That keeps the bleeding hero cards behind the later sections, while the
     fixed header — with its own z-index — still floats above everything. */
  z-index: auto;
  /* Clip the hero cards' sideways bleed (they extend past the viewport on
     mobile) without clipping their vertical bleed — keeps the page from
     sliding sideways while leaving the document's normal scroll intact. */
  overflow-x: clip;
}
/* Animated background: two oversized copies of the gradient drift slowly
   over each other so the colour blobs float like clouds. */
.top-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.top-fx::before {
  content: '';
  position: absolute;
  inset: -18%;
  background: url('assets/hero-gradient.jpg') center / cover no-repeat;
  will-change: transform;
  backface-visibility: hidden;
  animation: drift 14s ease-in-out infinite;
}
/* The whole gradient floats slowly — colours stay dispersed to the edges,
   keeping a clean neutral centre behind the headline. */
@keyframes drift {
  0%   { transform: translate(-10%, -6%) scale(1.05) rotate(-2deg); }
  25%  { transform: translate(10%, -8%)  scale(1.18) rotate(2deg); }
  50%  { transform: translate(12%, 7%)   scale(1.08) rotate(3deg); }
  75%  { transform: translate(-8%, 10%)  scale(1.20) rotate(-1deg); }
  100% { transform: translate(-10%, -6%) scale(1.05) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .top-fx::before { animation: none; }
}
/* Header: transparent over the gradient, dark text; white frosted bar on scroll */
.top-bg .site-header { background: transparent; }
.top-bg .site-header.scrolled {
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.top-bg .btn-ghost { color: #4a2a44; }
.top-bg .btn-ghost:hover { color: #1f0b1c; }
.top-bg .header-nav a { color: #4a2a44; }
.top-bg .header-nav a:hover { color: #1f0b1c; }
.top-bg .btn-light { background: #C03E86; color: #fff; }
.top-bg .btn-light:hover { background: #a53573; }

/* Prompt box: light (F8F4F1) with dark text */
.top-bg .prompt {
  background: #F8F4F1;
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 18px 50px -24px rgba(40, 10, 40, 0.40);
}
.top-bg .prompt:focus-within {
  border-color: rgba(255, 122, 162, 0.55);
  box-shadow: 0 18px 55px -22px rgba(255, 77, 109, 0.32);
}
.top-bg .prompt-input { color: #1f0b1c; }
.top-bg .prompt-input::placeholder { color: rgba(31, 11, 28, 0.42); }
.top-bg .tool { color: #6a5a64; border-color: rgba(0, 0, 0, 0.12); }
.top-bg .tool:hover {
  color: #1f0b1c;
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.2);
}
.top-bg .send { background: #2B0326; }
/* Keep the CTA bold/solid even when the box is empty (disabled) */
.top-bg .send:disabled { opacity: 1; cursor: pointer; }

/* Hero: dark text for the light background */
.top-bg .hero { position: relative; z-index: 6; }   /* above the bleeding cards so the Level dropdown shows over them */
.top-bg .hero-title { color: #2B0326; }
.top-bg .hero-sub { color: #5a3a52; }
.top-bg .pill {
  color: #5a3a52;
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(0, 0, 0, 0.08);
}
.top-bg .pill:hover { background: rgba(255, 255, 255, 0.8); border-color: rgba(0,0,0,.14); }

/* Status pill at the bottom of the prompt box — appears when a level is picked */
/* Context orbs in the prompt bar — audience mode + Country/Type/Subject/Level.
   Each is a coloured circle + the selection name. */
.prompt-mode, .prompt-orb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  color: #2B0326;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 6px 13px;
  border-radius: 999px;
  white-space: nowrap;
}
.prompt-orb[hidden] { display: none; }
.prompt-mode .pill-dot { background: #C03E86; box-shadow: 0 0 10px #C03E86; }
.prompt-mode[data-mode="lnd"] .pill-dot { background: #F7931E; box-shadow: 0 0 10px #F7931E; }
.prompt-orb[data-dd="country"] .pill-dot { background: #65C0E0; box-shadow: 0 0 10px #65C0E0; }
.prompt-orb[data-dd="type"] .pill-dot { background: #F8D648; box-shadow: 0 0 10px #F8D648; }
.prompt-orb[data-dd="subject"] .pill-dot { background: #D6455C; box-shadow: 0 0 10px #D6455C; }
.prompt-orb[data-dd="level"] .pill-dot { background: #67B893; box-shadow: 0 0 10px #67B893; }
/* Orb border matches its own dot colour */
.prompt-orb[data-dd="country"] { border-color: #65C0E0; }
.prompt-orb[data-dd="type"]    { border-color: #F8D648; }
.prompt-orb[data-dd="subject"] { border-color: #D6455C; }
.prompt-orb[data-dd="level"]   { border-color: #67B893; }
.top-bg .chip {
  color: #4a2a44;
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(0, 0, 0, 0.08);
}
.top-bg .chip:hover { color: #1f0b1c; background: rgba(255, 255, 255, 0.85); border-color: rgba(0,0,0,.16); }

/* "Education" category tag + divider before the level chips */
.suggest-tag {
  display: inline-flex;
  align-items: center;
  gap: 7.7px;
  font-size: 14.85px;          /* 10% larger */
  font-weight: 600;
  padding: 8.8px 15.4px;       /* 10% larger */
  border-radius: 999px;
  background: #2B0326;
  color: #fff;
  user-select: none;
  cursor: default;
}
.suggest-divider {
  width: 1px;
  height: 22px;
  align-self: center;
  background: rgba(43, 3, 38, 0.22);
  margin: 0 4px;
}

/* Audience mode toggle — Education / L&D (share the .suggest-tag pill shape) */
/* Both modes are dark with white text (via .suggest-tag); the selected one gets
   a border in its orb colour — pink for Education, orange for L&D. */
.mode-btn { cursor: pointer; border: 2px solid transparent; }
.mode-btn[data-mode="education"].is-active { border-color: #C03E86; }
.mode-btn[data-mode="lnd"].is-active { border-color: #F7931E; }

/* Level dropdown — consolidates the Primary/Secondary/Further/Higher chips */
.dd-select { position: relative; display: inline-flex; }
.dd-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 14.85px; font-weight: 500; line-height: normal;   /* match the Education button height */
  padding: 9.55px 16.5px; border-radius: 999px; cursor: pointer;
  color: #4a2a44; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(0, 0, 0, 0.08);
  transition: background .15s, color .15s, border-color .15s;
}
.dd-toggle:hover { color: #1f0b1c; background: rgba(255, 255, 255, 0.85); border-color: rgba(0, 0, 0, 0.16); }
.dd-caret { transition: transform .18s ease; }
.dd-toggle[aria-expanded="true"] .dd-caret { transform: rotate(180deg); }
.dd-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  min-width: 150px; padding: 10px;
  /* Show 3½ options so the half-cut 4th hints at scrolling */
  max-height: 169px; overflow-y: auto;
  /* Liquid-glass: translucent fill that blurs whatever sits behind it */
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  box-shadow: 0 20px 44px -18px rgba(43, 3, 38, 0.4);
  z-index: 20;
}
.dd-menu[hidden] { display: none; }
.top-bg .dd-menu .dd-option {
  width: 100%; text-align: center; white-space: nowrap; cursor: pointer;
  font: inherit; font-size: 14.85px; font-weight: 500; line-height: normal;   /* same height + size as the toggle */
  padding: 9.55px 16.5px; border-radius: 999px;
  background: #F8F4F1; border: 1px solid rgba(0, 0, 0, 0.1); color: #2B0326;
  transition: background .12s, border-color .12s;
}
.top-bg .dd-menu .dd-option:hover { background: #efe7e1; border-color: rgba(0, 0, 0, 0.18); }
.top-bg .dd-menu .dd-option.is-selected { border-color: #2B0326; font-weight: 700; }
/* Selected option borders match that dropdown's orb dot colour */
.top-bg .dd-select[data-dd="country"] .dd-menu .dd-option.is-selected { border-color: #65C0E0; }
.top-bg .dd-select[data-dd="type"]    .dd-menu .dd-option.is-selected { border-color: #F8D648; }
.top-bg .dd-select[data-dd="subject"] .dd-menu .dd-option.is-selected { border-color: #D6455C; }
.top-bg .dd-select[data-dd="level"]   .dd-menu .dd-option.is-selected { border-color: #67B893; }

/* Example cards — fanned, rising from the bottom of the hero section */
.hero-cards {
  position: absolute;
  left: 50%;
  bottom: 0;
  /* anchored to the section bottom, pushed down to bleed off, scaled larger */
  transform: translate(-50%, calc(44% + 10px)) scale(1.21);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(16px, 1.8vw, 30px);   /* angled gaps reveal the background between cards */
  width: min(1320px, 90vw);
  pointer-events: none;
}
/* Tablet/desktop: flow the cards BELOW the hero content instead of anchoring
   them to the section bottom. Stacking .top-bg as a flex column and giving the
   cards margin-top:auto pushes them to the bottom on tall viewports (they still
   bleed off via translateY+scale), while on short/wide viewports the column
   simply grows — so there is ALWAYS a gap between the education chips and the
   cards, regardless of how wide the window gets. This replaces the old
   height-tuned transform hacks that only ever fixed one viewport at a time. */
@media (min-width: 768px) {
  /* At least the viewport height, so on tall screens the cards bleed past the
     bottom edge. Use MIN-height (not a fixed height) so that on short viewports
     the section can grow to keep the hero + cards visible instead of dragging
     the cards below a clipped 100vh where they hide behind the next section. */
  .top-bg { display: flex; flex-direction: column; min-height: 100vh; }
  .hero { flex: 0 0 auto; margin-bottom: 112px; }   /* min gap below the chips — clears the "Try me!" orb that sits above the cards */
  .hero-cards {
    position: relative;   /* in-flow, but still the containing block for the annotation */
    left: auto;
    bottom: auto;
    margin-top: auto;         /* absorb slack → sit at the bottom on tall screens */
    /* Negative bottom margin pulls the block down ONLY when it's bottom-anchored
       (tall screens) — enough to carry the short right-hand card past the edge so
       no background shows below it. On short screens the cards already overflow
       the pinned section naturally, and this margin doesn't touch their position,
       so they stay well-visible. */
    margin-bottom: -170px;
    align-self: center;       /* horizontal centring (replaces left:50% + translateX) */
    transform: scale(1.21);   /* centre origin keeps the annotation's placement intact */
  }
}
/* Wide + short viewports: the hero already fills the screen, so don't bleed the
   cards off the bottom (they'd get cut off / hide behind the next section). Sit
   them fully inside the (min-height-grown) section with a tamer scale instead. */
@media (min-width: 768px) and (max-height: 860px) {
  .hero { margin-bottom: 44px; }
  .hero-cards { margin-bottom: 40px; transform: scale(1.06); }
}
.hero-card {
  width: 32%;
  aspect-ratio: 4 / 3;        /* landscape */
  background: #F8F4F1;
  border: 1px solid rgba(0, 0, 0, 0.10);   /* subtle grey line, same as the prompt box */
  box-sizing: border-box;
  border-radius: 11px;
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, 0.35);
  overflow: hidden;            /* clip the embed to the rounded corners */
  display: flex;
  flex-direction: column;      /* subject bar on top, image fills the rest */
}
/* Thin subject-coloured bar across the top of each card */
.hero-card-tag {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #2B0326;
}
.hero-card-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2B0326;         /* purple dot, like the "Introducing" pill dot */
}
.hero-card-meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* live app embedded in card 2 — rendered at desktop size, scaled to fit (JS) */
.hero-card-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 960px;               /* 4:3, matches the card aspect */
  border: 0;
  transform-origin: top left;
  pointer-events: none;        /* preview only — doesn't hijack page scroll */
}
.hero-card-num {
  font-size: clamp(56px, 8vw, 120px);
  font-weight: 800;
  line-height: 1;
  color: #2a0a28;
}
.hero-card--1 {
  width: 34%;                     /* widened a touch; the matched aspect is what stops the right crop */
  aspect-ratio: 5 / 4;           /* slightly narrower → crops the blank left margin off the image */
  /* Outer translate (parent frame) shifts it right so the logo + title stay
     on-screen and raises it so the 3D molecule clears the section edge; the
     inner rotate/translateY is the card's original tilt + placement. */
  transform: translate(78px, -54px) rotate(-9deg) translateY(44px);
  z-index: 1;                     /* behind the middle card */
  margin-right: -64px;           /* extend into / behind card 2 */
  pointer-events: auto;
  cursor: pointer;
}
.hero-card--2 {
  width: 35%;
  transform: rotate(-1deg) translateY(-39px);
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}
.hero-card--3 { width: 38%; aspect-ratio: 8 / 5; transform: rotate(8deg) translateY(2px); z-index: 1; pointer-events: auto; cursor: pointer; }
/* Card 2 doesn't clip, so the "Try me!" orb can straddle the top edge; the
   strip + image keep the rounded corners themselves. */
.hero-card--2 { overflow: visible; }
.hero-card--2 .hero-card-tag { border-radius: 11px 11px 0 0; }
.hero-card--2 .hero-card-img { border-radius: 0 0 11px 11px; }
/* Card 2 (Tube Map) shows the whole landscape screenshot: fit the card width
   and let the height follow the image's aspect ratio instead of cropping. */
.hero-card--2 { aspect-ratio: auto; }
.hero-card--2 .hero-card-img { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 820 / 578; object-fit: fill; }
/* "Try me!" orb — independent layer floating over card 2 (brand orb gradient) */
.card-tryme {
  position: absolute;
  top: -10%;                  /* straddles the top: lower part over the subject bar, rest over the background */
  right: 5%;
  width: 13%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #C03E86;
  box-shadow: 0 10px 24px -8px rgba(192, 62, 134, 0.5);
  display: grid;
  place-items: center;
  z-index: 4;                 /* above the screenshot image */
  pointer-events: auto;       /* hoverable; it's inside the card link so clicks still open it */
  cursor: pointer;
  container-type: size;
  transition: background .18s ease;
}
/* hovering the orb itself drives the colour (reliable across its whole area) */
.card-tryme:hover { background: #A1FCD2; }
.card-tryme:hover .card-tryme-text { color: #2B0326; }
.card-tryme-text {
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  color: #fff;
  text-align: center;
  line-height: 1;
  font-size: 27cqmin;         /* scales with the orb across breakpoints */
  letter-spacing: -0.01em;
  transition: color .18s ease;
}
/* Full-bleed card: anchored to the right so the build panel stays in frame,
   and to the top so the logo sits just under the subject strip (no top crop). */
.hero-card--full .hero-card-img { object-position: right top; }
/* Card 1: anchored right so the blank left margin is cropped and the Henley
   logo sits in the top-left corner (the lesson's right side still shows). */
.hero-card--1 .hero-card-img { object-position: right top; }
.hero-card-img {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;               /* allow the image to fill the area below the bar */
  object-fit: cover;
  object-position: center;
}

/* Hand-written annotation over the hero — lives inside .hero-cards so it
   scales and moves with the cards across every breakpoint. */
.hero-annotation {
  position: absolute;
  top: calc(-22% - 22px);      /* lifted so the all-caps note clears the filter chips */
  right: 8%;                   /* shifted right into the blank corner, clear of "Higher" */
  width: max-content;          /* hug the text so it positions precisely */
  z-index: 5;                  /* above the cards (z-index up to 2) */
  pointer-events: none;
  color: #2B0326;
  text-align: center;
}
.hero-annotation-text {
  margin: 0;
  font-family: 'Shantell Sans', cursive;
  font-weight: 700;              /* clean handwritten with a true bold weight */
  font-size: 13.5px;             /* annotation text (handwritten, all caps) */
  text-transform: uppercase;
  line-height: 1.18;
  letter-spacing: 0.1em;         /* wider tracking */
  color: #2B0326;
  white-space: nowrap;         /* honour the explicit <br>, tidy lines */
  /* lift clear of the arrow and centre over its non-arrow (top) end */
  transform: translate(22px, -32px);
}
.hero-annotation-arrow {
  position: absolute;          /* free of the text box so it can sweep left without widening it */
  top: calc(2% + 16px);        /* dropped ~20px so its top end clears the text */
  right: 0;
  width: 7em;                  /* narrower / more vertical arrow */
  height: auto;
  color: #2B0326;
}

/* Community — light section matching section 1's off-white */
/* Intro statement band — plain centred text over the citrus-peel texture
   (image fills the section at every width, desktop included). */
.intro-band {
  background: url('assets/peel-berry.jpg') center / cover no-repeat;
  padding: clamp(28px, 4vw, 52px) 0;
}
.intro-band-text {
  max-width: 900px;
  margin: 0 auto;                        /* centre the block on the page width */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.6vw, 30px);         /* headline ↕ CTA row */
  text-align: center;
  color: #ffd8b0;                        /* no-JS fallback on the dark berry bg */
  font-size: clamp(20px, 2.5vw, 30px);   /* halved */
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.01em;
}
.intro-line1 { display: block; }
/* Second "sentence" is two columns split by a middle "Or.." */
.intro-cta-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* left  |  Or..  |  right */
  align-items: center;
  gap: clamp(16px, 4vw, 52px);
  width: 100%;
}
.intro-col {
  display: flex;
  flex-direction: row;           /* text + arrow / button + text on one line */
  align-items: center;
  gap: 0.5em;
  text-align: center;
}
.intro-tw { white-space: nowrap; }   /* keep each column's text on one line */
.intro-col--mid { white-space: nowrap; }
.intro-arrow { font-size: 1.3em; line-height: 1; color: #fff; }   /* match the white typed text */
.intro-signup-btn {
  display: inline-block;
  white-space: nowrap;                   /* button label stays on one line */
  background: #F8D648;                    /* yellow */
  color: #2B0326;                         /* dark text — legible on yellow */
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 700;
  letter-spacing: 0;
  padding: 0.7em 1.5em;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.intro-signup-btn:hover { background: #e6c22e; transform: translateY(-1px); }
/* Arrow + button fade in after their column is typed */
.intro-reveal { opacity: 0; transition: opacity .45s ease; }
.intro-reveal.is-revealed { opacity: 1; }

/* Typewriter reveal — headline carries the pink→orange "Fruitful" ombre */
.intro-band-text .tw-on {
  background: linear-gradient(110deg, var(--pink-2), var(--pink) 55%, #ff9d57);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.intro-band-text .tw-on2 { color: #fff; }         /* CTA-row text reads in plain white */
.intro-band-text .tw-off { color: transparent; }  /* reserves the final layout while typing (no reflow) */
/* Caret drawn as a border on the typed span — it adds no advance width
   (the negative margin cancels it), so the line never reflows mid-word. */
.intro-band-text .tw-caret-on {
  border-right: 2px solid var(--pink-2);
  margin-right: -2px;
}
@media (max-width: 620px) {
  .intro-band-text { padding-left: 10%; padding-right: 10%; }   /* +10% side padding on phones */
  .intro-cta-row { grid-template-columns: 1fr; gap: 14px; }     /* stack on phones */
  .intro-col { justify-content: center; }                       /* centre each item on screen */
  /* Right column: put "to create for yourself!" below the Sign Up button */
  .intro-cta-row > .intro-col:last-child { flex-direction: column; gap: 12px; }
}

.community {
  background: #F8F4F1;
  padding: 96px 0 135px;   /* +50% top/bottom — closer to the How-it-works gaps */
}
.community-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin-bottom: 70px;            /* gap between the subject buttons and the thumbnails */
}
.community-title {
  font-size: clamp(28px, 4vw, 40px);   /* standardised with the FAQ + How-it-works titles */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1f0b1c;
}
/* title + handwritten annotation stack, filling the head height so the
   annotation can drop to the bottom row of subject buttons */
.community-titles {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.community-annotation {
  position: relative;
  width: max-content;
  margin-top: auto;            /* push down to the bottom of the button grid */
  transform: translateY(-14px); /* nudge up to centre on the bottom button row */
  z-index: 5;                  /* keep the arrow above the thumbnails it points at */
}
.community-subtitle {
  margin: 0;
  font-family: 'Shantell Sans', cursive;
  font-weight: 700;
  /* exact rendered match to the hero note: its 13.5px is scaled 1.21x by
     .hero-cards, so bake that factor in here (this block isn't scaled) */
  font-size: 16.34px;          /* 13.5 x 1.21 */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.18;
  color: #2B0326;
}
.community-annotation-arrow {
  position: absolute;
  left: 100%;                  /* anchored to the end of the handwritten text */
  top: 3px;
  margin-left: -29.5px;        /* ~12px gap between the last letter and the arrow tail */
  width: 52px;                 /* small arrow; stroke-width bumped in the SVG to keep the hero lineweight */
  height: auto;
  transform-origin: 80% 8%;    /* the arrow's tail */
  transform: rotate(-20deg);   /* head points straight down at the thumbnails */
}

/* Small pastel subject pills, 5 across, top-aligned with the heading */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 8px;
}
.cat {
  background: var(--c, #eee);
  color: #2a1726;
  border: 2px solid rgba(0, 0, 0, 0.05);   /* 2px so the selected state doesn't shift size */
  border-radius: 999px;
  padding: 8px 15px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: transform .12s, box-shadow .18s, filter .18s, border-color .18s;
}
.cat:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(0,0,0,.3); filter: brightness(1.03); }
.cat:active { transform: translateY(0) scale(.96); }
/* selected subject — dark plum border */
.cat.is-active { border-color: #2B0326; }
.cat:disabled { opacity: 0.4; cursor: not-allowed; }
.cat:disabled:hover { transform: none; box-shadow: none; filter: none; }

/* Locked (signup-gated) subject buttons: the wrapper carries a hover popup,
   since a disabled button can't receive hover itself. */
.cat-lock { position: relative; display: flex; cursor: pointer; }
.cat-lock > .cat { flex: 1 1 auto; }                 /* button fills the wrapper, keeping its grid width */
.cat-lock .cat:disabled { pointer-events: none; }   /* let the wrapper catch the hover */
.cat-tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px) scale(.96);
  transform-origin: bottom center;
  background: #C03E86;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  padding: 7px 11px;
  border-radius: 11px;
  width: max-content;
  max-width: 168px;
  text-align: center;
  box-shadow: 0 12px 26px -10px rgba(192, 62, 134, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 30;
}
.cat-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #C03E86;
}
.cat-lock:hover .cat-tip { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* gallery grid — 4 per row, wrapping into two rows */
.gallery-carousel { position: relative; }
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 56.16px 18px;              /* row gap between the two rows, column gap between cards */
}
.carousel-arrow {
  position: absolute;
  top: 38%;                       /* refined to the thumbnail centre by JS */
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: #2B0326;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .15s, box-shadow .15s;
}
.carousel-arrow:hover { background: #f4f0f1; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.45); }
.carousel-arrow[hidden] { display: none; }
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }
/* Static two-row grid — the scroll arrows are no longer needed */
.gallery-carousel .carousel-arrow { display: none; }
/* Placeholder project cards (thumbnail stand-ins) */
.card--placeholder { cursor: default; pointer-events: none; }
.card-title--muted { color: #9aa5b4; font-weight: 600; }
.card {
  flex: 0 0 calc(25% - 13.5px);   /* exactly 4 across (3 gaps of 18px) */
  min-width: 0;                   /* let long titles clip instead of widening the card */
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform .2s;
  text-decoration: none;          /* linked cards (anchors) stay un-underlined */
  color: inherit;
}
.card:hover { transform: translateY(-4px); }
.card:hover .card-thumb { box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.28); }
.card-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.22);
  transition: box-shadow .2s;
}
.card-body {
  padding: 12px 2px 0;
}
.card-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #1f0b1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Subject pill under each card — mirrors the .cat filter buttons */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.card-tag {
  display: inline-block;
  color: #2a1726;
  font-size: 14.4px;          /* 20% larger for legibility */
  font-weight: 600;
  padding: 6px 14.4px;        /* 20% larger */
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.05);
}
/* Level pill — consistent greyed-out box regardless of level */
.card-level {
  background: #E2E0DF;
  color: #857f79;
  border-color: rgba(0, 0, 0, 0.04);
}
/* Org-credit button under the subject pill — F8F4F1 with the same border.
   Left-aligned; grows down + right (20% larger logo). */
.card-org {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  margin-top: 8px;
  padding: 7.2px 17.28px;       /* +20% again */
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.05);
  background: #F8F4F1;
  text-decoration: none;
  cursor: pointer;
}
.card-org img {
  height: 25.92px;              /* +20% again */
  width: auto;
  display: block;
  mix-blend-mode: multiply;     /* drop the white logo backgrounds onto F8F4F1 */
}

/* Placeholder section — title + three cards (content to be added later) */
.placeholder-section {
  background: #F8F4F1;
  padding: 100px 0 116px;
}

/* ============================================================
   About page — single, non-scrolling page over the motion bg,
   with a centred two-column card (image + title/text each side)
   ============================================================ */
.about-main {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.about-card {
  width: min(62vw, 1040px);
  height: auto;                     /* sized by the media + text rows below */
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #F8F4F1;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 44px 100px -44px rgba(43, 3, 38, 0.55);
}
.about-col {
  display: grid;
  grid-template-rows: min(52vh, 362px) auto;   /* media height (−20%); text sizes to its content */
  min-height: 0;
}
.about-col + .about-col { border-left: 1px solid rgba(43, 3, 38, 0.08); }
.about-media {
  background: linear-gradient(135deg, #eef3f9, #f6f1f4);
  display: grid;
  place-items: center;
  color: rgba(43, 3, 38, 0.22);
  overflow: hidden;
}
.about-media-ico { width: 46px; height: 46px; }
.about-media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;   /* keep the founders' faces in frame */
  display: block;
}

/* ============================================================
   "Our Mission" animation — a typed prompt becomes a blooming,
   spinning 3D creation, orbited by the brand-colour dots.
   Everything sits on a #2B0326 stage, rest of the palette on top.
   ============================================================ */
.about-media--anim {
  background: #2B0326;
  display: block;
  position: relative;
}
.am-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* Soft brand glow breathing behind the bloom */
.am-glow {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 60%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(235, 124, 178, 0.55), rgba(150, 90, 255, 0.28) 42%, rgba(43, 3, 38, 0) 70%);
  filter: blur(4px);
  animation: am-glow 6s ease-in-out infinite;
}
@keyframes am-glow {
  0%, 100% { opacity: 0.6;  scale: 1; }
  50%      { opacity: 1;    scale: 1.14; }
}

/* --- Brand F-spinner: the AI "doing the work" — the logo dots orbit out
       and settle back into the Fruit3D "F" (canvas, driven by script.js) --- */
.am-spinner {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 190px;
  height: 190px;
  translate: -50% -50%;
}
.am-spin {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Spark: rises from the prompt into the bloom --- */
.am-spark {
  position: absolute;
  left: 50%;
  bottom: 54px;
  width: 7px;
  height: 7px;
  translate: -50% 0;
  border-radius: 50%;
  background: #EB7CB2;
  box-shadow: 0 0 12px 3px #EB7CB2;
  opacity: 0;
  animation: am-spark 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes am-spark {
  0%, 40% { opacity: 0; translate: -50% 0; }
  46%     { opacity: 1; translate: -50% 0; }
  70%     { opacity: 1; translate: -50% -128px; }
  78%     { opacity: 0; translate: -50% -140px; }
  100%    { opacity: 0; translate: -50% -140px; }
}

/* --- Twinkling sparkles in the palette --- */
.am-twinkle {
  position: absolute;
  width: 15px;
  height: 15px;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  opacity: 0;
  scale: 0.4;
  animation: am-twinkle 3.6s ease-in-out infinite;
}
.am-twinkle--1 { left: 20%;  top: 24%;    background: #ffca3a; animation-delay: 0.2s; }
.am-twinkle--2 { right: 17%; top: 34%;    background: #3bb6e8; animation-delay: 1.5s; }
.am-twinkle--3 { left: 27%;  bottom: 32%; background: #EB7CB2; animation-delay: 2.7s; }
@keyframes am-twinkle {
  0%, 100% { opacity: 0; scale: 0.4; }
  50%      { opacity: 0.95; scale: 1; }
}

/* --- Prompt bar: "as easy as writing a sentence" --- */
.am-prompt {
  position: absolute;
  left: 50%;
  bottom: 22px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: calc(100% - 32px);
  padding: 8px 15px;
  border-radius: 999px;
  background: #F8F4F1;
  border: 1px solid rgba(43, 3, 38, 0.06);
  box-shadow: 0 10px 26px -12px rgba(43, 3, 38, 0.65);
}
/* Replicates the homepage "Create something Fruitful" slogan (Raleway 800,
   dark plum text; "fruitful" carries the pink→orange .grad-text ombre). */
.am-prompt-txt {
  font-family: 'Raleway', -apple-system, system-ui, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: #2B0326;
  white-space: nowrap;
  overflow: hidden;
  animation: am-type 5s steps(26, end) infinite;
}
.am-ai { color: #2B0326; }       /* "with AI" — dark plum */
@keyframes am-type {
  0%       { max-width: 0; }
  36%, 88% { max-width: 250px; }
  100%     { max-width: 0; }
}
.am-caret {
  flex: none;
  width: 2px;
  height: 14px;
  background: #2B0326;
  animation: am-blink 1s steps(1) infinite;
}
@keyframes am-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .about-media--anim * { animation: none !important; }
  .am-prompt-txt { max-width: 168px; }
}
.about-text {
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;       /* left-align title + text */
  justify-content: flex-start;
  gap: 10px;
  overflow-y: auto;              /* safety for very long copy */
}
.about-title {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1f0b1c;
}
.about-body {
  margin: 0;
  font-size: 13.5px;             /* sized to fit the 30% text area under the larger media */
  line-height: 1.5;
  color: #5a3a52;
}
.about-body a {                  /* inline links keep the body colour, just underlined */
  color: inherit;
  text-decoration: underline;
}
/* Tablet/mobile: let the card stack and the page scroll */
@media (max-width: 767px) {
  /* Higher specificity than the base .signup-page rule so the page can scroll */
  .signup-page.about-page { height: auto; overflow: visible; }
  .about-main { height: auto; min-height: 100vh; padding: 96px 18px 40px; }
  /* Drop the grey card so the coloured motion background shows through on mobile */
  .about-card { width: 100%; max-width: 460px; height: auto; grid-template-columns: 1fr; background: transparent; box-shadow: none; }
  .br-hide-mobile { display: none; }   /* keep "HQ. Andrew" on one line on mobile */
  /* Shorter media on mobile — less empty space, less scrolling */
  .about-col { grid-template-rows: min(40vh, 300px) auto; }
  .about-col + .about-col { border-left: none; border-top: 1px solid rgba(43, 3, 38, 0.08); }
  .about-media { min-height: 180px; }
  .about-media--anim .am-scene { scale: 0.9; }
  .about-body { font-size: 15px; }   /* more readable body text on mobile */
}

/* ============================================================
   Press release page (/press-release-fruitai) — the Company card
   repurposed: a single-column card floating on the colourful
   motion background. Upper: dark-purple stage spanning the full
   card width, with the centred spinning F + wordmark (no founders
   photo, no left/right split). Lower: the statement. Not linked
   from anywhere.
   ============================================================ */
.press-page.about-page { height: auto; overflow: visible; }
.press-main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 24px 48px;
}
.press-card {
  display: block;                    /* override the Company card's 2-column grid */
  width: min(92vw, 540px);
  background: #F8F4F1;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 44px 100px -44px rgba(43, 3, 38, 0.55);
}
/* Upper: dark-purple stage, full card width */
.press-anim {
  position: relative;
  height: clamp(240px, 40vh, 340px);
}
/* Centre the spinning F (and its glow) in the stage */
.press-anim .am-spinner,
.press-anim .am-glow { top: 42%; }
/* Wordmark sits where the typewriter prompt used to be */
.press-wordmark {
  position: absolute;
  left: 50%;
  bottom: 30px;
  translate: -50% 0;
  width: min(260px, 72%);
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}
/* Lower: centred statement */
.press-text {
  padding: 30px 34px 38px;
  text-align: center;
}
.press-lead {
  margin: 0 0 14px;
  font-family: 'Raleway', -apple-system, system-ui, sans-serif;
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1f0b1c;
}
.press-body {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
  color: #5a3a52;
}
@media (max-width: 767px) {
  .press-anim { height: clamp(220px, 38vh, 300px); }
  .press-anim .am-spinner { scale: 0.92; }
}

/* Partner logo marquee — continues the off-white section above */
.partners {
  background: #2B0326 url('assets/peel-berry.jpg') center / cover no-repeat;
  padding: 56px 0 35.7px;        /* bottom trimmed 30% — tighter gap to the quote cards */
  text-align: center;
  overflow: hidden;
}
.partners-label {
  margin: 0 0 40px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.partners-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* fade the logos in/out at the edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.partners-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: partners-marquee 34s linear infinite;
}
.partners-viewport:hover .partners-track { animation-play-state: paused; }
.partners-logo {
  flex: none;
  margin-right: 72px;          /* uniform spacing incl. the seam → seamless -50% loop */
  height: 38px;                /* base height for the well-proportioned wordmarks */
  width: auto;
  display: block;
  object-fit: contain;
  opacity: 0.9;                /* soften the white logos on the plum */
}
/* Optical size balancing — aspect ratios vary wildly, so nudge the outliers
   (applies to both the visible set and its duplicate via the src match). */
.partners-logo[src*="charterhouse"] { height: 26px; }   /* very wide wordmark — shrink */
.partners-logo[src*="gdst"]         { height: 78px; }   /* square mark — enlarge */
.partners-logo[src*="hruc"]         { height: 50px; }
.partners-logo[src*="shu"]          { height: 50px; }
@keyframes partners-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none; }
}

/* Section 3 — testimonials on the peel-berry texture */
.quotes {
  background: #240a23 url('assets/peel-berry.jpg') center / cover no-repeat;
  color: #efe6ef;
  padding: 46.9px 0 84px;        /* top trimmed 30% — tighter gap to the logo carousel */
}
.quotes-inner {
  display: grid;
  grid-template-columns: 1fr 3fr;   /* 1/4 logo · 3/4 quotes */
  gap: 48px;
  align-items: center;              /* animation centres on the boxes' height */
}
.quotes-media {
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* spinner at the top of the cards, button at the bottom */
  align-items: center;
  align-self: stretch;              /* fill the row height so the button reaches the card bottom */
  gap: 20px;
  padding: 0 24px;
}
.quotes-logo {
  width: 100%;
  max-width: 170px;
  aspect-ratio: 1 / 1;
  height: auto;              /* 20% smaller than before (dropped the 1.25× scale) */
}
/* Yellow CTA under the spinning F */
.quotes-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  background: #F8D648;
  color: #2B0326;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.quotes-cta:hover { background: #f2cc2a; transform: translateY(-1px); }
/* Right column: heading across the top, then the two quote boxes */
.quotes-list {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two quote boxes side by side */
  gap: 24px;
  align-items: stretch;
}
/* each quote contained in a rounded box */
.quote {
  margin: 0;
  display: flex;
  flex-direction: column;       /* speech mark on top, text below (full width) */
  align-items: flex-start;
  gap: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 24px 26px;
}
.quote-mark {
  width: 50px;
  height: auto;
  flex-shrink: 0;
}
.quote-content {
  flex: 1;                 /* fill the card height... */
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.quote-text {
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  color: #fff;
  margin: 0 0 16px;
  max-width: 760px;
}
.quote-by {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: auto;        /* ...so name + logo sit at the bottom of the card */
}
.quote-name { font-weight: 700; color: #fff; }
.quote-role, .quote-org { color: rgba(255, 255, 255, 0.7); font-size: 14.5px; }
.quote-logo { height: 46.9px; width: auto; }
/* M-Shule PNG has transparent left padding (scales with size); pull it back so
   its visual gap from the name matches HRUC's. */
.quote-logo--mshule { height: 58.6px; margin-left: -40px; }

/* FAQs — centred accordion on the shared motion background */
.faq {
  position: relative;
  z-index: 1;
  max-width: 720px;          /* centred with generous side padding */
  margin: 0 auto 80px;
  padding: 0 24px;
}
.faq-heading {
  text-align: center;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1f0b1c;
  margin: 0 0 36.4px;        /* 28px + 30% */
}
/* collapsible category (top-level accordion) */
.faq-cat { border-bottom: 1px solid rgba(0, 0, 0, 0.16); }
.faq-cat-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  cursor: pointer;
  padding: 22px 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1f0b1c;
}
.faq-cat-q::-webkit-details-marker { display: none; }
.faq-cat-q:hover { color: #C03E86; }
.faq-cat[open] > .faq-cat-q .faq-plus { display: none; }
.faq-cat[open] > .faq-cat-q .faq-minus { display: inline; }

.faq-list { border-top: 1px solid rgba(0, 0, 0, 0.12); }
/* questions nested inside an open category — indented, no extra top rule */
.faq-cat .faq-list { border-top: none; padding: 0 0 14px 16px; }
.faq-item { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
/* drop the last question's divider so it doesn't clash with the category divider */
.faq-list .faq-item:last-child { border-bottom: none; }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  cursor: pointer;
  padding: 22px 4px;
  font-size: 18px;
  font-weight: 700;
  color: #1f0b1c;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: #C03E86; }
.faq-icon {
  flex-shrink: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: inherit;        /* follows the question colour */
}
.faq-minus { display: none; }
.faq-item[open] .faq-plus { display: none; }
.faq-item[open] .faq-minus { display: inline; }
.faq-a {
  padding: 0 4px 24px;
  font-size: 16px;
  line-height: 1.6;
  color: #4a3a44;
  max-width: 620px;
}
.faq-a p { margin: 0 0 12px; }
.faq-a p:last-child { margin-bottom: 0; }

/* Keep in Touch / Let us Know — two columns on the section-1 gradient */
.keep-in-touch {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #eaf4fb;
  padding: 80px 0 88px;
}
.kit-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
}
.kit-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.kit-col + .kit-col {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  padding-left: 56px;
}
.kit-fruit {
  width: 92px;
  height: auto;
  display: block;
  margin: 0 auto 6px;
}
/* Banana reads small against the blueberry — bump it 10% */
.kit-col:first-child .kit-fruit { width: 101px; }
.kit-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1f0b1c;
  margin-bottom: 12px;
}
.kit-text {
  font-size: 16px;
  line-height: 1.5;
  color: #4a3a44;
  max-width: 360px;
  text-wrap: balance;
  margin: 0 auto 26px;
}
.kit-form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 400px;
  /* pin to the bottom of the column so it lines up with "Talk to us" */
  margin: auto auto 0;
}
.kit-input {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  height: 50px;
  box-sizing: border-box;
  padding: 0 18px;
  font: inherit;
  font-size: 15px;
  color: #1f0b1c;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.kit-input::placeholder { color: #9a8f95; }
.kit-input:focus {
  border-color: #facc15;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.28);
}
.kit-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #facc15;
  color: #3a2c00;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  height: 50px;
  box-sizing: border-box;
  padding: 0 26px;
  cursor: pointer;
  transition: filter .15s, transform .12s;
}
.kit-submit:hover { filter: brightness(1.05); }
.kit-submit:active { transform: scale(.97); }
/* "Talk to us" — matched to the blueberry (cyan) */
.kit-submit--blue {
  background: #3cc1e0;
  color: #06303a;
  padding-left: 30px;
  padding-right: 30px;
  /* pin to the bottom of the column so it lines up with "Submit" */
  margin-top: auto;
}

/* Footer (Fruit3D) */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px 0 32px;
  color: #efe6ef;
}
/* Textured purple background */
.footer-tex {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    url('assets/peel-berry.jpg') center/cover no-repeat,
    #240a23;
}
.footer-tex::after {
  /* top fade so the dark page blends into the texture */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(36,10,35,0) 22%);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 48px;
  padding-bottom: 48px;
}

/* Brand block */
.footer-brand { max-width: 340px; }
.footer-logo-img {
  height: 36px;
  width: auto;
  display: block;
  margin-bottom: 16px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.4));
}
.footer-tagline {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 20px;
}
.footer-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-demo {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #2a0a28;
  background: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  transition: transform .12s, filter .18s;
}
.btn-demo:active { transform: scale(.97); }
.btn-demo:hover { filter: brightness(1.04); }
.btn-demo--pink { background: #C03E86; color: #fff; font-weight: 700; }
.btn-demo--peach { background: #F9D9D2; }

/* Base bar — simple links across the bottom */
/* Social buttons — bottom-right of the footer, aligned with the CTA buttons */
.footer-social {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #efe6ef;
  cursor: pointer;
  transition: transform .12s, background .18s, border-color .18s;
}
.footer-social-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.38);
  transform: translateY(-2px);
}
.footer-social-btn svg { width: 17px; height: 17px; fill: currentColor; }
/* Retired social links — markup kept so they can be switched back on later */
.footer-social-btn[hidden] { display: none; }
/* Gradient slogan — level with the wordmark, right-aligned on desktop */
.footer-slogan {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
@media (min-width: 768px) {
  .footer-inner { position: relative; }
  .footer-slogan {
    position: absolute;
    top: 0;
    right: 24px;                 /* = .container padding, so it lines up with the content edge
                                    (the social icons) at every width, not the outer edge */
    height: 36px;                /* = wordmark height, so they sit level */
    display: flex;
    align-items: center;
    text-align: right;
  }
}
.footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 28px;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 24px;
  color: rgba(255,255,255,.55);
  font-size: 13px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.footer-links a {
  color: rgba(255,255,255,.78);
  font-size: 14px;
  transition: color .15s;
}
.footer-links a:hover { color: #fff; }

/* ============================================================
   Get Started modal
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(43, 3, 38, 0.72);   /* #2B0326 — homepage visible behind */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.modal-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.modal-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(352px, 100%);
  max-height: calc(100dvh - 48px);
  border-radius: 18px;
  background: #eaf4fb;                  /* fallback under the gradient */
  box-shadow: 0 40px 100px -24px rgba(0, 0, 0, 0.6);
  transform: scale(.97);
  transition: transform .2s ease;
}
.modal-overlay.is-open .modal-card { transform: scale(1); }
/* the drifting section-1 gradient, scaled to the modal */
.modal-card .top-fx { z-index: 0; }

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.55);
  color: #1f0b1c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.9); }

.modal-content {
  position: relative;
  z-index: 1;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-logo { height: 42px; width: auto; align-self: flex-start; display: block; margin-bottom: 4px; }
.modal-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #1f0b1c;
  margin: 0;
}
.modal-lede {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(31, 11, 28, 0.6);
  margin: 0 0 4px;
}
.modal-form { display: flex; flex-direction: column; gap: 12px; }
.modal-field { display: flex; flex-direction: column; gap: 6px; }
.modal-label { font-size: 13px; font-weight: 600; color: #1f0b1c; }
.modal-req { color: #EB7CB2; }
.modal-textarea { resize: vertical; min-height: 72px; font-family: inherit; }
/* Mobile: the Get Started (signup) modal fills the screen height and never scrolls */
@media (max-width: 767px) {
  #auth-modal { padding: 0; }
  #auth-modal .modal-card {
    width: 100%; max-width: 100%;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0;
  }
  #auth-modal .modal-content {
    height: 100%; max-height: 100dvh;
    overflow: hidden;
    justify-content: center;
  }
  #auth-modal .modal-textarea { min-height: 56px; }
}
.modal-providers { display: flex; flex-direction: column; gap: 10px; }
.modal-provider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 12px;
  padding: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #1f0b1c;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.modal-provider:hover { background: #f7f4f2; border-color: rgba(0, 0, 0, 0.24); }
a.modal-provider { text-decoration: none; }
.modal-switch {
  text-align: center;
  font-size: 13px;
  color: rgba(31, 11, 28, 0.6);
  margin: 4px 0 0;
}
.modal-switch a { color: #2B0326; font-weight: 600; text-decoration: underline; }
.modal-badge {
  position: absolute;
  top: -9px;
  right: 14px;
  background: #e7ecff;
  color: #4a5bd0;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.modal-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(31, 11, 28, 0.4);
}
.modal-or::before, .modal-or::after { content: ''; flex: 1; height: 1px; background: rgba(0, 0, 0, 0.12); }
.modal-email {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 12px;
  padding: 13px 16px;
  font: inherit;
  font-size: 15px;
  color: #1f0b1c;
  outline: none;
  transition: border-color .15s;
}
.modal-email::placeholder { color: #9a8f95; }
.modal-email:focus { border-color: #2B0326; }
.modal-continue {
  width: 100%;
  background: #2B0326;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s, transform .12s;
}
.modal-continue:hover { filter: brightness(1.25); }
.modal-continue:active { transform: scale(.99); }
.modal-terms {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(31, 11, 28, 0.5);
  margin: 4px 0 0;
}
.modal-terms a { color: rgba(31, 11, 28, 0.72); text-decoration: underline; }
.modal-rule { height: 1px; background: rgba(0, 0, 0, 0.1); margin: 10px 0 2px; }
.modal-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(31, 11, 28, 0.55);
  margin: 0;
}
.modal-sso a { color: rgba(31, 11, 28, 0.75); text-decoration: underline; }

/* ============================================================
   Standalone Sign Up page (/signup) — full-screen, no scroll
   ============================================================ */
.signup-page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #eaf4fb;          /* base under the drifting gradient */
}
.signup-page > .top-fx { position: fixed; inset: 0; z-index: 0; }
/* header sits transparent over the gradient, exactly like the home-page hero */
.signup-page .site-header { background: transparent; backdrop-filter: none; }
/* Company + Investors pages — replicate the homepage header (dark plum nav + pink Get started) */
.about-page .header-nav a,
.investor-page .header-nav a { color: #4a2a44; }
.about-page .header-nav a:hover,
.investor-page .header-nav a:hover { color: #1f0b1c; }
.about-page .btn-ghost,
.investor-page .btn-ghost { color: #4a2a44; }
.about-page .btn-ghost:hover,
.investor-page .btn-ghost:hover { color: #1f0b1c; }
.about-page .btn-light,
.investor-page .btn-light { background: #C03E86; color: #fff; }
.about-page .btn-light:hover,
.investor-page .btn-light:hover { background: #a53573; }
.signup-main {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.signup-card { transform: none; }   /* not opening from the modal's closed state */

/* Investor page — dark card, white copy, access-code box + portal + request */
.investor-card { background: #2B0326; }
.investor-card .modal-title { color: #fff; }
.investor-lede { font-size: 15.6px; color: rgba(255, 255, 255, 0.82); }   /* 20% larger, white on dark */
.investor-access {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.investor-code {
  flex: 1;
  min-width: 0;
  background: #F8F4F1;
  color: #2B0326;
  border: 1px solid rgba(43, 3, 38, 0.22);
  border-radius: 12px;
  padding: 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
}
.investor-code:focus { outline: none; border-color: #2B0326; }
.investor-code::placeholder {
  color: #2B0326;
  opacity: 0.5;
  font-weight: 600;
  letter-spacing: normal;
  text-indent: 0;
}
.investor-error {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #c0392b;
  text-align: center;
}
.investor-request {
  margin-top: 10px;
  background: #A1FCD2;
  color: #2B0326;
  display: block;
  text-align: center;
}
.investor-request:hover { filter: brightness(1.04); }
.signup-status {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #2B0326;
  text-align: center;
}
.signup-status.is-error { color: #c0392b; font-weight: 500; }

/* ============================================================
   "What type of 3D content?" — Headspace-style chooser grid
   ============================================================ */
.content3d {
  background: #F8F4F1;
  padding: 108px 0 138px;   /* +50% top/bottom — closer to the How-it-works gaps */
}
.content3d-title {
  font-size: clamp(28px, 4vw, 40px);   /* standardised with the other section titles */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1f0b1c;
  text-align: left;
  margin: 0 0 36px;
}
.c3d-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.c3d-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  background: #F8F4F1;
  border: 1px solid #2B0326;
  border-radius: 14px;
  padding: 18px 20px;
  cursor: pointer;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  color: #1f0b1c;
  text-align: left;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.c3d-card:hover {
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.3);
  border-color: #2B0326;
  transform: translateY(-1px);
}
.c3d-card:focus-visible { outline: 2px solid #2B0326; outline-offset: 2px; }
.c3d-card-title { flex: 1 1 auto; }
.c3d-card-right { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.c3d-chev { width: 18px; height: 18px; color: #2B0326; flex: none; }

.c3d-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.c3d-badge svg { width: 24px; height: 24px; display: block; }
.c3d-badge--see      { background: #BDE2F4; }
.c3d-badge--follow   { background: #5DBA8E; }
.c3d-badge--decide   { background: #EE9FC4; }
.c3d-badge--diagnose { background: #56B7E5; }
.c3d-badge--explore  { background: #F5C631; }
.c3d-badge--build    { background: #C2D62B; }

/* Content popups reuse the modal system; these style their inner copy */
.c3d-badge--lg { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 4px; }
.c3d-badge--lg svg { width: 34px; height: 34px; }
.content-modal .content-sub {
  margin: 8px 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #1f0b1c;
  text-align: center;
}
.content-modal .content-body {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(31, 11, 28, 0.8);
  text-align: center;
}
.content-modal .modal-continue { text-decoration: none; }
.content-modal .modal-title { text-align: center; }   /* centre the title under the logo */
/* "Interactive 3D …" CTA: F logo + label */
.content-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.content-cta-logo { height: 20px; width: auto; display: block; flex: none; }
.content-cta.is-disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; }

/* Why 3D — explainer cards, one centred under each content-type column */
.why3d-title { margin-top: 96px; }   /* gap below "Explore 3D content types", above "Why Fruit3D?" */
/* The first title in the section (now "Why 3D AI?") starts at the top, no drop */
.content3d .why3d-title:first-of-type { margin-top: 0; }
/* "Explore 3D content types" (middle title) — gap above it */
.content3d .content3d-title:not(.why3d-title) { margin-top: 96px; }
.why3d-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.why3d-card {
  background: #FCFAF8;
  border-radius: 24px;
  padding: 28px 28px 32px;
  box-shadow: 0 22px 48px -30px rgba(31, 11, 28, 0.5);
}
.why3d-art {
  margin: 4px 0 22px;
}
.why3d-art svg {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  margin-inline: auto;          /* keep each animation centred on its card */
}
.why3d-placeholder {            /* placeholder art block — matches the animation area */
  width: 100%;
  max-width: 220px;
  aspect-ratio: 220 / 150;
  margin: 4px auto 22px;
  border-radius: 16px;
  background: rgba(43, 11, 28, 0.05);
  border: 1px dashed rgba(43, 11, 28, 0.18);
}

/* "Fully Customisable" — AI fills 95% (pink), You add the final 5% (green), tick */
.why3d-customise .cust-sys   { animation: cust-fade 5.5s ease-in-out infinite; }
.why3d-customise .cust-pink  { animation: cust-pink 5.5s ease-in-out infinite; }
.why3d-customise .cust-green { animation: cust-green 5.5s ease-in-out infinite; }
.why3d-customise .cust-check {
  transform-box: fill-box;
  transform-origin: center;
  animation: cust-check 5.5s ease-out infinite;
}
.why3d-customise .cust-n95,
.why3d-customise .cust-ai   { opacity: 0; animation: cust-a-in 5.5s ease infinite; }
.why3d-customise .cust-n5,
.why3d-customise .cust-you  { opacity: 0; animation: cust-b-in 5.5s ease infinite; }

@keyframes cust-pink {           /* AI fills to 95% and holds there */
  0%   { stroke-dashoffset: 100; }
  22%  { stroke-dashoffset: 0; }
  86%  { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 100; }
}
@keyframes cust-green {          /* You add the final 5% */
  0%, 30% { stroke-dashoffset: 100; }
  42%     { stroke-dashoffset: 0; }
  86%     { stroke-dashoffset: 0; }
  90%     { stroke-dashoffset: 100; }
  100%    { stroke-dashoffset: 100; }
}
@keyframes cust-check {          /* tick pops once You finish the 5% */
  0%, 50%   { transform: scale(0); }
  56%       { transform: scale(1.2); }
  61%       { transform: scale(1); }
  86%       { transform: scale(1); }
  90%, 100% { transform: scale(0); }
}
@keyframes cust-a-in {           /* 95% + AI fade in with the pink bar */
  0%, 16% { opacity: 0; }
  24%     { opacity: 1; }
  86%     { opacity: 1; }
  90%, 100% { opacity: 0; }
}
@keyframes cust-b-in {           /* 5% + You fade in with the green bar */
  0%, 38% { opacity: 0; }
  46%     { opacity: 1; }
  86%     { opacity: 1; }
  90%, 100% { opacity: 0; }
}
@keyframes cust-fade {           /* soft reset between loops */
  0%, 86% { opacity: 1; }
  89%     { opacity: 0; }
  99%     { opacity: 0; }
  100%    { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .why3d-customise .cust-sys,
  .why3d-customise .cust-pink,
  .why3d-customise .cust-green,
  .why3d-customise .cust-check,
  .why3d-customise .cust-n95,
  .why3d-customise .cust-n5,
  .why3d-customise .cust-ai,
  .why3d-customise .cust-you { animation: none; }
  .why3d-customise .cust-pink,
  .why3d-customise .cust-green { stroke-dashoffset: 0; }          /* completed 95% + 5% */
  .why3d-customise .cust-n95,
  .why3d-customise .cust-n5,
  .why3d-customise .cust-ai,
  .why3d-customise .cust-you { opacity: 1; }
}

/* "Orchestration" — a pipeline flows through multiple model nodes, then outputs */
.why3d-orchestrate .orch-sys  { animation: orch-fade 5s ease-in-out infinite; }
.why3d-orchestrate .orch-flow { animation: orch-flow 5s ease-in-out infinite; }
.why3d-orchestrate .orch-arrow {
  transform-box: fill-box;
  transform-origin: center;
  animation: orch-arrow 5s ease-out infinite;
}
.why3d-orchestrate .orch-node {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}
.why3d-orchestrate .node-a { animation: orch-node-a 5s ease-out infinite; }
.why3d-orchestrate .node-b { animation: orch-node-b 5s ease-out infinite; }
.why3d-orchestrate .node-c { animation: orch-node-c 5s ease-out infinite; }
.why3d-orchestrate .orch-ping {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.why3d-orchestrate .ping-a { animation: orch-ping-a 5s ease-out infinite; }
.why3d-orchestrate .ping-b { animation: orch-ping-b 5s ease-out infinite; }
.why3d-orchestrate .ping-c { animation: orch-ping-c 5s ease-out infinite; }

@keyframes orch-flow {
  0%   { stroke-dashoffset: 100; }
  45%  { stroke-dashoffset: 0; }
  86%  { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 100; }
}
@keyframes orch-arrow {
  0%, 45%   { transform: scale(0); }
  50%       { transform: scale(1.2); }
  55%       { transform: scale(1); }
  86%       { transform: scale(1); }
  90%, 100% { transform: scale(0); }
}
@keyframes orch-node-a {
  0%, 8% { transform: scale(1); opacity: 0.35; }
  14%    { transform: scale(1.35); opacity: 1; }
  22%    { transform: scale(1); opacity: 1; }
  86%    { transform: scale(1); opacity: 1; }
  90%    { opacity: 0.35; }
  100%   { transform: scale(1); opacity: 0.35; }
}
@keyframes orch-node-b {
  0%, 20% { transform: scale(1); opacity: 0.35; }
  26%     { transform: scale(1.35); opacity: 1; }
  34%     { transform: scale(1); opacity: 1; }
  86%     { transform: scale(1); opacity: 1; }
  90%     { opacity: 0.35; }
  100%    { transform: scale(1); opacity: 0.35; }
}
@keyframes orch-node-c {
  0%, 32% { transform: scale(1); opacity: 0.35; }
  38%     { transform: scale(1.35); opacity: 1; }
  46%     { transform: scale(1); opacity: 1; }
  86%     { transform: scale(1); opacity: 1; }
  90%     { opacity: 0.35; }
  100%    { transform: scale(1); opacity: 0.35; }
}
@keyframes orch-ping-a {
  0%, 8% { transform: scale(0.6); opacity: 0; }
  12%    { opacity: 0.55; }
  26%    { transform: scale(1.9); opacity: 0; }
  100%   { transform: scale(1.9); opacity: 0; }
}
@keyframes orch-ping-b {
  0%, 20% { transform: scale(0.6); opacity: 0; }
  24%     { opacity: 0.55; }
  38%     { transform: scale(1.9); opacity: 0; }
  100%    { transform: scale(1.9); opacity: 0; }
}
@keyframes orch-ping-c {
  0%, 32% { transform: scale(0.6); opacity: 0; }
  36%     { opacity: 0.55; }
  50%     { transform: scale(1.9); opacity: 0; }
  100%    { transform: scale(1.9); opacity: 0; }
}
@keyframes orch-fade {
  0%, 86% { opacity: 1; }
  90%     { opacity: 0; }
  99%     { opacity: 0; }
  100%    { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .why3d-orchestrate .orch-sys,
  .why3d-orchestrate .orch-flow,
  .why3d-orchestrate .orch-arrow,
  .why3d-orchestrate .orch-node,
  .why3d-orchestrate .orch-ping { animation: none; }
  .why3d-orchestrate .orch-flow { stroke-dashoffset: 0; }
  .why3d-orchestrate .orch-node { opacity: 1; }
  .why3d-orchestrate .orch-ping { opacity: 0; }
}

/* "Built for Education" — the lesson pops onto phone, tablet, laptop, then a tick */
.why3d-education .edu-sys { animation: edu-fade 5s ease-in-out infinite; }
.why3d-education .edu-content {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
.why3d-education .edu-a { animation: edu-pop-a 5s ease-out infinite; }
.why3d-education .edu-b { animation: edu-pop-b 5s ease-out infinite; }
.why3d-education .www-clip { width: 0; animation: edu-type 5s ease-in-out infinite; }
.why3d-education .www-cursor { opacity: 0; animation: edu-cursor 5s steps(1) infinite; }
.why3d-education .edu-check {
  transform-box: fill-box;
  transform-origin: center;
  animation: edu-check 5s ease-out infinite;
}
@keyframes edu-pop-a {
  0%, 8%    { transform: scale(0); }
  14%       { transform: scale(1.25); }
  19%       { transform: scale(1); }
  86%       { transform: scale(1); }
  90%, 100% { transform: scale(0); }
}
@keyframes edu-pop-b {
  0%, 22%   { transform: scale(0); }
  28%       { transform: scale(1.25); }
  33%       { transform: scale(1); }
  86%       { transform: scale(1); }
  90%, 100% { transform: scale(0); }
}
@keyframes edu-type {           /* "www..." types out on the laptop */
  0%, 36%   { width: 0; }
  52%       { width: 52px; }
  86%       { width: 52px; }
  90%, 100% { width: 0; }
}
@keyframes edu-cursor {         /* caret blinks once the URL is typed */
  0%, 38% { opacity: 0; }
  40%, 52%, 64%, 76% { opacity: 1; }
  46%, 58%, 70%, 82% { opacity: 0; }
  86% { opacity: 1; }
  90%, 100% { opacity: 0; }
}
@keyframes edu-check {
  0%, 52%   { transform: scale(0); }
  58%       { transform: scale(1.2); }
  63%       { transform: scale(1); }
  86%       { transform: scale(1); }
  90%, 100% { transform: scale(0); }
}
@keyframes edu-fade {
  0%, 86% { opacity: 1; }
  89%     { opacity: 0; }
  99%     { opacity: 0; }
  100%    { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .why3d-education .edu-sys,
  .why3d-education .edu-content,
  .why3d-education .www-clip,
  .why3d-education .www-cursor,
  .why3d-education .edu-check { animation: none; }
  .why3d-education .www-clip { width: 52px; }   /* URL fully shown */
  .why3d-education .www-cursor { opacity: 0; }
}
.why3d-card-title {
  margin: 0 0 18px;
  font-size: 21px;
  line-height: 1.32;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1f0b1c;
}
.why3d-card-note {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(31, 11, 28, 0.55);
}

/* "The Impact of Interactivity" — animated 3D stat cards
   (big colourful extruded number on a dark plum stage, body text, tiny source) */
.stat-card {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.stat-stage {
  position: relative;
  margin: 2px 0 20px;
  aspect-ratio: 220 / 150;
  background: transparent;       /* blocks sit directly on the card */
  display: grid;
  place-items: center;
  overflow: visible;
}
.stat-blocks {                  /* isometric extruded block number (25% smaller) */
  width: auto;
  max-width: 66%;
  max-height: 49.5%;
  height: auto;
  overflow: visible;
}
.stat-blocks .pc {              /* visible by default (no-JS safe) */
  transform-box: fill-box;
  transform-origin: 50% 92%;
}
.stat-stage.build-ready .pc {   /* JS present: hide, ready to build on scroll-in */
  opacity: 0;
  transform: scale(0.25);
}
.stat-stage.build-ready.is-building .pc {
  animation: pcb 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--i) * 40ms);
}
@keyframes pcb {
  to { opacity: 1; transform: scale(1); }
}
.stat-body {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 600;
  color: #1f0b1c;
}
.stat-source {
  margin: auto 0 0;             /* pinned to the bottom of the card */
  font-size: 10.5px;
  line-height: 1.4;
  color: rgba(31, 11, 28, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .stat-blocks .pc { opacity: 1; transform: none; animation: none; }
}

/* Card 3 — bars fill upward to completion, then each badge pops in as a reward.
   Sequenced easy → medium → hard, then the whole set fades out and loops. */
.why3d-anim .lvl {
  animation: why3d-reset 6s ease-in-out infinite backwards;
}
.why3d-anim .bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: why3d-fill 6s cubic-bezier(.22, 1, .36, 1) infinite backwards;
  will-change: transform;
}
.why3d-anim .medal {
  transform-box: fill-box;
  transform-origin: center center;
  animation: why3d-reward 6s ease-out infinite backwards;
  will-change: transform;
}
.why3d-anim .ping {
  transform-box: fill-box;
  transform-origin: center center;
  animation: why3d-ping 6s ease-out infinite backwards;
}
/* stagger so each level completes in turn */
.why3d-anim .lvl-2,
.why3d-anim .lvl-2 .bar,
.why3d-anim .lvl-2 .medal,
.why3d-anim .lvl-2 .ping { animation-delay: 1.1s; }
.why3d-anim .lvl-3,
.why3d-anim .lvl-3 .bar,
.why3d-anim .lvl-3 .medal,
.why3d-anim .lvl-3 .ping { animation-delay: 2.2s; }

@keyframes why3d-fill {        /* bar emerges upward to full height */
  0%    { transform: scaleY(0); }
  16%   { transform: scaleY(1); }
  91.9% { transform: scaleY(1); }
  92%   { transform: scaleY(0); }
  100%  { transform: scaleY(0); }
}
@keyframes why3d-reward {      /* badge pops in once the bar tops out */
  0%, 16% { transform: scale(0); }
  22%     { transform: scale(1.25); }
  28%     { transform: scale(0.92); }
  33%     { transform: scale(1); }
  91.9%   { transform: scale(1); }
  92%     { transform: scale(0); }
  100%    { transform: scale(0); }
}
@keyframes why3d-ping {        /* reward ring flares out behind the badge */
  0%, 16% { transform: scale(0.6); opacity: 0; }
  20%     { opacity: 0.55; }
  34%     { transform: scale(1.8); opacity: 0; }
  100%    { transform: scale(1.8); opacity: 0; }
}
@keyframes why3d-reset {       /* hold the completed set, then fade out and loop */
  0%   { opacity: 1; }
  86%  { opacity: 1; }
  92%  { opacity: 0; }
  99%  { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .why3d-anim .lvl,
  .why3d-anim .bar,
  .why3d-anim .medal,
  .why3d-anim .ping { animation: none; }
  .why3d-anim .ping { opacity: 0; }
}

/* Card 2 — orbit simulation: the world gently breathes while satellites orbit */
.why3d-orbit .planet {
  transform-box: fill-box;
  transform-origin: center;
  animation: why3d-breathe 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes why3d-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
/* scale the whole world animation up 10% (world + orbits together) */
.why3d-orbit { transform: scale(1.1); transform-origin: center; }
/* moons revolve around the world — each whole orbit group rotates about the centre */
.why3d-orbit .orbit {
  transform-box: view-box;
  transform-origin: 110px 75px;
}
.why3d-orbit .orbit-a { animation: why3d-revolve 16s linear infinite; }
.why3d-orbit .orbit-b { animation: why3d-revolve 24s linear infinite reverse; }
@keyframes why3d-revolve {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .why3d-orbit .planet,
  .why3d-orbit .orbit { animation: none; }
}

/* Card 1 — a trend line draws upward, a head climbs it, a star rewards the summit */
.why3d-rise .rise-sys {
  animation: why3d-reset 6s ease-in-out infinite;
}
.why3d-rise .trend {
  stroke-dasharray: 100;
  animation: why3d-draw 6s linear infinite;
}
.why3d-rise .head {
  animation: why3d-head 6s linear infinite;
  will-change: transform;
}
.why3d-rise .summit {
  transform-box: fill-box;
  transform-origin: center;
  animation: why3d-summit 6s ease-out infinite;
  will-change: transform;
}
.why3d-rise .area {
  animation: why3d-area 6s ease-in-out infinite;
}
@keyframes why3d-draw {        /* line draws left → right, then resets while hidden */
  0%    { stroke-dashoffset: 100; }
  45%   { stroke-dashoffset: 0; }
  91.9% { stroke-dashoffset: 0; }
  92%   { stroke-dashoffset: 100; }
  100%  { stroke-dashoffset: 100; }
}
@keyframes why3d-head {        /* glowing head rides the tip of the line up the slope */
  0%            { transform: translate(0, 0); }
  11.1%         { transform: translate(40px, -14px); }
  21.9%         { transform: translate(80px, -26px); }
  33.8%         { transform: translate(118px, -52px); }
  45%, 91.9%    { transform: translate(156px, -76px); }
  92%, 100%     { transform: translate(0, 0); }
}
@keyframes why3d-summit {      /* reward star pops in at the top */
  0%, 45%   { transform: scale(0); }
  51%       { transform: scale(1.25); }
  57%       { transform: scale(1); }
  91.9%     { transform: scale(1); }
  92%, 100% { transform: scale(0); }
}
@keyframes why3d-area {        /* soft fill rises under the completed line */
  0%, 30%   { opacity: 0; }
  50%       { opacity: 0.12; }
  86%       { opacity: 0.12; }
  92%, 100% { opacity: 0; }
}
/* engagement points bounce in as the head climbs past each one */
.why3d-rise .pt {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
.why3d-rise .pt-1 { animation: why3d-pt1 6s ease-out infinite; }
.why3d-rise .pt-2 { animation: why3d-pt2 6s ease-out infinite; }
.why3d-rise .pt-3 { animation: why3d-pt3 6s ease-out infinite; }
@keyframes why3d-pt1 {
  0%, 8%    { transform: scale(0); }
  13%       { transform: scale(1.35); }
  18%       { transform: scale(1); }
  91.9%     { transform: scale(1); }
  92%, 100% { transform: scale(0); }
}
@keyframes why3d-pt2 {
  0%, 19%   { transform: scale(0); }
  24%       { transform: scale(1.35); }
  29%       { transform: scale(1); }
  91.9%     { transform: scale(1); }
  92%, 100% { transform: scale(0); }
}
@keyframes why3d-pt3 {
  0%, 31%   { transform: scale(0); }
  36%       { transform: scale(1.35); }
  41%       { transform: scale(1); }
  91.9%     { transform: scale(1); }
  92%, 100% { transform: scale(0); }
}
/* confetti sprays out of the summit when the line tops out */
.why3d-rise .burst {
  transform-box: view-box;
  transform-origin: 190px 36px;
  will-change: transform, opacity;
}
.why3d-rise .burst { animation: why3d-burst 6s ease-out infinite; }
@keyframes why3d-burst {
  0%, 45%   { transform: scale(0); opacity: 0; }
  48%       { transform: scale(0.6); opacity: 1; }
  52%       { transform: scale(1.15); opacity: 1; }
  66%       { transform: scale(1.9); opacity: 0; }
  100%      { transform: scale(1.9); opacity: 0; }
}
/* strawberry mascot gently sways while its googly eyes dart and blink */
.why3d-rise .berry {
  transform-box: view-box;
  transform-origin: 54px 83px;
  animation: why3d-berry 3.6s ease-in-out infinite;
}
@keyframes why3d-berry {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}
/* watching eyes — pupils dart around, eyes blink, signalling engagement */
.why3d-rise .pupils {
  transform-box: fill-box;
  transform-origin: center;
  animation: why3d-look 5s ease-in-out infinite;
  will-change: transform;
}
.why3d-rise .eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: why3d-blink 4.2s ease-in-out infinite;
}
@keyframes why3d-look {
  0%, 10%   { transform: translate(0, 0); }
  16%, 28%  { transform: translate(2.5px, 1.5px); }  /* glance down to the climbing head */
  34%, 44%  { transform: translate(2.5px, -1.5px); } /* follow it up to the summit */
  50%, 60%  { transform: translate(-2.5px, 1px); }   /* look back left */
  66%, 78%  { transform: translate(1px, 2.5px); }    /* peek down */
  84%, 100% { transform: translate(0, 0); }
}
@keyframes why3d-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  93%           { transform: scaleY(0.1); }
  96%           { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .why3d-rise .rise-sys,
  .why3d-rise .trend,
  .why3d-rise .summit,
  .why3d-rise .pt,
  .why3d-rise .area { animation: none; }
  .why3d-rise .trend { stroke-dasharray: none; }
  .why3d-rise .area { opacity: 0.12; }
  .why3d-rise .burst { animation: none; opacity: 0; }
  .why3d-rise .head { display: none; }
  .why3d-rise .pupils,
  .why3d-rise .eyes,
  .why3d-rise .berry { animation: none; }
}

@media (max-width: 860px) {
  .c3d-grid { grid-template-columns: 1fr; }
  .why3d-grid { grid-template-columns: 1fr; }
  .why3d-title { margin-top: 48px; }
  .content3d { padding: 56px 0; }
  /* Impact stat cards: tighter section, contained column, larger block numbers */
  .placeholder-section { padding: 60px 0 68px; }
  .placeholder-section .why3d-grid { max-width: 440px; margin-left: auto; margin-right: auto; }
  .stat-blocks { max-width: 78%; max-height: 58%; }
}

/* ============================================================
   How Fruit3D Works — pinned video + scroll-advanced steps
   ============================================================ */
.hiw {
  position: relative;
  background: #eaf4fb;
}
/* The track is taller than the viewport; the sticky child pins while we scroll
   through it, and JS maps scroll progress within the track to the active step. */
.hiw-track {
  position: relative;
  height: 250vh;               /* tall track gives the pinned scrub its scroll distance */
}
.hiw-sticky {
  /* Pinned scrub: the sticky child fills the viewport and stays put while we
     scroll through the tall track; JS maps that scroll progress to step 1→2→3
     (and the active step's text goes from greyed-out to black). */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;     /* centre the content vertically while pinned */
  padding: 48px 0;
}
.hiw-sticky .top-fx { z-index: 0; }
.hiw-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;      /* title left-aligns to the video's left edge */
}
.hiw-title {
  text-align: left;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1f0b1c;
  margin: 0 0 32px;            /* small gap to the video (mirrored by the 32px below it) */
}
.hiw-stage {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
/* Video box — fixed 3:2 ratio so the animation canvas always fills it exactly */
.hiw-video {
  aspect-ratio: 3 / 2;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #F8F4F1;            /* same as the Community Projects section */
  box-shadow: 0 34px 80px -34px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hiw-video { position: relative; }

/* ============================================================
   "How Fruit3D Works" — animated explainer (replaces the video)
   Three scenes mapped to the three steps via [data-step] on .hiw-video.
   Palette: bg #F8F4F1, ink #2B0326, brand orb gradient.
   ============================================================ */
.hiw-anim {
  position: absolute;
  inset: 0;
  overflow: hidden;
  --ink: #2B0326;
  --orb: radial-gradient(120% 120% at 32% 28%, #ff9ec0 0%, #ff4d6d 42%, #b65cff 100%);
  font-family: 'Raleway', sans-serif;
}
/* Soft brand glow that lives behind every scene (the recurring orb motif) */
.hiw-anim::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(38% 42% at 50% 46%, rgba(255, 122, 162, 0.20), transparent 70%);
  opacity: 0.9;
}
/* Fixed design canvas — every scene is laid out on a 480×320 stage, then the
   whole stage is scaled by JS (--anim-scale via ResizeObserver) to fit the
   .hiw-video box at any size, so proportions and cursor paths stay exact. */
.anim-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 480px;
  height: 320px;
  transform: translate(-50%, -50%) scale(var(--anim-scale, 1));
}

.anim-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity .6s ease, transform .6s ease;
  pointer-events: none;
}
/* Only the active step's scene is shown — and only then does it animate. */
.hiw-video[data-step="0"] .anim-scene--1,
.hiw-video[data-step="1"] .anim-scene--2,
.hiw-video[data-step="2"] .anim-scene--3 {
  opacity: 1;
  transform: scale(1);
}
.anim-scene * { animation-play-state: paused; }
/* Momentary class toggled by JS to restart a scene's animations from 0. */
.anim-replay * { animation: none !important; }
.hiw-video[data-step="0"] .anim-scene--1 *,
.hiw-video[data-step="1"] .anim-scene--2 *,
.hiw-video[data-step="2"] .anim-scene--3 * { animation-play-state: running; }

/* Animated Mac-style cursor shared across scenes */
.anim-cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 5;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 8.5-6.2 1.3L16 19l-2.7 1.2-3.2-7L5 18z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 8.5-6.2 1.3L16 19l-2.7 1.2-3.2-7L5 18z'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

/* ---------- Scene 1 — Start with your brief ---------- */
.orb {
  position: absolute;
  top: 28px;
  width: 84px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orb);
  box-shadow: 0 20px 44px -12px rgba(255, 77, 109, 0.55);
  animation: orbDrop 6s ease-in-out infinite;
}
@keyframes orbDrop {
  0%      { transform: translateY(-6px) scale(1);   opacity: 1; }
  16%     { transform: translateY(-6px) scale(1);   opacity: 1; }
  30%     { transform: translateY(34px) scale(0.62); opacity: 0; }
  85%     { transform: translateY(34px) scale(0.62); opacity: 0; }
  100%    { transform: translateY(-6px) scale(1);   opacity: 1; }
}
.brief {
  width: 320px;
  background: #fff;
  border: 1px solid rgba(43, 3, 38, 0.08);
  border-radius: 16px;
  padding: 16px 16px 12px;
  box-shadow: 0 24px 50px -28px rgba(43, 3, 38, 0.45);
  transform: translateY(18px);
  animation: briefRise 6s ease-in-out infinite;
}
@keyframes briefRise {
  0%, 24%  { transform: translateY(34px); opacity: 0; }
  34%      { transform: translateY(18px); opacity: 1; }
  92%      { transform: translateY(18px); opacity: 1; }
  100%     { transform: translateY(34px); opacity: 0; }
}
.brief-text {
  display: flex;
  align-items: center;
  min-height: 38px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}
.brief-type {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  animation: typeIn 6s steps(26, end) infinite;
}
@keyframes typeIn {
  0%, 36%  { max-width: 0; }
  62%      { max-width: 100%; }
  92%      { max-width: 100%; }
  100%     { max-width: 0; }
}
.brief-caret {
  width: 2px;
  height: 16px;
  margin-left: 2px;
  background: var(--ink);
  animation: caretBlink 0.9s steps(1) infinite;
}
@keyframes caretBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.brief-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brief-tools { display: flex; align-items: center; gap: 8px; }
.brief-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(43, 3, 38, 0.14);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.brief-chip svg { width: 15px; height: 15px; }
.brief-chip--file {
  opacity: 0;
  animation: chipPop 6s ease infinite;
}
@keyframes chipPop {
  0%, 64%  { opacity: 0; transform: scale(0.8); }
  70%      { opacity: 1; transform: scale(1.06); }
  74%, 92% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(0.8); }
}
.brief-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  animation: sendPulse 6s ease infinite;
}
.brief-send svg { width: 17px; height: 17px; }
@keyframes sendPulse {
  0%, 80%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(43,3,38,0); }
  86%       { transform: scale(0.86); box-shadow: 0 0 0 8px rgba(255,77,109,0.28); }
  92%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(43,3,38,0); }
}
.anim-cursor--1 {
  left: 0;
  top: 0;
  animation: cursor1 6s ease-in-out infinite;
}
@keyframes cursor1 {
  0%, 40%  { transform: translate(300px, 250px); opacity: 0; }
  55%      { transform: translate(300px, 250px); opacity: 1; }
  84%      { transform: translate(364px, 185px); opacity: 1; }
  88%      { transform: translate(364px, 189px) scale(0.86); }
  92%      { transform: translate(364px, 185px) scale(1); }
  100%     { transform: translate(364px, 185px); opacity: 0; }
}

/* ---------- Scene 2 — Build your project ---------- */
.doc {
  width: 250px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 26px 54px -28px rgba(43, 3, 38, 0.5);
  transform: translateY(10px);
  animation: docIn 7s ease-in-out infinite;
}
@keyframes docIn {
  0%   { transform: translateY(22px) scale(0.96); opacity: 0; }
  10%  { transform: translateY(0)   scale(1);    opacity: 1; }
  100% { transform: translateY(0)   scale(1);    opacity: 1; }
}
.doc-header {
  height: 84px;
  background: var(--orb);
  transform-origin: top;
  animation: headerGrow 7s ease-in-out infinite;
}
@keyframes headerGrow {
  0%  { transform: scaleY(0.2); filter: saturate(1.1); }
  8%  { transform: scaleY(1); }
  100%{ transform: scaleY(1); }
}
/* Phase labels shown in the red banner: "Generate" before the spinner,
   "Refine" after it (white, slow fade in/out). Siblings of the header so
   they don't inherit its scaleY grow. */
.doc-phase {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 84px;                 /* matches the .doc-header band */
  display: grid;
  place-items: center;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.08em;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}
.doc-phase--gen { animation: phaseGen 7s ease-in-out infinite; }
.doc-phase--refine { animation: phaseRefine 7s ease-in-out infinite; }
@keyframes phaseGen {        /* before the spinner; held ~1s longer */
  0%, 8% { opacity: 0; }
  13%    { opacity: 1; }
  31%    { opacity: 1; }
  35%    { opacity: 0; }
  100%   { opacity: 0; }
}
@keyframes phaseRefine {     /* after the spinner; held ~1s longer */
  0%, 64% { opacity: 0; }
  69%     { opacity: 1; }
  90%     { opacity: 1; }
  94%     { opacity: 0; }
  100%    { opacity: 0; }
}
.doc-body { padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.ln {
  height: 9px;
  border-radius: 5px;
  background: rgba(43, 3, 38, 0.10);
  transform-origin: left;
  transform: scaleX(0);
  animation: lnFill 7s ease-out infinite;
}
.ln-1 { width: 90%; animation-delay: .0s; }
.ln-2 { width: 70%; animation-delay: .25s; }
.ln-3 { width: 96%; }
.ln-4 { width: 58%; }
.ln-3 { animation-delay: .9s; }
.ln-4 { animation-delay: 1.1s; }
@keyframes lnFill {
  0%, 6%   { transform: scaleX(0); }
  18%      { transform: scaleX(1); }
  100%     { transform: scaleX(1); }
}
.doc-swatches { display: flex; gap: 8px; margin: 2px 0; }
.sw {
  width: 46px;
  height: 30px;
  border-radius: 7px;
  transform: scale(0);
  animation: swPop 7s ease infinite;
}
.sw-1 { background: #ffd0a3; animation-delay: .5s; }
.sw-2 { background: #ffb3c7; animation-delay: .62s; }
.sw-3 { background: #bfe3d2; animation-delay: .74s; }
@keyframes swPop {
  0%, 62% { transform: scale(0); }
  70%     { transform: scale(1.12); }
  74%     { transform: scale(1); }
  100%    { transform: scale(1); }
}
/* F spinner — brand logo dots orbit & settle while Fruit3D "does the work".
   Drawn on a canvas by JS; shown only during the build window, before colours. */
.f-spinner {
  position: absolute;
  left: 50%;
  top: 63%;                    /* dropped into the doc's white body, clear of the red banner */
  transform: translate(-50%, -50%);
  width: 136px;                /* sized to sit within the white body (no overlap with the header) */
  height: 136px;
  z-index: 4;
  opacity: 1;                  /* the canvas owns the fade now (synced with the spin) */
  pointer-events: none;
}
.f-spin { display: block; width: 100%; height: 100%; }

.palette {
  position: absolute;
  right: 34px;
  top: 87px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 40px -22px rgba(43, 3, 38, 0.5);
  transform: translateX(16px);
  opacity: 0;
  animation: paletteIn 7s ease infinite;
}
@keyframes paletteIn {
  0%, 62%  { opacity: 0; transform: translateX(16px); }
  71%      { opacity: 1; transform: translateX(0); }
  94%      { opacity: 1; transform: translateX(0); }
  100%     { opacity: 0; transform: translateX(16px); }
}
.palette i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--d);
  transform: scale(0);
  animation: dotPop 7s ease infinite;
}
.palette i:nth-child(1) { animation-delay: .40s; }
.palette i:nth-child(2) { animation-delay: .48s; }
.palette i:nth-child(3) { animation-delay: .56s; }
.palette i:nth-child(4) { animation-delay: .64s; }
.palette i:nth-child(5) { animation-delay: .72s; }
@keyframes dotPop {
  0%, 62% { transform: scale(0); }
  70%     { transform: scale(1.2); }
  75%     { transform: scale(1); }
  100%    { transform: scale(1); }
}
.anim-cursor--2 {
  left: 0; top: 0;
  animation: cursor2 7s ease-in-out infinite;
}
@keyframes cursor2 {
  0%, 74%  { transform: translate(220px, 250px); opacity: 0; }
  80%      { transform: translate(220px, 250px); opacity: 1; }
  92%      { transform: translate(423px, 158px); opacity: 1; }   /* to the palette */
  95%      { transform: translate(423px, 162px) scale(0.85); }
  98%      { transform: translate(423px, 158px) scale(1); }
  100%     { transform: translate(423px, 158px); opacity: 0; }
}

/* ---------- Scene 3 — Enjoy, learn and track ---------- */
.anim-scene--3 { gap: 22px; }
.doc--done {
  width: 190px;
  animation: docSettle 7s ease-in-out infinite;
}
@keyframes docSettle {
  0%   { transform: translateY(14px) rotate(-1deg); opacity: 0; }
  12%  { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}
.doc--done .doc-header { height: 58px; animation: none; transform: none; }
.doc--done .ln { animation: none; transform: scaleX(1); }
.doc-publish {
  align-self: flex-start;
  margin-top: 4px;
  height: 30px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: default;
  animation: publishClick 7s ease infinite;
}
@keyframes publishClick {
  0%, 30%  { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,77,109,0); }
  38%      { transform: scale(0.9); box-shadow: 0 0 0 7px rgba(255,77,109,0.30); }
  46%      { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,77,109,0); }
  100%     { transform: scale(1); }
}
.track-card {
  width: 175px;
  background: #fff;
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 22px 46px -26px rgba(43, 3, 38, 0.5);
  opacity: 0;
  transform: translateX(14px);
  animation: trackIn 7s ease infinite;
}
@keyframes trackIn {
  0%, 44%  { opacity: 0; transform: translateX(14px); }
  56%      { opacity: 1; transform: translateX(0); }
  92%      { opacity: 1; transform: translateX(0); }
  100%     { opacity: 0; transform: translateX(14px); }
}
.track-bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 70px;
  margin-bottom: 10px;
}
.track-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #ff7aa2, #ff4d6d);
  transform: scaleY(0);
  transform-origin: bottom;
  animation: barGrow 7s cubic-bezier(.2,.8,.2,1) infinite;
}
/* Traffic-light status by height: red lowest, orange middle, green highest */
.track-bars i:nth-child(1) { animation-delay: .58s; }                                                        /* 42% — red (default) */
.track-bars i:nth-child(2) { animation-delay: .66s; background: linear-gradient(180deg, #f7a95f, #F0903E); } /* 64% — orange */
.track-bars i:nth-child(3) { animation-delay: .74s; background: linear-gradient(180deg, #f7a95f, #F0903E); } /* 50% — orange */
.track-bars i:nth-child(4) { animation-delay: .82s; background: linear-gradient(180deg, #36c98e, #1faf76); } /* 82% — green */
.track-bars i:nth-child(5) { animation-delay: .90s; background: linear-gradient(180deg, #36c98e, #1faf76); } /* 96% — green */
@keyframes barGrow {
  0%, 8%  { transform: scaleY(0); }
  24%     { transform: scaleY(1); }
  100%    { transform: scaleY(1); }
}
.track-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
  opacity: .75;
}
/* Right column: "Use" window stacked above the Learner-progress card */
.scene3-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.use-card {
  width: 175px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 22px 46px -26px rgba(43, 3, 38, 0.5);
  opacity: 0;
  transform: translateX(14px);
  animation: useIn 7s ease infinite;
}
@keyframes useIn {
  0%, 26%  { opacity: 0; transform: translateX(14px); }
  38%      { opacity: 1; transform: translateX(0); }
  92%      { opacity: 1; transform: translateX(0); }
  100%     { opacity: 0; transform: translateX(14px); }
}
/* Dark 3D viewport with a slowly rotating brand cube */
.use-view {
  position: relative;
  height: 92px;
  margin-bottom: 9px;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 30% 18%, #3a0a36, #1b0118);
  perspective: 440px;
  display: grid;
  place-items: center;
}
.use-cube {
  width: 40px;
  height: 40px;
  position: relative;
  transform-style: preserve-3d;
  animation: useSpin 7s linear infinite;
}
@keyframes useSpin {
  0%   { transform: rotateX(-20deg) rotateY(18deg); }
  100% { transform: rotateX(-20deg) rotateY(378deg); }
}
.use-face {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  opacity: 0.94;
}
.use-face--front  { background: #3bb6e8; transform: translateZ(20px); }
.use-face--back   { background: #D2F4FB; transform: rotateY(180deg) translateZ(20px); }
.use-face--right  { background: #ff7aa2; transform: rotateY(90deg) translateZ(20px); }
.use-face--left   { background: #36c98e; transform: rotateY(-90deg) translateZ(20px); }
.use-face--top    { background: #ffd401; transform: rotateX(90deg) translateZ(20px); }
.use-face--bottom { background: #ff8a20; transform: rotateX(-90deg) translateZ(20px); }
/* pulsing hotspot the cursor "clicks" */
.use-hotspot {
  position: absolute;
  top: 24px;
  right: 36px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  animation: useHotspot 7s ease-in-out infinite;
}
@keyframes useHotspot {
  0%, 52% { transform: scale(0.4); opacity: 0; box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  62%     { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  80%     { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
  100%    { transform: scale(1); opacity: 0.6; box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
/* drag cursor inside the viewport — white so it reads on the dark scene */
.use-cursor {
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  background: #fff;
  animation: useDrag 7s ease-in-out infinite;
}
@keyframes useDrag {
  0%, 30%  { transform: translate(54px, 64px); opacity: 0; }
  40%      { transform: translate(54px, 64px); opacity: 1; }
  58%      { transform: translate(110px, 38px); opacity: 1; }
  74%      { transform: translate(78px, 56px); opacity: 1; }
  88%      { transform: translate(78px, 56px); opacity: 0; }
  100%     { transform: translate(54px, 64px); opacity: 0; }
}
.use-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
  opacity: .75;
}
.anim-cursor--3 {
  left: 0; top: 0;
  animation: cursor3 7s ease-in-out infinite;
}
@keyframes cursor3 {
  0%       { transform: translate(250px, 260px); opacity: 0; }
  18%      { transform: translate(250px, 260px); opacity: 1; }
  34%      { transform: translate(99px, 209px); opacity: 1; }   /* over Publish */
  40%      { transform: translate(99px, 213px) scale(0.85); }
  46%      { transform: translate(99px, 209px) scale(1); }
  70%      { transform: translate(330px, 226px); opacity: 1; }  /* glance at Learner progress */
  100%     { transform: translate(330px, 226px); opacity: 0; }
}

/* Step caption chip (top-left), kept in sync by the scroll script */
.hiw-cap-chip {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px 7px 9px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(43, 3, 38, 0.08);
  border-radius: 999px;
  box-shadow: 0 8px 22px -14px rgba(43, 3, 38, 0.5);
}
.hiw-video-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2B0326;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.hiw-video-cap { font-size: 13px; font-weight: 700; color: #2B0326; }

@media (prefers-reduced-motion: reduce) {
  .hiw-anim *, .anim-scene * { animation: none !important; }
  .brief, .doc, .palette, .track-card, .doc--done { opacity: 1 !important; transform: none !important; }
  .brief-type { max-width: 100% !important; }
  .ln, .sw, .palette i, .track-bars i, .orb { transform: none !important; opacity: 1 !important; }
  .brief-chip--file, .track-card { opacity: 1 !important; }
}
/* Steps — active is bold and full-opacity, the rest are greyed out */
.hiw-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.hiw-step {
  opacity: 0.32;
  padding-left: 20px;
  border-left: 3px solid transparent;
  transition: opacity .35s ease, border-color .35s ease;
}
.hiw-step.is-active {
  opacity: 1;
  border-left-color: #2B0326;
}
.hiw-step-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  color: #1f0b1c;
}
.hiw-step.is-active .hiw-step-title { font-weight: 800; }
.hiw-step-text {
  margin: 0;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.55;
  color: #5a3a52;
}

/* ============================================================
   "Three ways to use Fruit3D" — auto-cycling explainer.
   Same #eaf4fb + drifting motion background as How-it-works, but
   this one plays on a timer (no scroll-pinning) with three fresh
   scenes: build-your-own, browse the library, commission a creator.
   ============================================================ */
.uses {
  position: relative;
  background: #eaf4fb;
}
/* Pinned scrub — identical mechanism to How-it-works */
.uses-track { position: relative; height: 250vh; }
.uses-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0;
}
.uses-sticky .top-fx { z-index: 0; }
.uses-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.uses-title {
  text-align: left;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1f0b1c;
  margin: 0 0 32px;
}
.uses-stage {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.uses-video {
  position: relative;
  aspect-ratio: 3 / 2;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #F8F4F1;
  box-shadow: 0 34px 80px -34px rgba(0, 0, 0, 0.35);
}
.uses-anim {
  position: absolute;
  inset: 0;
  overflow: hidden;
  --ink: #2B0326;
  font-family: 'Raleway', sans-serif;
}
/* Soft blue-teal glow (distinct from How-it-works' pink) */
.uses-anim::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 44% at 50% 46%, rgba(59, 182, 232, 0.16), transparent 70%);
}
/* Fixed 480×320 design canvas, scaled by JS to fit the box (like How-it-works) */
.uses-anim-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 480px;
  height: 320px;
  transform: translate(-50%, -50%) scale(var(--anim-scale, 1));
}
.uscene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity .6s ease, transform .6s ease;
  pointer-events: none;
}
.uses-video[data-step="0"] .uscene--1,
.uses-video[data-step="1"] .uscene--2,
.uses-video[data-step="2"] .uscene--3 { opacity: 1; transform: scale(1); }
.uscene * { animation-play-state: paused; }
.uses-replay * { animation: none !important; }
.uses-video[data-step="0"] .uscene--1 *,
.uses-video[data-step="1"] .uscene--2 *,
.uses-video[data-step="2"] .uscene--3 * { animation-play-state: running; }
.us-cursor { left: 0; top: 0; }

/* Caption chip + step list (mirrors How-it-works) */
.uses-cap-chip {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px 7px 9px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(43, 3, 38, 0.08);
  border-radius: 999px;
  box-shadow: 0 8px 22px -14px rgba(43, 3, 38, 0.5);
}
.uses-video-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #2B0326;
  color: #fff;
  font-size: 12px; font-weight: 800; line-height: 1;
}
.uses-video-cap { font-size: 13px; font-weight: 700; color: #2B0326; }
.uses-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 26px;
}
.uses-step {
  opacity: 0.32;
  padding-left: 20px;
  border-left: 3px solid transparent;
  transition: opacity .35s ease, border-color .35s ease;
}
.uses-step.is-active { opacity: 1; border-left-color: #2B0326; }
.uses-step-title { margin: 0 0 6px; font-size: 22px; font-weight: 600; color: #1f0b1c; }
.uses-step.is-active .uses-step-title { font-weight: 800; }
.uses-step-text { margin: 0; max-width: 44ch; font-size: 15px; line-height: 1.55; color: #5a3a52; }

/* Get Started CTA under the step lists (Ways to use / How it works).
   Same size as the intro-band Sign Up button, in #B14884. */
.steps-cta {
  display: inline-block;
  white-space: nowrap;
  background: #2B0326;
  color: #fff;
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 700;
  letter-spacing: 0;
  padding: 0.7em 1.5em;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease;
}
.steps-cta:hover { filter: brightness(1.08); }
/* Desktop: pinned sections — centre the button on the text column, half way
   between the bottom of the step text and the bottom of the section. */
@media (min-width: 768px) {
  .steps-col { position: relative; }
  .steps-col .steps-cta {
    position: absolute;
    left: 0; right: 0;
    width: max-content;
    margin-inline: auto;                       /* centred on the text column */
    top: calc(100% + 25vh - 100px);            /* ≈ midpoint of the gap below the text */
    transform: translateY(-50%);
  }
}
/* Mobile: sections aren't pinned — button flows below the steps, centred. */
@media (max-width: 767px) {
  .steps-cta { display: block; width: max-content; margin: 48px auto 0; }   /* more space above Get Started */
}

/* ---- Scene 1 — Create your own content (abstracted Fruit3D app) ---- */
.us-app {
  display: flex;
  width: 356px; height: 216px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 44px -26px rgba(43, 3, 38, 0.5);
  border: 1px solid rgba(43, 3, 38, 0.06);
}
/* Far-left app rail (dark plum) with the Fruit3D F logo top-left */
.us-rail {
  width: 26px;
  flex: none;
  background: #2B0326;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
}
.us-rail-logo { width: 14px; height: 14px; display: block; object-fit: contain; }
.us-rail-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); }
/* Left: abstracted chat column */
.us-chat {
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 12px;
  background: #faf7f9;
  border-right: 1px solid rgba(43, 3, 38, 0.07);
}
.us-msg {
  height: 12px;
  border-radius: 7px;
  opacity: 0;
  transform: translateY(6px);
  animation: us-msg-in 4s ease-in-out infinite;
}
.us-msg--a { width: 78%; align-self: flex-end; background: #d3e3f4; animation-delay: .3s; }   /* you */
.us-msg--b { width: 88%; background: #ece5ea; animation-delay: 1.0s; }                          /* Fruit3D */
.us-msg--c { width: 64%; background: #ece5ea; animation-delay: 1.5s; }
@keyframes us-msg-in {
  0%   { opacity: 0; transform: translateY(6px); }
  12%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
.us-composer {
  margin-top: auto;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 5px;
  height: 26px; padding: 0 6px;
  background: #fff;
  border: 1px solid rgba(43, 3, 38, 0.1);
  border-radius: 8px;
}
.us-composer-edit {
  display: flex; align-items: center; justify-content: center;
  height: 16px; padding: 0 8px;
  background: #EB7CB2;
  color: #fff;
  font-size: 8px; font-weight: 700;
  border-radius: 999px;
}
.us-composer-send {
  display: flex; align-items: center; justify-content: center;
  height: 16px; padding: 0 8px;
  background: #2B0326;
  color: #fff;
  font-size: 8px; font-weight: 700;
  border-radius: 999px;
}
/* Right: dark 3D canvas with a slowly spinning brand sphere (like the "Use" viewport) */
.us-view {
  position: relative;
  flex: 1;
  background: radial-gradient(120% 120% at 30% 18%, #3a0a36, #1b0118);
  display: grid;
  place-items: center;
  perspective: 460px;
}
/* Pink "Publish" button in the top-right of the 3D canvas */
.us-publish {
  position: absolute;
  top: 9px; right: 9px;
  z-index: 4;
  padding: 3px 9px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: #EB7CB2;
  border-radius: 999px;
  line-height: 1.2;
}
.us-globe {
  position: relative;
  width: 76px; height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 34% 30%, #8ad9ff 0%, #3bb6e8 38%, #245e94 78%, #14314f 100%);
  box-shadow: inset -7px -9px 16px rgba(0, 0, 0, 0.5), 0 10px 22px -8px rgba(0, 0, 0, 0.6);
  animation: us-globe-bob 5s ease-in-out infinite;
}
/* Scrolling surface bands = the sphere appears to rotate */
.us-globe-tex {
  position: absolute;
  top: -10%; left: 0;
  width: 200%; height: 120%;
  background:
    radial-gradient(circle at 30% 40%, rgba(20,49,79,.5) 0 12px, transparent 13px),
    radial-gradient(circle at 62% 66%, rgba(20,49,79,.42) 0 9px, transparent 10px),
    radial-gradient(circle at 48% 24%, rgba(20,49,79,.35) 0 7px, transparent 8px);
  opacity: .85;
  animation: us-globe-spin 4.5s linear infinite;
}
@keyframes us-globe-spin { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes us-globe-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* fixed specular highlight over the moving surface */
.us-globe::after {
  content: "";
  position: absolute;
  left: 16%; top: 12%;
  width: 26%; height: 22%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(3px);
}
/* indicative UI panel floating bottom-left of the 3D canvas */
.us-uicard {
  position: absolute;
  left: 12px; bottom: 12px;
  width: 92px;
  padding: 9px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  display: flex; flex-direction: column; gap: 5px;
}
.us-ui-line { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.5); }
.us-ui-line--title { width: 70%; height: 5px; background: rgba(255, 255, 255, 0.85); }
.us-ui-line--short { width: 55%; }
.us-ui-btns { display: flex; gap: 5px; margin-top: 3px; }
.us-ui-btn { width: 28px; height: 10px; border-radius: 4px; background: #A1FCD2; }
/* pulsing hotspot the cursor "clicks" on the model */
.us-hotspot {
  position: absolute;
  top: 34%; right: 30%;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  animation: us-hotspot 4s ease-in-out infinite;
}
@keyframes us-hotspot {
  0%, 55% { transform: scale(0.4); opacity: 0; box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
  66%     { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
  84%     { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
  100%    { transform: scale(1); opacity: 0.6; box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
/* white cursor inside the dark canvas — moves up to the Publish button and clicks */
.us-cursor--1 {
  left: 0; top: 0;
  width: 15px; height: 15px;
  background: #fff;
  animation: us-cur1 4s ease-in-out infinite;
}
@keyframes us-cur1 {
  0%, 20% { transform: translate(74px, 150px); opacity: 0; }
  30%     { transform: translate(74px, 150px); opacity: 1; }   /* appear over the model */
  58%     { transform: translate(150px, 22px); opacity: 1; }   /* travel to Publish */
  66%     { transform: translate(150px, 22px) scale(0.8); }    /* click down */
  72%     { transform: translate(150px, 22px) scale(1); }      /* release */
  92%     { transform: translate(150px, 22px); opacity: 1; }
  100%    { transform: translate(150px, 22px); opacity: 0; }
}
/* Publish button presses in when the cursor clicks it */
.us-publish { animation: us-publish-press 4s ease-in-out infinite; transform-origin: center; }
@keyframes us-publish-press {
  0%, 63% { transform: scale(1); filter: brightness(1); }
  69%     { transform: scale(0.9); filter: brightness(1.15); }
  75%     { transform: scale(1); filter: brightness(1); }
  100%    { transform: scale(1); }
}

/* ---- Scene 2 — Explore the library & marketplace ---- */
.us-library {
  width: 356px; height: 216px;   /* same window as Scene 1 for a seamless transition */
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 44px -26px rgba(43, 3, 38, 0.5);
  border: 1px solid rgba(43, 3, 38, 0.06);
  display: flex;                 /* app rail + main content */
}
.us-lib-main {
  flex: 1;
  min-width: 0;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.us-lib-head {
  margin: 0;
  font-size: 13px; font-weight: 800;
  color: #1f0b1c;
}
/* top bar: half-width search + a "My Projects" button */
.us-topbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.us-search {
  min-width: 0;
  display: flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 11px;
  background: #f4eef1;
  border-radius: 999px;
  overflow: hidden;
}
.us-search-ico {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid #9a8a95;
  position: relative; flex: none;
}
.us-search-ico::after { content:""; position:absolute; right:-3px; bottom:-3px; width:5px; height:2px; background:#9a8a95; transform: rotate(45deg); border-radius:2px; }
.us-search-txt { font-size: 11px; color: #9a8a95; white-space: nowrap; }
.us-search-txt::before { content: "Search Marketplace"; }
.us-tab {
  min-width: 0;
  display: flex; align-items: center; justify-content: center;
  height: 26px;
  color: #fff;
  font-size: 10.5px; font-weight: 700;
  border-radius: 999px;
}
.us-tab--market { background: #EB7CB2; }   /* pink marketplace tab */
.us-tab--mine { background: #2B0326; }
.us-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 18px;                 /* larger padding between the (smaller) cards */
  align-content: center;
}
.us-tile {
  display: flex; flex-direction: column; gap: 5px;
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  animation: us-tile-in 4s ease-in-out infinite;
}
.us-thumb {
  width: 100%; height: 40px;
  border-radius: 6px;
  background: var(--g);
  box-shadow: 0 4px 10px -6px rgba(43, 3, 38, 0.4);
}
/* pastel subject + level pills under each card (like the Projects thumbnails) */
.us-pills { display: flex; gap: 4px; padding-left: 1px; }
.us-pill { height: 6px; border-radius: 999px; }
.us-pill--s { width: 22px; background: var(--ps, #cfe5ff); }
.us-pill--l { width: 13px; background: var(--pl, #d3e3f4); }
.us-tile--1 { --g: linear-gradient(135deg, #ff9d57, #ff4d6d); --ps: #cfe5ff; --pl: #d3e3f4; animation-delay: .25s; }
.us-tile--2 { --g: linear-gradient(135deg, #3bb6e8, #36c98e); --ps: #d2efdd; --pl: #d8ead0; animation-delay: .38s; }
.us-tile--3 { --g: linear-gradient(135deg, #b65cff, #ff4d6d); --ps: #e2dbf5; --pl: #f3dcc9; animation-delay: .51s; }
.us-tile--4 { --g: linear-gradient(135deg, #36c98e, #3bb6e8); --ps: #c8ece9; --pl: #d3e3f4; animation-delay: .64s; }
.us-tile--5 { --g: linear-gradient(135deg, #ff4d6d, #b65cff); --ps: #ffe2cf; --pl: #e6e2ea; animation-delay: .77s; }
.us-tile--6 { --g: linear-gradient(135deg, #ffca3a, #ff9d57); --ps: #fdf1c6; --pl: #d8ead0; animation-delay: .90s; }
@keyframes us-tile-in {
  0%   { opacity: 0; transform: translateY(10px) scale(0.94); }
  16%  { opacity: 1; transform: translateY(0) scale(1); }
  92%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(0) scale(1); }
}
/* the picked card's thumbnail lifts + gets a ring */
.us-tile--5 .us-thumb { animation: us-pick 4s ease-in-out infinite; }
@keyframes us-pick {
  0%,52%   { box-shadow: 0 0 0 0 rgba(43,3,38,0); transform: translateY(0) scale(1); }
  62%      { box-shadow: 0 0 0 2.5px #2B0326; transform: translateY(-2px) scale(1.05); }
  86%      { box-shadow: 0 0 0 2.5px #2B0326; transform: translateY(-2px) scale(1.05); }
  100%     { box-shadow: 0 0 0 0 rgba(43,3,38,0); transform: translateY(0) scale(1); }
}
.us-cursor--2 { animation: us-cur2 4s ease-in-out infinite; }
@keyframes us-cur2 {
  0%   { transform: translate(150px, 250px); }
  50%  { transform: translate(250px, 206px); }   /* toward the picked card (bottom-mid) */
  58%  { transform: translate(250px, 206px) scale(.85); }
  63%  { transform: translate(250px, 206px) scale(1); }
  100% { transform: translate(210px, 250px); }
}

/* ---- Scene 3 — Commission a creator (the network, inside the app window) ---- */
.us-net-main {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.us-network {
  position: absolute;
  left: 50%; top: 50%;
  width: 360px; height: 260px;
  transform: translate(-50%, -46.5%) scale(0.78);  /* fit + vertically centre the content in the window */
  transform-origin: center;
}
.us-links { position: absolute; inset: 0; width: 100%; height: 100%; }
.us-link { animation: us-draw 4s ease-in-out infinite; }
.us-link--a { animation-delay: .3s; }
.us-link--b { animation-delay: .5s; }
.us-link--c { animation-delay: .7s; }
.us-link--a1 { animation-delay: 1.4s; }
.us-link--a2 { animation-delay: 1.55s; }
.us-link--b1 { animation-delay: 1.6s; }
.us-link--b2 { animation-delay: 1.75s; }
.us-link--c1 { animation-delay: 1.8s; }
.us-link--c2 { animation-delay: 1.95s; }
@keyframes us-draw {
  0%   { stroke-dashoffset: 100; }
  20%  { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
.us-node {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 800; color: #2B0326;
  background: #fff;
  box-shadow: 0 10px 24px -14px rgba(43,3,38,.6);
  opacity: 0; transform: scale(0.6);
  animation: us-pop 4s ease-in-out infinite;
}
.us-node--you {
  left: 37px; top: 101px; width: 58px; height: 58px;
  font-size: 14px; color: #fff; background: #2B0326;
  animation-delay: .1s;
}
/* Creators — cream circles with a single plum outline, initials centred */
.us-node--a, .us-node--b, .us-node--c {
  box-sizing: border-box;
  width: 40px; height: 40px;
  background: #F8F4F1;
  border: 2px solid #2B0326;
}
.us-node--a { left: 138px; top: 38px;  animation-delay: .9s; }
.us-node--b { left: 138px; top: 110px; animation-delay: 1.1s; }
.us-node--c { left: 138px; top: 182px; animation-delay: 1.3s; }
.us-node-label {
  font-size: 12px;
  font-weight: 800;
  color: #2B0326;
  line-height: 1;
}
/* Example content each creator produces — small ombré cards (like the library tiles) */
.us-content {
  position: absolute;
  width: 34px; height: 22px;
  border-radius: 6px;
  opacity: 0; transform: scale(0.6);
  box-shadow: 0 6px 14px -8px rgba(43, 3, 38, 0.5);
  animation: us-pop 4s ease-in-out infinite;
}
.us-content::after {
  content: ""; position: absolute; left: 5px; bottom: 4px; height: 2.5px; width: 52%;
  background: rgba(255, 255, 255, 0.85); border-radius: 2px;
}
.us-content--a1 { left: 266px; top: 29px;  background: linear-gradient(135deg, #ff9d57, #ff4d6d); animation-delay: 1.9s; }
.us-content--a2 { left: 280px; top: 63px;  background: linear-gradient(135deg, #3bb6e8, #36c98e); animation-delay: 2.05s; }
.us-content--b1 { left: 276px; top: 105px; background: linear-gradient(135deg, #b65cff, #ff4d6d); animation-delay: 2.1s; }
.us-content--b2 { left: 280px; top: 139px; background: linear-gradient(135deg, #36c98e, #3bb6e8); animation-delay: 2.25s; }
.us-content--c1 { left: 266px; top: 177px; background: linear-gradient(135deg, #ff4d6d, #b65cff); animation-delay: 2.3s; }
.us-content--c2 { left: 280px; top: 211px; background: linear-gradient(135deg, #ffca3a, #ff9d57); animation-delay: 2.45s; }
@keyframes us-pop {
  0%   { opacity: 0; transform: scale(0.6); }
  14%  { opacity: 1; transform: scale(1.08); }
  22%  { opacity: 1; transform: scale(1); }
  92%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
/* Column captions along the top of the network */
.us-col-label {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 800;
  color: #2B0326;
  white-space: nowrap;
}
.us-col-label--creator { left: 158px; }
.us-col-label--content { left: 290px; }
.us-cursor--3 { animation: us-cur3 4s ease-in-out infinite; }
@keyframes us-cur3 {
  0%, 28% { transform: translate(96px, 236px); opacity: 0; }
  38%     { transform: translate(96px, 236px); opacity: 1; }
  62%     { transform: translate(296px, 150px); opacity: 1; }   /* toward the content on the right */
  68%     { transform: translate(296px, 150px) scale(.85); }
  74%     { transform: translate(296px, 150px) scale(1); }
  100%    { transform: translate(230px, 236px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .uses-anim * { animation: none !important; }
  .us-msg, .us-tile, .us-node, .us-content, .uscene { opacity: 1 !important; transform: none !important; }
  .us-link { stroke-dashoffset: 0 !important; }
}

/* ============================================================
   Responsive — 5 breakpoints
     1. Large desktop  (base)      ≥ 1280px
     2. Desktop                    ≤ 1279px
     3. Tablet                     ≤ 1023px
     4. Mobile                     ≤ 767px
     5. Small mobile               ≤ 479px
   ============================================================ */

/* 2. Desktop (≤1279) — slightly tighter hero (gallery stays 4-up) */
@media (max-width: 1279px) {
  .hero { padding: 76px 0 64px; }
}

/* 3. Tablet (≤1023) — gallery 2-up */
@media (max-width: 1023px) {
  .hero { padding: 60px 0 56px; }
  .card { flex-basis: calc(33.3333% - 12px); }   /* 3 visible */
}

/* 4. Mobile (≤767) — single column, stacked footer */
@media (max-width: 767px) {
  :root { --sec-pad-m: 56px; }      /* one vertical rhythm for every stacked section on mobile */
  .container { padding: 0 20px; }   /* small consistent side gutter (Lovable-style) */
  .header-inner { gap: 16px; }
  /* Collapse the nav + Log in into a hamburger dropdown; keep Get started inline */
  .header-nav,
  .header-actions { display: none; }
  .header-inner > .btn-light { display: inline-flex; margin-left: auto; }   /* Get started stays visible */
  .nav-toggle { display: flex; margin-left: 0; }
  .mobile-menu.is-open {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 18px 16px;
    background: #F8F4F1;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 16px 30px -22px rgba(31, 11, 28, 0.5);
  }
  .mobile-menu a:not(.btn) {
    padding: 12px 4px;
    font-size: 17px;
    font-weight: 600;
    color: #2B0326;
  }
  .mobile-menu .btn { justify-content: center; padding: 12px 16px; font-size: 15px; }
  .mobile-menu .btn-ghost { color: #2B0326; border: 1px solid rgba(43, 3, 38, 0.18); }
  .mobile-menu .btn-light { background: #C03E86; color: #fff; }
  .hero { padding: 48px 0 44px; }
  .hero-sub { margin-bottom: 32px; }
  .prompt { border-radius: 18px; }
  /* How it works: stack it, no scroll-pinning, all steps visible */
  .hiw-track { height: auto; }
  .hiw-sticky { position: static; height: auto; min-height: 0; display: block; padding: var(--sec-pad-m) 0; }
  .hiw-stage { grid-template-columns: 1fr; gap: 28px; margin: 0; }
  /* Taller card with a top band so the number + label sit above the animation */
  .uses-video, .hiw-video { aspect-ratio: auto; height: 290px; }
  .uses-anim, .hiw-anim { top: 60px; }
  .hiw-step { opacity: 1; }
  /* Ways-to-use: unpin (like How-it-works) and stack animation over the steps */
  .uses-track { height: auto; }
  .uses-sticky { position: static; height: auto; min-height: 0; display: block; padding: var(--sec-pad-m) 0; }
  .uses-stage { grid-template-columns: 1fr; gap: 28px; }
  /* Stable hero height so the bottom-anchored cards don't jump as the mobile
     address bar shows/hides (svh ignores that resize, unlike dvh). The extra
     padding extends the section so the cards sit further below the prompt. */
  .top-bg { min-height: calc(100svh + 64px); }
  /* Bigger example tiles that bleed off the bottom of the section (like desktop) */
  .hero-cards { width: 128vw; transform: translate(-50%, 34%) scale(1); }
  /* Hide the "Build digital content like this yourself" note on mobile only
     (kept on tablet/desktop) */
  .hero-annotation { display: none; }
  .card { flex-basis: calc(50% - 9px); }   /* 2 visible */
  .cat-grid { display: flex; flex-wrap: wrap; }
  /* Stack the head and drop the handwritten note below the buttons, above the
     thumbnails (display:contents lets the note reorder out of .community-titles). */
  .community-head { flex-direction: column; align-items: flex-start; }
  .community-titles { display: contents; }
  .community-title { order: 1; }
  .cat-grid { order: 2; }
  /* Drop the hand-drawn arrow on mobile and centre the note on screen */
  .community-annotation { order: 3; align-self: center; margin: 12px auto; transform: none; text-align: center; }
  .community-subtitle { font-size: 14.5px; }
  .community-annotation-arrow { display: none; }
  /* Subject + level tags: shrink so they always sit side by side on one line */
  .card-tags { flex-wrap: nowrap; gap: 6px; }
  .card-tag { font-size: 11px; padding: 3px 9px; border-width: 1.5px; }
  /* Marquee: speed up + GPU-composite so it visibly scrolls on phones */
  .partners-track { animation-duration: 18s; will-change: transform; }
  /* Contact: match the gap above the banana to the gap below "Can we Help?" */
  .faq { margin-bottom: 64px; }
  /* How it works: more breathing room under the animation + step text */
  .hiw-stage { gap: 44px; }
  .hiw-sticky { padding: var(--sec-pad-m) 0; }
  /* Consistent vertical rhythm for the stacked content sections as you scroll */
  .community { padding: var(--sec-pad-m) 0; }
  .content3d { padding: var(--sec-pad-m) 0; }
  .placeholder-section { padding: var(--sec-pad-m) 0; }
  .keep-in-touch { padding: var(--sec-pad-m) 0; }
  /* Logo marquee + quotes read as one unit — even outer gaps, tighter seam between them */
  .partners { padding: var(--sec-pad-m) 0 28px; }
  .quotes { padding: 28px 0 var(--sec-pad-m); }
  .kit-grid { grid-template-columns: 1fr; gap: 48px; }
  .kit-col + .kit-col { border-left: none; padding-left: 0; padding-top: 44px; border-top: 1px solid rgba(0,0,0,0.08); }
  .kit-submit { min-width: 130px; }   /* Submit + Talk to us share a width */
  .quotes-inner { grid-template-columns: 1fr; gap: 44px; text-align: center; }
  .quotes-media { padding: 0; order: 2; }   /* spinner + Try-for-free below the quotes */
  .quotes-list { grid-template-columns: 1fr; }
  /* Peel-berry texture at the same scale as the logo carousel above */
  .quotes, .partners { background-size: 100% auto; background-repeat: repeat; }
  .quote { align-items: center; gap: 12px; }
  .quote-by { justify-content: center; }
  .footer-inner { flex-direction: column; gap: 28px; }
  .footer-brand { max-width: 100%; }
  .footer-cta { margin-bottom: 0; }   /* social buttons follow, so no extra gap here */
  .footer-social { margin-bottom: 40px; }   /* space below the icons, above the legal line */
  .footer-base { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* 5. Small mobile (≤479) — tighten type, spacing and controls */
@media (max-width: 479px) {
  /* side gutter + section rhythm inherit from the ≤767 range (20px / --sec-pad-m) */
  .header-inner { gap: 10px; }
  .brand-logo { height: 26px; }
  .site-header .btn-light { padding: 8px 13px; font-size: 13px; }
  .hero { padding: 40px 0 40px; }
  .pill { font-size: 15px; padding: 6px 13.2px; margin-bottom: 22px; }
  .hero-title { font-size: 27px; }
  .hero-sub { font-size: 15.6px; margin-bottom: 26px; }
  .prompt { padding: 12px 12px 10px; border-radius: 16px; }
  .prompt-input { font-size: 15px; }
  .suggestions { gap: 8px; margin-top: 18px; }
  .chip { font-size: 13.75px; padding: 7.7px 13.2px; }
  .card { flex-basis: calc(50% - 9px); }   /* 2 per row */
  .kit-title { font-size: 24px; }
  .kit-form { flex-direction: column; max-width: 230px; }       /* narrower email box */
  .kit-input { width: 100%; height: 56px; flex: none; }         /* narrower + a bit taller (flex:none so height sticks) */
  .kit-submit { align-self: center; height: 56px; }             /* keep heights matched */
}

/* ------------------------------------------------------------
   Middle / tablet range (768–1199px). The desktop head is cramped
   here (the note's arrow collides with the button grid), so use the
   stacked "note below the buttons" layout — but keep the arrow, which
   moves down with the note and points at the thumbnails as on desktop.
   ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Tighter nav so the padded pill items still clear the Log in / Get started buttons */
  .header-inner { gap: 14px; }
  .header-nav { gap: 4px; }
  .header-nav a { padding: 5px 7px; }
  /* Section 1: pull the hand-written hero label left so it clears the edge */
  .hero-annotation { right: 13%; }
  /* Section 2: drop the note (with its arrow) below the buttons */
  .community-head { flex-direction: column; align-items: flex-start; }
  .community-titles { display: contents; }
  .community-title { order: 1; }
  .cat-grid { order: 2; }
  .community-annotation { order: 3; margin: 16px 0 0; transform: none; }
}

/* ============================================================
   Legal pages (Terms of Service, Privacy Policy)
   Simple, readable document layout on a warm neutral ground.
   ============================================================ */
.legal {
  background: #F8F4F1;
  color: #2B0326;
}
/* Header: transparent over the cream ground, dark text — same buttons as home */
.legal .site-header { background: transparent; }
.legal .site-header.scrolled {
  background: rgba(248, 244, 241, 0.85);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.legal .btn-ghost { color: #4a2a44; }
.legal .btn-ghost:hover { color: #1f0b1c; }
.legal .btn-light { background: #C03E86; color: #fff; }
.legal .btn-light:hover { background: #a53573; }

.legal-main {
  /* clear the fixed 64px header */
  padding: 104px 0 80px;
}
.legal-doc {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}
.legal-title {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.legal-updated {
  color: #6a5462;
  font-size: 14.5px;
  margin-bottom: 36px;
}
.legal-doc h2 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 44px 0 14px;
  padding-top: 28px;
  border-top: 1px solid rgba(43, 3, 38, 0.10);
}
.legal-doc h2:first-of-type { border-top: 0; padding-top: 0; }
.legal-doc h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 26px 0 8px;
}
.legal-doc p {
  font-size: 15.5px;
  line-height: 1.7;
  color: #3a2435;
  margin: 0 0 16px;
}
.legal-doc ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.legal-doc li {
  font-size: 15.5px;
  line-height: 1.7;
  color: #3a2435;
  margin: 0 0 8px;
}
.legal-doc a { color: #c44a86; text-decoration: underline; }
.legal-doc a:hover { color: #a33a6e; }
/* Table of contents */
.legal-toc {
  margin: 0 0 24px;
  padding-left: 22px;
}
.legal-toc li { margin-bottom: 6px; }
.legal-contact {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #3a2435;
}
/* Data-category table (Privacy Policy) */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px;
  font-size: 14px;
}
.legal-table th,
.legal-table td {
  border: 1px solid rgba(43, 3, 38, 0.14);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  color: #3a2435;
}
.legal-table th { background: rgba(43, 3, 38, 0.05); font-weight: 700; }
.legal-table td:last-child { text-align: center; font-weight: 600; white-space: nowrap; }

@media (max-width: 767px) {
  .legal-main { padding: 88px 0 60px; }
  .legal-title { font-size: 30px; }
  .legal-doc h2 { font-size: 20px; }
  .legal-table { font-size: 12.5px; }
  .legal-table th, .legal-table td { padding: 7px 8px; }
}