/* Rhenti marketing site — page styles.
   Values mirror the approved "Marketing Site" comp; everything that has a
   token uses the token. */

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}

/* The comp tightens the global radius scale for this page. */
:root{--radius-lg:14px;--radius-xl:18px}

html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page)}
/* Class-level display rules below would otherwise beat the UA `hidden` rule. */
[hidden]{display:none !important}

/* Page-level additions to the token set. */
:root{--success-deep:#1E7A44}
/* Text-sized rose is rose-600: rose-500 on white is 3.63:1, below AA for
   body sizes. Rose-500 remains the voice for large display accents. */
a{color:var(--rose-600)}
a:hover{color:var(--rose-700)}
img{max-width:100%}

.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Skip link: hidden until keyboard focus, then a visible pill above the header. */
.skip-link{position:fixed;top:8px;left:8px;z-index:100;background:var(--ink-900);color:#fff;font-size:14px;font-weight:600;text-decoration:none;border-radius:var(--radius-pill);padding:10px 20px;transform:translateY(-200%);transition:transform var(--dur-fast) var(--ease-out)}
.skip-link:focus-visible{transform:none;outline:none;box-shadow:var(--focus-ring)}
.skip-link:hover{color:#fff}

/* Sticky masthead is 64px; keep anchored sections clear of it. */
[id]{scroll-margin-top:88px}

.eyebrow{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--rose-600)}
.eyebrow--soft{color:var(--rose-300)}
.eyebrow--muted{color:var(--gray-500)}
/* On cream, rose-600 sits at 4.4:1; step down once more. */
.scale-band .eyebrow,.features .eyebrow{color:var(--rose-700)}

.section-title{font-size:clamp(28px,3vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0}
.section-lede{font-size:17px;line-height:1.55;color:var(--gray-700)}

/* ============================================================
   Motion primitives
   ============================================================ */
.fade-up{opacity:0;transform:translateY(16px);animation:fadeUp .6s var(--ease-out) forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--success);display:inline-block;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(46,158,91,.5)}50%{box-shadow:0 0 0 6px rgba(46,158,91,0)}}

@keyframes xPop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.x-pop{display:inline-block;animation:xPop .35s var(--ease-out)}

@keyframes chatDot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@keyframes chatBlink{50%{opacity:0}}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(11,138,71,.4)}50%{box-shadow:0 0 0 5px rgba(11,138,71,0)}}

/* Scroll-triggered: JS adds .in when the element enters the viewport. */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.pop{opacity:0;transform:scale(.85);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.pop.in{opacity:1;transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fade-up{animation-duration:.01s}
  .marquee-track{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .pop{opacity:1;transform:none;transition:none}
}

/* ============================================================
   Header
   ============================================================ */
.topbar{background:#fff;border-bottom:1px solid var(--gray-100)}
/* On mobile its links live in the dropdown menu instead. */
@media (max-width:860px){.topbar{display:none}}
.topbar__inner{display:flex;justify-content:flex-end;align-items:center;gap:28px;height:44px;font-size:13.5px;font-weight:500}
.topbar a{text-decoration:none;color:var(--ink-900)}
.topbar a:hover{color:var(--rose-600)}

.masthead{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--gray-100)}
/* Frosting needs backdrop-filter; stay solid where it's unsupported. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.masthead{background:#fff}}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;gap:48px;height:64px}
.masthead__brand{display:flex;align-items:center;gap:48px}
.masthead__logo{height:30px;display:block}
.mainnav{display:flex;gap:28px;font-size:15px;font-weight:500}
.mainnav a{text-decoration:none;color:var(--ink-900)}
.mainnav a:hover{color:var(--rose-600)}
@media (max-width:860px){.mainnav{display:none}}

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

/* Hamburger — only exists below the desktop-nav breakpoint. */
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--radius-sm);color:var(--ink-900);cursor:pointer;padding:0}
.menu-btn:hover{background:var(--gray-100)}
.menu-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.menu-btn .icon{width:24px;height:24px}
.menu-btn__close{display:none}
.menu-btn[aria-expanded="true"] .menu-btn__open{display:none}
.menu-btn[aria-expanded="true"] .menu-btn__close{display:block}
@media (max-width:860px){.menu-btn{display:inline-flex}}

/* Dropdown panel — lives inside the frosted masthead so it shares the glass. */
.mobilenav{display:flex;flex-direction:column;padding:8px var(--container-pad) 20px;border-top:1px solid var(--gray-100)}
.mobilenav a{display:block;padding:13px 4px;font-size:17px;font-weight:600;letter-spacing:-.01em;text-decoration:none;color:var(--ink-900);border-bottom:1px solid var(--gray-100)}
.mobilenav a:hover{color:var(--rose-600)}
.mobilenav a:last-child{border-bottom:none}
@media (min-width:861px){.mobilenav{display:none !important}}

/* ============================================================
   Hero
   ============================================================ */
.hero{padding-top:32px;padding-bottom:64px}
.hero__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;background:var(--ink-900);color:#fff;border-radius:var(--radius-xl);padding:16px}
/* Grid children default to min-width:auto and refuse to shrink below their
   content, so the vignette panel would overflow the ink container on mobile. */
.hero__grid > *{min-width:0}
.hero__copy{padding:56px 40px;display:flex;flex-direction:column;justify-content:center}
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr}
  .hero__copy{padding:40px 24px}
}
.hero__eyebrow{margin-bottom:24px}
.hero__title{font-size:clamp(34px,3.8vw,54px);font-weight:800;letter-spacing:-.03em;line-height:.98;margin:0}
.hero__title span{display:block}
.hero__title .accent{color:var(--rose-500)}
.hero__lede{font-size:18px;line-height:1.55;color:var(--gray-300);max-width:480px;margin:24px 0 12px}
.hero__lede strong{font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
.hero__lede strong.is-final{color:var(--rose-500)}
.hero__list{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:8px;font-size:17px;color:var(--gray-300)}
.hero__list li{display:flex;gap:10px;align-items:baseline}
.hero__list li::before{content:"\2192";color:var(--rose-500);font-weight:700}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}

.hero__panel{background:var(--sky-300);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;justify-content:center}

/* Activity vignette */
.vignette{background:#fff;border-radius:var(--radius-lg);padding:24px 28px 22px;box-shadow:var(--shadow-pop);display:flex;flex-direction:column;color:var(--ink-900)}
.vignette__head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.vignette__meta{font-size:12.5px;font-family:var(--font-mono);color:var(--gray-500)}
.live-chip{display:inline-flex;align-items:center;gap:8px;background:var(--success-soft);color:var(--success-deep);font-size:11.5px;font-weight:700;letter-spacing:.08em;border-radius:var(--radius-pill);padding:6px 16px}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;padding:18px 4px;border-bottom:1px solid var(--gray-100)}
.stat-row__label{font-size:15px;color:var(--gray-700)}
.stat-row__value{font-family:var(--font-mono);font-weight:700;font-size:26px;color:var(--ink-900);font-variant-numeric:tabular-nums}
/* Live-tick bump: retriggered per changed value each tick. */
.is-bumped{animation:statBump .35s var(--ease-out)}
@keyframes statBump{0%{transform:scale(1)}35%{transform:scale(1.06)}100%{transform:scale(1)}}
.vignette__pill b{font-weight:inherit;display:inline-block}
.stat-row__value{display:inline-block}
.vignette__foot{padding-top:16px}
.vignette__foot-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-500);margin-bottom:8px}
.vignette__pills{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;font-family:var(--font-mono)}
.vignette__pill{border-radius:var(--radius-pill);padding:5px 14px;color:var(--ink-900);white-space:nowrap;background:var(--gray-100)}
.vignette__pill--ai{background:var(--lime-400)}

/* Built-for-scale band */
.scale-band{background:var(--cream);border-radius:var(--radius-xl);padding:56px 40px;margin-top:16px;text-align:center}
.scale-band__eyebrow{margin-bottom:20px}
/* :not(.eyebrow) keeps this statement style off the label above it. */
.scale-band p:not(.eyebrow){font-size:clamp(24px,2.6vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink-900);max-width:880px;margin:0 auto}
.scale-band .accent{color:var(--rose-500)}

/* ============================================================
   Logo marquee
   ============================================================ */
/* Sections that carry .wrap on the same element must use longhand vertical
   padding — a `padding` shorthand here would zero out the container gutter. */
.marquee-section{padding-top:64px;padding-bottom:64px}
.marquee-section__label{text-align:center;margin-bottom:32px}
.marquee{overflow:hidden;position:relative}
.marquee-track{display:flex;gap:64px;align-items:center;width:max-content;animation:marquee 90s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track img{height:30px;width:auto;display:block;opacity:.75}
/* Squarish marks read smaller at a fixed cap height; give them more. */
.marquee-track img.is-tall{height:44px}
.marquee__fade{position:absolute;top:0;bottom:0;width:80px;pointer-events:none}
.marquee__fade--start{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.marquee__fade--end{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}

/* ============================================================
   Testimonials
   ============================================================ */
.testi-section{padding-bottom:96px}
.testi-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--radius-xl)}
.testi-track::-webkit-scrollbar{display:none}
.testi-slide{flex:0 0 100%;scroll-snap-align:start}
.testi-slide__inner{background:var(--ink-900);color:#fff;padding:clamp(40px,6vw,80px);height:100%}
.testi-grid{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start}
@media (max-width:860px){.testi-grid{grid-template-columns:1fr;gap:32px}}
.testi-aside{display:flex;flex-direction:column;gap:24px}
.testi-mark{font-size:clamp(80px,10vw,140px);font-weight:800;line-height:.6;color:var(--rose-500)}
.testi-person{display:flex;align-items:center;gap:16px;margin-top:auto;font-size:15px;line-height:1.4}
.testi-person__role{color:var(--gray-300)}
/* Company sits under a short hairline divider, set as a small tracked label. */
.testi-person__co{display:block;margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-300)}
.testi-person__co::before{content:"";display:block;width:28px;height:1px;background:var(--border-inverse);margin-bottom:10px}
.testi-quote{margin:0;display:flex;flex-direction:column;gap:24px}
.testi-quote p{margin:0;font-size:clamp(20px,2.2vw,28px);font-weight:500;letter-spacing:-.01em;line-height:1.4}
.testi-quote p + p{color:var(--gray-300)}

.avatar{border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--rose-100);color:var(--rose-700);font-weight:700;font-family:var(--font-body);overflow:hidden}
.avatar--lg{width:72px;height:72px;font-size:22px}
.avatar--md{width:64px;height:64px;font-size:20px}
/* Rose duotone: grayscale multiplied over the rose-100 avatar background gives
   every headshot one consistent color treatment regardless of source photo. */
.avatar img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.08) brightness(1.05);mix-blend-mode:multiply}

.carousel-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
.carousel-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink-900);background:transparent;font-size:18px;cursor:pointer;color:var(--ink-900)}
.carousel-btn:hover{background:var(--ink-900);color:#fff}
.carousel-dots{display:flex;gap:0}
/* 24px hit target holding an 8px visual dot (WCAG 2.5.8). The active state is a
   pre-sized rose pill scaling in over the dot — transform/opacity only. */
.carousel-dot{position:relative;width:24px;height:24px;border:none;background:transparent;cursor:pointer;padding:0;border-radius:var(--radius-pill)}
.carousel-dot::before{content:"";position:absolute;left:8px;top:8px;width:8px;height:8px;border-radius:var(--radius-pill);background:var(--gray-300);transition:opacity 180ms var(--ease-out)}
.carousel-dot::after{content:"";position:absolute;left:0;top:8px;width:24px;height:8px;border-radius:var(--radius-pill);background:var(--rose-500);transform:scaleX(.33);opacity:0;transition:transform 180ms var(--ease-out),opacity 180ms var(--ease-out)}
.carousel-dot[aria-current="true"]::before{opacity:0}
.carousel-dot[aria-current="true"]::after{transform:scaleX(1);opacity:1}

/* ============================================================
   Why Rhenti
   ============================================================ */
.why-section{padding-bottom:96px}
.why-section__title{font-size:clamp(32px,3.4vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0 0 40px;max-width:720px}
.why-section__eyebrow{margin-bottom:16px}
.why-rows{display:grid;gap:16px}
.why-row{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.why-row--flip .why-card{order:2}
.why-row--flip .why-text{order:1}
@media (max-width:860px){
  .why-row{grid-template-columns:1fr}
  .why-row--flip .why-card{order:0}
  .why-row--flip .why-text{order:1}
}
.why-card{border-radius:var(--radius-xl);padding:clamp(28px,4vw,56px);display:flex;align-items:center}
.why-card--rose{background:var(--rose-100)}
.why-card--lime{background:var(--lime-400)}
.why-card--sky{background:var(--sky-300)}
.why-card__inner{max-width:360px;margin:0 auto;width:100%}
.why-text{padding:28px 12px;display:flex;flex-direction:column;justify-content:center}
.why-text__n{font-family:var(--font-mono);font-size:14px;color:var(--rose-600);font-weight:600}
.why-text h3{font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:10px 0 0}
.why-text__body{font-size:16px;line-height:1.55;color:var(--gray-700);margin:12px 0 0}
.why-text__bonus{font-size:14.5px;margin:12px 0 0}

/* Vignette: marketing checklist */
.mini{background:#fff;border-radius:12px;padding:18px;box-shadow:var(--shadow-pop);font-size:13.5px;color:var(--ink-900)}
.mini__title{font-weight:700;margin-bottom:10px}
.check-row{display:flex;gap:10px;align-items:center;padding:7px 0}
.check-box{width:18px;height:18px;border-radius:6px;background:#fff;border:1.5px solid var(--gray-300);color:#fff;font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex:none;transition:background 220ms var(--ease-out),border-color 220ms var(--ease-out)}
.check-row.is-done .check-box{background:var(--rose-500);border-color:var(--rose-500)}
.check-label{flex:1;color:var(--ink-900);transition:color 220ms var(--ease-out)}
.check-row.is-done .check-label{color:var(--gray-500)}
.check-time{color:var(--gray-500);font-size:12px}
.check-progress{display:flex;align-items:center;gap:10px;margin-top:10px}
.check-progress__track{flex:1;height:8px;border-radius:var(--radius-pill);background:var(--gray-100);overflow:hidden}
.check-progress__fill{width:100%;height:100%;border-radius:var(--radius-pill);background:var(--success);transform:scaleX(0);transform-origin:left;transition:transform 450ms var(--ease-out)}
.check-progress__done{font-size:12px;font-weight:700;color:var(--success-deep);opacity:0;transition:opacity 300ms var(--ease-out);white-space:nowrap}
.check-progress__done.is-on{opacity:1}
.sync-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--gray-200);border-radius:var(--radius-pill);padding:5px 12px;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-900);opacity:.45;transition:opacity 300ms var(--ease-out);margin-top:12px}
.sync-chip.is-on{opacity:1}
.sync-chip__dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex:none;animation:livePulse 1.6s ease-in-out infinite}

/* Vignette: AI chat */
.mini--chat{position:relative}
.chat__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.chat__avatar{width:32px;height:32px;border-radius:50%;background:var(--rose-100);color:var(--rose-700);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:none}
.chat__who{line-height:1.25}
.chat__meta{color:var(--gray-500);font-size:12px}
.chat__badge{margin-left:auto}
.chat__thread{display:flex;flex-direction:column;gap:8px;min-height:400px;justify-content:flex-start}
.bubble{border-radius:12px 12px 12px 2px;padding:8px 12px;align-self:flex-start;text-align:left;max-width:85%;background:var(--gray-100);animation:fadeUp .25s var(--ease-out) both}
.bubble--ai{background:var(--rose-100);border-radius:12px 12px 2px 12px;align-self:flex-end;text-align:right}
.bubble__dots{display:inline-flex;gap:4px;padding:3px 2px}
.bubble__dots i{width:6px;height:6px;border-radius:50%;background:var(--gray-500);animation:chatDot 1s ease-in-out infinite}
.bubble__dots i:nth-child(2){animation-delay:.15s}
.bubble__dots i:nth-child(3){animation-delay:.3s}
.caret{display:inline-block;width:2px;height:1em;background:var(--ink-900);vertical-align:text-bottom;margin-left:1px;animation:chatBlink .8s step-end infinite}

.showing-card{border:1px solid var(--gray-200);border-radius:12px;overflow:hidden;background:#fff;animation:fadeUp .35s var(--ease-out) both}
.showing-card__head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--gray-100);border-bottom:1px solid var(--gray-200)}
.showing-card__icon{width:26px;height:26px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.showing-card__title{font-size:11px;letter-spacing:.06em}
.showing-card__state{margin-left:auto;font-size:11px;font-weight:700;color:#0B8A47;background:#D7F0E2;border-radius:var(--radius-pill);padding:3px 10px}
.showing-card__body{padding:12px 12px 14px}
.showing-card__when{display:flex;align-items:baseline;gap:8px}
.showing-card__when span{color:var(--gray-500)}
.showing-card__where{display:flex;gap:8px;margin-top:10px}
.showing-card__where svg{flex:none;margin-top:2px;stroke:var(--gray-500)}
.showing-card__where div{line-height:1.4}
.showing-card__addr{color:var(--gray-700)}
.showing-card__unit{color:var(--gray-500);font-size:12px}
.showing-card__actions{display:flex;gap:8px;margin-top:12px}
.showing-card__actions span{flex:1;text-align:center;font-weight:700;border-radius:8px;padding:8px 0;font-size:13px}
.showing-card__actions .is-primary{background:#12C24A;color:#fff}
.showing-card__actions .is-secondary{border:1px solid var(--gray-200);color:#E02D2D}
.takeover{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;background:var(--ink-900);color:#fff;border-radius:var(--radius-pill);padding:8px 14px;font-size:12.5px;font-weight:600;box-shadow:var(--shadow-pop);cursor:pointer}

/* Vignette: publish + funnel */
.publish__tags{display:flex;flex-wrap:wrap;gap:8px}
.publish__sub{font-weight:700;margin:16px 0 8px;display:flex;justify-content:space-between;align-items:baseline}
.publish__sub span{font-size:11px;font-weight:400;color:var(--gray-500)}
.publish__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.publish__stat{text-align:center}
.publish__stat:first-child{text-align:left}
.publish__stat:last-child{text-align:right}
.publish__stat b{font-family:var(--font-mono);font-weight:700;font-size:20px;display:block}
.publish__stat span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-500)}
.funnel{position:relative;margin-top:6px}
.funnel svg{width:100%;height:56px;display:block}
.funnel svg path{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease-out) .4s}
.funnel.in svg path{clip-path:inset(0 0 0 0)}
.funnel__lbl{position:absolute;top:50%;transform:translate(-50%,-50%);color:#fff;font-family:var(--font-mono);font-size:11px;font-weight:700;opacity:0;transition:opacity .4s var(--ease-out) 1.2s}
.funnel.in .funnel__lbl{opacity:1}

/* ============================================================
   Results / stats
   ============================================================ */
.results{background:var(--ink-900);color:#fff;padding:clamp(48px,6vw,96px) 0}
.results__eyebrow{margin-bottom:16px}
.results__title{font-size:clamp(28px,3vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0 0 40px;max-width:640px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){
  .stats-grid{grid-template-columns:1fr}
  /* Single column is much wider than the 240×96 viewBox, so a fixed height
     letterboxes the graph into a small island. Scale it with the card. */
  .stat-card__graph{height:auto;aspect-ratio:240/96}
}
.stat-card{background:var(--ink-800);border-radius:var(--radius-lg);padding:32px 28px;display:flex;flex-direction:column;gap:24px}
.stat-card__graph{height:96px}
.stat-card__graph svg{width:100%;height:100%}
.stat-card__num{font-size:clamp(44px,4.5vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat-card__num--lime{color:var(--lime-400)}
.stat-card__num--rose{color:var(--rose-300)}
.stat-card__num--sky{color:var(--sky-300)}
.stat-card p{font-size:15.5px;line-height:1.5;color:var(--gray-300);margin:14px 0 0}

.stat-bar{transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease-out)}
.stat-card.in .stat-bar{transform:scaleY(1)}
.stat-line{stroke-dasharray:260;stroke-dashoffset:260}
.stat-card.in .stat-line{animation:lineDraw 1.4s var(--ease-out) .3s forwards}
@keyframes lineDraw{to{stroke-dashoffset:0}}
.stat-dot{opacity:0;transition:opacity .3s var(--ease-out)}
.stat-card.in .stat-dot{opacity:1;transition-delay:1.6s}
.stat-seg{opacity:.18;transition:opacity .25s var(--ease-out)}
.stat-card.in .stat-seg{opacity:1}

/* ============================================================
   Trust
   ============================================================ */
.trust{padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(48px,6vw,96px)}
.trust__title{font-size:clamp(30px,3.2vw,46px);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0;max-width:760px}
.trust__title .accent{color:var(--rose-500)}
.trust__lede{font-size:17px;line-height:1.55;color:var(--gray-700);margin:16px 0 48px;max-width:560px}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end}
.trust-block{transform:translateY(24px);opacity:0;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);color:var(--ink-900);border-radius:var(--radius-xl);padding:28px 28px 24px;display:flex;flex-direction:column;justify-content:flex-end}
.trust-block.in{transform:none;opacity:1}
.trust-block--sky{background:var(--sky-300);min-height:260px}
.trust-block--lime{background:var(--lime-400);min-height:330px}
.trust-block--rose{background:var(--rose-100);min-height:400px}
.trust-block__num{font-size:clamp(52px,5.5vw,80px);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.trust-block__label{font-size:15.5px;line-height:1.45;margin-top:12px;max-width:260px}
/* The staggered heights are a desktop stair-step; stacked on mobile they only
   produce dead space above each number, so the blocks size to their content. */
@media (max-width:860px){
  .trust-grid{grid-template-columns:1fr;align-items:stretch}
  .trust-block{padding:32px 28px;justify-content:flex-start}
  .trust-block--sky,.trust-block--lime,.trust-block--rose{min-height:0}
  .trust-block__label{max-width:none}
}
@media (prefers-reduced-motion:reduce){.trust-block{opacity:1;transform:none;transition:none}}

/* ============================================================
   Features
   ============================================================ */
.features{background:var(--cream);padding:clamp(48px,6vw,96px) 0}
.features__head{text-align:center;margin-bottom:48px}
.features__head .eyebrow{margin-bottom:16px;display:block}
.features__head h2{font-size:clamp(32px,3.4vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0}
.features__head p{font-size:17px;line-height:1.55;color:var(--gray-700);margin:16px auto 0;max-width:520px}
/* Start-aligned scroller with auto-margin centering: centered when the tabs
   fit, edge-to-edge scrollable when they don't. justify-content:center on an
   overflowing scroller clips both ends and makes the left unreachable. */
.feat-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-bottom:40px}
.feat-tabs::-webkit-scrollbar{display:none}
.feat-tab:first-child{margin-left:auto}
.feat-tab:last-child{margin-right:auto}
/* On mobile the mono tier prefixes go; three plain tabs fit one centered row. */
@media (max-width:860px){
  .feat-tabs{justify-content:center}
  .feat-tab{padding:11px 16px}
  .feat-tab:first-child{margin-left:0}
  .feat-tab:last-child{margin-right:0}
  .feat-tab__tier{display:none}
}
.feat-tab{display:inline-flex;align-items:baseline;gap:10px;border:1.5px solid transparent;background:transparent;color:var(--ink-900);border-radius:var(--radius-pill);padding:12px 24px;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background 180ms var(--ease-out),color 180ms var(--ease-out),border-color 180ms var(--ease-out)}
.feat-tab__tier{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--rose-700)}
.feat-tab[aria-selected="true"]{border-color:var(--ink-900);background:var(--ink-900);color:#fff}
.feat-tab[aria-selected="true"] .feat-tab__tier{color:var(--rose-300)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.feat-grid{grid-template-columns:1fr}}
.feat-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:26px 26px 24px;animation:fadeUp .4s var(--ease-out) both}
.feat-card__icon{width:44px;height:44px;border-radius:12px;background:var(--rose-100);color:var(--rose-700);display:inline-flex;align-items:center;justify-content:center;margin-bottom:36px}
.feat-card h3{font-size:17.5px;font-weight:700;letter-spacing:-.01em;margin:0}
.feat-card h3 span{font-weight:400;color:var(--gray-500);font-size:14.5px}
.feat-card p{font-size:15px;line-height:1.55;color:var(--gray-700);margin:10px 0 0}

/* ============================================================
   Integrations
   ============================================================ */
.integrations{padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(48px,6vw,96px)}
.integrations__eyebrow{margin-bottom:16px}
.integrations__title{margin:0 0 40px;max-width:640px}
.integ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
@media (max-width:1020px){.integ-grid{grid-template-columns:1fr}}
.integ-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:26px 26px 24px}
.integ-card__head{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.integ-card__icon{width:40px;height:40px;border-radius:12px;background:var(--rose-100);color:var(--rose-700);display:inline-flex;align-items:center;justify-content:center;flex:none}
.integ-card h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:0}
.integ-chips{display:flex;flex-wrap:wrap;gap:10px}
.integ-chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--gray-200);background:var(--gray-50);border-radius:var(--radius-pill);padding:8px 16px 8px 9px;font-size:14px;font-weight:600;color:var(--ink-900);white-space:nowrap}
.integ-chip__mark{width:24px;height:24px;border-radius:50%;background:var(--gray-200);color:var(--gray-700);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
/* Real partner favicons: white puck, inset so square marks clear the circle. */
img.integ-chip__mark{background:#fff;border:1px solid var(--gray-200);object-fit:contain;padding:3px;box-sizing:border-box}
.integ-chip--soon{border:1.5px dashed var(--gray-300);background:transparent}
.integ-chip__soon{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--rose-600);font-weight:700}
.integ-card__note{font-size:13.5px;font-style:italic;color:var(--gray-500);margin:20px 0 0}

/* ============================================================
   Founders
   ============================================================ */
.founders{background:var(--ink-900);color:#fff;padding:clamp(48px,6vw,96px) 0}
.founders__eyebrow{margin-bottom:16px}
.founders__title{font-size:clamp(28px,3vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0 0 48px;max-width:640px}
.founders-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:860px){.founders-grid{grid-template-columns:1fr}}
.founder{margin:0;background:var(--ink-800);border-radius:var(--radius-xl);padding:clamp(28px,3.5vw,48px);display:flex;flex-direction:column;gap:28px}
.founder__mark{font-size:80px;font-weight:800;line-height:.5;height:34px;color:var(--rose-500)}
.founder:nth-child(2) .founder__mark{color:var(--sky-300)}
.founder blockquote{margin:0;font-size:clamp(17px,1.5vw,20px);font-weight:500;line-height:1.55;letter-spacing:-.01em}
.founder figcaption{display:flex;align-items:center;gap:16px;margin-top:auto;font-size:15px;line-height:1.4}
.founder figcaption span{color:var(--gray-300)}

/* ============================================================
   Closing CTA
   ============================================================ */
.cta{padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(48px,6vw,96px)}
.cta-card{background:var(--cream);border-radius:var(--radius-xl);overflow:hidden}
.cta-card__inner{padding:clamp(48px,7vw,96px) clamp(24px,5vw,80px) clamp(40px,5vw,72px);text-align:center}
.cta-card h2{font-size:clamp(28px,3.2vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.14;margin:0 auto;max-width:760px}
.cta-line{display:block;overflow:hidden}
.cta-line > span{display:block;transform:translateY(110%);transition:transform .7s var(--ease-out)}
.cta-card.in .cta-line > span{transform:none}
.cta-line:nth-of-type(2) > span{transition-delay:.15s}
.cta-line:nth-of-type(3) > span{transition-delay:.3s}
.cta-underline{position:relative;white-space:nowrap}
.cta-underline svg{position:absolute;left:-.22em;right:-.22em;top:-.12em;bottom:-.18em;width:calc(100% + .44em);height:calc(100% + .3em);z-index:0;clip-path:inset(0 100% 0 0);transition:clip-path .65s var(--ease-out) .8s}
.cta-card.in .cta-underline svg{clip-path:inset(0 0 0 0)}
.cta-underline > span{position:relative;z-index:1;color:var(--ink-900)}
.cta-card p{font-size:17px;line-height:1.55;color:var(--gray-700);margin:20px auto 36px;max-width:520px}
@media (prefers-reduced-motion:reduce){
  .cta-line > span{transform:none}
  .cta-underline svg{clip-path:inset(0 0 0 0)}
  .funnel svg path{clip-path:inset(0 0 0 0);transition:none}
  .funnel__lbl{opacity:1;transition:none}
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding-bottom:clamp(48px,6vw,96px)}
.faq-grid{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr;gap:24px}}
.faq__eyebrow{margin-bottom:16px}
.faq__title{font-size:clamp(28px,3vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0}
.faq__lede{font-size:16px;line-height:1.55;color:var(--gray-700);margin:16px 0 0}
.faq__lede a{font-weight:600}
.faq-list{border-top:1px solid var(--gray-200)}
.faq-item{border-bottom:1px solid var(--gray-200)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:none;padding:22px 4px;font-family:inherit;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink-900);text-align:left;cursor:pointer}
.faq-q:hover{color:var(--rose-600)}
/* One focus ring for every non-.btn control. */
.faq-q:focus-visible,.feat-tab:focus-visible,.carousel-btn:focus-visible,.carousel-dot:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* FAQ toggle: the ink disc grows behind the icon while the + spins 135° into an ×.
   Closing runs faster than opening; press compresses the button. Transform/opacity only. */
.faq-x{position:relative;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ink-900);display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--ink-900);transition:transform .25s var(--ease-out),color .15s var(--ease-out)}
.faq-x::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;background:var(--ink-900);transform:scale(.4);opacity:0;transition:transform .2s var(--ease-out),opacity .15s var(--ease-out)}
.faq-x svg{position:relative;z-index:1;width:12px;height:12px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.faq-q:active .faq-x{transform:scale(.9)}
.faq-q[aria-expanded="true"] .faq-x{transform:rotate(135deg);color:#fff;transition:transform .45s var(--ease-out),color .2s var(--ease-out) .05s}
.faq-q[aria-expanded="true"]:active .faq-x{transform:rotate(135deg) scale(.9)}
.faq-q[aria-expanded="true"] .faq-x::before{transform:scale(1);opacity:1;transition:transform .3s var(--ease-out),opacity .15s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.faq-x,.faq-x::before{transition-duration:.01s}}
/* Expansion via grid rows (compositor-friendly), driven purely by aria-expanded. */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease-out)}
h3:has(.faq-q[aria-expanded="true"])+.faq-a{grid-template-rows:1fr}
/* The clipping wrapper is padding-free so a 0fr row closes fully — padding on
   the paragraph itself would keep painting (and leaking text) when collapsed. */
.faq-a > div{overflow:hidden;min-height:0}
.faq-a p{font-size:15.5px;line-height:1.6;color:var(--gray-700);margin:0;max-width:640px;padding:2px 4px 26px}

/* ============================================================
   Contact page
   ============================================================ */
.contact{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(48px,6vw,96px)}
.contact__head{max-width:640px}
.contact__title{font-size:clamp(32px,3.4vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:16px 0 0}
.contact__lede{margin:16px 0 0}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:start;margin-top:40px}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

.contact-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:clamp(24px,3vw,40px)}
.contact-form{display:flex;flex-direction:column;gap:18px}
.contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.contact-form__row{grid-template-columns:1fr}}
.contact-form__field{display:flex;flex-direction:column;gap:7px}
.contact-form__field > span{font-size:13.5px;font-weight:600;color:var(--ink-900)}
.contact-form__field em{font-style:normal;font-weight:400;color:var(--gray-500)}
.contact-form__field input,.contact-form__field select{font-family:inherit;font-size:15px;color:var(--ink-900);background:#fff;border:1px solid var(--gray-300);border-radius:var(--radius-sm);padding:11px 14px;transition:border-color var(--dur-fast) var(--ease-out)}
/* Chevron affordance for every browser (replaces the native triangle). */
.contact-form__field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:14px;padding-right:40px}
.contact-form__field input:hover,.contact-form__field select:hover{border-color:var(--gray-500)}
.contact-form__field input:focus-visible,.contact-form__field select:focus-visible{outline:none;border-color:var(--rose-500);box-shadow:var(--focus-ring)}
/* Customizable select (Chrome/Edge 135+): restyles the native select's panel
   and options in-brand. Other browsers keep the styled-closed native control —
   pure progressive enhancement, no JS. */
@supports (appearance: base-select) {
  .contact-form__field select{appearance:base-select;background-image:none;padding-right:14px}
  .contact-form__field select::picker(select){appearance:base-select}
  /* Same chevron as the fallback, drawn via mask so it tracks currentColor. */
  .contact-form__field select::picker-icon{content:'';width:14px;height:14px;flex:none;align-self:center;background:var(--gray-500);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--dur-med) var(--ease-out)}
  .contact-form__field select:open::picker-icon{transform:rotate(180deg)}
  .contact-form__field select::picker(select){
    background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-pop);padding:6px;margin-block-start:6px;
    opacity:0;transform:translateY(-4px);
    transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out),display var(--dur-med) allow-discrete,overlay var(--dur-med) allow-discrete;
  }
  .contact-form__field select:open::picker(select){opacity:1;transform:none}
  @starting-style{
    .contact-form__field select:open::picker(select){opacity:0;transform:translateY(-4px)}
  }
  .contact-form__field option{
    display:flex;align-items:center;gap:10px;
    font-size:15px;color:var(--ink-900);border-radius:var(--radius-sm);
    padding:9px 12px;transition:background var(--dur-fast) var(--ease-out);
  }
  .contact-form__field option:not(:disabled):where(:hover,:focus-visible){background:var(--gray-100)}
  .contact-form__field option:disabled{color:var(--gray-500)}
  .contact-form__field option:checked{font-weight:600}
  .contact-form__field option::checkmark{color:var(--rose-600);font-weight:700}
  @media (prefers-reduced-motion:reduce){
    .contact-form__field select::picker(select){transition-duration:.01s}
    .contact-form__field select::picker-icon{transition:none}
  }
}

.contact-form__submit{align-self:flex-start;margin-top:6px}
.contact-form__submit[disabled]{cursor:not-allowed;opacity:.45;transform:none}
.contact-form__status{font-size:15px;margin:0;color:var(--rose-700)}
.contact-form__status.is-ok{color:var(--success-deep)}
.contact-form__status a{font-weight:600}

.contact-aside{display:flex;flex-direction:column;gap:16px}
.contact-block{background:var(--cream);border-radius:var(--radius-xl);padding:26px 26px 24px}
.contact-block h2{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:0}
.contact-block p{font-size:15.5px;line-height:1.55;color:var(--gray-700);margin:8px 0 0}
.contact-block .btn{margin-top:16px}
.contact-block[id]{scroll-margin-top:88px}
/* Support gets the sky pedestal so existing customers spot their lane fast. */
.contact-block--support{background:var(--sky-300)}
.contact-block--support p{color:var(--ink-900)}
.contact-block--support a{color:var(--ink-900);text-decoration-color:var(--ink-900);font-weight:600}
.contact-block--support a:hover{color:var(--ink-700)}

/* ============================================================
   Legal page
   ============================================================ */
.legal{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(32px,4vw,56px)}
.legal__title{font-size:clamp(32px,3.4vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:16px 0 0}
.legal__tabs{display:flex;gap:8px;margin-top:24px}
.legal__tabs a{display:inline-block;border:1.5px solid transparent;border-radius:var(--radius-pill);padding:10px 20px;font-size:14.5px;font-weight:600;text-decoration:none;color:var(--ink-900);transition:background 180ms var(--ease-out),color 180ms var(--ease-out),border-color 180ms var(--ease-out)}
.legal__tabs a:hover{border-color:var(--ink-900)}
.legal__tabs a[aria-current="page"]{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}
.legal__frame-wrap{margin-top:32px;border:1px solid var(--gray-200);border-radius:var(--radius-xl);overflow:hidden;background:#fff}
.legal__frame{display:block;width:100%;height:min(72vh,900px);border:none}
.legal__fallback{font-size:13.5px;color:var(--gray-500);margin:14px 0 0}
.legal__fallback a{font-weight:600}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--ink-900);color:#fff;overflow:hidden}
.site-footer__inner{padding-top:clamp(48px,6vw,88px)}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
@media (max-width:860px){.footer-cols{grid-template-columns:1fr 1fr}}
.footer-logo{height:30px;display:block;margin-bottom:24px}
.footer-pitch{font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-.02em;line-height:1.2;max-width:340px}
.footer-cta{margin-top:24px}
.footer-heading{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-500);margin-bottom:14px}
.footer-link{display:block;color:var(--gray-300);text-decoration:none;font-size:15px;padding:5px 0}
.footer-link:hover{color:#fff}
.footer-legal{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--ink-800);margin-top:56px;padding:24px 0;font-size:13.5px;color:var(--gray-300)}
.footer-legal nav{display:flex;gap:24px}
.footer-legal a{color:var(--gray-300);text-decoration:none}
.footer-legal a:hover{color:#fff}
/* A quiet signature with a heartbeat: two quick beats, then rest. */
.made-in{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.made-in__heart{width:12px;height:12px;fill:var(--rose-500);animation:heartbeat 2.4s ease-in-out infinite;transform-origin:center}
@keyframes heartbeat{
  0%,30%,100%{transform:scale(1)}
  6%{transform:scale(1.3)}
  12%{transform:scale(1)}
  18%{transform:scale(1.22)}
}
@media (prefers-reduced-motion:reduce){.made-in__heart{animation:none}}