/* ═══════════════════════════════════════════════════════════════
   Chitragupta Landing — new-styles.css
   Aesthetic: Tactile Editorial Paper & Collage
   Warm organic cream ground, high-contrast editorial serif,
   tactile deckle-edge paper scraps, golden constellation accents.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --bg-canvas: #FAF7F2;
  --bg-canvas-subtle: #F4EFE7;
  --bg-ground: #E4DAC8;
  --bg-card: #FFFFFF;
  --bg-card-warm: #FAF8F5;
  --bg-dark: #191716;
  --bg-dark-raised: #23201E;

  --ink-heading: #1A1816;
  --ink-body: #4E4942;
  --ink-muted: #7A746B;
  --ink-light: #A29C92;

  --accent-gold: #B8863A;
  --accent-gold-soft: #D4A359;
  --accent-gold-light: #F4E2C4;
  --accent-gold-bg: rgba(184, 134, 58, 0.08);

  --border-subtle: rgba(40, 32, 24, 0.08);
  --border-card: rgba(40, 32, 24, 0.09);
  --border-medium: rgba(40, 32, 24, 0.14);
  --border-dark: rgba(255, 255, 255, 0.10);

  --shadow-nav: 0 12px 32px -4px rgba(35, 28, 20, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  --shadow-btn: 0 8px 24px -4px rgba(27, 25, 23, 0.28);
  --shadow-btn-light: 0 2px 8px rgba(35, 28, 20, 0.04);
  --shadow-card: 0 16px 44px -8px rgba(35, 28, 20, 0.06), 0 1px 3px rgba(35, 28, 20, 0.03);
  --shadow-card-hover: 0 24px 56px -10px rgba(35, 28, 20, 0.12), 0 1px 3px rgba(35, 28, 20, 0.05);
  --shadow-window: 0 32px 90px -16px rgba(25, 20, 15, 0.38), 0 0 0 1px rgba(0, 0, 0, 0.12);

  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-hand: 'Caveat', cursive;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
  --paper-crumple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013' numOctaves='5' seed='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeDiffuseLighting lighting-color='%23ffffff' surfaceScale='2.2'%3E%3CfeDistantLight azimuth='235' elevation='55'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23c)' opacity='0.42'/%3E%3C/svg%3E");
  --paper-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23m)' opacity='0.3'/%3E%3C/svg%3E");

  --hero-inset: 16px;
  --hero-radius: 32px;

  color-scheme: light;
}

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

html {
  background: var(--bg-ground);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--bg-ground);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Subtle organic paper background texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  /* The survey sheet the page is laid over. Real contour lines — a periodic
     height field run through marching squares, so the 900px tile has no
     seam. Fixed, so the page travels across the terrain rather than
     carrying it; the clouds and birds in .world scroll instead, which is
     what separates the ground from the things drawn on it. */
  background-image:
    url("/topo.svg"),
    radial-gradient(circle at 20% 15%, rgba(184, 134, 58, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 80% 25%, rgba(68, 128, 192, 0.02) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(184, 134, 58, 0.02) 0%, transparent 50%);
  background-size: 900px 900px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  opacity: 0.17;
  pointer-events: none;
  z-index: 0;
}

/* The ground is paper too: a fine grain over a slow crease, so the cream is
   never a dead flat fill behind a hero built out of torn paper. Fixed, so it
   does not slide past the content as you scroll. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='5' seed='3'/%3E%3CfeDiffuseLighting lighting-color='%23ffffff' surfaceScale='3.4'%3E%3CfeDistantLight azimuth='48' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23w)'/%3E%3C/svg%3E");
  background-size: 240px 240px, 900px 900px;
  background-blend-mode: overlay, normal;
  mix-blend-mode: soft-light;
  opacity: 0.95;
}

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

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════
   FLOATING PILL NAVIGATION
   ═══════════════════════════════════════════════════════ */
.nav-capsule {
  position: fixed;
  top: 24px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 20px;
  pointer-events: none;
  transition: transform 0.3s ease, top 0.3s ease;
}

.nav-capsule-inner {
  pointer-events: auto;
  max-width: 900px;
  width: 100%;
  height: 52px;
  padding: 6px 8px 6px 18px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 9999px;
  box-shadow: var(--shadow-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-logo-box {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-logo-box img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
}

.nav-brand-text {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-heading);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-item {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-body);
  transition: color 0.18s ease;
}

.nav-item:hover {
  color: var(--ink-heading);
}

.nav-cta-btn {
  background: var(--bg-dark);
  color: #FAF7F2;
  padding: 9px 20px;
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.nav-cta-btn:hover {
  background: #2D2926;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(25, 23, 22, 0.18);
}

.nav-cta-btn .arr {
  transition: transform 0.18s ease;
}

.nav-cta-btn:hover .arr {
  transform: translateX(2px);
}

/* ═══════════════════════════════════════════════════════
   HERO SECTION — TACTILE COLLAGE
   ═══════════════════════════════════════════════════════ */
.hero-collage-wrapper {
  position: relative;
  min-height: 100vh;
  padding: 158px 0 0;
  overflow: hidden;
  background: var(--bg-canvas);
  margin: var(--hero-inset) var(--hero-inset) 0;
  border-radius: var(--hero-radius);
  box-shadow:
    0 0 0 1px rgba(45, 35, 22, 0.07),
    0 2px 6px rgba(45, 35, 22, 0.06),
    0 16px 38px -10px rgba(45, 35, 22, 0.12),
    0 46px 100px -26px rgba(45, 35, 22, 0.22);
}

/* Hero Center Content */
.hero-center {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 10;
  padding: 0 20px;
}

.hero-kicker {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 16px;
  display: inline-block;
}

.hero-heading {
  font-family: var(--font-serif);
  font-size: clamp(44px, 5.5vw, 82px);
  font-weight: 450;
  line-height: 1.04;
  letter-spacing: -0.021em;
  color: var(--ink-heading);
  margin-bottom: 12px;
}

.hero-subhead {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.75vw, 19.5px);
  line-height: 1.55;
  color: var(--ink-body);
  max-width: 546px;
  margin: 0 auto 26px;
}

.hero-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.btn-hero-dark {
  background: var(--bg-dark);
  color: #FAF7F2;
  padding: 14px 32px;
  border-radius: 9999px;
  font-size: 15.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 0 0 1px rgba(184, 134, 58, 0.42), var(--shadow-btn);
  transition: all 0.22s ease;
}

.btn-hero-dark:hover {
  background: #2D2926;
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(184, 134, 58, 0.6), 0 12px 30px -4px rgba(27, 25, 23, 0.38);
}

.btn-hero-dark .arr {
  font-size: 17px;
  transition: transform 0.18s ease;
}

.btn-hero-dark:hover .arr {
  transform: translateX(3px);
}

.btn-hero-light {
  background: var(--bg-card);
  color: var(--ink-heading);
  border: 1px solid var(--border-medium);
  padding: 14px 28px;
  border-radius: 9999px;
  font-size: 15.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-shadow: var(--shadow-btn-light);
  transition: all 0.22s ease;
}

.btn-hero-light:hover {
  background: #FFFFFF;
  border-color: rgba(40, 32, 24, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(35, 28, 20, 0.08);
}

.gh-icon {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

/* Value Props Strip */
.hero-props-strip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 26px;
  padding: 6px 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-muted);
}

.prop-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.prop-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-gold);
}

.prop-icon {
  width: 14px;
  height: 14px;
  stroke: var(--accent-gold);
  stroke-width: 1.6;
  fill: none;
}

.prop-divider {
  width: 1px;
  height: 12px;
  background: rgba(40, 32, 24, 0.15);
}

/* ═══════════════════════════════════════════════════════
   COLLAGE LAYER ELEMENTS
   Every piece is positioned against .hero-collage-wrapper,
   using the reference composition at a 1536px-wide canvas.
   --cl: one scale knob so the whole collage shrinks together.
   ═══════════════════════════════════════════════════════ */
.hero-collage-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  --cl: clamp(0.62px, 0.0651vw, 1px);
}

.hero-collage-layers img {
  position: absolute;
  height: auto;
  display: block;
}

.hero-collage-layers svg {
  position: absolute;
}

/* ── LEFT GROUP ─────────────────────────────────────── */

/* Torn parchment band running off the bottom-left corner */
.cl-parchment {
  left: calc(-130 * var(--cl));
  top: calc(697 * var(--cl) + 158px);
  width: calc(740 * var(--cl));
  transform: rotate(25deg);
  transform-origin: 50% 50%;
  clip-path: inset(0 30% 0 0);
  opacity: 0.9;
  filter: drop-shadow(0 12px 28px rgba(45, 34, 22, 0.08));
  z-index: 5;
}

/* The matching piece anchoring the bottom-right corner. Mirrored so the two
   torn edges do not read as the same scrap used twice. */
.cl-parchment-right {
  right: calc(-215 * var(--cl));
  top: calc(788 * var(--cl) + 60px);
  width: calc(660 * var(--cl));
  transform: scaleX(-1) rotate(25deg);
  transform-origin: 50% 50%;
  clip-path: inset(0 30% 0 0);
  opacity: 0.66;
  filter: drop-shadow(0 12px 28px rgba(45, 34, 22, 0.07));
  z-index: 1;
}

/* Torn sky scrap tucked against the top of the bottom-left slab */
.cl-sky-left {
  left: calc(198 * var(--cl));
  top: calc(642 * var(--cl) + 60px);
  width: calc(132 * var(--cl));
  transform: rotate(104deg);
  filter: saturate(0.42) brightness(1.12) contrast(0.88)
          drop-shadow(0 8px 20px rgba(40, 30, 20, 0.12));
  z-index: 6;
}

/* Thin gold arc sweeping up the bottom-left corner */
.cl-arc-bottom {
  left: 0;
  top: calc(800 * var(--cl) + 60px);
  width: calc(280 * var(--cl));
  height: calc(340 * var(--cl));
  z-index: 7;
}

/* Sun + cloud cutout, tucked above and right of the tree crown */
.cl-sun {
  left: calc(43 * var(--cl));
  top: calc(218 * var(--cl) + 60px);
  width: calc(450 * var(--cl));
  transform: rotate(-2deg);
  filter: saturate(0.6) brightness(1.08) contrast(0.92)
          drop-shadow(0 10px 26px rgba(184, 134, 58, 0.14));
  z-index: 2;
}

/* Windswept tree, crown overlapping the cloud */
.cl-tree {
  left: calc(-126 * var(--cl));
  top: calc(255 * var(--cl) + 60px);
  width: calc(435 * var(--cl));
  filter: drop-shadow(0 16px 38px rgba(20, 16, 12, 0.16));
  z-index: 4;
}

/* ── HANDWRITTEN ANNOTATIONS ────────────────────────── */
.cl-note {
  position: absolute;
  z-index: 6;
  text-align: left;
}

.hand {
  font-family: var(--font-hand);
  font-size: calc(19 * var(--cl));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8A8275;
  display: block;
  white-space: nowrap;
}

.hand-arrow {
  display: block;
  opacity: 0.7;
}

.cl-note-left {
  left: 6%;
  top: calc(108 * var(--cl) + 44px);
}

.hand-arrow-left {
  width: calc(62 * var(--cl));
  height: calc(86 * var(--cl));
  margin: calc(2 * var(--cl)) 0 0 calc(26 * var(--cl));
}

.cl-note-right {
  right: 3.2%;
  top: calc(375 * var(--cl) + 30px);
}

.cl-note-right .hand {
  text-align: center;
}

.hand-arrow-right {
  width: calc(64 * var(--cl));
  height: calc(88 * var(--cl));
  margin: calc(2 * var(--cl)) 0 0 calc(34 * var(--cl));
}

/* Two bird glyphs in the open sky left of the headline */
.cl-birds {
  left: 20.5%;
  top: calc(230 * var(--cl) + 22px);
  width: calc(72 * var(--cl));
  height: calc(36 * var(--cl));
  opacity: 0.6;
  z-index: 5;
}

/* ── RIGHT GROUP ────────────────────────────────────── */

/* Large thin gold arc entering from the top-right corner */
.cl-arc-right {
  right: calc(-20 * var(--cl));
  top: calc(60 * var(--cl));
  width: calc(400 * var(--cl));
  height: calc(620 * var(--cl));
  z-index: 3;
}

/* Torn-paper sky scrap */
.cl-sky {
  right: calc(26 * var(--cl));
  top: calc(132 * var(--cl) + 20px);
  width: calc(325 * var(--cl));
  transform: rotate(-1deg);
  filter: saturate(0.42) brightness(1.12) contrast(0.88)
          drop-shadow(0 12px 30px rgba(40, 30, 20, 0.14));
  z-index: 2;
}

/* The gold node-and-rule that links the sky scrap to the window */
.cl-lines-right {
  right: calc(229 * var(--cl));
  top: calc(358 * var(--cl) + 20px);
  width: calc(220 * var(--cl));
  height: calc(190 * var(--cl));
  z-index: 3;
}

/* Temple pavilion collage, bleeding off the bottom-right */
.cl-temple {
  right: calc(110 * var(--cl));
  top: calc(470 * var(--cl) + 60px);
  width: calc(280 * var(--cl));
  filter: drop-shadow(0 18px 42px rgba(20, 16, 12, 0.18));
  z-index: 4;
}

/* The canopy beside the monument, mostly off-canvas as in the original */
.cl-tree-right {
  right: calc(-200 * var(--cl));
  top: calc(515 * var(--cl) + 60px);
  width: calc(370 * var(--cl));
  filter: drop-shadow(0 14px 34px rgba(20, 16, 12, 0.14));
  z-index: 3;
}

/* Torn note, laid over the temple */
.cl-paper-note {
  right: calc(14 * var(--cl));
  top: calc(640 * var(--cl) + 60px);
  width: calc(178 * var(--cl));
  transform: rotate(-2.5deg);
  filter: drop-shadow(0 14px 32px rgba(35, 25, 18, 0.18));
  z-index: 5;
}


/* ═══════════════════════════════════════════════════════
   PRODUCT SHOWCASE WINDOW (MACOS DASHBOARD)
   ═══════════════════════════════════════════════════════ */
.hero-showcase {
  max-width: 1012px;
  margin: 26px auto 0;
  padding: 0 20px;
  position: relative;
  z-index: 8;
}

.mac-window-frame {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 32px 90px -16px rgba(25, 20, 15, 0.42), 0 0 0 1px rgba(0, 0, 0, 0.2);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.mac-window-frame:hover {
  transform: translateY(-2px);
  box-shadow: 0 40px 105px -18px rgba(25, 20, 15, 0.52), 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.mac-dashboard-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ═══════════════════════════════════════════════════════
   WHAT IT DOES — the five verbs
   One line, always. Small marks in a lot of air: the row is
   a quiet beat between the hero and the explainer, not a
   feature grid, so nothing here may wrap or grow heavy.
   ═══════════════════════════════════════════════════════ */
.verbs-section {
  padding: clamp(92px, 10vw, 156px) 0;
  position: relative;
  z-index: 2;
}

.verbs-heading {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.5vw, 50px);
  font-weight: 450;
  line-height: 1.16;
  letter-spacing: -0.016em;
  color: var(--ink-heading);
  text-align: center;
  margin-bottom: clamp(44px, 4.8vw, 72px);
}

.verbs-heading em {
  font-style: italic;
  font-weight: 400;
}

.verbs-row {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(6px, 1vw, 16px);
  max-width: 800px;
  margin: 0 auto;
  padding: 0 4px;
}

.verb {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.4vw, 21px);
  color: var(--ink-heading);
}

/* Scales with the viewport so five always sit on one line, down to the
   narrowest phone — the row wrapping 3 + 2 is not this section. */
.verb-icon {
  width: clamp(28px, 2.9vw, 44px);
  height: clamp(28px, 2.9vw, 44px);
  display: block;
}

.verb-label {
  font-family: var(--font-sans);
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 600;
  letter-spacing: -0.004em;
  color: var(--ink-heading);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   THE PANELS — one claim each, on its own sheet of paper
   Two shots per panel: the window behind for context, a
   crop in front at roughly 1:1 so it can actually be read.
   The grain and crease are what tie these to the hero's
   paper collage rather than leaving them as flat cards.
   ═══════════════════════════════════════════════════════ */
.ic-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.showcase {
  padding: clamp(28px, 3vw, 48px) 0 clamp(72px, 7vw, 104px);
}

.showcase .container {
  max-width: 1180px;
}

.showcase-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(26px, 3.2vw, 52px);
  background: transparent;
  padding: clamp(36px, 4vw, 62px);
  margin-bottom: clamp(20px, 2.2vw, 30px);
  overflow: visible;
  isolation: isolate;
}

/* The sheet itself. It is a separate layer from the content so the torn-edge
   displacement roughens only the paper — running that filter over the panel
   would drag the headline and the screenshots out of shape with it. The
   shadow goes in the same filter chain as a drop-shadow, because a box-shadow
   would trace the element's rectangle rather than the tear. */
.showcase-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 8px;
  background-color: var(--panel, var(--bg-canvas-subtle));
  background-image: var(--paper-grain), var(--paper-crumple), var(--paper-mottle);
  background-size: 180px 180px, 640px 640px, 420px 420px;
  background-blend-mode: overlay, soft-light, overlay;
  filter: url(#paper-edge)
          drop-shadow(0 2px 3px rgba(45, 35, 22, 0.14))
          drop-shadow(0 18px 30px rgba(45, 35, 22, 0.2));
}

.showcase-panel > * {
  position: relative;
  z-index: 1;
}

.showcase-panel:last-child {
  margin-bottom: 0;
}

/* Square-ish, like the reference: the art box drives the panel's height. */
.showcase-art {
  position: relative;
  aspect-ratio: 1 / 1.36;
  min-width: 0;
}

.shot-back,
.shot-front {
  position: absolute;
  display: block;
  height: auto;
  border-radius: 12px;
}

.shot-back {
  top: 0;
  left: 0;
  width: 58%;
  box-shadow:
    0 0 0 1px rgba(20, 15, 10, 0.26),
    0 3px 8px rgba(25, 18, 12, 0.14),
    0 22px 48px -18px rgba(25, 18, 12, 0.4);
}

/* The readable one. It overlaps the window it was cut from, which is the
   reference's trick: context behind, the detail you can actually read in front. */
.shot-front {
  bottom: 0;
  left: 5%;
  width: 90%;
  box-shadow:
    0 0 0 1px rgba(20, 15, 10, 0.3),
    0 4px 12px rgba(25, 18, 12, 0.2),
    0 26px 58px -16px rgba(25, 18, 12, 0.52);
}

/* The hero's handwriting, carried down the page. It sits in the copy column
   rather than over the art: four different crops leave no corner that is
   reliably free, and a note half-under a screenshot is worse than none. */
.showcase-note {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

.showcase-note .hand {
  text-transform: uppercase;
  color: rgba(26, 24, 22, 0.5);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.2;
  letter-spacing: 0.09em;
}

.showcase-note svg {
  width: clamp(30px, 2.6vw, 40px);
  height: auto;
  opacity: 0.45;
  margin-bottom: 3px;
}

.showcase-copy {
  min-width: 0;
}

.showcase-kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(26, 24, 22, 0.56);
  margin-bottom: 14px;
}

.showcase-title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 450;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink-heading);
  margin-bottom: 18px;
}

.showcase-body {
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.6;
  color: rgba(26, 24, 22, 0.74);
  max-width: 44ch;
  margin-bottom: 26px;
}

.showcase-more {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--ink-heading);
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1.5px rgba(26, 24, 22, 0.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.showcase-more:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1.5px rgba(26, 24, 22, 0.5);
}

.showcase-feats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 22px;
  margin-top: clamp(26px, 2.8vw, 36px);
}

.showcase-feat {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  padding: 7px 9px 7px 7px;
  margin: -7px -9px -7px -7px;
  border-radius: 12px;
  transition: background 0.16s ease;
}

.showcase-feat:hover {
  background: rgba(255, 255, 255, 0.42);
}

.feat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.feat-name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.004em;
  color: var(--ink-heading);
}

.feat-sub {
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(26, 24, 22, 0.6);
}

.feat-ic {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--ink-heading);
}

@media (max-width: 860px) {
  .showcase-panel {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* The claim should arrive before its proof on a narrow screen. */
  .showcase-panel .showcase-art { order: 2; }
  .showcase-panel .showcase-copy { order: 1; }

}

/* ═══════════════════════════════════════════════════════
   BEYOND THE CHAT — three tinted cards, centred intro
   Same paper as the panels, via the :root tokens, but with
   clean corners: these are cards on the page, not torn sheets.
   ═══════════════════════════════════════════════════════ */
.adapt-section {
  padding: clamp(78px, 8.5vw, 132px) 0 clamp(84px, 9vw, 140px);
  text-align: center;
}

.adapt-kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 18px;
}

.adapt-title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.8vw, 54px);
  font-weight: 450;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-heading);
  margin-bottom: 20px;
}

.adapt-lead {
  font-size: clamp(14.5px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--ink-body);
  max-width: 62ch;
  margin: 0 auto clamp(44px, 4.6vw, 68px);
}

.adapt-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  text-align: center;
}

.adapt-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: clamp(380px, 38vw, 520px);
  padding: clamp(26px, 2.6vw, 38px) clamp(18px, 1.8vw, 26px) 0;
  border-radius: clamp(18px, 1.8vw, 26px);
  /* The art IS the card: each image carries its own flat top, its own mass
     rising from the bottom and its own paper grain. --tint stays as the
     colour behind it, so the card is never white before the image decodes. */
  background-color: var(--tint);
  background-image: var(--card-art, none);
  background-size: cover;
  background-position: var(--card-art-pos, center bottom);
  background-repeat: no-repeat;
  box-shadow:
    0 0 0 1px rgba(45, 35, 22, 0.05),
    0 14px 34px -16px rgba(45, 35, 22, 0.26);
}

/* A last grain pass over the art, at low strength: it ties the three cards
   to the same paper ground as the rest of the page. The images carry grain of
   their own, so this is a unifier, not the texture itself. */
.adapt-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--paper-grain), var(--paper-mottle);
  background-size: 180px 180px, 420px 420px;
  background-blend-mode: overlay, overlay;
  mix-blend-mode: soft-light;
  opacity: 0.45;
}

.adapt-card > * {
  position: relative;
  z-index: 1;
}

.adapt-card-title {
  font-family: var(--font-serif);
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 450;
  letter-spacing: -0.014em;
  color: var(--ink-heading);
  margin-bottom: 8px;
}

.adapt-card-sub {
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.45;
  color: rgba(26, 24, 22, 0.66);
  margin-bottom: clamp(20px, 2.2vw, 32px);
}

/* The mock runs off the bottom of the card, as in the reference — it is a
   glimpse of a thing, not a diagram that has to be complete. */
.adapt-mock {
  width: 100%;
  margin-top: auto;
  padding: clamp(14px, 1.4vw, 20px);
  border-radius: 14px 14px 0 0;
  /* Frosted, not merely translucent: at 0.82 over a flat tint this read fine,
     and over a photograph it went muddy. The blur is what lets the mock sit
     on the clouds instead of in them. */
  background: rgba(252, 251, 249, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.5) inset,
    0 -1px 0 rgba(45, 35, 22, 0.06),
    0 -14px 32px -16px rgba(45, 35, 22, 0.45);
  text-align: left;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-body);
}

.mock-flow {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mock-step {
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(45, 35, 22, 0.05);
}

.mock-step b {
  color: var(--ink-heading);
}

.mock-step-run {
  background: rgba(96, 126, 196, 0.16);
}

.mock-arrow {
  color: var(--ink-light);
  font-size: 11px;
  padding-left: 10px;
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  margin-bottom: 5px;
  border-radius: 9px;
  background: rgba(45, 35, 22, 0.05);
}

.mock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-light);
  flex-shrink: 0;
}

.mock-url {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-pill {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 9999px;
  background: rgba(45, 35, 22, 0.08);
  color: var(--ink-muted);
}

.mock-pill-on {
  background: rgba(70, 140, 95, 0.18);
  color: #2F6B45;
}

.mock-refuse {
  margin-top: 9px;
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(196, 92, 74, 0.12);
  color: #8A3C2C;
}

.mock-refuse b {
  color: #7A3122;
}

.mock-file {
  padding: 10px;
  border-radius: 9px;
  background: rgba(45, 35, 22, 0.05);
}

.mock-file-name {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-heading);
}

.mock-file-meta {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--ink-muted);
}

.mock-keys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}

.mock-key {
  padding: 8px 9px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-muted);
  background: rgba(45, 35, 22, 0.05);
}

.mock-key b {
  color: var(--ink-heading);
  font-size: 11.5px;
}

.mock-foot {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-light);
}

@media (max-width: 920px) {
  .adapt-row {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin: 0 auto;
  }

  /* One column makes the card short while leaving it nearly as wide. The
     composition still needs a height to exist in, or the art crops to a
     letterbox and the mock eats the rest. */
  .adapt-card {
    min-height: clamp(400px, 108vw, 470px);
  }
}

/* ═══════════════════════════════════════════════════════
   THE ROSTER — square tiles, each with a live face
   ═══════════════════════════════════════════════════════ */
.roster-section {
  padding: clamp(10px, 1.5vw, 24px) 0 clamp(72px, 7vw, 104px);
}

.roster-section .container {
  max-width: 1180px;
}

.roster-panel {
  grid-template-columns: 0.86fr 1.14fr;
  align-items: center;
}

.roster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 20px);
  min-width: 0;
}

.agent-tile {
  /* Square, as asked — and it is also what a face wants: a portrait box
     would leave the head small and the card mostly empty. */
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.8vw, 12px);
  padding: clamp(14px, 1.5vw, 22px);
  text-align: center;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(60, 46, 18, 0.06);
  transition: background 0.2s ease, transform 0.2s ease;
}

.agent-tile:hover {
  background: rgba(255, 255, 255, 0.72);
  transform: translateY(-2px);
}

.agent-face {
  display: block;
  width: clamp(84px, 9vw, 132px);
  height: clamp(84px, 9vw, 132px);
}

/* character.js injects its own <svg>; it has to fill the slot either way,
   whether it was created live or rendered to a string. */
.agent-face > svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.agent-tile-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.agent-tile-name {
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink-heading);
}

.agent-tile-role {
  font-size: clamp(11.5px, 0.95vw, 13px);
  line-height: 1.35;
  color: rgba(26, 24, 22, 0.6);
}

@media (max-width: 920px) {
  .roster-panel {
    grid-template-columns: 1fr;
  }

  .roster-panel .connect-copy { order: 0; }
  .roster-grid { order: 1; }
}

/* ═══════════════════════════════════════════════════════
   THE RECORD — four checkable facts, then a second voice
   ═══════════════════════════════════════════════════════ */
.proof-section {
  padding: clamp(72px, 8vw, 128px) 0 clamp(80px, 9vw, 140px);
}

.proof-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  max-width: 1080px;
  margin: 0 auto clamp(72px, 9vw, 150px);
}

.proof {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  min-width: 0;
}

/* A tinted keycap rather than the reference's 3D award badge: same silhouette
   and weight, our palette, and it echoes the logo tiles in the panel above. */
.proof-mark {
  display: grid;
  place-items: center;
  width: clamp(48px, 4.6vw, 62px);
  height: clamp(48px, 4.6vw, 62px);
  margin-bottom: 8px;
  border-radius: clamp(13px, 1.3vw, 17px);
  background: var(--tint);
  color: var(--ink-heading);
  box-shadow:
    0 0 0 1px rgba(45, 35, 22, 0.06),
    0 1px 1px rgba(45, 35, 22, 0.1),
    0 7px 16px -6px rgba(45, 35, 22, 0.34);
}

.proof-mark svg {
  width: 52%;
  height: 52%;
}

.proof-title {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.3vw, 17.5px);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink-heading);
}

.proof-sub {
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 22ch;
}

/* The second quote faces the other way, so two pull quotes on one page do not
   read as the same block printed twice. */
.pullquote.pullquote-mirror {
  grid-template-columns: 1fr minmax(230px, 0.4fr);
}

.pullquote-mirror .pullquote-who {
  justify-content: flex-end;
}

@media (max-width: 860px) {
  .proof-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 20px;
  }
}

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

  /* Attribution under the sentence it belongs to, on both quotes. */
  .pullquote-mirror .pullquote-text { order: 0; }

  .pullquote-mirror .pullquote-who {
    order: 1;
    justify-content: flex-start;
    flex-direction: row-reverse;
  }
}

/* ═══════════════════════════════════════════════════════
   CONNECT — apps, MCP, and your own model
   Reuses .showcase-panel so it inherits the same torn paper,
   grain and crease: one sheet of stock, two sections.
   ═══════════════════════════════════════════════════════ */
.connect-section {
  padding: clamp(10px, 1.5vw, 24px) 0 clamp(72px, 7vw, 104px);
}

.connect-section .container {
  max-width: 1180px;
}

/* Copy on the left here, cards on the right — the mirror of the panel above. */
.connect-panel {
  grid-template-columns: 0.84fr 1.16fr;
  align-items: center;
}

.connect-copy .showcase-title {
  font-size: clamp(26px, 2.8vw, 40px);
}

.connect-copy .showcase-body {
  max-width: 34ch;
}

.connect-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
  min-width: 0;
}

.connect-card {
  background: rgba(255, 255, 255, 0.52);
  border-radius: 16px;
  padding: clamp(16px, 1.5vw, 22px);
  min-width: 0;
  box-shadow: 0 1px 2px rgba(30, 40, 30, 0.05);
}

.connect-card-wide {
  grid-column: 1 / -1;
}

.connect-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.004em;
  color: var(--ink-heading);
  margin-bottom: 14px;
}

.logo-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 0.8vw, 12px);
}

.logo-row-wide {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

/* Brand-coloured tile, white mark — the reference's treatment, which puts the
   five brands that publish a black mark (Notion, GitHub, Apple, Ollama,
   Cursor) on black tiles. */
.logo-tile {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--brand, var(--ink-heading));
  border-radius: 12px;
  max-width: 76px;
  width: 100%;
  justify-self: center;
  box-shadow:
    0 0 0 1px rgba(30, 40, 30, 0.08),
    0 2px 5px -2px rgba(30, 40, 30, 0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.logo-tile:hover,
.logo-tile:focus-visible {
  transform: translateY(-4px) scale(1.07);
  z-index: 3;
  box-shadow:
    0 0 0 1px rgba(30, 40, 30, 0.1),
    0 10px 22px -6px rgba(30, 40, 30, 0.42);
}

/* The name, on hover. attr() keeps it in one place — the markup — rather than
   duplicated into a stylesheet that would drift from it. */
.logo-tile::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--bg-dark);
  color: #FAF7F2;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 6px 16px -6px rgba(20, 15, 10, 0.5);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.logo-tile:hover::after,
.logo-tile:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* The mark is a mask, not an <img>: that is what lets one monochrome source
   SVG be painted white on every tile without shipping 25 recoloured copies. */
.logo-glyph {
  width: 54%;
  aspect-ratio: 1;
  background: #fff;
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
}

.logo-tile-text {
  font-family: var(--font-sans);
  font-size: clamp(10px, 0.95vw, 13px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.connect-community .community-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.community-faces {
  display: flex;
  flex-shrink: 0;
}

.community-faces span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pastel);
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.92);
}

.community-faces span + span {
  margin-left: -10px;
}

.community-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.community-head {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-heading);
}

.community-sub {
  font-size: 13px;
  color: rgba(26, 24, 22, 0.62);
}

.community-sub:hover {
  color: var(--ink-heading);
}

@media (max-width: 920px) {
  .connect-panel {
    grid-template-columns: 1fr;
  }

  .connect-copy {
    order: 0;
  }

  .connect-grid {
    order: 1;
  }

  .logo-row-wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════
   A VOICE — one pull quote, on the bare ground
   No panel here on purpose: it is the breath between two
   sheets of paper, so the only thing on it is the sentence.
   ═══════════════════════════════════════════════════════ */
.pullquote-section {
  padding: clamp(88px, 11vw, 168px) 0;
}

.pullquote {
  display: grid;
  grid-template-columns: minmax(230px, 0.4fr) 1fr;
  align-items: start;
  gap: clamp(20px, 3vw, 46px);
  max-width: 1080px;
  margin: 0 auto;
}

.pullquote-who {
  display: flex;
  align-items: center;
  gap: 18px;
  /* Sits on the quote's first line rather than the top of its box. */
  padding-top: clamp(4px, 0.9vw, 14px);
  min-width: 0;
}

.pullquote-avatar,
img.pullquote-avatar {
  display: block;
  width: clamp(54px, 5.2vw, 76px);
  height: clamp(54px, 5.2vw, 76px);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--pastel, var(--bg-canvas-subtle));
  box-shadow:
    0 0 0 1px rgba(45, 35, 22, 0.06),
    0 6px 16px -8px rgba(45, 35, 22, 0.3);
}

img.pullquote-avatar {
  object-fit: cover;
}

.pullquote-name {
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 500;
  color: var(--ink-body);
  white-space: nowrap;
}

.pullquote-rule {
  flex: 1 1 auto;
  height: 1px;
  min-width: 24px;
  background: rgba(40, 32, 24, 0.22);
}

.pullquote-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(21px, 2.35vw, 34px);
  font-weight: 400;
  line-height: 1.46;
  letter-spacing: -0.012em;
  color: var(--ink-heading);
  text-wrap: balance;
}

@media (max-width: 760px) {
  .pullquote {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .pullquote-who {
    padding-top: 0;
  }
}

/* ═══════════════════════════════════════════════════════
   EDITORIAL SECTIONS (HOW IT WORKS, AGENTS, PRIVACY)
   ═══════════════════════════════════════════════════════ */
.editorial-section {
  padding: 96px 0;
  position: relative;
}

.section-kicker {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 14px;
  display: block;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 450;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink-heading);
  margin-bottom: 18px;
}

.section-desc {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-body);
  max-width: 64ch;
  margin-bottom: 54px;
}

/* 3-Column Bento Cards */
.editorial-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.editorial-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 24px;
  padding: 38px 32px 34px;
  box-shadow: var(--shadow-card);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
  display: flex;
  flex-direction: column;
}

.editorial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(184, 134, 58, 0.25);
}

.card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-gold);
  letter-spacing: 0.15em;
  margin-bottom: 18px;
}

.card-title {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink-heading);
  margin-bottom: 14px;
}

.card-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-body);
  flex-grow: 1;
}

.card-visual-pill {
  margin-top: 24px;
  padding: 12px 14px;
  background: var(--bg-canvas-subtle);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-visual-pill .tag {
  color: var(--accent-gold);
  font-weight: 600;
}

/* Agents Roster Cards */
.agents-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.agent-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.agent-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.agent-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-canvas-subtle);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.agent-avatar svg {
  width: 40px;
  height: 40px;
  display: block;
}

.agent-info {
  flex-grow: 1;
}

.agent-name {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-heading);
  margin-bottom: 3px;
}

.agent-role {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-gold);
  margin-bottom: 8px;
}

.agent-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-body);
}

/* Privacy & Safeguard Box */
.safeguard-editorial-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 28px;
  padding: 48px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.safeguard-copy h3 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink-heading);
  margin-bottom: 14px;
}

.safeguard-copy p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-body);
  margin-bottom: 16px;
}

.safeguard-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #1E824C;
  background: rgba(30, 130, 76, 0.08);
  padding: 5px 12px;
  border-radius: 9999px;
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}

.badge-icon {
  width: 13px;
  height: 13px;
}

.safeguard-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.safeguard-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink-body);
}

.safeguard-icon {
  color: var(--accent-gold);
  flex-shrink: 0;
  margin-top: 4px;
  display: inline-flex;
}

.safeguard-icon svg {
  width: 13px;
  height: 13px;
}

.safeguard-img-box img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════════════════
   HOW PEOPLE USE IT — the rail
   Drifts on its own and is scrollable by hand; both act on the
   same scrollLeft, so they can never disagree. See initPeopleRail.
   ═══════════════════════════════════════════════════════ */
.people-section {
  padding: clamp(84px, 9vw, 136px) 0 clamp(92px, 10vw, 148px);
  position: relative;
}

.people-heading {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 450;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink-heading);
  text-align: center;
  margin-bottom: clamp(44px, 4.6vw, 64px);
}

/* A real scroll container, not a transform: that is what buys trackpad,
   shift+wheel and touch swipe for nothing. The drift just writes scrollLeft. */
.people-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  /* html sets scroll-behavior: smooth, which would fight every frame's write. */
  scroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* Cards fade at the edges rather than being guillotined. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.people-viewport::-webkit-scrollbar {
  display: none;
}

.people-viewport.is-dragging {
  cursor: grabbing;
}

.people-track {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  width: max-content;
  padding: 0 clamp(20px, 4vw, 64px);
}

.person-card {
  flex: 0 0 clamp(214px, 19vw, 262px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The art slot. editorial-card.js draws a cut-paper collage into this box
   from (pattern, palette, seed); --pastel stays as the colour underneath,
   so a card with no JS is the flat block it was rather than a grey hole.
   `isolation` keeps the grain's soft-light blend inside the card, and
   `overflow` is what guarantees no generated shape crosses the corner. */
.person-photo,
img.person-photo {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 21;
  border-radius: clamp(22px, 2vw, 28px);
  overflow: hidden;
  background: var(--pastel, var(--bg-canvas-subtle));
  box-shadow:
    0 1px 2px rgba(45, 35, 22, 0.05),
    0 14px 34px -14px rgba(45, 35, 22, 0.24);
}

img.person-photo {
  object-fit: cover;
}

.person-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 2px;
}

.person-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: var(--ink-heading);
}

.person-role {
  font-size: 13.5px;
  color: var(--ink-muted);
}

/* ═══════════════════════════════════════════════════════
   WAITLIST SECTION — TACTILE PARCHMENT CARD
   ═══════════════════════════════════════════════════════ */
.waitlist-section {
  padding: 100px 0 120px;
  position: relative;
}

.waitlist-card-warm {
  max-width: 680px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid rgba(40, 32, 24, 0.09);
  border-radius: 32px;
  padding: 56px 48px;
  box-shadow: 0 24px 64px -12px rgba(35, 28, 20, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  text-align: center;
  position: relative;
}

.waitlist-kicker {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 12px;
  display: block;
}

.waitlist-title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 3.8vw, 44px);
  font-weight: 450;
  line-height: 1.15;
  color: var(--ink-heading);
  margin-bottom: 16px;
}

.waitlist-lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-body);
  max-width: 480px;
  margin: 0 auto 36px;
}

.waitlist-form-warm {
  text-align: left;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}

.form-group label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.form-group label .req {
  color: var(--accent-gold);
}

.form-group label .opt {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-light);
}

.form-input {
  background: var(--bg-canvas);
  border: 1px solid rgba(40, 32, 24, 0.12);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink-heading);
  transition: all 0.2s ease;
  outline: none;
}

.form-input:focus {
  background: #FFFFFF;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(184, 134, 58, 0.15);
}

.form-input::placeholder {
  color: var(--ink-light);
}

.form-submit-btn {
  width: 100%;
  background: var(--bg-dark);
  color: #FAF7F2;
  border-radius: 9999px;
  padding: 15px 28px;
  font-size: 15.5px;
  font-weight: 600;
  box-shadow: var(--shadow-btn);
  transition: all 0.22s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.form-submit-btn:hover {
  background: #2D2926;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -4px rgba(27, 25, 23, 0.35);
}

.form-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.form-note {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-top: 18px;
  text-align: center;
}

/* Success & Error States */
.waitlist-success-warm {
  background: rgba(40, 167, 69, 0.08);
  border: 1px solid rgba(40, 167, 69, 0.25);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
}

.success-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #28a745;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.success-badge svg {
  width: 22px;
  height: 22px;
}

.waitlist-success-warm h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink-heading);
  margin-bottom: 8px;
}

.waitlist-success-warm p {
  font-size: 14.5px;
  color: var(--ink-body);
}

.waitlist-error-warm {
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.25);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 13.5px;
  color: #C02626;
  margin-top: 14px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */
.editorial-footer {
  padding: 60px 0 80px;
  border-top: 1px solid rgba(40, 32, 24, 0.08);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-brand {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-heading);
}

.footer-copy {
  font-size: 13px;
  color: var(--ink-muted);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 13.5px;
  color: var(--ink-muted);
}

.footer-links a:hover {
  color: var(--ink-heading);
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1440px) {
  .cl-temple {
    right: calc(44 * var(--cl));
  }

  .cl-tree-right {
    right: calc(-255 * var(--cl));
  }
}

/* The centre column stops shrinking well before the collage does, so below
   this width the right-hand group is pushed outward rather than into the
   headline and the props strip. */
@media (max-width: 1200px) {
  .cl-temple {
    right: calc(-24 * var(--cl));
    top: calc(650 * var(--cl) + 40px);
  }

  .cl-sky {
    right: calc(14 * var(--cl));
  }

  .cl-note-right {
    right: 1%;
  }

  .cl-paper-note,
  .cl-lines-right {
    display: none;
  }

  .cl-tree {
    left: calc(-170 * var(--cl));
  }

  /* The cloud is sized for the full canvas; at this width it would sit under
     the subhead, and the monument under the props strip. Both move outward. */
  .cl-sun {
    left: calc(-60 * var(--cl));
    width: calc(380 * var(--cl));
  }

  .cl-temple {
    right: calc(-70 * var(--cl));
  }

  .cl-tree-right {
    right: calc(-290 * var(--cl));
  }

  .cl-parchment {
    top: calc(697 * var(--cl) + 228px);
  }

  .cl-parchment-right {
    top: calc(788 * var(--cl) + 115px);
  }

  .cl-sky-left {
    top: calc(642 * var(--cl) + 135px);
  }

  .cl-arc-bottom {
    top: calc(800 * var(--cl) + 125px);
  }
}

@media (max-width: 1100px) {
  .editorial-cards-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .safeguard-editorial-card {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cl-note-left { left: 3%; }
  .cl-note-right { right: 1.5%; }
  .cl-birds { display: none; }
}

@media (max-width: 860px) {
  .nav-menu {
    display: none;
  }

  .nav-capsule-inner {
    padding: 6px 8px 6px 14px;
  }

  /* Below this width the collage has nowhere to live beside the
     headline, so it becomes a faint ground rather than competing with it. */
  .hero-collage-layers {
    opacity: 0.3;
  }

  .cl-temple {
    top: calc(720 * var(--cl) + 40px);
  }

  .cl-note,
  .cl-paper-note,
  .cl-lines-right,
  .cl-birds {
    display: none;
  }

  .form-row-2 {
    grid-template-columns: 1fr;
  }

  .waitlist-card-warm {
    padding: 38px 24px;
  }
}

@media (max-width: 600px) {
  .hero-collage-wrapper {
    padding-top: 100px;
  }

  .hero-actions-row {
    flex-direction: column;
    width: 100%;
  }

  .btn-hero-dark,
  .btn-hero-light {
    width: 100%;
    justify-content: center;
  }

  .hero-props-strip {
    font-size: 12px;
    gap: 10px;
  }

  .prop-divider {
    display: none;
  }
}