/* AVATARSCO — Stylesheet
   Aesthetic: dark editorial, acid-green accent, Cormorant + Space Mono
   Motion reference: valerisabev.com (CSS-only, no GSAP)
*/

/* ─── Variables ──────────────────────────────────────────── */
:root {
  --ink:        #C5E83A;
  --surface:    #CCF04A;
  --lift:       #B8D930;
  --rim:        rgba(0,0,0,0.14);
  --muted:      rgba(0,0,0,0.28);
  --dim:        #3D3D30;
  --paper:      #0A0A0A;
  --accent:     #0A0A0A;
  --accent-bg:  rgba(0,0,0,0.07);
  --orange:     #E05500;
  --orange-bg:  rgba(224,85,0,0.10);

  --font-d: 'Syne', system-ui, sans-serif;
  --font-u: 'Space Mono', 'Courier New', monospace;

  --nav-h: 68px;
  --max:   1320px;
  --pad:   clamp(20px, 5vw, 72px);

  --spring: cubic-bezier(0.16, 1, 0.3, 1);
  --smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-u);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }

/* ─── Grain overlay ──────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  opacity: 0.032;
  pointer-events: none;
  z-index: 9000;
}

/* ─── Nav ────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  z-index: 200;
  background: #0A0A0A;
  transition: background 0.5s var(--smooth), border-color 0.5s;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-scrolled {
  background: rgba(10, 10, 10, 0.96);
  border-color: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.nav-logo {
  font-family: var(--font-d);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: color 0.25s;
}
.nav-logo:hover { color: var(--accent); }
.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-social {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-social-icon {
  display: flex;
  align-items: center;
  line-height: 0;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.nav-social-icon:hover { opacity: 1; }
.nav-social-extra { display: flex; }

.nav-follow-btn {
  font-family: var(--font-u);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0A0A0A;
  background: #C5E83A;
  padding: 8px 16px;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.nav-follow-btn:hover {
  background: #EEEBE4;
  color: #0A0A0A;
}
.nav-logo-img {
  height: 36px;
  width: auto;
  display: block;
}

/* ─── Nav blob menu ─────────────────────────────────────── */
.nav-menu-wrap { position: relative; display: flex; align-items: center; }

/* logo is now a toggle button — strip default button chrome */
.nav-logo {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;
}

.nav-goo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.nav-blob {
  position: absolute;
  top: calc(100% + 28px);
  left: -12px;
  width: 250px;
  height: 210px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.15);
  transform-origin: 40px -20px;
  transition: opacity 0.28s var(--smooth), transform 0.44s var(--spring);
}

/* thought-bubble trail — small dots leading up toward the ACO logo */
.nav-blob-trail {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s var(--smooth), transform 0.35s var(--spring);
}
.nav-blob-trail.t1 { width: 11px; height: 11px; top: 6px;   left: 30px; }
.nav-blob-trail.t2 { width: 8px;  height: 8px;  top: -3px;  left: 35px; }
.nav-blob-trail.t3 { width: 6px;  height: 6px;  top: -13px; left: 40px; }
.nav-blob-trail.t4 { width: 4px;  height: 4px;  top: -23px; left: 45px; }
.nav-blob.open .nav-blob-trail { opacity: 0.8; transform: scale(1); }
.nav-blob.open .nav-blob-trail.t4 { transition-delay: 0s; }
.nav-blob.open .nav-blob-trail.t3 { transition-delay: 0.03s; }
.nav-blob.open .nav-blob-trail.t2 { transition-delay: 0.06s; }
.nav-blob.open .nav-blob-trail.t1 { transition-delay: 0.09s; }
.nav-blob.open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* gooey shape layer — solid green circles merged by the SVG goo filter */
.nav-blob-goo {
  position: absolute;
  inset: 0;
  opacity: 0.82;
  filter: url(#nav-goo) drop-shadow(0 10px 26px rgba(0,0,0,0.26));
  pointer-events: none;
}
.nav-blob-shape {
  position: absolute;
  background: var(--orange);
  border-radius: 50%;
  will-change: transform;
}
.nav-blob-shape.s1 { width: 150px; height: 150px; top: 18px; left: 8px; }
.nav-blob-shape.s2 { width: 128px; height: 128px; top: 54px; left: 96px; }
.nav-blob-shape.s3 { width: 108px; height: 108px; top: 8px;  left: 92px; }
.nav-blob-shape.s4 { width: 120px; height: 120px; top: 78px; left: 30px; }

.nav-blob.open .nav-blob-shape    { animation: blob-float 7s ease-in-out infinite; }
.nav-blob.open .nav-blob-shape.s2 { animation-duration: 8.5s; animation-direction: reverse; }
.nav-blob.open .nav-blob-shape.s3 { animation-duration: 6s;   animation-delay: -2s; }
.nav-blob.open .nav-blob-shape.s4 { animation-duration: 9s;   animation-delay: -1s; animation-direction: reverse; }

@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(10px, -8px) scale(1.06); }
  50%      { transform: translate(-6px, 6px) scale(0.95); }
  75%      { transform: translate(6px, 10px) scale(1.03); }
}

/* particle constellation, masked to the blob silhouette */
.nav-blob-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask:
    radial-gradient(circle 66px at 83px 93px,   #000 96%, transparent 100%),
    radial-gradient(circle 55px at 160px 118px, #000 96%, transparent 100%),
    radial-gradient(circle 45px at 146px 62px,  #000 96%, transparent 100%),
    radial-gradient(circle 51px at 90px 138px,  #000 96%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask:
    radial-gradient(circle 66px at 83px 93px,   #000 96%, transparent 100%),
    radial-gradient(circle 55px at 160px 118px, #000 96%, transparent 100%),
    radial-gradient(circle 45px at 146px 62px,  #000 96%, transparent 100%),
    radial-gradient(circle 51px at 90px 138px,  #000 96%, transparent 100%);
  mask-composite: add;
}

/* crisp text links, layered above the goo */
.nav-blob-links {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* constellation connector lines between the nodes */
.nav-blob-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.45s var(--smooth);
}
.nav-blob-lines polyline {
  fill: none;
  stroke: rgba(255,255,255,0.4);
  stroke-width: 1;
  stroke-dasharray: 2 3.5;
}
.nav-blob.open .nav-blob-lines { opacity: 1; transition-delay: 0.24s; }

/* each nav item is a star: a bright node dot + its label */
.nav-blob-node {
  position: absolute;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.35s var(--smooth);
}
.nav-blob-node .node-dot {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 7px rgba(255,255,255,0.55);
  transition: box-shadow 0.2s;
}
.nav-blob-node .node-label {
  position: absolute;
  left: 12px;
  top: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: #FFFFFF;
  transition: color 0.2s;
}
.nav-blob-node:hover .node-label { text-decoration: underline; text-underline-offset: 3px; }
.nav-blob-node:hover .node-dot { box-shadow: 0 0 10px rgba(255,255,255,0.95); }

.nav-blob-node.n-custom { left: 76px;  top: 85px; }
.nav-blob-node.n-skills { left: 138px; top: 112px; }
.nav-blob-node.n-join   { left: 92px;  top: 148px; }

.nav-blob.open .nav-blob-node { opacity: 1; }
.nav-blob.open .nav-blob-node.n-custom { transition-delay: 0.10s; }
.nav-blob.open .nav-blob-node.n-skills { transition-delay: 0.15s; }
.nav-blob.open .nav-blob-node.n-join   { transition-delay: 0.20s; }

@media (prefers-reduced-motion: reduce) {
  .nav-blob { transition: opacity 0.2s; transform: scale(1); }
  .nav-blob.open .nav-blob-shape { animation: none; }
  .nav-blob-node, .nav-blob-lines { transition: opacity 0.2s; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 0.25s;
}
.nav-links a:hover { color: var(--paper); }
.nav-cta {
  color: var(--accent) !important;
  border: 1px solid rgba(200, 255, 0, 0.4);
  padding: 8px 20px;
  border-radius: 2px;
  transition: background 0.25s, border-color 0.25s !important;
}
.nav-cta:hover {
  background: var(--accent-bg) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ─── Entrance animations ────────────────────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(32px) translateZ(0); }
  to   { opacity: 1; transform: translateY(0)    translateZ(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.entering {
  opacity: 0;
  animation: rise 1s var(--spring) forwards;
}

/* Scroll-reveal base state */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--spring), transform 0.9s var(--spring);
}
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* ─── Hero ───────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--nav-h) + clamp(60px, 9.5vh, 128px)) var(--pad) clamp(60px, 8vh, 100px);
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}

.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 32px;
}

.hero-headline {
  font-family: var(--font-d);
  font-size: clamp(34px, 7vw, 84px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 64px;
  max-width: 100%;
  position: relative;
  overflow: visible;
  white-space: normal;
}
/* Each headline line carries the ruled underline + the same 14px spacing */
.hl-line {
  display: block;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rim);
  white-space: nowrap;
}
.hl-line + .hl-line { margin-top: clamp(20px, 3vh, 36px); }
/* Creative tilt on "tomorrow's" — the line's underline stays straight beneath it */
.hl-tilt {
  display: inline-block;
  transform: rotate(-5deg);
  transform-origin: center bottom;
  margin: 0 0.12em;
}

/* Heading lines — Syne 800 to match section title weight */
.hl-thin {
  display: inline;
  font-weight: 800;
  color: var(--paper);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.hl-thin:first-child {
  margin-bottom: 0;
}
.hl-ruled {
  display: inline;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Image row — absolutely positioned, centered in the padded h1 space */
.hl-img-row {
  position: absolute;
  top: 56%;
  left: 5%;
  width: 73%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  line-height: 0;
}

/* TOMORROW'S transparent asset — full width of the row */
.hl-tomorrow {
  display: block;
  width: 100%;
  height: auto;
}

.hero-sub {
  font-size: 13px;
  line-height: 1.9;
  color: var(--dim);
  max-width: 420px;
  margin-bottom: 48px;
}

.hero-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 100%;
  margin-bottom: 18px;
}
@media (min-width: 769px) {
  .hero-actions .btn { padding: 14px 18px; }
}
.action-explainer {
  font-family: var(--font-u);
  font-size: 11px;
  color: rgba(0,0,0,0.55);
  margin-bottom: 10px;
}
.action-explainer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.action-explainer a:hover { color: var(--accent); }
/* Desktop: the explainer sits centered, tucked under the action buttons */
@media (min-width: 769px) {
  .action-explainer { text-align: center; margin-top: 2px; margin-bottom: 36px; }
}
@media (max-width: 768px) {
  .action-explainer { text-align: center; margin-top: -8px; margin-bottom: 36px; }
}

/* Mobile-only heading above the action buttons, matching .showcase-title */
.action-title {
  display: none;
  font-family: var(--font-d);
  font-size: clamp(14px, 2.1vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--paper);
  text-align: center;
  margin-top: 20px;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .action-title { display: block; }
}

.hero-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--rim);
}
.hero-stats-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
/* Title above the stats — same font as the orange figures (Syne), black, all caps.
   Desktop only (hidden on mobile/tablet). */
.hero-stats-title {
  font-family: var(--font-d);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--paper);
  margin-bottom: 20px;
}
/* Mobile-only heading above the "AI avatars are going mainstream..." line.
   Same font/weight as .hero-stats-title, but mixed case (no uppercase). */
.context-title {
  display: none;
  font-family: var(--font-d);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--paper);
  margin-bottom: 6px;
}
@media (max-width: 768px) {
  .context-title { display: block; }
  .hero-context { margin-top: 0px; }
}

/* Mobile-only title above the stats row, same narrow/condensed font as
   .showcase-title (e.g. "NATIVE TO THE FEED"). */
.stats-title-block {
  display: none;
  font-family: var(--font-d);
  font-size: clamp(14px, 2.1vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--paper);
  margin-top: 24px;
  margin-bottom: 20px;
  text-align: center;
}
@media (max-width: 768px) {
  .stats-title-block { display: block; }
}
@media (max-width: 1024px) {
  .hero-stats-title { display: none; }
}
.hero-stats-row {
  display: flex;
  gap: clamp(24px, 3.5vw, 48px);
}
.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* Hero videos — two portrait clips beside the stats */
.hero-videos {
  display: flex;
  gap: 12px;
  width: clamp(260px, 32vw, 440px);
  flex-shrink: 0;
}
.hero-video {
  position: relative;
  flex: 1;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.hero-video-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0A0A0A;
  background: #C5E83A;
  /* cool organic blob that slowly morphs */
  border-radius: 60% 40% 55% 45% / 52% 58% 42% 48%;
  animation: badge-morph 9s ease-in-out infinite;
}
.hero-video-badge .badge-txt {
  font-family: var(--font-u);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.12;
}
@keyframes badge-morph {
  0%, 100% { border-radius: 60% 40% 55% 45% / 52% 58% 42% 48%; }
  25%      { border-radius: 45% 55% 42% 58% / 55% 45% 60% 40%; }
  50%      { border-radius: 52% 48% 60% 40% / 42% 60% 45% 55%; }
  75%      { border-radius: 58% 42% 48% 52% / 60% 45% 55% 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video-badge { animation: none; }
}
.stat-num {
  font-family: var(--font-d);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.hero-context {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin-top: 12px;
  max-width: 100%;
}

/* ─── Hero Showcase (push slideshow) ────────────────────── */
.hero-showcase {
  display: grid;
  grid-template-areas: "nums text photo";
  grid-template-columns: 52px 1fr 58%;
  gap: clamp(20px, 3vw, 52px);
  align-items: center;
  margin-bottom: 44px;
}

.showcase-nums {
  grid-area: nums;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
}

.showcase-num {
  font-family: var(--font-u);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--dim);
  opacity: 0.32;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  position: relative;
  transition: opacity 0.3s;
}

.showcase-num:hover { opacity: 0.65; }

.showcase-num.active {
  opacity: 1;
  color: var(--paper);
  font-weight: 700;
}

.showcase-num.active::before {
  content: '';
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 1px;
  background: currentColor;
}

.showcase-text-wrap {
  grid-area: text;
  display: grid;
}

.showcase-text-item {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s, transform 0.55s var(--spring);
  pointer-events: none;
}

.showcase-text-item.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.showcase-text-item.active.sc-leaving {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.28s ease-in, transform 0.28s ease-in;
}

.showcase-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 16px;
}

.showcase-title {
  font-family: var(--font-d);
  font-size: clamp(14px, 2.1vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 20px;
}

.showcase-body {
  font-family: var(--font-u);
  font-size: 14px;
  color: var(--dim);
  line-height: 1.85;
  max-width: 340px;
}

.showcase-photo-wrap {
  grid-area: photo;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  display: grid;
  position: relative;
}
.showcase-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  font-family: var(--font-u);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0A0A0A;
  background: #C5E83A;
  padding: 5px 11px;
  border-radius: 4px;
}

.showcase-photo-item {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s var(--smooth), transform 0.6s var(--spring);
  pointer-events: none;
}

.showcase-photo-item.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.showcase-photo-item.active.sc-leaving {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

.showcase-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  display: block;
}

/* Segment 4 holds two photos that cross-fade within its 5s window */
.showcase-photo-item.sc-dual { position: relative; }
.showcase-photo-item.sc-dual .sc-sub {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s var(--smooth);
}
.showcase-photo-item.sc-dual .sc-sub-active { opacity: 1; }

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-u);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 30px;
  border-radius: 2px;
  border: 1px solid;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--spring);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: transparent;
  color: var(--accent);
}
.btn-ghost {
  background: #EEEBE4;
  color: #0A0A0A;
  border-color: #EEEBE4;
}
.btn-ghost:hover {
  background: transparent;
  color: #0A0A0A;
  border-color: #0A0A0A;
}

.btn-orange {
  background: var(--orange);
  color: #FFFFFF;
  border-color: var(--orange);
}
.btn-orange:hover {
  background: transparent;
  color: var(--orange);
}

.btn-cyan {
  background: #00CFFF;
  color: var(--ink);
  border-color: #00CFFF;
}
.btn-cyan:hover {
  background: transparent;
  color: #00CFFF;
}

.btn-lg { padding: 18px 44px; font-size: 12px; }

/* ─── Button tooltips ────────────────────────────────────── */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 100%;
  background: rgba(48, 48, 44, 0.96);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #EEEBE4;
  font-size: 11px;
  font-family: var(--font-u);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.6;
  padding: 8px 14px;
  border-radius: 2px;
  white-space: normal;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 300;
}
[data-tip]:hover::after { opacity: 1; }
/* Disable the hover tooltip on the CTA band buttons only (kept elsewhere) */
.cta-band [data-tip]::after { content: none; }
/* No hover tooltips on touch devices or tablet/mobile widths — there's no
   real "hover" there, so the popups just get in the way. Desktop keeps them. */
@media (hover: none), (max-width: 1024px) {
  [data-tip]::after { content: none; }
}

/* ─── Timeline context statement ────────────────────────── */
.tl-context-statement {
  border-top: 1px solid var(--rim);
  padding: clamp(36px, 5vw, 60px) var(--pad);
}
.tl-context-text {
  font-family: var(--font-d);
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 400;
  color: var(--dim);
  line-height: 1.6;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

/* ─── Manifesto ──────────────────────────────────────────── */
.manifesto {
  border-top: none;
  padding: clamp(80px, 10vw, 140px) var(--pad);
  padding-top: 30px;
}
.manifesto-heading { animation: about-wave 4.5s ease-in-out infinite; }
@keyframes about-wave {
  0%   { transform: translateY(0)    rotate(0deg)    skewX(0deg); }
  15%  { transform: translateY(-3px) rotate(-2deg)   skewX(-2deg); }
  35%  { transform: translateY(2px)  rotate(1.5deg)  skewX(1.5deg); }
  50%  { transform: translateY(-2px) rotate(-1deg)   skewX(-1deg); }
  65%  { transform: translateY(3px)  rotate(1.8deg)  skewX(1.8deg); }
  85%  { transform: translateY(-1px) rotate(-1.2deg) skewX(-1.2deg); }
  100% { transform: translateY(0)    rotate(0deg)    skewX(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .manifesto-heading { animation: none; }
}
.manifesto-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.manifesto-content { max-width: 820px; }
.manifesto-heading {
  display: block;
  width: clamp(240px, 34vw, 400px);
  height: auto;
  margin: 0 0 clamp(24px, 3.2vw, 40px);
  /* White background of the source image drops out; black letters stay */
  mix-blend-mode: multiply;
}
.manifesto-logo-wrap {
  position: sticky;
  /* Base offset (nav-h + 40px) plus the About heading's rendered height
     (1024x273 image, same width clamp as .manifesto-heading) and its bottom
     margin, so the sticky video lines up with the first paragraph instead
     of the heading. */
  top: calc(var(--nav-h) + 40px + clamp(240px, 34vw, 400px) * 0.2666 + clamp(24px, 3.2vw, 40px));
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.manifesto-logo {
  width: 52%;
  height: auto;
  display: block;
  filter: brightness(0);
}
.manifesto-photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}
.manifesto-video-wrap {
  position: relative;
  width: 100%;
}
.manifesto-video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  -webkit-touch-callout: none;
  user-select: none;
}
.video-disclaimer {
  font-size: 9px;
  color: #0A0A0A;
  line-height: 1.6;
  margin-top: 10px;
  letter-spacing: 0.02em;
}
.manifesto-text {
  font-family: var(--font-d);
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--paper);
  margin-bottom: 36px;
}
.manifesto-text + .manifesto-text { margin-bottom: 24px; }
.tm {
  font-size: 0.45em;
  font-weight: 300;
  font-family: var(--font-u);
  text-decoration: none !important;
  letter-spacing: 0.05em;
  vertical-align: super;
  line-height: 1;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.pillar {
  background: var(--surface);
  border: 1px solid var(--rim);
  padding: 20px 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  transition: border-color 0.3s, background 0.3s;
}
.pillar:hover {
  border-color: var(--orange);
  background: var(--orange-bg);
}
.pillar-num {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent);
  flex-shrink: 0;
}
.pillar-label {
  font-family: var(--font-d);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

/* ─── Sign-up ────────────────────────────────────────────── */
.signup {
  border-top: 1px solid var(--rim);
  padding: clamp(60px, 8vw, 100px) var(--pad);
}
.signup-inner {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.signup-label {
  font-family: var(--font-d);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.signup-sub {
  font-size: 12px;
  color: var(--dim);
  line-height: 1.8;
  margin-bottom: 32px;
}
.signup-form {
  display: flex;
  gap: 10px;
}
.signup-input {
  flex: 1;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.2);
  color: var(--paper);
  font-family: var(--font-u);
  font-size: 12px;
  padding: 14px 18px;
  border-radius: 2px;
  outline: none;
  transition: border-color 0.25s;
}
.signup-input::placeholder { color: rgba(0,0,0,0.38); }
.signup-input:focus { border-color: var(--orange); }
.signup-btn { white-space: nowrap; }
.signup-disclaimer {
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-align: center;
}

/* ─── Timeline Ticker ───────────────────────────────────── */
.timeline-section {
  border-top: 1px solid var(--rim);
  padding: clamp(60px, 8vw, 100px) var(--pad);
}
.timeline-section-inner {
  max-width: var(--max);
  margin: 0 auto;
}
.timeline-section-header {
  display: flex;
  align-items: baseline;
  gap: 2em;
  margin-bottom: 48px;
}
.timeline-eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.timeline-title {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: inherit;
  font-weight: 400;
}

/* Arrow controls */
.timeline-controls-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
}
.tl-arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.tl-arrow {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dim);
  padding: 4px;
  line-height: 0;
  transition: color 0.2s;
  display: block;
}
.tl-arrow:hover { color: var(--orange); }

/* Scrolling window */
.timeline-window {
  flex: 1;
  height: 320px; /* 5 rows × 64px */
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--rim);
  border-bottom: 1px solid var(--rim);
}

@keyframes tl-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.timeline-track {
  animation: tl-scroll 52s linear infinite;
}
.timeline-track:hover { animation-play-state: paused; }

.tl-row {
  display: grid;
  grid-template-columns: 72px 1fr 2fr;
  align-items: center;
  gap: 24px;
  height: 64px;
  padding: 0 4px;
  border-bottom: 1px solid var(--rim);
  transition: background 0.2s;
}
.tl-row:hover { background: var(--surface); }

.tl-year {
  font-family: var(--font-u);
  font-size: 12px;
  color: var(--orange);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.tl-milestone {
  font-family: var(--font-d);
  font-size: 15px;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-desc {
  font-size: 11px;
  color: var(--dim);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* Fade masks so rows dissolve in and out */
.timeline-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 56px;
  pointer-events: none;
  z-index: 2;
}
.timeline-fade-top {
  top: 0;
  background: linear-gradient(to bottom, var(--ink), transparent);
}
.timeline-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--ink), transparent);
}

/* Timeline — MOBILE ONLY: stack each row, auto height, centered.
   (Desktop layout above is untouched.) Fixes the overlap on small screens. */
@media (max-width: 768px) {
  .timeline-section-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }
  .tl-arrows { display: none; } /* auto-scroll handles it; keeps the frame centered */
  .timeline-window { height: clamp(320px, 60vh, 440px); }
  .tl-row {
    grid-template-columns: 1fr;
    height: auto;
    gap: 4px;
    padding: 15px 10px;
    justify-items: center;
    text-align: center;
  }
  .tl-milestone {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 16px;
    line-height: 1.2;
  }
  .tl-desc { font-size: 12px; max-width: 300px; }
}

/* ─── CTA Band ───────────────────────────────────────────── */
.cta-band {
  border-top: 1px solid var(--rim);
  padding: clamp(80px, 12vw, 160px) var(--pad);
  text-align: center;
  background: linear-gradient(180deg, var(--ink) 0%, var(--surface) 100%);
}
@media (min-width: 769px) {
  .cta-band { padding-top: 75px; padding-bottom: 40px; }
}
.cta-inner { max-width: var(--max); margin: 0 auto; text-align: center; }
.cta-headline {
  font-family: var(--font-d);
  font-size: clamp(44px, 7.5vw, 96px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 0.92;
  text-align: center;
  margin-bottom: 28px;
}
.cta-sub {
  font-size: 13px;
  color: var(--dim);
  line-height: 1.8;
  margin-bottom: 52px;
  max-width: 400px;
  margin-inline: auto;
}

.cta-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 820px;
  margin-inline: auto;
  align-items: start;
}

.cta-nudge {
  display: block;
  margin-top: 14px;
  margin-bottom: 52px;
  font-size: 13px;
  font-family: var(--font-u);
  color: var(--accent);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s;
  letter-spacing: 0.01em;
  text-align: center;
}
.cta-nudge:hover { opacity: 1; }
.cta-nudge-highlight {
  font-weight: 700;
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Email Modal ────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 8, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--smooth);
}
.modal-overlay.modal-open {
  opacity: 1;
  pointer-events: all;
}
.modal-card {
  background: var(--surface);
  border: 1px solid var(--rim);
  padding: 44px 40px 40px;
  max-width: 420px;
  width: 100%;
  position: relative;
  text-align: center;
  transform: translateY(20px);
  transition: transform 0.4s var(--spring);
}
.modal-overlay.modal-open .modal-card {
  transform: translateY(0);
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  color: var(--dim);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}
.modal-close:hover { color: var(--paper); }
.modal-title {
  font-family: var(--font-d);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 14px;
}
.modal-body {
  font-size: 12px;
  color: var(--accent);
  line-height: 1.85;
  margin-bottom: 36px;
}
.modal-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.btn-ghost-sm {
  display: inline-block;
  font-family: var(--font-u);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 2px;
  border: 1px solid var(--rim);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.btn-ghost-sm:hover { color: var(--paper); border-color: var(--paper); }
.btn-continue {
  display: inline-block;
  font-family: var(--font-u);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: 2px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.btn-continue:hover {
  background: transparent;
  color: var(--accent);
}

/* ─── Custom Avatar Packaging ────────────────────────────── */
.bespoke {
  background: var(--surface);
  border-top: 2px solid var(--orange);
  padding: clamp(60px, 8vw, 110px) 30px;
}
.bespoke-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.bespoke-eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 20px;
}
.bespoke-title {
  font-family: var(--font-d);
  font-size: clamp(32px, 7vw, 80px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 28px;
  overflow-wrap: break-word;
}
.bespoke-desc {
  font-size: 13px;
  color: var(--dim);
  line-height: 1.85;
  max-width: 380px;
}

/* Form */
.bespoke-form { width: 100%; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 12px;
}
.form-row .form-group { margin-bottom: 0; }
.form-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.form-input {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.2);
  color: var(--paper);
  font-family: var(--font-u);
  font-size: 12px;
  padding: 13px 16px;
  border-radius: 2px;
  outline: none;
  width: 100%;
  transition: border-color 0.25s;
  -webkit-appearance: none;
}
.form-input::placeholder { color: rgba(0,0,0,0.38); }
.form-input:focus { border-color: var(--orange); }
.form-textarea {
  resize: vertical;
  min-height: 100px;
}
.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888880' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.form-select option { background: var(--lift); }
.form-footer {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.form-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 260px;
}
.form-success {
  display: none;
  margin-top: 20px;
  padding: 16px 20px;
  background: rgba(245, 124, 0, 0.08);
  border: 1px solid rgba(245, 124, 0, 0.3);
  border-radius: 2px;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.7;
}
.form-success.visible { display: block; }
.form-success-title {
  display: block;
  font-family: var(--font-d);
  font-size: 16px;
  font-weight: 700;
  color: var(--paper);
  margin-bottom: 4px;
}
.form-submitted .form-footer { display: none; }
.form-submitted .form-group,
.form-submitted .form-row { opacity: 0.3; pointer-events: none; }

/* ─── Footer ─────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--rim);
  padding: 28px var(--pad);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-logo-img {
  height: 28px;
  width: auto;
  display: block;
  filter: brightness(0);
  opacity: 0.7;
  transition: opacity 0.25s;
}
.footer-logo-img:hover { opacity: 1; }
.footer-copy {
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.05em;
}
.footer-email {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.06em;
  opacity: 0.85;
  transition: opacity 0.25s;
}
.footer-email:hover { opacity: 1; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-social-extra { display: none; }
  .hero-rule { flex-direction: column; gap: 20px; }
  .hero-stats-col { width: 100%; }
  .hero-videos { width: 100%; }

  /* Hero layout */
  .hero {
    padding-top: calc(var(--nav-h) + 40px); /* 40px visible gap above the title on mobile */
    padding-bottom: clamp(48px, 8vh, 80px);
  }
  .hero-headline {
    white-space: normal;
    font-size: clamp(22px, calc(6.2vw + 2px), 42px);
    margin-bottom: 24px;
    padding-left: 7px;
    padding-right: 7px;
  }
  .hl-line {
    white-space: normal;
  }
  .hl-internet { font-size: inherit; }

  /* Move the "Unsure about any of these?" line to the bottom of the action
     buttons on mobile (desktop keeps it above the buttons). Every direct
     .hero child needs an explicit order since mixing set/unset order
     values would otherwise scramble the rest of the sequence. This also
     includes .hero-stats-row, which a separate script relocates to be a
     direct child of .hero on mobile (it must stay between the "AI is not
     just a trend" title and the photo slideshow). */
  .hero-headline { order: 1; }
  .stats-title-block { order: 2; }
  .hero-stats-row { order: 2; }
  .hero-showcase { order: 3; }
  .action-title { order: 4; }
  .hero-actions { order: 5; }
  .action-explainer { order: 6; }
  .cta-nudge { order: 7; }
  .hero-rule { order: 8; }

  /* Swap "Work With Us" and "Request a Digital Twin" on mobile only */
  .hero-actions a[data-mailto*="Work%20With%20Us"] { order: 4; }
  .hero-actions a[data-mailto*="Request%20a%20Digital%20Twin"] { order: 3; }

  /* Showcase — mobile: photo top, text middle, nums bottom */
  .hero-showcase {
    grid-template-areas:
      "photo"
      "text"
      "nums";
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
  }
  /* Center the showcase supporting text (eyebrow, title, body) on mobile */
  .showcase-text-item { text-align: center; }
  .showcase-body { margin-left: auto; margin-right: auto; font-size: 12px; }
  .showcase-nums {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 28px;
  }
  .showcase-num.active::before {
    right: auto;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 1px;
  }
  .showcase-photo-wrap {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* Stat bar: allow wrapping into two rows on narrow screens */
  .hero-rule {
    gap: 20px 32px;
    flex-wrap: wrap;
  }
  .hero-stat {
    min-width: 100px;
    align-items: center;
    text-align: center;
  }
  /* Center the stats frame, each number, and each label; drop the forced
     line break so the context text wraps naturally */
  .hero-stats-col { align-items: center; text-align: center; max-width: 350px; margin-left: auto; margin-right: auto; }
  /* The numbers row is repositioned above the showcase on mobile — center + cap it */
  .hero-stats-row { justify-content: center; max-width: 350px; margin: 0 auto 28px; }
  .hero-context { text-align: center; }
  .hero-context br { display: none; }

  /* CTA-band nudge on mobile: half the bottom space, smaller text (fewer line
     breaks), and full opacity so the non-link text reads as true black. */
  .cta-band .cta-nudge { margin-bottom: 26px; font-size: 11px; opacity: 1; }
  /* Trim the big bottom padding under the CTA band on mobile (was ~80px) */
  .cta-band { padding-bottom: 20px; padding-top: 15px; }

  /* Buttons: single column on mobile */
  .hero-actions {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .hero-actions .btn {
    text-align: center;
  }

  /* Manifesto */
  .manifesto-inner { grid-template-columns: 1fr; }
  /* Match the manifesto text block to the video width (320) and center both,
     so their left edges line up on mobile */
  .manifesto-content { max-width: 320px; margin-left: auto; margin-right: auto; }
  .manifesto-heading { margin-left: auto; margin-right: auto; }
  .manifesto-logo-wrap { position: static; order: 1; max-width: 100%; margin: 36px 0; gap: 20px; }
  .manifesto-logo { width: 140px; }
  .manifesto-photo { border-radius: 4px; }
  .manifesto-video-wrap { width: min(100%, 320px); margin-inline: auto; }
  /* Disclaimer: 20px below the video, same 320px width, aligned under it */
  .video-disclaimer { margin-top: 0; width: min(100%, 320px); margin-inline: auto; text-align: center; }
  .pillars { grid-template-columns: 1fr; gap: 2px; }

  /* Bespoke */
  .bespoke-inner { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  /* Sign-up */
  .signup-form { flex-direction: column; }

  /* CTA */
  .cta-actions {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
  .cta-actions .btn {
    text-align: center;
  }

  /* Footer */
  .footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  :root { --pad: 18px; }
  .stat-num { font-size: clamp(28px, 8vw, 48px); }
  .stat-label { font-size: 9px; }
  .hero-actions { grid-template-columns: 1fr; }
  .cta-actions { grid-template-columns: 1fr; }
  .bespoke-title { font-size: clamp(28px, 10vw, 48px); }
}

/* ─── Showcase: centered + edge nums on desktop ─────────── */
@media (min-width: 769px) {
  .hero-showcase {
    margin-left: calc(-1 * var(--pad));
    width: calc(100% + var(--pad));
    grid-template-columns: calc(var(--pad) + 28px) minmax(180px, 1fr) 52%;
    gap: clamp(16px, 2.5vw, 40px);
  }
  .showcase-nums {
    gap: 28px;
  }
  .showcase-num {
    font-size: 14px;
    letter-spacing: 0.06em;
  }
}

/* ─── Recommended (affiliate) ─── */
.recommend {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) var(--pad);
  border-top: 1px solid var(--rim);
  text-align: center;
}
.recommend-inner { max-width: 100%; }
.recommend-prelude {
  font-family: var(--font-d);
  font-size: 18px;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 8px;
}
.recommend-title {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 14px;
}
.recommend-intro {
  font-family: var(--font-u);
  font-size: 13px;
  line-height: 1.7;
  color: var(--dim);
  max-width: 740px; /* wider so it fits on two lines on desktop (mobile stays full-width) */
  margin: 0 auto 38px;
}
.recommend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 26px;
}
.recommend-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42%;
  align-items: stretch;
  border: 1px solid var(--rim);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.02);
  overflow: hidden;
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.recommend-card:hover {
  border-color: var(--paper);
  background: rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}
.recommend-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px 30px;
}
.recommend-tag {
  font-family: var(--font-u);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}
.recommend-name {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.recommend-desc {
  font-family: var(--font-u);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--dim);
  flex: 1;
}
.recommend-cta {
  font-family: var(--font-u);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--paper);
  margin-top: 12px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.recommend-card:hover .recommend-cta { border-color: var(--paper); }
.recommend-img {
  position: relative;
  aspect-ratio: 3 / 4; /* fixed target: design images at 3:4 portrait */
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.recommend-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recommend-disclosure {
  font-family: var(--font-u);
  font-size: 9px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 660px; /* wide on desktop/tablet so it doesn't squish; mobile caps it at 320 */
  margin: 0 auto;
}

/* ─── FAQ ────────────────────────────────────────────────── */
.faq {
  border-top: 1px solid var(--rim);
  padding: clamp(60px, 8vw, 100px) var(--pad);
}
.faq-inner { max-width: 780px; margin: 0 auto; }
.faq-title {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 20px;
}
.faq-title-s { font-size: 0.5em; }
.faq-list { max-width: 780px; }
.faq-item + .faq-item { margin-top: 22px; }
/* Staggered scroll-reveal: each item cascades in slightly after the last */
.faq-item[data-reveal] { transition-delay: 0ms; }
.faq-item:nth-child(2)[data-reveal] { transition-delay: 70ms; }
.faq-item:nth-child(3)[data-reveal] { transition-delay: 140ms; }
.faq-item:nth-child(4)[data-reveal] { transition-delay: 210ms; }
.faq-q {
  font-family: var(--font-u);
  font-size: 14px;
  color: var(--paper);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: opacity 0.2s var(--spring);
}
.faq-q:hover { opacity: 0.6; }
.faq-q::-webkit-details-marker { display: none; }
.faq-num {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--orange);
  flex-shrink: 0;
  transition: color 0.2s var(--spring);
}
.faq-item[open] .faq-num { color: var(--paper); }
.faq-q-text { flex: 1; }
.faq-q::after {
  content: '+';
  font-size: 17px;
  color: var(--muted);
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.3s var(--spring), color 0.3s var(--spring);
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); color: var(--orange); }
/* Animated open/close where supported (Chrome/Edge); falls back to the
   native instant snap in browsers without ::details-content support. */
.faq-item::details-content {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.35s var(--spring), opacity 0.25s var(--spring), content-visibility 0.35s var(--spring) allow-discrete;
}
.faq-item[open]::details-content {
  height: auto;
  opacity: 1;
}
.faq-a {
  font-family: var(--font-u);
  font-size: 13px;
  line-height: 1.7;
  color: var(--dim);
  margin: 8px 0 0 30px;
  max-width: 610px;
}
@media (max-width: 768px) {
  /* More breathing room on the sides, and align the number/icon to the
     top of the row instead of centering against wrapped, multi-line
     questions (which looked lopsided on narrow screens). */
  .faq { padding-left: 28px; padding-right: 28px; }
  .faq-q { align-items: flex-start; gap: 12px; }
  .faq-num { margin-top: 3px; }
  .faq-q::after { margin-top: 1px; }
  .faq-a { margin-left: 0; max-width: 100%; }
}
@media (max-width: 880px) {
  .recommend-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .recommend-card { grid-template-columns: 1fr; }
  /* Mobile uses the 4:3 (landscape) crop, swapped in via <picture> */
  .recommend-img { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 768px) {
  /* Smaller heading on mobile so it stops breaking every word onto its own line */
  .recommend-title { font-size: clamp(20px, 5.6vw, 30px); line-height: 1.45; }
  /* Keep the disclosure narrow on mobile */
  .recommend-disclosure { max-width: 320px; }
}

/* ─── Reduced motion ─────────────────────────────────────── */
/* Timeline: pause scroll for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .timeline-track { animation: none; }
  .entering { animation: none; opacity: 1; }
  [data-reveal] { transition: none; }
  [data-reveal].revealed { opacity: 1; transform: none; }
}

/* ─── Entry gate (first-visit interstitial) ──────────────── */
.entry-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 10, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.entry-gate.is-open { opacity: 1; }
.entry-gate[hidden] { display: none; }
.entry-gate-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #0A0A0A;
  color: #EEEBE4;
  border: 1px solid rgba(197, 232, 58, 0.25);
  border-radius: 14px;
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  transform: translateY(14px);
  transition: transform 0.45s var(--spring);
}
.entry-gate.is-open .entry-gate-panel { transform: translateY(0); }
.entry-gate-skip {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  font-family: var(--font-u);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(238, 235, 228, 0.5);
  cursor: pointer;
  transition: color 0.2s;
}
.entry-gate-skip:hover { color: #C5E83A; }
.entry-gate-eyebrow {
  font-family: var(--font-u);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C5E83A;
  margin-bottom: 14px;
}
.entry-gate-title {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.05;
  margin-bottom: 12px;
}
.eg-dot { color: #C5E83A; }
.entry-gate-sub {
  font-family: var(--font-u);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(238, 235, 228, 0.66);
  margin-bottom: 26px;
}
.entry-gate-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}
.entry-gate-btn {
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(238, 235, 228, 0.16);
  border-radius: 9px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.entry-gate-btn:hover {
  border-color: #C5E83A;
  background: rgba(197, 232, 58, 0.06);
  transform: translateY(-1px);
}
.eg-btn-label {
  display: block;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 17px;
  color: #EEEBE4;
}
.eg-btn-sub {
  display: block;
  font-family: var(--font-u);
  font-size: 12px;
  color: rgba(238, 235, 228, 0.5);
  margin-top: 4px;
}
.entry-gate-fineprint {
  font-family: var(--font-u);
  font-size: 9.5px;
  line-height: 1.55;
  color: rgba(238, 235, 228, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .entry-gate, .entry-gate-panel { transition: opacity 0.2s ease; transform: none; }
}
.entry-gate-fineprint a {
  color: #C5E83A;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── Cookie / analytics consent banner ──────────────────── */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 24px;
  padding: 16px clamp(16px, 4vw, 40px);
  background: #0A0A0A;
  border-top: 1px solid rgba(197, 232, 58, 0.28);
  transform: translateY(100%);
  transition: transform 0.4s var(--spring);
}
.cookie-consent.is-open { transform: translateY(0); }
.cookie-consent[hidden] { display: none; }
.cookie-text {
  font-family: var(--font-u);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(238, 235, 228, 0.7);
  max-width: 720px;
}
.cookie-text a { color: #C5E83A; text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
  font-family: var(--font-u);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: 3px;
  border: 1px solid;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cookie-accept { background: #C5E83A; color: #0A0A0A; border-color: #C5E83A; }
.cookie-accept:hover { background: #d4f24f; }
.cookie-decline { background: transparent; color: rgba(238, 235, 228, 0.7); border-color: rgba(238, 235, 228, 0.25); }
.cookie-decline:hover { color: #EEEBE4; border-color: #EEEBE4; }

/* ─── TABLET PASS (769–1024px) ────────────────────────────────
   Only affects tablet widths. Mobile (<=768) and desktop (>1024)
   are untouched. Borrows the proven stacked treatments for the two
   sections that get cramped in the desktop multi-column layout. */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Showcase: stack photo / text / numbers, centered, instead of the
     squeezed 3-column grid */
  .hero-showcase {
    grid-template-areas:
      "photo"
      "text"
      "nums";
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .showcase-nums {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }
  .showcase-num.active::before {
    right: auto;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 1px;
  }
  .showcase-text-item { text-align: center; }
  .showcase-body { margin-left: auto; margin-right: auto; }

  /* Affiliate cards: one per row so the text + image panels have room */
  .recommend-grid { grid-template-columns: 1fr; }
}