/* Shared homepage header geometry. Full-width pages resolve against
           the viewport; bounded compositions resolve against their shell.
           The +24px is the same text inset the hero copy uses off the inner
           rail, so the wordmark starts on the hero's left edge. */
        .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;
        }

        .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(--mono);
            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;
          }
        }

        .fx-footer {
          background: transparent;
          padding: 24px 0 36px;
        }

        .fx-footer .fx-hero {
          position: relative;
          border-radius: 0;
          overflow: hidden;
          min-height: clamp(340px, 42vw, 520px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: clamp(32px, 4vw, 56px);
          /* headline and link sit on the inner margin line */
          padding-left: calc(var(--rail-il, 188px) - var(--rail-o, 24px) + 24px);
        }

        .fx-footer .fx-hero img {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center 20%;
        }

        .fx-footer .fx-hero::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg, rgba(3, 8, 34, .3) 0%, rgba(3, 8, 34, .05) 55%, rgba(3, 8, 34, .25) 100%);
        }

        .fx-footer .fx-hero>* {
          position: relative;
          z-index: 1;
        }

        /* §17.1 names the footer h2 as --fs-h2 explicitly ("was 48px").
           index.html took the token; this copy kept the literal (§13). */
        .fx-footer .fx-hero h2 {
          font-family: var(--serif);
          font-weight: 500;
          font-size: var(--fs-h2);
          letter-spacing: -.015em;
          color: #fff;
          white-space: nowrap;
        }

        /* Closing conversion action: a real button, not an underlined text
           link. Mirrors index.html. */
        .fx-footer .fx-talk {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          width: max-content;
          padding: 13px 22px;
          border-radius: 8px;
          background: #fff;
          font-family: var(--sans);
          font-weight: 500;
          /* index.html: var(--fs-cta). This copy ramped to 17px (§13) */
          font-size: var(--fs-cta);
          color: var(--ink);
          text-decoration: none;
          box-shadow: 0 10px 30px rgba(4, 10, 30, .28);
          transition:
            transform .4s var(--ease-micro),
            box-shadow .4s var(--ease-micro);
        }

        .fx-footer .fx-talk:hover {
          transform: translateY(-1px);
          box-shadow: 0 14px 36px rgba(4, 10, 30, .34);
        }

        .fx-footer .fx-talk:active {
          transform: translateY(0) scale(.99);
        }

        .fx-footer .fx-talk:focus-visible {
          outline: 2px solid #fff;
          outline-offset: 3px;
        }

        .fx-footer .fx-grid {
          display: grid;
          grid-template-columns: 1.4fr repeat(4, 1fr);
          gap: clamp(24px, 3vw, 48px);
          padding: clamp(40px, 5vw, 72px) 0 clamp(36px, 4vw, 56px);
          /* Balance the full grid between the two inner content rails. */
          margin-left: calc(var(--rail-il, 188px) - var(--rail-o, 24px) + 24px);
          margin-right: calc(var(--rail-ir, 188px) - var(--rail-o, 24px) + 24px);
        }

        /* Keep the artwork's established height while extending its left edge to the inner rail. */
        .fx-footer .fx-art-shell {
          position: relative;
          width: min(340px, 100%);
          aspect-ratio: 400 / 173;
          margin-top: 24px;
        }

        .fx-footer .fx-art {
          position: absolute;
          top: 0;
          right: 0;
          width: calc(100% + 24px) !important;
          height: 100% !important;
          max-width: none !important;
          object-fit: cover;
        }

        @media (max-width: 1100px) {
          .fx-footer .fx-grid {
            margin-left: 0;
            margin-right: 0;
          }

          .fx-footer .fx-art-shell {
            width: min(320px, 70%);
          }

          .fx-footer .fx-art {
            right: auto;
            left: 0;
            width: 100% !important;
          }
        }

        .fx-footer .fx-tagline {
          font-family: var(--serif);
          font-weight: 500;
          /* the footer tagline is --fs-h3 on the home page (§17.1) */
          font-size: var(--fs-h3);
          line-height: 1.35;
          letter-spacing: -.01em;
          color: var(--ink);
          max-width: 20ch;
        }

        .fx-footer .fx-col h4 {
          font-family: var(--sans);
          font-weight: 500;
          font-size: 14px;
          color: var(--ink);
          margin-bottom: 18px;
        }

        .fx-footer .fx-col ul {
          list-style: none;
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .fx-footer .fx-col a {
          font-family: var(--sans);
          /* a footer link is --fs-body (§17.2), not its own half-pixel size */
          font-size: var(--fs-body);
          color: var(--muted);
          transition: color .3s var(--ease-micro);
        }

        .fx-footer .fx-col a:hover {
          color: var(--ink);
        }

        .fx-footer .fx-legal {
          position: relative;
          display: grid;
          /* three tracks: wordmark, legal nav, copyright. The San Francisco
             block moved up under the tagline and the band-art is positioned
             absolutely into the rail cell, so neither takes a column here. */
          grid-template-columns: auto auto 1fr;
          align-items: start;
          column-gap: 32px;
          row-gap: 22px;
          margin: 0 calc(var(--rail-ir, 188px) - var(--rail-o, 24px) + 24px) 0 calc(var(--rail-il, 188px) - var(--rail-o, 24px) + 24px);
          padding: 32px 0;
          border-top: 0;
          font-family: var(--sans);
          font-size: 13px;
          color: var(--muted);
        }

        .fx-footer .fx-legal .fx-brand {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          font-weight: 500;
          letter-spacing: .08em;
          text-transform: uppercase;
          color: var(--ink);
        }

        .fx-footer .fx-legal .fx-brand img {
          height: 16px;
          width: auto;
        }

        .fx-footer .fx-legal nav {
          display: inline-flex;
          gap: 22px;
        }

        .fx-footer .fx-legal a {
          color: var(--muted);
          transition: color .3s var(--ease-micro);
        }

        .fx-footer .fx-legal a:hover {
          color: var(--ink);
        }

        .fx-footer .fx-legal .fx-copy {
          margin-left: 0;
          padding-top: 2px;
          /* the band-art fills the rail cell immediately to the right, so the
             line needs its own gap or the last word touches the artwork */
          padding-right: 26px;
          text-align: right;
          white-space: nowrap;
        }

        /* The office block and the band-art traded places (review 2026-07-27):
           the artwork closes the legal row and the San Francisco block sits
           under the tagline.
           The chip is not a floating rectangle in the middle of the row. It is
           DESIGN-BOOK 6.10's rule applied at the other corner: the artwork
           fills the cell between the inner and the outer rail exactly, top of
           the legal row to the foot of the page, so it touches the hairline,
           the frame edge and the bottom corner. Absolute, so the legal row's
           own columns are unaffected. */
        .fx-footer .fx-legal .fx-art-shell {
          position: absolute;
          top: 0;
          bottom: 0;
          right: calc(-1 * (var(--rail-ir, 188px) - var(--rail-o, 24px) + 24px));
          width: calc(var(--rail-ir, 188px) - var(--rail-o, 24px) + 24px);
          aspect-ratio: auto;
          margin: 0;
          overflow: hidden;
        }

        .fx-footer .fx-legal .fx-art {
          position: static;
          display: block;
          width: 100% !important;
          height: 100% !important;
          max-width: none !important;
          object-fit: cover;
        }

        /* in the grid column it is a normal block under the tagline, so the
           `justify-self: end` that positioned it in the legal row is dropped */
        .fx-footer .fx-grid .fx-location {
          justify-self: start;
          margin-top: 26px;
        }

        .fx-footer .fx-location {
          justify-self: end;
          min-width: 220px;
          color: var(--ink);
        }

        .fx-footer .fx-location-time {
          display: flex;
          align-items: center;
          gap: 9px;
          margin-bottom: 11px;
          font-size: 14px;
          line-height: 1;
        }

        .fx-footer .fx-location-time i {
          display: none;
        }

        .fx-footer .fx-location-time time {
          font-variant-numeric: tabular-nums;
          color: var(--muted);
        }

        .fx-footer .fx-location address {
          font-style: normal;
          font-size: 13px;
          line-height: 1.45;
          color: var(--muted);
        }

        @media (max-width: 980px) {
          .fx-footer .fx-legal {
            grid-template-columns: 1fr 1fr;
          }

          .fx-footer .fx-grid {
            grid-template-columns: 1fr 1fr;
          }

          .fx-footer .fx-tagline {
            grid-column: 1 / -1;
          }

          .fx-footer .fx-legal .fx-copy {
            margin-left: 0;
            width: auto;
            align-self: end;
          }

          .fx-footer .fx-location {
            justify-self: start;
          }
        }

        @media (max-width: 620px) {
          .fx-footer .fx-legal {
            grid-template-columns: 1fr;
          }

          .fx-footer .fx-legal .fx-copy {
            text-align: left;
            white-space: normal;
          }
        }
/* ============================================================
   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);
}
.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);
}
.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(--mono);
  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 mono face to it -- the separator was setting
   in Lab Grotesque inside a Lab Grotesque Mono label. */
.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);
}
.vis-card:hover { transform: none; box-shadow: 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.png` 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,
.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;
}