/* ---------- Tokens (from Figma) ---------- */
:root {
  --bg: #f9f9f9;
  --ink: #060606;
  --ink-80: rgba(6, 6, 6, .8);
  --ink-75: rgba(6, 6, 6, .75);
  --ink-70: rgba(6, 6, 6, .7);
  --ink-50: rgba(6, 6, 6, .5);
  --ink-40: rgba(6, 6, 6, .4);
  --ink-30: rgba(6, 6, 6, .3);
  --grey: #868686;
  --line: #d9d9d9;
  --green: #055a52;        /* green bean */
  --green-dark: #044c45;
  --lime: #c7f239;         /* tease me green */
  --cream: #fffff9;
  --light: #f8f8f8;
  --max: 1232px;
  --gutter: 104px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Syne Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* --page changes when certain sections take over the screen (main.js), crossfading the whole page colour */
  background: var(--page, var(--bg));
  transition: background-color .9s var(--ease);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; font-family: var(--font); color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
h1, h2, h3, h4, p { margin: 0; }

.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--ink-50); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Shared type ---------- */
.tag {
  display: inline-flex; align-items: center;
  border: 1px solid var(--ink); border-radius: 4px;
  height: 25px; padding: 1px 12px 0;
  font-family: var(--mono); font-size: 14px; letter-spacing: 1.4px; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
}
.tag--light { border-color: var(--light); color: var(--light); }
.h2 { font-size: 30px; font-weight: 400; line-height: 1.1; letter-spacing: -.48px; margin-top: 19px; max-width: 686px; }
.body { font-size: 14px; line-height: 1.5; letter-spacing: -.14px; max-width: 621px; margin-top: 11px; color: var(--ink); }
.body--soft { color: var(--ink-80); }

/* Scroll-scrubbed text: characters go from faint to ink as you scroll */
.scrub .ch { color: var(--ink-30); transition: color .15s linear; }
.scrub .ch.on { color: inherit; }
.gap__title.scrub .ch { color: var(--ink-50); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 12px; font-size: 16px; font-weight: 500; line-height: 1.45; letter-spacing: -.16px; white-space: nowrap; transition: background .25s, color .25s, transform .25s var(--ease), border-color .25s; }
.btn--ghost { height: 36px; border-radius: 8px; }
.btn--ghost:hover { background: rgba(6, 6, 6, .06); }
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); transform: translateY(-1px); }
.btn--outline { border: .6px solid rgba(248, 248, 248, .4); color: var(--light); }
.btn--outline:hover { border-color: var(--light); background: rgba(255, 255, 255, .06); }
.btn--lg { height: auto; padding: 10px 23px; font-size: 15px; font-weight: 400; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; transition: background .9s var(--ease), box-shadow .3s; }
.nav.is-scrolled { background: color-mix(in srgb, var(--page, var(--bg)) 80%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(6, 6, 6, .06); }
.nav__inner { max-width: 1440px; margin: 0 auto; height: 84px; padding: 10px 102px 10px 96px; display: flex; align-items: center; gap: 24px; transition: height .3s var(--ease); }
.nav.is-scrolled .nav__inner { height: 68px; }
.nav__logo { width: 89px; flex-shrink: 0; margin-left: 8px; }
.nav__links { flex: 1; display: flex; align-items: center; opacity: .8; }
.nav__link { display: inline-flex; align-items: center; gap: 4px; height: 48px; padding: 0 16px; border-radius: 1000px; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--ink-70); transition: color .2s, background .2s; }
.nav__link:hover { color: var(--ink); background: rgba(6, 6, 6, .05); }
.nav__link--menu img { transition: transform .2s; }
.nav__link--menu:hover img { transform: translateY(2px); }
.nav__cta { display: flex; align-items: center; gap: 8px; }
.nav__burger { display: none; width: 40px; height: 40px; position: relative; }
.nav__burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), top .3s var(--ease); }
.nav__burger span:first-child { top: 16px; }
.nav__burger span:last-child { top: 23px; }
.nav.is-open .nav__burger span:first-child { top: 19.5px; transform: rotate(45deg); }
.nav.is-open .nav__burger span:last-child { top: 19.5px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1fr auto; row-gap: 31px; padding-top: 41px; }
.hero__copy { display: contents; }
.hero__title { font-size: 40px; font-weight: 500; line-height: 1.1; letter-spacing: -1.2px; max-width: 565px; }
.hero__sub { align-self: end; max-width: 401px; font-size: 14px; line-height: 1.5; letter-spacing: -.14px; padding-bottom: 12px; }
.hero__media { grid-column: 1 / -1; aspect-ratio: 16 / 9; overflow: hidden; background: #8a9480; }
/* ---------- Hero stage: the product demo, rebuilt from the Figma scenes as vector layers ----------
   Every scene is placed in % of the 16:9 stage (positions measured from the original GIF), so it scales
   with the box and stays sharp. main.js plays the timeline by toggling classes. */
.hstage { position: relative; width: 100%; height: 100%; overflow: hidden; container-type: inline-size;
  background: #8a9480 url(assets/hero/bg.jpg) center / cover no-repeat; }
.hs { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: var(--ar);
  opacity: 0; transform: translateY(4%) scale(.97); pointer-events: none;
  transition: opacity .55s ease, transform .8s var(--ease); }
.hs.is-on { opacity: 1; transform: none; }
.hs.is-out { opacity: 0; transform: translateY(-4%) scale(.97); transition-duration: .45s, .6s; }
.hs > img:not(.hs-col, .hs-card) { position: absolute; inset: 0; width: 100%; height: 100%; }
/* scenes that zoom rather than slide */
.hs-meeting, .hs-past { transform: scale(.9); }
.hs-meeting.is-out { transform: scale(.72) translateY(4%); }
.hs-toast { transform: translateY(-30%); }

/* prompt box: typing reveals the typed text left to right; the caret rides its edge */
.hs-chat { --t: 0; }
.hs-chat__typed { clip-path: inset(0 calc(100% - 4.13% - var(--t) * 22.33%) 0 0); }
.hs-chat.is-typing .hs-chat__ph { opacity: 0; }
.hs-caret { position: absolute; left: calc(4.13% + var(--t) * 22.33%); top: 21%; height: 13%; width: max(1px, .11cqw);
  background: #2b2b2b; animation: blink 1s steps(1) infinite; }
.hs-chat.is-typing .hs-caret { animation: none; }
.hs-chat.is-sent .hs-chat__typed, .hs-chat.is-sent .hs-caret { opacity: 0; transition: opacity .25s; }

/* thinking steps: rows and connector lines appear in turn; a lime marker moves to the active row */
.hs-step, .hs-line { opacity: 0; translate: 0 6%; transition: opacity .5s ease, translate .6s var(--ease); }
.hs-step.is-on, .hs-line.is-on { opacity: 1; translate: 0 0; }
.hs-step.is-done { opacity: .55; }
.hs-dot { position: absolute; left: 3.87%; top: calc(6.7% + var(--row, 0) * 28.86%); width: 3.9%; aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%; background: #A9D80E; opacity: 0;
  box-shadow: 0 0 0 .5cqw rgba(169, 216, 14, .22), 0 0 1.4cqw rgba(169, 216, 14, .55);
  transition: top .6s var(--ease), opacity .4s; animation: pulse 1.4s ease-in-out infinite; }
.hs-steps.is-on .hs-dot { opacity: 1; }
@keyframes pulse { 50% { box-shadow: 0 0 0 .9cqw rgba(169, 216, 14, .12), 0 0 2cqw rgba(169, 216, 14, .6); } }

/* pipeline: columns rise in a stagger; the deal card is dragged column to column */
.hs-col { position: absolute; top: 0; left: calc(var(--i) * 20%); width: 20%; height: 100%;
  opacity: 0; translate: 0 10%; transition: opacity .5s ease calc(var(--i) * 70ms), translate .7s var(--ease) calc(var(--i) * 70ms); }
.hs-pipe.is-on .hs-col { opacity: 1; translate: 0 0; }
.hs-card { position: absolute; left: 40.77%; top: 13.59%; width: 18.46%; height: auto;
  translate: calc(var(--col, 0) * 108.33%) 0; opacity: 0;
  transition: translate .95s cubic-bezier(.65, 0, .25, 1), scale .25s ease, rotate .25s ease, opacity .5s ease .3s, filter .25s; }
.hs-pipe.is-on .hs-card { opacity: 1; }
.hs-card.is-grabbed { scale: 1.04; rotate: 2deg; filter: drop-shadow(0 1.2cqw 1.6cqw rgba(0, 0, 0, .22)); }
.hs-target { position: absolute; top: 1.09%; height: 97.83%; width: 19.38%; left: calc(.31% + var(--tcol, 3) * 20%);
  border: max(1.5px, .16cqw) solid #C7F239; border-radius: .6cqw; opacity: 0; transition: opacity .3s, left .6s var(--ease); }
.hs-target.is-on { opacity: 1; }

/* cursor glides between targets and dips on click */
.hs-cursor { position: absolute; left: var(--cx, 60%); top: var(--cy, 30%); width: 1.25%; z-index: 5; opacity: 0; transform-origin: 0 0;
  transition: left var(--cd, .9s) cubic-bezier(.45, 0, .2, 1), top var(--cd, .9s) cubic-bezier(.45, 0, .2, 1), opacity .3s, scale .12s;
  filter: drop-shadow(0 .1cqw .25cqw rgba(0, 0, 0, .25)); }
.hs-cursor.is-on { opacity: 1; }
.hs-cursor.is-click { scale: .82; }
.hs-cursor svg { display: block; width: 100%; height: auto; }
.hs-cursor path { transition: fill .3s; }
/* Iris drives: green cursor with her tag underneath */
.hs-cursor.is-iris path { fill: #C7F239; stroke: #0F0F0F; }
.hs-cursor__tag { position: absolute; left: 70%; top: 105%; display: flex; align-items: center; gap: .35cqw; white-space: nowrap;
  padding: .2cqw .6cqw .2cqw .2cqw; border-radius: 99px; background: rgba(18, 18, 18, .62); color: #fff;
  font-size: .85cqw; font-weight: 500; line-height: 1; opacity: 0; translate: 0 -20%; transition: opacity .3s, translate .4s var(--ease); }
.hs-cursor__tag img { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; object-fit: cover; }
.hs-cursor.is-iris .hs-cursor__tag { opacity: 1; translate: 0 0; }

/* meeting: whoever is speaking gets a pulsing ring and sound bars (Iris in lime) */
.hs-talk { position: absolute; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0;
  box-shadow: 0 0 0 .18cqw rgba(255, 255, 255, .95); transition: opacity .3s ease; }
.hs-talk--iris { box-shadow: 0 0 0 .18cqw #C7F239; }
.hs-meeting[data-speaking="longstaff"] [data-who="longstaff"], .hs-meeting[data-speaking="iris"] [data-who="iris"],
.hs-meeting[data-speaking="ada"] [data-who="ada"], .hs-meeting[data-speaking="john"] [data-who="john"] { opacity: 1; animation: talkPulse .9s ease-in-out infinite; }
@keyframes talkPulse { 50% { box-shadow: 0 0 0 .18cqw rgba(255, 255, 255, .95), 0 0 0 .9cqw rgba(255, 255, 255, .18); } }
.hs-meeting[data-speaking="iris"] .hs-talk--iris { animation-name: talkPulseIris; }
@keyframes talkPulseIris { 50% { box-shadow: 0 0 0 .18cqw #C7F239, 0 0 0 .9cqw rgba(199, 242, 57, .25); } }
.hs-talk i { position: absolute; bottom: 4%; width: 7%; height: 22%; border-radius: 99px; background: #fff; transform-origin: 50% 100%; }
.hs-talk--iris i { background: #C7F239; }
.hs-talk i:nth-child(1) { left: 100%; } .hs-talk i:nth-child(2) { left: 111%; } .hs-talk i:nth-child(3) { left: 122%; }
.hs-talk i { animation: bars .5s ease-in-out infinite alternate; }
.hs-talk i:nth-child(2) { animation-delay: -.2s; } .hs-talk i:nth-child(3) { animation-delay: -.35s; }
@keyframes bars { from { scale: 1 .3; } to { scale: 1 1; } }
.hero > * { min-width: 0; }
.trusted { grid-column: 1 / -1; min-width: 0; display: flex; align-items: center; gap: 56px; padding: 0 43px; margin-top: -9px; }
.trusted__label { font-size: 18px; font-weight: 500; white-space: nowrap; }
.trusted__marquee { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.trusted__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.trusted__track img { height: 38px; width: auto; max-width: none; padding-right: 120px; }
.trusted__marquee:hover .trusted__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% / 3)); } }

/* ---------- The gap ---------- */
/* Figma: copy column 601px at x104, illustration 418px at x788, 130px clear of the right edge */
.gap { display: grid; grid-template-columns: minmax(0, 1fr) 418px; column-gap: 83px; align-items: center; padding-top: 100px; padding-right: calc(var(--gutter) + 130px); }
.gap__copy { padding-top: 0; }
.gap__title { max-width: 601px; }
.steps { margin-top: 52px; display: flex; flex-direction: column; gap: 28px; max-width: 489px; }
.step { position: relative; display: block; padding: 11px 0 11px 24px; }
.step__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #c4c4c4; overflow: hidden; }
.step__fill { position: absolute; inset: 0 0 auto 0; height: 0; background: var(--green); }
.step.is-active .step__fill { height: 100%; animation: fillY var(--dur, 6s) linear both; }
@keyframes fillY { from { height: 0; } }
[data-paused] .is-active .step__fill { animation-play-state: paused; }
.step__title { display: block; font-size: 18px; font-weight: 500; line-height: 1.2; transition: font-size .3s var(--ease); }
.step.is-active .step__title { font-size: 20px; }
.step__body { display: block; max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; font-size: 16px; line-height: 1.5; transition: max-height .5s var(--ease), opacity .3s, margin .5s var(--ease); }
.step.is-active .step__body { max-height: 200px; opacity: 1; margin-top: 7px; transition: max-height .6s var(--ease), opacity .5s .1s, margin .5s var(--ease); }
.step:not(.is-active):hover .step__title { color: var(--green); }
.gap__art { justify-self: center; width: 418px; max-width: 100%; height: var(--art-h, 460px); display: grid; }

/* One illustration per step, crossfaded: stack, pipeline, follow-through */
.art { grid-area: 1 / 1; min-height: 0; height: 100%; display: flex; align-items: center; justify-content: center; transition: opacity .7s var(--ease), transform .8s var(--ease), filter .7s var(--ease); }
.art--pipeline, .art--follow, .gap:is([data-step="1"], [data-step="2"]) .art--stack { opacity: 0; transform: translateY(16px); filter: blur(4px); pointer-events: none; }
.gap:is([data-step="1"], [data-step="2"]) .art--stack { transform: translateY(-16px); }
.gap[data-step="1"] .art--pipeline, .gap[data-step="2"] .art--follow { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.pp-svg { display: block; height: 100%; width: auto; max-width: 100%; overflow: visible; animation: float 7s ease-in-out infinite; }

/* Pipeline hover morph, driven by the same --s as the stack.
   At rest: all three platforms (Figma frame 3). On hover the upper cubes clear, then the stack meets in the
   middle: the bottom platform rises 229px and the top one drops 230px onto the middle platform's spot. */
.pp-svg path { stroke: #444; stroke-width: .5; } /* same line weight and tone as the stack and follow-through drawings */
.pp-l0, .pp-l2 { transition: transform 1.1s cubic-bezier(.65, 0, .25, 1), opacity .6s ease; transition-delay: calc(var(--s) * .25s); }
.pp-l0 { transform: translateY(calc(var(--s) * -229px)); }
.pp-l2 { transform: translateY(calc(var(--s) * 230px)); opacity: calc(1 - var(--s)); }
/* the middle platform hands its spot to the bottom one as it arrives */
.pp-l1 { opacity: calc(1 - var(--s)); transition: opacity .5s ease; transition-delay: calc(var(--s) * .55s + (1 - var(--s)) * .1s); }
.pp-l1 .pp-cube, .pp-l2 .pp-cube {
  opacity: calc(1 - var(--s));
  transition: opacity .35s ease;
  transition-delay: calc((1 - var(--s)) * (var(--l) * .15s + .6s + var(--c) * 35ms));
}

/* Idle, before hover: every cube ripples slowly and the upper platforms breathe, so the stack is never static */
.pp-cube { animation: ripple 3.6s ease-in-out infinite; animation-delay: calc(var(--c) * -.22s - var(--l) * .5s); }
@keyframes ripple { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.pp-l1 { animation: breathe 5s ease-in-out infinite; }
.pp-l2 { animation: breathe 5s ease-in-out -1.2s infinite; }
@keyframes breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

/* Follow-through chain, matching the three Figma frames (hover drives --s 0 -> 1):
   frame 1  four platforms; the right-hand clock block lies flat in its platform (only its face shows)
   frame 2  a new platform extends the chain at the top, and the right-hand clock block stands up
   frame 3  the new platform's clock block stands up too. The dashed (missing) step stays missing. */
.ft-svg { display: block; height: 100%; width: auto; max-width: 100%; overflow: visible; animation: float 7s ease-in-out infinite; }
.ft-tile, .ft-links { animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--k, 2) * -1.2s); }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }

/* a flat block = sides hidden, face lowered by the block's 8px height onto the platform */
.ft-cube__side, .ft-cube__top { transition: opacity .45s ease, transform .7s cubic-bezier(.34, 1.4, .64, 1); }
.ft-cube--2 .ft-cube__side, .ft-cube--1 .ft-cube__side { opacity: var(--s); }
.ft-cube--2 .ft-cube__top, .ft-cube--1 .ft-cube__top { transform: translateY(calc((1 - var(--s)) * 8px)); }
.ft-cube--2 :is(.ft-cube__side, .ft-cube__top) { transition-delay: calc(var(--s) * .2s + (1 - var(--s)) * .45s); }
.ft-cube--1 :is(.ft-cube__side, .ft-cube__top) { transition-delay: calc(var(--s) * .85s); }

/* the new top platform slides in along the chain from the right-hand one, then its link draws in */
.ft-new { opacity: var(--s); transform: translate(calc((1 - var(--s)) * 26px), calc((1 - var(--s)) * 16px));
  transition: opacity .55s ease, transform .8s var(--ease); transition-delay: calc((1 - var(--s)) * .25s); }
.ft-link-new { opacity: var(--s); transition: opacity .4s ease; transition-delay: calc(var(--s) * .45s); }
.gx-svg { display: block; height: 100%; width: auto; max-width: 100%; overflow: visible; animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }

/* Illustration hover morph: --s goes 0 (exploded, Figma start state) -> 1 (stacked, Figma end state).
   Offsets measured from the two Figma exports; the whole drawing drops 96px so the shorter stack stays centred. */
.gap__art { --s: 0; }
.gap__art.is-stacked { --s: 1; }
@media (hover: hover) { .gap__art:hover { --s: 1; } }
.gx-svg g, .gx-svg path {
  --mix: calc(var(--s) * 100%);
  transition: transform .95s cubic-bezier(.65, 0, .25, 1), fill .6s ease, stroke .6s ease, stroke-dasharray .6s ease, opacity .45s ease;
  transition-delay: var(--dl, 0s);
}
.gx { transform: translateY(calc(var(--s) * 96px)); }
.gx-base { transform: translateY(calc(var(--s) * -192px)); }
/* stagger: lower layers lead on the way in, trail on the way out */
.gx-bottom { transform: translateY(calc(var(--s) * -192px)); --dl: calc((1 - var(--s)) * .12s); }
.gx-mid { transform: translateY(calc(var(--s) * -163px)); --dl: .06s; }
.gx-ghost { transform: translateY(calc(var(--s) * -145px)); --dl: calc(var(--s) * .12s); }
.gx-bottom path:last-child { fill: color-mix(in srgb, #2E2E2E var(--mix), #E0E0E0); }
:is(.gx-base, .gx-mid path, .gx-ghost path, .gx-plate path) { stroke: color-mix(in srgb, #A3A3A3 var(--mix), #444444); }
.gx-ghost path { stroke-dasharray: 2px calc((1 - var(--s)) * 2px); }
.gx-top path:first-child { opacity: calc(1 - var(--s)); }

/* ---------- Feature sections ---------- */
/* ---------- Features: five sections in normal flow (Figma spacing) ---------- */
.feature { padding-top: 80px; }
.feature .h2 { margin-top: 19px; }
.feature .body { margin-top: 11px; }
#prospecting .body { max-width: 572px; }
[data-journey] { scroll-margin-top: 90px; }
/* screenshots only fade up (via .reveal); at rest there is no transform or filter, so they render pixel-for-pixel */
.shot { margin-top: 38px; border-radius: 16px; overflow: hidden; }
.shot img { display: block; width: 100%; height: auto; }

/* ---------- Journey pill: floats over the five sections; a green highlight slides to the one in view ---------- */
.journey {
  position: fixed; left: 50%; bottom: 24px; z-index: 40;
  display: flex; align-items: center; gap: 2px; padding: 5px;
  background: rgba(249, 249, 249, .85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(6, 6, 6, .08); border-radius: 999px; box-shadow: 0 10px 30px rgba(6, 6, 6, .08);
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.journey.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.journey__pill { position: absolute; top: 5px; height: 34px; border-radius: 999px; background: var(--green); transition: left .6s var(--ease), width .6s var(--ease); }
.journey__step { position: relative; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-50); white-space: nowrap; transition: color .45s var(--ease); }
.journey__step:hover { color: var(--ink); }
.journey__step.is-active, .journey__step.is-active:hover { color: #fff; }
.journey__num { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; }

/* ---------- Statement ---------- */
.statement {
  margin-top: 58px;
  background-color: transparent;
  background-image: radial-gradient(rgba(6, 6, 6, .09) 1.2px, transparent 1.4px);
  background-size: 24px 24px;
  min-height: 773px; display: grid; place-items: center; padding: 80px 24px;
}
.statement__inner { max-width: 1018px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 26px; }
/* Mascot (Duolingo-style). It shows up alone first: pops in big where the sentence will be, hops across in
   two arcs (stretch on take-off, squash on landing, eyes leading), settles above the text, then keeps living
   (little hops, looking around, blinking). The sentence only appears after it settles (main.js). */
.statement__mascot { width: 61px; height: 60px; opacity: 0; transform-origin: 50% 100%; }
.mascot { display: block; width: 100%; height: auto; overflow: visible; }
.mascot__body, .mascot__shadow { transform-box: fill-box; transform-origin: 50% 100%; }
.mascot__eyes, .mascot__mouth { transform-box: fill-box; transform-origin: 50% 50%; }
.statement.is-mascot .statement__mascot { animation: mascotIn 2.1s cubic-bezier(.35, .1, .3, 1) forwards; }
@keyframes mascotIn {
  0%   { opacity: 0; transform: translate(0, 120px) scale(0); }
  12%  { opacity: 1; transform: translate(0, 120px) scale(1.75, 1.35); }
  20%  { transform: translate(0, 120px) scale(1.45, 1.7); }
  36%  { transform: translate(-70px, 40px) scale(1.3, 1.45); }
  46%  { transform: translate(-70px, 72px) scale(1.5, 1.05); }
  54%  { transform: translate(-70px, 66px) scale(1.25, 1.4); }
  68%  { transform: translate(28px, -26px) scale(1.05, 1.25); }
  78%  { transform: translate(0, 0) scale(1.28, .8); }
  88%  { transform: translate(0, -7px) scale(.95, 1.07); }
  100% { opacity: 1; transform: none; }
}
/* eyes lead the hops */
.statement.is-mascot .mascot__eyes { animation: eyesTravel 2.1s ease-in-out; }
@keyframes eyesTravel { 0%, 20% { transform: none; } 28%, 46% { transform: translateX(-2.5px); } 56%, 70% { transform: translateX(2.5px); } 85%, 100% { transform: none; } }
/* the shadow trails the body */
.statement.is-mascot .mascot__shadow { animation: shadowIn 2.1s ease-out both; }
@keyframes shadowIn { 0%, 10% { opacity: 0; transform: translate(4px, 4px); } 30% { opacity: 1; } 100% { transform: none; } }
/* smile grows in once it lands */
.mascot__mouth { transform: scale(.3); opacity: 0; transition: transform .5s cubic-bezier(.34, 1.6, .64, 1), opacity .2s; }
.statement.is-landed .mascot__mouth { transform: none; opacity: 1; }
/* alive: hello tilt, then small hops, looking around and blinking */
.statement.is-landed .statement__mascot { opacity: 1; transform: none; animation: mascotHello .9s ease-in-out, mascotIdle 5.5s ease-in-out .9s infinite; }
@keyframes mascotHello { 0%, 100% { rotate: 0deg; } 30% { rotate: -11deg; } 62% { rotate: 8deg; } }
@keyframes mascotIdle {
  0%, 30%, 100% { translate: 0 0; scale: 1 1; }
  36% { translate: 0 0; scale: 1.08 .92; }
  44% { translate: 0 -12px; scale: .95 1.06; }
  52% { translate: 0 0; scale: 1.1 .9; }
  58% { translate: 0 0; scale: 1 1; }
}
.statement.is-landed .mascot__eyes { animation: eyesIdle 5.5s ease-in-out .9s infinite; }
@keyframes eyesIdle {
  0%, 12%, 100% { transform: none; }
  16%, 24% { transform: translateX(-2px); }
  28%, 36% { transform: translateX(2px); }
  40% { transform: none; }
  70% { transform: scaleY(1); } 72% { transform: scaleY(.1); } 74% { transform: scaleY(1); }
}
.statement.is-landed .mascot__body { animation: breatheM 3.4s ease-in-out infinite; }
@keyframes breatheM { 0%, 100% { scale: 1 1; } 50% { scale: 1.03 .97; } }

.statement__text { font-size: 40px; font-weight: 500; line-height: 1.1; letter-spacing: -.4px; color: var(--ink); }

/* ---------- Launch film: autoplays muted while on screen; click anywhere toggles sound. No controls. ---------- */
.film { padding-top: 88px; }
/* never taller than the screen: on laptop-height windows the frame narrows so the whole film fits under the nav */
.film__frame { position: relative; margin: 24px auto 0; max-width: max(320px, calc((100svh - 124px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0b0b0b; }
.film__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film__toggle { position: absolute; inset: 0; cursor: pointer; }
.film__sound { position: absolute; right: 20px; bottom: 20px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: #fff; background: rgba(15, 15, 15, .38); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .3s, color .3s, transform .35s cubic-bezier(.34, 1.5, .64, 1); }
.film__ico { position: absolute; width: 22px; height: 22px; fill: currentColor; transition: opacity .25s, transform .3s var(--ease); }
.film__ico--on, .film.is-unmuted .film__ico--off { opacity: 0; transform: scale(.6); }
.film.is-unmuted .film__ico--on { opacity: 1; transform: none; }
.film.is-unmuted .film__sound { background: var(--lime); color: #0f0f0f; }
.film__toggle:hover .film__sound, .film__toggle:focus-visible .film__sound { transform: scale(1.08); }
.film__toggle:active .film__sound { transform: scale(.92); }
/* the hint only shows on hover/focus, so the frame stays clean */
.film__hint { position: absolute; right: 68px; bottom: 28px; font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: -.1px; color: #fff; opacity: 0; translate: 6px 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4); transition: opacity .25s, translate .3s var(--ease); pointer-events: none; }
.film__toggle:hover .film__hint, .film__toggle:focus-visible .film__hint { opacity: 1; translate: 0 0; }

/* ---------- Start to finish ---------- */
.stf { padding-top: 120px; }
.stf .h2 { margin-top: 19px; }
.stf__grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 62px; margin-left: -12px; margin-right: -12px; }
.stf__col { padding: 16px; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.stf__col:first-child { border-left: 0; }
.stf__num { font-family: var(--mono); font-size: 14px; letter-spacing: 1.4px; color: var(--grey); padding: 8px 0; }
.stf__art { position: relative; width: 100%; max-width: 376px; aspect-ratio: 376 / 290; margin: 20px 0 30px; container-type: size; animation: float 7s ease-in-out infinite; }
.stf__col:nth-child(2) .stf__art { animation-delay: -2.3s; }
.stf__col:nth-child(3) .stf__art { animation-delay: -4.6s; }
.stf-p { position: absolute; display: block; }
.stf-p img { display: block; width: 100%; height: 100%; }

/* At rest each illustration shows its full design state. Hovering a column (or tapping it on touch screens)
   loops through the Figma frames continuously; leaving lets it ease back to rest. */
.stf-p { transition: translate .7s var(--ease), opacity .45s ease; }
.stf__col:is(:hover, .is-on) .stf-p { animation-duration: 3.2s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
@media (hover: none) { .stf__col:hover:not(.is-on) .stf-p { animation: none; } }

/* Live Capture: the lens retracts flush onto the block, then telescopes back out ring by ring */
.stf__col:is(:hover, .is-on) .lc-ring2 { animation-name: lcRing2; }
.stf__col:is(:hover, .is-on) .lc-ring3 { animation-name: lcRing3; }
.stf__col:is(:hover, .is-on) .lc-ring4 { animation-name: lcRing4; }
.stf__col:is(:hover, .is-on) .lc-base { animation-name: lcBase; }
@keyframes lcRing2 { 0%, 8% { translate: 0 0; } 34%, 48% { translate: -1.52cqw -1.26cqh; } 66%, 100% { translate: 0 0; } }
@keyframes lcRing3 { 0%, 4% { translate: 0 0; } 32%, 52% { translate: -6.27cqw -4.65cqh; } 72%, 100% { translate: 0 0; } }
@keyframes lcRing4 { 0% { translate: 0 0; } 30%, 56% { translate: -14.74cqw -10.92cqh; } 80%, 100% { translate: 0 0; } }
@keyframes lcBase { 0%, 10% { opacity: 1; } 28%, 52% { opacity: 0; } 68%, 100% { opacity: 1; } }

/* System of Record: the cards riffle like book pages, front to back, swinging on their left edge and settling
   back in place; nothing slides away or fades */
.stf-sr { perspective: 900px; }
.stf-sr .stf-p { backface-visibility: visible; }
.stf__col:is(:hover, .is-on) .stf-sr .stf-p { animation-duration: 3.6s; animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
.stf__col:is(:hover, .is-on) .sr-d { animation-name: srPage; }
.stf__col:is(:hover, .is-on) .sr-c { animation-name: srPage; animation-delay: .16s; }
.stf__col:is(:hover, .is-on) .sr-b { animation-name: srPage; animation-delay: .32s; }
.stf__col:is(:hover, .is-on) .sr-a { animation-name: srPageBack; animation-delay: .48s; }
@keyframes srPage { 0%, 6% { rotate: y 0deg; } 24% { rotate: y -58deg; } 40% { rotate: y -52deg; } 62%, 100% { rotate: y 0deg; } }
@keyframes srPageBack { 0%, 6% { rotate: y 0deg; } 24% { rotate: y -30deg; } 40% { rotate: y -26deg; } 62%, 100% { rotate: y 0deg; } }

/* Execution: the block sinks flush into its slot, then pushes out */
.stf__col:is(:hover, .is-on) .ex-block { animation-name: exBlock; }
.stf__col:is(:hover, .is-on) .ex-side { animation-name: exBlock, exSide; }
@keyframes exBlock { 0% { translate: 0 0; } 30%, 46% { translate: -2cqw -1.5cqh; } 72%, 84% { translate: 1.4cqw 1.05cqh; } 100% { translate: 0 0; } }
@keyframes exSide { 0% { opacity: 1; } 26%, 48% { opacity: 0; } 62%, 100% { opacity: 1; } }

.stf__title { font-size: 18px; font-weight: 600; line-height: 1.15; letter-spacing: -.18px; margin-top: auto; }
.stf__body { font-size: 16px; line-height: 1.5; letter-spacing: -.16px; margin-top: 16px; min-height: 144px; }

/* ---------- Deals keep moving ---------- */
.deals { position: relative; margin-top: 69px; height: 740px; overflow: hidden; color: #fff; }
.deals__bg { position: absolute; inset: -60px -104px; background-size: cover; background-position: center; will-change: transform; }
.deals__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(28, 40, 60, .78) 0%, rgba(40, 52, 70, .5) 45%, rgba(30, 36, 40, .45) 100%); }
.deals__inner { position: relative; max-width: 1440px; height: 100%; margin: 0 auto; display: grid; grid-template-columns: 480px 720px; justify-content: space-between; padding: 100px 80px 100px 80px; }
.deals__copy { display: flex; flex-direction: column; justify-content: space-between; height: 540px; }
.deals__title { font-size: 40px; font-weight: 500; line-height: 1.1; letter-spacing: -1.2px; }
.deals__body { font-size: 16px; line-height: 1.5; letter-spacing: -.16px; color: rgba(255, 255, 255, .85); }
.deals__demo { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* Tabs (Figma: white bar, the active tab fills grey left to right as its panel plays) */
.dtabs { align-self: flex-start; display: flex; gap: 2px; padding: 8px; background: #fff; border-radius: 12px; }
.dtab { position: relative; height: 36px; padding: 0 12px; border-radius: 8px; overflow: hidden; font-size: 14px; font-weight: 500;
  color: rgba(6, 6, 6, .55); white-space: nowrap; transition: color .3s; }
.dtab:hover, .dtab.is-active { color: var(--ink); }
.dtab__label { position: relative; }
.dtab__fill { position: absolute; inset: 0; width: 0; background: #d9d9d9; }
.dtab.is-active .dtab__fill { animation: dtabFill var(--dur, 11s) linear forwards; }
.deals[data-paused] .dtab.is-active .dtab__fill { animation-play-state: paused; }
@keyframes dtabFill { to { width: 100%; } }

/* Panel: frosted glass, contents authored at 720x464 and scaled with --k */
.dpanel { position: relative; width: 100%; max-width: 720px; aspect-ratio: 720 / 464; border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, .13); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.dpanel__stage { position: absolute; left: 0; top: 0; width: 720px; height: 464px; transform-origin: 0 0; transform: scale(var(--k, 1)); color: #1c1c1c; }
.dview { position: absolute; inset: 0; opacity: 0; transform: translateX(28px); transition: opacity .45s ease, transform .6s var(--ease); pointer-events: none; }
.dview.is-active { opacity: 1; transform: none; }
.dview.is-leaving { opacity: 0; transform: translateX(-28px); }
.dcaret { display: inline-block; width: 1px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: currentColor; animation: blink 1s steps(1) infinite; }
.is-typing .dcaret, .dcaret.is-busy { animation: none; }
.dcursor { position: absolute; left: var(--cx, 600px); top: var(--cy, 520px); width: 13px; z-index: 5; opacity: 0;
  transition: left var(--cd, .8s) cubic-bezier(.45, 0, .2, 1), top var(--cd, .8s) cubic-bezier(.45, 0, .2, 1), opacity .3s, scale .12s;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.dcursor svg { display: block; width: 100%; }
.dcursor.is-on { opacity: 1; }
.dcursor.is-click { scale: .82; }

/* Follow Through: Iris writes the email */
.fte { position: absolute; left: 67px; top: 23px; width: 700px; height: 460px; background: #ececea; border-radius: 6px 0 0 0; padding: 11px 11px 0; font-size: 9px; }
.fte__badge { display: inline-block; padding: 1px 4px; border-radius: 3px; background: #dbe8fb; color: #2c68c9; font-size: 6.6px; font-weight: 500; }
.fte__title { margin-top: 7px; font-size: 13.4px; letter-spacing: -.1px; }
.fte__sub { margin-top: 3px; font-size: 7.8px; color: #8a8a8a; }
.fte__box { margin-top: 9px; height: 330px; background: #fafafa; border-radius: 3px 0 0 3px; }
.fte__head { display: flex; justify-content: space-between; align-items: center; height: 31px; padding: 0 10px; border-bottom: 1px solid #e6e6e6;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 8.2px; letter-spacing: .6px; color: #3e7bd6; }
.fte__head span:last-child { color: #8c8c8c; font-size: 6.6px; letter-spacing: .4px; padding-right: 0; margin-right: 37px; }
.fte__row { display: flex; align-items: center; height: 29px; margin: 0 47px 0 10px; border-bottom: 1px solid #e6e6e6; }
.fte__row:last-of-type { border-bottom: 0; }
.fte__label { width: 82px; font-size: 7.8px; letter-spacing: .5px; color: #555; }
.fte__chip { display: inline-block; margin-right: 4px; padding: 2.5px 5px; border: 1px solid #dcdcdc; border-radius: 99px; background: #f1f1f1; font-size: 7.4px;
  opacity: 0; transform: scale(.85); transition: opacity .3s, transform .35s cubic-bezier(.34, 1.5, .64, 1); }
.fte__chip.is-in { opacity: 1; transform: none; }
.fte__subject { font-size: 7.6px; color: #666; }
.fte__body { padding: 14px 18px 0; font-size: 7.9px; line-height: 14px; color: #6a6a6a; white-space: pre-wrap; min-height: 180px; }
.fte__actions { display: flex; gap: 6px; align-items: center; padding-top: 10px; font-size: 7.1px; }
.fte__btn { padding: 6px 7px; border-radius: 3px; background: #e2e2e0; color: #333; transition: transform .15s, background .3s, color .3s; }
.fte__btn--approve { background: #0d5a4a; color: #c7f239; font-weight: 500; }
.fte__btn--reject { color: #d23b3b; }
.fte__btn.is-pressed { transform: scale(.92); }
.fte__btn--approve.is-done { background: #c7f239; color: #0f0f0f; }

/* Text Iris: an iMessage thread */
.tim { position: absolute; left: 180px; top: -40px; width: 322px; height: 467px; background: #fff; border-radius: 0 0 31px 31px;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0 12px 23px; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-size: 13.4px; line-height: 1.32; letter-spacing: -.05px; }
.tim__thread { display: flex; flex-direction: column; gap: 4px; }
.tim__msg { max-width: 76%; padding: 6px 10px; border-radius: 15px; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .3s, transform .4s cubic-bezier(.34, 1.4, .64, 1); }
.tim__msg.is-in { opacity: 1; transform: none; }
.tim__msg--me { align-self: flex-end; color: #fff; background: linear-gradient(180deg, #3aa8ff, #0a7cff); border-bottom-right-radius: 5px; transform-origin: 100% 100%; }
.tim__msg--iris { align-self: flex-start; color: #000; background: #e9e9eb; border-bottom-left-radius: 5px; transform-origin: 0 100%; }
.tim__msg--iris + .tim__msg--iris, .tim__msg--me + .tim__msg--me { margin-top: -1px; }
.tim__msg--gap { margin-top: 6px; }
.tim__dots { display: inline-flex; gap: 3px; padding: 9px 11px; }
.tim__dots i { width: 6px; height: 6px; border-radius: 50%; background: #8e8e93; animation: dot 1.1s ease-in-out infinite; }
.tim__dots i:nth-child(2) { animation-delay: .15s; } .tim__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.tim__bar { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.tim__plus { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #efeff0; color: #6c6c70; font-size: 17px; line-height: 1; }
.tim__field { flex: 1; display: flex; align-items: center; min-height: 26px; padding: 3px 10px; border: 1px solid #e3e3e6; border-radius: 15px; color: #c3c3c7; font-size: 13px; }
.tim__field.is-typing { color: #000; }
.tim__mic { margin-left: auto; width: 10px; color: #c3c3c7; }
.tim__mic svg, .aai__mic svg { display: block; width: 100%; }

/* Ask Anything: the question is typed, Iris streams the answer */
.aai { position: absolute; left: 87px; top: -28px; width: 545px; height: 451px; background: #fafafa; border-radius: 0 0 4px 4px; padding: 0 16px; }
.aai__q { position: absolute; right: 16px; top: 28px; max-width: 296px; padding: 9px 15px 10px; background: #e7e7e7; border-radius: 4px; font-size: 15px; line-height: 21px; color: #333;
  opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .45s var(--ease); }
.aai__time { position: absolute; right: 16px; top: 105px; font-size: 8.6px; color: #777; opacity: 0; transition: opacity .3s .2s; }
.aai.is-asked .aai__q, .aai.is-asked .aai__time { opacity: 1; transform: none; }
.aai__think { position: absolute; left: 16px; top: 150px; font-size: 12px; color: #8a8a8a; opacity: 0; transition: opacity .3s; }
.aai__think.is-on { opacity: 1; animation: shimmer 1.4s linear infinite; background: linear-gradient(90deg, #9a9a9a 30%, #e5e5e5 50%, #9a9a9a 70%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes shimmer { to { background-position: -200% 0; } }
.aai__a { position: absolute; left: 16px; right: 22px; top: 149px; font-size: 15.4px; line-height: 19px; color: #1d1d1d; }
.aai__a p + p { margin-top: 19px; }
.aai__box { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 138px; border: 3px solid #dedede; border-radius: 17px; background: #f2f2f2; padding: 30px 28px; }
.aai__input { font-size: 15px; color: #9c9c9c; }
.aai__input.is-typing { color: #1d1d1d; }
.aai__plus, .aai__mic, .aai__send { position: absolute; bottom: 20px; width: 47px; height: 42px; display: grid; place-items: center; border-radius: 4px; }
.aai__plus { left: 28px; background: #e1e1e1; border: 1px solid #d0d0d0; color: #777; font-size: 18px; }
.aai__mic { right: 80px; background: #e1e1e1; border: 1px solid #d0d0d0; }
.aai__mic svg { width: 12px; color: #555; }
.aai__send { right: 28px; background: #0d5a4a; color: #fff; font-size: 18px; transition: transform .15s; }
.aai__send.is-pressed { transform: scale(.9); }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Why Viro ---------- */
/* Three columns as in the Figma frames: steps on the left, the live product card in the middle,
   the active step's label, description and CTA on the right. */
.why { max-width: 1440px; margin: 0 auto; padding: 80px 80px 40px; display: grid; grid-template-columns: minmax(0, 352px) 480px minmax(0, 354px);
  justify-content: space-between; align-items: stretch; }
.why__left, .why__right { display: flex; flex-direction: column; justify-content: space-between; min-height: 600px; }
.tag--green { border-color: #055a52; color: #055a52; }
.why__title { margin-top: 18px; font-size: 43px; font-weight: 500; line-height: 1.04; letter-spacing: -1.6px; color: #1e1e1e; }
.why__title .muted { color: #727272; }
.why__lede { margin-top: 22px; max-width: 320px; font-size: 16.5px; line-height: 24px; color: #6a6a6a; }
.why__list { display: flex; flex-direction: column; border-top: 1px solid transparent; }
.why__item { position: relative; display: block; padding: 20px 6px 22px; text-align: left; }
.why__item:first-child { border-top: 1px solid var(--line); }
.why__title2 { display: block; font-size: 20px; font-weight: 500; letter-spacing: -.45px; white-space: nowrap; color: #8a8a8a; transition: color .35s; }
.why__item.is-active .why__title2 { color: #1e1e1e; }
.why__item:not(.is-active):hover .why__title2 { color: #555; }
.why__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.why__line .step__fill { inset: auto auto -.5px 0; height: 2px; width: 0; background: var(--green-dark); }
.why__item.is-active .why__line .step__fill { height: 2px; width: 100%; animation: fillX var(--dur, 5.5s) linear both; }
@keyframes fillX { from { width: 0; } }
[data-paused] .why__item.is-active .why__line .step__fill { animation-play-state: paused; }
.why__media { position: relative; height: 600px; border-radius: 12px; overflow: hidden; background: #6f8f5a url(assets/why/bg.jpg) center / cover; }
.why__stage { position: absolute; left: 0; top: 0; width: 666px; height: 834px; transform-origin: 0 0; transform: scale(var(--k, .7207)); color: #1d1d1d; }
.why__right .why__label { margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #555; }
.why__desc { display: grid; }
.why__desc p { grid-area: 1 / 1; align-self: end; font-size: 16.5px; line-height: 24px; color: #333; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .45s var(--ease); }
.why[data-step="0"] .why__desc p[data-step="0"], .why[data-step="1"] .why__desc p[data-step="1"], .why[data-step="2"] .why__desc p[data-step="2"] { opacity: 1; transform: none; transition-delay: .15s; }
.why__right { justify-content: flex-start; }
.why__right .why__desc { margin-top: auto; }
.why__cta { align-self: flex-start; margin-top: 26px; height: 40px; padding: 0 20px; font-size: 14.5px; font-weight: 400; }

/* Lead column card (frame px) */
.wl { position: absolute; left: 136px; top: 84px; width: 395px; height: 665px; background: #f8f8f8; border-radius: 8px; transition: opacity .35s ease .35s; }
/* the outgoing card clears first, then the incoming one arrives, so the two never overlap */
.why[data-step="1"] .wl { opacity: 0; transition-delay: 0s; }
.wl-head { position: absolute; left: 0; right: 0; top: 0; height: 84px; display: flex; align-items: center; padding: 0 27px; font-size: 26px; }
.wl-dash { width: 26px; height: 26px; border: 1.6px dashed #9a9a9a; border-radius: 50%; }
.wl-name { margin-left: 17px; font-weight: 500; }
.wl-count { margin-left: 21px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: #d4e4fb; color: #2b6bc4; font-size: 21px; font-weight: 600; }
.wl-plus { margin-left: auto; font-size: 34px; font-weight: 300; color: #555; }
.wl-more { margin-left: 26px; color: #999; font-size: 22px; letter-spacing: -2px; }
.wl-deal { position: absolute; left: 15px; top: 85px; width: 366px; height: 350px; border: 2px solid #dcdcdc; border-radius: 14px; background: #f3f3f3; padding: 0 19px; }
.wl-deal__top { display: flex; justify-content: space-between; align-items: center; height: 76px; font-size: 25px; }
.wl-deal__top .wl-more { margin-right: 6px; }
.wl-row { display: flex; align-items: center; height: 49.5px; font-size: 21px; color: #7a7a7a; }
.wl-ico { display: inline-grid; width: 21px; height: 21px; margin-right: 17px; color: #666; }
.wl-ico svg { width: 100%; height: 100%; }
.wl-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 35px; padding: 0 10px; border-radius: 6px; font-size: 21.5px; color: #1d1d1d;
  transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.6, .64, 1); }
.wl-chip--acct { background: #ebebeb; }
.wl-logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; }
.wl-logo svg { width: 15px; height: 15px; }
.wl-chip--value { background: #dbfbe4; border: 1.5px solid #8ee3a6; color: #137f3a; }
.wl-chip--prio { background: #fde3c4; color: #c2700e; }
.wl-chip--date { background: #ececec; border: 1.5px solid #dcdcdc; }
.wl-chip--age { height: 34px; border: 1.5px solid #d6d6d6; color: #777; background: #f6f6f6; font-size: 20px; }
.wl-chip--age .wl-ico { margin: 0; width: 20px; height: 20px; }
.wl-owner { display: flex; align-items: center; gap: 14px; margin-top: 0; padding-top: 14px; border-top: 2px solid #dedede; font-size: 22px; }
.wl-owner img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.wl-add { position: absolute; left: 15px; top: 583px; width: 366px; height: 70px; display: grid; grid-auto-flow: column; place-content: center; gap: 12px;
  border: 2px dashed #dadada; border-radius: 12px; font-size: 26px; color: #6a6a6a; }
.wl-add { font-weight: 300; }
.wl-add span { font-weight: 400; }
/* hidden pieces are revealed by the step scripts */
.wl .is-pending { opacity: 0; transform: scale(.7); }
.wl-deal.is-away { transform: translate(380px, -30px) rotate(5deg); opacity: 0; }
.wl-deal { transition: transform .9s cubic-bezier(.65, 0, .25, 1), opacity .5s ease, box-shadow .3s; }
.wl-deal.is-held { box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }

/* Meeting card (frame px) */
.wm { position: absolute; left: 77px; top: 139px; width: 513px; height: 555px; background: #fbfbfb; border-radius: 5px; padding: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12); opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .55s var(--ease); }
.why[data-step="1"] .wm { opacity: 1; transform: none; transition-delay: .35s; }
.wm-head { height: 127px; border: 1px solid #e3e3e3; border-radius: 5px; background: #fff; padding: 14px 12px; }
.wm-title { position: relative; padding-left: 12px; font-size: 25.5px; letter-spacing: -.2px; }
.wm-title::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 2px; background: #1f63c6; }
.wm-ended { display: inline-block; margin-top: 12px; padding: 3px 9px; border-radius: 99px; background: #ececec; font-size: 11.5px; color: #333; }
.wm-people { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 10px; color: #777; }
.wm-avatars { display: flex; }
.wm-avatars img, .wm-avatars b { width: 20px; height: 20px; margin-right: -6px; border-radius: 50%; border: 1.5px solid #fff; object-fit: cover; }
.wm-avatars b { display: grid; place-items: center; background: #222; color: #fff; font-size: 8px; font-weight: 600; }
.wm-names { margin-left: 8px; }
.wm-rec { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; padding: 4px 10px; border: 1px solid #d5e3f6; border-radius: 99px; color: #3a77cc; font-size: 11px; }
.wm-rec .wl-ico { width: 11px; height: 11px; margin: 0; color: #3a77cc; }
.wm-tabs { position: relative; display: flex; justify-content: space-around; align-items: center; margin-top: 11px; height: 35px; border-radius: 6px; background: #e8e8e8; font-size: 12.5px; color: #8a8a8a; }
.wm-tabs > span:not(.wm-pill) { position: relative; z-index: 1; padding: 0 8px; transition: color .3s; }
.wm-pill { position: absolute; top: 4px; height: 27px; left: var(--px, 12px); width: var(--pw, 86px); border-radius: 5px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); transition: left .55s var(--ease), width .55s var(--ease); }
.wm-tabs .is-on { color: #1d1d1d; }
.wm-list { margin: 29px 12px 0; padding: 16px 14px 14px; border: 1px solid #e2e2e2; border-radius: 5px; background: #f1f1f1; }
.wm-handled { display: flex; align-items: center; font-size: 14.5px; color: #333; }
.wm-handled .wl-ico { width: 15px; height: 15px; margin-right: 8px; color: #2e7a6a; }
.wm-task { display: flex; align-items: center; gap: 12px; margin-top: 14px; height: 65px; padding: 0 12px 0 13px; border: 1px solid #dcdcdc; border-radius: 5px; background: #f5f5f5;
  transition: opacity .35s ease, transform .45s var(--ease); }
.wm-task > div { flex: 1; }
.wm-task__t { font-size: 12px; color: #222; }
.wm-task__s { margin-top: 7px; font-size: 10px; color: #8a8a8a; }
.wm-undo { padding: 6px 9px; border-radius: 4px; background: #0d5a4a; color: #c7f239; font-size: 10.5px; transition: transform .35s cubic-bezier(.34, 1.6, .64, 1), opacity .25s; }
.wm-chev { width: 14px; height: 14px; color: #999; display: grid; }
.wm-chev svg { width: 100%; }
.wm .is-pending { opacity: 0; transform: translateY(10px); }
.wm .wm-undo.is-pending { transform: scale(.5); }

/* Iris: pointer, face and tag (frame px), shared by steps 1 and 3 */
.wiris { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: transform .9s cubic-bezier(.65, 0, .25, 1), opacity .4s; }
.wiris__hand { max-width: none; position: absolute; left: 486px; top: 512px; width: 28px; }
.wiris__face { max-width: none; position: absolute; left: 512px; top: 528px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #c7f239; }
.wiris__tag { position: absolute; left: 453px; top: 592px; height: 28px; display: flex; align-items: center; padding: 0 10px; border-radius: 99px; white-space: nowrap; font-size: 17px;
  color: #1d1d1d; background: linear-gradient(90deg, rgba(246, 246, 246, .95) 45%, rgba(246, 246, 246, .45)); }
.why[data-step="1"] .wiris { opacity: 0; }
.wiris.is-hidden { opacity: 0; }

/* ---------- Inner page shells ---------- */
.nav__link[aria-current="page"] { color: var(--ink); }
.page-hero { padding-top: 120px; padding-bottom: 160px; }
.page-hero__title { margin-top: 24px; font-size: 56px; font-weight: 500; line-height: 1.05; letter-spacing: -1.6px; }
.page-hero__lede { margin-top: 18px; max-width: 560px; font-size: 18px; line-height: 1.5; color: var(--ink-70); }
.page-hero__wip { display: inline-block; margin-top: 40px; padding: 8px 14px; border: 1px dashed var(--ink-30); border-radius: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .5px; color: var(--ink-50); }

/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; color: var(--light); padding: 112px 24px 24px; }
.footer__bg { position: absolute; inset: -80px 0; background-size: auto 100%; background-position: 46% center; background-repeat: no-repeat; background-color: #2b3340; will-change: transform; }
@media (min-aspect-ratio: 23/10) { .footer__bg { background-size: cover; } }
.footer__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); }
.footer__cta { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.footer__title { max-width: 495px; margin-top: 24px; font-size: 45px; font-weight: 500; line-height: 1.1; }
.footer__btns { display: flex; gap: 12px; margin-top: 30px; }
.footer__card {
  position: relative; max-width: 1228px; margin: 88px auto 0; overflow: hidden;
  border-radius: 12px; color: var(--ink); padding: 56px 34px 0;
  background-color: #e6e6e1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.footer__brand { width: 181px; font-size: 18px; font-weight: 500; line-height: 1.3; margin-left: 0; }
.footer__cols { display: flex; gap: 96px; }
.footer__cols > div { width: 160px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; line-height: 1.5; }
.footer__cols h4 { font-size: 14px; font-weight: 500; color: var(--ink-40); margin-bottom: 4px; }
.footer__cols a { color: var(--ink-75); transition: color .2s; }
.footer__cols a.strong { color: var(--ink); }
.footer__cols a:hover { color: var(--green); }
.footer__legal { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, .08); font-size: 14px; line-height: 1.5; color: var(--ink-75); }
.footer__legal nav { display: flex; gap: 14px; color: var(--ink); }
.footer__legal a:hover { color: var(--green); }
.footer__wordmark { position: relative; height: 0; padding-bottom: 25.65%; margin: 40px -34px 0; }
.footer__mark { position: absolute; left: -.16%; width: 23.36%; top: 0; transform: scaleX(-1) translateY(var(--wm, 60px)); transition: transform 1.2s var(--ease); }
.footer__word { position: absolute; left: 29.38%; right: -.17%; width: 70.8%; max-width: none; top: 2px; transform: translateY(var(--wm, 60px)); transition: transform 1.2s var(--ease) .1s; }
.footer__card.is-in .footer__mark { transform: scaleX(-1) translateY(0); }
.footer__card.is-in .footer__word { transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  :root { --gutter: 48px; }
  .nav__inner { padding: 10px 48px; }
  .gap { padding-right: calc(var(--gutter) + 40px); column-gap: 48px; }
  .deals__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 720px); gap: 48px; padding: 100px 48px; }
  .why { padding: 80px 48px 40px; grid-template-columns: minmax(0, 1fr) 420px minmax(0, 1fr); gap: 32px; }
  .why__media { height: 525px; }
  .footer__top { flex-direction: column; }
  .footer__cols { gap: 64px; }
}

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__inner { justify-content: space-between; }
  .nav__cta { margin-left: auto; }
  .nav__cta .btn--ghost { display: none; }
  .nav__burger { display: block; }
  .nav.is-open .nav__links {
    display: flex; flex-direction: column; align-items: stretch; opacity: 1;
    position: absolute; top: 100%; left: 0; right: 0; padding: 8px 24px 20px;
    background: rgba(249, 249, 249, .97); backdrop-filter: blur(12px); box-shadow: 0 12px 24px rgba(6, 6, 6, .06);
  }
  .gap { grid-template-columns: 1fr; padding-right: var(--gutter); row-gap: 48px; }
  .gap__art { width: 300px; --art-h: 380px; }
  .stf__grid { grid-template-columns: 1fr; margin: 40px 0 0; }
  .stf__col { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0; }
  .stf__col:first-child { border-top: 0; }
  .stf__art { margin: 8px auto 20px; }

  .stf__body { min-height: 0; }
  .deals { height: auto; }
  .deals__inner { grid-template-columns: 1fr; padding: 80px 48px; gap: 40px; }
  .deals__copy { height: auto; gap: 24px; }
  .why { grid-template-columns: 1fr; gap: 40px; padding: 72px var(--gutter) 24px; }
  .why__left, .why__right { min-height: 0; gap: 32px; }
  .why__title2 { white-space: normal; }
  .why__media { width: 100%; max-width: 480px; height: auto; aspect-ratio: 480 / 600; justify-self: center; }
  .footer__cols { flex-wrap: wrap; width: auto; row-gap: 32px; }
  .hero { grid-template-columns: 1fr; row-gap: 20px; }
  .hero__sub { max-width: 520px; padding-bottom: 4px; }
}

/* tablet landscape-ish: steps beside the live cards, copy underneath */
@media (min-width: 821px) and (max-width: 1080px) {
  .why { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
  .why__left { justify-content: space-between; }
  .why__media { justify-self: end; }
  .why__right { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: end; }
  .why__right .why__label { grid-column: 1 / -1; }
  .why__right .why__desc { margin-top: 0; }
  .why__cta { justify-self: start; margin-top: 0; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .nav__inner { height: 64px; padding: 8px 16px; }
  .nav.is-scrolled .nav__inner { height: 60px; }
  .nav__logo { margin-left: 0; }
  .nav__cta .btn--primary { height: 36px; font-size: 14px; }
  .hero { grid-template-columns: 1fr; row-gap: 16px; padding-top: 20px; }
  .hero__title { font-size: 32px; letter-spacing: -.9px; }
  .hero__sub { padding-bottom: 8px; }
  .trusted { padding: 0; gap: 16px; margin-top: 8px; }
  .trusted__label { font-size: 14px; }
  .trusted__track img { height: 28px; padding-right: 64px; }
  .gap { padding-top: 48px; }
  .gap__copy { padding-top: 0; }
  .h2 { font-size: 26px; }
  .feature { padding-top: 64px; }
  .shot { margin-top: 24px; border-radius: 10px; }
  .journey { bottom: 16px; }
  .journey__step:not(.is-active) .journey__label { display: none; }
  .journey__step { padding: 0 11px; }
  .statement { min-height: 520px; }
  .statement__text { font-size: 28px; }
  .stf { padding-top: 80px; }
  .film { padding-top: 60px; }
  .film__frame { border-radius: 10px; }
  .film__sound { right: 12px; bottom: 12px; width: 34px; height: 34px; }
  .film__hint { display: none; }
  .deals__inner { padding: 64px 16px; }
  .deals__title { font-size: 32px; }
  .dtabs { align-self: stretch; overflow-x: auto; }
  .dtab { flex: 1; padding: 0 8px; font-size: 13px; }
  .footer { padding: 96px 16px 16px; }
  .footer__title { font-size: 34px; }
  .footer__card { height: auto; padding: 40px 20px 0; margin-top: 64px; }
  .footer__cols { gap: 34px; width: 100%; }
  .footer__cols > div { width: calc(50% - 17px); }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 12px; margin: 40px 0 0; }
  .footer__legal nav { flex-wrap: wrap; gap: 8px 14px; }
  .footer__wordmark { position: relative; height: 0; padding-bottom: 26%; margin: 32px -20px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .statement__mascot { opacity: 1; transform: none; }
}

/* ============ PRODUCT MEGA MENU ============ */
.nav__drop { position: relative; }
.nav__caret { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.nav__drop:is(:hover, :focus-within) .nav__caret { transform: rotate(180deg); }
.mega {
  position: absolute; top: calc(100% + 10px); left: -24px; width: min(1000px, calc(100vw - 64px)); z-index: 60;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 20px; padding: 12px; border: 1px solid #ececec; border-radius: 18px;
  background: #fff; box-shadow: 0 30px 60px -30px rgba(6, 6, 6, .3);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .35s var(--ease), visibility 0s .35s;
}
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
.nav__drop:is(:hover, :focus-within) .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease); }
.nav__links:has(.nav__drop:hover) { opacity: 1; }
.mega__list { display: grid; gap: 4px; }
.mega__item { display: grid; grid-template-columns: 38px minmax(0, 1fr) 22px; gap: 4px; padding: 18px 18px 18px 22px; border-radius: 12px; transition: background .3s; }
.mega__num { padding-top: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 1.4px; color: #6a6a6a; }
.mega__txt b { display: block; font-size: 17px; font-weight: 500; color: #1e1e1e; transition: color .3s; }
.mega__txt span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.55; color: #7a7a7a; }
.mega__go { width: 22px; height: 22px; fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--ease); }
.mega[data-active="0"] .mega__item[data-i="0"], .mega[data-active="1"] .mega__item[data-i="1"],
.mega[data-active="2"] .mega__item[data-i="2"], .mega[data-active="3"] .mega__item[data-i="3"] { background: #f0f0f0; }
.mega[data-active="0"] .mega__item[data-i="0"] b, .mega[data-active="1"] .mega__item[data-i="1"] b,
.mega[data-active="2"] .mega__item[data-i="2"] b, .mega[data-active="3"] .mega__item[data-i="3"] b { color: var(--green); }
.mega[data-active="0"] .mega__item[data-i="0"] .mega__go, .mega[data-active="1"] .mega__item[data-i="1"] .mega__go,
.mega[data-active="2"] .mega__item[data-i="2"] .mega__go, .mega[data-active="3"] .mega__item[data-i="3"] .mega__go { opacity: 1; transform: none; }
/* green stage: the art for the hovered page crossfades in, drawn in deep teal */
.mega__panel { position: relative; border-radius: 14px; background: #075c53; overflow: hidden; min-height: 420px; }
.mega__art { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.94); transition: opacity .45s, transform .7s var(--ease); }
.mega[data-active="0"] .mega__art[data-i="0"], .mega[data-active="1"] .mega__art[data-i="1"],
.mega[data-active="2"] .mega__art[data-i="2"], .mega[data-active="3"] .mega__art[data-i="3"] { opacity: 1; transform: none; }
.mega__iso { width: 78%; max-width: 376px; margin: 0; animation: float 7s ease-in-out infinite; filter: invert(.86) sepia(1) saturate(2.4) hue-rotate(122deg) brightness(.6); }
.mega__iris { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.mega__iris img { width: 120px; height: 120px; max-width: none; border-radius: 50%; animation: float 6s ease-in-out infinite; }
.mega__iris span { max-width: 240px; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: #fff; font-size: 14px; line-height: 1.4; color: #1e1e1e; }

.theme-dark .mega { border-color: #fff; }

@media (max-width: 1080px) {
  /* in the burger menu the products become a plain indented list */
  .nav__drop { display: flex; flex-direction: column; }
  .mega { position: static; width: auto; display: block; padding: 0 0 6px 16px; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .mega::before, .mega__panel, .mega__txt span, .mega__go, .nav__caret { display: none; }
  .mega__item { grid-template-columns: 30px 1fr; padding: 10px 16px; background: none !important; }
  .mega__txt b { font-size: 15px; color: var(--ink-70) !important; }
  .theme-dark .mega__txt b { color: rgba(242, 242, 242, .72) !important; }
}
.mega__fu { width: 78%; max-width: 376px; }
.mega__fu img { width: 100%; height: auto; }
.mega__fu { animation: float 7s ease-in-out infinite; }
/* Product only opens the menu; it isn't a page link */
.nav__link--menu { cursor: default; }
.nav__link--menu[data-current] { color: var(--ink); }
.theme-dark .nav__link--menu[data-current] { color: #fff; }

/* System of Record: a row of record cards that swell under the cursor like a dock, and roll a slow wave at rest */
.stf-sr { animation: none; }
.sr-plates { width: 100%; height: 100%; overflow: visible; }
.sr-plates path { stroke: #c4c4c4; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sr-plates .t { fill: #fff; }
.sr-plates .f { fill: #fcfcfc; }
.sr-plates .e { fill: #ececec; }
.sr-plates .b { fill: #f3f3f3; }

/* trusted-by logos: five separate marks per set, sized by eye so they read at the same weight */
.trusted__set { display: flex; align-items: center; gap: 72px; padding-right: 72px; flex-shrink: 0; }
.trusted__track .trusted__set img { width: auto; height: 28px; padding: 0; max-width: none; opacity: .9; }
.trusted__track .trusted__set .lg-rnb { height: 22px; }
.trusted__track .trusted__set .lg-stacks { height: 24px; }
.trusted__track .trusted__set .lg-bfa { height: 25px; }
@media (max-width: 640px) {
  .trusted__set { gap: 40px; padding-right: 40px; }
  .trusted__track .trusted__set img { height: 22px; }
  .trusted__track .trusted__set .lg-rnb { height: 17px; }
  .trusted__track .trusted__set .lg-stacks { height: 19px; }
  .trusted__track .trusted__set .lg-bfa { height: 20px; }
}

/* ============ NAV: full-width bar at the top, floating pill once you scroll (desktop) ============ */
@media (min-width: 1081px) {
  .nav, .nav.is-scrolled { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transition: padding .5s var(--ease); }
  .nav.is-scrolled { padding-top: 10px; } /* the pill floats a little below the top edge */
  .nav__inner {
    border: 1px solid transparent; border-radius: 0; background-color: transparent;
    transition: max-width .7s var(--ease), height .5s var(--ease), margin .5s var(--ease), padding .6s var(--ease),
      border-radius .5s var(--ease), background-color .5s, border-color .5s, box-shadow .5s, gap .5s var(--ease);
  }
  .nav.is-scrolled .nav__inner {
    max-width: 860px; height: 54px; padding: 0 8px 0 18px; gap: 8px; border-radius: 14px;
    background-color: color-mix(in srgb, var(--page, var(--bg)) 82%, transparent);
    backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-color: rgba(6, 6, 6, .07); box-shadow: 0 10px 30px -16px rgba(6, 6, 6, .22);
  }
  .nav__logo, .nav__link, .nav__cta .btn, .nav__cta { transition: width .5s var(--ease), height .5s var(--ease), padding .5s var(--ease), font-size .5s var(--ease), margin .5s var(--ease), border-color .5s, color .2s, background .2s; }
  .nav__logo img { width: 100%; height: auto; }
  .nav.is-scrolled .nav__logo { width: 72px; margin-left: 0; }
  .nav.is-scrolled .nav__links { opacity: 1; }
  .nav.is-scrolled .nav__link { height: 34px; padding: 0 11px; font-size: 14.5px; border-radius: 8px; }
  /* a hairline divides the page links from Login / Request a Demo, as on Lightfield */
  .nav__cta { border-left: 1px solid transparent; }
  .nav.is-scrolled .nav__cta { padding-left: 10px; border-left-color: rgba(6, 6, 6, .1); }
  .nav.is-scrolled .nav__cta .btn { height: 36px; padding: 0 12px; font-size: 14.5px; }
  .nav.is-scrolled .nav__cta .btn--primary { border-radius: 8px; }
  .nav.is-scrolled .mega { top: calc(100% + 16px); }
  /* dark page: a dark pill with a light hairline */
  .theme-dark .nav.is-scrolled .nav__inner { border-color: rgba(255, 255, 255, .08); box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .7); }
  .theme-dark .nav.is-scrolled .nav__cta { border-left-color: rgba(255, 255, 255, .12); }
}

/* mascot follows the cursor: the eyes (and a little of the smile) turn toward it; hover hops, click jumps */
.statement__mascot { cursor: pointer; outline: none; }
.statement__mascot:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; border-radius: 50%; }
.mascot__look { transform-box: view-box; }
/* while tracking, the eyes stop wandering on their own but keep blinking */
.statement.is-tracking .mascot__eyes { animation: eyesBlinkOnly 4.2s ease-in-out infinite; }
@keyframes eyesBlinkOnly { 0%, 66%, 74%, 100% { transform: scaleY(1); } 70% { transform: scaleY(.1); } }
.mascot { transform-origin: 50% 100%; }
.mascot.is-hop { animation: mascotHop .55s cubic-bezier(.3, .7, .3, 1); }
.mascot.is-jump { animation: mascotJump .9s cubic-bezier(.3, .7, .3, 1); }
@keyframes mascotHop {
  0% { transform: none; } 20% { transform: scale(1.12, .88); } 45% { transform: translateY(-14px) scale(.94, 1.07); }
  70% { transform: scale(1.08, .92); } 85% { transform: scale(.98, 1.02); } 100% { transform: none; }
}
@keyframes mascotJump {
  0% { transform: none; } 14% { transform: scale(1.22, .78); } 38% { transform: translateY(-38px) scale(.88, 1.14) rotate(-8deg); }
  52% { transform: translateY(-42px) scale(.95, 1.05) rotate(6deg); } 72% { transform: scale(1.18, .84); }
  84% { transform: translateY(-6px) scale(.97, 1.04); } 100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .mascot.is-hop, .mascot.is-jump { animation: none; } }

/* ---------- Compare menu ---------- */
.mega--cmp { display: block; width: max-content; max-width: calc(100vw - 48px); padding: 18px 12px 12px; }
.cmpm__head { padding: 0 12px 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: #8a8a8a; }
.cmpm__grid { display: grid; grid-template-columns: repeat(3, max-content); gap: 4px; }
.cmpm__item { display: flex; align-items: center; gap: 14px; padding: 12px 20px 12px 12px; border-radius: 12px; transition: background .3s; }
.cmpm__logo { display: grid; place-items: center; width: 92px; height: 52px; flex-shrink: 0; border: 1px solid #ececec; border-radius: 10px; background: #fff; transition: border-color .3s, transform .45s var(--ease); }
.cmpm__logo img { display: block; max-width: none; object-fit: contain; }
.cmpm__txt { min-width: 0; }
.cmpm__txt b { display: block; font-size: 15px; font-weight: 500; color: #1e1e1e; transition: color .3s; }
.cmpm__txt span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: #7a7a7a; white-space: nowrap; }
.cmpm__item:is(:hover, :focus-visible, [aria-current="page"]) { background: #f0f0f0; }
.cmpm__item:is(:hover, :focus-visible) b, .cmpm__item[aria-current="page"] b { color: var(--green); }
.cmpm__item:is(:hover, :focus-visible) .cmpm__logo { border-color: #dcdcdc; transform: translateY(-2px); }
/* rows rise in as the menu opens */
.mega--cmp .cmpm__item { opacity: 0; transform: translateY(6px); transition: background .3s, opacity .3s, transform .45s var(--ease); }
.nav__drop:is(:hover, :focus-within) .mega--cmp .cmpm__item { opacity: 1; transform: none; }
.nav__drop:is(:hover, :focus-within) .mega--cmp .cmpm__item:nth-child(3n + 2) { transition-delay: 0s, .04s, .04s; }
.nav__drop:is(:hover, :focus-within) .mega--cmp .cmpm__item:nth-child(3n) { transition-delay: 0s, .08s, .08s; }
.nav__drop:is(:hover, :focus-within) .mega--cmp .cmpm__item:nth-child(n + 4) { transition-delay: 0s, .06s, .06s; }
.nav__drop:is(:hover, :focus-within) .mega--cmp .cmpm__item:nth-child(n + 7) { transition-delay: 0s, .12s, .12s; }

/* footer compare column */
.footer__cmp { width: 160px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; line-height: 1.5; }
.footer__cmp a { color: var(--ink-75); transition: color .2s; }
.footer__cmp a:hover { color: var(--green); }
@media (max-width: 1080px) {
  /* burger menu: the comparisons become a compact two-column list */
  .mega--cmp { width: auto; padding: 0 0 6px 16px; }
  .cmpm__head, .cmpm__logo, .cmpm__txt span { display: none; }
  .cmpm__grid { grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .mega--cmp .cmpm__item { padding: 8px 8px 8px 16px; white-space: nowrap; opacity: 1; transform: none; background: none !important; }
  .cmpm__txt b { font-size: 14.5px; font-weight: 400; color: var(--ink-70) !important; }
  .theme-dark .cmpm__txt b { color: rgba(242, 242, 242, .72) !important; }
}
.footer__res a:hover { color: var(--green); }
@media (min-width: 1081px) { .footer__cols { gap: 56px; } }
@media (min-width: 1081px) {
  .footer__brand { flex-shrink: 0; min-width: 210px; }
  .footer__cols > div { width: auto; min-width: 104px; white-space: nowrap; }
  .footer__cols { gap: 48px; }
}

/* nothing may widen the page sideways (hidden menus, parallax art); clip keeps sticky elements working */
html, body { overflow-x: clip; }
@media (max-width: 1080px) {
  /* the open menu scrolls on its own when it's taller than the screen (small phones) */
  .nav.is-open .nav__links { max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}

/* ---------- Product pages: content is simply there, no scroll fade-ins ---------- */
.no-reveal main .reveal { opacity: 1; transform: none; transition: none; }
.no-reveal .pp-media img { clip-path: none; transition: none; }
.no-reveal .pp-vs__card--with li { opacity: 1; transform: none; transition: none; }

/* ---------- Announcement bar (above the nav; config in viro-tools/site_config.json) ---------- */
.annc { position: relative; z-index: 51; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 48px; background: var(--green); color: #fff; font-size: 14px; line-height: 1.3; transition: margin-top .35s var(--ease), opacity .3s; }
.annc.is-gone { margin-top: -40px; opacity: 0; }
.annc__link { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: inherit; }
.annc__tag { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: var(--lime); font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #0b0b0b; }
.annc__text { color: rgba(255, 255, 255, .82); }
.annc__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: #fff; white-space: nowrap; }
.annc__cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.annc__link:hover .annc__cta svg { transform: translateX(3px); }
.annc__link:hover .annc__text { color: #fff; }
.annc__x { position: absolute; right: 12px; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; color: rgba(255, 255, 255, .7); transition: color .2s, background .2s; }
.annc__x:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.annc__x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.annc__short { display: none; }
@media (max-width: 640px) {
  /* one compact line on phones: tag, short text, arrow */
  .annc { min-height: 38px; padding: 0 40px 0 16px; font-size: 13.5px; }
  .annc__link { gap: 8px; padding: 8px 0; min-width: 0; }
  .annc__text { display: none; }
  .annc__short { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: #fff; }
  .annc__cta { font-size: 0; gap: 0; }
  .annc__cta svg { width: 15px; height: 15px; }
  .annc__tag { font-size: 9.5px; padding: 2px 7px; }
  .annc__x { right: 6px; }
}

/* trusted-by logos, v2: one flat grey for every mark, and heights balanced by visual weight
   (bold, compact marks sit shorter; the thin Kaizen wordmark a touch taller) */
.trusted__set { gap: 64px; padding-right: 64px; }
.trusted__track .trusted__set img { height: 24px; opacity: 1; filter: brightness(0) opacity(.46); }
.trusted__track .trusted__set .lg-kaizen { height: 25px; }
.trusted__track .trusted__set .lg-rnb { height: 18px; }
.trusted__track .trusted__set .lg-stacks { height: 19px; }
.trusted__track .trusted__set .lg-bfa { height: 22px; }
@media (max-width: 760px) {
  .trusted__set { gap: 36px; padding-right: 36px; }
  .trusted__track .trusted__set img { height: 18px; }
  .trusted__track .trusted__set .lg-kaizen { height: 19px; }
  .trusted__track .trusted__set .lg-rnb { height: 14px; }
  .trusted__track .trusted__set .lg-stacks { height: 15px; }
  .trusted__track .trusted__set .lg-bfa { height: 17px; }
}

/* hero: Iris's name tag stays legible over any card content (solid pill, hairline ring, always on top) */
.hs-cursor { z-index: 20; }
.hs-cursor__tag { background: #141414; box-shadow: 0 0 0 max(1px, .07cqw) rgba(255, 255, 255, .55), 0 .25cqw .7cqw rgba(0, 0, 0, .25); padding: .22cqw .65cqw .22cqw .22cqw; top: 120%; left: 85%; width: max-content; }
.hs-cursor__tag img { flex-shrink: 0; }