@font-face {
  font-family: "Only Extended";
  src: url("fonts/OnlyExtended.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* Carter landing page — mobile-first stylesheet
   Base styles target the 390px mobile design; the desktop (1440/1600)
   layout is layered on at min-width: 900px (two-column feature sections
   from 1024px).  Palette tokens are the exact values from the design PDF;
   the "derived" tokens were measured in the zoomed slices. */

:root {
  --c-dark: #1B1820;    /* brand Ink */
  --c-accent: #9A2B8C;  /* brand Plum */
  --c-accent-hover: #7E2272;  /* button hover: one step darker than the button ground */
  --c-accent-dark: #9A2B8C;   /* small accent text on white/off-white AND the button ground (white text 6.8:1) */
  --c-accent-ink: #7E2272;    /* small accent text on plum tints (7.1:1) */
  --c-off: #F6F4F7;     /* brand Neutral */
  --c-beige: #E7E4EA;   /* brand Hairline */
  --c-muted: #6C6873;   /* brand Ink Soft */
  --c-muted-on-dark: #A9A4AE;
  --c-peach: #F2E1EE;   /* brand Plum Soft */
  --c-peach-soft: #F8EEF5;
  --c-white: #FFFFFF;
  --c-nav-inactive: #BCB8C0;
  --c-underline-soft: #D9A3CF;
  --c-disc-disabled: #F8F7F9;
  --c-glyph-disabled: #98949C;
  --c-disc-disabled-panel: #FCFBFC;
  --c-glyph-disabled-panel: #96929A;
  --c-pause-disc: #F6F4F7;

  --font-heading: "Only Extended", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --c-accent-on-dark: #C457B0; /* brand Plum Light: accent on dark grounds (4.5:1 on Ink, large text only) */

  --gutter: 24px;
  --nav-h: 88px;
  --section-pad: 64px;
  --panel-pad: 64px;
  --section-pad-top: 64px; /* Figma: sections open tighter than they close */
  --radius: 8px;
  --tap: 44px;
  --card-gap: 24px;
  --card-w: min(320px, calc(100vw - 2 * var(--gutter) - 24px));
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-dark);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--c-white); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--c-white); color: var(--c-dark); padding: 12px 16px; border-radius: var(--radius);
  font-weight: 600;
}
.skip-link:focus { top: 16px; }
/* desktop-only line breaks (reproduce the design's heading rag) */
.br-d { display: none; }

/* ---------- Typography ---------- */
.h1, .h2, .stat__num {
  font-family: var(--font-heading);
  font-weight: 500;
}
/* Brand: Only Extended for headlines of 26px and up only; eyebrows and labels use Instrument Sans */
.eyebrow, .stat__label, .stat__pre { font-family: var(--font-body); font-weight: 500; }
.h1 { font-size: clamp(26px, 6.6vw, 36px); /* brand: Only Extended never below 26px */ line-height: 1.1; letter-spacing: -0.01em; color: var(--c-white); }
.h1 .accent { color: var(--c-accent-on-dark); }
.h2 { font-size: clamp(28px, 8.2vw, 40px); line-height: 1.2; letter-spacing: -0.01em; color: var(--c-dark); }
.h2 .accent { color: var(--c-accent); }
.h2--long { font-size: clamp(26px, 7.2vw, 36px); }
/* Brand "Heading" (card and block titles): Instrument Sans 22/600; Only Extended is for 26px+ headlines only */
.h3 { font-family: var(--font-body); font-weight: 600; font-size: 22px; line-height: 28px; color: var(--c-dark); }
.eyebrow { font-size: 18px; line-height: 1.3; color: var(--c-accent-dark); } /* #9A2B8C = 6.8:1 on white, 6.2:1 on off-white */
.body, .hero__text { font-size: 17px; line-height: 24px; }
.small { font-size: 14px; line-height: 20px; }
.muted { color: var(--c-muted); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: calc(1344px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad-top) var(--section-pad); scroll-margin-top: var(--nav-h); }
.panel { background: var(--c-off); padding-block: var(--section-pad-top) var(--panel-pad); }
.section-head { display: grid; gap: 24px; }
.section-head .h2 { margin-top: 8px; }
.section-head .body { max-width: 660px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: var(--radius);
  background: var(--c-accent-dark); color: var(--c-white); /* white on Plum #9A2B8C = 6.8:1 */
  font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background-color 150ms ease;
}
.btn:hover { background: var(--c-accent-hover); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .7; cursor: default; }
.btn--sm { min-height: 40px; padding: 0 16px; }
.btn--ghost { background: transparent; color: var(--c-accent-dark); box-shadow: inset 0 0 0 1.5px var(--c-accent-dark); }
.btn--ghost:hover { background: var(--c-peach-soft); color: var(--c-accent-hover); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.section-head__cta { justify-self: start; }
.acc__cta { margin-top: 24px; }

/* Arrow discs: always one step lighter than their ground */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-off); color: var(--c-dark);
  transition: background-color 150ms ease;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--c-beige); }
.icon-btn[aria-disabled="true"] { background: var(--c-disc-disabled); color: var(--c-glyph-disabled); cursor: default; }
.panel .icon-btn { background: var(--c-white); }
.panel .icon-btn:hover { background: var(--c-beige); }
.panel .icon-btn[aria-disabled="true"] { background: var(--c-disc-disabled-panel); color: var(--c-glyph-disabled-panel); }

.link-soft {
  color: var(--c-accent-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--c-underline-soft);
  text-underline-offset: 3px;
}
.link-soft:hover { text-decoration-color: var(--c-accent); }

.pill {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: 6px; background: var(--c-peach); color: var(--c-accent-ink);
  font-size: 13px; line-height: 1; font-weight: 400;
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-dark); color: var(--c-white);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: var(--nav-h); padding-inline: var(--gutter);
  transition: min-height 200ms var(--ease);
}
.logo { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--c-white); }
.logo svg { width: 108px; height: 21px; flex-shrink: 0; fill: currentColor; }
.nav__list { display: none; }
.nav__right { display: flex; align-items: center; gap: 24px; flex: 0 0 auto; }
.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); margin-right: -10px; color: var(--c-white);
}
.hamburger svg { width: 24px; height: 24px; }
.hamburger .ic-close { display: none; }
.hamburger[aria-expanded="true"] .ic-menu { display: none; }
.hamburger[aria-expanded="true"] .ic-close { display: block; }

/* Mobile overlay menu */
.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49;
  background: var(--c-dark); color: var(--c-white);
  overflow-y: auto; padding: 16px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
}
.mobile-menu__list { display: flex; flex-direction: column; }
.mobile-menu__list > li > a,
.mobile-menu__list > li > button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 52px; font-size: 18px; font-weight: 500; line-height: 1.2; color: var(--c-white);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-menu__list > li > a[aria-current="page"] { color: var(--c-accent); }
.mobile-menu__list button svg { width: 16px; height: 16px; transition: transform 200ms ease; }
.mobile-menu__list button[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-menu__sub { padding: 8px 0 8px 16px; display: flex; flex-direction: column; }
.mobile-menu__sub a {
  display: flex; align-items: center; min-height: var(--tap);
  font-size: 16px; color: var(--c-nav-inactive);
}
.mobile-menu__sub a:hover, .mobile-menu__sub a:focus-visible { color: var(--c-white); }
.mobile-menu__cta { margin-top: auto; padding-top: 32px; }
.mobile-menu__cta .btn { width: 100%; }

/* Desktop nav (hidden on mobile) */
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); padding: 0 2px; white-space: nowrap;
  font-size: 14px; font-weight: 500; line-height: 1; color: var(--c-nav-inactive);
  transition: color 150ms ease;
}
.nav__link:hover, .nav__link:focus-visible, .nav__link[aria-expanded="true"] { color: var(--c-white); }
.nav__link[aria-current="page"], .nav__link.is-active { color: var(--c-white); }
.nav__link[aria-current="page"]::after, .nav__link.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--c-accent);
}
.nav__link.is-active::after { right: 18px; }
.nav__link svg { width: 12px; height: 12px; flex: 0 0 12px; transition: transform 200ms ease; }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__item--dd { position: relative; }
.dropdown {
  position: absolute; top: calc(100% - 4px); left: -8px; min-width: 300px;
  background: var(--c-dark); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  padding: 8px; z-index: 60;
}
.dropdown a {
  display: flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 6px;
  font-size: 14px; font-weight: 500; color: var(--c-nav-inactive); white-space: nowrap;
}
.dropdown a:hover, .dropdown a:focus-visible { background: rgba(255,255,255,.06); color: var(--c-white); }

/* ---------- Hero + stats (dark block) ---------- */
.hero-block { position: relative; isolation: isolate; overflow: hidden; background: var(--c-dark); color: var(--c-white); }
.hero {
  display: flex; flex-direction: column; justify-content: center;
  text-align: left; padding: 64px var(--gutter) 16px;
  /* Fill the first screen below the sticky header, so the stats start just under the fold */
  min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h));
}
.hero { position: relative; }
/* Timo's constellation element fills the hero; the bottom fades into the stats so there is no hard edge */
.hero__fx {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: .75;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent);
}
.hero__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 1344px; margin-inline: auto; } /* left edge = .container's */
.hero__inner .h1 { max-width: none; }
.hero__text { color: var(--c-muted-on-dark); margin-top: 32px; max-width: 640px; }
.hero__cta { margin-top: 40px; }
/* Rotating second line of the hero headline: each new line swipes in from the left */
.rotator { display: inline-grid; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.rotator__item {
  grid-area: 1 / 1; justify-self: start; white-space: nowrap;
  opacity: 0; transform: translateX(-115%);
  transition: transform 700ms var(--ease), opacity 500ms ease;
}
.rotator__item.is-active { opacity: 1; transform: none; }
.rotator__item.is-leaving { opacity: 0; transform: translateX(115%); }
@media (prefers-reduced-motion: reduce) { .rotator__item { transition: none; } }
.hero__links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin-top: 32px; max-width: 760px; }
.hero__links a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); color: var(--c-nav-inactive);
  background: var(--c-dark); /* solid, so the constellation does not show through */
  font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: border-color 150ms ease, color 150ms ease;
}
.hero__links a:hover { border-color: var(--c-accent); color: var(--c-white); }
.scroll-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; margin-top: 40px;
  align-self: flex-start; /* flush with the left-aligned hero copy (Pasi, 20.10) */
  background: #39233A; color: var(--c-accent-on-dark); /* = Plum Light at 18% on Ink, but opaque over the constellation */
  transition: background-color 150ms ease;
}
.scroll-btn:hover { background: #4E2B4B; }
.scroll-btn svg { width: 16px; height: 16px; }

.stats { padding: 96px var(--gutter) 120px; scroll-margin-top: var(--nav-h); }
.stats__grid { display: grid; gap: 48px; text-align: center; max-width: 1280px; margin-inline: auto; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stat__pre { font-size: 18px; line-height: 1.3; color: var(--c-muted-on-dark); }
.stat__num { font-size: 64px; line-height: 1; color: var(--c-white); }
.stat__label { font-size: 18px; line-height: 1.3; color: var(--c-white); }

/* ---------- Generic feature section (Websites / Use cases) ---------- */
.feature { display: grid; gap: 48px; }
.feature > * { min-width: 0; }
.acc, .cards { min-width: 0; }
.feature__phone { display: flex; flex-direction: column; align-items: center; }
.feature__phone picture { width: 100%; display: flex; justify-content: center; }
.phone-img { width: 358px; max-width: 100%; height: auto; }
/* The clips are rendered on a near-white ground: clip to the phone's own outline so the corners
   disappear on the off-white panel (outline measured from the 780x1602 frames). */
.phone-video { display: block; background: transparent; clip-path: inset(1.2% 2% 1.3% 2.3% round 16.5% / 8.1%); }
.progress-row {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  width: min(360px, 90%); margin-top: 56px;
}
.progress { flex: 1; height: 3px; background: var(--c-beige); overflow: hidden; }
.progress__fill { height: 100%; width: 100%; background: var(--c-dark); transform-origin: left; transform: scaleX(0); }
.pause-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; color: var(--c-dark);
  background: transparent; transition: box-shadow 150ms ease;
}
.pause-btn:hover, .pause-btn:focus-visible { box-shadow: inset 0 0 0 1px var(--c-beige); }
.pause-btn svg { width: 16px; height: 16px; }
.pause-btn .ic-play { display: none; }
.pause-btn[aria-pressed="true"] .ic-pause { display: none; }
.pause-btn[aria-pressed="true"] .ic-play { display: block; }

/* ---------- Accordion (desktop) / slide carousel (mobile) ---------- */
.acc { margin-top: 48px; }
.acc__list {
  display: flex; align-items: flex-start; gap: 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  /* JS sets an explicit height = tallest *visible* slide, so short slides do not inherit the tallest one */
  transition: height 200ms var(--ease);
}
.acc__list::-webkit-scrollbar { display: none; }
.acc__item { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.acc__head { margin: 0; }
.acc__btn {
  display: flex; align-items: flex-start; gap: 16px; width: 100%; text-align: left;
  font-family: var(--font-body); font-weight: 600; color: var(--c-dark);
  font-size: 22px; line-height: 28px;
}
.acc--uc .acc__btn { max-width: 320px; }
.acc__badge, .acc__plus { display: none; }
.acc__body { padding-top: 24px; }
.acc__body p { font-size: 16px; line-height: 24px; }
.acc__body p + p { margin-top: 12px; }
.acc__bullets { margin-top: 24px; display: grid; gap: 8px; }
.acc__bullets li {
  position: relative; padding-left: 18px; font-size: 14px; line-height: 20px;
}
.acc__bullets li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-dark);
}
.acc__nav { display: flex; gap: 16px; margin-top: 24px; }
.acc--uc .acc__nav { margin-top: 40px; }

/* ---------- Card carousels (Platforms / Merchants) ---------- */
.cards { position: relative; margin-top: 48px; }
.cards__track {
  display: flex; gap: var(--card-gap); overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}
.cards__track::-webkit-scrollbar { display: none; }
.card {
  flex: 0 0 var(--card-w); scroll-snap-align: start; /* height follows the content; the flex row keeps cards equal */
  background: var(--c-white); padding: 40px 24px 24px;
}
.cards--soft .card { background: var(--c-off); }
.card__num, .item__num {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: .02em; color: var(--c-accent-dark);
}
.card__num::after, .item__num::after { content: ""; width: 24px; height: 1px; background: var(--c-peach); }
.card .h3 { margin-top: 24px; }
.card > p:not(.card__num) { margin-top: 24px; }
.cards__nav { display: flex; gap: 16px; margin-top: 24px; }
.cards__overlay { display: none; }

/* ---------- Merchants extras ---------- */
.eyebrow-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.merchants .section-head .btn { justify-self: start; margin-top: 8px; }

/* ---------- Why unique grid ---------- */
.unique__grid { margin-top: 48px; margin-inline: calc(var(--gutter) * -1); display: grid; background: var(--c-white); }
.unique__grid .item { padding: 32px 64px 32px 32px; }
.item .h3 { margin-top: 20px; }
.item > p:not(.item__num) { margin-top: 12px; }

/* ---------- About / founders ---------- */
.about__grid { display: grid; gap: 48px; }
.about__text .body { margin-top: 40px; max-width: 600px; }
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.founder__photo { aspect-ratio: 1 / 1; width: 100%; height: auto; display: block; object-fit: cover; background: var(--c-beige); }
.founder__name { margin-top: 24px; font-size: 20px; line-height: 1.2; font-weight: 600; }
.founder__role { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--c-muted); }

/* ---------- Contact form ---------- */
.contact { padding-top: 96px; }
.contact__grid { display: grid; gap: 48px; }
.contact__text .body { margin-top: 40px; max-width: 600px; }
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; line-height: 20px; color: var(--c-muted); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 0 20px; border: 1px solid var(--c-beige); border-radius: var(--radius);
  background: var(--c-white); color: var(--c-dark); font-family: var(--font-body); font-size: 14px; line-height: 20px;
  transition: border-color 150ms ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--c-muted); opacity: 1; }
.field textarea { min-height: 160px; padding: 16px 20px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--c-dark); outline: 2px solid var(--c-dark); outline-offset: 2px; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--c-accent); }
.field__error { font-size: 13px; line-height: 18px; color: var(--c-accent-dark); }
.form__actions { display: grid; gap: 12px; justify-items: start; margin-top: 4px; }
.form__error { font-size: 14px; line-height: 20px; color: var(--c-accent-dark); }
.form__fallback { margin-top: 20px; font-size: 14px; line-height: 20px; color: var(--c-muted); }
.form__fallback a { color: var(--c-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.form__success { background: var(--c-white); border-radius: var(--radius); padding: 24px; font-size: 16px; line-height: 24px; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-dark); color: var(--c-off); padding: 64px var(--gutter) calc(120px + env(safe-area-inset-bottom, 0px)); }
.footer__top { display: grid; gap: 112px; }
.footer__cols { display: grid; gap: 24px; }
.footer__heading { font-size: 14px; line-height: 20px; color: var(--c-muted-on-dark); margin-bottom: 4px; }
.footer__col a { display: inline-flex; align-items: center; min-height: 36px; font-size: 16px; line-height: 24px; color: var(--c-off); }
.footer__col a:hover { color: var(--c-accent); }
.footer__cta { display: none; }
.footer__copy { margin-top: 64px; font-size: 13px; line-height: 20px; color: var(--c-muted-on-dark); }

/* =====================================================================
   TABLET (600–899): let slides go 2-up and cards/founders breathe
   ===================================================================== */
@media (min-width: 600px) and (max-width: 899px) {
  .hero__inner .h1 { max-width: none; }
  .h2--long { font-size: 36px; line-height: 1.15; }
  .acc__item { flex-basis: calc(50% - 12px); }
  .founders { grid-template-columns: 200px 200px; gap: 48px; }
}

/* =====================================================================
   DESKTOP  (≥ 900px)
   ===================================================================== */
@media (min-width: 900px) {
  :root {
    --gutter: 48px; --nav-h: 80px; /* one fixed height: a taller unscrolled header only hid more of the hero */ --section-pad: 200px; --panel-pad: 200px; --section-pad-top: 120px;
    --card-gap: 48px;
    /* 3 cards + 3 gaps + a 128px peek of card 4 fill the width (400px at 1600) */
    --card-w: clamp(340px, calc((100vw - var(--gutter) - 3 * var(--card-gap) - 128px) / 3), 400px);
  }
  .h1 { font-size: 40px; }
  .h2 { font-size: 48px; line-height: 56px; max-width: 680px; } /* Figma headline boxes are 656-672px wide */
  .h2--long { font-size: 36px; line-height: 40px; }
  .section-head .h2 { margin-top: 16px; }
  .section-head .body { margin-top: 8px; }
  .section-head--inset { padding-left: 32px; }

  /* nav (the link list itself only appears from 1024px, see below) */
  .logo svg { width: 128px; height: 25px; }
  .nav { gap: 24px; }
  .btn--nav { min-height: 40px; padding: 0 16px; }

  /* hero */
  .hero { padding-top: 152px; padding-bottom: 24px; } /* Figma 112 + 40: room for the top of the constellation */
  .hero__inner .h1 { max-width: none; }
  .hero__text { margin-top: 40px; }
  .body, .hero__text { font-size: 18px; line-height: 28px; }
  .hero__cta { margin-top: 44px; }
  .scroll-btn { margin-top: 64px; }
  .stats { padding: 120px var(--gutter) 120px; }
  .stats__grid { grid-template-columns: repeat(3, 1fr); align-items: end; gap: 48px; }
  .stat { gap: 24px; }
  .stat__num { font-size: 72px; }

  /* feature (websites & use cases): stacked with a centred phone panel until 1024 */
  .feature { gap: 64px; align-items: start; }
  .feature__head { padding-inline: 24px; }
  .feature__phone {
    background: var(--c-off); align-self: start; width: 100%; max-width: 560px; margin-inline: auto;
    padding: clamp(40px, 5.5vw, 80px) clamp(40px, 5.5vw, 80px) clamp(40px, 4.5vw, 64px);
  }
  .phone-img { width: 400px; }
  .progress-row { width: 360px; max-width: 100%; }
  .progress { height: 4px; }
  .pause-btn { background: var(--c-pause-disc); }

  /* accordion becomes a vertical list, full column width; text column keeps the 24px inset */
  .acc { margin-top: 64px; }
  .acc--uc { margin-top: 90px; }
  .acc__list {
    display: block; overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none;
  }
  .acc__item { position: relative; }
  .acc__item:not(.is-open) { padding-inline: 24px; }
  .acc__item:not(.is-open)::after {
    content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 1px; background: var(--c-beige);
  }
  .acc__btn {
    align-items: center; min-height: 92px; padding: 0; font-size: 22px; line-height: 28px; color: var(--c-accent-dark); /* Plum on white 6.8:1 */
    max-width: none;
  }
  .acc--uc .acc__btn { max-width: none; }
  .acc__btn:hover { color: var(--c-accent-ink); }
  .acc__badge {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px;
    width: 28px; height: 28px; border-radius: 50%; background: var(--c-peach-soft);
    font-size: 13px; line-height: 1; color: var(--c-accent-ink);
  }
  .acc__title { flex: 1; }
  .acc__plus { display: block; width: 16px; height: 16px; color: var(--c-accent); flex: 0 0 16px; }
  .acc__item.is-open { background: var(--c-dark); color: var(--c-white); padding: 32px 24px; }
  .acc__item.is-open .acc__btn { min-height: 0; color: var(--c-white); cursor: default; }
  .acc__item.is-open .acc__badge { background: var(--c-white); color: var(--c-dark); }
  .acc__item.is-open .acc__plus { display: none; }
  .acc__body { padding: 24px 0 0 44px; }
  .acc__item.is-open .acc__body { color: var(--c-off); }
  /* closed items are collapsed; a <noscript> style in index.html re-opens them (dark text on white) when JS is off */
  .acc__item:not(.is-open) .acc__body { display: none; }
  .acc__list { height: auto !important; transition: none; }
  .acc__body p { font-size: 14px; line-height: 20px; }
  /* reserve three lines so autoplay never shifts the page below */
  .acc[data-autoplay] .acc__body { min-height: 84px; }
  .acc--uc .acc__body p { font-size: 16px; line-height: 24px; }
.acc__body p + p { margin-top: 12px; }
  .acc__bullets li::before { background: var(--c-peach); }
  .acc__nav { display: none; }

  /* card carousels: bleed to the viewport edge, card 4 peeks, one overlay arrow */
  .cards { margin-top: 200px; }
  .cards, .merchants .cards { margin-top: 64px; } /* Figma: 64px between section head and cards */
  .cards__track {
    margin-right: calc(50% - 50vw); padding-right: 0;
    margin-left: 0; padding-left: 0; scroll-padding-inline: 0;
  }
  .card { flex-basis: var(--card-w); padding: 48px 32px 48px; }
  .cards__nav { display: none; }
  .cards .cards__overlay, .panel .cards .cards__overlay {
    display: inline-flex; position: absolute; top: 50%; z-index: 2;
    /* fallback before JS runs: 40px inside card 4's left edge, never past the viewport edge.
       main.js overrides `left` on scroll/resize so the disc always sits on the partly visible card. */
    left: min(calc(3 * (var(--card-w) + var(--card-gap)) + 16px), calc(100vw - 112px));
    transform: translateY(-50%);
    background: var(--c-off);
  }
  .cards .cards__overlay:hover, .panel .cards .cards__overlay:hover { background: var(--c-beige); }
  .cards__overlay svg { transition: transform 200ms ease; }
  .cards__overlay[data-dir="prev"] svg { transform: rotate(180deg); }
  .cards__overlay.is-hidden { display: none; }

  /* why unique grid */
  .unique { padding-left: calc(var(--gutter) + 32px); }
  .h2--unique { max-width: 700px; }
  .unique__grid { margin-top: 64px; margin-inline: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .unique__grid .item { min-height: 220px; }

  /* about / contact */
  .about-panel { padding-block: 240px; }
  .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding-left: calc(var(--gutter) + 32px); }
  .about__text .body { margin-top: 64px; font-size: 20px; line-height: 32px; }
  .founders { grid-template-columns: 250px 250px; gap: 64px; justify-content: end; }
  .founder__name { margin-top: 32px; font-size: 24px; }
  .contact { padding-top: 240px; }
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 564px); gap: 64px; padding-left: calc(var(--gutter) + 32px); }
  .contact__text .body { margin-top: 64px; }
  .form__actions { margin-top: 4px; }

  /* footer */
  .site-footer { padding: 64px var(--gutter) 24px; min-height: 640px; display: flex; flex-direction: column; }
  /* Columns are sized to their content and links never wrap (900-1199: 32px column gap;
     the design's 257px column pitch is restored from 1200px). */
  .footer__top { grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: start; }
  .footer__cols { grid-template-columns: repeat(3, max-content); gap: 0 32px; }
  .footer__col a { white-space: nowrap; }
  .footer__heading { margin-bottom: 8px; }
  .footer__col a { min-height: 24px; }
  .footer__cta { display: block; }
  .footer__copy { margin-top: auto; padding-top: 160px; }
}

/* two-column feature sections from 1024 */
@media (min-width: 1024px) {
  .nav { gap: 16px; }
  .nav__list { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; justify-content: center; }
  .nav__list > li { flex: 0 0 auto; }
  .hamburger, .mobile-menu { display: none; }
  .feature { grid-template-columns: minmax(0, 720fr) minmax(0, 560fr); gap: clamp(32px, 4.4vw, 64px); }
  .feature__phone { margin-inline: 0; max-width: none; }
  .phone-img { width: min(400px, 100%); }

  /* The phone panel stays in view while its accordion scrolls past (Pasi, 20.10). The panel has to fit
     under the sticky header, so the phone is sized from the viewport height (0.487 = the clips' and
     mockups' width/height); the clip panel also carries the progress row (~32px gap + 48px). */
  .feature__phone {
    position: sticky; top: calc(var(--nav-h) + 24px);
    padding-block: 40px;
  }
  .feature__phone .progress-row { margin-top: 32px; }
  .feature__phone .phone-img { width: min(400px, 100%, calc((100svh - var(--nav-h) - 48px - 80px - 80px) * .487)); }
  .feature__phone--uc .phone-img { width: min(400px, 100%, calc((100svh - var(--nav-h) - 48px - 80px) * .487)); }
}

@media (min-width: 1200px) {
  .nav { gap: 32px; }
  .nav__list { gap: 32px; }
  .footer__top { grid-template-columns: minmax(180px, 288px) 1fr auto; }
  .footer__cols { grid-template-columns: 257px 257px auto; gap: 0; }
}

/* the design's heading rag needs a text column of >= 650px */
@media (min-width: 1320px) {
  .br-d { display: inline; }
}

@media (min-width: 1600px) {
  :root { --gutter: 64px; }
}