/* CleverMobi components. Reusable classes only; per-illustration geometry comes in via
   custom properties set in the markup (straight from the Figma layer data). Values in em
   inside the hero and display titles scale with the fluid font size. */

/* Geometry properties must not inherit into nested art layers. */
@property --x { syntax: "*"; inherits: false; }
@property --y { syntax: "*"; inherits: false; }
@property --w { syntax: "*"; inherits: false; }
@property --h { syntax: "*"; inherits: false; }
@property --tx { syntax: "*"; inherits: false; }
@property --r { syntax: "*"; inherits: false; }
@property --sy { syntax: "*"; inherits: false; }
@property --iw { syntax: "*"; inherits: false; }
@property --ih { syntax: "*"; inherits: false; }
@property --inset { syntax: "*"; inherits: false; }
@property --tw { syntax: "*"; inherits: false; }
@property --size { syntax: "*"; inherits: false; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg-base);
  color: var(--color-fg-primary);
  font-family: var(--font-body);
  font-feature-settings: var(--font-features-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul { margin: 0; }
:focus-visible { outline: var(--focus-ring-dark); outline-offset: var(--focus-offset); border-radius: 4px; }
.hero :focus-visible, .cta :focus-visible, .footer :focus-visible, .stack-card :focus-visible { outline: var(--focus-ring); }

.page { position: relative; overflow-x: clip; } /* relative: the absolutely positioned blobs must be clipped too */
.container { width: min(100% - 2 * var(--page-gutter), var(--width-12col)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--page-gutter), 1068px); }

.skip-link {
  position: absolute; left: 16px; top: 16px; z-index: 100;
  padding: 13px 16px; border-radius: var(--radius-small);
  background: var(--color-white); color: var(--color-brand-deep);
  font: 700 var(--text-button-sm) / 1.15 var(--font-display);
  text-decoration: none; translate: 0 -200%;
}
.skip-link:focus { translate: 0 0; }
.pre-line { white-space: pre-line; }
.trim { text-box: trim-both cap alphabetic; }

/* ---------- Type ---------- */
.display-title {
  display: flex; flex-direction: column; align-items: center;
  font: 700 var(--text-title) / var(--leading-title) var(--font-display);
  font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-heading);
  color: var(--color-fg-primary);
  text-align: center;
}
.display-title__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.15em 0.25em; }
.display-title:not(.display-title--stack) .tile { margin-block: -0.0625em; }
.display-title--stack { margin-block: -0.0625em; }
.display-title--loose { gap: 0.125em; margin-block: -0.125em; }

.heading-2 {
  font: 700 var(--text-h2) / var(--leading-heading) var(--font-display);
  font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-heading);
  color: var(--color-fg-primary);
}
.heading-3 {
  font: 700 var(--text-h3) / var(--leading-heading) var(--font-display);
  font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-heading);
}
.lead, .body-lg {
  font: 400 var(--text-body-lg) / var(--leading-body-lg) var(--font-body);
  font-feature-settings: var(--font-features-body);
  color: var(--color-fg-secondary);
}
.lead--on-dark { color: var(--color-white-secondary); }

.section-head { width: min(100%, var(--width-8col)); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-20); text-align: center; }
.section-head > .btn-row { margin-top: var(--space-12); }

/* Title tile: white 80 x 72 tile with a 56 px icon (scales with the title). */
.tile {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.25em; height: 1.125em; border-radius: 0.25em; overflow: hidden;
  background: var(--color-bg-base); box-shadow: var(--shadow-tile);
}
.tile img { width: 0.875em; height: 0.875em; }

/* ---------- Buttons and links ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.btn-row--center { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-12);
  height: 48px; padding: 10px var(--space-24); border-radius: 24px;
  font: 700 var(--text-button) / var(--leading-heading) var(--font-display);
  font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-button);
  color: var(--color-white); text-decoration: none; white-space: nowrap;
  transition: filter var(--duration-fast) var(--ease-out), translate var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.btn:hover { filter: brightness(1.06); translate: 0 -1px; }
.btn:active { translate: 0 0; filter: brightness(0.97); }
.btn--primary { --angle: 100.82deg; background-image: linear-gradient(var(--angle), var(--gradient-brand-stops)); }
.btn--ghost { border: 1.5px solid var(--color-white-border); padding: 10px 22.5px 10px 14.5px; }
.btn--ghost:hover { filter: none; border-color: rgba(255, 255, 255, 0.45); background-color: var(--color-white-hover); }
.btn--light { background: var(--color-bg-base); color: var(--color-brand-deep); }
.btn__icon { flex: none; width: 24px; height: 24px; }
.btn--small {
  height: 40px; padding: 0 var(--space-16) 1px; border-radius: var(--radius-small);
  background: var(--color-brand-mid);
  font-size: var(--text-button-sm); letter-spacing: var(--tracking-button-sm);
}
.btn--small > span { text-box: trim-both cap alphabetic; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-6); height: 20px;
  font: 700 var(--text-button-sm) / var(--leading-heading) var(--font-display);
  font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-button-sm);
  color: var(--color-fg-primary); text-decoration: none;
}
.link-arrow > span { padding-bottom: 1px; text-box: trim-both cap alphabetic; }
.link-arrow img { width: 20px; height: 20px; transition: translate var(--duration-fast) var(--ease-out); }
.link-arrow:hover img { translate: 3px 0; }
.link-arrow:hover > span { text-decoration: underline; text-underline-offset: 4px; }

/* Icon drawn from a single-colour SVG as a mask, so it follows currentColor. */
.icon-mask { display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon-mask--menu { --icon: url("../img/icon-menu.svg"); }
.icon-mask--close { --icon: url("../img/icon-cross.svg"); }

/* ---------- Top bar and navigation ---------- */
.topbar { position: absolute; inset: 0 0 auto; z-index: 20; height: var(--topbar-height); }
.topbar__inner { width: min(100% - 72px, var(--width-topbar)); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
.topbar__logo { display: block; flex: none; border-radius: var(--radius-small); }
.topbar__logo img { width: 231.3px; height: 39.6px; }
.nav { display: flex; align-items: center; gap: 14px; }
.nav__items { display: flex; gap: var(--space-2); list-style: none; padding: 0; }
.nav__item {
  display: flex; align-items: center; gap: var(--space-8); height: 40px; padding: 0 14px 1px;
  border-radius: var(--radius-small);
  font: 500 var(--text-body-sm) / var(--leading-heading) var(--font-display);
  font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-h6);
  color: var(--color-white-secondary); text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.nav__item > span { text-box: trim-both cap alphabetic; }
.nav__item:hover, .nav__item[aria-current="page"] { background: var(--color-white-hover); color: var(--color-white); }
.nav__caret { flex: none; width: 12px; height: 16px; transition: rotate var(--duration-fast) var(--ease-out); }
button.nav__item { border: 0; background: transparent; cursor: pointer; }
.nav__item[aria-expanded="true"] { background: var(--color-white-hover); color: var(--color-white); }
.nav__item[aria-expanded="true"] .nav__caret { rotate: 180deg; }
.nav__group { position: relative; }
.nav__dropdown {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px;
  margin: 0; padding: var(--space-8); list-style: none;
  border-radius: var(--radius-medium); background: var(--color-bg-base); box-shadow: var(--shadow-overlay);
}
.nav__dropdown[hidden] { display: none; }
.nav__dropdown-link {
  display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-12); border-radius: var(--radius-small);
  font: 500 var(--text-body-sm) / var(--leading-heading) var(--font-display); font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-h6); color: var(--color-fg-primary); text-decoration: none; white-space: nowrap;
}
.nav__dropdown-link:hover { background: var(--color-bg-accent); }
.nav__dropdown :focus-visible { outline: var(--focus-ring-dark); }
.menu-toggle { display: none; }

/* Mega menu (as on the old site): intro | links with icon | preview card of the hovered link. On phone and tablet only
   the links remain (see the max-width: 1023px block). */
.mega__list { margin: 0; padding: 0; list-style: none; }
.mega__icon { flex: none; width: 32px; height: 32px; color: var(--color-brand-dark); }
@media (min-width: 1024px) {
  .topbar__inner { position: relative; }
  .nav__group { position: static; }
  .nav__dropdown.mega {
    left: auto; right: 0; top: calc(50% + 30px); width: min(880px, 100%);
    display: grid; grid-template-columns: minmax(0, 1fr) 240px 316px; gap: 16px; padding: 16px;
  }
  .nav__dropdown.mega[hidden] { display: none; }
  .mega__intro { padding: 14px 14px 14px 14px; }
  .mega__intro-title { margin: 0 0 12px; font: 600 15px / 1.6 var(--font-display); font-feature-settings: var(--font-features-display); color: var(--color-fg-primary); }
  .mega__intro-text { margin: 0; font-size: 14px; line-height: 1.6; color: #5e615c; }
  .mega__list { display: flex; flex-direction: column; gap: 4px; }
  .mega__link { min-height: 52px; gap: 12px; padding: 4px 14px; white-space: normal; font-weight: 600; font-size: 15px; border-radius: 8px; }
  .mega__link:hover, .mega__link.is-active { background: var(--color-bg-accent); }
  .mega__cards { padding: 0; }
  .mega__card[hidden] { display: none; }
  .mega__card-media { position: relative; display: block; margin-bottom: 30px; }
  .mega__card-media > img { display: block; width: 100%; height: 236px; object-fit: cover; border-radius: 8px; }
  .mega__card-icon { position: absolute; right: 20px; bottom: -20px; display: grid; place-items: center; width: 80px; height: 64px; border-radius: 8px; background: var(--color-bg-base); box-shadow: 0 6px 20px rgb(0 0 0 / 0.12); }
  .mega__card-title { margin: 0 0 10px; font: 700 17px / 1.4 var(--font-display); font-feature-settings: var(--font-features-display); color: var(--color-fg-primary); }
  .mega__card:not(:has(.mega__card-media)) .mega__card-title { padding-top: 14px; }
  .mega__card-text { margin: 0 0 20px; font-size: 16px; line-height: 1.7; color: var(--color-fg-secondary); }
  .mega__more { display: inline-flex; align-items: center; gap: 10px; font: 700 15px / 1 var(--font-display); color: var(--color-fg-primary); text-decoration: none; }
  .mega__more img { width: 20px; height: 20px; transition: translate var(--duration-fast) var(--ease-out); }
  .mega__more:hover img { translate: 3px 0; }
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; color: var(--color-white); --blob-left: calc(50% + min(100% - 2 * var(--page-gutter), var(--width-12col)) / 2 - 412px); }
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--color-brand-dark); }
.hero__blob { position: absolute; left: var(--blob-left); top: 96px; width: 754px; height: 792px; pointer-events: none; }
.hero__blob img { width: 100%; height: 100%; }
.hero__blob--outer { z-index: -2; }
.hero__inner { position: relative; min-height: 800px; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-separation); }
.hero__main { flex: 0 1 auto; min-width: 0; width: min(100%, calc(var(--text-hero) * 7.65)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-36); }
.hero__text { display: flex; flex-direction: column; gap: var(--space-20); }
.hero__title {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15em;
  font: 700 var(--text-hero) / var(--leading-hero) var(--font-display);
  font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-heading);
  color: var(--color-white);
}
.hero__row { display: flex; align-items: center; gap: 0.25em; height: 1em; white-space: nowrap; }
.hero__row > [data-i18n] { text-box: trim-both cap alphabetic; }
.hero__media { flex: 0 1 var(--width-5col); min-width: 0; width: var(--width-5col); margin-top: var(--topbar-height); }

/* Award badge: white star with the award icon masked to the star shape. */
.hero-badge { position: relative; flex: none; width: 1.14563em; height: 1em; }
.hero-badge__star { position: absolute; left: 0.01985em; top: 0.0069em; width: 1.10591em; height: 0.98611em; }
.hero-badge__award {
  position: absolute; left: -0.02295em; top: 0.10174em; width: 1.19928em; height: 1.19928em;
  -webkit-mask: url("../img/head-award-mask.svg") no-repeat 0.04283em -0.09474em / 1.10591em 0.98611em;
  mask: url("../img/head-award-mask.svg") no-repeat 0.04283em -0.09474em / 1.10591em 0.98611em;
}
.hero-badge__award img { width: 100%; height: 100%; }

/* Toggle switch illustration (hero line and careers tile). */
.toggle { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; overflow: hidden; }
.toggle__knob { position: relative; flex: none; width: var(--knob); height: var(--knob); border-radius: 50%; background: var(--color-bg-base); filter: var(--shadow-knob); }
.toggle__knob img { position: absolute; left: var(--check-x); top: var(--check-y); width: var(--check); height: var(--check); }
.toggle--hero { width: 1.85185em; height: 1em; padding: 0.11111em; border-radius: 0.62963em; background: var(--color-brand-mid); --knob: 0.77778em; --check: 0.59259em; --check-x: 0.088em; --check-y: 0.09262em; }
.toggle--tile { position: absolute; inset: 0; padding: var(--space-12); border-radius: 68px; background: var(--color-brand-dark); --knob: 88px; --check: 67.048px; --check-x: 9.952px; --check-y: 10.476px; }

.gear-tile { position: relative; flex: none; width: 1.2963em; height: 1em; border-radius: 0.2963em; overflow: hidden; background: var(--color-brand-light); }
.gear-tile__frame { position: absolute; left: 0.10888em; top: -0.04388em; width: 1.07846em; height: 1.07846em; display: flex; align-items: center; justify-content: center; }
.gear-tile__frame img { flex: none; width: 0.95486em; height: 0.95486em; rotate: 8deg; }

/* ---------- Media (image box with the Figma crop) ---------- */
.media { position: relative; overflow: hidden; }
.media > img:first-child { position: absolute; left: var(--img-x, 0); top: var(--img-y, 0); width: var(--img-w, 100%); height: var(--img-h, 100%); max-width: none; object-fit: cover; }
.media--hero { aspect-ratio: 498 / 528; border-radius: var(--radius-medium); background: var(--color-bg-image); }
.media--split { aspect-ratio: 498 / 500; border-radius: var(--radius-large); background: var(--color-bg-accent); }
.media--post { aspect-ratio: 384 / 256; border-radius: var(--radius-medium); background: var(--color-brand-mid); }
.media--post > img:first-child { transition: scale 400ms var(--ease-out); }

/* Soft blurred circle (multiply). */
.glow { position: absolute; left: var(--x); top: var(--y); width: var(--size); aspect-ratio: 1; mix-blend-mode: multiply; pointer-events: none; }
.glow img { position: absolute; inset: -34.59%; width: 169.18%; height: 169.18%; max-width: none; }

/* ---------- Art: absolutely placed illustration layers ---------- */
/* .art   = Figma's rotated-bounds wrapper (left/top/width/height, content centred)
   .art__body = the layer itself (rotation, optional vertical flip)
   .art__img  = vector bleed box (Figma exports strokes slightly outside the layer) */
.art, .art__body, .art__img { --x: initial; --y: initial; --w: initial; --h: initial; --tx: initial; --r: initial; --sy: initial; --iw: initial; --ih: initial; --inset: initial; }
.art { position: absolute; left: var(--x, 0); top: var(--y, 0); width: var(--w, auto); height: var(--h, auto); translate: var(--tx, 0) 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.art--block { display: block; }
.art__body { position: relative; flex: none; width: var(--iw, auto); height: var(--ih, auto); rotate: var(--r, 0deg); scale: 1 var(--sy, 1); }
.art__img { position: absolute; inset: var(--inset, 0); }
.art__img img { width: 100%; height: 100%; max-width: none; }
.art-stage { position: absolute; left: 0; top: 0; width: 416px; height: 523px; }

.speech-text { width: var(--tw, auto); color: var(--color-black); text-align: center; text-transform: uppercase; line-height: var(--leading-speech); letter-spacing: var(--tracking-speech); }
.speech-text--mono { font: 500 24px / var(--leading-speech) var(--font-mono); white-space: pre; }
.speech-text--hand { font: 700 16px / var(--leading-speech) var(--font-hand); }
.speech-text--hand-md { font-size: 20px; }
.speech-text--hand-lg { font-size: 24px; }

/* ---------- Home sections ---------- */
.home-section { margin-top: var(--section-gap); }

/* Points: three pain cards */
.pain-grid { margin-top: var(--gap-heading-content); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.pain-card {
  position: relative; overflow: clip; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-16);
  min-height: 523px; padding: var(--space-40); border-radius: var(--radius-medium); color: var(--color-white);
}
.pain-card--mid { background: var(--color-brand-mid); }
.pain-card--gradient { justify-content: flex-start; background: linear-gradient(129.78deg, var(--gradient-brand-light-stops)); }
.pain-card--dark { background: var(--color-brand-dark); }
.pain-card__art { position: absolute; inset: 0; container-type: inline-size; pointer-events: none; }
.pain-card__art .art-stage { zoom: 1; }
@media (max-width: 1279px) { .pain-card__art .art-stage { zoom: 0.84; } }
@media (max-width: 1023px) { .pain-card__art .art-stage { zoom: 1; } }
@media (max-width: 767px) { .pain-card__art .art-stage { zoom: 0.78; } }
@supports (zoom: tan(atan2(1px, 1px))) {
  .pain-card__art .art-stage { zoom: min(1, tan(atan2(100cqw, 416px))); }
}
.pain-card--art-bottom .art-stage { top: auto; bottom: 0; }
.pain-card__spacer { flex: none; margin: calc(-1 * var(--space-40)) calc(-1 * var(--space-40)) 0; aspect-ratio: 416 / var(--art-space); max-height: calc(var(--art-space) * 1px); }
.pain-card--art-bottom .pain-card__spacer { margin: 0 calc(-1 * var(--space-40)) calc(-1 * var(--space-40)); }
.pain-card__title {
  position: relative;
  font: 700 var(--text-h3) / var(--leading-heading) var(--font-display);
  font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-heading);
}
.pain-card__title:has(> s) { text-decoration: line-through 0.0625em; text-decoration-skip-ink: none; }
.pain-card__title s { text-decoration: none; }
.pain-card__body {
  position: relative;
  font: 500 var(--text-body-md) / var(--leading-body) var(--font-display);
  font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-body-md);
  color: var(--color-white-secondary);
  text-box: trim-both cap alphabetic;
}

/* Operator: alternating text / image rows */
.split-list { margin-top: var(--gap-heading-content); display: flex; flex-direction: column; gap: var(--gap-heading-content); }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, var(--width-5col))); justify-content: center; align-items: center; gap: var(--gap-gutter); }
.split--media-first .split__media { order: -1; }
.split__text { display: flex; flex-direction: column; gap: var(--space-20); padding-block: var(--gap-separation); }

/* Features: stacked cards. Static by default (cards follow each other); js/stack.js adds .is-stacking to pin
   the stage and slide every next card over the previous one, as in the four Figma variants. */
.home-section--title-offset { padding-top: var(--space-12); }
.stack { margin-top: var(--gap-heading-content); padding-bottom: 147px; display: grid; gap: var(--space-24); }
.stack-card {
  position: relative; overflow: hidden;
  width: min(100%, 1288px); min-height: var(--card-h); padding: var(--space-60);
  border-radius: var(--radius-large); box-shadow: var(--shadow-overlay); color: var(--color-white);
}
.features.is-stacking .features__scroller { height: calc(var(--stage-h) * var(--fit, 1) + var(--steps) * var(--step)); }
.features.is-stacking .features__stage {
  position: sticky; top: max(0px, (100vh - var(--stage-h) * var(--fit, 1)) / 2); height: calc(var(--stage-h) * var(--fit, 1));
  clip-path: inset(0 -100vw 0 -100vw);
}
/* Lower or narrower windows than the Figma frame: scale the whole stage (title + cards) to fit (js/stack.js sets --fit). */
.features.is-stacking .features__stage > .container { zoom: var(--fit, 1); }
/* Phone, tablet and low windows: sticky cards, each slides over the previous one (js/stack.js sets --sticky-top). */
.features.is-sticky-stack .stack { align-items: start; padding-bottom: var(--space-24); }
.features.is-sticky-stack .stack-card {
  position: sticky; top: var(--sticky-top, 76px); transform-origin: 50% 0; will-change: transform;
  box-shadow: 0 -8px 32px rgba(13, 39, 28, 0.18), var(--shadow-overlay);
}
.features.is-sticky-stack .stack-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: #0d271c; opacity: calc(var(--cover, 0) * 0.28);
}
.features.is-stacking .stack { position: relative; display: block; height: calc(var(--stage-h) - 204px); padding: 0; }
.features.is-stacking .stack-card {
  position: absolute; left: 0; top: calc(var(--i, 0) * 32px);
  transform-origin: 50% 0; will-change: transform; backface-visibility: hidden;
}
.stack-card--dark { background: var(--color-brand-dark); }
.stack-card--gradient { background: linear-gradient(96.26deg, var(--gradient-brand-stops)); }
.stack-card--light { background: var(--color-brand-light); color: var(--color-fg-primary); }
.stack-card--pale { background: var(--color-brand-pale); color: var(--color-fg-primary); }
.stack-card--light .feature__label, .stack-card--pale .feature__label,
.stack-card--light .feature__body, .stack-card--pale .feature__body { color: var(--color-fg-secondary); }
.stack-card--light .feature__body { opacity: 0.8; }
.stack-card__media { position: absolute; left: 608px; top: var(--space-60); width: 620px; height: 463px; border-radius: var(--radius-medium); background: #f8fafc; }
.stack-card__blob { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.stack-card__blob img { flex: none; width: var(--iw, 100%); height: var(--ih, 100%); max-width: none; rotate: var(--r, 0deg); }
.stack-card__text { position: relative; z-index: 1; width: 438px; display: flex; flex-direction: column; gap: var(--space-60); }
.stack-card__text .heading-3 { white-space: nowrap; }
.feature-list { width: 425px; max-width: 100%; display: flex; flex-direction: column; gap: var(--space-40); }
.feature { display: flex; flex-direction: column; gap: var(--space-8); }
.feature__label {
  margin-bottom: var(--space-8);
  font: 700 var(--text-body-sm) / var(--leading-heading) var(--font-display);
  font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-button-sm);
  color: var(--color-white-secondary);
  text-box: trim-both cap alphabetic;
}
.feature__title {
  font: 700 var(--text-h4) / var(--leading-heading) var(--font-display);
  font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-heading);
}
.feature__body {
  font: 500 var(--text-body-sm) / var(--leading-body) var(--font-display);
  font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-body-sm);
  color: var(--color-white-secondary);
}
/* Product screen in a device frame. The ring sits outside the screen (Figma outside stroke). */
.device {
  position: absolute; left: calc(558px - 9.061px); top: calc(60px - 9.061px);
  width: calc(var(--device-w, 971px) + 18.122px); height: calc(var(--device-h, 879px) + 18.122px);
  border: 9.061px solid var(--color-device-ring); border-radius: 22.653px;
  background: var(--color-surface-dark) padding-box;
}
.device__screen { width: 730px; height: auto; max-width: none; border-top-left-radius: 13.592px; }

/* Quotes */
.quote-grid { margin-top: var(--gap-heading-content); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-gutter); }
.quote-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap-heading-content); padding: var(--space-32); border-radius: var(--radius-large); background: linear-gradient(94.65deg, var(--gradient-brand-stops)); color: var(--color-white); }
.quote-card__text p {
  font: 500 var(--text-quote) / var(--leading-body) var(--font-display);
  font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-body-sm);
  text-indent: -0.45em;
}
.person { display: flex; align-items: center; gap: var(--space-16); }
.person__avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--color-bg-base); }
.person__meta { display: flex; flex-direction: column; gap: var(--space-4); white-space: nowrap; }
.person__name { font: 700 var(--text-h5) / var(--leading-heading) var(--font-display); font-feature-settings: var(--font-features-display); letter-spacing: var(--tracking-h5); }
.person__role { font: 400 var(--text-body-xs) / var(--leading-body) var(--font-body); color: var(--color-white-secondary); }
.partners { margin-top: var(--gap-heading-content); padding-inline: var(--gap-gutter); display: flex; flex-direction: column; align-items: center; gap: var(--space-32); }
.partners__intro { font: 700 var(--text-h5) / var(--leading-heading) var(--font-display); font-feature-settings: var(--font-features-display); letter-spacing: var(--tracking-h5); color: var(--color-fg-tertiary); text-align: center; }
.logo-row { width: min(100%, var(--width-8col)); padding: 0; list-style: none; display: flex; justify-content: space-between; gap: var(--space-16); }
.logo-row__item { flex: none; width: 140px; height: 120px; }
.logo-row__item img { width: 100%; height: 100%; object-fit: contain; }

/* News */
.news__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); }
.post-grid { margin-top: var(--space-54); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-gutter); }
.post-card__link { display: flex; flex-direction: column; text-decoration: none; border-radius: var(--radius-medium); }
.post-card__link .media { margin-bottom: var(--space-20); }
.post-card__link:hover .media > img:first-child { scale: 1.03; }
.post-card__link:hover .post-card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.post-card__meta { font: 500 var(--text-body-sm) / var(--leading-body) var(--font-display); font-feature-settings: var(--font-features-display); letter-spacing: var(--tracking-body-sm); color: var(--color-brand-mid); text-transform: uppercase; }
.post-card__title { margin-top: var(--space-12); padding-top: var(--space-4); font: 700 var(--text-h4) / var(--leading-heading) var(--font-display); font-feature-settings: var(--font-features-display); letter-spacing: var(--tracking-heading); color: var(--color-fg-heading-news); }
.post-card__excerpt {
  margin-top: var(--space-12);
  font: 500 var(--text-body-sm) / var(--leading-body) var(--font-display); font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-body-sm); color: var(--color-fg-tertiary);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

/* Careers: heading + photo mosaic */
.section-head--padded { padding-top: var(--gap-separation); }
.mosaic { margin-top: var(--gap-separation); display: flex; justify-content: center; overflow: hidden; }
.mosaic__stage {
  position: relative; flex: none; width: 1824px; height: 520px; padding-inline: var(--gap-gutter);
  display: flex; align-items: flex-end; gap: var(--space-20);
  zoom: 1;
}
@media (min-width: 1700px) { .mosaic__stage { zoom: 1.13; } }
@media (max-width: 1279px) { .mosaic__stage { zoom: 0.85; } }
@media (max-width: 1023px) { .mosaic__stage { zoom: 0.6; } }
@media (max-width: 767px) { .mosaic__stage { zoom: 0.5; } }
@supports (zoom: tan(atan2(1px, 1px))) {
  .mosaic__stage { zoom: clamp(0.5, max(min(1, tan(atan2(100vw, 1440px))), tan(atan2(100vw, 1700px))), 1.3); }
}
.mosaic__col { flex: none; width: 320px; display: flex; flex-direction: column; gap: var(--space-20); }
.mosaic__tile { position: relative; flex: none; height: var(--tile-h); border-radius: var(--radius-medium); overflow: hidden; }
.mosaic__tile--accent { background: var(--color-bg-accent); }
.mosaic__tile--light { background: var(--color-brand-light); }
.mosaic__tile--gradient { background: linear-gradient(var(--angle, 95deg), var(--gradient-brand-stops)); }
.mosaic__tile--code { background: var(--color-surface-dark); }
.mosaic__tile--center { display: flex; align-items: center; justify-content: center; }
.mosaic__photo { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); max-width: none; object-fit: cover; }
.mosaic__icon { position: absolute; left: 44px; top: 44px; width: 32px; height: 32px; }
.mosaic__badge-label, .pill__label {
  font: 700 var(--text-pill) / var(--leading-heading) var(--font-display); font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-heading); white-space: nowrap; text-box: trim-both cap alphabetic;
}
.mosaic__badge-label { position: absolute; left: 88px; top: 51px; color: var(--color-fg-primary); }
.mosaic__bubbles { position: absolute; inset: 0; pointer-events: none; }
.pill { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-20) var(--space-8) var(--space-12); border-radius: var(--radius-large); background: var(--color-brand-deep); }
.pill img { flex: none; width: 32px; height: 32px; }
.pill__label { padding-bottom: 2px; color: var(--color-white); }
.code-tile {
  position: absolute; left: var(--space-24); top: var(--space-24); width: 272px;
  font: 300 20px / var(--leading-code) var(--font-mono); font-feature-settings: "liga" 0;
  letter-spacing: -0.01em; color: var(--color-code-text); white-space: pre-wrap; text-box: trim-both cap alphabetic;
}
.code-tile__var { color: var(--color-code-var); }
.code-tile--ai { white-space: pre; }
.code-line { display: block; min-height: 1.25em; }
.code-line--dim { color: rgba(243, 247, 228, 0.55); }
.code-line--status { text-align: right; color: var(--color-code-var); }
.code-line--dim .code-tile__cmd { color: var(--color-code-cmd); }
.code-tile__cmd { color: var(--color-code-cmd); }

/* CTA */
.cta { position: relative; overflow: hidden; margin-top: var(--section-gap); background: linear-gradient(99.56deg, var(--gradient-brand-stops)); color: var(--color-white); }
.cta__inner { position: relative; width: min(100%, var(--width-full)); min-height: 436px; margin-inline: auto; padding: var(--gap-section); display: flex; flex-direction: column; justify-content: flex-end; }
.cta__blob { position: absolute; left: var(--x); top: var(--y); pointer-events: none; }
.cta__blob img { max-width: none; }
.cta__blob--flip img { rotate: 180deg; }
.cta__content { position: relative; width: min(100%, var(--width-8col), 100% - 406px); display: flex; flex-direction: column; gap: var(--space-20); }
.cta__content > .btn-row { margin-top: var(--space-12); }
.cta__title { color: var(--color-white); }
.cta__bubbles { position: absolute; right: 117px; top: 52px; width: 353px; height: 278px; pointer-events: none; }

/* Footer */
.footer { overflow: hidden; background: var(--color-brand-deep); color: var(--color-white-secondary); }
.footer__inner { padding-block: var(--gap-gutter); display: flex; flex-direction: column; gap: 128px; }
.footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-gutter); align-items: start; }
.footer__logo { display: block; width: fit-content; border-radius: var(--radius-small); }
.footer__logo img { width: 210.273px; height: 36px; }
.footer__spacer { height: 138px; }
.footer__col { display: flex; flex-direction: column; gap: var(--space-24); }
.footer__heading { font: 700 var(--text-body-sm) / var(--leading-heading) var(--font-display); font-feature-settings: var(--font-features-display); letter-spacing: var(--tracking-h6); color: var(--color-brand-pale); opacity: 0.5; text-box: trim-both cap alphabetic; }
.footer__links { padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-20); }
.footer__links a, .footer__legal a, .footer__legal .email {
  display: block; width: fit-content; text-decoration: none;
  font: 500 var(--text-body-sm) / var(--leading-heading) var(--font-display); font-feature-settings: var(--font-features-display);
  letter-spacing: var(--tracking-h6); color: var(--color-white-secondary); text-box: trim-both cap alphabetic;
  transition: color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.footer__links a:hover { color: var(--color-white); }
.footer__hiring { display: flex; align-items: flex-start; gap: var(--space-8); }
.footer__hiring .lozenge { margin-block: -3px -5px; }
.lozenge {
  padding: 5px; border-radius: var(--radius-xs); background: var(--color-brand-light); color: var(--color-brand-deep);
  font: 500 var(--text-code) / var(--leading-heading) var(--font-mono); letter-spacing: -0.01em; white-space: nowrap; text-box: trim-both cap alphabetic;
}
.footer__end { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; min-height: 16px; }
.footer__tagline { display: flex; align-items: center; gap: var(--space-8); height: 16px; font: 500 var(--text-code) / var(--leading-heading) var(--font-mono); letter-spacing: -0.01em; color: var(--color-brand-pale); }
.footer__tagline span { opacity: 0.5; text-box: trim-both cap alphabetic; }
.footer__tagline img { width: 16px; height: 16px; }
.footer__legal { display: flex; gap: var(--space-24); margin-top: 3px; }
.footer__legal a, .footer__legal .email { font-size: var(--text-body-xs); opacity: 0.6; } /* Figma 0.5; 0.6 reaches AA */
.footer__legal a:hover { opacity: 0.9; }
.footer__copy { justify-self: end; display: flex; align-items: flex-start; gap: var(--space-8); margin-top: 3px; white-space: nowrap; }
.footer__copy-mark { font: 500 var(--text-body-xs) / var(--leading-heading) var(--font-display); letter-spacing: -0.01em; color: var(--color-white-secondary); opacity: 0.6; text-box: trim-both cap alphabetic; }
.footer__copy-text { font: 500 var(--text-code) / var(--leading-heading) var(--font-mono); letter-spacing: -0.01em; color: var(--color-brand-pale); opacity: 0.5; text-box: trim-both cap alphabetic; }

/* Video dialog */
.video-dialog { width: min(100% - 32px, 1120px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--radius-medium); background: var(--color-black); overflow: visible; }
.video-dialog::backdrop { background: rgba(13, 39, 28, 0.86); }
.video-dialog__frame { aspect-ratio: 16 / 9; border-radius: inherit; overflow: hidden; }
.video-dialog__frame iframe, .video-dialog__frame video { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.video-dialog__close {
  position: absolute; right: 0; top: -56px; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: var(--color-bg-base); color: var(--color-fg-primary); cursor: pointer;
}
.video-dialog__close:hover { background: var(--color-brand-pale); }
.video-dialog__close:focus-visible { outline: var(--focus-ring); }
button.btn { border: 0; cursor: pointer; font-family: var(--font-display); }
button.btn--ghost { border: 1.5px solid var(--color-white-border); background: transparent; }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .cta__inner { padding-inline: var(--gap-gutter); }
}

@media (max-width: 1023px) {
  /* Navigation becomes a full-screen panel */
  .menu-toggle {
    position: relative; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px;
    border: 0; border-radius: var(--radius-small); background: transparent; color: var(--color-white); cursor: pointer;
  }
  .menu-toggle:hover { background: var(--color-white-hover); }
  .menu-toggle .icon-mask { grid-area: 1 / 1; transition: opacity var(--duration-fast) var(--ease-out), rotate var(--duration-fast) var(--ease-out); }
  .menu-toggle .icon-mask--close { opacity: 0; rotate: -45deg; }
  .menu-toggle[aria-expanded="true"] .icon-mask--menu { opacity: 0; rotate: 45deg; }
  .menu-toggle[aria-expanded="true"] .icon-mask--close { opacity: 1; rotate: 0deg; }
  .topbar__logo { position: relative; z-index: 2; }
  .nav {
    position: fixed; inset: 0; z-index: 1; overflow-y: auto;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--space-32);
    padding: calc(var(--topbar-height) + var(--space-24)) var(--page-gutter) var(--space-40);
    background: var(--color-brand-dark);
    visibility: hidden; opacity: 0; translate: 0 -12px;
    transition: opacity 200ms var(--ease-out), translate 200ms var(--ease-out), visibility 0s linear 200ms;
  }
  [data-menu-open] .nav { visibility: visible; opacity: 1; translate: 0 0; transition: opacity 200ms var(--ease-out), translate 200ms var(--ease-out), visibility 0s; }
  .nav__items { flex-direction: column; gap: 0; }
  .nav__items li + li { border-top: 1px solid var(--color-white-border); }
  .nav__item { height: 64px; padding: 0 var(--space-8); font-size: 1.5rem; color: var(--color-white); border-radius: 0; }
  .nav__item:hover { background: transparent; color: var(--color-brand-light); }
  .nav .btn--small { height: 52px; font-size: var(--text-button); border-radius: 26px; }
  button.nav__item { width: 100%; }
  .nav__item[aria-expanded="true"] { background: transparent; }
  .nav__dropdown { position: static; min-width: 0; margin: -8px 0 12px; padding: 0 0 0 var(--space-16); background: transparent; box-shadow: none; }
  .nav__dropdown-link { min-height: 48px; padding: 0 var(--space-8); font-size: var(--text-body-md); color: var(--color-white-secondary); }
  .nav__dropdown-link:hover { background: transparent; color: var(--color-brand-light); }
  .nav__dropdown :focus-visible { outline: var(--focus-ring); }
  .mega__intro, .mega__cards { display: none; }
  .mega__link { gap: 12px; }
  .mega__icon { width: 22px; height: 22px; color: var(--color-brand-light); }

  .hero__inner { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--space-40); min-height: 0; padding-top: calc(var(--topbar-height) + 56px); padding-bottom: 64px; }
  .hero__main { width: 100%; }
  .hero__media { width: min(100%, 560px); margin-top: 0; align-self: flex-end; }
  .hero__blob { left: auto; right: -200px; top: auto; bottom: -88px; width: 600px; height: auto; aspect-ratio: 754 / 792; }

  .pain-grid { grid-template-columns: minmax(0, 1fr); }
  .pain-card { min-height: 0; }
  .pain-card__art .art-stage { left: auto; right: 0; }
  .logo-row { flex-wrap: wrap; justify-content: center; gap: var(--space-8) var(--space-32); }
  .logo-row__item { width: 120px; height: 100px; }
  .footer__hiring { align-items: center; }
  .footer__hiring .lozenge { margin-block: 0; }
  .split { grid-template-columns: minmax(0, 640px); gap: var(--space-32); }
  .split .split__media { order: -1; }
  .split__text { padding-block: 0; }

  .stack { gap: var(--space-24); padding-bottom: 0; }
  .stack-card { min-height: 0; padding: var(--space-40) var(--space-40) 0; }
  .stack-card__text { width: auto; max-width: 560px; gap: var(--space-40); }
  .stack-card__text .heading-3 { white-space: normal; }
  .device { position: relative; left: auto; top: auto; width: auto; height: 380px; margin: var(--space-40) calc(-1 * var(--space-40)) 0 -9.061px; border-right: 0; border-bottom: 0; border-radius: 22.653px 0 0 0; overflow: hidden; }
  .device__screen { width: 640px; }
  .stack-card__media { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 620 / 463; margin: var(--space-40) 0; }

  .quote-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .partners { padding-inline: 0; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-40) var(--space-24); }

  .cta__inner { min-height: 0; padding: var(--gap-section) var(--page-gutter); }
  .cta__content { width: min(100%, var(--width-8col)); }
  .cta__bubbles { position: relative; right: auto; top: auto; align-self: flex-end; margin-top: var(--space-24); }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-40); }
  .footer__logo { grid-column: 1 / -1; }
  .footer__spacer { display: none; }
  .footer__inner { gap: 72px; }
  .footer__end { grid-template-columns: 1fr; gap: var(--space-24); justify-items: start; }
  .footer__copy { justify-self: start; }

  /* Touch targets of at least 44 px for small links */
  .topbar__logo { padding-block: 4px; }
  .link-arrow { height: 44px; margin-block: -12px; }
  .footer__links { gap: 0; }
  .footer__links a, .footer__legal a { display: flex; align-items: center; min-height: 44px; text-box: none; }
  .footer__links { margin-block: -12px; }
  .footer__legal { gap: var(--space-24); flex-wrap: wrap; margin-top: 0; }
  .footer__logo { padding-block: 4px; }
  .footer__links a, .footer__legal a { min-width: 44px; }
}

/* Touch screens at desktop widths: enlarge hit areas to 44 px without changing the look */
@media (pointer: coarse) {
  .nav__item, .btn--small, .link-arrow, .footer__links a, .footer__legal a, .topbar__logo, .footer__logo { position: relative; }
  :is(.nav__item, .btn--small, .link-arrow, .footer__links a, .footer__legal a, .topbar__logo, .footer__logo)::after {
    content: ""; position: absolute; inset: min(0px, (100% - 44px) / 2);
  }
}

@media (max-width: 767px) {
  .topbar__inner { width: calc(100% - 2 * var(--page-gutter)); }
  .topbar__logo img { width: 175px; height: auto; }
  .hero__inner { padding-top: calc(var(--topbar-height) + 32px); padding-bottom: 48px; gap: var(--space-32); }
  .hero__row { flex-wrap: wrap; height: auto; min-height: 1em; row-gap: 0.1em; white-space: normal; }
  .hero__media { width: 100%; }
  .hero__blob { right: -260px; width: 520px; }
  .btn-row .btn { flex: 1 1 auto; }

  .pain-card { padding: var(--space-32); }
  .pain-card__spacer { margin: calc(-1 * var(--space-32)) calc(-1 * var(--space-32)) 0; }
  .pain-card--art-bottom .pain-card__spacer { margin: 0 calc(-1 * var(--space-32)) calc(-1 * var(--space-32)); }

  .stack-card { padding: var(--space-32) var(--space-24) 0; border-radius: var(--radius-medium); }
  .device { height: 210px; margin: var(--space-32) calc(-1 * var(--space-24)) 0 -9.061px; }
  /* Compact cards on phones, so a whole card fits the screen and the sticky stack reads as a stack. */
  .stack-card__text { gap: var(--space-24); }
  .feature-list { gap: var(--space-24); }
  .feature__label { margin-bottom: 0; }
  .feature__body { font-size: 15px; line-height: 1.5; }
  .stack-card__media { margin: var(--space-24) 0; aspect-ratio: 16 / 9; }
  .device__screen { width: 520px; }

  .quote-card { padding: var(--space-24) var(--space-24) var(--space-24) calc(var(--space-24) + 0.45em); border-radius: var(--radius-medium); gap: var(--space-40); }
  .logo-row { flex-wrap: wrap; justify-content: center; gap: var(--space-8) var(--space-24); }
  .logo-row__item { width: 100px; height: 72px; }

  .news__head { flex-wrap: wrap; }
  .post-grid { grid-template-columns: minmax(0, 1fr); }

  .cta__bubbles { zoom: 0.8; align-self: center; }

  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .topbar__logo { padding-block: 8px; }
  .skip-link { padding-block: 13px; }

  /* Titles with an icon tile flow as text, the tile sits inline between the words */
  .display-title { line-height: 1.1; }
  .display-title__line { display: block; }
  .display-title .tile, .display-title:not(.display-title--stack) .tile { display: inline-flex; vertical-align: -0.22em; margin: -0.1em 0.06em; }
  .display-title--stack, .display-title--loose { margin-block: 0; gap: 0; }
  .hero__blob { bottom: -56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}