/* Caliber — marketing site styles.
   Tokens, type scale and components follow the "Styleguide" page in the Caliber Figma file. */

/* Fonts come from the Adobe Fonts kit linked in each page's <head> (neue-haas-grotesk-display / -text, ibm-plex-mono). */

:root {
  /* Base */
  --black: #000;
  --white: #fff;
  --red: #d82828;
  /* Accent */
  --green: #02b066;
  --gold: #c89754;
  --red-bright: #ff4242;
  --red-light: #ff6060;
  --code-red: #b82020;
  /* Neutral */
  --n-950: #111;
  --n-900: #171717;
  --n-600: #666;
  --n-500: #7a7a7a;
  --n-400: #a6a6a6;
  --n-300: #ccc;
  --n-200: #e4e4e4;
  --n-100: #f4f4f4;
  --n-50: #f5f5f5;
  --dim: rgba(0, 0, 0, .6);
  --dim-on-dark: rgba(255, 255, 255, .6);
  /* Status */
  --success-bg: #e6f5ee;
  --warning-bg: #fcf2e2;
  --danger-bg: #fdeaea;

  --font-display: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
  --font-text: "neue-haas-grotesk-text", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "ibm-plex-mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: 60px;
  --max: 1440px;
  --nav-h: 56px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.215, .61, .355, 1);
  --ease-btn: cubic-bezier(.23, 1, .32, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-sui: cubic-bezier(.19, 1, .22, 1);
  --ease-reveal: cubic-bezier(.38, 0, .215, 1);
  --ease-slide: cubic-bezier(0, 1, .4, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 24px;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 8px 14px; border-radius: 20px; background: var(--black); color: var(--white);
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section-dark { background: var(--black); color: var(--white); }
.split { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: center; }
.split--top { align-items: start; }

/* ---------- Type ---------- */
.eyebrow { font-size: 14px; line-height: 20px; letter-spacing: .2px; text-transform: uppercase; }
.display {
  font-family: var(--font-display); font-weight: 400;
  font-size: 80px; line-height: 1; letter-spacing: -1px;
}
.h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 52px; line-height: 58px; letter-spacing: -.5px;
}
.h2--tight { line-height: 1; }
/* The dimmed part of a heading is the heading's own colour at 60%: black at 60% on dark text,
   white at 60% on light text. Browsers without color-mix() fall back to the fixed values. */
.h2 .dim, .display .dim { color: var(--dim); color: color-mix(in srgb, currentColor 60%, transparent); }
.section-dark .h2 .dim, .on-dark .h2 .dim { color: var(--dim-on-dark); }
.h3 { font-size: 28px; line-height: 1.2; }
.title { font-size: 20px; line-height: 1.2; }
.body { font-size: 16px; line-height: 24px; }
.body + .body { margin-top: 24px; }
.muted { color: var(--n-600); }
.soft { opacity: .7; }
.soft-60 { opacity: .6; }
.center { text-align: center; }
.measure-414 { max-width: 414px; }
.measure-374 { max-width: 374px; }

/* Section headers: eyebrow, title, intro */
.sh { display: flex; flex-direction: column; align-items: center; gap: 60px; text-align: center; }
.sh__copy { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.sh__copy .h2 { max-width: 782px; }
.sh__copy .body { max-width: 392px; }
.sh--left { align-items: flex-start; text-align: left; }
.sh--left .sh__copy { align-items: flex-start; }

/* ---------- Buttons (Styleguide › Buttons) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 23px; border: 1px solid transparent; border-radius: 26px;
  font-family: var(--font-text); font-weight: 500; font-size: 16px; line-height: 24px;
  white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn--black { background: var(--black); color: var(--white); }
.btn--white { background: var(--white); color: var(--black); }
.btn--outline-black { border-color: var(--black); color: var(--black); }
.btn--outline-white { border-color: var(--white); color: var(--white); }
/* Hover (every colour and style, per Styleguide › Buttons): dark glass — 60% black, 20% white stroke,
   background blur. Focus swaps in a solid white stroke (80% on small buttons). */
:is(.btn--black, .btn--white, .btn--outline-white, .btn--outline-black, .nav__cta):is(:hover, :focus-visible) {
  background: rgba(0, 0, 0, .6); border-color: rgba(255, 255, 255, .2); color: var(--white);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn:focus-visible { border-color: var(--white); outline: none; }
.btn--sm:focus-visible { border-color: rgba(255, 255, 255, .8); }

/* Label stagger (after sui.io): letters slide up one line, 10 ms apart, and the copy below
   (a text-shadow one line-height down) slides into place. The line-height is 1.5em on both sizes. */
.btn__label { display: block; overflow: hidden; line-height: 1.5em; padding: 0 2px; margin: 0 -2px; }
.btn__char { display: inline-block; white-space: pre; text-shadow: 0 1.5em currentColor; transition: transform .4s var(--ease-expo); transition-delay: calc(var(--i) * 10ms); }
@media (hover: hover) {
  .btn:is(:hover, :focus-visible) .btn__char { transform: translateY(-1.5em); }
}
.btn--sm { height: 36px; padding: 0 17px; border-radius: 30px; gap: 4px; font-size: 14px; line-height: 21px; letter-spacing: .2px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Text link with arrow ("Find out more") */
.more { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; line-height: 24px; }
.link-line, .more__label, .nav__link, .nav__signin, .footer__links a, .toc__label {
  padding-bottom: 1px;
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
  transition: background-size .6s var(--ease-out);
}
:is(.link-line, .more__label, .nav__link, .nav__signin, .footer__links a):hover,
.scard:is(:hover, :focus-visible) .more__label, .toc a:is(:hover, .is-active) .toc__label {
  background-size: 100% 1px; background-position: 0 100%;
}
/* Links inside running text stay underlined; on hover the line redraws from the left. */
.link-inline { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; padding-bottom: 1px; }
.link-inline:hover { animation: line-redraw .8s var(--ease-out); }
@keyframes line-redraw {
  0% { background-size: 100% 1px; background-position: 100% 100%; }
  45% { background-size: 0 1px; background-position: 100% 100%; }
  46% { background-size: 0 1px; background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}
.more svg { width: 16px; height: 16px; flex: none; transition: transform .3s var(--ease); }

/* ---------- Tags & tabs (Styleguide › Tags & Tabs) ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 20px;
  padding: 5px 10px; border-radius: 20px; background: var(--white);
  font-size: 12px; line-height: 1; letter-spacing: .2px; text-transform: uppercase; color: var(--black);
}
.tag--glass {
  gap: 4px; padding: 3px 7px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  font-size: 10px; line-height: 1.1; color: var(--white);
}
.tag--outline { gap: 4px; padding: 3px 7px; border: 1px solid var(--n-300); background: none; font-size: 10px; line-height: 1.1; color: var(--n-600); }

.tabs {
  position: relative; display: inline-flex; gap: 4px; padding: 4px;
  border-radius: 40px; background: rgba(0, 0, 0, .2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.tabs__indicator {
  position: absolute; top: 4px; left: 0; height: calc(100% - 8px); width: 0;
  border-radius: 20px; background: var(--black);
  transition: transform .45s var(--ease), width .45s var(--ease);
}
.tab {
  position: relative; z-index: 1; padding: 9px 15px; border: 1px solid transparent; border-radius: 20px;
  background: none; color: var(--white); font-size: 14px; line-height: 1.1; letter-spacing: .2px; white-space: nowrap;
  transition: opacity .2s var(--ease);
}
.tab:not([aria-selected="true"]):hover { opacity: .7; }
.tabs:not(.is-ready) .tab[aria-selected="true"] { background: var(--black); border-color: var(--black); }

/* ---------- Header / navigation (Styleguide › Header) ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  color: var(--black); transition: color .3s var(--ease);
}
.nav__inner {
  position: relative; z-index: 2; height: 100%; max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
}
.nav--dark { color: var(--white); }
.logo { display: inline-flex; flex: none; line-height: 0; }
.logo__svg--sm { width: 116px; height: 22px; }
.logo__svg--lg { width: 130px; height: 21px; }
.nav__menu { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 32px; }
.nav__link { font-size: 16px; line-height: 1.3; }
.nav__link[aria-current="page"] { font-weight: 500; }
.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav__signin { font-size: 16px; line-height: 1.3; }
.nav__cta { background: var(--black); color: var(--white); }
.nav--dark .nav__cta:not(:hover):not(:focus-visible) { background: var(--white); color: var(--black); }

/* Scrolled: logo, menu items and Sign in fade out one after another, left to right.
   The call to action stays. */
.nav__logo, .nav__link, .nav__signin { transition: opacity .35s var(--ease), color .3s var(--ease), background-size .6s var(--ease-out); }
.nav.is-scrolled:not(.is-open):not(:focus-within) :is(.nav__logo, .nav__link, .nav__signin) { opacity: 0; pointer-events: none; }
.nav.is-scrolled:not(.is-open) .nav__menu .nav__link:nth-child(1) { transition-delay: .05s; }
.nav.is-scrolled:not(.is-open) .nav__menu .nav__link:nth-child(2) { transition-delay: .1s; }
.nav.is-scrolled:not(.is-open) .nav__menu .nav__link:nth-child(3) { transition-delay: .15s; }
.nav.is-scrolled:not(.is-open) .nav__menu .nav__link:nth-child(4) { transition-delay: .2s; }
.nav.is-scrolled:not(.is-open) .nav__signin { transition-delay: .25s; }

.nav__toggle {
  display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit;
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav__toggle span { position: absolute; left: 13px; width: 18px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease); }
.nav__toggle span:nth-child(1) { top: 18.5px; }
.nav__toggle span:nth-child(2) { top: 24.5px; }
.nav.is-open .nav__toggle span { top: 21.5px; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { transform: rotate(-45deg); }

/* Mobile menu: opens from the top down. */
.mnav {
  position: fixed; inset: 0; z-index: 1; display: none; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 24px) 0 0; background: var(--white); color: var(--black);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .6s var(--ease), visibility 0s linear .6s;
}
.nav.is-open .mnav { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .6s var(--ease), visibility 0s; }
.mnav__links { display: flex; flex: 1; flex-direction: column; justify-content: center; }
.mnav__link {
  display: block; padding: 4px 20px;
  font-family: var(--font-display); font-size: 52px; line-height: 58px; letter-spacing: -.5px;
  opacity: 0; transform: translateY(-16px); transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.mnav__link[aria-current="page"] { color: var(--dim); }
.nav.is-open .mnav__link { opacity: 1; transform: none; }
.nav.is-open .mnav__link:nth-child(1) { transition-delay: .15s; }
.nav.is-open .mnav__link:nth-child(2) { transition-delay: .2s; }
.nav.is-open .mnav__link:nth-child(3) { transition-delay: .25s; }
.nav.is-open .mnav__link:nth-child(4) { transition-delay: .3s; }
.mnav__actions { display: flex; flex-direction: column; gap: 10px; padding: 20px; opacity: 0; transition: opacity .4s var(--ease); }
.nav.is-open .mnav__actions { opacity: 1; transition-delay: .35s; }
.nav.is-open { color: var(--black); }

/* ---------- Footer (Styleguide › Footer) ---------- */
.footer { background: var(--black); color: var(--white); }
.footer--light { background: var(--white); color: var(--black); border-top: 1px solid var(--n-200); }
.footer__inner { display: flex; flex-direction: column; gap: 80px; padding-top: 40px; padding-bottom: 20px; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.footer__cols { display: flex; gap: 40px; }
.footer__col { display: flex; flex-direction: column; gap: 30px; width: 188px; }
.footer__heading { font-size: 14px; line-height: 1; letter-spacing: .2px; text-transform: uppercase; }
.footer__links { font-size: 18px; line-height: 1.4; letter-spacing: -.54px; }
.footer__bottom { display: flex; justify-content: space-between; font-size: 16px; line-height: 1.6; letter-spacing: -.48px; }

/* ---------- Shared blocks ---------- */
.card {
  border: 1px solid var(--n-200); border-radius: 30px; background: var(--n-50); overflow: hidden;
}
.media { border-radius: 30px; overflow: hidden; background: var(--n-50); }
.media img { width: 100%; height: auto; }

/* Feature grid: icon + text, 300px columns that wrap and centre */
.features { display: flex; flex-wrap: wrap; justify-content: center; gap: 60px 40px; }
.feature { display: flex; flex-direction: column; gap: 30px; width: calc((100% - 120px) / 4); max-width: 300px; padding-right: 40px; }
.feature img { width: 48px; height: 48px; }
.feature__copy { display: flex; flex-direction: column; gap: 10px; }
.feature__text { font-size: 16px; line-height: 1.4; }
.feature__lead { font-size: 20px; line-height: 1.4; color: #606060; }
.features--center .feature { align-items: center; padding: 0 10px; text-align: center; }

/* Numbered steps (01, 02 …) */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 60px 39px; }
.step { display: flex; flex-direction: column; gap: 30px; }
.step__num { font-size: 14px; line-height: 1; letter-spacing: .2px; }
.step__copy { display: flex; flex-direction: column; gap: 16px; }

/* Text + image rows used on Define / Assure / Measure */
.row { padding-bottom: 60px; }
.row .split { grid-template-columns: 524fr 641fr; column-gap: 155px; }
.row--reverse .split { grid-template-columns: 641fr 641fr; }
.row__copy { display: flex; flex-direction: column; gap: 60px; }
.row__copy .text { display: flex; flex-direction: column; gap: 30px; }
.row__copy .body { max-width: 413px; }
.row--reverse .row__media { order: 2; }

/* Right-aligned heading (e.g. "Who sees it?") */
.kicker { padding-bottom: 60px; }
.kicker .h2 { line-height: 1; margin-left: calc(50% + 18px); max-width: 532px; }

/* Pros / cons comparison */
.compare { display: flex; justify-content: center; gap: 10px; padding-bottom: 120px; }
.compare__card { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 430px; padding: 20px 30px 40px; }
.compare__list { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.compare__item { display: flex; align-items: center; gap: 30px; }
.badge-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; }
.badge-icon img { width: 16px; height: 16px; }
.badge-icon--no { background: var(--red-bright); }
.badge-icon--yes { background: var(--green); }

/* Hero for inner pages (Define, Assure, Measure, 404) */
.page-hero { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 120px; }
.page-hero .split { grid-template-columns: 525fr 640fr; column-gap: 155px; }
.page-hero__copy { display: flex; flex-direction: column; gap: 40px; }
.page-hero__copy .text { display: flex; flex-direction: column; gap: 30px; }
.page-hero__copy .h2 { line-height: 1; }
.page-hero__copy .body { max-width: 414px; }
.page-hero__media { border-radius: 30px; overflow: hidden; background: var(--n-50); }
.page-hero__media img { width: 100%; }

/* Pre-footer call to action band */
.cta-band { position: relative; overflow: hidden; color: var(--white); background: var(--black); }
.cta-band__bg { position: absolute; inset: 0; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; min-height: 576px; padding-block: 80px; text-align: center; }
.cta-band__inner .h2 { max-width: 412px; }
.cta-band--fade .cta-band__bg img { height: 966px; margin-top: -113px; }
.cta-band::after {
  content: ""; position: absolute; inset: auto 0 0; height: 189px; pointer-events: none;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .2) 57.6%, rgba(0, 0, 0, 0) 100%);
}

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 20px; padding: 40px; border-radius: 20.5px; }
.form--glass {
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .5); color: var(--white);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.form--light { border: 1px solid var(--n-200); background: var(--n-50); }
.field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.field__label { font-size: 14px; line-height: 16px; }
.form--glass .field__label { font-weight: 500; }
.field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.input {
  width: 100%; height: 48px; padding: 0 14px; border-radius: 8px;
  font: 16px/1.1 var(--font-text); color: inherit; appearance: none;
  transition: border-color .2s var(--ease);
}
textarea.input { height: 140px; padding: 13px 14px; resize: vertical; }
select.input { padding-right: 40px; background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; cursor: pointer; }
.input::placeholder { color: inherit; opacity: .5; }
.form--glass .input { border: 1px solid rgba(255, 255, 255, .2); background-color: rgba(0, 0, 0, .2); }
.form--glass .input:focus { outline: none; border-color: rgba(255, 255, 255, .6); }
.form--glass select.input { background-image: url("../assets/icons/chevron-down-white.svg"); }
.form--glass select.input option { color: var(--black); }
.form--light .input { border: 1px solid var(--n-200); background-color: var(--white); }
.form--light .input:focus { outline: none; border-color: var(--n-500); }
.form--light select.input { background-image: url("../assets/icons/chevron-down-black.svg"); }
select.input:has(option[value=""]:checked) { color: rgba(127, 127, 127, 1); }
.form--glass select.input:has(option[value=""]:checked) { color: rgba(255, 255, 255, .5); }
/* Spam trap: off-screen for people, still filled in by bots (the form service drops those posts) */
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { height: 52px; border-radius: 26px; }
.form__note { font-size: 12px; line-height: 18px; opacity: .45; }
.form--light .form__note { opacity: .6; }
.form__status { font-size: 14px; line-height: 20px; }
.form__status:empty { display: none; }

/* ======================================================================
   HOMEPAGE
   ====================================================================== */

/* Hero: full-bleed image that covers the viewport at every width (like wonderful.ai);
   a portrait crop replaces it on phones. */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; max-height: 1080px; overflow: hidden; color: var(--white); background: var(--black); }
.hero__media, .hero__media img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media img, .hero__video { object-fit: cover; object-position: 50% 45%; }
/* The still (the video's first frame) shows until the video actually plays, then the video fades over it */
.hero__video { opacity: 0; transition: opacity .6s var(--ease); }
.hero__video.is-playing { opacity: 1; }
.hero__inner { position: relative; height: 100%; display: flex; flex-direction: column; padding-top: var(--nav-h); padding-bottom: 50px; }
.hero__center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 38px; text-align: center; padding-bottom: 40px; }
.hero__title { max-width: 1004px; }
.pill {
  display: inline-flex; align-items: center; min-height: 37px; padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 30px; background: rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 14px; line-height: 21px; letter-spacing: .2px;
}
.hero__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.hero__lede { max-width: 413px; }

/* Problem */
.problem { padding-top: 100px; }
.problem .sh { padding-bottom: 80px; }
.problem .sh__copy .body { max-width: 374px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.pcard { display: flex; flex-direction: column; gap: 40px; padding-top: 20px; }
.pcard__media img, .pcard__media svg { width: 100%; height: auto; aspect-ratio: 428 / 268; }
.pcard__copy { display: flex; flex-direction: column; gap: 10px; padding: 0 30px 40px 20px; }
.pcard__copy .title { max-width: 296px; }
.problem .cards-3 { padding-bottom: 60px; }

/* Solution: each card links to its stage page */
.solution { padding-top: 40px; padding-bottom: 100px; }
.solution .sh { padding-bottom: 60px; }
.solution .sh__copy .h2 { max-width: 782px; }
.solution .sh__copy .body { max-width: 374px; }
.scard { display: flex; flex-direction: column; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.scard__media { position: relative; overflow: hidden; }
.scard__media .tag { position: absolute; left: 20px; top: 20px; z-index: 1; }
.scard__media img { width: 100%; aspect-ratio: 428 / 280; transition: transform .8s var(--ease); }
.scard__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 30px 40px 20px; }
.scard__copy .title { max-width: 260px; }
.scard:hover .more svg { transform: translateX(4px); }
.scard:hover .scard__media img { transform: scale(1.03); }
.scard:hover { border-color: var(--n-300); }
.solution .btn-row { justify-content: center; margin-top: 60px; }

/* Measure (dark) with dashboard over a background image */
.mhome { background: var(--black); color: var(--white); }
.mhome__head { padding-top: 100px; }
.mhome__head .body { max-width: 392px; }
.mhome__head .h2 { max-width: 640px; }
.mhome__stage { position: relative; overflow: hidden; margin-top: 0; }
.mhome__bg { position: absolute; left: 0; right: 0; top: -76px; bottom: 0; }
.mhome__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.mhome__stage::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 189px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .2) 57.6%, rgba(0, 0, 0, 0) 100%);
}
.mhome__stage .container { position: relative; z-index: 2; padding-top: 113px; padding-bottom: 100px; }
.dashboard { width: 100%; max-width: 1094px; margin: 0 auto; border-radius: 20.5px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.dashboard img { width: 100%; }
.mhome .features { margin-top: 98px; }

/* How it works */
.how { padding-top: 100px; }
.how__head { padding-bottom: 80px; }
.how__head .split { align-items: start; }
.how__head .h2 { max-width: 640px; }
.how__body { padding-bottom: 100px; }
.how__body .split { align-items: start; }
.how__media { max-width: 527px; border-radius: 20px; overflow: hidden; }
.how__media img { width: 100%; aspect-ratio: 527 / 480; object-fit: cover; }
.how__steps { display: flex; flex-direction: column; align-items: flex-start; gap: 60px; }

/* Built at Infinum */
.infinum { padding: 0 40px 40px; }
.infinum__card {
  position: relative; display: grid; grid-template-columns: 640px 1fr; max-width: 1320px; min-height: 560px;
  margin: 0 auto; overflow: hidden; border-radius: 20px; background: #cfdbe5; color: var(--white);
}
.infinum__bg { position: absolute; inset: 0; }
.infinum__bg img { position: absolute; left: -14px; right: -20px; top: calc(50% - 70px); width: calc(100% + 34px); max-width: none; height: auto; aspect-ratio: 2528 / 1696; transform: translateY(-50%) rotate(180deg); }
.infinum__building { position: relative; z-index: 1; align-self: end; }
.infinum__building img { width: 100%; }
.infinum__copy { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 40px 60px 60px 41px; }
.infinum__copy .h2 { max-width: 526px; margin-top: auto; }
.infinum__copy .body { max-width: 410px; margin-top: 30px; margin-bottom: auto; }

/* Early access form (homepage) */
.early { position: relative; overflow: hidden; color: var(--white); background: var(--black); }
.early__bg { position: absolute; left: 0; right: 0; top: -113px; height: 966px; }
.early__bg img { width: 100%; height: 100%; object-fit: cover; }
.early::after {
  content: ""; position: absolute; inset: auto 0 0; height: 189px; pointer-events: none;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .2) 57.6%, rgba(0, 0, 0, 0) 100%);
}
.early__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 640px; gap: 40px; padding-top: 117px; padding-bottom: 92px; }
.early__copy { display: flex; flex-direction: column; gap: 30px; }
.early__copy .h2 { max-width: 527px; } /* 5 columns */
.early__copy .body { max-width: 297px; }

/* ======================================================================
   PLATFORM
   ====================================================================== */
.intro { padding-top: calc(var(--nav-h) + 100px); padding-bottom: 40px; }
.intro__wrap { display: flex; flex-direction: column; gap: 40px; }
.intro__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.intro__row .h2 { line-height: 1; max-width: 782px; }
.intro__row .body { max-width: 414px; }

/* Tabbed hero image: Define / Assure / Measure */
.switcher { padding-bottom: 119px; }
.switcher__card { position: relative; aspect-ratio: 1322 / 620; border: 1px solid var(--n-200); border-radius: 30px; overflow: hidden; background: var(--n-50); isolation: isolate; }
.switcher__layer { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease), visibility 0s linear .7s; visibility: hidden; }
.switcher__layer.is-active { opacity: 1; visibility: visible; transition: opacity .7s var(--ease), visibility 0s; }
.switcher__bg { position: absolute; left: 50%; top: 50%; width: 108.9%; max-width: none; height: auto; transform: translate(-50%, -50%) scale(1.04); transition: transform 1.2s var(--ease); }
.switcher__ui { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: translateY(16px); transition: transform .9s var(--ease); }
.switcher__layer.is-active .switcher__bg { transform: translate(-50%, -50%) scale(1); }
.switcher__layer.is-active .switcher__ui { transform: none; }
.switcher .tabs { position: absolute; left: 50%; top: 39px; z-index: 3; transform: translateX(-50%); }
.switcher__cta { position: absolute; left: 50%; bottom: 39px; z-index: 3; transform: translateX(-50%); }
.switcher__mobile { display: none; }

/* Define > Assure > Measure: sticky scroll story */
.story-head { padding-top: 100px; padding-bottom: 60px; }
.story-head .sh { gap: 80px; }
.story-head .body { max-width: 374px; }
.story-head .h2 { max-width: 640px; }
.story { position: relative; height: 330vh; background: var(--black); color: var(--white); }
.story__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.story__grid { position: relative; height: 100%; max-width: var(--max); margin: 0 auto; padding: var(--nav-h) var(--gutter) 0; display: grid; grid-template-columns: 1fr 520px 1fr; align-items: center; gap: 40px; }
.story__side { position: relative; height: 240px; }
.story__text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .7s var(--ease); pointer-events: none; }
.story__text.is-active { opacity: 1; transform: none; pointer-events: auto; }
.story__side--left .story__text { max-width: 258px; }
.story__side--right { justify-self: end; width: 190px; }
.story__side--right .story__text--list { width: 187px; }
.story__list li { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); line-height: 1.2; }
.story__list li span:last-child { font-size: 14px; opacity: .7; }
.story__progress { position: absolute; left: var(--gutter); bottom: 40px; display: flex; gap: 8px; }
.story__progress span { width: 24px; height: 2px; background: rgba(255, 255, 255, .25); transition: background-color .4s var(--ease); }
.story__progress span.is-active { background: var(--white); }

.stage { position: relative; width: var(--sw, 520px); height: var(--sh, 600px); margin: 0 auto; }
.stage > * { position: absolute; }

/* The ball: slowly drifting colour blobs inside a circle (the lighter take on ElevenLabs' orb).
   It is one element for all three steps, so the motion never restarts; only its scale changes. */
.orb {
  left: 50%; top: 50%; width: var(--orb); height: var(--orb); border-radius: 50%;
  transform: translate(-50%, -50%) scale(var(--ball-scale, .685));
  box-shadow: 0 10px 200px rgba(255, 66, 66, .85), 0 8px 32px rgba(0, 0, 0, .5);
  transition: transform 1.1s var(--ease);
}
.orb__glow {
  position: absolute; inset: -45%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 66, 66, .6), rgba(216, 40, 40, .22) 55%, rgba(216, 40, 40, 0));
  opacity: 0; transform: scale(.9); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease);
}
.stage[data-state="2"] .orb__glow { opacity: .55; transform: scale(1.1); }
.stage.is-shifting .orb__glow { opacity: .85; transform: scale(1.3); }
.orb__body {
  position: absolute; inset: 0; overflow: hidden; border-radius: 50%; clip-path: circle(50%); isolation: isolate;
  background: radial-gradient(circle at 44% 38%, #d82828 0%, #8e1a33 48%, #2c2151 88%);
}
.orb__blob { position: absolute; border-radius: 50%; filter: blur(calc(var(--orb) * .065)); will-change: transform; }
.orb__blob--1 { left: 2%; top: 6%; width: 80%; height: 80%; background: radial-gradient(closest-side, #ff4242 35%, rgba(255, 66, 66, 0)); transform-origin: 62% 58%; animation: orb-spin 18s linear infinite; }
.orb__blob--2 { left: 18%; top: 4%; width: 52%; height: 52%; background: radial-gradient(closest-side, #fe708d 20%, rgba(254, 112, 141, 0)); opacity: .75; mix-blend-mode: screen; transform-origin: 40% 95%; animation: orb-drift 22s linear infinite reverse; }
.orb__blob--3 { left: 34%; top: 40%; width: 86%; height: 86%; background: radial-gradient(closest-side, #2c2151 40%, rgba(44, 33, 81, 0)); opacity: 1; transform-origin: 20% 15%; animation: orb-drift 26s linear infinite; }
.orb__blob--4 { left: 48%; top: 8%; width: 55%; height: 55%; background: radial-gradient(closest-side, #46352e 30%, rgba(70, 53, 46, 0)); opacity: .85; transform-origin: 5% 70%; animation: orb-spin 30s linear infinite reverse; }
.orb__blob--5 { left: 0; top: 46%; width: 62%; height: 62%; background: radial-gradient(closest-side, #d82828 30%, rgba(216, 40, 40, 0)); opacity: .9; transform-origin: 75% 20%; animation: orb-drift 24s linear infinite; }
.orb__grain { position: absolute; inset: 0; background: url("../assets/img/ball.png") center / cover; opacity: .22; mix-blend-mode: overlay; }
.orb__body::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 40%);
  box-shadow: inset 0 calc(var(--orb) * .027) calc(var(--orb) * .054) #241b52, inset 0 calc(var(--orb) * -.054) calc(var(--orb) * .082) rgba(184, 0, 18, .6);
}
@keyframes orb-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orb-drift {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(180deg) scale(1.18); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Ripples on Assure and Measure: each ring grows from the start to the final circle and fades out.
   The stroke does not scale, so it stays 1px. */
.stage__ripples { left: 50%; top: 50%; overflow: visible; transform: translate(-50%, -50%); opacity: 0; transition: opacity .8s var(--ease); }
.stage[data-state="1"] .stage__ripples, .stage[data-state="2"] .stage__ripples { opacity: 1; }
.stage__ripples circle {
  fill: none; stroke: #fff; stroke-width: 1; transform-box: fill-box; transform-origin: center;
  animation: ripple-grow 4.5s cubic-bezier(.25, .6, .4, 1) infinite, ripple-fade 4.5s linear infinite;
}
@keyframes ripple-grow { from { transform: scale(var(--ring-start)); } to { transform: scale(1); } }
@keyframes ripple-fade { from { stroke-opacity: .4; } to { stroke-opacity: 0; } }

.stage__group { inset: 0; opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.stage__group > * { position: absolute; transform: translate(var(--tx, 0), var(--ty, 0)); }
.stage__group.is-active { opacity: 1; transition-delay: .15s; }
.stage__group .tag--glass { white-space: nowrap; }
.stage__group .tag--big { padding: 4px 16px; font-size: 12px; text-align: center; }
.stage__group .tag--glass:has(.tag__sub) { flex-direction: column; gap: 0; text-align: center; }
.tag__sub { text-transform: none; }
.stage__stack { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Lines: static paths at 30%, and dotted "comets" that travel from each line's start to its end */
.stage__lines { left: 0; top: 0; overflow: visible; }
.line-static { fill: none; stroke: #fff; stroke-opacity: .3; stroke-width: 1; }
.comet-dots { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .1 4; }
.comet-seg { fill: none; stroke: #fff; stroke-width: 8; }

.stage__code { margin: 0; overflow: hidden; font: 8px/1.35 var(--font-mono); color: rgba(255, 255, 255, .35); white-space: pre; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 60%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 60%, transparent); }
.stage__word { --tx: -50%; --ty: -50%; left: 50%; top: 50%; width: 104px; }

/* Measure: the four cards orbit the ball clockwise, one turn every 39 s, and stay upright */
.orbit { left: 50%; top: 50%; width: 0; height: 0; animation: orbit 39s linear infinite; }
.orbit__arm { position: absolute; left: 0; top: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); }
.orbit__keep { animation: orbit 39s linear infinite reverse; }
@keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.stat {
  position: absolute; left: 0; top: 0; width: 147px; height: 96px; padding: 16px 15px; border: 1px solid rgba(204, 204, 204, .4); border-radius: 10px;
  background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
  display: flex; flex-direction: column; justify-content: space-between; color: var(--white);
  transform: translate(-50%, -50%) scale(var(--card-scale, 1));
}
.stat__label { font-size: 10px; line-height: 1.1; letter-spacing: .2px; text-transform: uppercase; opacity: .6; }
.stat__value { display: block; font-weight: 500; font-size: 20px; line-height: 1; }
.stat__note { display: block; margin-top: 6px; font-size: 8px; line-height: 1.2; letter-spacing: .2px; opacity: .6; }
.stat--chart { width: 139px; padding: 0; }
.stat__chart { position: absolute; left: 31px; top: 8px; width: 96px; height: 67px; }
.stat__axis, .stat__date { position: absolute; font-size: 5.9px; line-height: 1.1; letter-spacing: .12px; text-transform: uppercase; opacity: .6; white-space: nowrap; }
.stat__axis { right: calc(100% - 21px); }
.stat__date { top: 81px; }

/* Phone layout of the stage (its own coordinates from the mobile spec) */
.stage[data-layout="mobile"] .tag--glass { padding: 2px 6px; font-size: 9px; }
.stage[data-layout="mobile"] .tag--big { padding: 3px 10px; font-size: 10px; }
.stage[data-layout="mobile"] .stage__code { font-size: 6px; }
.stage[data-layout="mobile"] .stage__word { width: 78px; }

.stage:not(.is-playing) :is(.orb__blob, .stage__ripples circle, .orbit, .orbit__keep) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .orb__blob, .stage__ripples circle, .orbit, .orbit__keep { animation: none !important; }
  .stage__ripples circle { transform: scale(var(--ring-mid)); stroke-opacity: .25; }
}

/* MCP */
.mcp { padding-top: 80px; padding-bottom: 120px; }
.mcp .split { align-items: center; }
.mcp__copy { display: flex; flex-direction: column; gap: 60px; }
.mcp__copy .text { display: flex; flex-direction: column; gap: 30px; }
.mcp__copy .body { max-width: 452px; }
.tools { display: flex; flex-direction: column; gap: 16px; }
.tools li { display: grid; grid-template-columns: 185px 1fr; gap: 40px; }
.tools code { font: 16px/24px var(--font-mono); color: var(--code-red); }
.mcp-visual { position: relative; width: 100%; max-width: 590px; aspect-ratio: 590 / 386; }
.code-card { position: absolute; left: 0; top: 0; width: 89.32%; height: 86.27%; border-radius: 30px; overflow: hidden; color: var(--white); }
.code-card__bg { position: absolute; inset: 0; background: url("../assets/img/bg-red.jpg") calc(50% + 20.5px) calc(50% + 26.5px) / 1440px auto no-repeat; }
.code-card__inner { position: absolute; inset: 0; padding: 30px 20px 20px; border: 1px solid var(--n-200); border-radius: 30px; }
.code-card__code { position: relative; height: 100%; margin: 0; padding: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 14px/22px var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; transition: opacity .25s var(--ease); }
.code-card__code.is-swapping { opacity: 0; }
.code-card__copy { position: absolute; left: 31px; bottom: 41px; padding: 9px 15px; border: 1px solid var(--n-300); border-radius: 20px; background: var(--white); color: var(--black); font-size: 12px; line-height: 1.1; letter-spacing: .2px; transition: background-color .2s var(--ease); }
.code-card__copy:hover { background: var(--n-100); }
.agent-picker { position: absolute; right: 22px; bottom: 31px; z-index: 2; display: flex; flex-direction: column; width: 173px; padding: 10px; border-radius: 16px; background: var(--white); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 0, 0, .12); }
.agent-picker__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 60px; background: transparent; color: var(--black); font-size: 14px; line-height: 20px; text-align: left; transition: background-color .25s var(--ease), color .25s var(--ease); }
.agent-picker__item img { width: 16px; height: 16px; object-fit: contain; transition: filter .25s var(--ease); }
.agent-picker__item:not([aria-selected="true"]):hover { background: var(--n-100); }
.agent-picker__item[aria-selected="true"] { background: var(--black); color: var(--white); }
.agent-picker__item[aria-selected="true"] img { filter: invert(1); }

/* Records and access */
.records { padding-bottom: 60px; }
.records .split { align-items: center; }
.records__copy { display: flex; flex-direction: column; gap: 60px; }
.records__copy .text { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.records__copy .body { max-width: 452px; }
.records__media { max-width: 604px; border-radius: 30px; overflow: hidden; }
.who { padding-bottom: 100px; }

/* ======================================================================
   MEASURE
   ====================================================================== */
.centered-head { padding-top: 100px; padding-bottom: 60px; }
.centered-head .sh { gap: 60px; }
.centered-head .body { max-width: 408px; }
.usage { padding-bottom: 0; }
.usage__card { position: relative; aspect-ratio: 1320 / 620; border-radius: 30px; overflow: hidden; background: #6d5aa8; }
.usage__bg { position: absolute; inset: 0; }
.usage__bg img { width: 100%; height: 100%; object-fit: cover; }
.usage__bar { position: absolute; left: 8.86%; right: 8.86%; top: 46px; display: flex; justify-content: space-between; z-index: 2; }
.usage__chart { position: absolute; left: 8.79%; top: 20%; width: 82.5%; z-index: 1; }
.usage__chart img, .usage__mobile img { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.usage__chart img.is-active, .usage__mobile img.is-active { position: relative; opacity: 1; transform: none; }
.usage__mobile { display: none; }
.pair { padding-bottom: 60px; }
.pair__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.pair__item { display: flex; flex-direction: column; gap: 20px; }
.pair__item .media img { aspect-ratio: 640 / 639; object-fit: cover; }
.pair__item figcaption { max-width: 301px; }
.quality-head { padding-bottom: 60px; }
.quality-head .split { align-items: start; }
.quality-head .text { display: flex; flex-direction: column; gap: 30px; padding-right: 110px; }
.quality-head .text .body { max-width: 414px; }
.quality-icons { padding-bottom: 100px; }

/* Talk to us */
.talk { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 120px; }
.talk .split { grid-template-columns: 525fr 640fr; column-gap: 155px; align-items: start; }
.talk__copy { display: flex; flex-direction: column; gap: 40px; padding-top: 60px; }
.talk__copy .text { display: flex; flex-direction: column; gap: 30px; }
.talk__copy .h2 { line-height: 1; }
.talk__copy .body { max-width: 414px; }
.checklist { display: flex; flex-direction: column; gap: 4px; }
.checklist li { display: flex; align-items: center; gap: 16px; min-height: 32px; }
.checklist .badge-icon { width: 24px; height: 24px; }
.checklist .badge-icon img { width: 12px; height: 12px; }
.after { padding-bottom: 60px; }
.after .split { align-items: start; }
.after .h2 { line-height: 1; max-width: 414px; }

/* Privacy */
.privacy { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 120px; }
.privacy .split { grid-template-columns: 525fr 637fr; column-gap: 158px; align-items: start; }
.toc { position: sticky; top: calc(var(--nav-h) + 40px); display: flex; flex-direction: column; gap: 10px; padding-top: 60px; }
.toc { align-items: flex-start; max-width: 413px; } /* 4 columns */
.toc a { font-size: 14px; line-height: 20px; letter-spacing: .2px; color: var(--n-950); }
/* The underline sits on the inline label, so a two-line item gets one line under each row of text */
.toc__label { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.legal { display: flex; flex-direction: column; gap: 80px; padding-top: 60px; }
.legal__intro { display: flex; flex-direction: column; gap: 20px; }
.legal__intro .h2 { line-height: 1; }
.legal section { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: calc(var(--nav-h) + 40px); }
.legal ul { list-style: disc; padding-left: 24px; }
.legal ol { list-style: decimal; padding-left: 24px; }
.legal li + li { margin-top: 8px; }
.legal h3 { margin-top: 20px; }
.legal__label { font-weight: 500; margin-top: 8px; }
.legal__date { font-size: 14px; line-height: 20px; color: var(--n-600); }

/* ======================================================================
   MOTION — scroll reveals (after lightshiprv.com) and illustration loops
   ====================================================================== */
:root { --slide: clamp(1.875rem, 1.5179rem + 1.7857vw, 3.125rem); }
/* Until motion.js has prepared the page, hide what it will reveal (no flash of content). */
.js-motion:not(.motion-ready):not(.motion-fallback) :is(.display, .h2):not(.infinum__copy .h2, .early__copy .h2) { opacity: 0; }
/* Headings (after lightshiprv.com/technology, quicker): each letter rises out of its word's mask
   and fades in. --stagger is set per heading by motion.js from its letter count. */
.rv-word { display: inline-block; white-space: nowrap; clip-path: inset(-0.15em -0.1em -0.25em); }
.rv-char { display: inline-block; }
.rv-heading:not(.is-inview) .rv-char { opacity: 0; transform: translateY(100%); }
.rv-heading.is-inview .rv-char { animation: rv-char .7s var(--ease-reveal) both; animation-delay: calc(var(--i) * var(--stagger, 5ms)); }
@keyframes rv-char { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
/* Content: fades in while rising 30–50px (by screen width), 40 ms apart within a batch */
.rv-block:not(.is-inview) { opacity: 0; }
.rv-block.is-inview { animation: rv-slide 1s var(--ease-slide) both; animation-delay: calc(var(--index, 0) * 40ms); }
@keyframes rv-slide { from { opacity: 0; transform: translate3d(0, var(--slide), 0); } to { opacity: 1; transform: none; } }

/* Homepage problem illustrations (inlined SVGs) */
.illo { display: block; width: 100%; height: auto; aspect-ratio: 428 / 268; }
.illo-ring { transform-box: fill-box; transform-origin: center; animation: illo-ring 6s linear infinite; }
@keyframes illo-ring {
  0% { transform: scale(.82); opacity: 0; }
  25% { opacity: var(--o); }
  100% { transform: scale(1.32); opacity: 0; }
}
.illo-stack { animation: illo-stack 5s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes illo-stack {
  0%, 16% { transform: translateY(0); opacity: .4; }
  36%, 56% { transform: translateY(54.5px); opacity: .4; }
  66% { transform: translateY(54.5px); opacity: 0; }
  67% { transform: translateY(0); opacity: 0; }
  84%, 100% { transform: translateY(0); opacity: .4; }
}
.illo-slot { animation: illo-slot 5s ease-in-out infinite; }
@keyframes illo-slot { 0%, 26% { opacity: 1; } 36%, 56% { opacity: 0; } 66%, 100% { opacity: 1; } }
.illo.is-paused * { animation-play-state: paused !important; }

/* Homepage first-visit intro (html.hp-intro is set in <head> on the first page view of a visit).
   Everything overlaps: the video fades up over black from 0 s, the nav slides down from 0.2 s
   (after lightshiprv.com: .9s, power4-out), the title fades in from 0.4 s and the pill 0.08 s later
   (opacity only), and the paragraph and buttons rise into place from 0.6 s. */
.hp-intro .hero__media { animation: intro-fade 1.2s var(--ease) both; }
.hp-intro .nav { animation: intro-drop .9s var(--ease-btn) .2s both; }
.hp-intro .hero__title { animation: intro-fade 1s var(--ease) .4s both; }
.hp-intro .hero .pill { animation: intro-fade 1s var(--ease) .48s both; }
.hp-intro .hero__lede { animation: intro-rise .9s var(--ease-btn) .6s both; }
.hp-intro .hero .btn-row { animation: intro-rise .9s var(--ease-btn) .68s both; }
@keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-drop { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width: 1279px) {
  :root { --gutter: 40px; }
  .display { font-size: 68px; }
  .h2 { font-size: 44px; line-height: 50px; }
  .row .split, .row--reverse .split, .page-hero .split, .talk .split, .privacy .split { column-gap: 60px; }
  .kicker .h2 { margin-left: 50%; }
  .infinum__card { grid-template-columns: 1fr 1fr; }
  .early__inner { grid-template-columns: 1fr 1fr; }
  .story__grid { grid-template-columns: 1fr 440px 1fr; }
  .stage { transform: scale(.85); }
}

@media (max-width: 1199px) {
  .feature { width: calc((100% - 80px) / 3); }
}

@media (max-width: 1023px) {
  .feature { width: calc((100% - 40px) / 2); }
  .footer__cols { gap: 24px; }
  .footer__col { width: 150px; }
  .nav__menu, .nav__signin { display: none; }
  .nav__toggle { display: block; }
  .nav__actions .nav__cta { display: none; }
  .mnav { display: flex; }
  .nav.is-scrolled:not(.is-open) .nav__toggle { background: rgba(255, 255, 255, .88); color: var(--black); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

  .display { font-size: 56px; }
  .h2 { font-size: 40px; line-height: 1.1; }
  .split, .row .split, .row--reverse .split, .page-hero .split, .talk .split { grid-template-columns: 1fr; row-gap: 48px; }
  .row--reverse .row__media { order: 0; }
  .row__media, .page-hero__media { max-width: 640px; }
  .kicker .h2 { margin-left: 0; }
  .cards-3 { grid-template-columns: 1fr 1fr; }
  .steps { gap: 48px 32px; }
  .how__media { max-width: none; }
  .infinum__card { grid-template-columns: 1fr; }
  .infinum__copy { order: -1; padding: 40px; }
  .infinum__copy .h2, .infinum__copy .body { margin-top: 24px; margin-bottom: 0; }
  .infinum__building { max-width: 560px; }
  .early__inner { grid-template-columns: 1fr; padding-top: 80px; }
  .intro__row { flex-direction: column; }
  .privacy .split { grid-template-columns: 220px 1fr; column-gap: 40px; }
  .story__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding-top: calc(var(--nav-h) + 16px); padding-bottom: 32px; gap: 0; align-items: stretch; }
  .story__side { height: auto; min-height: 96px; }
  .story__side--right { justify-self: stretch; width: auto; min-height: 120px; }
  .story__side--left .story__text { max-width: none; justify-content: flex-start; }
  .story__side--right .story__text { justify-content: flex-end; }
  .story__side--right .story__text--list { width: auto; }
  .story__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .story__visual { position: relative; min-height: 0; }
  .stage { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%) scale(var(--stage-scale, .7)); }
  .story__progress { display: none; }
  .usage__bar { left: 4%; right: 4%; top: 24px; }
  .usage__chart { left: 4%; width: 92%; top: 17%; }
}

@media (max-width: 767px) {
  :root { --gutter: 20px; --nav-h: 44px; }
  .nav__inner { padding: 0 20px; }
  .display { font-family: var(--font-text); font-size: 36px; line-height: 1.1; letter-spacing: -1.08px; }
  .h2 { font-family: var(--font-text); font-size: 28px; line-height: 1.1; letter-spacing: -.84px; }
  .h2--card { font-size: 30px; letter-spacing: -.9px; }
  .sh { gap: 24px; }
  .sh__copy { gap: 20px; }
  .btn-row { flex-direction: column; width: 100%; }
  .btn-row .btn { width: 100%; }
  .mnav__actions .btn { width: 100%; }

  /* Hero: the video is for larger screens; phones get the portrait still */
  .hero { max-height: none; min-height: 600px; }
  .hero__inner { padding-bottom: 20px; }
  .hero__center { gap: 24px; padding: 0; }
  .pill { max-width: 230px; padding: 7px 13px; font-size: 12px; line-height: 1.4; }
  .hero__bottom { flex-direction: column; align-items: stretch; gap: 40px; text-align: center; }
  .hero__lede { max-width: none; }

  .problem { padding-top: 64px; }
  .problem .sh { padding-bottom: 40px; }
  .cards-3 { grid-template-columns: 1fr; gap: 20px; }
  .pcard__copy .title, .scard__copy .title { max-width: 300px; }
  .problem .cards-3 { padding-bottom: 24px; }
  .solution { padding-top: 40px; padding-bottom: 64px; }
  .solution .sh { padding-bottom: 32px; }
  .solution .btn-row { margin-top: 32px; }

  .mhome__head { padding-top: 64px; }
  .mhome__stage .container { padding-top: 64px; padding-bottom: 64px; }
  .how__body { padding-bottom: 60px; }
  .mhome .features { margin-top: 64px; }
  .features { flex-direction: column; flex-wrap: nowrap; gap: 48px; }
  .feature { width: 100%; max-width: none; padding-right: 0; gap: 24px; }
  .features--center .feature { padding: 0; }

  .how { padding-top: 64px; }
  .how__head { padding-bottom: 32px; }
  .how__head .split { row-gap: 20px; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .how__body .split { row-gap: 40px; }
  .how__steps { gap: 40px; }
  .how__steps .btn { width: 100%; }

  .infinum { padding: 0 20px 64px; }
  .infinum__card { min-height: 636px; background: #0d0d14; }
  .infinum__copy { padding: 32px 24px; gap: 20px; }
  .infinum__copy .h2, .infinum__copy .body { margin-top: 20px; }
  .infinum__bg img { left: -77.5%; top: 0; width: 255%; transform: none; aspect-ratio: auto; height: 94%; object-fit: cover; }
  .infinum__building img { height: 260px; object-fit: cover; }

  .early__inner { padding-top: 64px; padding-bottom: 64px; gap: 40px; }
  .early__copy { gap: 20px; }
  .early__copy .body { max-width: none; }
  .form { padding: 20px; }
  .field__row { grid-template-columns: 1fr; }

  .footer__inner { gap: 48px; padding-top: 48px; padding-bottom: 32px; }
  .footer__top { flex-direction: column; gap: 40px; }
  .footer__cols { flex-wrap: wrap; gap: 32px 24px; }
  .footer__col { width: calc(50% - 12px); gap: 16px; }
  .footer__bottom { font-size: 14px; letter-spacing: -.42px; }

  /* Inner pages */
  .page-hero { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 64px; }
  .page-hero__copy { gap: 24px; }
  .page-hero__copy .text { gap: 20px; }
  .row { padding-bottom: 64px; }
  .row__copy { gap: 24px; }
  .row__copy .text { gap: 20px; }
  .compare { flex-direction: column; align-items: stretch; padding-bottom: 64px; gap: 20px; }
  .compare__card { width: 100%; padding: 20px 20px 32px; gap: 32px; }
  .compare__item { gap: 20px; }
  .kicker { padding-bottom: 40px; }
  .cta-band__inner { min-height: 388px; padding-block: 64px; gap: 24px; }
  .cta-band__inner .btn { width: 100%; }

  /* Platform */
  .intro { padding-top: calc(var(--nav-h) + 48px); }
  .intro__wrap { gap: 24px; }
  .switcher { padding-bottom: 64px; }
  .switcher__card { aspect-ratio: 350 / 640; }
  .switcher__ui { display: none; }
  .switcher__bg { width: auto; height: 100%; }
  .switcher__mobile { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .switcher .tabs { top: 16px; }
  .switcher__cta { bottom: 16px; }
  .story-head { padding-top: 64px; padding-bottom: 40px; }
  .story-head .sh { gap: 24px; }
  .mcp { padding-top: 32px; padding-bottom: 64px; }
  .mcp__copy { gap: 24px; }
  .tools li { grid-template-columns: 1fr; gap: 4px; }
  .mcp-visual { display: flex; flex-direction: column; aspect-ratio: auto; }
  .code-card { position: relative; width: 100%; height: 330px; }
  .code-card__inner { padding: 20px 16px 16px; }
  .code-card__code { font-size: 12px; line-height: 20px; }
  .code-card__copy { left: 26px; bottom: 26px; }
  .agent-picker { position: relative; right: auto; bottom: auto; align-self: flex-end; margin: -64px 12px 0 0; }
  .records__copy { gap: 24px; }
  .who { padding-bottom: 64px; }

  /* Measure */
  .centered-head { padding-top: 64px; padding-bottom: 32px; }
  .centered-head .sh { gap: 24px; }
  .usage__card { aspect-ratio: 350 / 460; }
  .usage__bar { position: static; }
  .usage__bar .tabs { position: absolute; left: 50%; z-index: 2; transform: translateX(-50%); }
  .usage__bar .tabs[data-group="view"] { top: 20px; }
  .usage__bar .tabs[data-group="period"] { bottom: 20px; }
  .usage__chart { display: none; }
  .usage__mobile { display: block; position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); }
  .pair { padding-bottom: 64px; }
  .pair__grid { grid-template-columns: 1fr; gap: 40px; }
  .quality-head .text { padding-right: 0; }
  .quality-icons { padding-bottom: 64px; }

  .talk { padding-bottom: 64px; }
  .talk__copy { padding-top: 0; gap: 24px; }
  .after .split { row-gap: 32px; }

  .privacy .split { grid-template-columns: 1fr; }
  .toc { position: static; padding-top: 0; }
  .legal { gap: 48px; padding-top: 24px; }
  .h3 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  html { scroll-behavior: auto; }
}