/* Niyalo, v6 "One Day Launch".
   Built on the v5 "Mirror" system (concepts/v2/05-mirror): mindcloud.co's layout language, rebuilt in original code
   with Niyalo green. New sections reproduce mindcloud components (scroll story, breakdown table, feature cards,
   media split, enquiry card, contact layout, pattern header) from the written specs, not from their code.
   Type scale (desktop): 48 / 38 / 30 / 24 / 16 / 14 / 13. Mobile adds 22 for the scroll story. */

:root {
  --bg: #F7F7F8;
  --hero-bg: #F7F8F7;
  --surface: #F2F2F3;
  --white: #FFFFFF;
  --ink: #27272A;
  --ink-2: #4F4F55;
  --ink-3: #60616A;
  --muted: #6A6B73;
  --hair: rgba(39, 39, 42, .08);
  --line: #DADADD;
  --card-line: #E4E4E7;

  --night: #232326;
  --dark-line: #434349;
  --on-dark: #BABABF;
  --dim-word: #6B6C74;

  --green: #16A882;
  --green-deep: #0F7A5F;
  --green-deep-hover: #0C6B53;
  --green-ink: #0B5C47;
  --green-tint: #E1F5EE;
  --mint: #BDF2DE;
  --mint-soft: #9BF0D2;
  --lime: #E3F7B5;
  --focus: #0F7A5F;

  --font-display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --frame-x: clamp(24px, 5.56vw, 80px);
  --ease-expo: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  --shadow-card: 0 12px 24px -8px rgba(39, 39, 42, .04), 0 4px 6px -4px rgba(39, 39, 42, .08), 0 0 0 1px rgba(39, 39, 42, .1);
  --shadow-raised: 0 0 10px 1px rgba(39, 39, 42, .03), 0 4px 5px -4px rgba(39, 39, 42, .08), 0 1px 5px -2px rgba(39, 39, 42, .1), 0 0 0 1px rgba(39, 39, 42, .06);
  --shadow-menu: 0 1px 1px rgba(0, 0, 0, .1), 0 9px 32px -8px rgba(0, 0, 0, .25), 0 4px 6px -4px rgba(0, 0, 0, .26);

  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-4.9' fill='none' stroke='%230F7A5F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m5.5 5.5 5 5m0-5-5 5' fill='none' stroke='%2360616A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h7m-2.5-2.75L11.25 8 8.5 10.75' fill='none' stroke='%2360616A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (min-width: 1440px) { :root { --frame-x: calc((100vw - 1280px) / 2); } }
@media (max-width: 1024px) { :root { --frame-x: 16px; } }
@media (max-width: 640px)  { :root { --frame-x: 12px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #C4C4CA transparent; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/24px var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
::selection { background: var(--mint); color: #0B2E24; }
:focus-visible { outline: 1.5px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; border-radius: 6px; background: var(--ink); color: #fff; font: 500 13px/20px var(--font-sans); text-decoration: none; transition: transform .16s var(--ease-out); }
.skip:focus { transform: translateY(60px); }

.inner { width: min(100% - 2 * var(--frame-x), 1280px); margin-inline: auto; padding-inline: 32px; }
.col10 { max-width: 1008px; margin-inline: auto; }
@media (max-width: 640px) { .inner { padding-inline: 16px; } }
@media (max-width: 480px) { .inner { padding-inline: 12px; } }

/* Two-tone section headings */
.h2 { margin: 0; font: 400 38px/44px var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.h2-line { display: block; }
.h2 > .h2-line:first-child { font-weight: 500; }
.h2-tint { color: var(--green-deep); }
.h2-muted { color: var(--ink-3); }
.h2-on-dark { color: #fff; }
.h2-on-dark .h2-tint { color: var(--mint); }
.lede { margin: 0; max-width: 448px; font: 400 16px/24px var(--font-sans); letter-spacing: -.01em; color: var(--ink-2); }
.sub-title { margin: 0; font: 500 13px/20px var(--font-sans); color: var(--ink-3); }
.eyebrow { margin: 0 0 -8px; font: 500 13px/20px var(--font-sans); color: var(--ink-3); }
.eyebrow-on-dark { color: var(--on-dark); }
@media (max-width: 640px) { .h2 { font-size: 30px; line-height: 36px; } }

/* Placeholder chips: dashed and visible on purpose until Kuu fills them */
.ph {
  display: inline;
  padding: 1px 6px;
  border: 1px dashed rgba(92, 67, 0, .55);
  border-radius: 6px;
  background: #FFF4D6;
  color: #5C4300;
  font: 500 13px/20px var(--font-sans);
  letter-spacing: 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ph-dark { background: rgba(255, 244, 214, .14); border-color: rgba(255, 236, 179, .7); color: #FFEDB8; }

.i-arrow { display: inline-block; vertical-align: -2px; margin-left: 4px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s var(--ease-out); }
.text-link { display: inline-flex; align-items: center; font: 500 16px/24px var(--font-sans); color: var(--green-deep); text-decoration: none; }
.text-link:hover { text-decoration: underline; }
@media (hover: hover) and (pointer: fine) { a:hover > .i-arrow { transform: translateX(2px); } }

/* ---------- Buttons: flat fills, no shadows or glows ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px; border-radius: 6px;
  border: 1px solid transparent;
  font: 500 14px/20px var(--font-sans); letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn-light { background: var(--white); color: var(--ink); border-color: rgba(39, 39, 42, .2); }
.btn-green { background: var(--green-deep); color: #fff; }
.btn-dark { background: var(--dark-line); color: #fff; border-color: #55555C; }
@media (hover: hover) and (pointer: fine) {
  .btn-light:hover { border-color: rgba(39, 39, 42, .4); }
  .btn-green:hover { background: var(--green-deep-hover); }
  .btn-dark:hover { background: #4D4D54; }
}
@media (max-width: 640px) { .btn { height: 44px; padding: 0 18px; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  height: 49px; color: #fff; background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
.site-header.is-solid { background: var(--bg); color: var(--ink); border-bottom-color: rgba(32, 36, 42, .08); }
.site-header.is-menu-open { background: #03140F; color: #fff; border-bottom-color: rgba(255, 255, 255, .08); }
.header-row {
  width: min(100% - 2 * var(--frame-x), 1280px); margin-inline: auto; padding-inline: 32px;
  height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.header-logo { position: relative; display: block; width: 55px; height: 30px; border-radius: 4px; }
.header-logo img { position: absolute; inset: 0; width: 55px; height: 30px; transition: opacity .2s ease; }
.logo-dark { opacity: 0; }
.site-header.is-solid:not(.is-menu-open) .logo-dark { opacity: 1; }
.site-header.is-solid:not(.is-menu-open) .logo-light { opacity: 0; }
.header-nav { display: flex; gap: 24px; }
.header-nav a, .header-action { position: relative; font: 500 13px/20px var(--font-sans); text-decoration: none; opacity: .85; transition: opacity .2s ease; }
.header-nav a::after, .header-action::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0; transition: opacity .2s ease; }
.header-nav a:hover, .header-action:hover, .header-nav a:focus-visible, .header-action:focus-visible { opacity: 1; }
.header-nav a:hover::after, .header-action:hover::after { opacity: .5; }
.header-action { opacity: 1; }
.site-header :focus-visible { outline-color: currentColor; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 16px; }
.menu-button { display: none; width: 44px; height: 44px; margin-right: -10px; padding: 10px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 8px; }
.menu-line { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform .28s var(--ease-expo); transform-origin: 12px 12px; }
.menu-button[aria-expanded="true"] .menu-line-a { transform: translateY(3px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-line-b { transform: translateY(-3px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 49px 0 0; z-index: 39; overflow-y: auto; background: #03140F; color: #fff; padding: 32px 24px 48px; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 20px; }
.mobile-menu a { font: 500 24px/30px var(--font-display); letter-spacing: -.01em; text-decoration: none; }
.mobile-menu-book { margin-top: 12px; color: var(--mint); }
.header-solo .header-row { grid-template-columns: 1fr; }
@media (max-width: 768px) {
  .header-row { padding-inline: 16px; grid-template-columns: 1fr auto; }
  .header-nav, .header-action { display: none; }
  .menu-button { display: grid; place-items: center; }
}

/* ---------- 1. Hero ---------- */
.hero { position: relative; isolation: isolate; margin-top: -49px; padding-top: 49px; overflow: hidden; background: var(--hero-bg); }
.hero::before, .hero::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 1px; background: rgba(255, 255, 255, .08); pointer-events: none; }
.hero::before { left: var(--frame-x); }
.hero::after { right: var(--frame-x); }
.hero-gradient {
  position: absolute; inset: 0 0 auto; height: 1010px; z-index: 0;
  background: radial-gradient(201.67% 105.6% at 50% -6.34%,
    #020A10 0%, #041C17 24.25%, #08402F 40.62%, #16A882 60.21%, #9BE6CB 78.77%, #F7F8F7 96.71%);
  -webkit-mask-image: linear-gradient(#000 0% 72%, rgba(0, 0, 0, .7) 84%, transparent 100%);
          mask-image: linear-gradient(#000 0% 72%, rgba(0, 0, 0, .7) 84%, transparent 100%);
}
.hero-beam { position: absolute; z-index: 0; top: -20px; left: 50%; width: min(100%, 1440px); height: 850px; transform: translateX(-50%); mix-blend-mode: plus-lighter; pointer-events: none; }
.hero-inner { position: relative; z-index: 2; width: min(100% - 2 * var(--frame-x), 1280px); margin-inline: auto; padding-inline: 32px; display: flex; flex-direction: column; align-items: center; }
.hero-content { max-width: 860px; margin-top: 120px; display: flex; flex-direction: column; align-items: center; text-align: center; }

.pill {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px;
  min-height: 32px; margin: 0 0 28px; padding: 6px 14px; border-radius: 24px;
  font: 500 13px/18px var(--font-sans); color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
}
.pill-label { opacity: .9; }
.pill-divider { width: 1px; height: 14px; background: rgba(255, 255, 255, .3); }
.pill-link { display: inline-flex; align-items: center; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); }
.pill-link:focus-visible { outline-color: #fff; }
.hero-eyebrow { margin: 0 0 12px; font: 500 13px/20px var(--font-sans); color: var(--mint); }

.hero-title { margin: 0; display: flex; flex-direction: column; gap: 2px; font: 400 48px/52px var(--font-display); letter-spacing: -1.5px; color: #fff; }
.hero-line { display: block; }
.hero-line-tint { color: var(--mint); }
.hero-sub { margin: 16px 0 0; max-width: 520px; font: 400 16px/24px var(--font-sans); letter-spacing: -.16px; color: #F2FFFA; }

/* Hero copy rises on first paint: transform only, the text is never hidden */
.rise { animation: rise .82s var(--ease-out) both; }
.rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .24s; }
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }

/* The ask card: v5's prompt surface, now the hero CTA with the terms under it */
.ask-card {
  position: relative; z-index: 2; width: 480px; max-width: 100%; margin: 36px 0 0;
  border-radius: 18px; background: rgba(255, 255, 255, .98); color: var(--ink); text-align: left;
  border: 1px solid rgba(0, 0, 0, .08);
}
.ask-slot { position: relative; padding: 6px; }
.ask {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  min-height: 76px; padding: 12px 8px 8px 14px; border-radius: 13px;
  background: var(--white); color: var(--ink); text-decoration: none;
  border: 1px solid rgba(39, 39, 42, .14);
  transition: border-color .2s ease;
}
.ask:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; border-radius: 13px; }
.ask-text { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-width: 0; }
.ask-title { font: 600 16px/22px var(--font-sans); letter-spacing: -.01em; }
.ask-note { font: 400 13px/18px var(--font-sans); color: var(--muted); }
.ask-send { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--green-deep); color: #fff; transition: background-color .16s ease, transform .16s var(--ease-out); }
.ask:active .ask-send { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .ask:hover { border-color: rgba(4, 28, 23, .34); }
  .ask:hover .ask-send { background: var(--green-deep-hover); }
}
.ask-orbit { position: absolute; inset: 6px; z-index: 3; width: calc(100% - 12px); height: calc(100% - 12px); overflow: visible; pointer-events: none; }
.ask-orbit path { fill: none; }
.ask-orbit-ghost { stroke: rgba(15, 122, 95, .35); stroke-width: .75; opacity: 0; animation: orbit-ghost .82s linear 1.1s forwards; }
.ask-orbit-flare { stroke: var(--green); stroke-width: 1.5; stroke-linecap: butt; stroke-dasharray: 0 100; opacity: 0; }
.ask-orbit-top { animation: orbit-top 1.42s linear .6s both; }
.ask-orbit-bottom { animation: orbit-bottom 1.42s linear .6s both; }
@keyframes orbit-top { 0% { stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: .98; } 36% { stroke-dasharray: 7 93; } 68% { opacity: .98; } 100% { stroke-dasharray: 7 93; stroke-dashoffset: -70; opacity: 0; } }
@keyframes orbit-bottom { 0% { stroke-dasharray: 0 100; stroke-dashoffset: -50; opacity: .98; } 36% { stroke-dasharray: 7 93; } 68% { opacity: .98; } 100% { stroke-dasharray: 7 93; stroke-dashoffset: -120; opacity: 0; } }
@keyframes orbit-ghost { 0%, 12% { opacity: 0; } 18%, 72% { opacity: 1; } 100% { opacity: 0; } }

.ask-terms { display: grid; gap: 6px; padding: 12px 20px 16px; }
.ask-terms p { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.ask-terms strong { font-weight: 600; color: var(--ink); }
.ask-terms .ask-tranche { font-size: 13px; line-height: 20px; color: var(--muted); }
.ask-more { margin-top: 4px; justify-self: start; font-size: 14px; }

/* Logo strip */
.companies { position: relative; z-index: 2; margin-top: 120px; margin-bottom: 40px; }
.companies::before { content: ""; position: absolute; top: -32px; left: 50%; width: 100vw; height: 1px; transform: translateX(-50%); background: rgba(255, 255, 255, .3); }
.companies-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.companies-label { flex: 0 0 280px; margin: 0; font: 500 13px/20px var(--font-sans); color: var(--ink-2); text-wrap: balance; }
.companies-rail {
  position: relative; flex: 0 1 700px; min-width: 0; height: 48px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 96px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 96px), transparent 100%);
}
.companies-track { display: flex; height: 48px; margin: 0; padding: 0; list-style: none; will-change: transform; }
.companies-track li { flex: 0 0 20%; display: flex; align-items: center; justify-content: center; transition: opacity .9s var(--ease-soft); }
.companies-track li:nth-child(n+6) { opacity: 0; }
.companies-track.is-stepping li:first-child { opacity: 0; }
.companies-track.is-stepping li:nth-child(6) { opacity: 1; transition-duration: 1.8s; }
.companies-track a { display: grid; place-items: center; min-height: 44px; padding: 4px; border-radius: 6px; text-decoration: none; }
.companies-track img { width: auto; height: auto; max-height: 36px; max-width: 112px; filter: brightness(0); opacity: .55; transition: opacity .2s ease; }
@media (hover: hover) and (pointer: fine) { .companies-track a:hover img { opacity: .85; } }
.wordmark { font: 600 16px/1 var(--font-display); letter-spacing: -.01em; color: #3F3F45; white-space: nowrap; }
.companies-track-dup { display: none; }
@media (max-width: 1220px) { .companies-label { flex-basis: 240px; } }
@media (max-width: 768px) {
  .hero-content { margin-top: 88px; }
  .companies { margin-top: 104px; margin-bottom: 64px; }
  .companies-row { flex-direction: column; gap: 20px; text-align: center; }
  .companies-label { flex: none; max-width: 300px; }
  .companies-rail { flex: none; width: calc(100% + 24px); display: flex;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 54px, #000 calc(100% - 54px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 54px, #000 calc(100% - 54px), transparent 100%); }
  .companies-track, .companies-track-dup { display: flex; flex: none; gap: 54px; padding-right: 54px; animation: marquee 54s linear infinite; }
  .companies-track li, .companies-track li:nth-child(n+6) { flex: 0 0 auto; opacity: 1; }
  .hero-gradient { height: 1180px; }
}
@keyframes marquee { to { transform: translateX(-100%); } }
@media (max-width: 640px) {
  .hero-inner { padding-inline: 16px; }
  .hero-title { font-size: 38px; line-height: 44px; letter-spacing: -1px; }
  .pill { font-size: 13px; }
  .ask-card { width: 100%; }
  .ask-terms { padding: 12px 16px 16px; }
  .hero-gradient { height: 1260px; }
}

/* ---------- Dark chapter: dashed frame lines shared by story and Sprint ---------- */
.dash-line { position: absolute; top: 0; bottom: 0; z-index: 0; width: 1px; background: repeating-linear-gradient(var(--dark-line) 0 2px, transparent 2px 5px); pointer-events: none; }
.dash-left { left: var(--frame-x); }
.dash-right { right: var(--frame-x); }
.dash-anchor { left: calc(50% + 64px); }

/* ---------- 3. The problem: scroll story ---------- */
.story { position: relative; overflow: clip; background: #1E1E21; color: #F7F7F8; }
.story-frame { position: relative; overflow: hidden; padding: 176px 0 168px; }
.story-rings { position: absolute; left: 50%; top: 50%; width: 1280px; height: 1280px; transform: translate(-50%, -50%); pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent 8%, #000 40%, #000 60%, transparent 92%);
          mask-image: linear-gradient(transparent 8%, #000 40%, #000 60%, transparent 92%); }
.story-rings span { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid rgba(96, 97, 106, .32); }
.story-rings span:last-child { width: 1008px; height: 1008px; }
.story-copy { position: relative; z-index: 1; max-width: 616px; margin-inline: auto; display: flex; flex-direction: column; gap: 36px; }
.story-copy .h2 { margin-bottom: 4px; }
.story-p { position: relative; isolation: isolate; margin: 0; font: 400 30px/36px var(--font-display); letter-spacing: -.02em; color: #F7F7F8; }
.mark { position: relative; white-space: nowrap; }
.deco { position: absolute; z-index: -1; overflow: visible; pointer-events: none; fill: none; stroke: var(--lime); stroke-width: 2.2; stroke-linecap: round; }
.deco path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 1)); }
.deco-line { left: -3%; width: 106%; bottom: -8px; height: 12px; }
.deco-rays { left: -10%; width: 120%; top: 0; height: 100%; stroke: var(--mint-soft); }
.deco-circle { left: -12%; width: 124%; top: -4px; height: calc(100% + 8px); }
/* Scrubbed state: only when JS runs, motion is allowed and the frame fits the screen */
.story.is-scrub { height: calc(100svh + var(--distance, 1100px)); }
.story.is-scrub .story-frame { position: sticky; top: 0; height: 100svh; padding: 49px 0 0; display: flex; align-items: center; }
.story.is-scrub .story-frame > .inner { width: min(100% - 2 * var(--frame-x), 1280px); }
.story.is-scrub .w { color: var(--dim-word); transition: color .22s ease-out; }
.story.is-scrub .w.is-lit { color: #F7F7F8; }
@media (max-width: 1024px) { .story-p { font-size: 24px; line-height: 32px; } .story.is-scrub { --distance: 900px; } }
@media (max-width: 640px) {
  .story-frame { padding: 112px 0 104px; }
  .story-p { font-size: 22px; line-height: 28px; }
  .story-copy { gap: 28px; }
  .story.is-scrub { --distance: 700px; }
  .story-rings { width: 980px; height: 980px; }
  .story-rings span:last-child { width: 760px; height: 760px; }
}

/* ---------- 4. The Sprint: dark band ---------- */
.fs { position: relative; overflow: hidden; padding: 160px 0 128px; background: var(--night); color: #fff; }
.fs::before, .fs::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--dark-line); opacity: .4; }
.fs::before { top: 20px; }
.fs::after { bottom: 20px; }
.fs :focus-visible { outline-color: var(--mint-soft); }
.fs-main { position: relative; display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); grid-template-areas: "copy visual" "tabs visual"; column-gap: 64px; row-gap: 96px; }
.fs-copy { grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.fs-accent { font-weight: 600;
  background: linear-gradient(90deg, #E3F7B5 9%, #9BF0D2 30%, #3CC9A3 46%, #16A882 63%, #3CC9A3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.fs-body { margin: 0; max-width: 448px; font: 400 16px/24px var(--font-sans); color: var(--on-dark); }
.fs-visual { grid-area: visual; position: relative; min-height: 540px; display: flex; align-items: center; }
.fs-rings { position: absolute; left: 50%; top: 50%; width: 600px; height: 600px; max-width: none; transform: translate(-40%, -50%); opacity: .9; pointer-events: none; }
.fs-ring { transform-box: view-box; transform-origin: 300px 300px; animation: spin 80s linear infinite paused; }
.fs-ring-inner { animation-duration: 40s; }
.fs.is-visible .fs-ring { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }

.thread-window { position: relative; z-index: 1; width: 500px; max-width: none; margin-left: 24px; border-radius: 16px; overflow: hidden; background: var(--bg); color: var(--ink); box-shadow: var(--shadow-menu); }
.thread-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hair); font: 500 16px/24px var(--font-sans); }
.thread-head img { width: 24px; height: 24px; }
.thread-tag { margin-left: auto; padding: 1px 8px; border-radius: 32px; background: var(--white); box-shadow: 0 0 0 .5px rgba(39, 39, 42, .2); font: 500 13px/18px var(--font-sans); color: var(--muted); }
.thread { display: none; flex-direction: column; gap: 12px; min-height: 320px; margin: 0; padding: 20px 16px; list-style: none; }
.thread.is-active { display: flex; }
.msg { align-self: flex-start; max-width: 82%; padding: 10px 12px; border-radius: 12px; background: var(--white); box-shadow: 0 0 0 .5px rgba(39, 39, 42, .12), 0 2px 4px -2px rgba(39, 39, 42, .08); font: 400 14px/20px var(--font-sans); }
.msg-you { align-self: flex-end; background: var(--green-tint); box-shadow: none; }
.msg-who { display: block; margin-bottom: 2px; font: 500 13px/18px var(--font-sans); color: var(--muted); }
.fs.is-visible .thread.is-active .msg { animation: msg-in .35s var(--ease-out) both; animation-delay: calc(.18s + var(--i) * .45s); }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.thread-composer { margin: 0 12px 12px; padding: 12px 14px; border-radius: 12px; background: var(--white); box-shadow: 0 0 0 .5px rgba(39, 39, 42, .16); font: 400 14px/20px var(--font-sans); color: var(--muted); }

.fs-tabs { grid-area: tabs; max-width: 460px; }
.tab-list { position: relative; display: flex; gap: 24px; border-bottom: 1px solid rgba(67, 67, 73, .65); }
.tab { padding: 0 0 16px; border: 0; background: none; color: var(--on-dark); font: 500 16px/24px var(--font-sans); white-space: nowrap; cursor: pointer; transition: color .2s ease; }
.tab-short { display: none; }
.tab[aria-selected="true"] { color: #fff; }
.tab:focus-visible { outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .tab:hover { color: #fff; } }
.tab-indicator {
  position: absolute; left: 0; bottom: -1px; width: 100px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, #E3F7B5 0%, #5FD6A8 46%, #16A882 100%);
  opacity: 0; transform-origin: left center;
  transition: transform .5s var(--ease-expo), opacity .24s ease;
}
.tab-panel { padding-top: 20px; }
.tab-panel:focus-visible { outline-offset: 6px; }
.panel-when { margin: 0 0 8px; font: 500 13px/20px var(--font-sans); color: var(--mint); }
.tab-panel p { margin: 0; font: 400 16px/24px var(--font-sans); color: var(--on-dark); }
.tab-panel strong { font-weight: 500; color: #fff; }
.tab-panel .split { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(67, 67, 73, .65); font-size: 16px; line-height: 24px; }
.tab-panel .split b { font-weight: 600; color: #fff; }
.tab-panel + .tab-panel { margin-top: 24px; }
.js .tab-panel + .tab-panel { margin-top: 0; }
@media (max-width: 1100px) { .fs-main { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); column-gap: 40px; } .thread-window { width: 460px; } }
@media (max-width: 900px) {
  .fs { padding: 112px 0 96px; }
  .fs-main { grid-template-columns: 1fr; grid-template-areas: "copy" "visual" "tabs"; row-gap: 56px; }
  .dash-anchor { display: none; }
  .fs-visual { min-height: 0; }
  .thread-window { width: 100%; max-width: 540px; margin-left: 0; }
  .fs-rings { transform: translate(-50%, -50%); }
}
@media (max-width: 640px) { .thread { min-height: 0; } }
@media (max-width: 480px) { .tab-long { display: none; } .tab-short { display: inline; } .tab-list { gap: 20px; } }

/* ---------- Gridlines frame for the light sections ---------- */
.gridlines { position: relative; }
.gridlines::before, .gridlines::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 3; width: 1px; pointer-events: none;
  background: rgba(39, 39, 42, .08);
  -webkit-mask-image: linear-gradient(transparent 0, #000 160px);
          mask-image: linear-gradient(transparent 0, #000 160px);
}
.gridlines::before { left: var(--frame-x); }
.gridlines::after { right: var(--frame-x); }

/* Shared section rhythm */
.section { padding-block: 128px; }
.section-head { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 400px); justify-content: space-between; align-items: end; gap: 24px 64px; margin-bottom: 56px; }
.section-head-stack { grid-template-columns: 1fr; align-items: start; gap: 20px; margin-bottom: 0; }
.section-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 40px; }
.section-foot-center { justify-content: flex-start; }
.foot-note { margin: 0; max-width: 520px; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cta-micro { margin: 0; max-width: 300px; font: 400 13px/20px var(--font-sans); color: var(--muted); }
@media (max-width: 900px) {
  .section { padding-block: 96px; }
  .section-head { grid-template-columns: 1fr; margin-bottom: 40px; }
}
@media (max-width: 640px) { .section { padding-block: 80px; } }

/* Entrance: content is visible by default; this only plays when JS sees the element arrive */
.is-entering { animation: enter .7s var(--ease-out) both; animation-delay: var(--d, 0ms); }
@keyframes enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- 5. What you get: breakdown table ---------- */
.included { background: var(--white); border-top: 1px solid var(--hair); }
.table-shell { margin-inline: -8px; }
.breakdown { width: 100%; border-collapse: collapse; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.breakdown thead th { padding: 0 8px 12px; text-align: left; font: 500 13px/18px var(--font-sans); color: var(--ink); border-bottom: .5px solid var(--line); }
.breakdown tbody th, .breakdown td { padding: 18px 8px; vertical-align: top; text-align: left; border-bottom: .5px solid var(--line); }
.breakdown tbody th { width: 220px; font: 500 16px/24px var(--font-display); color: var(--ink); white-space: nowrap; }
.breakdown .solves { width: 250px; color: var(--ink-3); }
.breakdown .when { width: 150px; color: var(--ink); font-weight: 500; }
.breakdown tbody tr:last-child th, .breakdown tbody tr:last-child td { border-bottom: 0; }
.part-mark { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 3px; background: var(--green-deep); vertical-align: 1px; }
.part-mark-soft { background: var(--mint); box-shadow: inset 0 0 0 1px rgba(15, 122, 95, .35); }
@media (max-width: 900px) { .breakdown tbody th { width: 180px; white-space: normal; } .breakdown .solves { width: 200px; } }
@media (max-width: 760px) {
  .table-shell { margin-inline: 0; }
  .breakdown thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .breakdown, .breakdown tbody, .breakdown tr, .breakdown th, .breakdown td { display: block; width: auto !important; }
  .breakdown tr { padding: 20px 0; border-bottom: .5px solid var(--line); }
  .breakdown tbody tr:last-child { border-bottom: 0; }
  .breakdown tbody th, .breakdown td { padding: 0; border: 0; }
  .breakdown tbody th { margin-bottom: 10px; white-space: normal; }
  .breakdown td { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 4px 0; }
  .breakdown td::before { content: attr(data-label); font: 500 13px/22px var(--font-sans); color: var(--muted); }
}

/* ---------- 6. Your part: feature cards ---------- */
.yours-layout { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.yours-layout .section-head { position: sticky; top: 96px; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.feature { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 16px; background: var(--white); border: 1px solid var(--card-line); }
.feature-title { margin: 0; font: 500 16px/22px var(--font-sans); color: var(--ink); }
.feature p { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.feature-rule { justify-content: flex-end; background: var(--green-tint); border-color: rgba(15, 122, 95, .2); }
.feature-rule p { font: 500 16px/24px var(--font-sans); color: var(--green-ink); }
@media (max-width: 980px) { .yours-layout { grid-template-columns: 1fr; } .yours-layout .section-head { position: static; max-width: 560px; } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

/* ---------- 7. Testimonials ---------- */
.testimonials { padding-block: 128px 200px; overflow: hidden; }
.t-head { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 96px; text-align: center; }
.t-title { margin: 0; font: 400 38px/44px var(--font-display); letter-spacing: -.76px; color: var(--ink-3); }
.t-strong { font-weight: 600; color: var(--ink); }
.t-sub { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.t-frame { position: relative; --gap: 24px; --col: calc((100% - 2 * var(--gap)) / 3); }
.t-shell { position: absolute; border-radius: 24px; background: rgba(242, 242, 243, .78); box-shadow: 0 0 0 1px #ECECED; pointer-events: none; }
.t-shell-left { left: calc(-1 * (var(--col) + var(--gap))); width: var(--col); top: 28px; bottom: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 16%, rgba(0,0,0,.2) 34%, rgba(0,0,0,.72) 52%, #000 72%);
          mask-image: linear-gradient(90deg, transparent 0 16%, rgba(0,0,0,.2) 34%, rgba(0,0,0,.72) 52%, #000 72%); }
.t-shell-right { right: calc(-1 * (var(--col) + var(--gap))); width: var(--col); top: 28px; bottom: 0;
  -webkit-mask-image: linear-gradient(270deg, transparent 0 16%, rgba(0,0,0,.2) 34%, rgba(0,0,0,.72) 52%, #000 72%);
          mask-image: linear-gradient(270deg, transparent 0 16%, rgba(0,0,0,.2) 34%, rgba(0,0,0,.72) 52%, #000 72%); }
.t-shell-bottom { left: 0; right: 0; top: calc(100% + 24px); height: 112px; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.t-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.t-card { display: flex; flex-direction: column; gap: 40px; height: 100%; min-height: 344px; margin: 0; padding: 24px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-card); }
.t-grid > .t-card:nth-child(n+3) { min-height: 440px; }
.t-lead { grid-area: 1 / 1; align-self: end; height: auto; }
.t-logo-link { align-self: flex-start; display: block; border-radius: 6px; }
.t-logo { filter: brightness(0); opacity: .78; width: auto; height: 40px; max-width: min(100%, 128px); object-fit: contain; object-position: left center; transition: opacity .2s ease; }
@media (hover: hover) and (pointer: fine) { .t-logo-link:hover .t-logo { opacity: 1; } }
.t-logo-wide { height: 28px; margin: 6px 0; }
.t-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.t-quote { margin: 0; }
.t-quote p { margin: 0; font: 500 16px/24px var(--font-sans); letter-spacing: -.16px; color: var(--ink); }
.t-person { display: flex; align-items: center; gap: 16px; }
.t-avatar { flex: none; display: grid; place-items: center; width: 56px; height: 64px; border-radius: 4px; background: #DDF2EA; color: var(--green-deep); font: 600 16px/1 var(--font-display); }
.t-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.t-name { font: 500 13px/20px var(--font-sans); color: var(--ink); }
.t-role { font: 400 13px/18px var(--font-sans); color: var(--muted); }

.t-feature {
  position: relative; isolation: isolate; overflow: hidden;
  grid-area: 1 / 2 / auto / span 2; align-self: end;
  height: calc(100% + 24px); min-height: 384px;
  border-radius: 24px; background: #0E1F19;
}
.t-feature-images { position: absolute; inset: 0; z-index: -2; }
.t-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .6s var(--ease-soft); }
.t-img.is-active { opacity: 1; }
.t-feature-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 22, 17, .62) 0%, rgba(8, 22, 17, .8) 45%, rgba(8, 22, 17, .95) 100%); }
.t-feature-copy { position: absolute; inset: 48px 40px 40px; }
.t-slide { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; color: #fff; }
.t-feature-bottom { align-self: stretch; }
.t-feature-logo-link { display: block; border-radius: 6px; }
.t-feature-logo { width: auto; height: 36px; max-width: 160px; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); }
.t-feature-wordmark { font: 600 24px/36px var(--font-display); letter-spacing: -.01em; color: #fff; text-decoration: none; border-radius: 6px; }
.t-feature-wordmark:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.t-feature-quote { margin: 0; }
.t-feature-quote p { margin: 0; max-width: 584px; font: 400 24px/32px var(--font-display); letter-spacing: -.36px; color: #fff; }
.t-feature-note { margin: 12px 0 0; font: 400 13px/20px var(--font-sans); color: rgba(255, 255, 255, .84); }
.t-meta { display: flex; align-items: center; gap: 24px; margin-top: 24px; }
.t-rule { flex: 1; height: 1px; background: rgba(218, 221, 221, .2); }
.t-meta-who { font: 500 13px/20px var(--font-sans); white-space: nowrap; }
.t-meta-role { opacity: .8; }
.t-slash { opacity: .5; }
.t-feature :focus-visible { outline-color: #fff; }
.t-feature.is-exit .t-slide.is-active { animation: copy-out .3s var(--ease-soft) forwards; }
.t-feature.is-enter .t-slide.is-active { animation: copy-in .3s var(--ease-soft) both; }
@keyframes copy-out { to { opacity: 0; filter: blur(8px); } }
@keyframes copy-in { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
.t-pause { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .3); cursor: pointer; transition: background-color .16s ease, transform .16s var(--ease-out); }
.t-pause:active { transform: scale(.94); }
.t-pause .i-play, .t-pause[aria-pressed="true"] .i-pause { display: none; }
.t-pause[aria-pressed="true"] .i-play { display: block; }
@media (hover: hover) and (pointer: fine) { .t-pause:hover { background: rgba(255, 255, 255, .24); } }
@media (max-width: 1100px) { .testimonials { padding-block: 112px 168px; } .t-shell { display: none; } }
@media (max-width: 1000px) {
  .testimonials { padding-block: 112px; }
  .t-head { align-items: flex-start; text-align: left; margin-bottom: 56px; }
  .t-strong { display: block; }
  .t-frame { --gap: 16px; }
  .t-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-feature { grid-area: 1 / 1 / auto / -1; align-self: auto; height: clamp(404px, 46vw, 448px); }
  .t-feature-copy { inset: 40px 32px 32px; }
  .t-lead { grid-area: auto; align-self: stretch; }
  .t-grid > .t-card:nth-child(n+3) { min-height: 344px; }
}
@media (max-width: 640px) {
  .testimonials { padding-block: 88px; }
  .t-title { font-size: 30px; line-height: 36px; }
  .t-grid { grid-template-columns: 1fr; }
  .t-feature { height: clamp(460px, 136vw, 560px); }
  .t-feature-copy { inset: 28px 24px 24px; }
  .t-feature-quote p { font-size: 22px; line-height: 28px; }
  .t-meta { flex-direction: column; align-items: stretch; gap: 12px; }
  .t-rule { flex: none; }
  .t-meta-who { white-space: normal; }
  .t-card, .t-grid > .t-card:nth-child(n+3) { min-height: 0; }
}

/* ---------- 8. Proof numbers ---------- */
.numbers { background: var(--surface); border-block: 1px solid var(--hair); }
.numbers-stage { display: grid; grid-template-columns: minmax(0, 376px) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4vw, 72px); padding: 104px 0 96px; }
.numbers-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.sheen { font-weight: 600; color: var(--ink); }

.feed { position: relative; overflow: hidden; min-height: clamp(260px, 27vw, 330px); border-radius: 40px; background: var(--surface); contain: layout paint; }
.feed::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(90deg, var(--surface) 0, rgba(242, 242, 243, 0) 16%, rgba(242, 242, 243, 0) 84%, var(--surface) 100%),
    linear-gradient(180deg, var(--surface) 0, rgba(242, 242, 243, 0) 20%, rgba(242, 242, 243, 0) 80%, var(--surface) 100%);
}
.feed-world { position: absolute; left: 0; top: 0; width: 820px; height: 360px; transform: translate(-150px, -30px); transition: transform 1.6s var(--ease-soft); will-change: transform; }
.feed-card {
  position: absolute; left: calc(var(--c) * 280px); top: calc(var(--r) * 104px + var(--c) * 24px);
  display: flex; align-items: center; gap: 12px; width: 256px; padding: 10px 14px 10px 10px; border-radius: 16px;
  background: var(--white); opacity: .42;
  box-shadow: 0 9px 18px -6px rgba(39, 39, 42, .08), 0 3px 4.5px -3px rgba(39, 39, 42, .16), 0 0 0 .75px rgba(39, 39, 42, .08);
  transition: opacity 1.8s ease;
}
.feed-card.is-active { opacity: 1; }
.feed-thumb { flex: none; width: 64px; height: 40px; border-radius: 6px; object-fit: cover; object-position: top center; }
.feed-text { min-width: 0; }
.feed-title { display: block; font: 500 13px/18px var(--font-sans); color: var(--ink); white-space: nowrap; }
.feed-when { display: block; font: 400 13px/18px var(--font-sans); color: var(--muted); white-space: nowrap; }

.numbers-divider { position: relative; height: 1px; background: var(--hair); }
.numbers-pill { position: absolute; left: 50%; top: -13px; margin: 0; padding: 0 12px; height: 26px; transform: translateX(-50%); border-radius: 32px; background: var(--surface); border: 1px solid #E2E2E3; font: 500 13px/24px var(--font-sans); color: var(--ink-2); white-space: nowrap; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-block: 0; padding: 52px 0 56px; }
.stat { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.stat dt { font: 400 13px/20px var(--font-sans); color: var(--ink-2); }
.stat dd { margin: 0; }
.stat-link { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.stat-link:hover .stat-unit { text-decoration: underline; }
.stat-value { --lh: 36px; font: 500 30px/36px var(--font-display); letter-spacing: -.3px; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); white-space: nowrap; }
.stat-unit { font: 400 13px/20px var(--font-sans); color: var(--ink-2); }
/* Odometer: the digit is a real text node; the reel is generated content laid over it and removed when it lands */
.dg { position: relative; display: inline-block; height: var(--lh); overflow: hidden; vertical-align: top; }
.reel { position: absolute; left: -1px; right: -1px; top: 0; background: var(--surface); font-style: normal; text-align: center; transform: translateY(0); transition: transform .8s cubic-bezier(1, 0, .35, .95); }
.reel::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; display: block; white-space: pre; line-height: var(--lh); }
.is-rolling .reel { transform: translateY(calc(var(--lh) * -1 * (10 + var(--to)))); }
@media (max-width: 1100px) { .numbers-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 1080px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; }
  .stat { padding: 40px 24px; }
  .stat:nth-child(odd) { box-shadow: 1px 0 0 var(--hair); }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
}
@media (max-width: 900px) { .numbers-stage { grid-template-columns: 1fr; padding: 96px 0 72px; } .feed { min-height: 280px; } }
@media (max-width: 640px) {
  .numbers-stage { padding: 76px 0 56px; }
  .feed { min-height: 236px; border-radius: 28px; }
  .stats { grid-template-columns: 1fr; }
  .stat { padding: 28px 16px; box-shadow: none !important; border-bottom: 1px solid var(--hair); }
  .stat:last-child { border-bottom: 0; }
  .stat-value { --lh: 32px; font-size: 24px; line-height: 32px; }
}

/* ---------- 9. Guarantee: CTA-card shell + feature cards ---------- */
.g-card { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 351px; border-radius: 24px; background: var(--green-deep); box-shadow: 0 0 0 1px #10805F; color: #fff; }
.g-frame { position: absolute; inset: 8px; z-index: -1; overflow: hidden; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); pointer-events: none; }
.g-dial { position: absolute; right: -60px; top: 50%; width: 400px; height: 400px; max-width: none; transform: translateY(-50%); color: #fff; opacity: .2; }
.g-ticks line { stroke-width: 2; }
.g-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 680px; padding: 80px 32px 80px 79px; }
.g-title { margin: 0; font: 400 38px/44px var(--font-display); letter-spacing: -.02em; color: #fff; }
.g-title .h2-line:first-child { font-weight: 500; }
.g-tint { color: #C9F4E4; }
.g-body { margin: 0; max-width: 560px; font: 400 16px/24px var(--font-sans); color: #F0FCF7; }
.g-condition { margin: 0; max-width: 560px; font: 400 16px/26px var(--font-sans); color: #DDF7EC; }
.g-card :focus-visible { outline-color: #fff; }
.g-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.g-col { padding: 24px; border-radius: 16px; background: var(--white); border: 1px solid var(--card-line); }
.g-col-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 16px/22px var(--font-sans); color: var(--ink); }
.g-badge { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--green-deep); }
.g-badge-move { background: #B9BAC0; }
.mark-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mark-list li { position: relative; padding-left: 28px; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.mark-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--green-tint) var(--check) center / 12px no-repeat; }
.mark-list-move li::before { background: var(--surface) var(--move) center / 12px no-repeat; }
.mark-list-no li::before { background: var(--surface) var(--cross) center / 12px no-repeat; }
@media (max-width: 1100px) { .g-copy { padding-left: 48px; } }
@media (max-width: 900px) { .g-copy { padding: 48px 24px 48px 36px; } .g-title { font-size: 30px; line-height: 36px; } .g-dial { width: 300px; height: 300px; right: -110px; } }
@media (max-width: 640px) {
  .g-copy { padding: 40px 24px 36px; }
  .g-dial { top: auto; bottom: -150px; transform: none; }
  .g-columns { grid-template-columns: 1fr; }
}

/* ---------- 10. Price: enquiry-card shell ---------- */
.price-section { background: var(--white); border-top: 1px solid var(--hair); }
.price-layout { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 520px); justify-content: space-between; gap: 48px 64px; align-items: start; }
.price-copy { display: flex; flex-direction: column; gap: 24px; }
.price-copy .h2 { margin-bottom: 16px; }
.steps { display: grid; margin: 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 14px 0; border-bottom: .5px solid var(--line); }
.step:first-child { border-top: .5px solid var(--line); }
.step-n { display: grid; place-items: center; width: 28px; height: 22px; margin-top: 1px; border-radius: 32px; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(39, 39, 42, .1); font: 500 13px/1 var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.step p { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.step strong { font-weight: 600; color: var(--ink); }
.pay-methods { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.pay-guarantee { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--muted); }

.enquiry-card { position: relative; isolation: isolate; border-radius: 20px; background: var(--bg); box-shadow: 0 9px 18px -6px rgba(39, 39, 42, .06), 0 3px 4.5px -3px rgba(39, 39, 42, .12), 0 0 0 .75px rgba(39, 39, 42, .1); }
.card-glow { position: absolute; inset: 24px -12px -16px; z-index: -1; border-radius: 28px; background: linear-gradient(120deg, #E3F7B5, #9BF0D2 50%, #BDF2DE); opacity: .28; filter: blur(28px); pointer-events: none; }
.card-section { display: flex; flex-direction: column; gap: 14px; padding: 36px 40px; }
.card-section + .card-section { border-top: 1px solid rgba(39, 39, 42, .06); }
.card-legend { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 13px/20px var(--font-sans); color: var(--ink-2); }
.legend-pill { width: 4px; height: 14px; border-radius: 4px; background: #C4C4CA; }
.price-rows { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 8px 48px; align-items: end; }
.price-row { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.price-label { font: 400 13px/20px var(--font-sans); color: var(--muted); }
.price-fig { font: 500 38px/44px var(--font-display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.price-fig-regular { font-size: 30px; line-height: 36px; color: var(--ink-3); }
.price-detail { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.price-detail strong { font-weight: 600; color: var(--ink); }
.card-note { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.tranche { margin: 0; font: 500 16px/26px var(--font-sans); color: var(--ink); }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 20px 40px 32px; border-top: 1px solid rgba(39, 39, 42, .06); }
@media (max-width: 980px) { .price-layout { grid-template-columns: 1fr; } .price-side { max-width: 560px; } }
@media (max-width: 640px) {
  .card-section { padding: 24px; }
  .card-foot { padding: 20px 24px 24px; }
  .card-foot .btn { width: 100%; }
  .price-rows { gap: 8px 32px; }
}

/* ---------- 11. Founder: media split ---------- */
.media-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.founder-photo { margin: 0; }
.photo-ph { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; aspect-ratio: 4 / 5; max-width: 468px; padding: 24px; border-radius: 16px; background: #E7ECEA; text-align: center; }
.photo-initials { font: 500 48px/52px var(--font-display); letter-spacing: -.02em; color: var(--green-deep); }
.founder-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.founder-body { margin: 0; max-width: 520px; font: 400 16px/24px var(--font-sans); color: var(--ink-2); }
.facts { display: grid; width: 100%; margin: 0; }
.fact { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 12px 0; border-bottom: .5px solid var(--line); }
.fact:first-child { border-top: .5px solid var(--line); }
.fact dt { font: 500 13px/22px var(--font-sans); color: var(--muted); }
.fact dd { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--ink); }
.fact a { color: var(--green-deep); }
@media (max-width: 900px) { .media-split { grid-template-columns: 1fr; gap: 40px; } .photo-ph { max-width: 420px; aspect-ratio: 5 / 4; } }
@media (max-width: 480px) { .fact { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- 12. Fit ---------- */
.fit { background: var(--surface); border-block: 1px solid var(--hair); }
.fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fit-col { padding: 28px; border-radius: 16px; background: var(--white); border: 1px solid var(--card-line); }
.fit-no { background: var(--bg); }
.fit-title { margin: 0 0 18px; font: 500 16px/22px var(--font-sans); color: var(--ink); }
.fit .mark-list li { font-size: 16px; line-height: 24px; padding-left: 30px; }
.fit .mark-list li::before { top: 4px; }
@media (max-width: 760px) { .fit-grid { grid-template-columns: 1fr; } }

/* ---------- 13. FAQ ---------- */
.faq { padding-block: 120px; }
.faq-layout { display: grid; grid-template-columns: minmax(0, 384px) minmax(0, 480px); justify-content: space-between; align-items: start; gap: 80px; }
.faq-intro { position: sticky; top: 96px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; list-style: none; cursor: pointer; font: 500 16px/24px var(--font-sans); color: var(--ink); border-radius: 4px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .chev { flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s var(--ease-out); }
.faq-item[open] .chev { transform: rotate(180deg); }
.faq-item p { margin: 0; padding: 0 0 20px; max-width: 60ch; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.faq-item p a { color: var(--green-deep); }
.guide-links { display: grid; gap: 10px; margin-top: 32px; }
.guide-label { margin: 0; font: 500 13px/20px var(--font-sans); color: var(--muted); }
.guide-links ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.guide-links a { font: 500 16px/24px var(--font-sans); color: var(--green-deep); }
@media (max-width: 980px) {
  .faq { padding-block: 96px; }
  .faq-layout { grid-template-columns: 1fr; gap: 32px; }
  .faq-intro { position: static; max-width: 560px; }
  .faq-main { max-width: 720px; }
}

/* ---------- 14. #book: contact layout + cal embed ---------- */
.book { padding-block: 112px 144px; border-top: 1px solid var(--hair); background: var(--white); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 384px) minmax(0, 544px); justify-content: space-between; column-gap: 80px; width: min(100%, 1008px); margin-inline: auto; align-items: start; }
.book-copy { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 24px; }
.book-copy .h2:focus { outline: none; }
.highlights { display: grid; gap: 20px; margin: -8px 0 0; padding: 0; list-style: none; }
.highlights li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; }
.highlights p { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.highlights strong { font-weight: 600; color: var(--ink); }
.check { width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--green-tint) var(--check) center / 14px no-repeat; }
.talk-to, .leave-with { display: grid; gap: 10px; }
.leave-with p { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.person { display: flex; align-items: center; gap: 14px; }
.person-avatar { flex: none; display: grid; place-items: center; width: 48px; height: 56px; border-radius: 4px; background: #DDF2EA; color: var(--green-deep); font: 600 16px/1 var(--font-display); }
.person-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; font: 400 13px/20px var(--font-sans); color: var(--muted); }
.person-text strong { font: 500 16px/24px var(--font-sans); color: var(--ink); }
.status-line { margin: 0; padding-top: 16px; border-top: .5px solid var(--line); font: 400 13px/22px var(--font-sans); color: var(--ink-2); }
.cal-card .cal-head { padding-bottom: 12px; }
.cal-embed { position: relative; min-height: 600px; margin: 0 8px 8px; border-radius: 14px; background: var(--white); overflow: hidden; }
.cal-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px; text-align: center; }
.cal-status { margin: 0; max-width: 320px; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.cal-status:empty { display: none; }
.cal-embed[data-state="loading"] .cal-status::before { content: ""; display: block; width: 24px; height: 24px; margin: 0 auto 12px; border-radius: 50%; border: 2px solid var(--green-tint); border-top-color: var(--green-deep); animation: spin .8s linear infinite; }
.cal-embed[data-state="ready"] { min-height: 0; background: transparent; box-shadow: none; }
.cal-embed[data-state="ready"] .cal-fallback { display: none; }
.cal-embed[data-state="error"] .cal-status { color: #8A2A1F; }
.cal-embed iframe { display: block; width: 100%; border: 0; }
.book-notes { display: grid; gap: 4px; margin-top: 20px; padding-inline: 8px; }
.book-notes p { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--ink-2); }
.book-notes a { color: var(--green-deep); }
@media (max-width: 1040px) {
  .contact-layout { display: flex; flex-direction: column; gap: 32px; max-width: 544px; }
  .book-copy { display: contents; }
  .book-copy > .h2 { order: 1; }
  .book-copy > .lede { order: 2; margin-top: -12px; }
  .book-side { order: 3; width: 100%; }
  .book-copy > :nth-child(n+3) { order: 4; }
}
@media (max-width: 640px) { .book { padding-block: 88px 104px; } .cal-embed { min-height: 520px; margin: 0 4px 4px; } }

/* ---------- 15. Footer ---------- */
.footer { padding-block: 72px 40px; border-top: 1px solid var(--hair); }
.footer-anchor { margin: 0 0 56px; max-width: 640px; font: 400 16px/24px var(--font-sans); color: var(--ink); }
.footer-top { display: flex; justify-content: space-between; gap: 64px; }
.footer-brand { flex: 0 0 240px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-brand img { width: 66px; height: 36px; }
.footer-tagline { margin: 8px 0 0; font: 500 16px/24px var(--font-sans); color: var(--ink-2); }
.footer-founder { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--muted); }
.footer-founder a { color: var(--ink-2); }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; width: 752px; max-width: 100%; }
.footer-col-title { margin: 0 0 20px; font: 500 13px/18px var(--font-sans); color: var(--muted); }
.footer-col ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.footer-col a { font: 400 13px/20px var(--font-sans); color: var(--ink-2); text-decoration: none; transition: color .2s ease; }
.footer-col a:hover { color: var(--ink); text-decoration: underline; }
.footer-bottom { margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--hair); }
.footer-bottom p { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--muted); }
.footer-bottom a { color: var(--ink-2); }
@media (max-width: 1024px) { .footer-top { flex-direction: column; gap: 48px; } .footer-brand { flex: none; } }
@media (max-width: 768px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; } }
@media (max-width: 640px) { .footer-cols { grid-template-columns: 1fr; } .footer { padding-bottom: 64px; } }

/* ==========================================================================
   /booked
   ========================================================================== */
.booked-page .site-header { color: var(--ink); background: var(--bg); border-bottom-color: rgba(32, 36, 42, .08); }
.booked-page .logo-light { opacity: 0; }
.booked-page .logo-dark { opacity: 1; }

/* Pattern page header (296px, art + dashed bottom rule) */
.pattern-header { position: relative; overflow: hidden; height: 296px; background: var(--bg); background-image: linear-gradient(90deg, var(--line) 3px, transparent 3px); background-size: 6px 1px; background-repeat: repeat-x; background-position: left bottom; }
.pattern-art { position: absolute; left: 50%; bottom: 0; width: min(1008px, 100% - 2 * var(--frame-x) - 64px); height: auto; transform: translateX(-50%); color: var(--ink-3); pointer-events: none; }
.pattern-art .tick { stroke: currentColor; stroke-opacity: .18; }
.pattern-art .tick-major { stroke-opacity: .32; }
.pattern-art .tick-mark { stroke: var(--green-deep); stroke-opacity: .7; }
.pattern-art .tick-midnight { stroke: var(--green-deep); stroke-opacity: 1; stroke-width: 2; }
.pattern-art text { font: 500 15px/1 var(--font-sans); fill: var(--muted); }
@media (max-width: 1100px) { .pattern-art text { display: none; } }
.pattern-title-wrap { position: relative; height: 100%; display: flex; align-items: center; }
.pattern-title { margin: 0; font: 500 48px/52px var(--font-display); letter-spacing: -1.5px; color: var(--ink); }
@media (max-width: 900px) { .pattern-title { font-size: 38px; line-height: 44px; letter-spacing: -1px; } }
.pattern-title .h2-line + .h2-line { font-weight: 400; color: var(--green-deep); }
@media (max-width: 900px) { .pattern-header { height: 248px; } .pattern-title-wrap { align-items: flex-start; padding-top: 48px; } }
.pattern-lede { display: none; margin: 8px 0 0; font: 500 16px/24px var(--font-sans); color: var(--green-deep); }
@media (max-width: 520px) {
  .pattern-header { height: 240px; }
  .pattern-title-wrap { padding-top: 48px; }
  .pattern-title { font-size: 38px; line-height: 44px; letter-spacing: -1px; }
  .pattern-title .beat-2 { display: none; }
  .pattern-lede { display: block; }
  .pattern-art text { display: none; }
}

.booked-main { padding-block: 64px 120px; }
.booked-left { display: flex; flex-direction: column; gap: 32px; }
.booked-right { display: flex; flex-direction: column; gap: 24px; }
.booking-card { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 20px; background: var(--white); box-shadow: 0 0 0 1px rgba(39, 39, 42, .06); }
.booking-when { margin: 0; font: 500 24px/32px var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.booking-meta { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.booking-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px; border-top: .5px solid var(--line); }
.booking-actions .label { margin-right: 4px; font: 500 13px/20px var(--font-sans); color: var(--muted); }
.booking-actions .btn { height: 32px; padding: 0 12px; font-size: 13px; }
.booking-actions .reschedule { margin-left: auto; }
.named-face { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.named-face .person-avatar { width: 56px; height: 64px; }
.named-face p { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.wa-block { display: grid; justify-items: start; gap: 10px; }
.btn-wa { height: 44px; padding: 0 20px; font-size: 14px; }
.btn-wa svg { margin-right: 8px; }
.micro { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--muted); }
.agenda { display: grid; margin: 0; padding: 0; list-style: none; }
.agenda li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0; border-bottom: .5px solid var(--line); font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.agenda li:first-child { border-top: .5px solid var(--line); }
.agenda b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pull { display: grid; gap: 12px; padding: 24px; border-radius: 16px; background: var(--green-tint); }
.pull-q { margin: 0; font: 500 16px/24px var(--font-sans); color: var(--green-ink); }
.pull-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.pull-btn { height: 40px; padding: 0 16px; border-radius: 6px; border: 1px solid rgba(15, 122, 95, .35); background: var(--white); color: var(--green-ink); font: 500 14px/20px var(--font-sans); cursor: pointer; transition: background-color .16s ease, color .16s ease, transform .16s var(--ease-out); }
.pull-btn:active { transform: scale(.97); }
.pull-btn[aria-pressed="true"] { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.pull .micro { color: var(--green-ink); }
.pull-done { margin: 0; font: 500 13px/20px var(--font-sans); color: var(--green-ink); }

.video-figure { margin: 0; }
.video-frame { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0E1F19; color: #fff; }
.video-frame .ph { position: absolute; left: 16px; bottom: 16px; }
.play-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); }
.video-frame .initials { position: absolute; right: 20px; top: 16px; font: 500 24px/32px var(--font-display); color: rgba(189, 242, 222, .5); }
.video-figure figcaption { margin-top: 12px; font: 400 16px/26px var(--font-sans); color: var(--ink-2); }
.prep { display: grid; gap: 14px; padding: 24px; border-radius: 16px; background: var(--white); border: 1px solid var(--card-line); }
.prep-title { margin: 0; font: 500 16px/22px var(--font-sans); color: var(--ink); }
.prep-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.prep-list label { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; padding: 8px 0; font: 400 16px/26px var(--font-sans); color: var(--ink); cursor: pointer; }
.prep-list input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green-deep); cursor: pointer; }
.prep-list input:checked + span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(96, 97, 106, .5); }
.booked-footer { padding-block: 32px 48px; border-top: 1px solid var(--hair); }
.booked-footer p { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--muted); }
.booked-footer a { color: var(--ink-2); }
@media (max-width: 1040px) {
  .booked-main .contact-layout { display: flex; flex-direction: column; gap: 40px; width: 100%; max-width: none; }
  .booking-actions .reschedule { margin-left: 0; }
}

/* ---------- Reduced motion: static, nothing travels ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .ask-orbit { display: none; }
  .companies-track { transform: none !important; }
}
.pattern-title-wrap > .col10 { width: 100%; }
.ph-line { margin: 0; }