/* ===================================================================
   Normal, smooth document scrolling.
   Disables the fullpage.js-style wheel-hijack / section-snap on desktop
   so the page scrolls like a regular site. Scoped to :not(.fp-enabled)
   because the JS now always takes its natural-scroll branch and never
   adds the .fp-enabled class. Only flow/positioning is changed here —
   the desktop visual design is untouched.
   =================================================================== */

html {
  scroll-behavior: smooth;
}

/* Hero curtain flows in the document instead of being a fixed overlay */
html:not(.fp-enabled) .curtain {
  position: relative;
  height: 100vh;
}

/* Take the floating nav out of document flow so the hero curtain reaches the
   very top. The intro animation leaves .nav.glass at position:relative (in
   flow) with a top offset, which left a thin band of page background above
   the hero. absolute keeps the same visual spot but reclaims the flow slot. */
html:not(.fp-enabled) .nav {
  position: absolute;
}

/* #fullpage stays in normal flow; never transformed */
html:not(.fp-enabled) #fullpage {
  position: static !important;
  transform: none !important;
  z-index: auto !important;
}

/* The empty spacer section is only needed by the fixed-curtain layout */
html:not(.fp-enabled) #fullpage .section.fp-curtain {
  display: none;
}

/* Each section keeps its full-screen feel but grows with content
   and no longer clips, so nothing is hidden while scrolling */
html:not(.fp-enabled) #fullpage .section {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

/* ===================================================================
   Full-page 3D dotted globe section (bottom of page)
   =================================================================== */
.globe-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background:
    radial-gradient(
      95% 70% at 50% -8%,
      rgba(19, 83, 176, 0.75) 0%,
      rgba(24, 57, 112, 0.35) 32%,
      rgba(2, 22, 55, 0) 62%
    ),
    linear-gradient(180deg, #031d49 0%, #021635 38%, #010d1f 70%, #010919 100%);
  color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: grab;
}
.globe-canvas:active {
  cursor: grabbing;
}
.globe-copy {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-top: clamp(64px, 12vh, 130px);
  pointer-events: none;
}
.globe-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.62);
}
.globe-sq {
  width: 7px;
  height: 7px;
  background: #1e4c8b;
  display: inline-block;
}
.globe-copy h2 {
  margin: 14px 0 0;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 500;
}
.globe-it {
  font-family: var(--font-serif), serif;
  font-style: italic;
  font-weight: 400;
  color: #0b62ff;
}

/* Pinned scroll-scrub: the section sticks to the viewport while this taller
   track scrolls past. The extra height (200vh - 100vh sticky = 100vh) is the
   range the reveal animation scrubs over, plus an end "hold". */
.globe-pin-wrap {
  position: relative;
  height: 200vh;
}
.globe-pin-wrap > .globe-section {
  position: sticky;
  top: 0;
}

/* ---- client dots: hover tooltip ---------------------------------- */
.globe-tip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 16px));
  background: rgba(3, 16, 38, 0.92);
  border: 1px solid rgba(142, 205, 255, 0.35);
  border-radius: 10px;
  padding: 8px 12px;
  white-space: nowrap;
  transition: opacity 0.15s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.globe-tip.is-on {
  opacity: 1;
}
.globe-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(3, 16, 38, 0.92);
  border-right: 1px solid rgba(142, 205, 255, 0.35);
  border-bottom: 1px solid rgba(142, 205, 255, 0.35);
}
.globe-tip strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.globe-tip span {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: rgba(190, 220, 255, 0.8);
}

/* ---- client dots: click card (editorial: mono labels, hairlines) -- */
.globe-client-card {
  position: absolute;
  z-index: 4;
  right: clamp(16px, 5vw, 72px);
  top: 50%;
  width: min(330px, calc(100vw - 32px));
  background: rgba(2, 13, 32, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(142, 205, 255, 0.16);
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  animation: gccIn 0.35s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  overflow: hidden;
}
@keyframes gccIn {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}
.gcc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.gcc-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(158, 201, 255, 0.75);
}
.gcc-sq {
  width: 6px;
  height: 6px;
  background: #0b62ff;
  display: inline-block;
}
.gcc-close {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}
.gcc-close:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.gcc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 0;
}
.gcc-avatar {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #06255c;
  border: 1px solid rgba(142, 205, 255, 0.25);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #9ec9ff;
}
.gcc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gcc-id {
  min-width: 0;
}
.gcc-name {
  display: block;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.gcc-niche {
  display: block;
  margin-top: 3px;
  font-family: var(--font-serif), Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #6ea8ff;
}
.gcc-rows {
  margin: 16px 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.gcc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
}
.gcc-row + .gcc-row {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.gcc-row span {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}
.gcc-row strong {
  font-size: 13.5px;
  font-weight: 500;
  text-align: right;
  color: rgba(255, 255, 255, 0.92);
}
.gcc-result {
  margin: 14px 18px 18px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid #0b62ff;
}
.gcc-result span {
  display: block;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(158, 201, 255, 0.7);
}
.gcc-result strong {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: #fff;
}
@media (max-width: 720px) {
  .globe-client-card {
    right: 16px;
    left: 16px;
    top: auto;
    bottom: 20px;
    width: auto;
    animation-name: gccInMobile;
  }
  @keyframes gccInMobile {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ===================================================================
   Automations (n8n) — workflow-card grid. Screenshot + copy + metric.
   =================================================================== */
.auto-grid {
  max-width: 1120px;
  margin: clamp(40px, 6vw, 72px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}
.auto-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
  transition:
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.auto-card:hover {
  transform: translateY(-4px);
  border-color: rgba(11, 98, 255, 0.4);
  box-shadow: 0 22px 50px rgba(4, 18, 48, 0.28);
}
/* screenshot placeholder — dark panel with a faint node-graph motif */
.auto-card__shot {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(
      120% 100% at 50% -10%,
      rgba(19, 83, 176, 0.35) 0%,
      rgba(2, 22, 55, 0) 60%
    ),
    linear-gradient(180deg, #0a1730 0%, #07122a 100%);
  background-color: #07122a;
}
.auto-card__shot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(120, 160, 220, 0.28) 1.5px, transparent 1.6px),
    radial-gradient(circle, rgba(120, 160, 220, 0.28) 1.5px, transparent 1.6px);
  background-size:
    46px 46px,
    46px 46px;
  background-position:
    0 0,
    23px 23px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35));
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.9),
    rgba(0, 0, 0, 0.35)
  );
}
.auto-card__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.auto-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(11, 98, 255, 0.85);
}
.auto-card__cap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
}
.auto-card__body {
  padding: clamp(18px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auto-card__t {
  margin: 0;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.auto-card__p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.auto-card__metric {
  margin-top: 4px;
  align-self: flex-start;
  font-size: 13px;
  color: var(--muted-2);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(11, 98, 255, 0.08);
  border: 1px solid rgba(11, 98, 255, 0.18);
}
.auto-card__metric strong {
  color: #0b62ff;
  font-weight: 700;
}
@media (max-width: 720px) {
  .auto-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   Light / Dark theme  (toggled via <html data-theme>)
   Light = default V8. Dark flips the core vars + the main light
   surfaces. Hero video + navy globe stay as-is in both modes.
   =================================================================== */
:root {
  color-scheme: light;
  /* Section-decoration tokens — three rotating motifs inspired by the
     Lumio s2/s3/s4 sections: dotted fields, concentric circle outlines,
     and a few dashed verticals in a centred band. */
  --grid-dot: rgba(14, 10, 7, 0.07);
  --grid-vline: rgba(14, 10, 7, 0.14);
  --grid-ring: rgba(14, 10, 7, 0.06);
  --ring-gap: clamp(90px, 11vw, 150px);
  --line-gap: clamp(150px, 22vw, 300px);
}
html[data-theme="dark"] {
  --grid-dot: rgba(255, 255, 255, 0.06);
  --grid-vline: rgba(255, 255, 255, 0.08);
  --grid-ring: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e9ebf1;
  --paper: #0b0e14;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.06);
  --muted: rgba(255, 255, 255, 0.56);
  --muted-2: rgba(255, 255, 255, 0.64);
  --muted-3: rgba(255, 255, 255, 0.4);
}
html[data-theme="dark"] body {
  background: var(--paper);
  color: var(--ink);
}
/* sections that read straight off --paper flip automatically; nudge the few
   surfaces that hardcode white or ink so they stay legible on dark */
html[data-theme="dark"] .nav.glass {
  background: rgba(16, 20, 28, 0.72);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .nav.glass::after {
  background: rgba(16, 20, 28, 0.5);
}
html[data-theme="dark"] .apollo-top-cta {
  background: rgba(16, 20, 28, 0.92);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .sect,
html[data-theme="dark"] main.below,
html[data-theme="dark"] .s2,
html[data-theme="dark"] .s3,
html[data-theme="dark"] .s4 {
  /* background-color only (not the `background` shorthand) so the site-wide
     grid texture layered on these sections via background-image survives */
  background-color: var(--paper);
}
/* faint section grid/divider lines are ink-based -> lighten them */
html[data-theme="dark"] .s4-grid-lines i,
html[data-theme="dark"] .s4-horiz,
html[data-theme="dark"] .grid-lines i {
  filter: invert(1) brightness(1.4);
  opacity: 0.5;
}

/* ===================================================================
   Section decoration — ONE motif everywhere: the fine dotted field from
   "Is this you?". Rendered on a ::before behind the content (isolated
   stacking context, z-index:-1) so it never covers text. The dot lattice
   uses background-attachment:fixed so it is anchored to the viewport and
   stays perfectly continuous across every section seam (no banding, no
   hard cuts).
   Applies to all content sections in .below INCLUDING the work carousel
   and the Q&A thread. Excludes (kept as-is): the hero, the navy globe
   sections, the navy final-CTA band, the Process stage, and the Lumio
   s2/s3/s4 sections (which keep their own native patterns).
   =================================================================== */
.below .block:not(.finalcta):not(.process),
.below .showcase,
.below .qa {
  background-color: var(--paper);
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.below .block:not(.finalcta):not(.process)::before,
.below .showcase::before,
.below .qa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.7px);
  background-size: 24px 24px;
  background-position: center;
  background-attachment: fixed;
}
/* empty integration tiles + active filter chips read as white plates */
html[data-theme="dark"] .tile.empty {
  background: #161b24;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .filter-list button.active {
  background: #1b212c;
  color: var(--ink);
}

/* ---- floating sun/moon toggle ---- */
.theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  transition:
    transform 0.2s ease,
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}
.theme-toggle:hover {
  transform: scale(1.07);
}
.theme-toggle:active {
  transform: scale(0.96);
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}
html[data-theme="dark"] .theme-toggle {
  background: #12161e;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* dark mode: page-level text that hardcodes dark ink (NOT the light product
   mockups, whose dark-on-white text must stay) */
html[data-theme="dark"] .eyebrow {
  color: rgba(255, 255, 255, 0.58);
}
html[data-theme="dark"] .s2 .lede {
  color: rgba(255, 255, 255, 0.52);
}
html[data-theme="dark"] .s2 .bottom .left p {
  color: rgba(255, 255, 255, 0.86);
}
html[data-theme="dark"] .s3-head p {
  color: rgba(255, 255, 255, 0.66);
}
html[data-theme="dark"] .s3-head .corner {
  color: rgba(255, 255, 255, 0.28);
}

/* ===================================================================
   Coded Stripe-style dashboard inside the hero browser mockup
   (replaces the screenshot image; scoped under .dashboard .sd)
   =================================================================== */
.dashboard .sd {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  background: #fff;
  color: #30313d;
  text-align: left;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: normal;
  border-radius: 18px;
}
.sd,
.sd * {
  box-sizing: border-box;
}
.sd svg {
  display: block;
}
.sd .sd-x,
.sd .sd-x2 {
  font-size: 9px;
  color: #8792a2;
  line-height: 1;
  transform: translateY(-1px);
}

.sd-side {
  width: 174px;
  flex-shrink: 0;
  border-right: 1px solid #eaeef3;
  padding: 9px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sd-acct {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 9px;
  font-weight: 600;
  font-size: 12px;
  color: #1a1f36;
}
.sd-acct-ic {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #1a1f36;
  color: #fff;
  display: grid;
  place-items: center;
  font:
    italic 700 10px/1 Georgia,
    serif;
  flex-shrink: 0;
}
.sd-acct .sd-x {
  margin-left: auto;
}
.sd-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sd-nav-i {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px;
  border-radius: 6px;
  color: #4f566b;
  font-size: 12px;
}
.sd-nav-i svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #697386;
  stroke-width: 1.3;
}
.sd-nav-i > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-nav-i.sd-active {
  background: #f1effe;
  color: #635bff;
  font-weight: 600;
}
.sd-nav-i.sd-active svg {
  color: #635bff;
}
.sd-nav-i .sd-x2 {
  margin-left: auto;
}
.sd-sec {
  font-size: 10px;
  color: #8792a2;
  padding: 9px 8px 3px;
  font-weight: 500;
}

.sd-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sd-top {
  height: 40px;
  flex-shrink: 0;
  border-bottom: 1px solid #eaeef3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
}
.sd-search {
  width: 270px;
  height: 25px;
  background: #f6f8fa;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  color: #8792a2;
  font-size: 11px;
}
.sd-search svg {
  width: 12px;
  height: 12px;
  color: #8792a2;
}
.sd-top-icons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #687385;
}
.sd-top-icons svg {
  width: 15px;
  height: 15px;
}
.sd-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b84ff, #635bff);
  flex-shrink: 0;
}

.sd-body {
  flex: 1;
  padding: 14px 22px;
  overflow: hidden;
}
.sd-row1 {
  display: flex;
  align-items: center;
  margin-bottom: 13px;
}
.sd-row1 h2 {
  font-size: 19px;
  font-weight: 600;
  color: #1a1f36;
  margin: 0;
  letter-spacing: -0.2px;
}
.sd-btn-ghost {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: #3c4257;
  border: 1px solid #e3e8ee;
  background: #fff;
  border-radius: 6px;
  padding: 5px 11px;
  box-shadow: 0 1px 1px rgba(10, 20, 40, 0.04);
}

.sd-stats {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.sd-lbl {
  font-size: 11px;
  color: #687385;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sd-val {
  font-size: 15px;
  color: #1a1f36;
  font-weight: 500;
}
.sd-val.sd-muted {
  color: #8792a2;
}
.sd-time {
  font-size: 10px;
  color: #8792a2;
  margin-top: 4px;
}
.sd-stats-right {
  margin-left: auto;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.sd-payouts {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  justify-content: flex-end;
  margin-top: 6px;
}
.sd-payouts > div {
  text-align: right;
}
.sd-payouts .sd-lbl,
.sd-stats-right .sd-lbl {
  justify-content: flex-end;
}
.sd-link {
  color: #635bff;
  font-size: 11px;
  font-weight: 500;
}

.sd-chart {
  margin: 8px 0 16px;
  border-top: 1px solid #eef1f5;
  padding-top: 8px;
}
.sd-chart-svg {
  width: 100%;
  height: 48px;
}
.sd-chart-x {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: #aab2c0;
  margin-top: 2px;
}

.sd-h3 {
  font-size: 17px;
  font-weight: 600;
  color: #1a1f36;
  margin: 0 0 11px;
  letter-spacing: -0.2px;
}
.sd-filters {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}
.sd-pill {
  font-size: 10.5px;
  color: #3c4257;
  border: 1px solid #e3e8ee;
  border-radius: 14px;
  padding: 3px 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  background: #fff;
}
.sd-pill-ic svg {
  width: 11px;
  height: 11px;
  color: #687385;
}
.sd-spacer {
  flex: 1;
}

.sd-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sd-card {
  border: 1px solid #e6e9ee;
  border-radius: 8px;
  padding: 10px 11px;
  min-height: 92px;
  position: relative;
}
.sd-card-h {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #4f566b;
  font-weight: 500;
  margin-bottom: 6px;
}
.sd-card-h .sd-dl {
  margin-left: auto;
  color: #8792a2;
}
.sd-card-h .sd-dl svg {
  width: 12px;
  height: 12px;
}
.sd-card-v {
  font-size: 14px;
  color: #1a1f36;
  font-weight: 500;
}
.sd-card-sub {
  font-size: 10px;
  color: #8792a2;
  margin-top: 2px;
}
.sd-card-axis {
  position: absolute;
  right: 11px;
  bottom: 9px;
  font-size: 9px;
  color: #b3bcc9;
}
.sd-card-empty {
  border: 1px dashed #d7dce3;
  border-radius: 5px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.sd-nodata {
  font-size: 10px;
  color: #8792a2;
  background: #f6f8fa;
  border-radius: 10px;
  padding: 3px 9px;
}

.sd-bottom {
  height: 30px;
  flex-shrink: 0;
  border-top: 1px solid #eaeef3;
  background: #f7f9fc;
  display: flex;
  align-items: center;
  padding: 0 14px;
}
.sd-dev {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #4f566b;
  font-weight: 500;
}
.sd-dev svg {
  width: 13px;
  height: 13px;
  color: #687385;
}
.sd-bottom-icons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #687385;
}
.sd-bottom-icons svg {
  width: 14px;
  height: 14px;
}

/* ===================================================================
   Hero fixes (round 2): push content below the floating nav so the
   pill no longer collides, + social-proof "testibar" under the CTA.
   =================================================================== */
.hero {
  padding-top: 112px;
}
/* Pull the CTA + testibar block up (subtitle removed) so the open space
   sits between the testibar and the dashboard below. */
.hero .ctas {
  margin-top: clamp(14px, 1.6vw, 20px);
}
.hero .testibar {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 12px;
  /* hidden until the hero intro sequence reveals it (see script.js) */
  opacity: 0;
  transform: translateY(14px);
  will-change: transform, opacity;
}
.hero .testibar.intro-testibar-in {
  animation: introTestibarIn 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero .testibar.intro-testibar-in .ta {
  animation: introAvatarIn 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.hero .testibar.intro-testibar-in .ta:nth-child(1) {
  animation-delay: 0.1s;
}
.hero .testibar.intro-testibar-in .ta:nth-child(2) {
  animation-delay: 0.16s;
}
.hero .testibar.intro-testibar-in .ta:nth-child(3) {
  animation-delay: 0.22s;
}
.hero .testibar.intro-testibar-in .ta:nth-child(4) {
  animation-delay: 0.28s;
}
.hero .testibar.intro-testibar-in .ta:nth-child(5) {
  animation-delay: 0.34s;
}
@keyframes introTestibarIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes introAvatarIn {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  60% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.testibar-avatars {
  display: flex;
}
.testibar-avatars .ta {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  margin-left: -9px;
  background-color: #9fb1cb;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.testibar-avatars .ta:first-child {
  margin-left: 0;
}
/* transparent cut-out ring: carve a hole where the next avatar overlaps */
.testibar-avatars .ta:not(:last-child) {
  -webkit-mask: radial-gradient(
    circle 17px at 36px 15px,
    transparent 16.5px,
    #000 17.5px
  );
  mask: radial-gradient(
    circle 17px at 36px 15px,
    transparent 16.5px,
    #000 17.5px
  );
}
.testibar-copy {
  text-align: left;
  line-height: 1.2;
}
.testibar-stars {
  color: #ffce5c;
  font-size: 13px;
  letter-spacing: 2px;
}
.testibar-text {
  color: rgba(255, 255, 255, 0.88);
  font-size: 12.5px;
  font-weight: 700;
  margin-top: 2px;
}

/* ===================================================================
   SHOWCASE — infinite carousel (marquee)
   Mobile-first; auto-themes off --paper/--ink. Seamless loop = two
   identical .marquee__set blocks translated by -50%.
   =================================================================== */
.sect.showcase {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(56px, 9vw, 116px) 0;
}
.showcase__head {
  text-align: center;
  padding: 0 20px;
  margin: 0 auto clamp(30px, 4.5vw, 56px);
}
.showcase__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, rgba(14, 10, 7, 0.5));
}
.showcase__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
}
.showcase__title {
  margin: 14px 0 0;
  font-size: clamp(26px, 5vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
}

/* stage holds the two stacked marquee rows */
.showcase__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 24px);
}
.marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
}
.marquee.is-grabbing {
  cursor: grabbing;
}
.marquee__track {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  /* CSS animation is the no-JS fallback; the controller in script.js sets
     animation:none and drives transform for drag + arrow interaction.
     reverse = the carousel travels the opposite way. */
  animation: showcase-marquee 46s linear infinite reverse;
  will-change: transform;
}
.marquee.is-grabbing .marquee__track,
.marquee.js-driven .marquee__track {
  animation: none;
}
.marquee__set {
  display: flex;
  flex: 0 0 auto;
}
@keyframes showcase-marquee {
  to {
    transform: translateX(-50%);
  }
}
/* floating prev/next controls */
.car-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: clamp(40px, 4vw, 50px);
  height: clamp(40px, 4vw, 50px);
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line, rgba(14, 10, 7, 0.12));
  box-shadow: 0 8px 22px rgba(8, 18, 53, 0.16);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.25s ease,
    opacity 0.25s ease;
}
.car-arrow:hover {
  transform: translateY(-50%) scale(1.08);
}
.car-arrow:active {
  transform: translateY(-50%) scale(0.94);
}
.car-arrow svg {
  width: 22px;
  height: 22px;
  display: block;
}
.car-arrow--prev {
  left: clamp(8px, 2vw, 28px);
}
.car-arrow--next {
  right: clamp(8px, 2vw, 28px);
}
.slide {
  flex: 0 0 auto;
  margin: 0 clamp(7px, 0.8vw, 12px);
  width: clamp(240px, 30vw, 400px);
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, #1a2130, #0e1320);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 16px 40px -18px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  /* --focus (0..1) is written per-frame by the carousel controller; the card
     nearest the row centre reaches scale 1 + full opacity. Max scale is 1, so
     nothing pokes past the row's overflow:hidden. No transition: motion is the
     per-frame transform itself. */
  --focus: 0;
  transform: scale(calc(0.84 + 0.16 * var(--focus)));
  opacity: calc(0.5 + 0.5 * var(--focus));
  transform-origin: center center;
  will-change: transform, opacity;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* sheen sweep on hover */
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 58%
  );
  transform: translateX(-120%);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* No hover lift / glow / image-zoom: those extend past the row's required
   overflow:hidden and get clipped, cutting the pic + shadow. Keep the slide
   (and its full shadow) static on hover; only the in-bounds sheen sweeps. */
.marquee:not(.is-grabbing) .slide:hover::after {
  transform: translateX(120%);
}
html[data-theme="light"] .slide {
  background: linear-gradient(160deg, #eef2f9, #dde6f4);
  border-color: rgba(8, 18, 53, 0.1);
  box-shadow:
    0 16px 40px -18px rgba(8, 18, 53, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ===================================================================
   Q&A / OBJECTIONS — iMessage-style thread
   Grey .received = question, blue .sent = answer. Tail cutouts use
   var(--paper) so they vanish into the section in both themes.
   =================================================================== */
.sect.qa {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(64px, 9vw, 130px) 20px clamp(84px, 11vw, 156px);
}
.qa__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(34px, 5vw, 60px);
}
.qa__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, rgba(14, 10, 7, 0.5));
}
.qa__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
}
.qa__title {
  margin: 14px 0 0;
  font-size: clamp(28px, 5.4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
}
.qa-thread {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bubble {
  position: relative;
  max-width: 80%;
  padding: 11px 17px;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.4;
  border-radius: 21px;
  word-wrap: break-word;
}
.bubble.received {
  align-self: flex-start;
  background: #e9e9eb;
  color: #1a1a1c;
  border-bottom-left-radius: 6px;
}
.bubble.sent {
  align-self: flex-end;
  background: linear-gradient(180deg, #2aa3ff, #0b84fe);
  color: #fff;
  border-bottom-right-radius: 6px;
}
/* iMessage tails: a rounded nub + a paper-colored cutout behind it */
.bubble.received::before {
  content: "";
  position: absolute;
  left: -7px;
  bottom: 0;
  width: 20px;
  height: 19px;
  background: #e9e9eb;
  border-bottom-right-radius: 16px 14px;
  z-index: -2;
}
.bubble.received::after {
  content: "";
  position: absolute;
  left: -12px;
  bottom: 0;
  width: 12px;
  height: 19px;
  background: var(--paper);
  border-bottom-right-radius: 12px;
  z-index: -1;
}
.bubble.sent::before {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 0;
  width: 20px;
  height: 19px;
  background: #0b84fe;
  border-bottom-left-radius: 16px 14px;
  z-index: -2;
}
.bubble.sent::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: 0;
  width: 12px;
  height: 19px;
  background: var(--paper);
  border-bottom-left-radius: 12px;
  z-index: -1;
}
html[data-theme="dark"] .bubble.received,
html[data-theme="dark"] .bubble.received::before {
  background: #26262b;
  color: #f1f1f4;
}
html[data-theme="dark"] .bubble.received {
  color: #f1f1f4;
}
/* each Q+A pair stacks; question left, answer right */
.qa-item {
  display: flex;
  flex-direction: column;
  /* staggered scroll reveal of the questions */
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.qa-thread.in .qa-item {
  opacity: 1;
  transform: none;
}
.qa-thread.in .qa-item:nth-child(1) {
  transition-delay: 0.05s;
}
.qa-thread.in .qa-item:nth-child(2) {
  transition-delay: 0.14s;
}
.qa-thread.in .qa-item:nth-child(3) {
  transition-delay: 0.23s;
}
.qa-thread.in .qa-item:nth-child(4) {
  transition-delay: 0.32s;
}
.qa-thread.in .qa-item:nth-child(5) {
  transition-delay: 0.41s;
}
.qa-thread.in .qa-item:nth-child(6) {
  transition-delay: 0.5s;
}

/* clickable question bubble (a reset <button>) */
.qa-q {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font: inherit;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.qa-q:hover {
  filter: brightness(0.97);
}
html[data-theme="dark"] .qa-q:hover {
  filter: brightness(1.16);
}
.qa-q:focus-visible {
  outline: 2px solid #0b84fe;
  outline-offset: 2px;
}
/* plus icon that becomes a minus when the answer is open */
.qa-caret {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  opacity: 0.55;
}
.qa-caret::before,
.qa-caret::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s ease;
}
.qa-caret::before {
  width: 13px;
  height: 2px;
}
.qa-caret::after {
  width: 2px;
  height: 13px;
}
.qa-item.open .qa-caret::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

/* answer collapses via the grid-rows 0fr -> 1fr technique */
.qa-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.qa-item.open .qa-a-wrap {
  grid-template-rows: 1fr;
}
.qa-a-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}
.qa-a {
  margin-top: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.34s ease 0.06s,
    transform 0.34s ease 0.06s;
}
.qa-item.open .qa-a {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
  .qa-item {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .qa-a,
  .qa-a-wrap,
  .qa-caret::before,
  .qa-caret::after {
    transition: none;
  }
}

/* ===================================================================
   Stripe dashboard entrance — staggered reveal of the panel pieces +
   the line chart drawing itself, fired when the hero browser tilts in
   (.browser.intro-browser-in is added by the intro sequence in script.js).
   The whole .browser starts at opacity:0 until that class lands, so
   hiding these children first introduces no extra "stuck hidden" risk.
   =================================================================== */
.dashboard .sd-side,
.dashboard .sd-top,
.dashboard .sd-row1,
.dashboard .sd-stats,
.dashboard .sd-payouts,
.dashboard .sd-chart,
.dashboard .sd-h3,
.dashboard .sd-filters,
.dashboard .sd-cards > .sd-card {
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform;
}
.dashboard .sd-side {
  transform: translateX(-14px);
}
@keyframes sdIn {
  to {
    opacity: 1;
    transform: none;
  }
}
.browser.intro-browser-in .dashboard .sd-side {
  animation: sdIn 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0.55s forwards;
}
.browser.intro-browser-in .dashboard .sd-top {
  animation: sdIn 0.55s cubic-bezier(0.25, 0.8, 0.25, 1) 0.7s forwards;
}
.browser.intro-browser-in .dashboard .sd-row1 {
  animation: sdIn 0.55s cubic-bezier(0.25, 0.8, 0.25, 1) 0.85s forwards;
}
.browser.intro-browser-in .dashboard .sd-stats {
  animation: sdIn 0.55s cubic-bezier(0.25, 0.8, 0.25, 1) 0.97s forwards;
}
.browser.intro-browser-in .dashboard .sd-payouts {
  animation: sdIn 0.55s cubic-bezier(0.25, 0.8, 0.25, 1) 1.07s forwards;
}
.browser.intro-browser-in .dashboard .sd-chart {
  animation: sdIn 0.55s cubic-bezier(0.25, 0.8, 0.25, 1) 1.17s forwards;
}
.browser.intro-browser-in .dashboard .sd-h3 {
  animation: sdIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 1.3s forwards;
}
.browser.intro-browser-in .dashboard .sd-filters {
  animation: sdIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 1.4s forwards;
}
.browser.intro-browser-in .dashboard .sd-cards > .sd-card:nth-child(1) {
  animation: sdIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 1.5s forwards;
}
.browser.intro-browser-in .dashboard .sd-cards > .sd-card:nth-child(2) {
  animation: sdIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 1.6s forwards;
}
.browser.intro-browser-in .dashboard .sd-cards > .sd-card:nth-child(3) {
  animation: sdIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 1.7s forwards;
}
/* the revenue line draws itself in */
.dashboard .sd-chart-line {
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
}
.browser.intro-browser-in .dashboard .sd-chart-line {
  animation: sdDraw 1.5s ease 1.25s forwards;
}
@keyframes sdDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard .sd-side,
  .dashboard .sd-top,
  .dashboard .sd-row1,
  .dashboard .sd-stats,
  .dashboard .sd-payouts,
  .dashboard .sd-chart,
  .dashboard .sd-h3,
  .dashboard .sd-filters,
  .dashboard .sd-cards > .sd-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .dashboard .sd-chart-line {
    stroke-dashoffset: 0;
    animation: none;
  }
}

/* ===================================================================
   Generic scroll-reveal (added by script.js when [data-reveal] enters view)
   Stagger within a group via inline style="--i:N".
   =================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px) scale(0.985);
  filter: blur(10px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform, filter;
}
[data-reveal].in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Section headers reveal exactly like the Lumio "HOW WE THINK" (s2)
   header: the eyebrow and sub-line ease up (introSubLine feel), while
   the TITLE animates letter-by-letter (introLetterUp — blur + 3D rise,
   staggered per character). The .block__head itself stays in place. */
.block__head[data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}
/* eyebrow + sub — soft line rise */
.block__head[data-reveal] > .block__eyebrow,
.block__head[data-reveal] > .block__sub {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.block__head[data-reveal] > .block__eyebrow {
  transition-delay: 0.05s;
}
.block__head[data-reveal] > .block__sub {
  transition-delay: 0.5s;
}
.block__head[data-reveal].in > .block__eyebrow,
.block__head[data-reveal].in > .block__sub {
  opacity: 1;
  transform: none;
}

/* title — per-letter "letter-up", identical to Lumio s2.
   The title is split into .ch spans by script.js; hidden until reveal. */
.block__title {
  opacity: 0;
  /* match the s2 headline treatment */
  letter-spacing: -0.05em;
  line-height: 1.05;
}
.block__head[data-reveal].in .block__title {
  opacity: 1;
}
.block__title .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.9em) rotateX(-70deg) scale(0.9);
  transform-origin: 50% 100%;
  filter: blur(14px);
  will-change: transform, opacity, filter;
}
.block__title .ch.sp {
  width: 0.28em;
}
.block__head[data-reveal].in .block__title .ch {
  animation: introLetterUp 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(0.12s + var(--i, 0) * 34ms);
}

/* ===================================================================
   Shared content-block scaffold (Is this you? / Why funnels / Stats)
   =================================================================== */
.block {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(64px, 9vw, 132px) 20px;
}
.block__head {
  max-width: 780px;
  margin: 0 auto clamp(40px, 6vw, 72px);
  text-align: center;
}
.block__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted, rgba(14, 10, 7, 0.5));
}
.block__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--sx, currentColor);
}
.block__title {
  margin: 16px 0 0;
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
}
.block__title em {
  font-style: italic;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
}
.block__sub {
  margin: 18px auto 0;
  max-width: 580px;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  color: var(--muted, rgba(14, 10, 7, 0.6));
}

/* ---- Is this you? : editorial diagnostic grid ----
   Shared-hairline table of 6 "symptoms". Mono index, small framed icon,
   ghost serif numeral, cursor spotlight (--mx/--my set by script.js)
   and an accent edge + "Fixable ->" payoff on hover. */
.isthis {
  --sx: #c43e3d;
  position: relative;
  background:
    radial-gradient(
      64% 42% at 50% 0%,
      rgba(196, 62, 61, 0.05),
      transparent 70%
    ),
    var(--paper);
  overflow: clip;
}
html[data-theme="dark"] .isthis {
  --sx: #ff7a76;
  background:
    radial-gradient(
      64% 42% at 50% 0%,
      rgba(255, 122, 118, 0.06),
      transparent 70%
    ),
    var(--paper);
}
.diag {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.diag__cell {
  position: relative;
  padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.2vw, 30px)
    clamp(24px, 2.6vw, 34px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* cursor spotlight */
.diag__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--sx) 8%, transparent),
    transparent 72%
  );
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.diag__cell:hover::after {
  opacity: 1;
}
/* accent edge grows down the left hairline */
.diag__cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0%;
  background: var(--sx);
  transition: height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 1;
}
.diag__cell:hover::before {
  height: 100%;
}
.diag__ghost {
  position: absolute;
  right: 12px;
  bottom: 2px;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(60px, 6.6vw, 92px);
  line-height: 1;
  color: color-mix(in srgb, var(--ink) 6%, transparent);
  transition: color 0.5s ease;
  pointer-events: none;
  user-select: none;
}
.diag__cell:hover .diag__ghost {
  color: color-mix(in srgb, var(--sx) 16%, transparent);
}
.diag__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(26px, 3vw, 42px);
}
.diag__idx {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-3, rgba(14, 10, 7, 0.34));
  transition: color 0.4s ease;
}
.diag__cell:hover .diag__idx {
  color: var(--sx);
}
.diag__ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  color: var(--muted, rgba(14, 10, 7, 0.5));
  transition:
    color 0.4s ease,
    border-color 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.diag__cell:hover .diag__ic {
  color: var(--sx);
  border-color: color-mix(in srgb, var(--sx) 45%, transparent);
  transform: rotate(-6deg);
}
.diag__ic svg {
  width: 17px;
  height: 17px;
}
.diag__t {
  position: relative;
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.diag__p {
  position: relative;
  margin-top: 10px;
  max-width: 34ch;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: clamp(12px, 1.3vw, 13px);
  line-height: 1.7;
  color: var(--muted, rgba(14, 10, 7, 0.58));
}
.diag__check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sx);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.diag__check i {
  font-style: normal;
}
.diag__cell:hover .diag__check {
  opacity: 1;
  transform: none;
}

/* ---- Why a funnel : descending pipeline ----
   4 stages stepping down 28px each, joined by a drawn accent line
   (SVG, pathLength=1) with lead-dots riding it (SMIL animateMotion).
   Node squares + ghost numerals; hover lights a stage. */
.funnel {
  --sx: #2f6df0;
  position: relative;
  background:
    radial-gradient(
      64% 42% at 50% 0%,
      rgba(47, 109, 240, 0.05),
      transparent 70%
    ),
    var(--paper);
  overflow: clip;
}
html[data-theme="dark"] .funnel {
  --sx: #6ea8ff;
  background:
    radial-gradient(
      64% 42% at 50% 0%,
      rgba(110, 168, 255, 0.06),
      transparent 70%
    ),
    var(--paper);
}
.flow {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
}
/* the wrapper's reveal is only a trigger for the line draw */
.flow[data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}
.flow__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  overflow: visible;
  pointer-events: none;
}
.flow__trace-bg,
.flow__trace {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.flow__trace-bg {
  stroke: var(--line);
}
.flow__trace {
  stroke: var(--sx);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}
.flow.in .flow__trace {
  stroke-dashoffset: 0;
}
.flow__dot {
  fill: var(--sx);
  opacity: 0;
  transition: opacity 0.6s ease 1.2s;
}
.flow.in .flow__dot {
  opacity: 0.9;
}
.flow.in .flow__dot--2 {
  opacity: 0.4;
}
.flow__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
}
.flow__stage {
  position: relative;
  margin-top: calc(var(--fi, 0) * 28px);
  padding-top: 32px;
}
.flow__node {
  position: absolute;
  top: 2px;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--paper);
  border: 1.5px solid var(--sx);
  transition:
    background 0.35s ease,
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.flow__stage:hover .flow__node {
  background: var(--sx);
  transform: rotate(135deg);
}
.flow__ghost {
  position: absolute;
  top: 16px;
  right: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(54px, 5.8vw, 80px);
  line-height: 1;
  color: color-mix(in srgb, var(--ink) 6%, transparent);
  transition: color 0.5s ease;
  pointer-events: none;
  user-select: none;
}
.flow__stage:hover .flow__ghost {
  color: color-mix(in srgb, var(--sx) 20%, transparent);
}
.flow__k {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sx);
}
.flow__t {
  margin: 10px 0 0;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.flow__p {
  margin: 10px 0 0;
  max-width: 30ch;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: clamp(12px, 1.3vw, 13px);
  line-height: 1.7;
  color: var(--muted, rgba(14, 10, 7, 0.58));
}
.flow__io {
  display: inline-block;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.flow__io i {
  font-style: normal;
  color: var(--sx);
}

/* ---- Stats : annual-report figures ----
   Hairline-ruled columns, mono "Fig." index, huge tabular numerals with
   a serif-italic accent unit. Count-up still driven by [data-count]. */
.stats {
  --sx: #2f6df0;
}
html[data-theme="dark"] .stats {
  --sx: #6ea8ff;
}
.fig-row {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3.4vw, 48px);
}
.fig {
  position: relative;
  padding-left: clamp(18px, 2vw, 26px);
  border-left: 1px solid var(--line);
}
/* accent rule sweeps down the hairline on hover */
.fig::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: 0%;
  background: var(--sx);
  transition: height 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fig:hover::after {
  height: 100%;
}
.fig__k {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-3, rgba(14, 10, 7, 0.34));
}
.fig__num {
  margin-top: 14px;
  font-size: clamp(50px, 6.2vw, 84px);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.95;
  color: var(--ink);
  /* tabular figures keep the width steady while the number counts up */
  font-variant-numeric: tabular-nums;
}
.fig__num i {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.62em;
  letter-spacing: 0;
  margin-left: 2px;
  color: var(--sx);
}
.fig__l {
  margin: 16px 0 0;
  max-width: 24ch;
  font-size: clamp(13.5px, 1.4vw, 15px);
  line-height: 1.55;
  color: var(--muted-2, rgba(14, 10, 7, 0.62));
}
.fig__src {
  display: block;
  margin-top: 14px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-3, rgba(14, 10, 7, 0.34));
}

/* ---- responsive ---- */
@media (max-width: 980px) {
  .diag {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  .fig-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px;
  }
}
@media (max-width: 760px) {
  .diag {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
  /* stack the pipeline: hide the drawn line, run a left rail instead */
  .flow__line {
    display: none;
  }
  .flow__grid {
    grid-template-columns: 1fr;
    gap: 34px;
    max-width: 420px;
    margin: 0 auto;
    border-left: 1px solid var(--line);
    padding-left: 24px;
  }
  .flow__stage {
    margin-top: 0;
    padding-top: 0;
  }
  .flow__node {
    top: 4px;
    left: -29.5px;
  }
  .flow__ghost {
    font-size: 52px;
    top: 0;
  }
}
@media (max-width: 520px) {
  .fig-row {
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].in,
  .block__head[data-reveal] > *,
  .block__head[data-reveal].in > *,
  .block__title,
  .block__title .ch {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none;
    animation: none !important;
  }
  .flow__trace {
    stroke-dashoffset: 0;
    transition: none;
  }
  .flow__dot {
    display: none;
  }
  .tl__fill {
    transform: scaleX(1);
    transition: none;
  }
  .tl__node {
    border-color: var(--sx);
    background: var(--sx);
    transition: none;
  }
}

/* ---- mobile tuning ---- */
@media (max-width: 600px) {
  .slide {
    width: clamp(220px, 76vw, 300px);
  }
  .bubble {
    max-width: 86%;
  }
}

/* ===================================================================
   6 · WHAT YOU GET (offer)
   =================================================================== */
.feat-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}
.feat {
  padding: clamp(20px, 1.9vw, 26px);
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid var(--line, rgba(14, 10, 7, 0.1));
  transition:
    transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}
.feat:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(8, 18, 53, 0.1);
  border-color: rgba(11, 132, 254, 0.35);
}
.feat__ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(11, 132, 254, 0.1);
  color: #0b84fe;
  margin-bottom: 14px;
}
.feat__ic svg {
  width: 22px;
  height: 22px;
}
.feat__t {
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.feat__p {
  margin-top: 6px;
  font-size: clamp(13px, 1.3vw, 14px);
  line-height: 1.45;
  color: var(--muted, rgba(14, 10, 7, 0.56));
}
.allin-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: clamp(30px, 3.4vw, 48px) auto 0;
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 500;
  color: var(--ink);
}
.allin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0b84fe;
  box-shadow: 0 0 0 4px rgba(11, 132, 254, 0.18);
}
html[data-theme="dark"] .feat {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ===================================================================
   7 · HOW IT WORKS — drawn timeline + signoff
   Track draws left->right when .tl reveals; nodes fill in sync.
   =================================================================== */
.how {
  --sx: #2f6df0;
  position: relative;
  background:
    radial-gradient(
      64% 42% at 50% 0%,
      rgba(47, 109, 240, 0.04),
      transparent 70%
    ),
    var(--paper);
  overflow: clip;
}
html[data-theme="dark"] .how {
  --sx: #6ea8ff;
  background:
    radial-gradient(
      64% 42% at 50% 0%,
      rgba(110, 168, 255, 0.05),
      transparent 70%
    ),
    var(--paper);
}
.tl {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}
/* wrapper reveal is only a trigger for the track draw */
.tl[data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}
.tl__track {
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
.tl__fill {
  position: absolute;
  inset: 0;
  background: var(--sx);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s;
}
.tl.in .tl__fill {
  transform: scaleX(1);
}
.tl__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
}
.tl__step {
  position: relative;
  padding-top: 34px;
}
.tl__node {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  transition:
    border-color 0.4s ease,
    background 0.4s ease;
  /* nodes light up as the track's fill sweeps past them */
  transition-delay: calc(0.35s + var(--i, 0) * 0.62s);
}
.tl.in .tl__node {
  border-color: var(--sx);
  background: var(--sx);
}
.tl__day {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sx);
}
.tl__t {
  margin: 10px 0 0;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tl__p {
  margin: 10px 0 0;
  max-width: 30ch;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: clamp(12px, 1.3vw, 13px);
  line-height: 1.7;
  color: var(--muted, rgba(14, 10, 7, 0.58));
}
.signoff {
  max-width: 760px;
  margin: clamp(44px, 6vw, 76px) auto 0;
  padding-top: clamp(22px, 2.8vw, 32px);
  border-top: 1px solid var(--line);
  text-align: center;
}
.signoff__k {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-3, rgba(14, 10, 7, 0.34));
}
.signoff__k::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--sx);
}
.signoff__t {
  margin: 12px 0 0;
  font-size: clamp(19px, 2.4vw, 26px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.signoff__t em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--sx);
}
@media (max-width: 760px) {
  .tl__track {
    display: none;
  }
  .tl__row {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 420px;
    margin: 0 auto;
    border-left: 1px solid var(--line);
    padding-left: 24px;
  }
  .tl__step {
    padding-top: 0;
  }
  .tl__node {
    top: 4px;
    left: -29.5px;
  }
}

/* ===================================================================
   8 · GUARANTEE  (+ shared check list / cta button)
   =================================================================== */
.guard-card {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(36px, 5vw, 60px) clamp(24px, 4vw, 48px);
  border-radius: 26px;
  background: var(--paper);
  border: 1px solid var(--line, rgba(14, 10, 7, 0.1));
  box-shadow: 0 30px 70px rgba(8, 18, 53, 0.1);
}
.guard-ic {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  margin-bottom: 20px;
}
.guard-ic svg {
  width: 32px;
  height: 32px;
}
.guard-title {
  font-size: clamp(24px, 3.4vw, 38px);
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 10px 0 0;
  color: var(--ink);
}
.guard-sub {
  margin: 12px 0 0;
  color: var(--muted, rgba(14, 10, 7, 0.6));
}
.guard-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.guard-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--ink);
}
.gl-ic {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.16);
  position: relative;
}
.gl-ic::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 4.5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #16a34a;
  border-bottom: 2px solid #16a34a;
  transform: rotate(45deg);
}
html[data-theme="dark"] .guard-card {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ===================================================================
   CTA band (reusable: §9, §12) + buttons
   =================================================================== */
.cta-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 56px);
  border-radius: 30px;
  background: linear-gradient(135deg, #0b3d7a, #0b84fe);
  color: #fff;
  box-shadow: 0 30px 70px rgba(11, 80, 180, 0.3);
}
.cta-title {
  font-size: clamp(26px, 3.8vw, 44px);
  letter-spacing: -0.03em;
  font-weight: 600;
  line-height: 1.08;
}
.cta-sub {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(15px, 1.6vw, 18px);
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 0 26px;
  height: 54px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #0b3d7a;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}
.cta-btn svg {
  width: 18px;
  height: 18px;
}
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}
.cta-btn--ghost {
  background: transparent;
  color: #0b84fe;
  border: 1.5px solid currentColor;
  box-shadow: none;
}
.cta-btn--ghost:hover {
  background: rgba(11, 132, 254, 0.08);
}
.cta-btn--lg {
  height: 60px;
  padding: 0 34px;
  font-size: 17px;
}

/* ===================================================================
   10 · TESTIMONIALS — globe placeholder + media wall + quote wall
   =================================================================== */
.testimonials {
  padding: 0;
}
.globe-ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  padding: clamp(56px, 9vw, 110px) 20px clamp(40px, 6vw, 80px);
  color: #fff;
  background:
    radial-gradient(
      95% 70% at 50% -8%,
      rgba(19, 83, 176, 0.75) 0%,
      rgba(24, 57, 112, 0.35) 32%,
      rgba(2, 22, 55, 0) 62%
    ),
    linear-gradient(180deg, #031d49 0%, #021635 38%, #010d1f 70%, #010919 100%);
}
.globe-ph__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.globe-ph__sq {
  width: 7px;
  height: 7px;
  background: #2f6fd0;
}
.globe-ph__title {
  margin: 14px 0 0;
  font-size: clamp(30px, 5vw, 58px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.globe-ph__title em {
  font-style: italic;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
}
.globe-ph__orb {
  position: relative;
  margin-top: clamp(30px, 5vw, 56px);
  width: min(72vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 32%,
    rgba(70, 130, 220, 0.45),
    rgba(10, 30, 70, 0.2) 58%,
    transparent 72%
  );
  border: 1px solid rgba(120, 170, 255, 0.18);
  box-shadow: inset 0 0 60px rgba(40, 90, 180, 0.4);
}
.globe-ph__orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: radial-gradient(
    rgba(150, 190, 255, 0.55) 1px,
    transparent 1.4px
  );
  background-size: 14px 14px;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 63%, transparent 70%);
  mask: radial-gradient(circle at 50% 50%, #000 63%, transparent 70%);
  opacity: 0.5;
  animation: globeSpin 26s linear infinite;
}
@keyframes globeSpin {
  to {
    background-position: 280px 0;
  }
}
.globe-ph__pin {
  position: absolute;
  top: 30%;
  left: 60%;
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 0;
  background: #ff4d4d;
  transform: rotate(-45deg);
  box-shadow: 0 0 0 5px rgba(255, 77, 77, 0.22);
  animation: pinPulse 2.4s ease-in-out infinite;
}
.globe-ph__pin::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}
@keyframes pinPulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.28);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 77, 77, 0);
  }
}
.globe-ph__pinlabel {
  position: absolute;
  top: 21%;
  left: 64%;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
  padding: 3px 9px;
  border-radius: 7px;
  white-space: nowrap;
}
.tw-media {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 84px) 20px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}
.tw-vid,
.tw-pic {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--line, rgba(14, 10, 7, 0.1));
  background: linear-gradient(135deg, #e9eef6, #d4deee);
}
.tw-vid {
  background: linear-gradient(135deg, #1a2740, #0d1830);
}
.tw-play {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #0b3d7a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.tw-play svg {
  width: 22px;
  height: 22px;
  margin-left: 2px;
}
.tw-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.42);
  padding: 4px 8px;
  border-radius: 6px;
}
.tw-pic .tw-tag {
  color: rgba(20, 40, 80, 0.55);
  background: rgba(255, 255, 255, 0.72);
}
.tw-quotes {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(28px, 3vw, 44px) 20px clamp(64px, 9vw, 120px);
  columns: 3;
  column-gap: 18px;
}
.quote {
  break-inside: avoid;
  margin: 0 0 18px;
  padding: clamp(20px, 2vw, 28px);
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid var(--line, rgba(14, 10, 7, 0.1));
}
.quote p {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.5;
  color: var(--ink);
}
.quote footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  /* neutralize the global Lumio `footer{}` rule */
  background: none;
  padding: 0;
  overflow: visible;
  font-size: 13px;
  line-height: 1.3;
  color: var(--muted, rgba(14, 10, 7, 0.6));
}
.quote-av {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #cdd9ee, #9fb1cb);
}
.quote strong {
  color: var(--ink);
  font-weight: 600;
}
html[data-theme="dark"] .quote {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .tw-pic {
  background: linear-gradient(135deg, #1c2433, #141a26);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ---- testimonial wall: 3 slow auto-scrolling rows (r / l / r) ---- */
.testi-wall {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.3vw, 20px);
  padding: clamp(30px, 4vw, 56px) 0 clamp(64px, 9vw, 120px);
  overflow: hidden;
}
.testi-row {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.testi-track {
  display: flex;
  width: max-content;
  animation: testi-scroll 100s linear infinite;
  will-change: transform;
}
/* rows 1 & 3 travel right (reverse the leftward keyframe); row 2 travels left */
.testi-row--right .testi-track {
  animation-direction: reverse;
}
.testi-track .quote {
  flex: 0 0 auto;
  width: clamp(260px, 22vw, 330px);
  margin: 0 9px; /* uniform unit → translateX(-50%) loops seamlessly */
}
@keyframes testi-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .testi-track {
    animation: none;
  }
}

/* ===================================================================
   11 · PROOF ZONE — case studies + live demo
   =================================================================== */
.case-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.case {
  border-radius: 20px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line, rgba(14, 10, 7, 0.1));
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}
.case:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(8, 18, 53, 0.12);
}
.case__shot {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e9eef6, #d4deee);
}
.case__shot .tw-tag {
  color: rgba(20, 40, 80, 0.55);
  background: rgba(255, 255, 255, 0.72);
}
.case__body {
  padding: clamp(20px, 2vw, 28px);
}
.case__t {
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.case__metrics {
  display: flex;
  gap: 26px;
  margin: 14px 0;
}
.case__metrics strong {
  display: block;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #2aa3ff, #0b66d6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.case__metrics span {
  font-size: 12px;
  color: var(--muted, rgba(14, 10, 7, 0.55));
}
.case__p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted, rgba(14, 10, 7, 0.6));
}
.demo-band {
  max-width: 1000px;
  margin: clamp(24px, 3vw, 36px) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 22px;
  background: linear-gradient(135deg, #0b3d7a, #0b84fe);
  color: #fff;
}
.demo-band .block__eyebrow {
  color: rgba(255, 255, 255, 0.72);
}
.demo-title {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
}
.demo-sub {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}
.demo-play {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #0b3d7a;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
.demo-play:hover {
  transform: scale(1.07);
}
.demo-play svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
}
html[data-theme="dark"] .case {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ===================================================================
   13 · ABOUT ME
   =================================================================== */
.about-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.about-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e3e9f3, #c9d5e8);
  border: 1px solid var(--line, rgba(14, 10, 7, 0.1));
}
.about-photo .tw-tag {
  color: rgba(20, 40, 80, 0.5);
  background: rgba(255, 255, 255, 0.72);
}
.about-title {
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 14px 0 0;
  color: var(--ink);
}
.about-title em {
  font-style: italic;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
}
.about-copy p {
  margin: 16px 0 0;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--muted, rgba(14, 10, 7, 0.66));
}
.about-points {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.about-points li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  color: var(--ink);
}
html[data-theme="dark"] .about-photo {
  background: linear-gradient(135deg, #1c2433, #141a26);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ===================================================================
   14 · QUIZ (soft CTA)
   =================================================================== */
.quiz-card {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(36px, 5vw, 56px);
  border-radius: 26px;
  background: var(--paper);
  border: 1px dashed var(--line, rgba(14, 10, 7, 0.2));
}
.quiz-ic {
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: rgba(11, 132, 254, 0.1);
  color: #0b84fe;
  margin-bottom: 18px;
}
.quiz-ic svg {
  width: 30px;
  height: 30px;
}
.quiz-title {
  font-size: clamp(22px, 3.2vw, 36px);
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 10px 0 0;
  color: var(--ink);
}
.quiz-sub {
  margin: 12px auto 22px;
  max-width: 420px;
  color: var(--muted, rgba(14, 10, 7, 0.6));
}
html[data-theme="dark"] .quiz-card {
  background: rgba(255, 255, 255, 0.02);
}

/* ===================================================================
   15 · WHO THIS IS *NOT* FOR
   =================================================================== */
.notfor-grid {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
}
.nf-col {
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: 20px;
  border: 1px solid var(--line, rgba(14, 10, 7, 0.1));
}
.nf-col--yes {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.22);
}
.nf-col--no {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.2);
}
.nf-h {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 600;
  color: var(--ink);
}
.nf-h em {
  font-style: italic;
}
.nf-badge {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  color: #fff;
  flex: none;
}
.nf-badge--yes {
  background: #16a34a;
}
.nf-badge--no {
  background: #ef4444;
}
.nf-col ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nf-col li {
  position: relative;
  padding-left: 18px;
  font-size: clamp(14px, 1.5vw, 15.5px);
  line-height: 1.45;
  color: var(--muted, rgba(14, 10, 7, 0.66));
}
.nf-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.4;
}

/* ===================================================================
   17 · SCARCITY + soft guarantee
   =================================================================== */
.scar-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(36px, 5vw, 60px) clamp(24px, 4vw, 48px);
  border-radius: 26px;
  background: var(--paper);
  border: 1px solid var(--line, rgba(14, 10, 7, 0.1));
  box-shadow: 0 30px 70px rgba(8, 18, 53, 0.1);
}
.scar-title {
  font-size: clamp(24px, 3.4vw, 38px);
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 10px 0 0;
  color: var(--ink);
}
.scar-title em {
  font-style: italic;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
}
.scar-sub {
  margin: 12px 0 0;
  color: var(--muted, rgba(14, 10, 7, 0.6));
}
.spots {
  max-width: 380px;
  margin: 28px auto 0;
  text-align: left;
}
.spots-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted, rgba(14, 10, 7, 0.6));
  margin-bottom: 8px;
}
.spots-count strong {
  color: var(--ink);
}
.spots-bar {
  height: 8px;
  border-radius: 99px;
  background: var(--line, rgba(14, 10, 7, 0.1));
  overflow: hidden;
}
.spots-bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #0b84fe, #2aa3ff);
}
.scar-guards {
  margin-top: 26px;
  display: inline-flex;
}
html[data-theme="dark"] .scar-card {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ===================================================================
   18 · FINAL CTA (dark, full-width)
   =================================================================== */
.finalcta {
  background: linear-gradient(180deg, #021635, #010d1f);
}
.finalcta-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}
.finalcta-eyebrow {
  color: rgba(255, 255, 255, 0.6);
}
.finalcta-title {
  font-size: clamp(30px, 5vw, 58px);
  letter-spacing: -0.03em;
  font-weight: 600;
  line-height: 1.05;
  margin: 14px 0 0;
}
.finalcta-sub {
  margin: 16px auto 0;
  max-width: 480px;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(15px, 1.6vw, 18px);
}
.finalcta .cta-btn {
  margin-top: 28px;
}
.finalcta-fine {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* ===================================================================
   19 · FOOTER
   =================================================================== */
.site-footer {
  background: #010d1f;
  color: rgba(255, 255, 255, 0.7);
  padding: clamp(56px, 7vw, 90px) 20px clamp(28px, 3vw, 40px);
}
.foot-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
}
.foot-logo {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.foot-brand p {
  margin-top: 12px;
  max-width: 240px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}
.foot-col h4 {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.foot-col a {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 0.2s ease;
}
.foot-col a:hover {
  color: #fff;
}
.foot-bottom {
  max-width: 1080px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
}

/* ===================================================================
   Responsive for §6–19
   =================================================================== */
@media (max-width: 900px) {
  .feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tw-media {
    grid-template-columns: repeat(2, 1fr);
  }
  .case-grid {
    grid-template-columns: 1fr;
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-photo {
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
  }
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  .notfor-grid {
    grid-template-columns: 1fr;
  }
  .tw-quotes {
    columns: 1;
  }
  .demo-band {
    flex-direction: column;
    text-align: center;
  }
}
@media (max-width: 600px) {
  .feat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .tw-media {
    grid-template-columns: 1fr 1fr;
  }
  .foot-bottom {
    flex-direction: column;
  }
}

/* ===================================================================
   6 · THE PROCESS — pinned, scroll-driven 5-step system
   Site palette (dark --paper + brand-blue accent). Panels cross-fade
   as you scroll; cards alternate sides (1/3/5 right, 2/4 left) around a
   central timeline rail that fills, with a connector + node per card.
   A Book-a-call CTA reveals near the end.
   Default (no JS / reduced-motion / mobile) = readable stacked list.
   .process--anim (added by script.js on desktop) = pinned animation.
   =================================================================== */
.process {
  --pc-accent: #2f6df0;
  position: relative;
  padding: 0;
  background:
    radial-gradient(
      72% 44% at 50% 0%,
      rgba(47, 109, 240, 0.1),
      transparent 70%
    ),
    radial-gradient(rgba(127, 127, 140, 0.06) 1px, transparent 1px),
    var(--paper);
  background-size:
    100% 100%,
    26px 26px,
    100% 100%;
  color: var(--ink);
  overflow: clip;
}
html[data-theme="dark"] .process {
  --pc-accent: #6ea8ff;
}

.process__stage {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(72px, 12vh, 140px) 24px;
}

/* shared panel scaffold */
.process__panel {
  margin: 0 auto;
}
.process__intro {
  text-align: center;
  max-width: 760px;
}
.process__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.process__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--pc-accent);
  display: inline-block;
}
.process__title {
  margin: 26px 0 0;
  font-size: clamp(30px, 5.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--ink);
}
.process__title em {
  font-style: italic;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
}
.process__sub {
  margin: 22px auto 0;
  max-width: 560px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.7;
  color: var(--muted);
}
.process__cue {
  display: none;
  margin-top: 30px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-3, rgba(127, 127, 140, 0.5));
}

/* step card — editorial: hairlines, mono meta, oversized ghost numeral */
.pstep {
  max-width: 460px;
}
.pstep__card {
  position: relative;
  padding: clamp(26px, 3vw, 38px);
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(8, 18, 53, 0.04);
}
html[data-theme="dark"] .pstep__card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.035),
    rgba(255, 255, 255, 0.012)
  );
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    0 30px 80px -34px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pstep__ghost {
  position: absolute;
  top: clamp(8px, 1.4vw, 16px);
  right: clamp(14px, 2vw, 22px);
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(58px, 6.4vw, 88px);
  line-height: 1;
  color: color-mix(in srgb, var(--pc-accent) 16%, transparent);
  pointer-events: none;
  user-select: none;
}
.pstep__num {
  display: block;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pc-accent);
}
.pstep__num i {
  font-style: normal;
  color: var(--muted);
}
.pstep__t {
  margin: 12px 0 16px;
  max-width: 76%;
  font-size: clamp(21px, 2.5vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
}
.pstep__t em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--pc-accent);
}
.pstep__p {
  margin: 0;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: clamp(12.5px, 1.35vw, 13.5px);
  line-height: 1.75;
  color: var(--muted);
}
.pstep__out {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: clamp(12.5px, 1.35vw, 14px);
  line-height: 1.6;
  color: var(--ink);
}
.pstep__out span {
  color: var(--pc-accent);
  font-weight: 600;
}

/* central rail */
.process__rail {
  display: none;
}
.process__rail-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--pc-accent) 0%, transparent) 0%,
    var(--pc-accent) 14%,
    var(--ink) 100%
  );
}

/* end CTA — uses the site ink/paper duo */
.process__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 40px auto 0;
  padding: 0 24px;
  height: 50px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.process__cta svg {
  width: 17px;
  height: 17px;
}
.process__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
}

/* default (static) flow: stack panels, give them air */
.process__panel + .process__panel,
.process__cta {
  margin-top: clamp(48px, 8vh, 96px);
}
.process--anim .process__panel + .process__panel,
.process--anim .process__cta {
  margin-top: 0;
}

/* ---- pinned animation mode (desktop only) ---- */
@media (min-width: 861px) {
  .process--anim {
    --gap: clamp(26px, 4.5vw, 78px);
    height: calc(var(--panels, 6) * 90vh);
  }
  .process--anim .process__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
  }
  .process--anim .process__rail {
    display: block;
    position: absolute;
    left: 50%;
    top: 13vh;
    bottom: 13vh;
    width: 2px;
    transform: translateX(-50%);
    background: var(--line);
    overflow: hidden;
    border-radius: 2px;
  }
  .process--anim .process__panel {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 1080px;
    transform: translate(-50%, -50%);
    will-change: opacity, transform;
  }
  .process--anim .process__intro {
    max-width: 760px;
  }

  /* alternate sides around the central rail */
  .process--anim .pstep {
    display: flex;
    max-width: none;
  }
  .process--anim .pstep__card {
    width: min(430px, 40vw);
  }
  .process--anim .pstep--right {
    justify-content: flex-start;
    padding-left: calc(50% + var(--gap));
  }
  .process--anim .pstep--left {
    justify-content: flex-end;
    padding-right: calc(50% + var(--gap));
  }

  /* connector + node dot reaching the central rail */
  .process--anim .pstep__card::before {
    content: "";
    position: absolute;
    top: clamp(34px, 5vw, 54px);
    width: var(--gap);
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pc-accent));
  }
  .process--anim .pstep__card::after {
    content: "";
    position: absolute;
    top: calc(clamp(34px, 5vw, 54px) - 4px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pc-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc-accent) 18%, transparent);
  }
  .process--anim .pstep--right .pstep__card::before {
    right: 100%;
  }
  .process--anim .pstep--right .pstep__card::after {
    right: calc(100% + var(--gap) - 5px);
  }
  .process--anim .pstep--left .pstep__card::before {
    left: 100%;
    background: linear-gradient(90deg, var(--pc-accent), transparent);
  }
  .process--anim .pstep--left .pstep__card::after {
    left: calc(100% + var(--gap) - 5px);
  }

  .process--anim .process__cta {
    position: absolute;
    left: 50%;
    bottom: 10vh;
    transform: translateX(-50%);
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }
  .process--anim .process__cta.is-on {
    pointer-events: auto;
  }
  .process--anim .process__cue {
    display: inline-block;
  }
}

/* reduced motion / no animation: never pin, always show everything */
@media (prefers-reduced-motion: reduce) {
  .process--anim {
    height: auto !important;
  }
  .process--anim .process__stage {
    position: static;
    height: auto;
    display: block;
    padding: clamp(72px, 12vh, 140px) 24px;
  }
  .process--anim .process__panel {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    max-width: 760px;
  }
  .process--anim .process__panel + .process__panel {
    margin-top: clamp(48px, 8vh, 96px);
  }
  .process--anim .pstep {
    display: block;
  }
  .process--anim .pstep__card::before,
  .process--anim .pstep__card::after {
    display: none;
  }
  .process--anim .process__rail {
    display: none;
  }
  .process--anim .process__cta {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    margin: clamp(48px, 8vh, 96px) auto 0;
  }
}

/* ===================================================================
   Automations variant of the s4 integrations section (.s4--autos):
   a static system-picker menu that swaps a center "shot" panel; the
   "Tools" item reveals the orbit underneath.
   =================================================================== */
.auto-shots {
  position: absolute;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}
.auto-shot {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* landscape panel, raised so it clears the section title below */
  aspect-ratio: 16 / 10;
  height: auto;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-9%) scale(0.96);
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0.45s;
  background:
    radial-gradient(
      120% 100% at 50% -10%,
      rgba(19, 83, 176, 0.4) 0%,
      rgba(2, 22, 55, 0) 60%
    ),
    linear-gradient(180deg, #0a1730 0%, #07122a 100%);
  border: 1px solid rgba(120, 160, 220, 0.2);
  box-shadow: 0 30px 70px rgba(3, 14, 40, 0.4);
}
.auto-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(120, 160, 220, 0.22) 1.5px, transparent 1.6px),
    radial-gradient(circle, rgba(120, 160, 220, 0.22) 1.5px, transparent 1.6px);
  background-size:
    52px 52px,
    52px 52px;
  background-position:
    0 0,
    26px 26px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3));
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.9),
    rgba(0, 0, 0, 0.3)
  );
}
.auto-shot.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(-9%) scale(1);
}
.auto-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.auto-shot__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(11, 98, 255, 0.9);
  padding: 5px 10px;
  border-radius: 999px;
}
.auto-shot__cap {
  position: relative;
  z-index: 1;
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #eaf1ff;
  text-align: center;
  padding: 0 26px;
}

/* Automations twin uses the SAME spinning filter carousel — only widen the
   track so the longer labels aren't clipped (pills still auto-size to text). */
.s4--autos .filter-list {
  width: clamp(240px, 26vw, 360px);
}
/* the "9 IN BANKING" pill is fintech copy — hide it in the automations twin */
.s4--autos .int-pill {
  display: none;
}

/* Hide the orbit tiles + logo while an automation panel is showing; only the
   "Tools" view (.is-tools) reveals the spinning orbit. */
.s4--autos:not(.is-tools) .orbit-ring,
.s4--autos:not(.is-tools) .lumio,
.s4--autos:not(.is-tools) .lumio-label {
  opacity: 0 !important;
  transition: opacity 0.4s ease;
}
.s4--autos .orbit-ring,
.s4--autos .lumio,
.s4--autos .lumio-label {
  transition: opacity 0.4s ease;
}

/* ============================================================
   Booking page (/book) + Thank-you page (/thank-you)
   Native shells around the Calendly inline embed. Reuse the
   editorial tokens (--paper/--ink/--muted/--line) + serif accent.
   ============================================================ */

/* CTAs converted from <button> to <a href="/book"> keep their button
   classes; neutralise the default anchor underline/color so they render
   identically to the original buttons. */
a.cta,
a.btn,
a.cta-btn,
a.process__cta {
  text-decoration: none;
  cursor: pointer;
}

.book-page {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  padding: 22px clamp(18px, 5vw, 48px) 64px;
}
.book-head {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.book-brand {
  display: inline-flex;
  color: var(--ink);
}
.book-brand svg {
  height: 22px;
  width: auto;
}
.book-back {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.book-back:hover {
  color: var(--ink);
}
.book-intro {
  width: 100%;
  max-width: 640px;
  margin: clamp(32px, 6vw, 64px) auto clamp(24px, 4vw, 40px);
  text-align: center;
}
.book-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.book-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #2f6df0;
}
.book-title {
  margin: 16px 0 0;
  font-size: clamp(30px, 5.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
}
.book-title .it {
  font-style: italic;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
}
.book-sub {
  margin: 16px auto 0;
  max-width: 540px;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.55;
  color: var(--muted-2, var(--muted));
}
.book-embed {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  min-width: 320px;
  height: 760px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 640px) {
  .book-embed {
    height: 1080px;
    border-radius: 12px;
  }
}

/* ---- Thank-you ---- */
.ty-page {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px clamp(18px, 5vw, 48px);
}
.ty-inner {
  max-width: 560px;
  width: 100%;
  text-align: center;
}
.ty-badge {
  width: 64px;
  height: 64px;
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #2f6df0;
  box-shadow: 0 0 0 8px color-mix(in srgb, #2f6df0 16%, transparent);
}
.ty-badge svg {
  width: 30px;
  height: 30px;
}
.ty-eyebrow {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.ty-title {
  margin: 12px 0 0;
  font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--ink);
}
.ty-title .it {
  font-style: italic;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
}
.ty-sub {
  margin: 16px auto 0;
  max-width: 480px;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.55;
  color: var(--muted-2, var(--muted));
}
.ty-next {
  margin: 32px auto 0;
  max-width: 460px;
  padding: 0;
  list-style: none;
  text-align: left;
  display: grid;
  gap: 12px;
}
.ty-next li {
  position: relative;
  padding: 14px 16px 14px 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted-2, var(--muted));
}
.ty-next li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 19px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2f6df0;
}
.ty-next strong {
  color: var(--ink);
  font-weight: 600;
}
.ty-home {
  display: inline-block;
  margin-top: 34px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ty-home:hover {
  color: var(--ink);
}