/* Metmit — site styles. Brand: Deep #123b3d, Teal #0d766e, Mint #5eead4 (on Deep only), white. */

/* ---------- Font (self-hosted Geist, variable wght 100–900) ---------- */
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched fallback so the swap to Geist does not shift the layout. */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial");
  ascent-override: 95.94%;
  descent-override: 28.16%;
  line-gap-override: 0%;
  size-adjust: 104.76%;
}

/* ---------- Tokens ---------- */
:root {
  --deep: #123b3d;
  --deep-2: #0f3436;
  --teal: #0d766e;
  --mint: #5eead4;
  --white: #fff;
  --ink: #142b2c;
  --muted: #4f6566;
  --rule: #d8e1e0;
  --rule-strong: #a9bab9;
  --tint: #eff3f2;
  --on-deep: #fff;
  --on-deep-muted: rgb(255 255 255 / 0.74);
  --on-deep-rule: rgb(255 255 255 / 0.14);

  --sans: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --max: 1320px;
  --pad: clamp(20px, 5vw, 64px);
  --gutter: clamp(16px, 2vw, 28px);
  --space: clamp(72px, 8.5vw, 120px);
  --overlap: clamp(72px, 12vw, 200px);

  --t-display: clamp(2.625rem, 1.2rem + 5.4vw, 6rem);
  --t-h2: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  --t-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --t-lede: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --t-statement: clamp(1.375rem, 1.05rem + 1.3vw, 2.25rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;

  /* Screens on white: a hairline ring and a short, low, deep-tinted shadow that does not smudge. */
  --shadow-shot: 0 0 0 1px rgb(18 59 61 / 0.1), 0 1px 2px rgb(18 59 61 / 0.05), 0 22px 40px -26px rgb(18 59 61 / 0.32);
  /* Screens that hang from Deep onto white: the same, so the part over white reads the same as the rest. */
  --shadow-hang: 0 0 0 1px rgb(18 59 61 / 0.12), 0 22px 40px -26px rgb(18 59 61 / 0.36);
  /* Screens wholly on Deep. Reaches at most 34px below, inside every Deep section's padding. */
  --shadow-deep: 0 0 0 1px rgb(255 255 255 / 0.1), 0 26px 40px -32px rgb(0 0 0 / 0.6);

  /* Motion: calm, short, no overshoot. */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 600ms;
  --rise: 14px;
  --stagger: 60ms;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
video,
picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  color: var(--deep);
  font-weight: 600;
  text-wrap: balance;
}
p { text-wrap: pretty; }

a { color: inherit; }

::selection { background: var(--deep); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}
.deep :focus-visible { outline-color: var(--mint); }

[id] { scroll-margin-top: 24px; }
[hidden] { display: none !important; }

.skip {
  position: absolute;
  left: var(--pad);
  top: -100px;
  z-index: 10;
  padding: 12px 16px;
  background: var(--white);
  color: var(--deep);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* Geist's tabular numerals wherever figures sit in columns or labels. */
.num,
.site-footer small { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.grid > * { grid-column: 1 / -1; }

section { position: relative; }

/* Deep grounds carry a fine grain: visible up close, invisible from across the room. */
.deep {
  position: relative;
  isolation: isolate;
  background: var(--deep);
  color: var(--on-deep);
}
.deep::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.deep h1,
.deep h2,
.deep h3 { color: var(--on-deep); }

/* ---------- Header ---------- */
.site-header {
  padding-block: 22px;
  box-shadow: inset 0 -1px 0 var(--on-deep-rule);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -4px 0;
}
.brand img { height: 28px; width: auto; }

.nav ul {
  display: flex;
  gap: 4px 28px;
}
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--on-deep-muted);
  font-size: 0.9375rem;
  font-weight: 450;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
/* A hairline that draws in under the hovered or current item. */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--on-deep); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }

@media (max-width: 640px) {
  .site-header { padding-block: 14px 4px; }
  .site-header .wrap { display: block; }
  .nav { margin-top: 6px; margin-inline: -2px; }
  .nav ul { justify-content: space-between; gap: 0; }
  .nav a { padding-inline: 2px; }
}

/* ---------- Buttons & links ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 6px;
  background: var(--deep);
  color: var(--white);
  font-weight: 550;
  font-size: 1rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.button:hover { background: var(--teal); transform: translateY(-1px); }
.button:active { transform: none; }
.deep .button { background: var(--white); color: var(--deep); }
.deep .button:hover { background: #e3eeec; }

.link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--deep);
  font-weight: 550;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  text-decoration-color: rgb(18 59 61 / 0.3);
  transition: text-decoration-color 0.25s var(--ease), text-underline-offset 0.25s var(--ease);
}
.link:hover { text-decoration-color: currentColor; text-underline-offset: 0.22em; }
.deep .link { color: var(--on-deep); text-decoration-color: rgb(255 255 255 / 0.35); }
.deep .link:hover { text-decoration-color: var(--mint); }

/* ---------- Type ---------- */
.display {
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: -0.042em;
  font-weight: 600;
}
/* The headline's full stop is set as the brand's square tittle (Mint on Deep). The "." stays in the text. */
.stop {
  display: inline-block;
  width: 0.15em;
  height: 0.15em;
  margin-left: 0.04em;
  background: var(--mint);
  color: transparent;
  overflow: hidden;
  vertical-align: baseline;
  line-height: 0;
}
.h2 {
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -0.034em;
}
.h3 {
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.018em;
}
.lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--muted);
  max-width: 34em;
}
.deep .lede { color: var(--on-deep-muted); }
.statement {
  font-size: var(--t-statement);
  line-height: 1.25;
  letter-spacing: -0.024em;
  font-weight: 450;
  color: var(--deep);
  max-width: 26em;
}
.num {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--teal);
}

/* ---------- Screens ---------- */
.shot {
  overflow: hidden;
  border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow-shot);
  align-self: start;
}
.shot img { width: 100%; }

/* Phone screenshot: the screen itself, rounded, with the same hairline ring. No drawn device. */
.screen {
  overflow: hidden;
  border-radius: 22px;
  background: var(--white);
  box-shadow: var(--shadow-shot);
  align-self: start;
}
.screen img { width: 100%; }

/* Device: a modern iPhone front at real proportions (screen 402 x 874 pt, ~19.5:9): slim black bezel
   with a metal edge, Dynamic Island, status-bar time and home indicator. The app screenshots are the
   402 x 786 pt area between the status bar (54 pt = 13.43% of the width) and the home indicator
   (34 pt = 8.46%), so the screen is always shown full height. Set --w for the device width. */
.device {
  --w: 300px;
  position: relative;
  flex: none;
  width: var(--w);
  padding: calc(var(--w) * 0.03);
  border-radius: calc(var(--w) * 0.165);
  background: #0e1011;
  box-shadow: inset 0 0 0 1px #4a4f52, inset 0 0 0 calc(var(--w) * 0.008) #2a2e30,
    0 2px 4px rgb(0 0 0 / 0.12), 0 30px 50px -24px rgb(18 59 61 / 0.5);
  align-self: start;
}
.device__screen {
  position: relative;
  overflow: hidden;
  padding: 13.43% 0 8.46%;
  border-radius: calc(var(--w) * 0.135);
  background: var(--white);
}
.device__screen img { width: 100%; }
.device__screen::before {
  content: "9:41";
  position: absolute;
  top: 4.2%;
  left: 12%;
  font: 600 calc(var(--w) * 0.04) / 1 var(--sans);
  letter-spacing: -0.01em;
  color: #000;
}
.device__screen::after {
  content: "";
  position: absolute;
  top: 2.6%;
  left: 50%;
  width: 26%;
  aspect-ratio: 3.4;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}
.device__bar {
  position: absolute;
  bottom: calc(var(--w) * 0.055);
  left: 50%;
  width: 34%;
  height: calc(var(--w) * 0.012);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #111;
}

/* Desktop app in a window: hairline frame, a quiet top bar with three neutral dots, no URL. */
.win {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow-shot);
  align-self: start;
}
.win__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  background: #f5f8f7;
  border-bottom: 1px solid #e3e9e8;
}
.win__bar i { width: 7px; height: 7px; border-radius: 50%; background: #d3dcdb; }
.win img { width: 100%; }

/* ---------- Hero ---------- */
/* z-index lifts the hero (and its overhanging screens) above the white section that follows. */
.hero { z-index: 1; padding-top: clamp(48px, 7vw, 104px); }
.hero h1 { grid-column: 1 / span 11; }
.hero__copy { margin-top: clamp(28px, 4vw, 48px); }
.hero__copy .actions { margin-top: 32px; }
.hero__visual {
  position: relative;
  z-index: 1;
  margin-top: clamp(48px, 5.5vw, 80px);
  margin-bottom: calc(-1 * var(--overlap));
}
.hero .win,
.hero .screen { box-shadow: var(--shadow-hang); }
.hero__phone { display: none; }
@media (min-width: 900px) {
  .hero__copy { grid-column: 5 / span 7; }
  .hero__visual { grid-column: 5 / -1; }
  /* /bms/: the desktop window runs off the right edge of the viewport. */
  .hero__visual .win--bleed {
    border-radius: 10px 0 0 10px;
    margin-right: calc(-1 * (var(--pad) + max(0px, (100vw - var(--max) - 2 * var(--pad)) / 2)));
  }

  /* Home: copy on the left; the desktop window and a full phone as one unit on the right. The window
     is 76cqw wide (image 44.2cqw tall under a 26px bar); the phone, 20.6cqw wide (~43cqw tall, about
     the window's height), stands in front of the window's right side, overlapping it by 10cqw. */
  .hero--home .hero__copy { grid-column: 1 / span 4; grid-row: 2; margin-top: 28px; }
  .hero--home .hero__visual {
    grid-column: 5 / -1;
    grid-row: 2;
    margin-top: 28px;
    container-type: inline-size;
    padding-bottom: 2cqw;
  }
  .hero--home .hero__win { width: 76cqw; }
  .hero__phone {
    display: block;
    position: absolute;
    z-index: 2;
    --w: 20.6cqw;
    left: 66cqw;
    top: calc(26px + 2cqw);
  }
  .hero .hero__phone {
    box-shadow: inset 0 0 0 1px #4a4f52, inset 0 0 0 calc(var(--w) * 0.008) #2a2e30, 0 26px 50px -16px rgb(0 0 0 / 0.55);
  }
}
.after-hero.after-hero { padding-top: calc(var(--overlap) + var(--space)); }
/* Home: the composed window + phone sit wholly on the dark hero (no overhang into the next section),
   so at 1440x900 the whole unit is above the fold. */
.hero--home { padding-top: clamp(40px, 4vw, 64px); padding-bottom: clamp(40px, 4vw, 56px); }
.hero--home .hero__visual { margin-bottom: 0; }
.hero--home ~ .after-hero.after-hero { padding-top: var(--space); }

/* ---------- Sections ---------- */
.section { padding-block: var(--space); }
.section + .section { border-top: 1px solid var(--rule); }
.section-head { margin-bottom: clamp(32px, 4vw, 56px); }
@media (min-width: 900px) {
  .section-head--side { grid-column: 1 / span 4; margin-bottom: 0; }
  .section-body { grid-column: 5 / -1; }
}

/* Ruled rows. The hairline is a pseudo-element so it can draw in (see Motion). */
.ruled { position: relative; }
.ruled::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: left;
}
.ruled-end { border-bottom: 1px solid var(--rule); }

/* ---------- Services ---------- */
.services li {
  display: grid;
  gap: 6px var(--gutter);
  padding-block: 22px 24px;
}
.services p { color: var(--muted); max-width: 38em; }
.services a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 0.2em; }
.services a:hover { text-decoration-color: currentColor; }
.services h3 { transition: color 0.3s var(--ease), transform 0.4s var(--ease); }
/* Hover: a deep hairline draws over the row's rule, and the title steps in 4px. */
.services li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.services li:hover::after { transform: scaleX(1); }
.services li:hover h3 { color: var(--teal); transform: translateX(4px); }
/* Services and How we work share one inner split (1 : 2) so their descriptions start on the same line. */
@media (min-width: 700px) {
  .services li,
  .steps-list > li { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@media (min-width: 900px) {
  .services li { padding-block: 28px 30px; }
}

/* ---------- How we work ---------- */
.steps-list { margin-top: clamp(36px, 4vw, 56px); counter-reset: step; }
.steps-list > li {
  display: grid;
  gap: 4px var(--gutter);
  padding-block: 20px 22px;
}
.steps-list h3 {
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.steps-list p { color: var(--muted); max-width: 38em; }
/* Home products: the BMS desktop window spans the grid, right-aligned, at the /bms/ page's scale. */
.product__win { grid-column: 1 / -1; margin-top: 48px; }
.product__text > p + p { margin-top: 12px; }

.contact__note { margin-top: 20px; color: var(--muted); max-width: 32em; }

.data-note { margin-top: 28px; color: var(--muted); max-width: 40em; }
.data-note strong { color: var(--deep); font-weight: 600; }

/* ---------- Products ---------- */
.lockup { height: clamp(36px, 3.4vw, 44px); width: auto; }
.product__text > p { margin-top: 22px; max-width: 34em; }
.product__text .actions { margin-top: 20px; }
.product__visual { margin-top: 36px; }

/* Metmit POS: a compact, ruled line under BMS: the kit lockup, one sentence, one link. */
.pos-row {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--rule);
}
.pos-row .lockup { height: 36px; }
.pos-row p { margin-top: 14px; max-width: 36em; color: var(--muted); }
.pos-row .actions { margin-top: 8px; }

/* ---------- Video ---------- */
.film { padding-block: var(--space); }
.film__text p { margin-top: 20px; }
.film__player { margin-top: 40px; }
.player {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: var(--shadow-deep);
  background: var(--deep-2);
}
.player video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--deep-2);
}
/* Poster: an order in Metmit BMS. The button sits in the empty area right of the order title
   (poster x 37–99%, y 13–32%), so it covers no line item. */
.player__play {
  position: absolute;
  right: 3.5%;
  top: 17%;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 0 20px 0 6px;
  border: 0;
  border-radius: 999px;
  background: var(--deep);
  color: var(--white);
  font: 550 0.9375rem / 1 var(--sans);
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgb(18 59 61 / 0.6);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.player__play:hover { background: var(--teal); transform: translateY(-1px); }
.player__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
}
.player__icon svg { width: 12px; height: 14px; fill: var(--deep); margin-left: 2px; }
.player__time { font-variant-numeric: tabular-nums; color: rgb(255 255 255 / 0.72); font-weight: 450; }
@media (max-width: 640px) {
  .player__play { top: 16%; padding: 0 4px; min-width: 44px; }
  .player__label,
  .player__time {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
@media (min-width: 900px) {
  .film__text { grid-column: 1 / span 4; }
  .film__player { grid-column: 5 / -1; margin-top: 0; }
}

/* ---------- Contact ---------- */
.contact { padding-block: var(--space); }
.contact__email {
  display: inline-block;
  padding-block: 6px;
  color: var(--deep);
  font-size: clamp(2rem, 0.9rem + 5vw, 5.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.045em;
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.03em);
  text-underline-offset: 0.14em;
  text-decoration-color: var(--rule-strong);
  transition: text-decoration-color 0.25s var(--ease);
  overflow-wrap: anywhere;
}
.contact__email:hover { text-decoration-color: var(--teal); }
.contact .actions { margin-top: 20px; }

/* Copy button (shown by JS only when the clipboard is available). */
.copy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  background: transparent;
  color: var(--deep);
  font: 500 0.9375rem / 1 var(--sans);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.copy:hover { border-color: var(--deep); background: var(--tint); }
.copy svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ---------- Footer: identity, then link columns on the page's content column (col 5 on) ---------- */
.site-footer {
  padding-block: 64px 36px;
  box-shadow: inset 0 1px 0 var(--on-deep-rule);
  font-size: 0.9375rem;
}
.site-footer .grid { row-gap: 40px; }
.site-footer .brand img { height: 30px; }
.foot-mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  color: var(--on-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: rgb(255 255 255 / 0.35);
  transition: text-decoration-color 0.25s var(--ease);
}
.foot-mail:hover { text-decoration-color: var(--mint); }
.foot-h {
  color: var(--on-deep);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.foot-col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--on-deep-muted);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.foot-col a:hover { color: var(--on-deep); }
/* Precise pointers do not need 44px rows; touch keeps them. */
@media (pointer: fine) and (min-width: 900px) {
  .foot-col a { min-height: 32px; }
}
.site-footer small {
  display: block;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--on-deep-rule);
  color: var(--on-deep-muted);
  font-size: var(--t-small);
}
@media (min-width: 640px) and (max-width: 899px) {
  .foot-col { grid-column: span 4; }
}
@media (min-width: 900px) {
  .foot-id { grid-column: 1 / span 4; }
  .foot-col { grid-column: span 2; }
  .foot-col--services { grid-column: 5 / span 3; }
}
@media (max-width: 639px) {
  .foot-col { grid-column: span 6; }
  .foot-col--services { grid-column: 1 / -1; }
  .foot-col--services ul { columns: 2; column-gap: var(--gutter); }
}

/* ---------- BMS page ---------- */
.bms-hero .lockup { height: clamp(36px, 3.6vw, 48px); }
.bms-hero h1 { margin-top: clamp(40px, 5vw, 64px); }

.step { padding-block: var(--space); }
.step + .step { border-top: 1px solid var(--rule); }
.step__text .h2 { font-size: clamp(2rem, 1.45rem + 1.7vw, 3.125rem); }
.step__text p { margin-top: 20px; color: var(--muted); max-width: 30em; }
.step__visual { margin-top: 40px; }
@media (min-width: 900px) {
  .step__text { grid-column: 1 / span 5; }
  .step__visual { grid-column: 7 / -1; margin-top: 0; }
  .step--wide .step__visual { grid-column: 1 / -1; margin-top: 56px; }
}

/* One display scale for app screenshots on this page, so app text reads at about 12-13px in every
   section: desktop screens at 1000px for the app's 1280px window (0.78), phone screens at 322px for
   the phone's 402pt (0.8). On phones, tight crops of the desktop screens at a similar size. */
:root {
  --ui-desk: 1000px;
  --ui-phone: 322px;
}

/* Feature: the desktop window is the primary image. Where there is a phone screen it stands beside
   the window at the right, bottom-aligned with it, never over it (so no window UI is hidden), its upper
   part beside the text. A window without a phone runs the full grid width. */
.feature__visual {
  display: grid;
  margin-top: 40px;
}
.feature__visual > .win { width: min(var(--ui-desk), 100%); }
.feature__phone {
  --w: min(260px, 66vw);
  position: relative;
  z-index: 1;
  justify-self: center;
  margin-top: 32px;
}
@media (min-width: 900px) {
  .feature__visual { display: contents; }
  .feature .step__text { grid-column: 1 / span 6; grid-row: 1; }
  .feature__visual > .win { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin-top: 56px; width: 100%; }
  .feature__visual:has(> .feature__phone) > .win { width: calc(100% - var(--ui-phone) - var(--gutter)); }
  .feature__phone {
    grid-column: 8 / -1;
    grid-row: 1 / 3;
    justify-self: end;
    align-self: end;
    --w: var(--ui-phone);
    margin-top: 0;
  }
}

.step__visual > .screen { width: min(var(--ui-phone), 82vw); }
@media (max-width: 899px) { .step__visual > .screen { margin-inline: auto; } }
@media (min-width: 900px) { .step__visual > .screen { margin-left: auto; margin-right: 8%; } }
.step__visual > .shot { max-width: 674px; margin-left: auto; }

.rest-wrap { display: grid; gap: 48px; align-items: start; }
.rest {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
}
.rest li { padding-block: 16px 18px; }
.rest strong { display: block; color: var(--deep); font-weight: 600; letter-spacing: -0.01em; }
.rest span { display: block; color: var(--muted); text-wrap: pretty; }
@media (min-width: 640px) {
  .rest { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
}
.rest-wrap .device { --w: min(var(--ui-phone), 78vw); justify-self: center; }
@media (min-width: 900px) {
  .rest-wrap { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 5vw, 80px); }
}

.cta { padding-block: var(--space); }
.cta .lede { margin-top: 20px; }
.cta .actions { margin-top: 32px; }
@media (min-width: 900px) {
  .cta .h2 { grid-column: 1 / span 8; }
  .cta .cta__body { grid-column: 1 / span 7; }
}

/* =================================================================
   Motion. Everything below is inert unless html.js is set (inline, in <head>) and the visitor
   allows motion, so without JavaScript or with reduced motion the page is static and fully visible.
   Transform and opacity only. The hero headline is never faded or delayed (it is the page's largest
   paint); the entrance is on the elements around it.
   ================================================================= */
@media (max-width: 640px) {
  :root { --dur: 420ms; --rise: 10px; --stagger: 50ms; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from { opacity: 0; transform: translate3d(0, var(--rise), 0); }
    to { opacity: 1; transform: none; }
  }
  @keyframes rise-far {
    from { opacity: 0; transform: translate3d(0, 24px, 0); }
    to { opacity: 1; transform: none; }
  }
  @keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  /* Hero entrance: the copy, then the screens; the square full stop fades in. */
  .js .hero .lockup,
  .js .hero__copy { animation: rise 700ms var(--ease) both; }
  .js .hero__copy { animation-delay: 120ms; }
  .js .hero__visual > * { animation: rise-far 900ms var(--ease) both; animation-delay: 240ms; }
  .js .hero__phone { animation-delay: 380ms; }
  .js .hero .stop { animation: fade 600ms var(--ease) both; animation-delay: 300ms; }

  /* Reveal on scroll (site.js adds .is-in shortly before an element reaches the viewport);
     children of [data-stagger] follow each other by --stagger, at most three steps. */
  .js [data-reveal] {
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), text-decoration-color 0.25s var(--ease);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }
  .js [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, var(--rise), 0); }

  /* Hairlines draw in from the left as their row arrives. */
  .js .ruled[data-reveal]::before {
    transition: transform 800ms var(--ease);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }
  .js .ruled[data-reveal]:not(.is-in)::before { transform: scaleX(0); }
}

/* Product screenshots drift gently against the scroll: position only, never scaled, so their small
   text is not resampled (scroll-driven; browsers without it get the reveal only). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes drift {
      from { transform: translate3d(0, 16px, 0); }
      to { transform: translate3d(0, -16px, 0); }
    }
    .js .drift {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Print ---------- */
@media print {
  .deep { background: none; color: #000; }
  .deep::before, .nav, .film__player { display: none; }
}