:root{
  --paper:#EBEAE8;
  --mint:#59C1A6;
  --green:#1DB58D;
  --ink:#19362E;
  --ink-76:rgba(25,54,46,.76);
  --ink-52:rgba(25,54,46,.52);
  --ink-20:rgba(25,54,46,.20);
  --ink-11:rgba(25,54,46,.11);
  --paper-78:rgba(235,234,232,.78);
  --paper-55:rgba(235,234,232,.55);
  --max:1260px;
  --gutter:clamp(1.25rem,4.8vw,4.5rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Figtree",system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,a{-webkit-tap-highlight-color:transparent}
::selection{background:var(--mint);color:var(--ink)}
.container{width:min(100%,calc(var(--max) + var(--gutter)*2));padding-inline:var(--gutter);margin-inline:auto}
.centered{text-align:center}
em{font-family:"Crimson Text",Georgia,serif;font-style:italic;font-weight:400;color:var(--mint)}

/* The supplied BuyerState wordmark is used as-is on a dark field so both logo colours stay intact. */
.floating-logo{position:fixed;top:1.2rem;left:var(--gutter);z-index:220;display:flex;align-items:center;padding:.48rem .62rem;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:var(--ink);box-shadow:0 10px 28px -18px rgba(25,54,46,.55)}
.floating-logo img{width:118px;height:auto}
.footer-logo{display:inline-flex;align-items:center;width:max-content;padding:.42rem .55rem;border-radius:9px;background:var(--ink)}
.footer-logo img{width:132px;height:auto}

/* Familiar text navigation with more room around each target. */
.dock-wrap{position:fixed;z-index:240;left:50%;bottom:18px;transform:translateX(-50%);pointer-events:none}
.dock{display:flex;align-items:center;gap:9px;padding:8px;border:1px solid rgba(255,255,255,.66);border-radius:999px;background:rgba(235,234,232,.80);box-shadow:0 16px 44px -22px rgba(25,54,46,.52),inset 0 0 0 1px rgba(25,54,46,.045);backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);pointer-events:auto}
.dock-item{position:relative;min-height:44px;display:flex;align-items:center;justify-content:center;flex:none;padding:0 19px;border:1px solid rgba(25,54,46,.08);border-radius:999px;background:rgba(25,54,46,.045);color:var(--ink);font-size:.76rem;font-weight:650;letter-spacing:-.008em;white-space:nowrap;will-change:transform,background-color,color}
.dock-item:hover,.dock-item:focus-visible{background:rgba(25,54,46,.10);outline:none}
.dock-item.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.dock-item-accent{background:rgba(29,181,141,.16);border-color:rgba(29,181,141,.22)}
.dock-item-accent.is-active{background:var(--green);border-color:var(--green);color:var(--ink)}

/* Buttons. The magnetic zone never moves. */
.mag-zone{display:inline-grid;place-items:center;position:relative;padding:42px 50px;margin:-42px -50px;isolation:isolate}
.mag-zone-large{padding:58px 64px;margin:-58px -64px}
.button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--ink);padding:.88rem 1.42rem;font-size:.9rem;font-weight:600;line-height:1;letter-spacing:-.01em;will-change:transform;transform-origin:center;overflow:hidden}
.button-content{display:inline-flex;align-items:center;gap:.7rem;will-change:transform;pointer-events:none}
.button-dark{background:var(--ink);color:var(--paper)}
.button-dark:hover{color:var(--paper)}
.button-large{padding:1.08rem 1.75rem;font-size:.98rem}
.button-content>span{font-size:1.05em}

/* Text is the hero visual. No product mock-up competes with the proposition. */
.hero{min-height:100svh;display:flex;align-items:center;padding:8.5rem 0 6.5rem;position:relative;background:var(--paper)}
.hero-stage{width:100%}
.hero-copy{position:relative;z-index:2;width:100%}
.tagline{font-size:clamp(5.4rem,9.9vw,9.8rem);line-height:.79;letter-spacing:-.073em;margin:0;font-weight:600;max-width:none;width:100%}
.hero-line{position:relative;display:block;width:max-content;max-width:100%;overflow:visible}
.hero-line-mask{display:block;overflow:clip;padding:.11em .05em .13em 0;margin-bottom:-.13em}
.hero-line-text{display:inline-block;position:relative;white-space:nowrap;will-change:transform}
.hero-word{display:inline-block;position:relative;transform-style:preserve-3d;will-change:transform}
.hero-word-accent{color:var(--mint)}
.hero-line-why{margin-top:.025em}
.hero-line-when{margin-top:.025em}
.hero-word-when{padding-right:.02em}
.brand-eyelash{position:absolute;width:.42em;max-width:none;height:auto;right:-.01em;top:.015em;transform:translate(42%,-22%);pointer-events:none}
.hero-support{margin-top:clamp(2.5rem,4vw,4rem);max-width:48ch}
.hero-lead{margin:0;color:var(--ink);font-size:clamp(1.08rem,1.25vw,1.25rem);line-height:1.58}
.hero-actions{margin-top:1.8rem;display:flex;align-items:center;gap:1.15rem;flex-wrap:wrap}
.hero-insights-link{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .1rem;color:var(--ink);font-size:.92rem;font-weight:650;letter-spacing:-.01em;border-bottom:1px solid rgba(25,54,46,.34);transition:border-color .2s ease}
.hero-insights-link>span{display:inline-block;transition:transform .2s ease}
.hero-insights-link:hover,.hero-insights-link:focus-visible{border-color:var(--ink);outline:none}
.hero-insights-link:hover>span,.hero-insights-link:focus-visible>span{transform:translate(2px,-2px)}

.scene{position:relative;padding:clamp(7rem,11vw,11rem) 0}
.scene>*{position:relative;z-index:2}
.scene-dark{background:var(--ink);color:var(--paper)}
.section-light{background:var(--paper);color:var(--ink)}
.scene-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:clamp(3rem,8vw,8rem);align-items:end}
.display-heading{font-size:clamp(2.65rem,5.25vw,5rem);line-height:1.01;letter-spacing:-.047em;margin:0;font-weight:600}
.scene-dark .display-heading{color:var(--paper)}
.scene-copy-small{max-width:36rem;justify-self:end}
.scene-copy-small p{margin:0;color:var(--paper-78);font-size:1.04rem;line-height:1.65}
.scene-copy-small p+p{margin-top:1rem;color:var(--paper-55)}

/* Scramble statement. Static layout, animated text only. */
.scramble-statement{margin-top:clamp(4rem,7vw,6rem);min-height:clamp(320px,42vw,520px);display:grid;place-items:center;padding:clamp(4rem,7vw,7rem) var(--gutter);border-top:1px solid rgba(235,234,232,.12);overflow:hidden}
.scramble-text{margin:0;max-width:17ch;text-align:center;color:var(--paper);font-size:clamp(2.65rem,4.8vw,5rem);font-weight:600;letter-spacing:-.055em;line-height:.98;text-wrap:balance;will-change:contents,opacity,transform}

.intelligence{padding-bottom:0;z-index:1;isolation:isolate}
.intelligence-intro{max-width:1040px}
.intelligence-intro .display-heading{max-width:14ch;margin-inline:auto}
.intro-body{max-width:54ch;margin:1.55rem auto 0;color:var(--ink-76);line-height:1.65;font-size:1.08rem}
.stack-shell{height:250vh;position:relative;margin-top:1.5rem}
.stack-stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.stack-card{position:absolute;width:min(820px,90vw);min-height:430px;padding:clamp(2.9rem,5.2vw,4.5rem);border-radius:24px;border:1px solid var(--ink-11);background:var(--paper);box-shadow:0 52px 128px -62px rgba(25,54,46,.52);transform-origin:center top;will-change:transform,opacity}
.card-index{display:block;font-family:"Crimson Text",Georgia,serif;font-style:italic;font-size:1.4rem;color:var(--green);margin-bottom:2.85rem}
.stack-card h3{font-size:clamp(2.55rem,4.8vw,3.9rem);line-height:1;letter-spacing:-.045em;margin:0 0 1.35rem}
.stack-card p{max-width:51ch;margin:0;color:var(--ink-76);font-size:1.18rem;line-height:1.68}

/* Main horizontal chapter. Vertical wheel/trackpad movement carries the page sideways. */
.horizontal-process{position:relative;z-index:5;isolation:isolate;background:var(--ink);color:var(--paper);overflow:clip}
.horizontal-process-pin{height:100svh;display:flex;align-items:stretch;overflow:hidden}
.horizontal-process-track{height:100%;display:flex;width:max-content;will-change:transform}
.process-panel{width:64vw;min-width:760px;height:100%;display:flex;align-items:center}
.process-panel-intro{width:78vw;min-width:900px}
.process-panel-final{width:72vw}
.process-panel-content{width:min(760px,76%);margin-inline:auto;padding:4rem 0}
.process-panel-heading{width:min(820px,72%)}
.how-heading{max-width:12ch;margin:0}
.process-panel-heading>p{max-width:40ch;margin:1.5rem 0 0;color:var(--paper-55);font-size:1.05rem;line-height:1.6}
.process-index{display:block;font-family:"Crimson Text",Georgia,serif;font-style:italic;color:var(--mint);font-size:1.55rem;margin-bottom:3.4rem}
.process-panel h3{font-size:clamp(2.6rem,4.6vw,4.7rem);line-height:.98;letter-spacing:-.045em;margin:0;max-width:10.5ch}
.process-panel p{max-width:35ch;margin:1.4rem 0 0;color:var(--paper-55);font-size:1.05rem;line-height:1.62}
.signal-vs-noise{z-index:4}

.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);gap:clamp(4rem,9vw,9rem);align-items:center}
.support-copy{max-width:44ch;color:var(--ink-76);line-height:1.65;font-size:1.05rem;margin:1.5rem 0 0}
.question-list{list-style:none;padding:0;margin:2rem 0 0;max-width:38rem}
.question-list li{font-size:1rem;font-weight:500;padding:.9rem 0;border-bottom:1px solid var(--ink-11);display:flex;gap:.8rem}
.question-list li::before{content:"";width:7px;height:7px;margin-top:.5em;border-radius:50%;background:var(--green);flex:none}
.noise-stage{height:460px;position:relative;display:grid;place-items:center;overflow:hidden;border-radius:20px;background:var(--ink)}
.noise-copy{position:absolute;inset:-10%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;line-height:2.15;letter-spacing:.02em;color:rgba(235,234,232,.23);padding:2.2rem;filter:blur(.35px);transform:rotate(-4deg);will-change:transform}
.surface-card{position:relative;z-index:2;width:76%;padding:2.2rem;border-radius:16px;background:var(--paper);box-shadow:0 35px 75px -32px rgba(0,0,0,.5);will-change:transform}
.surface-card>span{display:block;color:var(--green);font-size:.72rem;font-weight:700;letter-spacing:.08em;margin-bottom:1.35rem}
.surface-card h3{font-size:1.75rem;line-height:1.05;letter-spacing:-.03em;margin:0 0 .85rem}
.surface-card p{margin:0;color:var(--ink-76);font-size:.95rem;line-height:1.55}

.audience{overflow:hidden}
.audience-heading{max-width:980px}
.audience-heading h2{max-width:15ch;margin-inline:auto}

.statement{min-height:82svh;display:grid;align-items:center}
.statement-inner{max-width:1000px}
.statement h2{font-family:"Crimson Text",Georgia,serif;font-style:italic;font-weight:400;color:var(--mint);font-size:clamp(3rem,7.3vw,7rem);line-height:1.01;letter-spacing:-.045em;margin:0;max-width:12ch;padding-bottom:.10em;overflow:visible}
.statement p{margin:2.1rem 0 0;max-width:45ch;color:var(--paper-78);font-size:1.06rem;line-height:1.65}

/* Looped-section-transition inspired sequence. Only normal vertical scenes use it. */
.transition-sequence{position:relative;background:var(--paper)}
.transition-stage{position:relative;height:100svh;overflow:hidden;background:var(--paper)}
.transition-panel{position:absolute;inset:0;width:100%;height:100svh;min-height:100svh;display:grid;align-items:center;padding:clamp(4.8rem,7vw,6.8rem) 0;overflow:hidden;transform-origin:center center;will-change:transform,opacity}
.transition-panel.audience{align-items:center}
.transition-panel.statement{align-items:center}
.transition-panel .support-copy{margin-top:2rem}
.transition-panel .two-col{width:min(100%,calc(var(--max) + var(--gutter)*2));padding-inline:var(--gutter);margin-inline:auto}

.cta{padding:clamp(8rem,13vw,13rem) 0}
.cta-inner{display:flex;flex-direction:column;align-items:center}
.cta h2{max-width:19ch}
.cta-action{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-top:3.5rem;padding:2.6rem 4rem}
.cta-circle{position:absolute;left:50%;top:50%;width:238px;height:238px;max-width:none;transform:translate(-50%,-50%) rotate(-4deg);opacity:.72;pointer-events:none}

.site-footer{border-top:1px solid var(--ink-11);padding:3rem 0 7.5rem}
.footer-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem}
.footer-inner p{margin:0;font-size:.84rem;color:var(--ink-52)}
.footer-inner small{justify-self:end;color:var(--ink-52);font-size:.8rem}

/* Scribble placements */
.scribble{position:relative;display:inline-block;overflow:visible}
.scribble>img{position:absolute;pointer-events:none;max-width:none}
.scribble.oval-word>img{left:-7%;top:-36%;width:114%;height:182%;opacity:.82}
.scribble.underline-large>img{left:-2%;bottom:-.34em;width:104%;height:auto}
/* Reserve real space for the expanded underline so it can never collide with following copy. */
.scribble.underline-low{padding-bottom:.86em}
.scribble.underline-low>img{left:-1%;top:auto;bottom:.08em;width:101%;height:auto;transform:scaleY(.62);transform-origin:bottom left}

/* Line entrances stay unclipped so descenders such as g/y remain intact. */
.split-line{overflow:visible;padding-bottom:.08em;margin-bottom:-.08em}
[data-fade-up]{will-change:transform,opacity}

/* Responsive-only helpers */
.mobile-break{display:none}
.dock-label-short{display:none}
.cta-support{max-width:48ch;margin:1.35rem auto 0;color:var(--ink-76);font-size:1.04rem;line-height:1.6}

/* Cursor trail is hidden until JS has a fine pointer. */
.cursor-trail-item{position:fixed;left:0;top:0;z-index:180;width:32px;height:32px;object-fit:contain;opacity:0;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 7px 12px rgba(25,54,46,.08))}

@media(max-width:980px){
  :root{--gutter:clamp(1.3rem,4vw,2.4rem)}
  .floating-logo{top:1rem;left:var(--gutter)}
  .scene-grid,.two-col{grid-template-columns:1fr;gap:2.8rem}
  .hero{min-height:100svh;align-items:flex-start;padding-top:8rem;padding-bottom:5.5rem}
  .tagline{font-size:clamp(4rem,10.2vw,6.9rem);line-height:.81}
  .hero-support{max-width:46ch}
  .scene-copy-small{justify-self:start;max-width:46rem}
  .footer-inner{grid-template-columns:1fr auto}
  .footer-inner p{display:none}
  .scramble-statement{min-height:340px}
}


@media(max-width:768px){
  /* Phones keep motion, but structural scenes return to normal document flow. */
  .stack-shell{height:auto;margin-top:4rem;padding:0 var(--gutter) 6rem}
  .stack-stage{position:relative;height:auto;display:flex;flex-direction:column;gap:1rem;overflow:visible}
  .stack-card{position:relative;width:min(100%,720px);max-width:720px;min-height:0;padding:2.5rem;transform:none;opacity:1;margin-inline:auto}
  .card-index{margin-bottom:1.8rem}
  .stack-card h3{font-size:clamp(2.3rem,7vw,3.3rem)}
  .stack-card p{font-size:1.05rem;line-height:1.6}

  .horizontal-process{overflow:visible}
  .horizontal-process-pin{height:auto;overflow:visible}
  .horizontal-process-track{display:block;width:100%;height:auto;transform:none}
  .process-panel,.process-panel-intro,.process-panel-final{width:100%;min-width:0;min-height:auto;height:auto;border:0}
  .process-panel+.process-panel{border-top:1px solid rgba(235,234,232,.08)}
  .process-panel-content,.process-panel-heading{width:min(100%,720px);padding:5.5rem var(--gutter)}
  .process-index{margin-bottom:1.75rem}
  .process-panel h3{max-width:13ch}
  .process-panel p,.process-panel-heading>p{max-width:44ch}

  .transition-sequence{height:auto}
  .transition-stage{height:auto;overflow:visible}
  .transition-panel{position:relative;inset:auto;height:auto;min-height:auto;opacity:1;visibility:visible;transform:none;padding:6rem 0;overflow:visible}
  .transition-panel.statement{min-height:auto;padding-block:7rem}
  .transition-panel .two-col{width:min(100%,calc(var(--max) + var(--gutter)*2));padding-inline:var(--gutter);margin-inline:auto}
}
@media(max-width:640px){
  :root{--gutter:1.15rem}
  html{scroll-padding-bottom:5.5rem}
  body{padding-bottom:env(safe-area-inset-bottom)}
  .floating-logo{top:.8rem;left:1rem;padding:.38rem .48rem;border-radius:9px}
  .floating-logo img{width:98px}

  /* Deliberate mobile navigation. All six destinations stay visible. */
  .dock-wrap{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));transform:none;width:auto}
  .dock{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;width:100%;max-width:none;padding:5px;border-radius:19px;overflow:visible}
  .dock-item{min-width:0;min-height:44px;padding:0 4px;font-size:.66rem;letter-spacing:-.018em;border-radius:15px}
  .dock-label-full{display:none}
  .dock-label-short{display:inline}

  .mag-zone,.mag-zone-large{padding:0;margin:0}
  .button-large{padding:1rem 1.45rem;font-size:.92rem}

  /* Mobile hero gets intentional line breaks so the type stays big without clipping. */
  .hero{min-height:auto;padding-top:6.8rem;padding-bottom:5rem}
  .hero-stage{overflow:visible}
  .tagline{font-size:clamp(3.35rem,14.2vw,4.55rem);line-height:.82;letter-spacing:-.066em}
  .hero-line{width:100%;max-width:100%}
  .hero-line-mask,.hero-line-text{display:block;width:100%}
  .hero-line-text{white-space:normal}
  .mobile-break{display:block}
  .hero-line-why{margin-top:.10em}
  .hero-line-when{margin-top:.10em}
  .brand-eyelash{width:.40em;right:-.01em;top:.02em}
  .hero-support{margin-top:2.35rem;max-width:35ch}
  .hero-lead{font-size:1rem;line-height:1.58}
  .hero-actions{margin-top:1.45rem;gap:.9rem}
  .hero-insights-link{font-size:.88rem}

  .scene{padding:5.25rem 0}
  .display-heading{font-size:clamp(2.55rem,11.8vw,3.45rem);line-height:1.02;letter-spacing:-.045em}
  .scene-copy-small p{font-size:1rem}
  .scramble-statement{min-height:280px;margin-top:3.25rem;padding:3.5rem 1.25rem}
  .scramble-text{font-size:clamp(2.35rem,10.8vw,3.55rem);max-width:13ch}

  .intelligence{padding-bottom:0}
  .intelligence-intro .display-heading{max-width:12ch}
  .intro-body{font-size:1rem;max-width:36ch}
  .stack-shell{margin-top:3rem;padding:0 var(--gutter) 5rem}
  .stack-stage{gap:.85rem}
  .stack-card{padding:1.65rem;border-radius:18px;box-shadow:0 28px 60px -42px rgba(25,54,46,.48)}
  .card-index{font-size:1.2rem;margin-bottom:1.4rem}
  .stack-card h3{font-size:2.15rem;margin-bottom:.9rem}
  .stack-card p{font-size:.98rem;line-height:1.56}

  .process-panel-content,.process-panel-heading{padding:4.75rem var(--gutter)}
  .process-index{font-size:1.3rem;margin-bottom:1.35rem}
  .process-panel h3{font-size:clamp(2.35rem,11vw,3.25rem);max-width:12ch}
  .process-panel p,.process-panel-heading>p{font-size:1rem}
  .how-heading{margin-bottom:0}

  .transition-panel{padding:5.25rem 0}
  .transition-panel.statement{padding-block:6rem}
  .support-copy{font-size:1rem;margin-top:1.3rem}
  .question-list{margin-top:1.4rem}
  .question-list li{font-size:.95rem;padding:.82rem 0}
  .noise-stage{height:330px;border-radius:16px}
  .noise-copy{font-size:.62rem;line-height:1.95}
  .surface-card{width:88%;padding:1.45rem}
  .surface-card h3{font-size:1.55rem}
  .audience-heading h2{max-width:13ch}
  .statement h2{font-size:clamp(3.2rem,14.5vw,4.75rem);max-width:10ch}
  .statement p{margin-top:1.5rem;font-size:1rem}

  /* Keep large scribble artwork below the words and inside reserved layout space. */
  .scribble.oval-word>img{top:-37%;height:174%}
  .scribble.underline-low{display:inline-block;padding-bottom:.92em;margin-bottom:.12em}
  .scribble.underline-low>img{bottom:.14em;transform:scaleY(.47);width:100%}

  .cta{padding:6.5rem 0 7rem}
  .cta h2{max-width:14ch}
  .cta-support{font-size:.98rem;max-width:34ch;margin-top:1.1rem}
  .cta-action{margin-top:2.3rem;padding:1.8rem 1.2rem}
  .cta-circle{width:185px;height:185px}
  .site-footer{padding:2.5rem 0 calc(6.5rem + env(safe-area-inset-bottom))}
  .footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .footer-logo img{width:112px}
  .footer-inner small{font-size:.72rem}
  .cursor-trail-item{display:none}
}

@media(max-width:390px){
  .tagline{font-size:clamp(3.1rem,14vw,3.65rem)}
  .dock-item{font-size:.62rem}
  .floating-logo img{width:92px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dock-item,.horizontal-process-track,.noise-copy,.surface-card{transform:none!important}
  .cursor-trail-item{display:none!important}
}


/* Pass 19: one low-risk internal link into the Insights content layer. */
.footer-insights-link{color:inherit;text-decoration:none}
.footer-insights-link:hover,.footer-insights-link:focus-visible{text-decoration:underline;text-underline-offset:.2em}

/* Pass 25: trust signal beneath the homepage proposition. */
.hero-proof{margin:.9rem 0 0;color:var(--ink-76);font-size:.88rem;line-height:1.5;font-weight:600;letter-spacing:-.01em}
@media(max-width:640px){.hero-proof{font-size:.82rem}}