/* =========================================================================
   LUMINOUS — base styles and shared page components
   1. Tokens          6. Header / burger      11. Pricing
   2. Reset & base    7. Mobile menu          12. Platforms
   3. Layout          8. Hero                 13. Support / chat
   4. Typography      9. Marquee / metrics    14. CTA
   5. Buttons        10. Network / features   15. Footer
                                              16. Motion & responsive
                                              17. Hover on touch
                                              18. Google review badge
                                              20. Templates page
                                              21. Industry pages
   ========================================================================= */

/* ── Local variable fonts ─────────────────────────────────────────────── */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter/Inter-Variable-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  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: "Inter";
  src: url("../fonts/Inter/Inter-Variable-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  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;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/Montserrat,Space_Grotesk/Space_Grotesk/SpaceGrotesk-VariableFont_wght.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

/* ── 1. Tokens ────────────────────────────────────────────────────────── */
:root {
  --ink: #0b0b0c;
  --ink-2: #3d3e43;
  /* Both greys are checked against the *darkest* ground they land on, not against
     white. The previous pair cleared 4.5:1 on paper but not on the cards: --ink-3 read
     4.19:1 on --paper-3 (every work and platform tile) and 3.77:1 on --paper-4, so the
     secondary copy inside a card failed AA even though the same colour passed in the
     body text above it. Chasing that on white had also pushed --ink-4 darker than
     --ink-3, inverting the ramp — the "lighter" grey was the darker one. These clear
     4.5:1 on all four papers (worst case 5.44 and 4.59, both on --paper-4) and put the
     steps back in order. */
  --ink-3: #54565c;
  --ink-4: #5f6167;

  --paper: #ffffff;
  --paper-2: #f2f2f0;
  --paper-3: #e9e9e6;
  --paper-4: #dededa;
  --line: #e2e2de;
  --line-soft: rgba(11, 11, 12, .08);

  --accent: #24c684;
  --accent-ink: #0b6e49;
  /* #0c7a51 landed on 4.49:1 — one hundredth short of AA */
  --accent-dim: rgba(36, 198, 132, .14);
  --amber: #d9971f;
  --trustpilot: #00b67a;

  /* diffuse pool of light behind the platform grid — the thing the glass bends */
  --section-light: radial-gradient(118% 76% at 50% 40%,
      #fafafa 0%, #f4f4f2 46%, #eeeeeb 78%, #e9e9e6 100%);


  /* Type scale. Six steps, and nothing outside them — the page previously carried 48
     distinct font-size values, including five separate sizes for body copy (13.5, 14,
     14.5, 14.6 and 14.8px) that no reader could tell apart but which left every card
     set slightly differently. Body sits at 16px because 14.5 was simply too small to
     read comfortably at length. The two mono steps have a hard floor of 11px; the old
     8px and 9.5px labels were decoration pretending to be text. */
  /* 11px uppercase with .11em of tracking read as texture rather than words. Inter
     carries a taller x-height than Montserrat at the same nominal size, so the floor
     moves to 12px and the tracking below comes down with it. */
  --fs-micro: 12px;
  --fs-label: 13px;
  --fs-sm: 14px;
  --fs-body: 16px;
  --fs-lead: clamp(1.06rem, 1rem + .3vw, 1.2rem);

  /* Heading steps. Four, where there were eleven overlapping clamp curves — including
     three separate "card title" ramps within 0.06rem of each other, and two for the
     same platform card. Each step is a fixed ratio apart so headings stay in
     proportion to one another at every viewport instead of crossing over. */
  --fs-title: clamp(1.06rem, .99rem + .3vw, 1.22rem);
  --fs-h3: clamp(1.4rem, 1.2rem + .9vw, 2.05rem);
  --fs-h2: clamp(1.9rem, 1.24rem + 2.1vw, 3.1rem);
  --fs-display: clamp(2.5rem, 1.35rem + 4.6vw, 4.8rem);

  --lh-tight: 1.35;
  --lh-body: 1.62;
  --lh-loose: 1.7;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --heading: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* Not a monospace face — the name is historical. It is the compact UI role: the
     eyebrows, badges, tags and stat labels, set in the same family as body copy and
     separated by size, tracking and case instead of by typeface. */
  --mono: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --maxw: 1320px;
  --gutter: clamp(20px, 4.4vw, 56px);
  --nav-h: 62px;
  /* 54px bar + 8px hatch */

  --r-card: 18px;
  --r-btn: 9px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-2: cubic-bezier(.4, 0, .2, 1);

  /* Hover motion. The pointer arriving is a deliberate act and the pickup should be
     quick; the release is not, so it runs half again as long. Every hover on the page
     pulls from these two values.
     They used to be .34s and .62s. At that length, sweeping a pointer across a grid left
     four or five cards unwinding at once on the expo curve below, each at a different
     point in a 620ms tail, which is what made the grids read as unsettled rather than
     responsive. Shorter in both directions, and the ratio between them kept. */
  --ease-hover: cubic-bezier(.22, .68, .28, 1);
  --dur-in: .2s;
  --dur-out: .3s;
  --lift: -5px;

  --sh-1: 0 1px 2px rgba(11, 11, 12, .04), 0 10px 28px -14px rgba(11, 11, 12, .16);
  --sh-2: 0 2px 4px rgba(11, 11, 12, .05), 0 26px 60px -26px rgba(11, 11, 12, .28);
  --sh-3: 0 40px 96px -44px rgba(11, 11, 12, .55);
}

@media (min-width: 1000px) {
  :root {
    --nav-h: 70px;
  }
}

/* 62px bar + 8px hatch */

/* ── 2. Reset & base ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Lenis owns smooth wheel and anchor movement; native scrolling is the fallback. */
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  padding-top: var(--nav-h);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  /* Reading text keeps natural spacing; headings set their own tracking. */
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading);
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p,
h1,
h2,
h3,
h4,
dl,
dd,
figure {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 500;
  transform: translateY(-160%);
  padding: 10px 18px;
  border-radius: var(--r-btn);
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .3s var(--ease);
}

.skip:focus {
  transform: none;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ── 3. Layout ────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.marquee,
.metrics,
.network,
.features,
.pricing,
.platforms,
.support,
.cta {
  background: var(--paper-2);
}

.metrics {
  padding-block: clamp(44px, 6vw, 76px);
}

.network {
  padding-block: clamp(56px, 8vw, 116px);
}

.features {
  padding-block: clamp(48px, 6vw, 88px);
}

/* Consecutive editorial sections share one visual field. Giving both sections their
   full top and bottom spacing created up to 264px of empty space between the actual
   content. Keep a deliberate pause, but treat the second section as a continuation. */
main>.features+.features {
  padding-top: clamp(24px, 3vw, 44px);
}

.pricing {
  padding-block: clamp(64px, 9vw, 132px);
}

.platforms {
  padding-block: clamp(64px, 9vw, 132px);
}

.support {
  padding-block: clamp(56px, 8vw, 120px);
}

.cta {
  padding-block: clamp(24px, 3vw, 40px) clamp(56px, 7vw, 96px);
}

.sechead {
  max-width: 760px;
  margin-bottom: clamp(28px, 3.6vw, 48px);
}

.sechead--center {
  margin-inline: auto;
  text-align: center;
}

/* ── 4. Typography ────────────────────────────────────────────────────── */
.h2 {
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.032em;
  text-wrap: balance;
}

.lede {
  margin-top: 18px;
  max-width: 54ch;
  color: var(--ink-3);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
}

.sechead--center .lede {
  margin-inline: auto;
}

/* Centring a section head needs a measure wide enough for the centre to be visible as a
   choice. On a phone the column is the heading, so a centred h2 and lede only read as
   two blocks that do not line up with the left-ragged ones above and below them. Below
   600px every section head is left-ragged, whichever page it is on. */
@media (max-width: 599px) {

  .sechead--center {
    margin-inline: 0;
    text-align: left;
  }

  .sechead--center .lede {
    margin-inline: 0;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.eyebrow__chip {
  padding: 3px 9px 4px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-micro);
  letter-spacing: .06em;
}

/* Phones. The pill wrapped to two lines, which on the home page put "ENGINEERING" alone
   on a second row inside a rounded container built for one.
   The tracking does most of the work: .11em over 38 characters is 40px of pure letter
   spacing. Dropping it to .02em and holding the size at 11px — the mono floor this
   system sets, not below it — brings the descriptor inside 320px with room to spare.
   The home page also drops the chip, because at 320px the chip plus a 38-character
   descriptor cannot share a line at any readable size: measured, the pair needs about
   367px against 296px of column. The chip there reads "Luminous", which the logo two
   rows above already says. Interior pages keep theirs — "Industry", "Legal" — because
   those label the value beside them and their descriptors are short enough to fit. */
@media (max-width: 599px) {
  .eyebrow {
    font-size: 11px;
    letter-spacing: 0;
    padding-right: 12px;
    gap: 8px;
  }

  .eyebrow__chip {
    font-size: 10px;
    letter-spacing: .1em;
  }

  /* One eyebrow on the site is too long to fit 320px on one line: the industries hub
     pairs a ten-character chip with a forty-one character descriptor, which needs about
     339px against a 280px column. Rather than shrink type below the floor for one string,
     the wrap is given the line-height of a two-line badge instead of the tight leading of
     a single row. The second line stays ragged-left with the headline under it. */
  .eyebrow__txt {
    line-height: 1.5;
  }

  .hero:not(.hero--page) .eyebrow {
    padding: 6px 11px;
    letter-spacing: 0;
  }

  .hero:not(.hero--page) .eyebrow__chip {
    display: none;
  }
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line-soft);
  transition: border-color var(--dur-out) var(--ease-2);
}

.link .icon {
  font-size: 14px;
  transition: transform var(--dur-out) var(--ease);
}

.link:hover {
  border-color: var(--ink);
  transition-duration: var(--dur-in);
}

/* The arrow travels instead of the gap opening: animating `gap` relayouts the flex
   line every frame, and the label visibly reflows with it. */
.link:hover .icon {
  transform: translate(3px, -3px);
  transition-duration: var(--dur-in);
  transition-timing-function: var(--ease-hover);
}

.link:active .icon {
  transform: translate(1px, -1px);
  transition-duration: .1s;
}

.hide-sm {
  display: none;
}

@media (min-width: 900px) {
  .hide-sm {
    display: inline;
  }
}

/* ── 5. Buttons ───────────────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .045em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-out) var(--ease), background-color var(--dur-out) var(--ease-2),
    color var(--dur-out) var(--ease-2), border-color var(--dur-out) var(--ease-2);
}

/* Lift shadows ride a pseudo-element and cross-fade on opacity. Transitioning
   box-shadow itself repaints the full blurred spread every frame — it is the single
   biggest cause of a hover feeling gummy once a page has a few dozen of them. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-out) var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  transition-duration: var(--dur-in);
  transition-timing-function: var(--ease-hover);
}

.btn:hover::before {
  opacity: 1;
  transition-duration: var(--dur-in);
}

.btn:active {
  transform: translateY(0) scale(.986);
  transition-duration: .11s;
}

.btn--dark {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-bd: var(--ink);
}

.btn--dark::before {
  box-shadow: var(--sh-2);
}

.btn--line {
  --btn-bg: var(--paper);
  --btn-bd: var(--line);
}

.btn--line::before {
  box-shadow: var(--sh-1);
}

.btn--line:hover {
  --btn-bd: var(--ink);
}

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
  --btn-bd: #fff;
}

.btn--light::before {
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
}

.btn--ghostlight {
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .32);
}

.btn--ghostlight:hover {
  --btn-bd: #fff;
  background: rgba(255, 255, 255, .08);
}

.btn--sm {
  min-height: 40px;
  padding: 0 17px;
  font-size: var(--fs-label);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* ── 6. Header ────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 210;
  background: var(--paper);
  /* Colour changes run on the menu panel's .45s fade, so the bar darkens with the panel
     rather than snapping to black above a panel that is still fading in. */
  transition: box-shadow .4s var(--ease),
    background-color .45s var(--ease),
    border-color .45s var(--ease);
}

.nav.is-stuck {
  box-shadow: 0 1px 0 var(--line), 0 14px 30px -26px rgba(11, 11, 12, .5);
}

.nav__in {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  height: calc(var(--nav-h) - 8px);
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  color: var(--ink);
}

.brand__mark {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.brand__logo {
  width: 32px;
  height: auto;
  margin-block: -6px -5px;
  flex: none;
}

.brand__reg {
  font-size: var(--fs-micro);
  line-height: 1;
  color: var(--ink-4);
  margin-top: 1px;
}

.brand__word {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.nav__links {
  display: none;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  margin-right: auto;
}

.nav__links a {
  position: relative;
  font-family: var(--mono);
  font-size: var(--fs-label);
  white-space: nowrap;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-block: 6px;
  transition: color var(--dur-out) var(--ease-2);
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-out) var(--ease);
}

.nav__links a:hover {
  color: var(--ink);
  transition-duration: var(--dur-in);
}

.nav__links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
  transition-duration: var(--dur-in);
  transition-timing-function: var(--ease-hover);
}

.nav__act {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.nav__login,
.nav__cta {
  display: none;
}

.hatch {
  height: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-image: repeating-linear-gradient(-45deg,
      var(--paper-3) 0 1.5px,
      transparent 1.5px 7px);
  background-color: var(--paper-2);
}

/* burger */
.burger {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

.burger i {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -.75px 0 0 -11px;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .45s var(--ease), background-color .3s var(--ease-2);
}

.burger i:first-child {
  transform: translateY(-4px);
}

.burger i:last-child {
  transform: translateY(4px);
}

html.is-menu-open .burger {
  color: #fff;
}

html.is-menu-open .burger i:first-child {
  transform: rotate(45deg);
}

html.is-menu-open .burger i:last-child {
  transform: rotate(-45deg);
}

/* The bar takes the panel's colour instead of going transparent. The panel scrolls under
   it on any phone too short to show every link and the call to action at once — a
   375×667 screen needs about 60px of scroll, a landscape phone most of the list — and a
   transparent bar let those rows slide straight through the logo and the close button.
   Opaque, the rows pass under the bar and are clipped at its edge. The rule under the bar
   takes the panel's divider colour so it reads as one of the menu's own lines. */
html.is-menu-open .nav {
  background: var(--ink);
  border-bottom-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}

html.is-menu-open .nav .brand,
html.is-menu-open .nav .brand__reg {
  color: #fff;
}

html.is-menu-open .hatch {
  opacity: 0;
}

/* ── 7. Mobile menu ───────────────────────────────────────────────────── */
.menu {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 200;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-h) + clamp(18px, 5vw, 40px)) var(--gutter) max(clamp(26px, 6vw, 46px), env(safe-area-inset-bottom));
  background: var(--ink);
  color: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .45s var(--ease),
    transform .55s var(--ease),
    visibility 0s linear .45s;
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.menu__nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: clamp(14px, 3.4vw, 22px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-size: clamp(1.6rem, 8.2vw, 2.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.035em;
  color: #fff;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), color .25s var(--ease-2);
}

.menu.is-open .menu__nav a {
  opacity: 1;
  transform: none;
  transition-delay: calc(.1s + var(--i) * .06s);
}

.menu:not(.is-open) .menu__nav a {
  transition-delay: 0s;
}

.menu__nav a:active {
  color: var(--accent);
}

.menu__idx {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .38);
}

.menu__label {
  margin-right: auto;
}

.menu__ar {
  font-size: 18px;
  align-self: center;
  color: rgba(255, 255, 255, .3);
  transition: transform .4s var(--ease);
}

.menu__nav a:active .menu__ar {
  transform: translate(3px, -3px);
}

.menu__foot {
  padding-top: clamp(24px, 6vw, 40px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease) .34s, transform .6s var(--ease) .34s;
}

.menu.is-open .menu__foot {
  opacity: 1;
  transform: none;
}

.menu__status {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  margin-bottom: 18px;
}

.menu__acts {
  display: grid;
  gap: 10px;
}

.menu__legal {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .3);
}

/* ── 8. Hero ──────────────────────────────────────────────────────────── */
/* Full screen, under the fixed bar that body already offsets.
   svh rather than vh is the whole trick on mobile: 100vh is measured against the browser
   chrome in its collapsed state, so a 100vh hero puts its last element — here the buttons
   and the review badges — behind the address bar on first paint. svh is the smallest
   viewport, chrome expanded, so the section always fits on load and never reflows when
   the chrome retracts the way dvh does. vh stays first as the fallback for browsers
   without svh; anything that understands the second declaration overrides it.
   min-height, never height: a landscape phone is about 340px of usable height, and a
   fixed height there would crop the hero instead of letting it grow. */
.hero {
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  align-content: center;
  padding-block: clamp(32px, 5vw, 64px) clamp(48px, 7vw, 92px);
  background: var(--paper);
}

/* Short laptops. At 1280x800 and 1024x768 the hero's own padding is what pushes the
   review badges past the fold — the copy itself fits. Trimming it there buys back about
   70px, which is the difference between the proof being visible on load and not. Height,
   not width: a 1440x900 window has the room and keeps the fuller spacing. */
@media (min-width: 900px) and (max-height: 820px) {
  .hero {
    padding-block: clamp(20px, 2.4vw, 32px);
  }
}

.hero__grid {
  display: grid;
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
  padding-left: max(var(--gutter), calc((100% - var(--maxw)) / 2));
  padding-right: var(--gutter);
}

.hero__copy {
  max-width: 640px;
}

.hero__title {
  margin-top: 26px;
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.038em;
  text-wrap: balance;
}

/* The homepage statement carries a complete problem-to-solution sentence, so it uses a
   slightly tighter display scale than the shorter page titles. This preserves three
   intentional lines on desktop without shrinking the shared heading system. */
.hero__title--statement {
  font-size: clamp(2.5rem, 1.65rem + 3.25vw, 3.5rem);
}

.hero__lede {
  margin-top: clamp(18px, 2.4vw, 28px);
  max-width: 44ch;
  color: var(--ink-3);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
}

.hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(26px, 3.4vw, 38px);
}

/* Phones stack the hero buttons, primary first.
   Side by side, two labels this length leave each button about 160px, which is under the
   width the text needs and reads as two cramped halves rather than a clear first choice.
   Stacked and full width, the dark button is unambiguously the primary action and both
   are a comfortable tap target. Source order already puts the primary first, so nothing
   here reorders anything.
   The copy stays on the left margin at every width. Only some page types run a .hero —
   services, products, work and the editorial pages use their own headers, all of them
   left-ragged — so centring the hero here made those few pages the odd ones out on a
   phone. Left alignment is what the rest of the site does, and it is also where a narrow
   measure reads best. */
@media (max-width: 599px) {
  .hero__btns {
    flex-direction: column;
    align-items: stretch;
  }
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px) clamp(24px, 4vw, 56px);
  margin-top: clamp(38px, 5vw, 62px);
  max-width: 470px;
}

.stat__num {
  font-size: var(--fs-h3);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__lab {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .04em;
  color: var(--ink-4);
  line-height: 1.4;
}

.hero__media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #101012;
  box-shadow: var(--sh-2);
}

.hero__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1.38 / 1;
  object-fit: cover;
  object-position: center;
}

/* Small glass pill over the photo. No stroke — the specular sliver in the gradient is
   the edge. Dark UI means dark-tinted glass, and the tint is fully in before the label
   so the text keeps its contrast against whatever the photo is doing underneath. */
.hero__live {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .22) 0%,
      rgba(255, 255, 255, .04) 14%,
      rgba(11, 11, 14, .70) 34%,
      rgba(9, 9, 11, .74) 100%);
  -webkit-backdrop-filter: blur(7px) saturate(180%);
  backdrop-filter: blur(7px) saturate(180%);
  color: rgba(255, 255, 255, .86);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .09em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr);
    padding-right: 0;
  }

  .hero__media {
    border-radius: 14px 0 0 14px;
  }

  .hero__media img {
    aspect-ratio: 1.34 / 1;
  }

  .hero__live {
    left: 20px;
    bottom: 20px;
  }
}

/* ── 9a. Marquee ──────────────────────────────────────────────────────── */
.marquee {
  padding-block: clamp(22px, 3vw, 34px);
  border-block: 1px solid var(--line);
}

.marquee__lab {
  margin-bottom: clamp(16px, 2vw, 24px);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: center;
}

.marquee__mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: slide var(--marquee-dur, 46s) linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(38px, 6vw, 78px);
  padding-right: clamp(38px, 6vw, 78px);
}

@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-4);
  font-size: var(--fs-title);
  font-weight: 400;
  letter-spacing: -.018em;
  white-space: nowrap;
  transition: color var(--dur-out) var(--ease-2);
}

.logo:hover {
  color: var(--ink-2);
  transition-duration: var(--dur-in);
}

.logo__mark {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 9b. Metrics ──────────────────────────────────────────────────────── */
.metrics__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 40px);
}

.metric {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: center;
}

.metric__chip {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 17px;
}

.metric__val {
  align-self: end;
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.metric__lab {
  align-self: start;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .05em;
  color: var(--ink-4);
  line-height: 1.4;
}

/* Below the desktop layout these stop being a glanceable strip and become cards.
   Two columns held all the way down to 320px, which left each item about 165px wide and
   then spent 38 of those on the icon sitting beside the heading: "Production AI
   integrations" wrapped to three lines against a 12px mono caption doing the same. The
   icon moves above the text, the heading drops to the card title size the rest of the
   site uses, and the caption becomes body copy rather than a mono label, because a mono
   label is for two or three words and these are sentences.

   The surface is the same one .bento--point uses, so the section reads as part of the
   site's card language rather than a strip that grew a border. */
@media (max-width: 899px) {
  .metrics__grid {
    gap: 12px;
  }

  .metric {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: clamp(20px, 4.4vw, 26px);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--paper);
    box-shadow: var(--sh-1);
    align-items: start;
  }

  .metric__chip {
    grid-row: auto;
    margin-bottom: 6px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--paper-2);
    font-size: 16px;
  }

  .metric__val {
    align-self: auto;
    font-size: var(--fs-title);
    line-height: var(--lh-tight);
  }

  .metric__lab {
    align-self: auto;
    font-family: var(--font);
    font-size: var(--fs-body);
    letter-spacing: normal;
    line-height: var(--lh-body);
    color: var(--ink-3);
  }
}

/* One per row on a phone. Two fit comfortably from 600px, where a column is ~270px. */
@media (max-width: 599px) {
  .metrics__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 900px) {
  .metrics__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── 10a. Network ─────────────────────────────────────────────────────── */
.network__grid {
  display: grid;
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}

.network__media {
  border-radius: var(--r-card);
  overflow: hidden;
  background: #101012;
  box-shadow: var(--sh-2);
}

.network__media img {
  width: 100%;
  aspect-ratio: 1.26 / 1;
  object-fit: cover;
  object-position: center;
}

/* A portrait, not a screenshot: taller frame, and the crop biased upward so a
   cover-fit keeps the face off the bottom edge. */
.network__media--portrait {
  position: relative;
  background: var(--paper-2);
}

.network__media--portrait img {
  aspect-ratio: 1 / 1;
  object-position: 50% 22%;
}

@media (min-width: 900px) {
  .network__media--portrait img {
    aspect-ratio: 4 / 5;
  }
}

.network__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 3px;
  padding: clamp(34px, 5vw, 52px) clamp(18px, 2vw, 26px) clamp(16px, 1.8vw, 22px);
  background: linear-gradient(180deg, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, .78) 62%, rgba(10, 10, 12, .9) 100%);
  color: #fff;
}

.network__cap strong {
  font-size: var(--fs-title);
  font-weight: 400;
  letter-spacing: -.02em;
}

.network__cap span {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

.regions {
  display: grid;
  gap: 2px;
  margin-top: clamp(28px, 3.6vw, 42px);
  margin-bottom: clamp(26px, 3.2vw, 36px);
  max-width: 460px;
}

.regions li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding-block: 13px;
  border-bottom: 1px solid var(--line);
}

.regions li:first-child {
  border-top: 1px solid var(--line);
}

.regions__name {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.regions__bar {
  width: clamp(52px, 14vw, 104px);
  height: 3px;
  border-radius: 2px;
  background: var(--paper-4);
  overflow: hidden;
}

.regions__bar i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 2px;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(1);
}

.regions__n {
  min-width: 3.6ch;
  text-align: right;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

@media (min-width: 900px) {
  .network__grid {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  }
}

/* ── 10b. Features ────────────────────────────────────────────────────── */
.fgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}

@media (min-width: 760px) {
  .fgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(300px, 30vw, 372px);
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-3);
  transition: background-color var(--dur-out) var(--ease-2),
    border-color var(--dur-out) var(--ease-2), transform var(--dur-out) var(--ease);
}

.fcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--sh-1);
  opacity: 0;
  transition: opacity var(--dur-out) var(--ease);
}

.fcard:hover {
  background: var(--paper);
  border-color: var(--paper-4);
  transform: translateY(var(--lift));
  transition-duration: var(--dur-in);
  transition-timing-function: var(--ease-hover);
}

.fcard:hover::after {
  opacity: 1;
  transition-duration: var(--dur-in);
}

.fcard__top {
  display: flex;
  align-items: center;
  gap: 13px;
}

.fcard__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 16px;
  flex: none;
  transition: color var(--dur-out) var(--ease-2), border-color var(--dur-out) var(--ease-2),
    transform var(--dur-out) var(--ease);
}

.fcard:hover .fcard__icon {
  color: var(--accent-ink);
  border-color: var(--accent);
  transform: translateY(-1px);
  transition-duration: var(--dur-in);
  transition-timing-function: var(--ease-hover);
}

.fcard__title {
  font-size: var(--fs-title);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: var(--lh-tight);
}

.fcard__viz {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  margin-block: 20px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent);
  mask-image: linear-gradient(90deg, #000 62%, transparent);
  transition: opacity var(--dur-out) var(--ease-2), transform var(--dur-out) var(--ease);
}

.fcard:hover .fcard__viz {
  opacity: .85;
  transform: translateX(-6px);
  transition-duration: var(--dur-in);
  transition-timing-function: var(--ease-hover);
}

.fcard__viz--strike span {
  text-decoration: line-through;
  text-decoration-color: var(--ink-4);
}

.fcard__viz--halt span:nth-child(2) {
  color: var(--amber);
}

.fcard__viz--halt span:nth-child(3) {
  color: var(--accent-ink);
}

.fcard__body {
  color: var(--ink-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 46ch;
}

/* ── 10c. FAQ accordion ───────────────────────────────────────────────── */
/* One column, not the two-up card grid: a question the reader is scanning for
   should never be in a second column their eye has already passed. */
.faqlist {
  max-width: 860px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}

.faq {
  border-bottom: 1px solid var(--line);
}

.faq__h {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

.faq__q {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  width: 100%;
  padding: clamp(20px, 2.4vw, 28px) clamp(4px, 1vw, 12px);
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-out) var(--ease-2), transform var(--dur-out) var(--ease);
}

/* translate, not padding-left: padding relayouts the whole row each frame and the
   question text visibly rewraps at the moment the pointer lands. */
.faq__q:hover {
  color: var(--ink);
  transform: translateX(clamp(6px, 1.1vw, 12px));
  transition-duration: var(--dur-in);
  transition-timing-function: var(--ease-hover);
}

.faq__q:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: -3px;
  border-radius: 10px;
}

.faq__idx {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: var(--ink-4);
  padding-top: .5em;
  transition: color var(--dur-out) var(--ease-2);
}

.faq.is-open .faq__idx,
.faq__q:hover .faq__idx {
  color: var(--accent-ink);
  transition-duration: var(--dur-in);
}

.faq__txt {
  font-size: var(--fs-title);
  font-weight: 300;
  letter-spacing: -.022em;
  line-height: var(--lh-tight);
  text-wrap: balance;
}

/* Plus that becomes a minus. Two bars rather than a rotating glyph — a rotated
   "+" lands one pixel off-centre at these sizes and reads as a wobble. */
.faq__sign {
  position: relative;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  transition: border-color var(--dur-out) var(--ease-2),
    background-color var(--dur-out) var(--ease-2), transform var(--dur-out) var(--ease);
}

.faq__sign i {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 11px;
  height: 1px;
  background: var(--ink-2);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-out) var(--ease), background-color var(--dur-out) var(--ease-2);
}

.faq__sign i:last-child {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__q:hover .faq__sign {
  border-color: var(--paper-4);
}

.faq.is-open .faq__sign {
  border-color: var(--accent);
  background: var(--accent-dim);
  transform: rotate(180deg);
}

.faq.is-open .faq__sign i {
  background: var(--accent-ink);
}

.faq.is-open .faq__sign i:last-child {
  transform: translate(-50%, -50%) rotate(180deg);
}

/* 0fr → 1fr animates to the panel's natural height, so no max-height guess to
   outgrow. Without JS the rows stay open and the page still reads. */
.faq__a {
  display: grid;
  grid-template-rows: 1fr;
}

.js .faq__a {
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease);
}

.js .faq.is-open .faq__a {
  grid-template-rows: 1fr;
}

.faq__inner {
  overflow: hidden;
}

.faq__inner p {
  padding: 0 clamp(46px, 5vw, 66px) clamp(22px, 2.6vw, 30px) clamp(38px, 4vw, 50px);
  color: var(--ink-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 76ch;
  opacity: 1;
  transform: translateY(-6px);
  transition: transform .5s var(--ease) .06s;
}

.faq.is-open .faq__inner p {
  transform: none;
}

/* ── 10d. Work bento ──────────────────────────────────────────────────── */
/* A mosaic bed rather than a card row: 12 columns, one fixed row unit, dense flow.
   Each tile declares a width (w4/w6/w8/w12) and a height (h1/h2/h3) in those units,
   so a new project is one element and the pack closes around it. The heights are
   what make it read as a bento — a grid of equal boxes at mixed widths still reads
   as a table. Keep each visual band summing to 12 and nothing leaves a hole. */
.bentogrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(10px, .9vw, 14px);
}

/* ── footprints ── */
@media (min-width: 620px) {
  .bentogrid {
    --u: clamp(84px, 9.4vw, 118px);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* minmax, not a flat unit: the unit sets the rhythm, but a row still grows when a
       tile's copy needs it. Pinned to a fixed height the narrower breakpoints cut the
       last line off a text tile, since the columns halve while the rows do not. Rows
       are shared across the whole grid, so growth keeps every band aligned. */
    grid-auto-rows: minmax(var(--u), auto);
    grid-auto-flow: row dense;
  }

  .bento--w3,
  .bento--w4,
  .bento--w6 {
    grid-column: span 3;
  }

  .bento--w8,
  .bento--w12 {
    grid-column: span 6;
  }

  .bento--h1 {
    grid-row: span 1;
  }

  .bento--h2 {
    grid-row: span 2;
  }

  .bento--h3 {
    grid-row: span 3;
  }

  .bento--h4 {
    grid-row: span 4;
  }

  .bento--h5 {
    grid-row: span 5;
  }

  .bento--h6 {
    grid-row: span 6;
  }
}

@media (min-width: 1000px) {
  .bentogrid {
    --u: clamp(96px, 9.6vw, 136px);
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .bento--w3 {
    grid-column: span 3;
  }

  .bento--w4 {
    grid-column: span 4;
  }

  .bento--w6 {
    grid-column: span 6;
  }

  .bento--w8 {
    grid-column: span 8;
  }

  .bento--w12 {
    grid-column: span 12;
  }
}

/* Copy tiles rather than screenshots, so the row unit drops: the same h3 that frames a
   1200px-wide shot is far too tall for four lines of text. Everything else — widths,
   dense packing, the 12-column band rule — is unchanged. */
.bentogrid--text {
  --u: clamp(46px, 4.4vw, 66px);
}

/* The work grid is a mosaic of three tile widths (w4, w6, w8), so a single media ratio
   cannot serve all three: at 16/10 the eight-column tile is more than twice the height
   of the four-column tile beside it, and every card sharing that band inherits the gap.
   Each width gets the ratio that lands its frame at the same pixel height as its
   neighbours, so the frames line up, the captions sit on one line, and the rows close.
   The ratios are the width arithmetic of the grid: at any viewport a w6 frame is ~1.56x
   and a w8 frame is ~2.11x the width of a w4 frame, so their ratios are 1.6 scaled by
   the same factors. */
.bentogrid--work {
  grid-auto-rows: auto;
  align-items: stretch;
}

/* Every tile is one auto row here. The h1/h2/h3 spans belong to the mosaic grids where
   the row unit is fixed; against auto rows a span-3 tile shares its rows with whatever
   else crosses them, so one tall card stretches its whole band. */
.bentogrid--work .bento {
  grid-row: auto;
}

.bentogrid--work .bento__media {
  /* flex:none is load-bearing: the base rule sets flex:1, which lets a stretched card
     pull its frame taller than the ratio and re-crops that one image against the rest. */
  flex: none;
  min-height: 0;
  aspect-ratio: 16 / 10;
}

/* Six columns from 620px up: w4 and w6 both halve to three, w8 and w12 run full width. */
@media (min-width: 620px) {

  .bentogrid--work .bento--w8 .bento__media,
  .bentogrid--work .bento--w12 .bento__media {
    aspect-ratio: 3.38 / 1;
  }
}

@media (min-width: 1000px) {
  .bentogrid--work .bento--w6 .bento__media {
    aspect-ratio: 2.49 / 1;
  }
}

/* The meta block takes the slack rather than the frame: if one title wraps and its
   neighbour does not, the difference lands under the caption instead of re-cropping
   that card's screenshot against the rest of the row. */
.bentogrid--work .bento__meta {
  align-items: flex-start;
  flex: 1;
}

/* The template tiles are <article>, so their shell must not look interactive — the
   button inside is the target. The work tiles are anchors and keep the pointer. */
.bentogrid--work article.bento {
  cursor: default;
}

.bentogrid--work article.bento:hover {
  background: var(--paper);
  border-color: var(--paper-4);
  transform: translateY(var(--lift));
  transition-duration: var(--dur-in);
  transition-timing-function: var(--ease-hover);
}

.bentogrid--work article.bento:hover::after {
  opacity: 1;
  transition-duration: var(--dur-in);
}

@media (min-width: 1000px) {
  .bentogrid--work .bento--cta {
    /* the button they liked, now sized as one more card in the run */
    min-height: 100%;
  }
}

/* ── work bands ──
   The work run is three separate grids — client engagements, our own software, then
   labelled concept builds — rather than one grid with full-width headings inside it.
   `grid-auto-flow: dense` backfills gaps from anywhere later in the same grid, so a
   single grid would let a product tile rise into a hole left by the band above and
   land under the wrong heading. Separate grids cannot leak across a boundary. Each
   band's widths still sum to a whole row at both the 6- and 12-column breakpoints,
   so no band ends on a ragged row. */
.bandhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin: clamp(46px, 4.6vw, 72px) 0 clamp(18px, 1.8vw, 26px);
}

.bandhead:first-of-type {
  margin-top: 0;
}

.bandhead__n {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: var(--ink-4);
}

.bandhead__t {
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.022em;
  text-wrap: balance;
}

.bandhead__d {
  flex: 1 1 340px;
  min-width: 0;
  max-width: 52ch;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
}

/* ── tile shell ── */
.bento {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(12px, 1.1vw, 16px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-3);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-out) var(--ease-2),
    border-color var(--dur-out) var(--ease-2), transform var(--dur-out) var(--ease);
}

/* Hover skirt.
   The lift moves the card's own hit box up by --lift, so a pointer resting in the bottom
   few pixels ends up outside the card it just entered: :hover drops, the card falls back
   under the pointer, :hover matches again, and it cycles. Measured on a work tile, a
   pointer 1px or 3px above the resting bottom edge drove it between 616 and 611 for as
   long as it stayed there; from 6px in it holds. This strip hangs one pixel past the
   distance the card travels, so the pointer stays inside the element for the whole lift.
   It covers only the band the card vacates, never the card itself, so it cannot swallow
   a click meant for a button inside a .plan; it exists only while hovered, so it never
   claims the gutter at rest; and the grid gap (10-14px) is wider than the skirt, so it
   cannot reach the card below. No pointer-events: none — being hit-testable is the
   entire point of it. */
.fcard:hover::before,
.bento:hover::before,
.plan:hover::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  bottom: calc(var(--lift) - 1px);
}

/* .pcard spends both its pseudos on the glass (drop shadow and body tint), and the note
   under its shadow explains why that shadow cannot fold into the card's own box-shadow.
   Its skirt hangs off the foot instead, widened back out over the card's padding. */
.pcard:hover .pcard__foot::after {
  content: "";
  position: absolute;
  left: calc(var(--pcard-pad) * -1);
  right: calc(var(--pcard-pad) * -1);
  top: 100%;
  height: calc(var(--pcard-pad) + 6px);
}

/* Sits above the tile's own overflow clip, so it has to be a sibling layer rather
   than a shadow on the clipped box. */
.bento::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--sh-2);
  opacity: 0;
  transition: opacity var(--dur-out) var(--ease);
}

/* The lift shrinks the tile's own hit area by --lift at the bottom edge: hovered, this
   tile's bottom runs 611px where its resting bottom is 616px. A pointer inside that band
   is outside the lifted box, so it can drop :hover. Tested at 3px and 8px above the edge
   and it holds in both, so the lift stays — but it is the reason nothing else here is
   allowed to move the target box, and any future travel on a card belongs on a child. */
a.bento:hover {
  background: var(--paper);
  border-color: var(--paper-4);
  transform: translateY(var(--lift));
  transition-duration: var(--dur-in);
  transition-timing-function: var(--ease-hover);
}

a.bento:hover::after {
  opacity: 1;
  transition-duration: var(--dur-in);
}

a.bento:active {
  transform: translateY(-1px) scale(.995);
  transition-duration: .12s;
}

.bento:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

/* ── media frame ── */
/* flex:1 rather than a fixed height: the grid row sets the tile height and the frame
   takes whatever the caption leaves, so the same tile works at h2 and h3. */
.bento__media {
  position: relative;
  flex: 1;
  min-height: clamp(190px, 50vw, 260px);
  margin: 0;
  overflow: hidden;
  border-radius: calc(var(--r-card) - 7px);
  background: var(--paper-2);
}

@media (min-width: 620px) {
  .bento__media {
    min-height: 0;
  }
}

.bento__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  backface-visibility: hidden;
  transform: scale(1) translateZ(0);
  /* Was 1s. Nothing on the page reaches its hover state that slowly, so the zoom was
     always caught part-way and then spent another second unwinding — and a large bitmap
     resampling across a full second of sub-percent scale steps shimmers while it does.
     At .45s it arrives with the rest of the card. */
  transition: transform .45s var(--ease);
}

.bento:hover .bento__img {
  transform: scale(1.04) translateZ(0);
}

/* Held back until the file actually decodes: a missing screenshot would otherwise
   paint the browser's broken-image glyph straight over the placeholder. */
.js .bento__img {
  visibility: hidden;
}

.js .bento__img.is-ready {
  visibility: visible;
}

.js .bento__img.is-missing {
  display: none;
}

/* ── empty-slot placeholder ── */
.bento__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--paper) 0%, var(--paper-2) 58%, var(--paper-3) 100%);
}

.bento__phgrid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(78% 62% at 50% 46%, #000 0%, transparent 100%);
  mask-image: radial-gradient(78% 62% at 50% 46%, #000 0%, transparent 100%);
}

.bento__phlab {
  position: relative;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  color: var(--ink-4);
}

/* ── caption ── */
.bento__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(14px, 1.5vw, 20px) clamp(6px, .7vw, 10px) clamp(4px, .5vw, 6px);
}

.bento__lines {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.bento__cat {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
  transition: color var(--dur-out) var(--ease-2);
}

.bento:hover .bento__cat {
  color: var(--accent-ink);
  transition-duration: var(--dur-in);
}

/* Engagement length, on the client work only. Sits on the category line rather than in
   the tag row, so it reads as a fact about the relationship and not another discipline. */
.bento__dur {
  margin-left: 9px;
  padding-left: 9px;
  border-left: 1px solid var(--paper-4);
  color: var(--ink-3);
}

.bento__dur--live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-ink);
}

.bento__dur--live .dot {
  width: 5px;
  height: 5px;
  box-shadow: 0 0 0 2px var(--accent-dim);
}

.bento__title {
  font-size: var(--fs-title);
  font-weight: 400;
  letter-spacing: -.026em;
  line-height: var(--lh-tight);
  color: var(--ink);
}

/* One line, masked at the edge rather than wrapping: a tag row that wraps on some
   tiles and not others makes every caption a different height and the frames above
   them stop lining up across the band. */
.bento__tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 3px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
  mask-image: linear-gradient(90deg, #000 86%, transparent);
}

.bento__tags span {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: var(--ink-4);
  white-space: nowrap;
}

.bento__go {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 16px;
  transition: background-color var(--dur-out) var(--ease-2),
    border-color var(--dur-out) var(--ease-2), color var(--dur-out) var(--ease-2),
    transform var(--dur-out) var(--ease);
}

a.bento:hover .bento__go {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent-ink);
  transform: translate(3px, -3px);
  transition-duration: var(--dur-in);
  transition-timing-function: var(--ease-hover);
}

/* ── accent tiles ── */
/* Not every cell is a screenshot. Two short non-image tiles give the mosaic its
   rhythm and let the eye rest between three heavy frames. */
.bento--note {
  justify-content: center;
  background: var(--accent-dim);
  border-color: rgba(36, 198, 132, .34);
}

.bento__note {
  padding-inline: clamp(6px, .8vw, 12px);
  font-family: var(--mono);
  font-size: var(--fs-label);
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--accent-ink);
  text-wrap: balance;
}

.bento--mark {
  justify-content: flex-end;
  gap: 8px;
  padding: clamp(18px, 1.9vw, 26px);
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.bento__glyph {
  width: 26px;
  height: 26px;
  margin-bottom: auto;
  fill: var(--paper);
}

.bento__markword {
  font-size: var(--fs-h3);
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
}

.bento__markurl {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .58);
}

/* The section's closing link, and the only tile in the run that is not a project.
   Stacking the label above its arrow at the left edge left ~800px of empty card to the
   right and pushed the tile to 167px tall to hold one line of text. Worse, it is the one
   tile that already rests at --paper, so the shared card hover — which lightens
   --paper-3 to --paper — changed nothing on it: the whole state came down to a 36px
   green ring in a corner of a 1320px bar. Set it as a row that uses its width, and take
   the ink fill the lead tiles use so the state is unmistakable at this size. */
.bento--cta {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 2vw, 26px);
  padding: clamp(20px, 2.1vw, 30px) clamp(22px, 2.4vw, 34px);
  background: var(--paper);
}

a.bento--cta:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.bento__ctatxt {
  transition: color var(--dur-out) var(--ease-2);
}

a.bento--cta:hover .bento__ctatxt {
  color: var(--paper);
  transition-duration: var(--dur-in);
}

/* Against the ink fill the accent ring reads as a stray colour, and on a bar this wide
   the diagonal nudge the image tiles use is a wobble. Travel along the bar instead. */
a.bento--cta:hover .bento__go {
  border-color: rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .08);
  color: var(--paper);
  transform: translateX(5px);
}

/* ── copy tiles ── */
.bento--point {
  justify-content: space-between;
  gap: clamp(22px, 2.6vw, 34px);
  padding: clamp(22px, 2.4vw, 32px);
}

.bento__ptico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 16px;
  transition: color var(--dur-out) var(--ease-2), border-color var(--dur-out) var(--ease-2),
    transform var(--dur-out) var(--ease);
}

.bento--point:hover .bento__ptico {
  color: var(--accent-ink);
  border-color: var(--accent);
  transform: translateY(-1px);
  transition-duration: var(--dur-in);
  transition-timing-function: var(--ease-hover);
}

.bento--point:hover {
  background: var(--paper);
  border-color: var(--paper-4);
  transform: translateY(var(--lift));
  transition-duration: var(--dur-in);
  transition-timing-function: var(--ease-hover);
}

.bento--point:hover::after {
  opacity: 1;
  transition-duration: var(--dur-in);
}

.bento__ptbody {
  display: grid;
  gap: 11px;
}

.bento__pttitle {
  font-size: var(--fs-title);
  font-weight: 400;
  letter-spacing: -.026em;
  line-height: var(--lh-tight);
}

.bento__pttext {
  color: var(--ink-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 46ch;
}

.bento__ptchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.bento__ptchips span {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: var(--ink-4);
}

/* The lead claim carries the section, so it inverts — the same anchor the black mark
   tile gives the work grid. */
.bento--point--lead {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.bento--point--lead:hover {
  background: #16161a;
  border-color: #16161a;
}

.bento--point--lead .bento__ptico {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.bento--point--lead:hover .bento__ptico {
  border-color: var(--accent);
  color: var(--accent);
}

.bento--point--lead .bento__pttitle {
  font-size: var(--fs-h3);
  font-weight: 300;
  letter-spacing: -.036em;
  line-height: 1.1;
}

.bento--point--lead .bento__pttext {
  color: rgba(255, 255, 255, .68);
  font-size: var(--fs-body);
  max-width: 40ch;
}

.bento--point--lead .bento__ptchips span {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .74);
}

.bento__ctatxt {
  font-size: var(--fs-h3);
  font-weight: 300;
  letter-spacing: -.03em;
  color: var(--ink);
}

/* ── 11. Pricing ──────────────────────────────────────────────────────── */
.plans {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  max-width: 460px;
  margin-inline: auto;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px) clamp(22px, 2.6vw, 32px) clamp(24px, 2.8vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper);
  transition: transform var(--dur-out) var(--ease), border-color var(--dur-out) var(--ease-2);
}

.plan::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--sh-1);
  opacity: 0;
  transition: opacity var(--dur-out) var(--ease);
}

.plan:hover {
  border-color: var(--paper-4);
  transform: translateY(var(--lift));
  transition-duration: var(--dur-in);
  transition-timing-function: var(--ease-hover);
}

.plan:hover::after {
  opacity: 1;
  transition-duration: var(--dur-in);
}

.plan__name {
  font-size: var(--fs-title);
  font-weight: 400;
  letter-spacing: -.028em;
}

.plan__sub {
  margin-top: 8px;
  color: var(--ink-4);
  font-size: var(--fs-sm);
  line-height: 1.5;
  max-width: 30ch;
}

.plan__price {
  display: flex;
  align-items: flex-start;
  margin-top: clamp(30px, 4vw, 52px);
  line-height: 1;
}

.plan__amt {
  font-size: clamp(3.3rem, 2.6rem + 2.4vw, 4.6rem);
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: .86;
  font-variant-numeric: tabular-nums;
}

.plan__cur {
  margin-left: 4px;
  font-size: clamp(1rem, .9rem + .4vw, 1.3rem);
  font-weight: 300;
  color: var(--ink-3);
}

.plan__note {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.plan__list {
  display: grid;
  gap: 11px;
  margin-block: clamp(24px, 3vw, 34px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line);
}

.plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.plan__list .icon {
  font-size: 15px;
  margin-top: 1px;
  color: var(--accent-ink);
  stroke-width: 1.9;
}

.plan .btn {
  margin-top: auto;
}

.plan__flag {
  position: absolute;
  top: clamp(26px, 3vw, 38px);
  right: clamp(22px, 2.6vw, 32px);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

.plan--featured {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: var(--sh-3);
}

.plan--featured .plan__sub {
  color: rgba(255, 255, 255, .5);
}

.plan--featured .plan__cur {
  color: rgba(255, 255, 255, .6);
}

.plan--featured .plan__note {
  color: rgba(255, 255, 255, .42);
}

.plan--featured .plan__list {
  border-top-color: rgba(255, 255, 255, .16);
}

.plan--featured .plan__list li {
  color: rgba(255, 255, 255, .82);
}

.plan--featured .plan__list .icon {
  color: var(--accent);
}

.plan--featured::after {
  box-shadow: 0 48px 110px -46px rgba(11, 11, 12, .68);
}

.pricing__foot {
  margin-top: clamp(28px, 3.4vw, 44px);
  text-align: center;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
}

@media (min-width: 980px) {
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    align-items: stretch;
  }

  .plan--featured {
    margin-block: -22px;
  }
}

/* ── 12. Platforms ────────────────────────────────────────────────────── */
/* Tight gutters between adjacent glass panes — a wide gap shows an undistorted
   sliver of the backdrop between them and reads as a rendering glitch. */
.pgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(10px, .9vw, 12px);
}

@media (min-width: 620px) {
  .pgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .pgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Single-column panes carry more height than the clamp's vw term gives them —
   scaled off viewport width so it tracks the card, which is always gutter-to-gutter. */
@media (max-width: 619px) {
  .pcard {
    min-height: clamp(280px, 74vw, 312px);
  }
}

.platforms {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Lighting, not pattern: a soft pool of light behind the grid. This is what the
     card bevels bend — refraction needs *something* behind the glass, and a diffuse
     luminance field gives the rims a caustic without putting texture on the page. */
  background-image: var(--section-light);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.platforms>.container {
  position: relative;
  z-index: 1;
}

/* ── glass cards ── */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(280px, 20vw, 300px);
  /* ~1.45 pane ratio at every breakpoint */
  --pcard-pad: clamp(20px, 2.2vw, 26px);
  padding: var(--pcard-pad);
  border: 0;
  /* real glass has a specular edge, not a stroke */
  border-radius: var(--r-card);
  background: transparent;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    /* specular top edge */
    inset 0 -1px 0 rgba(255, 255, 255, .50),
    inset 1px 0 0 rgba(255, 255, 255, .55),
    inset -1px 0 0 rgba(255, 255, 255, .55),
    inset 0 14px 26px -16px rgba(255, 255, 255, .95),
    /* light entering the top bevel */
    inset 0 -20px 32px -22px rgba(11, 11, 12, .13),
    /* thickness, pooling at the base */
    0 1px 2px rgba(11, 11, 12, .045),
    0 14px 30px -18px rgba(11, 11, 12, .14);
  /* the pane floats */
  transition: transform var(--dur-out) var(--ease);
}

/* Eight shadow layers is far too much to interpolate per frame. The bevel insets are
   nearly identical between rest and hover, so they stay put and only the outer drop
   deepens — as a second layer fading in over the first. */
.pcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 1px 2px rgba(11, 11, 12, .05),
    0 26px 50px -22px rgba(11, 11, 12, .20);
  opacity: 0;
  transition: opacity var(--dur-out) var(--ease);
}

/* Static copy of the light behind the card, refracted once and then composited.
   backdrop-filter would recompute this every frame for a result that never changes. */
.glass__refract {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Clips itself now that .pcard cannot: a clipping .pcard would also erase the
     drop-shadow pseudo that has to paint outside its box. */
  overflow: hidden;
  border-radius: inherit;
  background-color: var(--paper-2);
  background-image: var(--section-light);
  background-repeat: no-repeat;
  background-size: var(--gw, 100%) var(--gh, 100%);
  background-position: var(--gx, 0px) var(--gy, 0px);
  filter: url(#liquidGlass);
}

/* body tint + specular sliver, above the refraction and below the content */
.pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, .92) 0%,
      rgba(255, 255, 255, .40) 1.6%,
      rgba(234, 234, 231, .74) 8%,
      rgba(231, 231, 228, .72) 58%,
      rgba(224, 224, 220, .80) 100%);
  transition: opacity .5s var(--ease-2);
}

.pcard>.pcard__badge,
.pcard>.pcard__foot {
  position: relative;
  z-index: 2;
}

.pcard>.pcard__glyph {
  z-index: 2;
}

.pcard:hover {
  transform: translateY(var(--lift));
  transition-duration: var(--dur-in);
  transition-timing-function: var(--ease-hover);
}

.pcard:hover::before {
  opacity: 1;
  transition-duration: var(--dur-in);
}

.pcard:hover::after {
  opacity: .82;
  transition-duration: var(--dur-in);
}

/* the pane clears slightly as it lifts */

/* the featured pane reads as clearer glass: less body tint, brighter specular */
.pcard--hot::after {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, .70) 2%,
      rgba(255, 255, 255, .90) 8%,
      rgba(255, 255, 255, .86) 58%,
      rgba(250, 250, 249, .92) 100%);
}

.pcard--hot {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, .6),
    inset 1px 0 0 rgba(255, 255, 255, .7),
    inset -1px 0 0 rgba(255, 255, 255, .7),
    inset 0 16px 28px -16px rgba(255, 255, 255, 1),
    0 1px 2px rgba(11, 11, 12, .05),
    0 22px 44px -20px rgba(11, 11, 12, .18);
}

.pcard__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.pcard__glyph {
  position: absolute;
  right: -12px;
  bottom: 30%;
  width: clamp(92px, 10vw, 122px);
  height: clamp(92px, 10vw, 122px);
  fill: none;
  stroke: var(--ink);
  stroke-width: .7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .07;
  transition: opacity var(--dur-out) var(--ease-2), transform var(--dur-out) var(--ease);
}

.pcard:hover .pcard__glyph {
  opacity: .12;
  transform: translate(-4px, -4px);
}

/* Stacked rather than a baseline row. The second line carried a short version string
   originally ("v3.2.1 · Win 10/11") and sat beside the name; it now carries a sentence,
   which ran straight off the card edge the moment .pcard stopped clipping. */
.pcard__foot {
  display: grid;
  gap: 11px;
}

.pcard__name {
  font-size: var(--fs-h3);
  font-weight: 300;
  letter-spacing: -.038em;
  line-height: var(--lh-tight);
}

.pcard__ver {
  /* A sentence of description, not a label: it was set in the tracked 12px label role,
     which is sized and spaced for two or three words. It takes the body face and the
     14px step. */
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-3);
  max-width: 40ch;
}

/* ── 13. Support / chat ───────────────────────────────────────────────── */
.support__grid {
  display: grid;
  gap: clamp(32px, 4.4vw, 68px);
  align-items: center;
}

.support__facts {
  display: grid;
  gap: 2px;
  margin-top: clamp(28px, 3.4vw, 40px);
  max-width: 440px;
}

.support__facts li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
}

.support__facts li:first-child {
  border-top: 1px solid var(--line);
}

.support__k {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.support__v {
  font-size: var(--fs-sm);
  color: var(--ink);
  text-align: right;
}

.chat {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-3);
  overflow: hidden;
  box-shadow: var(--sh-1);
}

.chat__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(14px, 1.8vw, 18px) clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}

.chat__av {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--accent-ink);
  font-size: 16px;
  flex: none;
}

.chat__who {
  display: grid;
  gap: 2px;
  margin-right: auto;
  min-width: 0;
}

.chat__who strong {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -.01em;
}

.chat__who span {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .05em;
  color: var(--ink-4);
}

.chat__on {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.chat__log {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(16px, 2.2vw, 24px);
  max-height: 420px;
  overflow-y: auto;
  /* Chain wheel input back to the page at the log boundary; containment here traps
     desktop scrolling whenever the stationary pointer crosses this panel. */
  overscroll-behavior: auto;
  scrollbar-width: thin;
}

.msg {
  display: flex;
  gap: 10px;
  max-width: 88%;
}

.msg--in {
  align-self: flex-start;
}

.msg--out {
  align-self: flex-end;
  flex-direction: row;
}

.msg__av {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--accent-ink);
  font-size: 13px;
  flex: none;
  align-self: flex-start;
}

.msg__av--you {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .04em;
}

.bubble {
  padding: 11px 14px;
  border-radius: 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.msg--in .bubble {
  border-bottom-left-radius: 4px;
}

.msg--out .bubble {
  background: var(--ink);
  border-color: var(--ink);
  color: rgba(255, 255, 255, .92);
  border-bottom-right-radius: 4px;
}

.msg time {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: var(--ink-4);
}

.msg--out time {
  text-align: right;
}

.bubble--typing {
  display: inline-flex;
  gap: 5px;
  padding: 15px 15px;
}

.bubble--typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-4);
  animation: blip 1.25s var(--ease-2) infinite;
}

.bubble--typing i:nth-child(2) {
  animation-delay: .16s;
}

.bubble--typing i:nth-child(3) {
  animation-delay: .32s;
}

@keyframes blip {

  0%,
  60%,
  100% {
    opacity: .28;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.chat__form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 11px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}

.chat__form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  padding-block: 8px;
}

.chat__form input::placeholder {
  color: var(--ink-4);
}

.chat__form input:focus {
  outline: none;
}

.chat__form button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 15px;
  cursor: pointer;
  flex: none;
  transition: background-color var(--dur-out) var(--ease-2), color var(--dur-out) var(--ease-2),
    border-color var(--dur-out) var(--ease-2), transform var(--dur-out) var(--ease);
}

.chat__form button:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  transform: translateY(-2px);
  transition-duration: var(--dur-in);
  transition-timing-function: var(--ease-hover);
}

.chat__form button:active {
  transform: translateY(0) scale(.94);
  transition-duration: .11s;
}

@media (min-width: 900px) {
  .support__grid {
    grid-template-columns: minmax(0, .84fr) minmax(0, 1fr);
  }
}

/* ── 14. CTA ──────────────────────────────────────────────────────────── */
.cta__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(460px, 46vw, 600px);
  padding: clamp(28px, 4vw, 62px);
  border-radius: 0;
  overflow: hidden;
  background: #0d0d0f;
  color: #fff;
}

.cta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
}

.cta__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 10, 12, .1) 0%, rgba(10, 10, 12, .32) 42%, rgba(10, 10, 12, .84) 100%),
    linear-gradient(90deg, rgba(10, 10, 12, .58) 0%, rgba(10, 10, 12, .05) 62%);
}

.cta__in {
  max-width: 640px;
}

.cta__title {
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.1rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.038em;
}

.cta__lede {
  margin-top: clamp(14px, 1.8vw, 20px);
  max-width: 44ch;
  color: rgba(255, 255, 255, .74);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
}

.cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(24px, 3vw, 34px);
}

@media (min-width: 900px) {
  .cta__card {
    justify-content: flex-end;
  }

  .cta__btns {
    position: absolute;
    right: clamp(28px, 4vw, 62px);
    bottom: clamp(28px, 4vw, 62px);
    margin-top: 0;
  }

  .cta__in {
    max-width: 52%;
  }
}

/* ── 15. Footer ───────────────────────────────────────────────────────── */
.foot {
  background: var(--paper);
  padding-top: clamp(52px, 7vw, 96px);
}

.foot__top {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 68px);
}

.brand--foot {
  align-items: center;
  gap: 9px;
}

.brand--foot .brand__mark {
  width: 22px;
  height: 22px;
}

.brand--foot .brand__logo {
  width: 42px;
  margin-block: -8px -7px;
}

.foot__quote {
  margin-top: 20px;
  max-width: 34ch;
  color: var(--ink-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.foot__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 44px);
}

.foot__h {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 13px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--line);
}

.foot__col ul {
  display: grid;
  gap: 10px;
}

.foot__col a {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  transition: color .25s var(--ease-2);
}

.foot__col a:hover {
  color: var(--ink);
}

.foot__legal {
  display: grid;
  gap: 16px;
  padding-block: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line);
}

.foot__copy,
.foot__credit,
.foot__policies a {
  font-size: var(--fs-label);
  line-height: 1.6;
  color: var(--ink-4);
}

.foot__policies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.foot__policies a {
  transition: color .25s var(--ease-2);
}

.foot__policies a:hover {
  color: var(--ink);
}

.foot__credit a {
  color: var(--ink-3);
  transition: color .2s ease;
}

.foot__credit a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wordmark {
  padding-inline: var(--gutter);
  overflow: hidden;
}

.wordmark__box {
  overflow: hidden;
  line-height: 0;
}

.wordmark__box span {
  display: inline-block;
  vertical-align: top;
  font-size: 28vw;
  font-weight: 300;
  line-height: .74;
  letter-spacing: -.045em;
  white-space: nowrap;
  color: var(--paper-3);
  user-select: none;
}

@media (min-width: 900px) {
  .foot__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  }

  .foot__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .foot__legal {
    grid-template-columns: minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 12px 34px;
  }

  .foot__copy {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: center;
    max-width: 62ch;
  }

  .foot__policies {
    grid-row: 1;
    grid-column: 2;
    justify-content: flex-end;
  }

  .foot__credit {
    grid-row: 2;
    grid-column: 2;
    text-align: right;
  }
}

/* ── 16. Motion, reveals, responsive tail ─────────────────────────────── */
html.js.reveal-enabled .reveal {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition: opacity .75s ease, transform .75s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

html.js.reveal-enabled .reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.js.reveal-failed .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* The launch sequence owns homepage hero motion, so it never competes with the
   viewport observer on the same properties. */
html.js.reveal-enabled .hero .reveal {
  transition: none;
}

/* The homepage foreground uses the previous Luminous site's first-load fade-up.
   launch-pending is installed in the head before the hero markup can paint. */
html.js.launch-pending .hero .eyebrow,
html.js.launch-pending .hero .hero__title,
html.js.launch-pending .hero .hero__lede,
html.js.launch-pending .hero .hero__btns,
html.js.launch-pending .hero .revs,
html.js.launch-pending .hero .hero__stats,
html.js.launch-pending .hero .hero__media {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
}

/* While the page is moving, cards passing beneath a stationary desktop pointer keep
   their rest-state lighting. This prevents hover shadows and glass tints from reading
   as scroll-driven brightness pulses; normal hover returns when the pointer next moves.
   Every declaration here keeps its transition: cutting them made the handover a single
   -frame jump, and a card whose media is a full-bleed screenshot cannot jump 4% without
   it reading as a flicker. Eased both ways, the handover is invisible. */
html.is-scrolling .btn:hover,
html.is-scrolling .fcard:hover,
html.is-scrolling .plan:hover,
html.is-scrolling .bento:hover,
html.is-scrolling .grev:hover,
html.is-scrolling .faq__q:hover,
html.is-scrolling .pcard:hover {
  transform: none;
}

html.is-scrolling .fcard:hover,
html.is-scrolling .bento:hover {
  background: var(--paper-3);
  border-color: var(--line);
}

/* The CTA tile rests at --paper, so the shared rest-state above would turn it grey
   mid-scroll — the one tile the suppression made louder rather than quieter. */
html.is-scrolling a.bento--cta:hover {
  background: var(--paper);
  border-color: var(--line);
}

html.is-scrolling .bento--point--lead:hover {
  background: var(--ink);
  border-color: var(--ink);
}

html.is-scrolling .plan:hover {
  border-color: var(--line);
}

html.is-scrolling .btn--line:hover {
  --btn-bd: var(--line);
}

html.is-scrolling .grev:hover {
  border-color: var(--line);
}

html.is-scrolling .btn:hover::before,
html.is-scrolling .fcard:hover::after,
html.is-scrolling .plan:hover::after,
html.is-scrolling .bento:hover::after,
html.is-scrolling .grev:hover::before,
html.is-scrolling .pcard:hover::before {
  opacity: 0;
}

html.is-scrolling .pcard:hover::after {
  opacity: 1;
}

/* scale(1) translateZ(0) rather than none: `none` drops the image's compositing layer
   for the duration of the scroll and rebuilds it after, which is a visible pop on the
   largest tiles. This keeps the layer and only unwinds the zoom. */
html.is-scrolling .bento:hover .bento__img {
  transform: scale(1) translateZ(0);
}

html.is-scrolling .link:hover .icon,
html.is-scrolling .bento:hover .bento__go,
html.is-scrolling .bento--point:hover .bento__ptico,
html.is-scrolling .fcard:hover .fcard__icon,
html.is-scrolling .fcard:hover .fcard__viz,
html.is-scrolling .pcard:hover .pcard__glyph {
  transform: none;
}

html.is-scrolling .fcard:hover .fcard__icon {
  color: var(--ink-2);
  border-color: var(--line);
}

html.is-scrolling .fcard:hover .fcard__viz {
  opacity: .5;
}

html.is-scrolling .bento:hover .bento__cat {
  color: var(--ink-4);
}

html.is-scrolling .bento:hover .bento__go {
  border-color: var(--line);
  background: var(--paper);
  color: var(--ink-2);
}

html.is-scrolling .bento--point:hover .bento__ptico {
  color: var(--ink-2);
  border-color: var(--line);
}

html.is-scrolling .bento--point--lead:hover .bento__ptico {
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
}

html.is-scrolling .pcard:hover .pcard__glyph {
  opacity: .07;
}

/* Seven primary links plus both actions need more room than the original five-link
   header. Keep the compact menu through tablet and small-laptop widths rather than
   allowing labels to wrap into a two-line navigation row. */
@media (min-width: 1180px) {
  .nav__links {
    display: flex;
  }

  .nav__login,
  .nav__cta {
    display: inline-flex;
  }

  .burger {
    display: none;
  }

  .menu {
    display: none;
  }
}

@media (max-width: 560px) {
  .hero__btns .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 12px;
  }

  .cta__btns .btn {
    flex: 1 1 100%;
  }

  .msg {
    max-width: 96%;
  }
}

@media (max-width: 380px) {
  .hero__btns .btn {
    flex: 1 1 100%;
    padding-inline: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  html.js.reveal-enabled .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js.launch-pending .hero .eyebrow,
  html.js.launch-pending .hero .hero__title,
  html.js.launch-pending .hero .hero__lede,
  html.js.launch-pending .hero .hero__btns,
  html.js.launch-pending .hero .revs,
  html.js.launch-pending .hero .hero__stats,
  html.js.launch-pending .hero .hero__media {
    opacity: 1 !important;
    transform: none !important;
  }

  .regions__bar i {
    transform: scaleX(1);
  }

  .marquee__track {
    animation: none;
  }

  .faq__inner p {
    opacity: 1;
    transform: none;
  }

  .bento:hover .bento__img {
    transform: scale(1) translateZ(0);
  }

  .faq__q:hover,
  .link:hover .icon,
  a.bento:hover .bento__go,
  .fcard:hover .fcard__icon,
  .fcard:hover .fcard__viz {
    transform: none;
  }
}

/* ── 18. Google review badge ──────────────────────────────────────────── */
/* Hidden until /api/reviews returns a real rating, so it never occupies space with a
   placeholder score. [hidden] needs the !important because .grev sets display. */
.grev[hidden] {
  display: none !important;
}

/* The trust signals stack rather than sitting side by side: at the hero's column width
   a row wraps awkwardly around 900px, and stacked they read as one proof block. The
   margin lives here so a hidden badge leaves no gap behind it. */
.revs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: clamp(22px, 2.6vw, 30px);
}

.revs__secondary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.grev {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 15px 9px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-out) var(--ease), border-color var(--dur-out) var(--ease-2);
}

.grev::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--sh-1);
  opacity: 0;
  transition: opacity var(--dur-out) var(--ease);
}

.grev {
  position: relative;
}

.grev:hover {
  transform: translateY(-2px);
  border-color: var(--paper-4);
  transition-duration: var(--dur-in);
  transition-timing-function: var(--ease-hover);
}

.grev:hover::before {
  opacity: 1;
  transition-duration: var(--dur-in);
}

.grev__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

/* Two star rows, the filled one clipped by width. A fractional rating has to show as a
   part-filled star — rounding 4.6 up to five is overstating the score. */
.grev__stars {
  position: relative;
  display: inline-block;
  flex: none;
  line-height: 0;
}

.grev__starrow {
  display: flex;
  gap: 2px;
  white-space: nowrap;
}

.grev__starrow--bg {
  color: var(--paper-4);
}

.grev__starrow--fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: 0;
  color: var(--amber);
}

.grev .star {
  width: 13px;
  height: 13px;
  fill: currentColor;
  stroke: none;
  flex: none;
}

.grev__txt {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.grev__txt strong {
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
}

.grev__txt span {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .04em;
  color: var(--ink-4);
}

.grev__src {
  padding-left: 11px;
  border-left: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
}

@media (max-width: 460px) {
  .grev__src {
    display: none;
  }
}

/* The badges have to stack on a phone — side by side they wrap mid-widget — but they
   stack against the left margin, in line with the headline and buttons above them. */
@media (max-width: 599px) {
  .revs__secondary {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* The TrustBox is an iframe Trustpilot sizes itself, and the Review Collector centres its
   button inside whatever width it is given — data-style-alignment is ignored on this
   template, so the button floated to the middle while every other hero element sat on the
   left margin. Constraining the box to the button's own width is the only lever available
   from outside a cross-origin iframe. 230px is chosen from measurement, not taste: below
   about 210px the widget reflows its label onto two lines, and above ~240px the centring
   opens a visible indent against the badge above it. */
.revs .trustpilot-widget {
  width: 100%;
  max-width: 230px;
  height: 52px;
  min-height: 52px;
}

/* ── 20. Templates page ───────────────────────────────────────────────── */
/* Same card as the work grid, with a description and two actions instead of a caption
   and an arrow. It keeps the work grid's fixed media ratio, so both pages crop
   screenshots identically. */
.hero--page {
  min-height: 0;
  display: block;
}

.hero--page .hero__title {
  margin-block: clamp(18px, 2.4vw, 30px) clamp(16px, 2vw, 24px);
  max-width: 16ch;
}

.hero--page .hero__lede {
  max-width: 62ch;
}

.tpl {
  cursor: default;
}

.tpl__meta {
  min-height: 0;
  flex: 1;
}

.card__desc {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  max-width: 46ch;
}

.card__desc code {
  font-family: var(--mono);
  font-size: 1em;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--paper-2);
  color: var(--ink-2);
}

/* A licence is only shown where the repo actually declares one. */
.tpl__lic {
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent-ink);
  letter-spacing: .08em;
}

.card__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: auto;
  padding: clamp(14px, 1.6vw, 20px) clamp(6px, .7vw, 10px) clamp(4px, .5vw, 6px);
  border-top: 1px solid var(--line);
}

.bentogrid--tpl .bento__tags {
  margin-top: 9px;
}

.template-paths {
  padding-block: clamp(18px, 3vw, 36px) clamp(72px, 9vw, 124px);
}

.template-paths__intro,
.template-browser__head,
.template-roadmap__head {
  max-width: 720px;
}

.template-paths__intro h2,
.template-browser__head h2,
.template-roadmap__head h2 {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.template-paths__intro p,
.template-browser__head p,
.template-roadmap__head p {
  margin: 16px 0 0;
  max-width: 62ch;
  color: var(--ink-3);
  line-height: var(--lh-body);
}

.template-paths__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(10px, .9vw, 14px);
  margin-top: clamp(28px, 4vw, 50px);
}

.template-path {
  display: grid;
  align-content: end;
  min-height: clamp(300px, 42vw, 430px);
  padding: clamp(24px, 3.4vw, 46px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background:
    radial-gradient(circle at 90% 8%, var(--accent-dim), transparent 34%),
    var(--paper-3);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur-out) var(--ease), border-color var(--dur-out) var(--ease-2), background-color var(--dur-out) var(--ease-2);
}

.template-path--site {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-dim) 58%, transparent), transparent 58%),
    var(--paper-2);
}

.template-path:hover {
  transform: translateY(var(--lift));
  border-color: var(--paper-4);
}

.template-path:active {
  transform: translateY(-1px);
}

.template-path:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.template-path__type {
  margin-bottom: auto;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.template-path strong {
  display: block;
  margin-top: clamp(72px, 10vw, 138px);
  font-family: var(--heading);
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: .98;
  letter-spacing: -.05em;
}

.template-path>span:not(.template-path__type):not(.template-path__action) {
  display: block;
  max-width: 48ch;
  margin-top: 18px;
  color: var(--ink-3);
  line-height: var(--lh-body);
}

.template-path__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-weight: 700;
}

.template-path__action .icon {
  width: 18px;
  height: 18px;
}

@media (min-width: 760px) {
  .template-paths__grid {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
  }
}

.template-browser {
  margin-bottom: clamp(30px, 4.5vw, 58px);
}

.template-filters {
  display: none;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: clamp(28px, 4vw, 46px);
  padding-block: 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.js .template-filters {
  display: grid;
}

.template-filters fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.template-filters legend,
.template-select>span {
  display: block;
  margin-bottom: 9px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.template-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-filter,
.template-clear {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--paper);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-out) var(--ease), border-color var(--dur-out) var(--ease-2), background-color var(--dur-out) var(--ease-2), color var(--dur-out) var(--ease-2);
}

.template-filter {
  padding: 9px 15px;
}

.template-filter:hover,
.template-clear:hover {
  border-color: var(--ink-4);
}

.template-filter.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.template-filter:active,
.template-clear:active {
  transform: translateY(1px);
}

.template-filter:focus-visible,
.template-clear:focus-visible,
.template-select select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.template-select select {
  width: 100%;
  min-height: 44px;
  padding: 9px 38px 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.template-clear {
  align-self: end;
  justify-self: start;
  padding: 9px 15px;
}

.template-results {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
}

@media (min-width: 760px) {
  .template-filters {
    grid-template-columns: minmax(0, 1fr) minmax(180px, .34fr) minmax(190px, .38fr) auto;
    align-items: end;
  }
}

.tpl__taxonomy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 10px;
}

.tpl__format {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.tpl[hidden],
.template-empty[hidden] {
  display: none !important;
}

.template-empty {
  padding: clamp(34px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-2);
  text-align: center;
}

.template-empty h3 {
  margin: 0;
  font-size: clamp(25px, 3vw, 36px);
  letter-spacing: -.035em;
}

.template-empty p {
  max-width: 62ch;
  margin: 14px auto 24px;
  color: var(--ink-3);
  line-height: var(--lh-body);
}

.template-roadmap {
  padding-block: clamp(76px, 10vw, 132px);
  border-top: 1px solid var(--line);
}

.template-industry-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(34px, 5vw, 60px);
  margin-top: clamp(38px, 5vw, 64px);
}

.template-industry-group {
  padding-top: 18px;
  border-top: 1px solid var(--ink);
}

.template-industry-group h3 {
  margin: 0 0 18px;
  font-size: clamp(20px, 2.1vw, 28px);
  letter-spacing: -.025em;
}

.template-industry-links {
  display: grid;
  gap: 9px;
}

.template-industry-links a {
  width: fit-content;
  color: var(--ink-3);
  text-underline-offset: 4px;
  transition: color var(--dur-out) var(--ease-2);
}

.template-industry-links a:hover {
  color: var(--ink);
}

@media (min-width: 680px) {
  .template-industry-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 21. Industry pages ───────────────────────────────────────────────── */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(20px, 2.6vw, 30px);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.crumbs a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--dur-out) var(--ease-2);
}

.crumbs a:hover {
  color: var(--ink);
  transition-duration: var(--dur-in);
}

.crumbs span[aria-hidden] {
  color: var(--paper-4);
}

/* The answer block is one inverted tile carrying one question and one complete
   paragraph — the same treatment the landing page gives its lead claims. It was a card
   with a green left border, which is a pattern that appears nowhere else on this site. */
.answer__card {
  max-width: 900px;
}

.answer__card .bento__pttitle {
  font-size: var(--fs-h3);
}

.answer__card .bento__pttext {
  max-width: 74ch;
}

/* Editorial ownership and source notes sit inside the existing card language so the
   SEO trust layer reads as part of the Luminous system, not a bolted-on article UI. */
.content-scope {
  max-width: 900px;
  margin-bottom: clamp(24px, 3.5vw, 42px);
  padding: clamp(18px, 2.2vw, 26px);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-btn) var(--r-btn) 0;
  background: var(--paper-3);
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.content-scope strong {
  color: var(--ink);
  font-weight: 600;
}

.sources .sechead a {
  color: var(--ink);
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.sources .sechead a:hover {
  text-decoration-color: var(--accent-ink);
}

.related-grid .card__acts,
.source-grid .card__acts {
  padding-inline: 0;
}

/* County pages use the same editorial card system as industries. Place names and
   representative postal codes are separated typographically so the geography is easy
   to scan without turning the page into a keyword list. */
.market__places {
  margin: 0 0 10px;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 560;
  line-height: var(--lh-body);
}

.market__zips {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: auto 0 0;
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .035em;
  line-height: 1.7;
}

.market__zips span {
  color: var(--ink-4);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.market-cluster .bento__ptbody,
.market-card .bento__ptbody {
  flex: 1;
}

.market-note {
  max-width: 960px;
}

.section-link {
  margin: clamp(24px, 3vw, 36px) 0 0;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

/* Hub cards run two-up and carry an action row, so they need the button pinned. */
.bentogrid--hub .bento--point {
  gap: clamp(16px, 2vw, 22px);
}

.bentogrid--hub .bento__ptbody {
  flex: 1;
}

.bentogrid--hub .bento__cat {
  display: block;
  margin-bottom: 4px;
}

/* ── 17. Hover on touch ───────────────────────────────────────────────── */
/* A tap on a touch screen leaves the element in :hover until you tap elsewhere, so
   every lift stays stuck up and the page looks broken behind your finger. Coarse
   pointers keep the colour changes and lose the movement. */
@media (hover: none) {

  .btn:hover,
  .fcard:hover,
  .plan:hover,
  a.bento:hover,
  .pcard:hover,
  .chat__form button:hover,
  .faq__q:hover {
    transform: none;
  }

  .btn:hover::before,
  .fcard:hover::after,
  .plan:hover::after,
  a.bento:hover::after,
  .pcard:hover::before {
    opacity: 0;
  }

  .bento:hover .bento__img {
    transform: scale(1) translateZ(0);
  }

  /* Colour changes are allowed to linger on a coarse pointer, but a full-bleed ink fill
     is not a tint — left stuck after a tap it reads as a broken bar across the grid. */
  a.bento--cta:hover {
    background: var(--paper);
    border-color: var(--line);
  }

  a.bento--cta:hover .bento__ctatxt {
    color: var(--ink);
  }

  a.bento--cta:hover .bento__go {
    border-color: var(--line);
    background: var(--paper);
    color: var(--ink-2);
  }

  .link:hover .icon,
  a.bento:hover .bento__go {
    transform: none;
  }

  /* The one place movement still belongs: a real press. */
  .btn:active,
  a.bento:active,
  .chat__form button:active {
    transform: scale(.985);
  }
}

@media print {

  .nav,
  .menu,
  .marquee,
  .cta,
  .wordmark,
  .chat__form {
    display: none !important;
  }

  body {
    padding-top: 0;
  }

  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── 15. Legal pages ──────────────────────────────────────────────────── */
/* One narrow measure and a sticky section index. Legal copy is read by search, not by
   scroll: someone arrives wanting clause 9.2, so the index is the page's real interface
   and the prose below it is set at a reading width rather than the site's 1320px bed. */
.legal {
  padding: clamp(30px, 5vw, 60px) 0 clamp(56px, 8vw, 104px);
}

.legal__grid {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

@media (min-width: 940px) {
  .legal__grid {
    grid-template-columns: 232px minmax(0, 1fr);
  }
}

.legal__index {
  position: relative;
  padding: clamp(16px, 1.6vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-3);
}

@media (min-width: 940px) {
  .legal__index {
    position: sticky;
    /* clears the fixed bar plus the hatch strip under it */
    top: calc(var(--nav-h) + 20px);
    max-height: calc(100vh - var(--nav-h) - 40px);
    overflow-y: auto;
    /* This is an in-page index, not a modal: boundary wheel input belongs to the page. */
    overscroll-behavior: auto;
  }
}

.legal__indexh {
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.legal__index ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: legal;
}

.legal__index a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  padding: 5px 6px;
  border-radius: 7px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color var(--dur-out) var(--ease-2), color var(--dur-out) var(--ease-2);
}

.legal__index a::before {
  counter-increment: legal;
  content: counter(legal);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--ink-4);
}

.legal__index a:hover {
  background: var(--paper);
  color: var(--ink);
  transition-duration: var(--dur-in);
}

.legal__index a:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

.legal__body {
  max-width: 68ch;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--ink-2);
}

.legal__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(24px, 3vw, 38px);
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: var(--ink-4);
}

.legal__sec {
  padding-top: clamp(26px, 3.4vw, 40px);
  /* the fixed header would otherwise land on top of a heading jumped to from the index */
  scroll-margin-top: calc(var(--nav-h) + 28px);
}

.legal__sec+.legal__sec {
  margin-top: clamp(6px, 1vw, 12px);
  border-top: 1px solid var(--line);
}

.legal__sec>h2 {
  margin-bottom: 14px;
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: var(--lh-tight);
  color: var(--ink);
}

.legal__sec h3 {
  margin: clamp(20px, 2.4vw, 28px) 0 10px;
  font-size: var(--fs-title);
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--ink);
}

.legal__sec p {
  margin: 0 0 14px;
}

.legal__sec ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.legal__sec li {
  position: relative;
  padding-left: 20px;
}

.legal__sec li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.legal__sec strong {
  font-weight: 500;
  color: var(--ink);
}

.legal__sec a {
  color: var(--accent-ink);
  text-underline-offset: 3px;
}

.legal__contact {
  margin-top: 6px;
  padding: clamp(16px, 1.8vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper-3);
}

.legal__contact p:last-child {
  margin-bottom: 0;
}

/* =========================================================================
   LUMINOUS STUDIO — reference-led visual system
   The light, rectangular Veltix composition guides these shared primitives.
   Homepage composition is scoped to .home; content and route markup stay intact.
   Layers: section decoration 0, content 1, fixed navigation 210, contact dock
   retains its own existing layer, skip link 500.
   ========================================================================= */
:root {
  --paper: #fafbf9;
  --paper-2: #f2f3f0;
  --paper-3: #e9ece7;
  --paper-4: #dce1d9;
  --ink: #171b18;
  --ink-2: #373e39;
  --ink-3: #505a53;
  --ink-4: #58625b;
  --line: #d3d9d0;
  --line-soft: rgba(23, 27, 24, .12);
  --accent: #24c684;
  --accent-ink: #096644;
  --heading: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --maxw: 1320px;
  --gutter: clamp(22px, 4vw, 60px);
  --nav-h: 76px;
  --r-card: 2px;
  --r-btn: 2px;
  --lift: -2px;
  --fs-h2: clamp(2rem, 1rem + 3vw, 3.75rem);
  /* Reading text never shrinks on mobile. rem values respect browser text size. */
  --fs-micro: .875rem;
  --fs-label: .875rem;
  --fs-sm: 1rem;
  --fs-body: 1rem;
  --fs-ui: 1rem;
  --fs-title: 1.375rem;
  --fs-lead: clamp(1rem, .92rem + .25vw, 1.125rem);
  --sh-1: 0 3px 10px rgba(23, 27, 24, .04);
  --sh-2: 0 12px 30px -20px rgba(23, 27, 24, .2);
  --hatch: repeating-linear-gradient(45deg, transparent 0 13px, rgba(64, 80, 65, .13) 13px 14px, transparent 14px 27px);
}

body {
  background: var(--paper);
}

.h2 {
  font-weight: 450;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.lede {
  line-height: 1.75;
}

.btn {
  min-height: 52px;
  font-family: var(--font);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.btn--sm {
  min-height: 44px;
  padding-inline: 18px;
  font-size: var(--fs-ui);
}

.btn--dark {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
}

.btn--line {
  --btn-bd: #bdc5b9;
}

.btn:focus-visible {
  outline-color: var(--accent-ink);
}

.btn:hover {
  transform: translateY(-1px);
}

.eyebrow,
.eyebrow__chip {
  border-radius: 0;
}

.eyebrow {
  max-width: 100%;
  font-family: var(--font);
  line-height: 1.5;
  font-size: var(--fs-label);
  letter-spacing: .01em;
  padding: 5px 11px 5px 5px;
}

.eyebrow__chip {
  flex: none;
  font-size: var(--fs-label);
  padding: 4px 8px;
}

.link {
  font-family: var(--font);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

/* One quiet navigation bar, with the original mark and labels. */
.nav {
  border-bottom: 1px solid var(--line);
}

.nav__in {
  height: var(--nav-h);
  gap: 38px;
}

.nav>.hatch {
  display: none;
}

.nav__links {
  gap: clamp(18px, 2.1vw, 30px);
}

.nav__links a {
  font-family: var(--font);
  font-size: var(--fs-body);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-2);
}

.brand__logo {
  width: 37px;
  margin: 0;
}

.brand__reg {
  margin-top: 5px;
  font-size: .75rem;
}

.burger {
  border-radius: 0;
}

.menu {
  background: var(--ink);
}

.menu__label {
  font-family: var(--heading);
  font-weight: 400;
  letter-spacing: -.035em;
}

/* Metadata stays secondary through weight and colour, never tiny type. */
.eyebrow__txt {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bento__tags,
.bento__ptchips {
  gap: 8px 12px;
}

.bento__tags {
  flex-wrap: wrap;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}

.bento__tags span,
.bento__ptchips span,
.case-tag {
  letter-spacing: 0;
}

.crumbs {
  flex-wrap: wrap;
}

.menu__idx {
  color: rgba(255, 255, 255, .7);
}

.menu__status {
  color: rgba(255, 255, 255, .8);
  letter-spacing: .02em;
}

.foot__col a {
  display: inline-block;
  padding-block: 4px;
}

.template-results,
.template-filters legend,
.template-select>span {
  letter-spacing: 0;
}

/* Section backgrounds fill the viewport; only their content is constrained. */
.home {
  background: var(--paper);
}

.home>main {
  background: var(--paper);
}

.home .container {
  max-width: 1440px;
}

.home .hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--paper);
}

.home .hero::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: 38px;
  border-bottom: 1px solid var(--line);
  background: var(--hatch), var(--paper-2);
}

.home .hero__grid {
  flex: 1 0 auto;
  width: 100%;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 0;
  max-width: 1600px;
  margin-inline: auto;
  padding: 0;
  align-items: stretch;
}

.home .hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  min-width: 0;
  padding: clamp(38px, 4.4vw, 64px) clamp(28px, 3.8vw, 56px) 38px;
}

.home .hero__copy>.eyebrow {
  align-self: flex-start;
  margin-inline: 0;
}

.home .hero__title--statement {
  margin-top: 30px;
  font-size: clamp(40px, 4.2vw, 68px);
  font-weight: 450;
  line-height: 1.045;
  letter-spacing: -.04em;
  text-wrap: initial;
}

.home .hero__title span {
  display: block;
}

.home .hero__lede {
  max-width: 49ch;
  font-size: var(--fs-body);
  line-height: 1.8;
  margin-top: 27px;
}

.home .hero__btns {
  flex-direction: row;
  margin-top: 28px;
  gap: 10px;
}

.home .hero__btns .btn {
  padding-inline: 20px;
}

.home .hero__btns .btn--dark::after {
  content: "↗";
  font-family: var(--font);
  font-size: 18px;
  margin-left: 14px;
}

.home .hero__media {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 560px;
  width: auto;
  margin: 12px 12px 12px 0;
  padding: 62px 0 62px 34px;
  border: 1px solid #c8d0c3;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  isolation: isolate;
  background-color: #dfe5dc;
  background-image: linear-gradient(rgba(95, 118, 93, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 118, 93, .09) 1px, transparent 1px);
  background-size: 36px 36px;
}

.home .hero__media::before {
  content: "";
  position: absolute;
  inset: 28px -40px 28px 20px;
  border: 1px solid rgba(76, 98, 72, .19);
  pointer-events: none;
}

.home .hero__media::after {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  right: -120px;
  top: -140px;
  border: 1px solid rgba(76, 98, 72, .19);
  transform: rotate(45deg);
  pointer-events: none;
}

.home .hero__screen {
  position: relative;
  z-index: 1;
  flex: 0 0 780px;
  width: 780px;
  padding: 7px;
  border: 1px solid #434c41;
  border-radius: 5px;
  background: #222923;
  box-shadow: 0 24px 40px -20px rgba(24, 41, 26, .45);
}

.home .hero__screen img {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1206;
  object-fit: contain;
  border-radius: 1px;
}

html.js.launch-pending .home .hero__media {
  opacity: 1;
  transform: none;
}

.home .hero__live {
  left: 34px;
  bottom: 23px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  font-size: var(--fs-label);
  letter-spacing: 0;
}

.home .hero__live .dot {
  background: var(--accent-ink);
  box-shadow: none;
  width: 5px;
  height: 5px;
}

.home .revs {
  margin-top: 30px;
  gap: 12px;
}

.home .grev {
  border: 0;
  border-radius: 0;
  padding: 16px 0 0;
  background: none;
  border-top: 1px solid var(--line);
  gap: 9px;
}

.home .grev::before {
  display: none;
}

.home .grev:hover {
  transform: none;
}

.home .grev__src {
  font-size: var(--fs-label);
  letter-spacing: -.02em;
}

.home .grev__mark {
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}

.home .grev__stars {
  color: var(--accent-ink);
}

.home .revs__secondary {
  flex-wrap: wrap;
}

.home #testimonials .revs__secondary {
  justify-content: center;
  gap: 32px;
  margin: -14px 0 24px;
}

.home #testimonials .trustpilot-widget {
  width: 230px;
  min-height: 52px;
}

/* Reference hatch detail doubles as the boundary between hero and proof. */
.home .marquee {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 29px var(--gutter);
  border-block: 1px solid var(--line);
  background: var(--hatch), var(--paper-2);
}

.home .marquee__lab {
  flex: 0 0 95px;
  margin: 0;
  text-align: left;
  font-size: var(--fs-label);
  line-height: 1.6;
  letter-spacing: .06em;
}

.home .marquee__mask {
  flex: 1;
  min-width: 0;
}

.home .marquee__group {
  gap: 52px;
}

.home .logo {
  font-family: var(--font);
  font-size: 19px;
  font-weight: 550;
  letter-spacing: -.04em;
  color: #535c50;
}

.home .metrics {
  padding: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.home .metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.home .metric {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
  align-content: start;
  padding: 33px 25px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.home .metric:first-child {
  padding-left: 0;
  border-left: 0;
}

.home .metric:last-child {
  padding-right: 0;
}

.home .metric__chip {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  justify-content: start;
  color: var(--accent-ink);
}

.home .metric__val {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -.025em;
}

.home .metric__lab {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  letter-spacing: 0;
  text-transform: none;
  max-width: 26ch;
}

/* Deliberate intervals and borders replace an uninterrupted grey card field. */
.home :is(.network, .features, .pricing, .platforms, .support) {
  padding-block: clamp(72px, 7.5vw, 114px);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.home main>.features+.features {
  padding-top: clamp(72px, 7.5vw, 114px);
}

.home .sechead {
  margin-bottom: 52px;
  max-width: 870px;
}

.home .sechead .lede {
  max-width: 61ch;
}

.home .sechead--center {
  text-align: left;
  margin-inline: 0;
}

.home .sechead--center .lede {
  margin-inline: 0;
}

.home .network__grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(48px, 7vw, 110px);
}

.home .network__copy .h2 {
  font-size: var(--fs-h2);
}

.home .network__copy .hide-sm {
  display: none;
}

.home .network__copy .lede {
  font-size: var(--fs-body);
}

.home .network__copy .plan__list {
  margin-block: 24px 30px;
  padding: 22px 0 0;
  gap: 13px;
}

.home .network__copy .plan__list li {
  font-size: var(--fs-body);
}

.home .network__media {
  padding: 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: none;
  align-self: start;
}

.home .network__media img {
  aspect-ratio: 1 / 1.08;
  object-position: 50% 24%;
}

.home .network__cap {
  position: static;
  padding: 20px 12px 12px;
  background: none;
  color: var(--ink);
  gap: 5px;
}

.home .network__cap strong {
  font-weight: 500;
  font-size: var(--fs-body);
}

.home .network__cap span {
  font-size: var(--fs-label);
  color: var(--ink-3);
  letter-spacing: 0;
}

/* Services read as capabilities, with space proportionate to their content. */
.home .pricing {
  background: var(--paper-2);
}

.home .plans {
  display: grid;
  max-width: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.home .plan {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 20px;
  padding: 34px;
  background: var(--paper);
  border-color: var(--line);
}

.home .plan:hover {
  transform: none;
  border-color: #a6b3a1;
}

.home .plan::after,
.home .plan:hover::before {
  display: none;
}

.home .plan__head {
  grid-column: 1;
}

.home .plan__name {
  font-size: var(--fs-title);
  line-height: 1.2;
  letter-spacing: -.035em;
  font-weight: 450;
}

.home .plan__sub {
  max-width: 44ch;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.75;
  margin-top: 15px;
  color: var(--ink-3);
}

.home .plan__price {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

.home .plan__amt {
  font-family: var(--heading);
  font-size: 46px;
  font-weight: 350;
  letter-spacing: -.075em;
  line-height: 1;
  color: #8d9b85;
}

.home .plan__note {
  grid-column: 1 / -1;
  margin-top: 27px;
  font-size: var(--fs-label);
  letter-spacing: .02em;
}

.home .plan__list {
  grid-column: 1 / -1;
  margin-block: 16px 28px;
  padding-top: 22px;
  gap: 10px;
}

.home .plan__list li {
  font-size: var(--fs-body);
}

.home .plan>.btn {
  grid-column: 1 / -1;
  min-height: 44px;
  justify-self: start;
  width: auto;
  padding-inline: 18px;
}

.home .plan--featured {
  margin-block: 0;
  box-shadow: none;
  background: #e6ece2;
  color: var(--ink);
  border-color: #bdcbb5;
}

.home .plan--featured :is(.plan__sub, .plan__note) {
  color: var(--ink-3);
}

.home .plan--featured .plan__list {
  border-color: #c2cdbb;
}

.home .plan--featured .plan__list li {
  color: var(--ink-2);
}

.home .plan--featured .plan__list .icon {
  color: var(--accent-ink);
}

.home .plan--featured .btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink);
}

.home .plan__flag {
  position: absolute;
  top: -12px;
  right: 24px;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid #b7c3b0;
  border-radius: 0;
  background: #e6ece2;
  color: var(--ink-2);
  font-size: var(--fs-label);
  letter-spacing: 0;
}

.home .plan--featured .plan__price {
  grid-row: 1;
}

/* Scope legacy card layout to .plan: the service gateway reuses this anchor ID. */
.home .plan#svc-growth {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  column-gap: 50px;
}

.home .plan#svc-growth .plan__head {
  grid-column: 1;
  grid-row: 1 / 3;
}

.home .plan#svc-growth .plan__price {
  grid-column: 3;
  grid-row: 1;
}

.home .plan#svc-growth .plan__note {
  grid-column: 1;
  margin-top: 20px;
}

.home .plan#svc-growth .plan__list {
  grid-column: 2;
  grid-row: 1 / 4;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 0;
  padding: 0;
  margin: 0;
  align-content: start;
  gap: 17px 22px;
}

.home .plan#svc-growth>.btn {
  grid-column: 1;
  margin-top: 24px;
}

.home .pricing__foot {
  margin-top: 28px;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  letter-spacing: 0;
  text-transform: none;
}

/* The workflow grid is flat and technical, without refraction or bevel effects. */
.home .platforms {
  background-image: none;
}

.home .pgrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.home .pcard {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--paper);
  min-height: 292px;
  padding: 28px;
}

.home .pcard::before,
.home .pcard::after,
.home .pcard:hover .pcard__foot::after {
  display: none;
}

.home .pcard:hover {
  background: #f0f4ec;
  transform: none;
}

.home .pcard__badge {
  font-size: var(--fs-label);
  color: var(--ink-3);
}

.home .pcard__badge .dot {
  display: none;
}

.home .pcard__glyph {
  stroke: currentColor;
  position: static;
  width: 44px;
  height: 44px;
  margin: 26px 0 33px;
  color: #54734c;
  opacity: 1;
  stroke-width: 1;
}

.home .pcard__name {
  font-weight: 450;
  font-family: var(--heading);
  font-size: var(--fs-title);
  letter-spacing: -.04em;
}

.home .pcard__ver {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--ink-3);
  text-transform: none;
}

/* Work keeps its four content bands and uses real screenshots as the focal point. */
.home #work {
  background: var(--paper-2);
}

.home .bandhead {
  border-top: 1px solid #bdc6b7;
  padding-top: 25px;
  margin-top: 64px;
  margin-bottom: 25px;
}

.home .bandhead__t {
  font-size: var(--fs-title);
  font-weight: 450;
  letter-spacing: -.04em;
}

.home .bandhead__d {
  font-family: var(--font);
  font-size: var(--fs-body);
  max-width: 66ch;
  line-height: 1.75;
}

.home .bentogrid--work {
  gap: 22px;
}

.home .bentogrid--work .bento {
  padding: 9px;
  background: var(--paper);
  border-color: var(--line);
}

.home .bentogrid--work .bento__media {
  border: 1px solid var(--line);
  border-radius: 0;
}

.home .bento__meta {
  padding: 21px 13px 16px;
  align-items: center;
}

.home .bento__title {
  font-size: var(--fs-title);
  font-weight: 450;
  letter-spacing: -.04em;
}

.home .bento__cat {
  font-size: var(--fs-label);
  letter-spacing: 0;
}

.home .bento__go {
  border-radius: 0;
  width: 36px;
  height: 36px;
  background: transparent;
}

.home .bento__tags {
  flex-wrap: wrap;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
  gap: 5px 14px;
}

.home .bento__tags span {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-size: var(--fs-label);
  letter-spacing: 0;
}

.home .bento__dur {
  white-space: nowrap;
}

/* A connected sequence distinguishes process from the capabilities grid. */
.home #process .fgrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.home #process .fcard {
  min-height: 0;
  border: 0;
  border-right: 1px solid var(--line);
  background: none;
  border-radius: 0;
  padding: 28px 24px 0;
}

.home #process .fcard:first-child {
  padding-left: 0;
}

.home #process .fcard:last-child {
  border: 0;
  padding-right: 0;
}

.home #process .fcard:hover {
  transform: none;
}

.home #process .fcard::after,
.home #process .fcard:hover::before {
  display: none;
}

.home #process .fcard__top {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 29px;
}

.home #process .fcard__icon {
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: var(--paper-2);
  color: var(--accent-ink);
}

.home #process .fcard__title {
  font-size: var(--fs-title);
  line-height: 1.35;
  letter-spacing: -.04em;
  min-height: 54px;
}

.home #process .fcard__body {
  font-size: var(--fs-body);
  line-height: 1.8;
  order: 1;
  margin-top: 20px;
}

.home #process .fcard__viz {
  flex: none;
  order: 2;
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-label);
  opacity: 1;
  mask-image: none;
  -webkit-mask-image: none;
  white-space: normal;
  transform: none;
  color: var(--ink-4);
}

.home #why {
  background: var(--paper-2);
}

.home #why .bentogrid {
  grid-template-columns: 1.05fr 1fr 1fr;
  grid-auto-rows: auto;
  gap: 14px;
}

.home #why .bento {
  grid-column: auto;
  grid-row: auto;
  min-height: 250px;
  padding: 28px;
  background: var(--paper);
}

.home #why .bento--point--lead {
  grid-row: span 2;
  background: #e2eadc;
  color: var(--ink);
  border-color: #b8c9af;
  justify-content: space-between;
}

.home #why .bento__pttitle {
  font-size: var(--fs-title);
  font-weight: 450;
  letter-spacing: -.035em;
}

.home #why .bento--point--lead .bento__pttitle {
  font-size: var(--fs-h3);
}

.home #why .bento__pttext {
  color: var(--ink-3);
  font-size: var(--fs-body);
  line-height: 1.8;
}

.home #why .bento__ptico {
  border-radius: 0;
  border-color: var(--line);
  background: transparent;
  color: var(--accent-ink);
}

.home #why .bento--point--lead .bento__ptico {
  border: 0;
  width: 70px;
  height: 70px;
  font-size: 43px;
  justify-content: start;
}

.home #why .bento__ptchips span {
  border-radius: 0;
  border-color: #b8c9af;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-label);
}

.home #testimonials .sechead {
  text-align: center;
  margin-inline: auto;
}

.home #testimonials .lede {
  margin-inline: auto;
}

.home .reviews-direct {
  text-align: center;
  margin: 0;
}

/* Same rule as every other centred section head: the centre goes at 600px, where the
   column stops being wide enough for it to read as composition. The review links and the
   badge row under them go with it, or the heading moves left and the proof stays put. */
@media (max-width: 599px) {

  .home #testimonials .sechead,
  .home #testimonials .lede {
    margin-inline: 0;
    text-align: left;
  }

  .home #testimonials .revs__secondary {
    justify-content: flex-start;
  }

  .home .reviews-direct {
    text-align: left;
  }
}

.home #faq>.container {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: 65px;
  align-items: start;
}

.home #faq .sechead {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  margin-bottom: 0;
}

.home #faq .h2 {
  font-size: var(--fs-h2);
}

.home .faqlist {
  width: 100%;
}

/* The link is the third child of the two-column grid, so it would otherwise wrap into
   the narrow left column under the sticky heading and float in that column's whitespace.
   It closes the list of questions, so it sits under them against the same right edge as
   the toggles. */
.home #faq .pricing__foot {
  grid-column: 2;
  margin-top: 0;
  text-align: right;
}

.home .faq {
  background: transparent;
}

.home .faq__q {
  padding-block: 22px;
}

.home .faq__txt {
  font-size: var(--fs-body);
  font-weight: 400;
}

.home .faq__sign {
  border-radius: 0;
}

.home .faq__q:hover {
  transform: none;
}

.home .faq__idx {
  color: var(--accent-ink);
}

.home .faq__inner p {
  font-size: var(--fs-body);
  line-height: 1.8;
}

.home .support {
  background: var(--paper-2);
}

.home .support__grid {
  gap: clamp(40px, 6vw, 90px);
}

.home .support__copy .h2 {
  font-size: var(--fs-h2);
}

.home .support__tags li {
  border-radius: 0;
  font-size: var(--fs-label);
}

.home .chat {
  border-radius: 2px;
  box-shadow: 0 18px 44px -30px rgba(23, 27, 24, .25);
  border: 1px solid #bbc6b4;
}

.home .chat__top {
  padding: 20px;
}

.home .chat__who strong {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.home .chat__who>span {
  font-family: var(--font);
  font-size: var(--fs-label);
  letter-spacing: 0;
}

.home .chat__on {
  font-size: var(--fs-label);
}

.home .bubble {
  border-radius: 2px;
  font-size: var(--fs-body);
}

.home .chat__av,
.home .msg__av {
  border-radius: 2px;
}

.home .chat__form input {
  font-family: var(--font);
}

/* The close stays in the paper theme; hatch and typography carry its weight. */
.home .cta {
  padding: 0;
  background: var(--paper);
}

.home .cta>.container {
  max-width: none;
  padding: 0;
}

.home .cta__card {
  min-height: 0;
  padding: clamp(64px, 8vw, 120px) var(--gutter);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  align-items: center;
}

.home .cta__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 30px;
  background: var(--hatch), var(--paper-2);
  border-bottom: 1px solid var(--line);
}

.home .cta__card::after {
  display: none;
}

.home .cta__in {
  max-width: 820px;
}

.home .cta__title {
  font-size: clamp(38px, 5.4vw, 78px);
  font-weight: 450;
  line-height: 1.06;
  letter-spacing: -.04em;
}

.home .cta__lede {
  color: var(--ink-3);
  font-size: var(--fs-body);
  max-width: 67ch;
  margin: 28px auto 0;
}

.home .cta__btns {
  position: static;
  justify-content: center;
  margin-top: 32px;
}

.home .cta__btns .btn--light {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink);
}

.home .cta__btns .btn--ghostlight {
  --btn-fg: var(--ink);
  --btn-bd: #b9c3b3;
}

.foot {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}

.foot__h {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .02em;
}

.foot__col a {
  font-size: var(--fs-body);
}

.foot__quote {
  font-size: var(--fs-body);
  line-height: 1.8;
}

.wordmark {
  border-top: 1px solid var(--line);
}

.wordmark__box {
  padding-block: 14px;
}

#wordmarkText {
  font-family: var(--heading);
  font-weight: 500;
  letter-spacing: -.075em;
  color: #29382b;
}

@media (max-width: 1179px) {
  .nav__cta {
    display: inline-flex;
  }

  .home .hero__copy {
    padding: 40px 28px 32px;
  }

  .home .hero__title--statement {
    font-size: clamp(35px, 4vw, 48px);
  }

  .home .hero__title span {
    display: inline;
  }

  .home .hero__lede {
    font-size: var(--fs-body);
  }

  .home .hero__btns .btn {
    padding-inline: 18px;
    font-size: var(--fs-ui);
  }

  .home .hero__btns .btn--dark::after {
    margin-left: 2px;
  }

  .home .grev {
    flex-wrap: wrap;
  }

  .home .metric {
    padding-inline: 18px;
  }

  .home .metric__val {
    font-size: var(--fs-body);
  }

  .home .network__grid {
    gap: 42px;
  }

  .home .plan#svc-growth {
    column-gap: 24px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  }

  .home .plan#svc-growth .plan__list {
    grid-template-columns: 1fr;
  }

  .home #process .fgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 0;
  }

  .home #process .fcard:nth-child(2) {
    border-right: 0;
  }

  .home #process .fcard:nth-child(3) {
    padding-left: 0;
  }

  .home #why .bentogrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home #why .bento--point--lead {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 280px;
  }

  .home #faq>.container {
    gap: 35px;
  }
}

@media (max-width: 899px) {
  :root {
    --gutter: 28px;
    --nav-h: 68px;
  }

  .home .hero__grid {
    grid-template-columns: 1fr;
  }

  .home .hero__copy {
    padding: 46px 34px 38px;
  }

  .home .hero__title--statement {
    max-width: 720px;
    font-size: clamp(43px, 6.8vw, 64px);
  }

  .home .hero__title span {
    display: block;
  }

  .home .hero__lede {
    max-width: 65ch;
    font-size: var(--fs-body);
  }

  .home .hero__btns .btn {
    padding-inline: 20px;
    font-size: var(--fs-body);
  }

  .home .hero__media {
    min-height: 0;
    height: auto;
    margin: 0 12px 12px;
    padding: 40px 28px 64px;
  }

  .home .hero__screen {
    flex: 0 1 100%;
    width: 100%;
  }

  .home .hero__live {
    left: 28px;
  }

  .home .metrics__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home .metric {
    padding: 28px;
  }

  .home .metric:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .home .metric:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  .home .metric__lab {
    max-width: 32ch;
  }

  .home .network__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home .network__media {
    max-width: 520px;
    width: 100%;
  }

  .home .network__media img {
    aspect-ratio: 1 / 1;
  }

  .home .pgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home .plans {
    grid-template-columns: 1fr;
  }

  .home .plan#svc-growth {
    grid-column: auto;
    grid-template-columns: 1fr auto;
  }

  .home .plan#svc-growth .plan__head {
    grid-column: 1;
    grid-row: auto;
  }

  .home .plan#svc-growth .plan__price {
    grid-column: 2;
    grid-row: 1;
  }

  .home .plan#svc-growth .plan__note {
    grid-column: 1 / -1;
  }

  .home .plan#svc-growth .plan__list {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block: 16px 28px;
    border-top: 1px solid var(--line);
    padding-top: 22px;
  }

  .home .plan#svc-growth>.btn {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .home .plan__sub {
    max-width: 56ch;
  }

  .home #faq>.container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .home #faq .sechead {
    position: static;
  }

  /* One column: a second grid column would be created just for the link. It follows the
     list and takes the left margin like everything else on a narrow screen. */
  .home #faq .pricing__foot {
    grid-column: auto;
    margin-top: 8px;
    text-align: left;
  }
}

@media (max-width: 599px) {
  :root {
    --gutter: 20px;
    --nav-h: 64px;
  }

  .nav__in {
    padding-inline: 20px;
    gap: 16px;
  }

  .nav__act {
    gap: 14px;
  }

  .nav__cta {
    min-height: 44px;
    padding-inline: 12px;
    font-size: var(--fs-ui);
  }

  .brand__logo {
    width: 32px;
  }

  .home .hero::before {
    height: 23px;
  }

  .home .hero__copy {
    padding: 34px 20px 30px;
  }

  .home .hero .eyebrow {
    padding: 5px 9px 5px 5px;
    font-size: var(--fs-label);
    gap: 9px;
    letter-spacing: 0;
  }

  .home .hero .eyebrow__chip {
    display: inline;
    font-size: var(--fs-label);
    letter-spacing: 0;
    padding: 3px 6px;
  }

  .home .hero__title--statement {
    font-size: clamp(34px, 8.8vw, 50px);
    margin-top: 27px;
    letter-spacing: -.04em;
    line-height: 1.09;
  }

  .home .hero__title span {
    display: inline;
  }

  .home .hero__lede {
    margin-top: 23px;
    font-size: var(--fs-body);
    line-height: 1.8;
  }

  .home .hero__btns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 25px;
  }

  .home .hero__btns .btn {
    min-height: 52px;
    width: 100%;
    padding-inline: 16px;
    font-size: var(--fs-ui);
    white-space: normal;
  }

  .home .hero__btns .btn--dark::after {
    display: none;
  }

  .home .revs {
    margin-top: 24px;
  }

  .home .grev {
    gap: 7px;
    padding-top: 15px;
  }

  .home .grev__src {
    font-size: var(--fs-label);
  }

  .home .grev__txt {
    font-size: var(--fs-label);
  }

  .home .revs__secondary {
    justify-content: start;
  }

  .home .hero__media {
    margin: 0 8px 8px;
    padding: 27px 14px 50px;
  }

  .home .hero__screen {
    padding: 4px;
  }

  .home .hero__live {
    left: 16px;
    bottom: 17px;
    font-size: var(--fs-label);
  }

  .home .hero__media::before {
    inset: 12px 10px;
  }

  .home .marquee {
    gap: 14px;
    padding: 23px 20px;
  }

  .home .marquee__lab {
    flex-basis: 90px;
    font-size: var(--fs-label);
  }

  .home .logo {
    font-size: 17px;
  }

  .home .marquee__group {
    gap: 34px;
  }

  .home .metrics__grid {
    grid-template-columns: 1fr;
  }

  .home .metric {
    padding: 24px 0;
    gap: 10px;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .home .metric:last-child {
    border-bottom: 0;
  }

  .home .metric__val {
    font-size: var(--fs-body);
  }

  .home .metric__lab {
    max-width: none;
  }

  .home :is(.network, .features, .pricing, .platforms, .support),
  .home main>.features+.features {
    padding-block: 62px;
  }

  .home .h2 {
    font-size: var(--fs-h2);
    letter-spacing: -.04em;
  }

  .home .sechead {
    margin-bottom: 32px;
  }

  .home .lede {
    font-size: var(--fs-body);
  }

  .home .network__grid {
    gap: 32px;
  }

  .home .network__copy .h2 {
    font-size: var(--fs-h2);
  }

  .home .network__copy .lede {
    font-size: var(--fs-body);
  }

  .home .network__copy .plan__list li {
    font-size: var(--fs-body);
  }

  .home .plan {
    padding: 24px;
    column-gap: 15px;
  }

  .home .plan__name {
    font-size: var(--fs-title);
  }

  .home .plan__amt {
    font-size: 34px;
  }

  .home .plan__sub {
    font-size: var(--fs-body);
  }

  .home .plan__list li {
    font-size: var(--fs-body);
  }

  .home .plan#svc-growth .plan__list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home .pgrid {
    grid-template-columns: 1fr;
  }

  .home .pcard {
    min-height: 0;
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .home .pcard__glyph {
    grid-column: 2;
    grid-row: 1;
    width: 30px;
    height: 30px;
    margin: 0;
  }

  .home .pcard__foot {
    grid-column: 1 / -1;
    margin-top: 28px;
  }

  .home .pcard__name {
    font-size: var(--fs-title);
  }

  .home .pcard__ver {
    font-size: var(--fs-body);
  }

  .home .bandhead {
    margin-top: 42px;
    padding-top: 23px;
  }

  .home .bandhead__t {
    font-size: var(--fs-title);
  }

  .home .bandhead__d {
    font-size: var(--fs-body);
  }

  .home .bento__meta {
    padding: 18px 10px 12px;
  }

  .home .bento__title {
    font-size: var(--fs-title);
  }

  .home .bento__cat {
    line-height: 1.8;
  }

  .home #process .fgrid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .home #process .fcard {
    padding: 27px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
  }

  .home #process .fcard__top {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .home #process .fcard__title {
    min-height: 0;
    font-size: var(--fs-title);
  }

  .home #process .fcard__body {
    font-size: var(--fs-body);
  }

  .home #process .fcard__viz {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding-top: 14px;
    margin-top: 20px;
  }

  .home #why .bentogrid {
    grid-template-columns: 1fr;
  }

  .home #why .bento {
    min-height: 225px;
    padding: 24px;
  }

  .home #why .bento--point--lead {
    grid-column: auto;
    min-height: 320px;
  }

  .home #why .bento__pttext {
    font-size: var(--fs-body);
  }

  .home #faq .h2 {
    font-size: var(--fs-h2);
  }

  .home .faq__q {
    gap: 12px;
  }

  .home .faq__idx {
    width: auto;
    font-size: var(--fs-label);
  }

  .home .faq__inner p {
    font-size: var(--fs-body);
  }

  .home .support__copy .h2 {
    font-size: var(--fs-h2);
  }

  .home .chat__top {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    padding: 15px;
  }

  .home .chat__on {
    grid-column: 2;
    letter-spacing: 0;
  }

  .home .support__facts li {
    display: grid;
    gap: 8px;
  }

  .home .support__v {
    text-align: left;
  }

  .home .msg {
    max-width: 100%;
  }

  .foot__cols {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero__btns .btn,
  .card__acts .btn {
    white-space: normal;
    padding-block: 12px;
  }

  .home .chat__who strong {
    font-size: var(--fs-body);
  }

  .home .chat__who>span {
    font-size: var(--fs-label);
  }

  .home .chat__on {
    font-size: var(--fs-label);
  }

  .home .cta__card {
    padding-block: 78px 62px;
  }

  .home .cta__title {
    font-size: 40px;
  }

  .home .cta__lede {
    font-size: var(--fs-body);
  }

  .home .cta__btns {
    flex-direction: column;
  }

  .home .cta__btns .btn {
    font-size: var(--fs-ui);
    white-space: normal;
    padding-block: 12px;
  }

  .foot__legal {
    padding-bottom: 80px;
  }
}

/* Representative editorial imagery and contextual commercial resources. */
.page-visual {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  padding-inline: var(--gutter);
  margin: 28px auto 48px
}

.page-visual picture {
  display: block
}

.page-visual img {
  display: block;
  width: 100%;
  height: clamp(220px, 30vw, 420px);
  object-fit: cover;
  object-position: center 55%;
  background: #f6f5f1
}

.page-visual figcaption {
  margin: 10px 0 0;
  font-size: .8125rem;
  color: #525754;
  line-height: 1.6
}

@media(max-width:599px) {
  .page-visual {
    margin-bottom: 32px
  }

  .page-visual img {
    height: auto;
    aspect-ratio: 16/9
  }
}

.commercial-context {
  padding: 64px 0;
  background: #f4f5f0
}

.commercial-context h2 {
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  line-height: 1.2;
  max-width: 850px;
  margin-bottom: 24px
}

.commercial-context p {
  font-size: 1rem;
  line-height: 1.8;
  max-width: 850px;
  margin-bottom: 20px
}

.commercial-context a {
  text-decoration: underline;
  text-underline-offset: 3px
}

.commercial-context h3 {
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 32px 0 16px;
  max-width: 850px
}

.commercial-context ul {
  max-width: 850px;
  padding-left: 24px;
  margin: 0 0 24px;
  line-height: 1.8
}

.commercial-context li {
  margin-bottom: 12px
}

/* Article discovery follows the site's rectangular, editorial layout. */
.journal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px
}

.journal__grid article {
  min-width: 0
}

.journal__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--ink)
}

.journal__card picture {
  display: block;
  width: 100%
}

.journal__card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 0
}

.journal__category {
  font-size: .8125rem;
  color: var(--ink-3)
}

.journal__card h3 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: -.025em
}

.journal__card p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-3)
}

.journal__card>.link {
  margin-top: auto;
  padding-top: 8px
}

.journal__card:hover h3 {
  text-decoration: underline;
  text-underline-offset: 4px
}

.journal__all {
  margin-top: 32px
}

.reading-links {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line)
}

.reading-links h3 {
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 0 0 12px
}

.reading-links p {
  max-width: 900px;
  font-size: 1rem;
  line-height: 1.8;
  margin: 0
}

.reading-links a {
  text-decoration: underline;
  text-underline-offset: 3px
}

.reading-links.case-shell {
  margin-bottom: 48px
}

.case-author {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-3);
  margin-top: 18px
}

.case-author a {
  text-decoration: underline;
  text-underline-offset: 3px
}

@media(max-width:899px) {
  .journal__grid {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .journal__card img {
    max-height: 320px
  }

  .journal__card h3 {
    font-size: 1.5rem
  }
}

/* Keep the full-height hero's controls visible on shorter desktop displays. */
@media (min-width: 900px) and (max-height: 820px) {
  .home .hero__copy {
    padding-block: 26px;
  }

  .home .hero__title--statement {
    margin-top: 22px;
  }

  .home .hero__lede,
  .home .hero__btns,
  .home .revs {
    margin-top: 20px;
  }

  .home .hero__media {
    min-height: 0;
    padding-block: 32px;
  }
}

/* Current-page feedback is shared by all page types and the mobile menu. */
.nav__links a[aria-current="page"] {
  color: var(--accent-ink);
}

.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.menu__nav a[aria-current="page"] .menu__label {
  text-decoration: underline;
  text-underline-offset: .18em;
}