/* Shared header geometry. Full-width pages resolve against the
           viewport; bounded compositions resolve against their shell. The
           pill width follows its hero in CSS; controls sit 24px inside the
           measured inner rails so they do not touch the frame lines. */
        .nav-pill.site-header__pill {
          max-width: none;
          width: min(var(--frame-max), calc(100% - 48px));
          margin: 0 auto;
          padding-left: calc(var(--rail-il, max(48px, 50vw - 568px)) - var(--rail-o, 24px) + 24px);
          padding-right: calc(var(--rail-ir, max(48px, 50vw - 568px)) - var(--rail-o, 24px) + 24px);
          box-sizing: border-box;
        }

        .site-width-shell .nav-pill.site-header__pill,
        .brand-page .nav-pill.site-header__pill {
          padding-left: calc(var(--rail-il, max(48px, 50% - 568px)) - var(--rail-o, 24px) + 24px);
          padding-right: calc(var(--rail-ir, max(48px, 50% - 568px)) - var(--rail-o, 24px) + 24px);
        }

        /* ===== mobile menu: calm white sheet under the pill ===== */
        .nav-burger {
          display: none;
          /* no double-tap zoom on the one control the phone header has, so the
             browser dispatches the tap instead of waiting to see if a second
             one follows */
          touch-action: manipulation;
        }

        .nav-menu {
          display: none;
        }

        @media (max-width: 960px) {
          /* nav breakpoint raised from 720px to 960px; mirrors index.html */
          .nav[data-shared-header] .nav-cta {
            display: none;
          }

          .nav-burger {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            margin-left: auto;
            width: 40px;
            height: 40px;
            flex: none;
            background: rgba(255, 255, 255, .14);
            border: 1px solid rgba(255, 255, 255, .32);
            border-radius: 8px;
            cursor: pointer;
            pointer-events: auto;
            transition: background .3s var(--ease-micro);
          }

          .nav-burger i {
            display: block;
            width: 16px;
            height: 2px;
            border-radius: 1px;
            background: #fff;
            transition: transform .4s var(--ease-micro);
          }

          .nav.menu-open .nav-burger i:first-child {
            transform: translateY(3.5px) rotate(45deg);
          }

          .nav.menu-open .nav-burger i:last-child {
            transform: translateY(-3.5px) rotate(-45deg);
          }

          .nav.menu-open .nav-menu {
            display: block;
          }

          .nav-menu {
            position: absolute;
            left: 24px;
            right: 24px;
            top: calc(100% + 2px);
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 0;
            padding: 10px 8px 16px;
            box-shadow: 0 24px 60px rgba(8, 12, 40, .18);
            pointer-events: auto;
            animation: nmIn .45s var(--ease-out-quint);
          }

          .nav-menu a:not(.nm-cta) {
            display: block;
            padding: 12px 4px 12px 16px;
            font-family: var(--sans);
            font-size: 17px;
            font-weight: 500;
            color: var(--ink);
            text-decoration: none;
            border-radius: 8px;
          }

          .nav-menu a:not(.nm-cta):active {
            background: var(--cream);
          }

          .nav-menu .nm-group {
            display: block;
            padding: 12px 16px 2px;
            font-family: var(--sans);
            font-size: 11px;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--muted);
          }

          .nav-menu .nm-sep {
            display: block;
            height: 1px;
            margin: 8px 16px;
            background: rgba(10, 10, 10, .08);
          }

          .nav-menu .nm-cta {
            display: flex;
            justify-content: center;
            margin: 12px 16px 0;
            border-radius: 8px;
            padding: 12px 18px;
          }
        }

        @keyframes nmIn {
          from {
            opacity: 0;
            transform: translateY(-6px);
          }

          to {
            opacity: 1;
            transform: none;
          }
        }

        /* The footer used to be duplicated here for the subpages. It is now a
           single shared component: lib/legacy-document.ts lifts the <footer> out
           of legacy-pages/index.html -- together with the stylesheet inside it --
           and substitutes both into every page. That markup wraps the legal row
           in .fx-legal-inner, which this copy predated, so the old
           `.fx-legal nav` / `.fx-legal .fx-copy` grid-area rules were still
           matching through the new wrapper and stacking the legal links on top of
           the copyright. The shared footer defines the full .fx-* set on its own,
           so the duplicate is deleted rather than patched. */
/* ============================================================
   subpage shell additions (sub-hero patterns)
   ============================================================ */

/* light subpage hero: calm cream field, centered copy, rails visible */
.sub-hero {
  position: relative;
  padding: 170px 0 84px;
  text-align: center;
}
.sub-hero .eyebrow { justify-content: center; }
.sub-hero .h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 18px 0 0;
}
.sub-hero .lead {
  max-width: 56ch;
  margin: 20px auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}
.sub-hero .sub-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}
.sub-hero .sub-ctas .btn { border-radius: 8px; }

/* dark full-bleed subpage hero (band-art photograph, edges on outer rails) */
.sub-hero-dark {
  position: relative;
  max-width: none;
  width: min(var(--frame-max), calc(100% - 48px));
  margin: 0 auto;
  min-height: var(--hero-h, 720px);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  isolation: isolate;
}

/* Hero-local continuation of the homepage margin system. The page rails sit
   behind opaque hero artwork, so these lines redraw the same inner geometry
   over the image without changing the hero frame. */
.sub-hero-motif {
  --sh-rail-l: calc(var(--rail-il, max(48px, 50vw - 568px)) - var(--rail-o, 24px));
  --sh-rail-r: calc(var(--rail-ir, max(48px, 50vw - 568px)) - var(--rail-o, 24px));
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.sub-hero-motif i {
  position: absolute;
  display: block;
}
.sub-hero-motif .shm-v {
  top: 0;
  bottom: 0;
  width: 1px;
}
.sub-hero-motif .shm-vl {
  left: var(--sh-rail-l);
  background: rgba(255, 255, 255, .16);
}
.sub-hero-motif .shm-vr {
  right: var(--sh-rail-r);
  background: rgba(255, 255, 255, .12);
}
.sub-hero-motif .shm-h {
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .12);
  transition: none;
  animation: none;
}
.sub-hero-motif .shm-nt { top: var(--sh-nt, 0); }
.sub-hero-motif .shm-nb { top: var(--sh-nb, 66px); }
.sub-hero-motif .shm-c1 {
  top: var(--sh-c1, 154px);
  background: rgba(255, 255, 255, .10);
}
.sub-hero-motif .shm-c2 {
  top: var(--sh-c2, 470px);
  background: rgba(255, 255, 255, .10);
}
.sub-hero-motif .shm-note {
  top: var(--sh-note, 512px);
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .12);
  transition: none;
  animation: none;
}
.sub-hero-dark > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.sub-hero-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 8, 40, .42) 0%, rgba(4, 8, 40, .10) 45%, rgba(4, 8, 40, .38) 100%);
}
.sub-hero-dark .shd-inner,
.careers-hero .ch-inner {
  position: relative;
  z-index: 3;
}
/* Careers' inner geometry: the copy is inset off BOTH inner rails, not just the
   left one. The old right pad was a flat 24px off the hero's outer edge, which
   let a long lead run straight past the right inner line. */
.sub-hero-dark .shd-inner {
  width: 100%;
  box-sizing: border-box;
  padding: 170px calc(var(--rail-ir, 48px) - var(--rail-o, 24px) + 24px) 64px calc(var(--rail-il, 48px) - var(--rail-o, 24px) + 24px);
}
/* The same label the home hero uses above "Uplane runs your marketing." --
   Afical Neue at clamp(18px, 1.9vw, 26px)/400, -.01em, white at .96, sentence
   case. It was a mono uppercase stamp here, which is the stamp style reserved
   for data (§3), not a hero line. Values copied from `.hero .label`; no new
   style invented. */
.sub-hero-dark .label {
  display: block;
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 26px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-transform: none;
  color: rgba(255, 255, 255, .96);
  margin-bottom: 8px;
}
.sub-hero-dark h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 4.8vw, 68px);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: #fff;
  margin: 16px 0 0;
  max-width: 22ch;
  min-height: 2.1em;
}
.sub-hero-dark .lead {
  color: rgba(255, 255, 255, .88);
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 52ch;
  min-height: 4.8em;
  margin-top: 18px;
}
.sub-hero-dark .sub-ctas,
.careers-hero .sub-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

/* Keep every non-home hero CTA in the same action band as the Enterprise
   Software hero. The motif runtime keys its two horizontal rules to this row,
   so matching the row also keeps those rules consistent across subpages. */
@media (min-width: 901px) {
  .sub-hero-dark > .shd-inner > .sub-ctas,
  .careers-hero > .ch-inner > .sub-ctas {
    margin-top: 64px;
  }
}
.sub-hero-dark .sub-ctas .btn,
.careers-hero .sub-ctas .btn {
  min-height: 44px;
  gap: 12px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 8px;
  color: #081238;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 8px 24px rgba(0, 6, 38, .18);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
}
.sub-hero-dark .sub-ctas .btn::after,
.careers-hero .sub-ctas .btn::after {
  content: "→";
  display: inline-block;
  color: currentColor;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  transition: transform .3s var(--ease-micro);
}
.sub-hero-dark .sub-ctas .btn:hover,
.careers-hero .sub-ctas .btn:hover {
  color: #081238;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 12px 32px rgba(0, 6, 38, .24);
}
.sub-hero-dark .sub-ctas .btn:hover::after,
.careers-hero .sub-ctas .btn:hover::after {
  transform: translateX(3px);
}

/* ---- the second CTA in a hero is a text link, never a second button ----
   Two identical white pills side by side gave the pair no hierarchy: the
   secondary read as loud as the primary. This is the documented .btn-secondary
   (white label, no fill, no frame, arrow keeps its hover nudge); it needs a
   hero-scoped rule only because `.sub-hero-dark .sub-ctas .btn` above is a
   three-class selector and out-specifies the single-class component.
   Padding, min-height and the 44px tap target are inherited from the rule
   above untouched, so the label sits on exactly the same optical centre line
   as the primary and the row stays vertically aligned. */
.sub-hero-dark .sub-ctas .btn-secondary,
.careers-hero .sub-ctas .btn-secondary,
.sub-hero .sub-ctas .btn-secondary {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, .82);
  font-weight: 500;
}

.sub-hero-dark .sub-ctas .btn-secondary:hover,
.careers-hero .sub-ctas .btn-secondary:hover,
.sub-hero .sub-ctas .btn-secondary:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: #fff;
  transform: none;
}

.sub-hero-dark .sub-ctas .btn-secondary:active,
.careers-hero .sub-ctas .btn-secondary:active,
.sub-hero .sub-ctas .btn-secondary:active {
  transform: scale(.99);
}

.sub-hero-dark .sub-ctas .btn-secondary:focus-visible,
.careers-hero .sub-ctas .btn-secondary:focus-visible,
.sub-hero .sub-ctas .btn-secondary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  color: #fff;
}

/* on a light hero the same secondary is ink, not white */
.sub-hero .sub-ctas .btn-secondary {
  color: rgba(10, 10, 10, .66);
}

.sub-hero .sub-ctas .btn-secondary:hover {
  color: var(--ink);
}

.sub-hero .sub-ctas .btn-secondary:focus-visible {
  outline-color: var(--blue);
  color: var(--ink);
}

/* generic page section rhythm for subpages */
.sub-section { padding: var(--section-pad) 0; }
@media (max-width: 760px) { .sub-hero { padding-top: 140px; } }

/* small white CTA button used on stages (bottom-right) */
.stage-cta {
  position: absolute;
  right: 20px;
  bottom: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow: 0 2px 10px rgba(8, 12, 40, .18);
  transition: transform .4s var(--ease-micro), box-shadow .4s var(--ease-micro);
}
.stage-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(8, 12, 40, .22); }

/* squared band-art stage/figure for subpages (always outsizes its card) */
.sub-stage {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5%, 56px);
  min-height: 480px;
  overflow-anchor: none;
}
.sub-stage > img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.sub-stage .alog { width: min(86%, 520px); }

/* mono stamp bottom-left of a stage */
.stage-stamp {
  position: absolute;
  left: 20px;
  bottom: 16px;
  z-index: 3;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  /* no uppercase: stamps sit on artwork, and caps are reserved for eyebrows */
  color: rgba(255, 255, 255, .85);
  white-space: nowrap;
}

/* The hero stamp is a true margin note: it occupies the outer-to-inner rail
   cell. Its top rule starts at the inner rail, so no hairline crosses copy. */
.sub-hero-dark > .stage-stamp,
.careers-hero > .stage-stamp {
  left: 0;
  bottom: 0;
  width: calc(var(--rail-il, max(48px, 50vw - 568px)) - var(--rail-o, 24px));
  min-height: 48px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
  line-height: 1.35;
  font-size: clamp(8px, .68vw, 10px);
}

@media (max-width: 900px) {
  .sub-hero-motif { display: none; }
  /* Home's tablet-portrait hero step (index.html, 641-900px) is
     height:min(860px,100svh) over a min-height:800px floor. Expressed as a
     single min-height here, since these heroes size to their content. */
  .sub-hero-dark {
    min-height: max(800px, min(860px, 100svh));
  }
  .sub-hero-dark .shd-inner {
    padding-top: 140px;
    padding-bottom: 74px;
  }
  .sub-hero-dark h1,
  .sub-hero-dark .lead {
    min-height: 0;
  }
  .sub-hero-dark h1 {
    max-width: 15ch;
  }
  .sub-hero-dark > .stage-stamp,
  .careers-hero > .stage-stamp {
    left: 16px;
    bottom: 14px;
    width: auto;
    min-height: 0;
    padding: 0;
    display: block;
    text-align: left;
    white-space: nowrap;
    font-size: 9px;
  }
}

/* Home's phone hero step (index.html, <=640px): 740px. */
@media (max-width: 640px) {
  .sub-hero-dark {
    min-height: 740px;
  }
}

/* On a phone the two hero actions no longer fit side by side inside the text
   column, and the row is nowrap inside an overflow:hidden hero, so the second
   button was clipped rather than pushed. Wrapping keeps both reachable; the row
   is unchanged at every width where they still fit. */
@media (max-width: 480px) {
  .sub-hero-dark .sub-ctas,
  .careers-hero .sub-ctas {
    flex-wrap: wrap;
  }
}
.stage-stamp.dark { color: rgba(10, 12, 32, .72); }
/* font-family: inherit, because site.css sets a bare `span` rule and a nested
   span inside the stamp loses the stamp's face to it -- the separator was
   setting in a different face from the label around it. */
.stage-stamp .sep { opacity: .5; margin: 0 6px; font-family: inherit; }

/* alternating feature rows (figure + copy) */
.feat-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
}
.feat-row.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.feat-row.flip .sub-stage { order: 2; }
.feat-row + .feat-row { margin-top: clamp(64px, 8vw, 120px); }
.feat-row h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -.012em;
  line-height: 1.12;
  color: var(--ink);
}
.feat-row p { margin-top: 14px; font-size: 15.5px; line-height: 1.65; color: var(--muted); max-width: 52ch; }
@media (max-width: 880px) {
  .feat-row, .feat-row.flip { grid-template-columns: 1fr; }
  .feat-row.flip .sub-stage { order: 0; }
  .sub-stage { min-height: 0; padding: 32px 16px; }
}

/* stat chips (count-up) */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 760px) { .stat-row { grid-template-columns: 1fr; } }
.stat-chip {
  background: #fff;
  border: 1px solid rgba(10, 16, 60, .10);
  border-radius: 8px;
  padding: 26px 28px 24px;
}
.stat-chip .num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--ink);
}
/* The count-up value is a <span>, so the global "body, p, li, span" font rule
   matches it directly and beats the display face inherited from .num -- the
   digits rendered in Lab Grotesque while the container asked for Afical Neue. */
.stat-chip .num .cnt { font-family: inherit; font-weight: inherit; letter-spacing: inherit; }
.stat-chip .lbl { margin-top: 10px; font-size: 13.5px; color: var(--muted); }

/* white info cards with band-art visual header */
.vis-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 880px) { .vis-cards { grid-template-columns: 1fr; } }
.vis-card {
  background: #fff;
  border: 1px solid rgba(10, 16, 60, .06);
  border-radius: 0;
  overflow: hidden;
  transition: transform .5s var(--ease-out-quint), box-shadow .5s var(--ease-out-quint), border-color .5s var(--ease-out-quint);
}
/* The transition above was already wired for this and the hover then cancelled
   it, so a pointer over these cards got no acknowledgement at all. One
   restrained gesture is the whole thing: a 4px lift, a single shadow step and
   the hairline picking up. The artwork settles a fraction closer at the same
   time -- .vis-card already clips -- so the card reads as one object moving
   rather than a frame sliding across a static picture. */
.vis-card:hover {
  transform: translateY(-4px);
  border-color: rgba(10, 16, 60, .12);
  box-shadow:
    0 2px 4px rgba(10, 16, 60, .04),
    0 16px 34px rgba(10, 16, 60, .09);
}

.vis-card .vc-visual { transition: transform .6s var(--ease-out-quint); }
.vis-card:hover .vc-visual { transform: scale(1.015); }

@media (prefers-reduced-motion: reduce) {
  .vis-card,
  .vis-card .vc-visual { transition: none; }
  .vis-card:hover,
  .vis-card:hover .vc-visual { transform: none; }
}
.vis-card .vc-visual {
  position: relative;
  height: 190px;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.vis-card .vc-visual > img.bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
}
.vis-card .vc-mock {
  background: #F6F4F3;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(6, 10, 40, .10), 0 18px 44px rgba(6, 10, 40, .28);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: #2F2C2B;
}
.vis-card .vc-mock .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FCFAF9;
  border: 1px solid rgba(47, 44, 43, .08);
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 11px;
  color: #4A4744;
  white-space: nowrap;
}
.vis-card .vc-body { padding: 22px 26px 30px; }
.vis-card .vc-body h3 { font-family: var(--sans); font-weight: 500; font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.vis-card .vc-body p { font-size: 14px; line-height: 1.6; color: var(--muted); }

/* One white header treatment and one logo size across every page. */
.nav-logo .nav-mark img.logo-w { display: block; }
.nav-logo .nav-mark img.logo-k { display: none; }
.nav--ink .nav-logo { color: #fff; }
.nav--ink .nav-links a { color: rgba(255, 255, 255, .92); }
.nav--ink .nav-links a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.nav--ink .nav-item > a .caret { color: currentColor; }
.nav--ink .nav-burger { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .35); }
.nav--ink .nav-burger i { background: #fff; }

/* ---- .nav--onlight : the header over a LIGHT page ----
   The base nav is white because index.html opens on a dark photographic hero
   (§6.2). Every article opens on white, so at the top of the page the wordmark,
   the five links, the caret and the burger were all white on white -- measured
   `rgba(255,255,255,.92)` on a `#FFFFFF` surface, at scrollY 0 AND scrolled,
   because there is no opaque scrolled pill on subpages to rescue them. The
   header was, in practice, not there.

   DESIGN-BOOK §13 already specifies this variant ("ink links + black wordmark
   `assets/uplane_logo_black.webp` for light heroes; dark heroes keep the white
   nav"). It was never built: the class that exists, `.nav--ink`, is the
   white-on-dark case despite the name, and nothing uses it. Colours come
   straight from the ladder -- links are --fs-body/500 in --ink, hover takes the
   --cream surface the home page gives an active tab, and the CTA becomes the
   primary blue button (§6.4) instead of the white-on-photo one.

   Apply it to any page whose first section is light. Dark-hero pages
   (managed-growth, enterprise-software) must NOT take it. */
.nav--onlight .nav-logo { color: var(--ink); }

/* the wordmark ships as a white PNG, so it is inked rather than swapped: one
   asset, and it cannot fall out of sync with the white version */
.nav--onlight .nav-logo .logo-w {
  filter: brightness(0) saturate(100%);
}

.nav--onlight .nav-links a { color: var(--ink); }

.nav--onlight .nav-links a:hover {
  background: var(--cream);
  color: var(--ink);
}

.nav--onlight .nav-item > a .caret { color: currentColor; }

.nav--onlight .nav-cta .btn-blue {
  background: var(--blue);
  border: 1px solid var(--blue);
  color: #fff;
}

.nav--onlight .nav-cta .btn-blue:hover {
  background: var(--blue-700);
  border-color: var(--blue-700);
  color: #fff;
}

.nav--onlight .nav-burger {
  background: var(--card);
  border-color: var(--line);
}

.nav--onlight .nav-burger i { background: var(--ink); }

/* mid widths: compress the nav row so links + CTA never overflow */
@media (max-width: 1120px) and (min-width: 721px) {
  .nav-links a { font-size: 14px; padding: 8px 9px; }
  .nav-cta .btn { padding: 8px 13px !important; font-size: 13px; }
}
/* Enterprise overview: clear, low-noise routes into each engine page. */
.feat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.feat-link span {
  transition: transform .4s var(--ease-micro);
}

.feat-link:hover span,
.feat-link:focus-visible span {
  transform: translateX(4px);
}

/* dot-grid visual: grid fades toward the text, content never fades */
.vc-visual.dotfade { position: relative; }
.vc-visual.dotfade::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(10, 10, 10, .10) 1px, transparent 1.2px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 100%);
  pointer-events: none;
}
.vc-visual.dotfade img { position: relative; z-index: 1; }


/* boxed containers attach to the inner hairlines; text keeps its 24px inset */
.stat-row,
.vis-cards,
.mg-grid,
.mg-table,
/* #compare's two cards sat 24px inside both inner rails while every other boxed
   container on the page reached them -- the same treatment .mg-grid and
   .mg-table already get. The middle gap is untouched: this moves only the
   container's outer edges, so each card gains 24px and clamp(14px, 1.6vw, 22px)
   still separates them. */
.mg-compare-grid,
.why-grid,
.edge-grid,
.perk-row,
.job-list,
.open-apply,
.res-strip,
.res-feature,
.post-grid,
.wb-grid,
.wb-register,
.founders,
.inv-grid,
.inv-angels,
.cyc-grid,
.impl-grid,
.sit,
.wf-compare {
  margin-inline: -24px;
}

/* zero-height probe carrying the exact frame-width expression; assets/site.js
   measures it to publish the outer-rail ground truth (a custom property reads
   back unresolved, so the clamp() cannot be parsed) */
.frame-probe {
  display: block;
  height: 0;
  width: min(var(--frame-max), calc(100% - 48px));
  margin: 0 auto;
  pointer-events: none;
}


/* ==========================================================================
   PHONE / TABLET: the home page's top-of-page geometry, applied to every
   other page.

   Measured at 390px before this block, home against every subpage:

                       home   subpages
     hero box          0..390   24..366   (subpage hero inset 24px a side)
     wordmark left       24       72
     h1 left             24       72
     first copy below    41       72
     vertical rails    drawn     none

   Three separate mechanisms produced that 32-48px step, and the home page
   already solved all three privately in index.html. They are ported here
   rather than reinvented; the numbers are the home page's own.

   1. THE HEADER. The shared pill takes the desktop rail inset, which is
      floored at 48px, on top of the pill's own 24px frame. index.html's own
      comment names the result exactly: "the wordmark painted 72px in against
      a headline at 40px: a visible 32px step between the two topmost things
      on the page." The pill goes full width and sits on the 24px frame.

   2. THE HERO. `width: min(--frame-max, 100% - 48px)` costs a 390px screen
      48px of its only full-height photograph and leaves a white sliver down
      each side, and then `.shd-inner` adds the rail inset again. Full bleed,
      with the copy carrying the 24px frame itself, which is what puts the
      headline on the same line as the wordmark above it.

   3. THE MARGIN LINES. site.css hides `.page-rails` below 1100px. The home
      page compensates with `.wrap.section-inner-lines`, whose left/right
      borders become the phone's rails; subpages never used that class, so
      from 1100px down they have no vertical lines at all. Drawn here as a
      pair of section pseudo-elements instead, so no box model changes and
      the lines run continuously through a section rather than stopping at
      each block of copy.

   Copy keeps the home page's 40px text rail: the 24px frame plus the 16px
   inset the rails hold their own copy at.
   ========================================================================== */

@media (max-width: 1100px) {
  /* the rails the hidden .page-rails used to draw, at the same 24px frame
     every boxed element on the page already sits on */
  .sub-section,
  .article-head {
    position: relative;
  }

  .sub-section::before,
  .sub-section::after,
  .article-head::before,
  .article-head::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    width: 1px;
    background: var(--line);
    pointer-events: none;
  }

  .sub-section::before,
  .article-head::before { left: 24px; }

  .sub-section::after,
  .article-head::after { right: 24px; }

  /* Copy onto the 40px text rail. `:not([style])` is the whole of the
     distinction that matters: every full-bleed wrap on these pages carries
     `style="max-width:none; width:min(var(--frame-max), calc(100% - 48px));
     padding:0"` inline and already sits on the frame, and the rail probe
     carries its own inline box. The plain content wraps carry no style
     attribute at all. */
  .wrap:not([style]) {
    max-width: none;
    padding-left: 40px;
    padding-right: 40px;
  }

  /* The boxed containers outdent to reach the inner hairline, and the amount
     is the wrap's padding minus the line's own inset. Against the desktop
     72px wrap that is -24px, which is the shared rule below. Against the 40px
     wrap above it has to be -16px, or every one of them overshoots the 24px
     frame by 8px and hangs outside the rails the block draws. */
  .stat-row,
  .vis-cards,
  .mg-grid,
  .mg-table,
  .mg-compare-grid,
  .why-grid,
  .edge-grid,
  .perk-row,
  .job-list,
  .open-apply,
  .res-strip,
  .res-feature,
  .post-grid,
  .wb-grid,
  .wb-register,
  .founders,
  .inv-grid,
  .inv-angels,
  .cyc-grid,
  .impl-grid,
  .sit,
  .wf-compare {
    margin-inline: -16px;
  }
}

/* The phone-only variant of a hero lead. Both surfaces that use it (enterprise
   software, managed growth) keep the long sentence in the markup and show this
   one instead below 640px, so nothing is duplicated in two places and no width
   above the query is affected. Declared here, outside any query, because a rule
   that only exists inside the phone block leaves the short line visible on
   desktop -- which is exactly what happened. */
.lead--phone { display: none; }


/* PHONE: the margin lines go, and the width they were holding comes back.
   Reviewed as "kill the margin lines left and right, they take too much space".
   From 1100px down a section carried 40px of chrome on each side of its copy --
   a 24px frame, the hairline drawn on it, and a 16px inset -- which is 80px of a
   390px screen, a fifth of the width, spent on two 1px lines. The lines are a
   desktop device: they exist to tie the boxed elements to a shared vertical, and
   on a phone every one of those boxes is full-bleed anyway.
   Copy keeps a 16px inset (never flush to the glass), and the boxed containers
   keep their -16px outdent, which now takes them to the screen edge rather than
   to a line 24px in. */
@media (max-width: 640px) {
  .sub-section::before,
  .sub-section::after,
  .article-head::before,
  .article-head::after {
    display: none;
  }

  /* 24px, not 16: the boxed containers outdent to reach the rail, and several
     pages hard-code that outdent at -24px (.leadership-shell, .ais-cta,
     .om-grid, .careers-office--selected, .cta-box). Matching the wrap's inset to
     it lands every one of them on the screen edge; at 16px they ran 8px past the
     viewport and gave three pages a horizontal scroll. */
  .wrap:not([style]) {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* The shared list outdents by the wrap's inset, so it follows it out.
     Two blocks are NOT in it below 640, both for the same reason and both on
     review. .post-grid: "can you leave left and right some space also on
     mobile?" -- the article cards went two-up on a phone in an earlier round,
     and two cards plus a gap running to both edges of the glass left the
     covers with no margin at all, which is a different thing from a single
     full-bleed card row. .edge-grid (why-us only): "make the space for the
     margins so that the boxes touch in the middle but they don't touch on the
     edge" -- it is eight cells sharing collapsed hairlines, so full-bleed put
     the block's own left and right rules on the glass edge where they read as
     cut off rather than as a frame. The cells still touch each other; only the
     group's outer edges come in. Both stay on the wrap's 24px rail here; above
     640 they outdent with the rest. */
  .stat-row,
  .vis-cards,
  .mg-grid,
  .mg-table,
  .mg-compare-grid,
  .why-grid,
  .perk-row,
  .job-list,
  .open-apply,
  .res-strip,
  .res-feature,
  .wb-grid,
  .wb-register,
  .founders,
  .inv-grid,
  .inv-angels,
  .cyc-grid,
  .impl-grid,
  .sit,
  .wf-compare {
    margin-inline: -24px;
  }

  /* Dropping .edge-grid from the list above is not enough on its own: the
     <=1100 list still outdents it by -16, which on a 24px wrap leaves it 8px
     off the glass -- a margin that reads as a mistake rather than as a rail.
     It comes all the way in, onto the same 24px every heading on the page
     opens on. */
  .edge-grid {
    margin-inline: 0;
  }

  /* and it has to say so, not just leave the list: the 1100px block above
     outdents the same set by -16px, which is where the 8px of glass that was
     left came from. */
  .post-grid {
    margin-inline: 0;
  }
}

@media (max-width: 640px) {
  /* 1. the header leaves the rail and sits on the page frame */
  .nav-pill.site-header__pill,
  .site-width-shell .nav-pill.site-header__pill,
  .brand-page .nav-pill.site-header__pill {
    width: 100%;
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* 2. the hero goes full bleed and carries the frame in its own copy inset.
     `body` is on the careers selectors only, and only to outrank that page's
     own `<style>` block: it re-declares .careers-hero and .careers-hero
     .ch-inner inline, and an inline block is parsed after the linked sheet, so
     an equal-specificity rule here loses. Every other page takes these from
     subpage.css unqualified. */
  .sub-hero-dark,
  body .careers-hero {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .sub-hero-dark .shd-inner,
  body .careers-hero .ch-inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* the hero is full bleed now, so its own stamp sits on the frame too */
  .sub-hero-dark > .stage-stamp,
  .careers-hero > .stage-stamp {
    left: 24px;
  }
}


/* ==========================================================================
   PHONE: the roles that were never on the ladder.

   Stepping :root's tokens down covers every role that reads a token, but a
   census of the eight pages at 390px showed ~60% of the remaining text still
   set from a literal px value in a component rule, so the ladder never reached
   it. These are those rules, ranked by how much text each actually governs on
   a phone, pointed at the token their role already implies. Nothing invents a
   size: each one adopts the ladder value for what it is (body, lead, h3,
   quote), which is what DESIGN-BOOK 17 asks for and what the desktop rules
   should have used in the first place.

   Every selector carries a leading `body`. That is not decoration: six of
   these pages re-declare the same component in their own inline <style>,
   which is parsed after this sheet, so an equal-specificity rule here lost
   silently. `body` makes it (0,n,1) against their (0,n,0).

   Mobile only. Above 640px every one of these keeps its own literal.
   ========================================================================== */
@media (max-width: 640px) {
  /* running copy */
  body .sit-copy p,
  body .ais-copy p,
  body .mg-cell > p,
  body #security .sec-body p,
  body .inv-angels-copy p,
  body .res-feature p,
  body #resources .path p,
  body .mg-compare-card > .mg-compare-copy > p,
  body .story-grid .sg-copy p,
  body .pc-desc,
  body .inv-lead {
    font-size: var(--fs-body);
  }

  /* secondary copy: notes, captions, perks */
  body .perk p,
  body .leadership-note,
  body .res-strip p,
  body .mg-bullets li,
  body .vis-card .vc-body p {
    font-size: var(--fs-meta);
  }

  /* section and hero leads */
  body .lead,
  body .sub-hero-dark .lead,
  body .careers-hero .lead,
  body .sub-section .section-head .lead {
    font-size: var(--fs-lead);
  }

  /* card and row headings */
  body .sit-copy h3,
  body .ais-copy h3,
  body .mg-cell h3,
  body .post-card h3,
  body .job-row h3,
  body .vis-card .vc-body h3,
  body .om-card h3 {
    font-size: var(--fs-h3);
  }

  /* pull quotes */
  body .cta-closing .cta-quote,
  body .om-card .om-quote,
  body #results .tstmnl-quote,
  body .tstmnl-quote {
    font-size: var(--fs-quote);
  }

  /* THE HEROES READ AT THE HOME PAGE'S SCALE.
     Reviewed on the managed growth hero, three times over -- the label, the
     headline and the lead -- and then as "this text on all the hero sections
     across the page, apply the text sizes from the homepage".

     The home page's phone pass takes both display roles 20% over this ladder
     and says so in place: `#heroScroll .hero .label` is 20.4px (--fs-h3 17 +
     20%) and `#heroScroll .hero-inner h1` is 34.8px (--fs-display 29 + 20%).
     Every subpage hero was reading the ladder straight -- 18px and 29px -- so
     the site's front door opened at one size and its six inside pages at
     another.

     The same two numbers here, with the ratios the home page's own note says
     carry its scaling: 1.55 and -.01em on the label, 1.04 and -.02em on the
     headline. The lead needs no size change -- every one of these already sets
     --fs-lead, 14px, which is what the home page's body leads are -- so only
     its line-height comes into line, 1.55 against 1.6.

     This replaces the --fs-display floor note below, which said the same thing
     one step less far: the h1 was already being pulled off the desktop 40px
     floor, it just landed on the ladder's 29 rather than on the hero's 34.8. */
  body .sub-hero-dark .label,
  body .careers-hero .label,
  body .sub-hero .label {
    font-size: 20.4px;
    line-height: 1.55;
    letter-spacing: -.01em;
  }

  body .sub-hero-dark h1,
  body .careers-hero h1,
  body .sub-hero .h1 {
    font-size: 34.8px;
    line-height: 1.04;
    letter-spacing: -.02em;
  }

  body .sub-hero-dark .lead,
  body .careers-hero .lead,
  body .sub-hero .lead {
    line-height: 1.55;
  }

  /* controls and the footer dedication */
  body .btn,
  body .fx-footer .fx-grid .fx-dedication,
  body .fx-footer .fx-dedication {
    font-size: var(--fs-cta);
  }

  /* ---- second sweep: the display roles and the process card ----------------
     Same principle, the rules the first pass did not reach. `.h2` and `.h3` in
     site.css carry their own clamps whose FLOORS (34px, 22px) are what a phone
     lands on, so they never saw the ladder at all; the process card sets its
     step title, description and index from literals. */
  body .h2 {
    font-size: var(--fs-h2);
  }

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

  body .pc-title,
  body .pc-title .pc-w,
  body .pc-title .pc-c {
    font-size: var(--fs-h3);
  }

  body .pc-index,
  body .pc-card.on .pc-index {
    font-size: var(--fs-label);
  }

  /* `.om-card .om-quote` and `.cta-closing .cta-quote` are (0,2,0), so the
     override needs the same class count plus the element to outrank them. */
  body .om-card .om-quote,
  body .om-quote,
  body .cta-closing .cta-quote,
  body .cta-quote {
    font-size: var(--fs-quote);
  }

  body .cyc-ttl {
    font-size: var(--fs-label);
  }
}

/* ==========================================================================
   PHONE PASS, 2026-08-31. One block, because every rule in it is the same
   instruction -- "smaller, thinner, so more of the page fits on a screen" --
   and they were reviewed together. Selector by selector:

   .tm-track .team-shot   careers, "make smaller so we can see more images"
   .job-row               careers roles and the blogs webinars, "much thinner",
                          "easier in one line"
   .careers-office        careers, "smaller, thinner"
   .ts-alpecin            enterprise, "for mobile, don't show alpecin here"
   .leadership-copy       about, "remove"

   Every selector carries `body`. Not decoration: each page's own <style> block
   is parsed AFTER this sheet, so a bare .careers-office here loses to the
   page's .careers-office at equal specificity. The prefix wins on specificity
   instead of order.

   Nothing here exists above 640px.
   ========================================================================== */
@media (max-width: 640px) {
  /* Two 218px photographs filled the row and read as one image at a time.
     133px shows nearly three, which is what makes it a strip of life at the
     company rather than a slideshow. */
  body .tm-track .team-shot {
    width: clamp(120px, 34vw, 170px);
    border-radius: 12px;
  }

  /* A row was 133px tall: subpage.css lifts every row heading to --fs-h3 on a
     phone, and at 20px over a 181px column a webinar title took three lines
     with the meta under it. Back to the sans body size, and the padding and the
     arrow come in with it, so a row is one or two lines and the list reads as a
     list. Both surfaces are named because #webinars' own rules carry an id. */
  body .job-row h3,
  body #webinars .job-row h3 {
    font-size: 15px;
    line-height: 1.3;
  }

  body .job-row,
  body #webinars .job-row {
    gap: 12px;
    padding: 13px 16px;
    grid-template-columns: minmax(0, 1fr) 28px;
  }

  body .job-row .job-meta,
  body #webinars .job-row .job-meta {
    margin-top: 3px;
    font-size: 10.5px;
    letter-spacing: .06em;
  }

  body .job-row .job-go,
  body #webinars .job-row .job-go {
    width: 28px;
    height: 28px;
  }

  body .job-row .job-go svg,
  body #webinars .job-row .job-go svg {
    width: 16px;
    height: 16px;
  }

  /* 380px of photograph for one three-line line of copy, with 72px of padding
     under it. The image still reads at 240. */
  body .careers-office {
    min-height: 240px;
    padding: 20px 20px 20px 24px;
  }

  body .careers-office--selected {
    padding-bottom: 28px;
  }

  body .careers-office p {
    font-size: clamp(17px, 4.6vw, 21px);
  }

  /* the strip carries eight marks on a phone and this one is the widest at the
     smallest cap height, so it is the one that goes */
  .ts-alpecin {
    display: none !important;
  }

  /* 656px of restated positioning above the founder cards, which say it
     themselves. Reviewed as "remove". */
  body .leadership-copy {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   PHONE: the dark heroes stop reserving a screen and a half.
   Reviewed as "adjust the layout on these screens" (blogs) and "reorder this
   section" (enterprise). Both run the same component. At 390px it held
   min-height max(800px, min(860px, 100svh)) with 140px of top padding for
   ~450px of content, so a third of the first screen was empty gradient below
   the last button, and the secondary CTA sat centred under a left-aligned
   column -- the one line on the screen that was not on the text rail.
   Sized to its content with a 520px floor, the copy 104px down (clear of the
   65px docked bar plus air), and the action band left-aligned like everything
   above it.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body .sub-hero-dark {
    /* 440, not 520: at 520 the shorter heroes (blogs, why-us, about) still had
       ~190px of empty gradient under their last button. The enterprise hero's
       own content is taller than the floor, so it sizes itself. */
    min-height: max(440px, 56svh);
  }

  body .sub-hero-dark .shd-inner {
    padding-top: 104px;
    padding-bottom: 40px;
  }

  /* the action band, on the rail: `text-align: center` on the wrapper was
     centring the secondary link's whole line box */
  /* Primary and secondary sit NEXT to each other, which is what the review
     asked for after seeing them stacked: one action band, not two rows. The
     button label comes down to 13px and the padding with it, which is what
     makes the pair fit a 342px measure; a label too long for what is left wraps
     to the next line on its own rather than being centred there, because the
     band is still left-aligned on the text rail. */
  body .sub-hero-dark .sub-ctas,
  body .careers-hero .sub-ctas,
  body .ais-actions,
  body .ais-cta .ais-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-align: left;
  }

  body .sub-hero-dark .sub-ctas .btn,
  body .careers-hero .sub-ctas .btn,
  body .ais-actions .btn {
    min-height: 40px;
    padding: 9px 14px;
    font-size: 13px;
  }

  body .sub-hero-dark .sub-ctas .btn-secondary,
  body .careers-hero .sub-ctas .btn-secondary {
    padding-left: 0;
    padding-right: 0;
  }

  /* the badge row follows its buttons rather than floating under them */
  body .hero-action-row {
    gap: 14px;
    margin-top: 22px;
  }
}


/* ==========================================================================
   PHONE: the footer masthead, taken from the home page.
   Reviewed on why-us as "please take the footer from the home page" -- the
   home page got this last round and every other page kept the old stack:
   tagline, address, clock and dedication all down the left in one full-width
   column, ~164px before the first link column, with the right half empty.
   Same rules, same 14px gap, so the address lands on the exact line Product
   and Social start on.
   ========================================================================== */
@media (max-width: 640px) {
  /* ---- the brand block, as two columns -----------------------------
     It was one full-width stack: tagline, address, clock and the
     dedication all down the left, running ~164px before the first link
     column started, with the whole right half of the row empty. The
     cell splits instead -- "Time to Create." and the dedication on the
     left, the address and its clock on the right, on the same rail the
     Product column below them sits on -- so the row is a footer masthead
     rather than a list with a hole beside it. */
  .fx-footer .fx-grid > div:first-child {
    /* it sat in column 1 of the outer 2-up grid, a 152px cell, which is
       why the tagline wrapped and the address had 72px to live in. It
       takes the full row first, then splits. */
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* the link grid's own gap, so the masthead's second column starts
       on exactly the line Product and Social start on rather than
       8px off it */
    column-gap: 14px;
    align-items: start;
  }

  .fx-footer .fx-grid > div:first-child > .fx-tagline {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  .fx-footer .fx-location {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* the dedication leaves .fx-location's flow and closes the left
     column under the tagline, which is where the review put it.

     Centred in the space it closes: reviewed as "make sure that this is
     aligned in the middle between Time to Create and Company". It sat 50px
     under the tagline and 24 above the Company heading, so a line that reads
     as a sign-off on the tagline was in fact nearer the list below it. The
     grid rows underneath are fixed, so moving it up 13px splits the run
     evenly -- measured 37 and 37 on careers, enterprise, about and
     resources. */
  body .fx-footer .fx-grid .fx-location .fx-dedication {
    grid-column: 1;
    grid-row: 2;
    /* Four classes deep on purpose: the home page's own footer block is
       hoisted into every page's head ahead of this sheet and carries
       `.fx-footer .fx-grid .fx-dedication { margin-top: 18px }`, which is the
       value that was actually painting here. */
    margin-top: 3px;
  }

  .fx-footer .fx-grid > div:first-child > .fx-location {
    display: contents;
  }

  .fx-footer .fx-location address {
    grid-column: 2;
    grid-row: 1;
  }

  .fx-footer .fx-location .fx-location-time {
    grid-column: 2;
    grid-row: 2;
    margin-top: 8px;
    align-self: start;
  }
}


/* ==========================================================================
   PHONE: the closing band goes full bleed, and the resource strip centres.
   ========================================================================== */
@media (max-width: 640px) {
  /* Reviewed as "scrap the margin distances left and right, apply to all
     sections like this across the website". The band sits in a wrap whose
     inline width is `min(--frame-max, 100% - 48px)`, so it was inset 24px a
     side by construction -- a photographic panel held off the glass by a
     margin that only exists to line desktop text up with a rail. It takes the
     screen. The inset moves inward as padding, so the copy keeps its distance
     from the edge while the artwork does not. */
  .closing {
    margin-inline: -24px;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Reviewed as "center align": the strip is a full-bleed white card holding a
     cover image and a block of copy, and the copy was ragged left inside a
     centred card. */
  .res-strip {
    justify-items: center;
    text-align: center;
  }

  .res-strip p,
  .res-strip .lead {
    margin-left: auto;
    margin-right: auto;
  }
}

/* The closing capture row is one line at every width, including a phone.
   Reviewed as "I don't want to see this layout ever again, please put it into
   one line also for mobile" and again as "fix the email field so that it is in
   one line, as in the other segments".

   The stacked version this replaces existed because the row was built from two
   fixed widths -- a 140px field beside a 123px button -- which needs 292px and
   does not fit a 320px screen, so it broke into a grid below 400px. Fixed
   widths are the actual bug: the field now takes the remaining space instead of
   asking for a fixed amount, `min-width: 0` lets it shrink past its intrinsic
   size, and the button keeps its own width and stops wrapping. Measured at
   320px the field still gets 130px, which holds a placeholder. */
@media (max-width: 640px) {
  .closing .capture {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: none;
    gap: 6px;
    padding-left: 14px;
  }

  .closing .capture input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding-left: 2px;
    padding-right: 2px;
  }

  .closing .capture .btn,
  .closing .capture button {
    flex: none;
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
    white-space: nowrap;
  }
}