/* ============================================================
   MEE — site-wide design system
   Tokens from design.md. Coral-led, warm, human.
   Derived from the approved homepage concept
   (concept-assets/mee-homepage-concept.html), extended with the
   interior-page components for the multi-page site.
   ============================================================ */
:root {
  --coral: #e8634a; /* signature accent: large text, graphics, focus */
  --coral-deep: #bd4529; /* accessible coral: buttons, CTAs, small text */
  --coral-deep-hover: #a53c22;
  --coral-light: #fdece8; /* soft coral wash: hover, pills */
  --ink: #1f1a16; /* titles, body, dark fields */
  --ink-muted: #5a534c; /* captions, meta */
  --surface: #faf5e9; /* soft cream page field */
  --cream: #f1e7d0; /* richer cream bands */
  --cream-2: #f8f1de;
  --paper: #ffffff;
  --positive: #256b52;
  --positive-tint: #e4f0ea;
  --rule: rgba(31, 26, 22, 0.14);
  --rule-soft: rgba(31, 26, 22, 0.08);

  --font:
    "Inter", "SF Pro Text", system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  /* display face for large headings only; Inter carries everything else */
  --font-display: "Hanken Grotesk", "Inter", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --text-display: clamp(2.75rem, 1.4rem + 5.4vw, 4.75rem);
  --text-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  --text-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
  --text-h3: 1.375rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-label: 0.75rem;

  --lh-heading: 1.1;
  --lh-subheading: 1.4;
  --lh-body: 1.6;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-phone: 34px;

  --shadow-1: 0 1px 3px rgba(31, 26, 22, 0.08);
  --shadow-2: 0 10px 30px -12px rgba(31, 26, 22, 0.18);
  --shadow-3: 0 30px 60px -24px rgba(31, 26, 22, 0.28);
  /* elevation scale for content cards: a hairline ring plus a two-layer
     soft shadow so cards sit clearly above the cream at rest (e1), lifting
     further on hover/active (e2). */
  --shadow-card:
    0 0 0 1px rgba(31, 26, 22, 0.04), 0 2px 4px rgba(31, 26, 22, 0.05),
    0 14px 30px -14px rgba(31, 26, 22, 0.16);
  --shadow-card-hover:
    0 0 0 1px rgba(31, 26, 22, 0.05), 0 4px 8px rgba(31, 26, 22, 0.06),
    0 26px 50px -18px rgba(31, 26, 22, 0.24);

  --z-sticky: 100;
  --container: 1200px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--surface);
  line-height: var(--lh-body);
  font-size: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.skip-link {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 400;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 150ms ease-out;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* ---- shared type helpers ---- */
h1,
h2,
h3 {
  letter-spacing: -0.02em;
}
.section {
  padding: var(--space-9) 0;
}
.section--tight {
  padding: var(--space-8) 0;
}
.section-head {
  max-width: 60ch;
  margin-bottom: var(--space-7);
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-3);
}
.section-head p {
  font-size: var(--text-body-lg);
  color: var(--ink-muted);
  line-height: var(--lh-subheading);
}
.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.accent {
  color: var(--coral);
}
.bg-paper {
  background: var(--paper);
}
.bg-surface {
  background: var(--surface);
}
.bg-cream {
  background: var(--cream);
}
.bg-cream2 {
  background: var(--cream-2);
}

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}
.btn:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--coral-deep);
  color: var(--paper);
}
.btn-primary:hover {
  background: var(--coral-deep-hover);
  transform: translateY(-1px);
}
.btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule-soft);
  box-shadow: var(--shadow-1);
}
.btn-secondary:hover {
  border-color: var(--rule);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.btn-on-dark {
  background: var(--paper);
  color: var(--ink);
}
.btn-on-dark:hover {
  background: var(--cream);
}
.btn-ghost-dark {
  background: transparent;
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-ghost-dark:hover {
  border-color: #fff;
}
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: var(--fw-semibold);
  color: var(--coral-deep);
  text-decoration: none;
}
/* on the richer cream bands, coral-deep dips just under AA (4.22); use the
   deeper hover shade so text links clear 4.5:1 */
.bg-cream .textlink,
.trust .textlink {
  color: var(--coral-deep-hover);
}
.textlink i {
  transition: transform 150ms ease;
}
.textlink:hover i {
  transform: translateX(3px);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--paper);
  transition: box-shadow 200ms ease;
}
.site-header.scrolled {
  box-shadow: 0 6px 20px -8px rgba(31, 26, 22, 0.18);
}
.util {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-small);
}
.util-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  gap: var(--space-4);
}
.util-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.util-note .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
}
.util-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-left: auto;
}
.util-links a,
.util-links span {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 150ms ease;
}
.util-links a:hover {
  color: #fff;
}
.util-links i {
  font-size: 1.05rem;
}

.bar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  gap: var(--space-5);
}
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.logo svg {
  height: 22px;
  width: auto;
  fill: currentColor;
  display: block;
}
.mainnav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.mainnav > ul {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  position: relative;
}
.navlink {
  position: relative;
  z-index: 1;
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition:
    color 150ms ease,
    background 150ms ease;
}
.navlink i {
  font-size: 0.85rem;
  color: var(--coral);
  transition: transform 180ms ease;
}
.navlink:hover {
  color: var(--coral-deep);
}
.navlink[aria-current="true"] {
  color: var(--coral-deep);
}
.navlink[aria-expanded="true"] i {
  transform: rotate(180deg);
}
.navlink[aria-expanded="true"] {
  color: var(--coral-deep);
  background: var(--coral-light);
}
.nav-pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 38px;
  width: 0;
  transform: translateY(-50%) translateX(0);
  background: var(--coral-light);
  border-radius: var(--radius-sm);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 300ms cubic-bezier(0.34, 1.25, 0.64, 1),
    width 300ms cubic-bezier(0.34, 1.25, 0.64, 1),
    height 300ms cubic-bezier(0.34, 1.25, 0.64, 1),
    opacity 180ms ease;
}
.nav-toggle {
  display: none;
}

/* mega panel */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--paper);
}
.mega.open {
  border-top: 1px solid var(--rule-soft);
  box-shadow: 0 16px 28px -18px rgba(31, 26, 22, 0.3);
}
.mega-clip {
  position: relative;
  overflow: hidden;
  height: 0;
  transition: height 340ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mega-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 240ms ease,
    transform 240ms ease,
    visibility 240ms;
}
.mega-content.active {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(31, 26, 22, 0.28);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 240ms ease,
    visibility 240ms;
}
.nav-scrim.open {
  opacity: 1;
  visibility: visible;
}
.mega-in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: start;
  gap: var(--space-7);
  padding: var(--space-7) var(--space-5);
}
.mega-in--two {
  grid-template-columns: repeat(2, minmax(0, 340px));
}
.mega-col-title {
  font-size: var(--text-label);
  letter-spacing: 0.01em;
  color: var(--coral-deep);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-4);
}
.mega-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.mega-col a {
  display: block;
  text-decoration: none;
  color: var(--ink);
  font-weight: var(--fw-semibold);
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
  transition:
    background 140ms ease,
    color 140ms ease;
}
.mega-col a span {
  display: block;
  font-weight: var(--fw-regular);
  font-size: var(--text-small);
  color: var(--ink-muted);
}
.mega-col a:hover {
  background: var(--cream-2);
  color: var(--coral-deep);
}
.mega-col-title:not(:first-child) {
  margin-top: var(--space-6);
}
.nav-cta {
  white-space: nowrap;
}

/* ============================================================
   HERO (home) + PAGE HERO (interior)
   ============================================================ */
.hero {
  background: var(--surface);
  overflow: hidden;
}
.hero-in {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 5.5rem) clamp(2.5rem, 5vw, 5rem);
}
.hero-copy h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-4);
}
.hero-copy p.lead {
  font-size: var(--text-body-lg);
  color: var(--ink-muted);
  max-width: 46ch;
  line-height: var(--lh-subheading);
}
.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.hero-figure {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* App screenshots already include the status bar and Dynamic Island,
   so the frame adds no notch of its own. */
.device {
  position: relative;
  width: min(300px, 78%);
  aspect-ratio: 300 / 620;
  background: var(--ink);
  border-radius: var(--radius-phone);
  padding: 10px;
  box-shadow: var(--shadow-3);
}
.device-screen {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: var(--paper);
}
.device-screen img,
.device-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* eased video loop: a gentle fade and hair of scale-up across the loop
   boundary so autoplaying clips don't hard-cut on restart. site.js
   toggles .is-looping near the boundary; disabled under reduced motion.
   Scale goes up (not down) so the frame stays fully covered. */
video[data-loop-ease] {
  transition:
    opacity 420ms ease,
    transform 420ms ease;
}
video[data-loop-ease].is-looping {
  opacity: 0.6;
  transform: scale(1.02);
}

/* Run-the-day phone fan: three screens splayed from a shared base, the
   centre upright and on top, left and right angled behind it for depth */
.phone-fan {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.phone-fan .pf {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: 42%;
  margin-left: -21%;
  display: block;
  border-radius: 26px;
  border: 4px solid var(--paper);
  box-shadow: 0 22px 46px -14px rgba(31, 26, 22, 0.4);
  transform-origin: bottom center;
}
.pf-center {
  z-index: 3;
}
.pf-left {
  z-index: 2;
  transform: rotate(-15deg);
}
.pf-right {
  z-index: 2;
  transform: rotate(15deg);
}
@media (max-width: 620px) {
  .phone-fan {
    max-width: 420px;
  }
}
.hero-badge {
  position: absolute;
  z-index: 3;
  background: var(--paper);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  padding: 0.7rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.hero-badge i {
  font-size: 1.3rem;
  color: var(--coral);
}
.hero-badge--tl {
  top: 14%;
  left: -6px;
}
.hero-badge--br {
  bottom: 14%;
  right: -6px;
}
/* hero product composition: the web experience behind, the phone in
   front, so the hero shows Mee on both the desk and the shop floor
   (the "show the product, phone and web" design principle) rather
   than defaulting to a single phone. The phone is the in-flow element
   so it sets the stage height (nothing overflows) and its top sits
   level with the heading; the web window floats behind it. */
.hero-stage {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
}
.hero-stage .device {
  position: relative;
  z-index: 2;
  width: min(232px, 44%);
  margin: 0;
  /* no fake device bezel: the app screenshot floats as a clean panel
     (like the web panel behind it), which also removes the bezel-driven
     crop differences between desktop and mobile */
  padding: 0;
  background: transparent;
  box-shadow: none;
  aspect-ratio: auto;
}
.hero-stage .device-screen {
  /* the screenshot IS the panel now: its own ratio, rounded corners and
     a lift, floating with no border at every size */
  height: auto;
  aspect-ratio: 1206 / 2622;
  border-radius: 22px;
  box-shadow: var(--shadow-3);
}
.hero-stage .web-frame {
  position: absolute;
  z-index: 1;
  top: 9%;
  right: 0;
  width: 80%;
  box-shadow: var(--shadow-2);
}
/* taller than the default 16:10 so more of the web home shows in the hero
   composition (the screenshot is a tall full-page capture) */
.hero-stage .wf-screen {
  aspect-ratio: 4 / 3;
}
/* badge overlaps the web window's lower-right corner so it reads as an
   annotation on the product, not a card floating in empty space */
.hero-stage .hero-badge--br {
  z-index: 3;
  bottom: 4%;
  right: -10px;
}

/* interior page hero */
.page-hero {
  background: var(--surface);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3.5rem);
}
.page-hero .crumbs {
  font-size: var(--text-small);
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.page-hero .crumbs a {
  color: var(--ink-muted);
  text-decoration: none;
}
.page-hero .crumbs a:hover {
  color: var(--coral-deep);
}
.page-hero .crumbs i {
  font-size: 0.7rem;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  max-width: 24ch;
  margin: 0 0 var(--space-4);
}
.page-hero p.lead {
  font-size: var(--text-body-lg);
  color: var(--ink-muted);
  max-width: 60ch;
  line-height: var(--lh-subheading);
}
.page-hero .hero-actions {
  margin-top: var(--space-5);
}
.page-hero--center {
  text-align: center;
}
.page-hero--center h1,
.page-hero--center p.lead {
  margin-left: auto;
  margin-right: auto;
}
.page-hero--center .crumbs,
.page-hero--center .hero-actions {
  justify-content: center;
}

/* ---- heritage trust strip (UXC client experience, not Mee
        customers: keep the label wording precise) ---- */
.trust {
  background: var(--cream);
}
.trust-in {
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.trust p {
  text-align: center;
  font-size: var(--text-body);
  color: var(--ink-muted);
  max-width: 62ch;
  margin: 0 auto var(--space-6);
}
.trust p a {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}
/* generic logo row (e.g. the About heritage block): a simple, evenly
   spaced greyscale row that reveals colour on hover */
.trust-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.trust-logos img {
  height: 34px;
  width: auto;
  opacity: 0.68;
  filter: grayscale(1);
  transition:
    opacity 150ms ease,
    filter 150ms ease;
}
.trust-logos img:hover {
  opacity: 1;
  filter: none;
}
/* logo wall: the logos in a contained, elevated credential panel (e1)
   with hairline dividers, so it reads as a deliberate module rather than
   a flat row. Shared by the homepage heritage strip and the About page. */
.logo-wall {
  gap: 0;
  align-items: stretch;
  max-width: 960px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1rem, 3vw, 1.5rem);
}
.logo-wall .tl {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: 6px clamp(0.85rem, 2.5vw, 1.75rem);
}
.logo-wall .tl:not(:first-child) {
  border-left: 1px solid var(--rule-soft);
}
.logo-wall img {
  height: 40px;
}
@media (max-width: 760px) {
  /* hide the utility strip on phones: it crops and wraps awkwardly, and
     the info (tagline, platforms) is carried elsewhere on the page */
  .util {
    display: none;
  }
  .logo-wall {
    padding: var(--space-5) var(--space-4);
  }
  .logo-wall .tl {
    flex-basis: 30%;
    padding: 10px;
  }
  .logo-wall .tl:not(:first-child) {
    border-left: none;
  }
  .logo-wall img {
    height: 30px;
  }
}

/* ============================================================
   FEATURE GRID + CARDS
   ============================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.feature-grid--two {
  grid-template-columns: repeat(2, 1fr);
}
.fcard {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow 180ms ease,
    transform 180ms ease;
}
a.fcard:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}
a.fcard:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
.fcard-media {
  aspect-ratio: 16 / 11;
  background: var(--cream);
  overflow: hidden;
}
.fcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.fcard-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.fcard-ic {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--coral);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-1);
  box-shadow: 0 8px 16px -6px rgba(232, 99, 74, 0.55);
}
.fcard h3 {
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
}
.fcard p {
  font-size: var(--text-small);
  color: var(--ink-muted);
  flex: 1;
}
.fcard .textlink {
  font-size: var(--text-small);
}

/* ============================================================
   SPLIT SECTIONS
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.split.reverse .split-media {
  order: -1;
}
.split-copy h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-4);
}
.split-copy > p {
  color: var(--ink-muted);
  font-size: var(--text-body-lg);
  line-height: var(--lh-subheading);
  max-width: 46ch;
  margin-bottom: var(--space-4);
}
.split-copy > p:last-child {
  margin-bottom: 0;
}
.ticks {
  list-style: none;
  margin: var(--space-5) 0 var(--space-6);
  display: grid;
  gap: var(--space-3);
}
.ticks li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--text-body);
}
.ticks i {
  color: var(--positive);
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.split-media {
  position: relative;
}
.media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  background: var(--cream);
  aspect-ratio: 4 / 3;
}
.media-frame img,
.media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* pause/play control for autoplaying looping videos (WCAG 2.2.2). Added
   by site.js; lets anyone stop the motion, and shown as "play" for
   reduced-motion users, whose videos start paused. */
.video-toggle {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(31, 26, 22, 0.6);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    transform 150ms ease;
}
.video-toggle:hover {
  background: rgba(31, 26, 22, 0.82);
}
.video-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.video-toggle i {
  line-height: 1;
}
/* tall phone media: match the recording's own ratio so nothing is
   cropped, and cap the size (phone-width, and height-aware via vh) so the
   whole player stays visible in the section on smaller screens */
.media-frame--tall {
  /* a touch shorter than the recording (720/1476) so cover shaves the
     ~3px residual grab-bar off the very top (about 6px, just enough to
     cover it); anchored to the bottom so all the app content stays in
     view */
  aspect-ratio: 720 / 1470;
  max-width: min(300px, 34vh);
  margin-inline: auto;
}
.media-frame--tall video,
.media-frame--tall img {
  object-position: bottom center;
}
.split-phones {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.split-phones .device {
  position: relative;
  width: min(208px, 47%);
  /* float the screenshot: no fake bezel, its own ratio (so it never
     crops differently across sizes), rounded corners and a lift */
  padding: 0;
  background: transparent;
  box-shadow: none;
  aspect-ratio: auto;
}
.split-phones .device-screen {
  height: auto;
  aspect-ratio: 1024 / 2216;
  border-radius: 22px;
  box-shadow: var(--shadow-3);
}
/* staggered overlap: lock-screen in front and dropped a little, the
   article behind it and raised, so they read as one layered moment */
.split-phones .device:first-child {
  z-index: 2;
  margin-top: 9%;
}
.split-phones .device:last-child {
  z-index: 1;
  margin-left: -13%;
  margin-top: 0;
}

/* ============================================================
   PAIN / FRICTION STRIP + WHY CARDS
   ============================================================ */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.pain {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
.pain h3 {
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  margin: var(--space-3) 0 var(--space-2);
}
.pain p {
  font-size: var(--text-small);
  color: var(--ink-muted);
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.why-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
/* raised solid coral icon tile: the "second plane" inside icon-led feature
   cards (elevation scale). Shared by the card family; mirrors .fcard-ic. */
.why-card > i,
.pain > i,
.proof-card > i,
.sec-card > i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--coral);
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 8px 16px -6px rgba(232, 99, 74, 0.55);
}
.why-card h3 {
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  margin: var(--space-3) 0 var(--space-2);
}
.why-card p {
  font-size: var(--text-small);
  color: var(--ink-muted);
}

/* "how we decide" — an intro statement beside a numbered sequence.
   The principles read as a path from signal to shipped: big coral
   display numerals anchor each step, neutral hairlines separate them,
   no decorative accent on a box. */
.decide {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.decide-intro h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-4);
}
.decide-intro p {
  color: var(--ink-muted);
  font-size: var(--text-body-lg);
  line-height: var(--lh-subheading);
  max-width: 40ch;
}
.principle-list {
  list-style: none;
}
.principle-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rule);
}
.principle-list li:first-child {
  padding-top: 0;
  border-top: none;
}
.principle-list li:last-child {
  padding-bottom: 0;
}
.pl-num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: var(--fw-extrabold);
  color: var(--coral);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pl-body h3 {
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-2);
}
.pl-body p {
  font-size: var(--text-small);
  color: var(--ink-muted);
}

/* ============================================================
   MISSION STATEMENT (ambient shader band)
   Ink field with a canvas-driven ambient shader (plain WebGL,
   no dependency). Falls back to solid ink if WebGL is
   unavailable, and holds a single static frame under
   reduced-motion. See site.js for the shader source.
   ============================================================ */
.mission {
  position: relative;
  background: var(--coral-deep);
  overflow: hidden;
  isolation: isolate;
}
/* field of the product's own icons, scattered behind the statement:
   everything Mee carries, to everyone. Replaces the ambient shader.
   A base grid spaces them out; per-icon offsets, rotation and scale
   break the alignment so they don't read as a lattice. The whole field
   drifts on scroll (parallax) via site.js. */
.mission-icons {
  position: absolute;
  inset: -32px -12px;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 40px;
  place-items: center;
  color: var(--paper);
  opacity: 0.16;
  font-size: 42px;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}
/* each icon carries its own type, size, rotation and opacity inline (baked
   in the markup) so the field reads as a genuine scatter, with no periodic
   alignment of icon type or size into rows or columns. */
.mission-icons i {
  display: block;
}
.mission-in {
  position: relative;
  z-index: 1;
  padding: clamp(4.5rem, 9vw, 7.5rem) var(--space-5);
  text-align: center;
}
.mission-statement {
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.75rem);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--paper);
  max-width: 30ch;
  margin: 0 auto;
  text-wrap: balance;
}

/* ============================================================
   WHITE-LABEL SIGNATURE (dark band)
   ============================================================ */
.whitelabel {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.wl-in {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--space-8);
  align-items: center;
}
.wl-copy h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-4);
}
.wl-copy > p {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-body-lg);
  line-height: var(--lh-subheading);
  max-width: 46ch;
}
.wl-brands {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.wl-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 150ms ease;
}
.wl-brand .sw {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--b, #fff);
}
.wl-brand:hover {
  background: rgba(255, 255, 255, 0.14);
}
.wl-brand[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.16);
}
.wl-brand:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
.wl-note {
  margin-top: var(--space-5);
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.6);
}
.wl-stage {
  position: relative;
  display: flex;
  justify-content: center;
}
.wl-device {
  --app: var(--coral);
  position: relative;
  width: min(300px, 80%);
  aspect-ratio: 300 / 620;
  background: #0c0a08;
  border-radius: var(--radius-phone);
  padding: 10px;
  box-shadow: var(--shadow-3);
}
.wl-screen {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}
.app-top {
  background: var(--app);
  color: #fff;
  padding: 1.4rem 1rem 1rem;
  transition: background 400ms ease;
}
.app-brand {
  font-weight: var(--fw-extrabold);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.app-sub {
  font-size: 0.7rem;
  opacity: 0.85;
  margin-top: 2px;
}
.app-body {
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: #f6f6f4;
  flex: 1;
}
.app-hero {
  border-radius: 12px;
  height: 96px;
  background: color-mix(in srgb, var(--app) 18%, #fff);
  border: 1px solid color-mix(in srgb, var(--app) 30%, #fff);
  display: flex;
  align-items: flex-end;
  padding: 0.6rem;
  transition:
    background 400ms ease,
    border-color 400ms ease;
}
.app-hero span {
  font-size: 0.72rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--app) 72%, #000);
  transition: color 400ms ease;
}
.app-card {
  background: #fff;
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.app-card .ac-ic {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--app) 16%, #fff);
  color: var(--app);
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition:
    background 400ms ease,
    color 400ms ease;
}
.app-line {
  height: 7px;
  border-radius: 4px;
  background: #e6e4e0;
}
.app-line.short {
  width: 55%;
  margin-top: 4px;
}
.app-tabbar {
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-around;
  padding: 0.5rem 0;
}
.app-tabbar i {
  font-size: 1.15rem;
  color: #b7b3ad;
}
.app-tabbar i.on {
  color: var(--app);
  transition: color 400ms ease;
}

/* ============================================================
   STEPS (implementation strip)
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  counter-reset: step;
}
.step {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  position: relative;
}
.step .n {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--coral-light);
  color: var(--coral-deep);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
}
.step h3 {
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-2);
}
.step p {
  font-size: var(--text-small);
  color: var(--ink-muted);
}

/* ============================================================
   FAQ (native details/summary)
   ============================================================ */
.faq {
  max-width: 800px;
}
.faq details {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--space-3);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-weight: var(--fw-semibold);
  font-size: var(--text-body-lg);
  padding: var(--space-5) var(--space-6);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary i {
  color: var(--coral-deep);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform 200ms ease;
}
.faq details[open] summary i {
  transform: rotate(45deg);
}
.faq summary:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}
.faq .faq-a {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--ink-muted);
  max-width: 70ch;
}
.faq .faq-a p + p {
  margin-top: var(--space-3);
}

/* ============================================================
   PRICING
   ============================================================ */
.promises {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.promise {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}
.promise i {
  font-size: 1.5rem;
  color: var(--positive);
  flex-shrink: 0;
  margin-top: 2px;
}
.promise b {
  display: block;
}
.promise span {
  font-size: var(--text-small);
  color: var(--ink-muted);
}

/* ============================================================
   ROADMAP
   ============================================================ */
.rm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.rm-col > h3 {
  font-size: var(--text-label);
  letter-spacing: 0.01em;
  color: var(--coral-deep);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rm-col > h3 .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}
.rm-item {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-4);
}
.rm-item h4 {
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-2);
}
.rm-item p {
  font-size: var(--text-small);
  color: var(--ink-muted);
}
.rm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--space-3);
}
.rm-tag {
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  color: var(--ink-muted);
  background: var(--cream-2);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
/* ============================================================
   ABOUT PAGE COMPOSITIONS
   Layered web + phone pair, heritage stat strip, commitments
   grid and candid photo strip. .ph-media placeholders are
   replaced by real screens and photography when supplied; the
   treatments follow the design language (layered overlap at
   level 2, stat-tile numerals, hairline structure, no boxes
   where text carries the weight).
   ============================================================ */
/* self-contained media placeholder, following the design-language
   placeholder grammar; the label states the asset to supply */
.ph-media {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: var(--space-4);
  text-align: center;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.05) 0 14px,
      rgba(255, 255, 255, 0) 14px 28px
    ),
    linear-gradient(160deg, #33291f, var(--ink));
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
}

/* the same app at the desk and on the shop floor: web window
   behind, phone overlapping in front (level 2, it is the overlay) */
.app-pair {
  position: relative;
  padding-top: clamp(2.5rem, 7vw, 4.5rem);
  margin-bottom: var(--space-5);
}
.web-frame {
  width: 88%;
  margin-left: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.wf-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--surface);
}
.wf-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rule);
}
.wf-screen {
  aspect-ratio: 16 / 10;
}
.wf-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.app-pair .device {
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--space-5));
  width: min(180px, 32%);
  /* no fake bezel: float the screenshot as a clean panel, like the
     homepage (its own ratio so nothing crops, rounded + lift) */
  padding: 0;
  background: transparent;
  box-shadow: none;
  aspect-ratio: auto;
}
.app-pair .device-screen {
  height: auto;
  aspect-ratio: 1206 / 2622;
  border-radius: 16px;
  box-shadow: var(--shadow-3);
}
/* variant: web frame shifts left, phone floats on the right instead of
   the left — used to vary the rhythm between adjacent app-pair sections */
.app-pair--phone-right .web-frame {
  margin-left: 0;
  margin-right: auto;
}
.app-pair--phone-right .device {
  left: auto;
  right: 0;
}

/* two desktop windows layered diagonally: one behind top-left, one in
   front bottom-right, for sections shown across two web views */
.web-pair {
  position: relative;
  aspect-ratio: 1 / 0.74;
}
.web-pair .web-frame {
  position: absolute;
  width: 72%;
  margin: 0;
}
.web-pair .web-frame:first-child {
  top: 0;
  left: 0;
  z-index: 1;
}
.web-pair .web-frame:last-child {
  bottom: 0;
  right: 0;
  z-index: 2;
  box-shadow: var(--shadow-3);
}

/* heritage stat strip: stat-tile numerals from the design language,
   one coral accent character, verifiable numbers only */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-5) var(--space-6);
  max-width: 760px;
  margin-bottom: var(--space-7);
}
.stat-strip .n {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-strip .n em {
  font-style: normal;
  /* coral-deep (not bright coral) so the "+" clears AA-large on the cream
     heritage band; still a warm accent */
  color: var(--coral-deep);
}
.stat-strip .l {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--ink-muted);
  max-width: 22ch;
}

/* commitments: icon-led 2x2 with hairline structure, no boxes */
.commit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.commit {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-4);
}
.commit i {
  font-size: 1.7rem;
  color: var(--coral);
}
.commit h3 {
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  margin: var(--space-2) 0;
}
.commit p {
  font-size: var(--text-small);
  color: var(--ink-muted);
}

/* ============================================================
   FORMS (demo / contact)
   ============================================================ */
.form-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-2);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
  /* inputs in a row stay level even when one label wraps */
  align-items: end;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.field--full {
  grid-column: 1 / -1;
}
.field label {
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
}
.field .hint {
  font-size: var(--text-label);
  color: var(--ink-muted);
}
.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  width: 100%;
  transition: border-color 150ms ease;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}
/* selects share the exact input styling: native chrome off, an ink
   chevron drawn inline (self-contained, no external asset), and the
   unchosen state reads as a placeholder, not a value */
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231f1a16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.6rem;
  cursor: pointer;
}
.field select:required:invalid {
  color: var(--ink-muted);
}
.field select option {
  color: var(--ink);
}
.field textarea {
  min-height: 110px;
  resize: vertical;
}
/* auto-grow: the box expands to fit what's typed rather than scrolling
   inside a fixed height. field-sizing handles this natively; site.js
   sets the height as a fallback where it isn't supported. It starts at
   min-height and scrolls only past the cap. */
.field textarea[data-autogrow] {
  field-sizing: content;
  resize: none;
  max-height: 320px;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: rgba(31, 26, 22, 0.34);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 1px;
  border-color: var(--coral);
}
/* heading for the column beside a form (e.g. "What happens next") */
.aside-head {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-5);
}
.form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.form-note {
  font-size: var(--text-small);
  color: var(--ink-muted);
}
.form-status {
  grid-column: 1 / -1;
  display: none;
  background: var(--positive-tint);
  color: var(--positive);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}
.form-status.show {
  display: block;
}
.form-status.is-error {
  background: rgba(189, 69, 41, 0.08);
  color: var(--coral-deep);
}
.form-status.is-error a {
  color: inherit;
}

/* what happens next */
.next-list {
  list-style: none;
  display: grid;
  gap: var(--space-4);
}
.next-list li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}
.next-list i {
  color: var(--coral);
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.next-list b {
  display: block;
}
.next-list span {
  font-size: var(--text-small);
  color: var(--ink-muted);
}

/* person / contact card */
.person {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card);
}
.person img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.person b {
  display: block;
}
.person .role {
  font-size: var(--text-small);
  color: var(--ink-muted);
}
.person a {
  font-size: var(--text-small);
}

/* ============================================================
   MISC CONTENT BLOCKS
   ============================================================ */
/* cited third-party statistic */
.stat-cite {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.stat-cite .big {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 26ch;
  margin: 0 auto;
}
.stat-cite .big em {
  font-style: normal;
  color: var(--coral-deep);
}
.stat-cite cite {
  display: block;
  margin-top: var(--space-4);
  font-style: normal;
  font-size: var(--text-small);
  color: var(--ink-muted);
}

/* worked example card */
.example {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3rem);
}
.example h3 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  max-width: 26ch;
}
.example > p {
  color: rgba(255, 255, 255, 0.8);
  margin-top: var(--space-3);
  max-width: 60ch;
}
.example-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.example-steps .es {
  border-top: 2px solid rgba(255, 255, 255, 0.25);
  padding-top: var(--space-4);
}
.example-steps .es b {
  display: block;
  color: var(--paper);
}
.example-steps .es span {
  font-size: var(--text-small);
  color: rgba(255, 255, 255, 0.7);
}
.example-steps .es .t {
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  color: var(--coral);
  display: block;
  margin-bottom: var(--space-2);
}

/* trust / proof mini-cards */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.proof-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
.proof-card h3 {
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  margin: var(--space-3) 0 var(--space-2);
}
.proof-card p {
  font-size: var(--text-small);
  color: var(--ink-muted);
}

/* security topics */
.sec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.sec-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}
.sec-card h3 {
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  margin: var(--space-3) 0 var(--space-2);
}
.sec-card p {
  font-size: var(--text-small);
  color: var(--ink-muted);
}

/* prose (legal, long-form) */
.prose {
  max-width: 72ch;
}
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-extrabold);
  margin: var(--space-7) 0 var(--space-3);
}
.prose h2:first-child {
  margin-top: 0;
}
.prose p,
.prose li {
  color: var(--ink-muted);
  margin-bottom: var(--space-3);
}
.prose ul {
  margin: 0 0 var(--space-4) 1.2rem;
}
.prose strong {
  color: var(--ink);
}
.prose a {
  color: var(--coral-deep);
}

/* video frame */
.video-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  background: var(--ink);
}
.video-frame video {
  width: 100%;
  display: block;
}
.video-placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-6);
}
.video-placeholder i {
  font-size: 3rem;
  color: var(--coral);
}
.video-placeholder b {
  color: var(--paper);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
}
.video-placeholder span {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-small);
}

/* team */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.team-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.team-card img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-4);
}
.team-card .avatar-fallback {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--coral-light);
  color: var(--coral-deep);
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  margin: 0 auto var(--space-4);
}
.team-card h3 {
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
}
.team-card .role {
  font-size: var(--text-small);
  color: var(--coral-deep);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}
.team-card p {
  font-size: var(--text-small);
  color: var(--ink-muted);
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta {
  padding: var(--space-9) 0;
  /* richer cream so the closing band reads as its own section against
     both the pale surface and white sections that can precede it, with
     a fine dot grid adding subtle texture to the cream around the band */
  background-color: var(--cream);
  background-image: radial-gradient(
    rgba(31, 26, 22, 0.05) 1.5px,
    transparent 1.5px
  );
  background-size: 22px 22px;
}
.cta-band {
  background: var(--coral-deep);
  border-radius: var(--radius-lg);
  padding: clamp(2.25rem, 4vw, 3.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  /* coral-tinted lift so the band floats off the dot-grid cream (e3) */
  box-shadow:
    0 4px 12px rgba(120, 40, 22, 0.22),
    0 34px 64px -26px rgba(120, 40, 22, 0.6);
}
.cta-band h2 {
  font-family: var(--font-display);
  color: var(--paper);
  font-size: var(--text-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  max-width: 20ch;
}
.cta-band p {
  color: rgba(255, 255, 255, 0.9);
  margin-top: var(--space-3);
  max-width: 46ch;
}
.cta-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  padding: var(--space-9) 0 var(--space-6);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-brand svg {
  height: 24px;
  fill: var(--paper);
}
.footer-brand p {
  margin-top: var(--space-4);
  font-size: var(--text-small);
  max-width: 34ch;
}
.footer-col-title {
  color: var(--paper);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  margin: 0 0 var(--space-3);
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-col a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: var(--text-small);
  transition: color 150ms ease;
}
.footer-col a:hover {
  color: #fff;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-5);
  font-size: var(--text-small);
}
.footer-bottom a {
  color: rgba(255, 255, 255, 0.72);
}
.footer-bottom a:hover {
  color: #fff;
}

/* ---- reveal on scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 600ms ease,
    transform 600ms ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .why-grid,
  .proof-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps,
  .example-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  /* the split still runs two-up here, so the form column is narrow:
     one field per row until the split stacks and width returns */
  .form-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 960px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink);
    font-size: 1.5rem;
    cursor: pointer;
  }
  .nav-pill {
    display: none;
  }
  .mainnav {
    display: none;
  }
  html.nav-locked {
    overflow: hidden;
  }
  .site-header.nav-open .util {
    display: none;
  }
  .site-header.nav-open .mainnav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    position: fixed;
    left: 0;
    right: 0;
    top: 74px;
    bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--paper);
    border-top: 1px solid var(--rule-soft);
    padding: var(--space-3) var(--space-5) var(--space-6);
  }
  .mega-slot {
    width: 100%;
  }
  .mainnav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .mainnav > ul > li {
    width: 100%;
  }
  .navlink {
    width: 100%;
    justify-content: space-between;
    padding: 0.9rem 0.6rem;
    border-bottom: 1px solid var(--rule-soft);
    border-radius: 0;
  }
  .mega {
    position: static;
  }
  .mega-in {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-2) var(--space-5);
  }
  .mega-in--two {
    grid-template-columns: 1fr;
  }
  .nav-cta {
    width: 100%;
    justify-content: center;
    margin-top: var(--space-3);
  }
}
@media (max-width: 860px) {
  .hero-in {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .hero-figure {
    order: -1;
  }
  .wl-in,
  .split,
  .decide {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .split.reverse .split-media {
    order: 0;
  }
  .feature-grid,
  .feature-grid--two {
    grid-template-columns: repeat(2, 1fr);
  }
  .pain-grid,
  .rm-grid,
  .team-grid {
    grid-template-columns: 1fr;
  }
  .promises {
    grid-template-columns: 1fr;
  }
  .sec-grid {
    grid-template-columns: 1fr;
  }
  /* the split has stacked, so the form has full width again */
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .commit-grid {
    grid-template-columns: 1fr;
  }
  .feature-grid,
  .feature-grid--two {
    grid-template-columns: 1fr;
  }
  .why-grid,
  .proof-grid,
  .steps,
  .example-steps {
    grid-template-columns: 1fr;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .cta-band {
    flex-direction: column;
    align-items: flex-start;
  }
  .person {
    flex-direction: column;
    align-items: flex-start;
  }
  /* full-width, stacked CTAs on phones so button widths stay consistent
     instead of each sizing to its own label */
  .hero-actions,
  .cta-actions,
  .form-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero-actions .btn,
  .cta-actions .btn,
  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}