/* ============================================================
   v2 INNER PAGES OVERLAY — gives the inner pages the same particle
   field as the homepage, with a STRUCTURED alternating-sides grid.
   Loads LAST so it wins the cascade. NOT imported by the homepage.
   Colors / typography unchanged — only background, chrome, placement.
   ============================================================ */

html, body { background: transparent !important; }

/* Fixed brand background + particle field (both full-viewport, like home). */
.v2-bg { position: fixed; inset: 0; z-index: -2; background: #020409; }
.v2-field { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
.v2-field canvas { display: block; }

/* Lift every content layer above the field. */
#nav, .page-hero, .callout, .four-pillars, .why-we-exist, .proof,
.closing-zone, .closing, .footer { position: relative; z-index: 2; }

/* Strip opaque/gradient section backgrounds so the field reads across the
   whole screen (cards keep their own surfaces). */
.page-hero, .callout, .four-pillars, .why-we-exist, .proof,
.closing-zone, .closing, .footer { background: transparent !important; }

/* The GPU cloud is the only B on the page: it reforms into the B at the very
   bottom (footer), so the static DOM mark + v3 closing/footer glows are removed. */
.closing .closing-mark-block { display: none !important; }
.closing::before { display: none !important; background: none !important; }
.closing { min-height: 43vh !important; padding-top: 96px !important; padding-bottom: 120px !important; }
.page-hero::before { background: none !important; }

/* ── Nav: sticky + shrinks on scroll (ported from v2-home.css) ── */
:root { --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1); }
#nav {
  position: sticky !important; top: 0; z-index: 100 !important;
  transition: padding .26s var(--ease-out-strong), background .26s ease, backdrop-filter .26s ease;
}
#nav.is-scrolled {
  padding-top: 12px !important; padding-bottom: 12px !important;
  background: rgba(1, 3, 17, 0.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(160, 200, 255, 0.12);
}

/* ── Buttons: IDENTICAL to the homepage. The standalone section CTAs use
   `.nav-cta` (the same mariner pill + animated orbit ring + hover that
   styles.css gives the homepage); sized exactly as v2-home sizes it. In-card /
   inline CTAs use `.btn-ghost`, rendered as the homepage arrow-link (.door-cta)
   style below — NOT a ring-less pill (the old mismatch). ── */
.nav-cta {
  font-size: var(--fs-cta) !important; padding: 11px 22px !important;
  text-transform: uppercase !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  line-height: 1 !important; letter-spacing: 0.16em !important;
}
.btn-ghost {
  color: #bcd2f7 !important;
  font-size: var(--fs-cta) !important; letter-spacing: 0.14em !important;
}
.btn-ghost:hover { color: #fff !important; }

/* ── Motion (Emil Kowalski) ── */
.nav-cta {
  transition: transform 160ms var(--ease-out-strong), background-color 200ms var(--ease-out-strong),
    border-color 200ms var(--ease-out-strong), color 200ms var(--ease-out-strong);
}
.nav-cta:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .nav-cta { transition: none; }
  .nav-cta:active { transform: none; }
}

/* ── Footer: wider content + a thin divider hairline above it (ported) ── */
.footer::before {
  content: "" !important; display: block !important;
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160, 200, 255, 0.28), transparent);
  z-index: 6; pointer-events: none;
}
.footer .footer-inner, .footer .footer-bottom { max-width: 1440px !important; }

/* ============================================================
   STRUCTURED ALTERNATING-SIDES ALIGNMENT GRID
   One copy measure per page; the column hugs the LEFT gutter on odd
   beats and the RIGHT gutter on even beats, so the particle shape sits
   in the opposite half (driven by the per-page COMP x-offset). Text is
   left-aligned within the column so every line shares one edge.
   ============================================================ */
:root { --gutter: clamp(24px, 5vw, 96px); --measure: 800px; }

/* Hero — copy CENTERED (column centered; text stays left-aligned within it). */
.page-hero { min-height: 40vh !important; display: flex !important; flex-direction: column; justify-content: flex-start; padding-top: 40px !important; padding-bottom: 90px !important; }
.page-hero .page-hero-inner { max-width: 780px; margin-left: auto; margin-right: auto; text-align: left; }
.page-hero .section-eyebrow { justify-content: flex-start; }

/* Every inner-page content column uses one measure, CENTERED, left-aligned text. */
.callout .container, .four-pillars .container, .why-we-exist .container, .proof .container { max-width: var(--measure); margin-left: auto; margin-right: auto; text-align: left; }
.callout .section-eyebrow, .four-pillars .section-eyebrow, .why-we-exist .section-eyebrow, .proof .section-eyebrow { justify-content: flex-start; }
/* Keep credential strips, dev grids and route lists flush to the column's left edge. */
.callout .cred-strip, .four-pillars .dev-grid, .proof .route-list { margin-left: 0; margin-right: 0; justify-content: flex-start; }

/* ── ALTERNATING OFFSET (desktop ≥1200px) ───────────────────────────────────
   Columns stay CENTERED via the base rule above (margin: 0 auto); on top of
   that, a ±140px translateX nudges sections left/right to create rhythm WITHOUT
   the old far-gutter pinning (which caused the one-sided void). EVERY section
   participates including the HERO — the hero leans LEFT and the page alternates
   L/R/L/R from there, so no page has a centered-hero→leaning-content jump.
   140px is a constant nudge — at 1280/1440/1920 neither the 800px content column
   nor the 780px hero column approaches a gutter (left edge ≥100px at 1280); it
   reads as a nudge, not a pin. Gated ≥1200px so columns never overflow on
   narrower/mobile widths (where they stay dead-centered).
   Order down each page (hero first, leaning left):
   Portfolio:  top(L) grantauthority(R) zh-standard(L) in-development(R) next-step(L)
   How We Op.: top(L) pillar-01(R) pillar-02(L) pillar-03(R) pillar-04(L) why-now(R) next-step(L)
   Mission:    top(L) m0(R) m1(L) m2(R) m3(L) m4(R) featured-statement(L) close(R)
   Team:       top(L) leadership(R) next-step(L) */
@media (min-width: 1200px) {
  /* lean LEFT — hero + the odd content sections */
  .page-hero .page-hero-inner,
  #zh-standard .container, #next-step .container,
  #pillar-02 .container, #pillar-04 .container,
  #m1 .container, #m3 .container, #featured-statement .container {
    transform: translateX(-140px);
  }

  /* lean RIGHT — the even content sections */
  #grantauthority .container, #in-development .container,
  #pillar-01 .container, #pillar-03 .container, #why-now .container,
  #m0 .container, #m2 .container, #m4 .container, #close .container,
  #leadership .container {
    transform: translateX(140px);
  }

  /* Refined Option A — right-align the HEADER copy of the right-lean sections
     (eyebrow + title + short .section-lede) so they mirror the left sections.
     Long body prose (.v-prose) is intentionally NOT included — it stays LEFT for
     readability. Card grids/strips (.cred-strip/.spec-grid/.door-grid/.team-grid)
     are untouched. id-scoped + !important to beat .section-title{left !important}
     (line ~205) and .section-eyebrow{flex-start !important} (line ~208). */
  #grantauthority .section-eyebrow, #in-development .section-eyebrow,
  #pillar-01 .section-eyebrow, #pillar-03 .section-eyebrow, #why-now .section-eyebrow,
  #m0 .section-eyebrow, #m2 .section-eyebrow, #m4 .section-eyebrow, #close .section-eyebrow,
  #leadership .section-eyebrow { justify-content: flex-end !important; }

  #grantauthority .section-title, #grantauthority .section-lede,
  #in-development .section-title, #in-development .section-lede,
  #pillar-01 .section-title, #pillar-01 .section-lede,
  #pillar-03 .section-title, #pillar-03 .section-lede,
  #why-now .section-title, #why-now .section-lede,
  #m0 .section-title, #m0 .section-lede,
  #m2 .section-title, #m2 .section-lede,
  #m4 .section-title, #m4 .section-lede,
  #close .section-title, #close .section-lede,
  #leadership .section-title, #leadership .section-lede { text-align: right !important; }
}

/* ============================================================
   REVIEW ROUND 11 — card/section consistency across ALL inner pages.
   ============================================================ */

/* (2) Kill the per-section ambient corner glow — the particle field provides
   the light; the static blue radial pooled in the section's top corner. */
.callout::before { display: none !important; }

/* (2 + 7) "Company 0x" eyebrow was glued to the section's top edge
   (.company-block zeroes padding-top). Give the company sections real top
   breathing room so the eyebrow isn't on the edge. */
.company-block { padding-top: clamp(72px, 9vh, 120px) !important; }

/* (4) Credential strip: the tick marker sits ABOVE the text (was overlapping the
   first letter), and both clear the vertical dividers. */
.cred { padding: 46px 30px 30px 30px !important; }
.cred::before { top: 22px !important; left: 30px !important; width: 22px !important; }

/* (5 + 9) EVERY inner-page card shares the homepage `.door` surface + hover:
   glassy fill, rule-dark (solid) border, a translateY lift on hover. Fixes the
   routing cards' solid fill, the dev-items' dashed border, and the missing
   lift — so all cards on all pages read the same. */
.spec, .dev-item, .team-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--rule-dark) !important;
  border-radius: 3px;
  /* IDENTICAL to the homepage .door transition (ease, 0.3s). */
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
/* dev-item + team-card lift like the homepage .door cards. .spec cards are the
   pillar-style info cards — their hover IS the cursor-tracked mouse-glow (see
   Prose's HoverGlow wrapper), so they do NOT lift. */
@media (hover: hover) and (pointer: fine) {
  .dev-item:hover, .team-card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    transform: translateY(-3px);
  }
}

/* (5) 4-card grids → 2×2 (was 3-up, which orphaned the 4th card). */
.spec-grid { grid-template-columns: repeat(2, 1fr) !important; }

/* On phones, collapse back to one column — the unconditional 2-up rule above
   otherwise beats styles.css's own mobile .spec-grid stack (max-width:960px)
   since this file loads after it, leaving 2-up cards too narrow at 375px. */
@media (max-width: 960px) {
  .spec-grid { grid-template-columns: 1fr !important; }
}

/* (8) JenMail / PerSC dev cards: more room at the bottom so the copy isn't
   glued to the card edge. */
.dev-item { padding: 34px 34px 42px !important; }

/* ============================================================
   REVIEW ROUND 12 — eyebrows + alignment + orphan cards + spacing,
   uniform across ALL inner pages.
   ============================================================ */

/* Headings + eyebrows LEFT-aligned WITH the body copy (some section titles were
   centering, so the heading sat apart from its left-aligned paragraph). */
.callout .section-title, .four-pillars .section-title,
.why-we-exist .section-title, .proof .section-title { text-align: left !important; }
.callout .section-eyebrow, .four-pillars .section-eyebrow,
.why-we-exist .section-eyebrow, .proof .section-eyebrow,
.page-hero .section-eyebrow { justify-content: flex-start !important; }

/* Every eyebrow gets a dash on BOTH ends (several only had the leading dash). */
.section-eyebrow::after {
  content: "" !important; display: inline-block !important;
  width: 28px !important; height: 1px !important; margin-left: 14px !important;
  background: currentColor !important; opacity: 0.6; vertical-align: middle;
}
.company-block.callout > .container > .section-eyebrow::after { display: inline-block !important; }

/* Orphan card (a lone card on the last row of a 2-col grid) spans BOTH columns —
   the same width as the two cards above it. */
.spec-grid > .spec:last-child:nth-child(odd),
.dev-grid > .dev-item:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }

/* Padding below a card grid before the copy that follows (copy was glued to it). */
.spec-grid { margin-bottom: 46px !important; }
.dev-grid { margin-bottom: 40px !important; }

/* "What the engine produces next" aside — separated from the dev cards + styled
   (it was an unstyled paragraph glued to the grid). */
.pf-aside {
  margin-top: 40px !important; text-align: left;
  font-family: var(--sans); font-size: var(--fs-aside); letter-spacing: 0.04em;
  color: var(--muted-on-dark);
}

/* Mission featured statement — ONE statement, big + centered (Option B removed
   in the markup). This section breaks the alternating grid on purpose. */
#featured-statement .container {
  max-width: 980px !important; margin-left: auto !important; margin-right: auto !important;
  text-align: center !important;
}
#featured-statement .section-eyebrow { justify-content: center !important; }
#featured-statement .featured-statement { max-width: 100%; }
/* Featured statement — 20% bigger (was clamp(28px,3.8vw,44px)). */
#featured-statement .featured-statement.opt-editorial p { font-size: clamp(22px, 2.6vw, 30px) !important; }

/* ── Routing door cards (Portfolio #next-step, Mission #close) — IDENTICAL to
   the homepage routing. The homepage's door-cta arrow + door-num rules live in
   v2-home (not loaded here), so port them. Stack 1-col like the homepage. ── */
#next-step .door-grid, #close .door-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
.door .door-cta .arrow {
  background: rgba(12, 28, 70, 0.55) !important;
  border-color: rgba(150, 190, 255, 0.45) !important;
}
.door:hover .door-cta .arrow {
  background: #173a86 !important;
  border-color: rgba(180, 210, 255, 0.95) !important;
  color: #fff !important;
}
.door .door-num { margin-bottom: 18px !important; }

/* ── TEAM — alternating photo-beside-bio rows. ──
   Mobile-first base (<900px): single column, photo on TOP / bio below, identical
   for every leader. Desktop (>=900px): each leader is a row — photo one side,
   bio the other, top-aligned — with the photo side ALTERNATING by array order
   via .photo-left / .photo-right (Sam L, Dan R, Maximus L, Jesse R). Bio text is
   ALWAYS left-aligned regardless of photo side. These rules load after v3.css at
   equal specificity, so they win with no !important (the old !important row-force
   here was removed, not stacked on). */
.team-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }

/* TEAM-SCOPED WIDTH (part 1): widen the leadership cards to ~1140px without
   touching the global .container measure. The leadership section is the ONLY
   place id="leadership" appears (team page), so this id-scoped override lifts
   the .callout .container 800px clip for the team page only — Mission, How We
   Operate, Home and other .callout/.proof sections keep var(--measure)=800px.
   Card outer = 1140; border-box padding 40px*2 -> content 1060; flex row photo
   240 + gap 40 -> bio column 780px (target ~760-800). */
#leadership .container { max-width: 1140px; }
.team-grid { max-width: 1140px; margin-inline: auto; }

/* Base = mobile: stacked column, photo on top. */
.team-card {
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  text-align: left;
  padding: 28px;
}
.team-card .team-photo {
  display: block;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  align-self: center;
  width: 100%;
  max-width: 280px;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, var(--tangaroa-3), var(--blue-charcoal));
}
.team-card .team-photo .team-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-card .team-photo .team-photo-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--sans);
  font-size: 40px;
  font-weight: 600;
  color: var(--rock-blue);
}
.team-card-text { flex: 1 1 auto; min-width: 0; }

/* Desktop: photo-beside-bio rows; equal fixed photo size keeps row rhythm even
   when bios differ in length (Dan's is longest — bio just extends below the
   top-aligned photo). */
@media (min-width: 900px) {
  .team-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    padding: 36px 40px;
  }
  .team-card .team-photo {
    align-self: flex-start;
    width: 240px;
    max-width: 240px;
    /* sit above the card background but BELOW the corner brackets (z-index:4),
       so an overhanging photo never covers a bracket. */
    position: relative;
    z-index: 1;
  }
  /* even array index -> photo on the right (row-reverse); bio stays left-aligned. */
  .team-card.photo-right { flex-direction: row-reverse; }

  /* PHOTO OVERLAP (part 2, desktop-only): bleed each photo ~32px past the card's
     OUTER edge on its side. Card horizontal padding is 40px, so margin -(40+32)
     = -72px puts the photo's outer edge 32px beyond the card boundary; the bio
     follows inward (negative margin frees the flex space), keeping the 40px gap.
     overflow:visible on .team-card (set above) lets the bleed show; brackets win
     via z-index. photo-left bleeds LEFT, photo-right bleeds RIGHT. */
  .team-card.photo-left .team-photo  { margin-left: -72px; }
  .team-card.photo-right .team-photo { margin-right: -72px; }
}

/* ============================================================
   REVIEW ROUND 13.
   ============================================================ */

/* Inner hero headline: smaller than the homepage's (the hero is shorter now),
   and sized so the split sentences each fit on ONE line (no orphan words). */
.page-hero h1 { font-size: clamp(38px, 4.6vw, 62px) !important; line-height: 1.06 !important; }

/* Headings never leave an orphan word (hard rule) — balance the wrap. */
.page-hero h1, .callout .section-title, .four-pillars .section-title,
.why-we-exist .section-title, .proof .section-title, .v-prose h3 { text-wrap: balance; }

/* Sub-headings inside prose (e.g. "What it actually does", "Why a shared engine
   matters") → white + bigger, still clearly smaller than the section title.
   Generous top padding so every sub-head opens like a NEW section and gets room
   to breathe — it must read as a fresh beat, not the next line of the paragraph
   above it. (The first sub-head in a group gets the same air via the margin.) */
.v-prose h3 {
  color: var(--white) !important;
  font-size: var(--fs-subhead) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  margin-top: clamp(58px, 7vh, 92px) !important;
  margin-bottom: 18px !important;
}
/* EVERY sub-head of this level gets the same top air — including the first one in
   a prose group that follows a spec-card grid (e.g. "Why it works", "Who it is
   for"), which previously got a reduced first-child margin and read cramped. */
.v-prose > h3:first-child { margin-top: clamp(58px, 7vh, 92px) !important; }

/* Mission featured-statement attribution — bigger, not an eyebrow clone. */
#featured-statement .fs-attr {
  font-size: 15px !important; letter-spacing: 0.04em !important;
  text-transform: none !important; margin-top: 26px !important;
}

/* Portfolio LIVE status — white→blue with a BLUE PULSATING GLOW (text-shadow on
   the label + a brighter, breathing halo on the dot). */
@keyframes bs-live-pulse {
  0%, 100% { color: #ffffff; text-shadow: 0 0 6px rgba(90, 140, 255, 0.35); }
  50%      { color: #5a8cff; text-shadow: 0 0 16px rgba(90, 140, 255, 0.95), 0 0 28px rgba(90, 140, 255, 0.45); }
}
@keyframes bs-live-dot {
  0%, 100% { box-shadow: 0 0 6px rgba(90, 140, 255, 0.55); opacity: 0.85; }
  50%      { box-shadow: 0 0 16px rgba(90, 140, 255, 1), 0 0 26px rgba(90, 140, 255, 0.5); opacity: 1; }
}
.v-status.is-live { color: #ffffff !important; animation: bs-live-pulse 2.4s ease-in-out infinite; }
.v-status.is-live::before {
  background: #5a8cff !important;
  animation: bs-live-dot 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .v-status.is-live, .v-status.is-live::before { animation: none !important; }
}
/* Design pass: match IN-FINAL-DEVELOPMENT + IN-DEVELOPMENT to LIVE's static
   weight here too — same white label + bright #5a8cff dot. Only the pulsing
   glow stays unique to LIVE (its "live now" signal); pills differ otherwise
   by label text alone. */
.v-status.is-soon, .v-status.is-future { color: #ffffff !important; }
.v-status.is-soon::before, .v-status.is-future::before { background: #5a8cff !important; }

/* ============================================================
   REVIEW ROUND 14 — dividers, 1:1 card hover, tablet layout.
   ============================================================ */

/* (R14) Remove the thin hairline divider between sections (the `section::after`
   ghostly mariner line). The full-screen particle field is the only thing that
   should read between sections now — no rule cutting across it. */
section::after { display: none !important; }

/* (R14) Card hover, 1:1 with the homepage "A studio, not a startup." pillar
   cards — applied to EVERY inner-page card type (spec / dev / team). The card
   markup carries four corner-brackets and the grid is wrapped in HoverGlow (the
   cursor-tracked radial glow), but the bracket STYLING lived in
   sovereign-overrides.css — which the inner pages don't load — so the brackets
   never rendered and the hover read as "glow only" (or nothing). Port the exact
   pillar bracket treatment: 16px mariner L-brackets sitting on the border line,
   growing to 24px + mariner-bright on hover, while the radial glow follows the
   cursor. (Routing `.door` cards already get this via design-overrides.css.) */
.spec, .dev-item, .team-card { position: relative; overflow: visible !important; }
.spec .corner-bracket,
.dev-item .corner-bracket,
.team-card .corner-bracket {
  display: block !important;
  position: absolute;
  width: 16px; height: 16px;
  border: 0 solid var(--mariner);
  pointer-events: none; z-index: 4;
  transition: width .25s ease, height .25s ease, border-color .25s ease;
}
.spec .corner-bracket.tl, .dev-item .corner-bracket.tl, .team-card .corner-bracket.tl { top: -1px;    left: -1px;    border-top-width: 2px;    border-left-width: 2px;  }
.spec .corner-bracket.tr, .dev-item .corner-bracket.tr, .team-card .corner-bracket.tr { top: -1px;    right: -1px;   border-top-width: 2px;    border-right-width: 2px; }
.spec .corner-bracket.bl, .dev-item .corner-bracket.bl, .team-card .corner-bracket.bl { bottom: -1px; left: -1px;    border-bottom-width: 2px; border-left-width: 2px;  }
.spec .corner-bracket.br, .dev-item .corner-bracket.br, .team-card .corner-bracket.br { bottom: -1px; right: -1px;   border-bottom-width: 2px; border-right-width: 2px; }
@media (hover: hover) and (pointer: fine) {
  .spec:hover .corner-bracket,
  .dev-item:hover .corner-bracket,
  .team-card:hover .corner-bracket { width: 24px; height: 24px; border-color: var(--mariner-bright); }
}

/* ============================================================
   REVIEW ROUND 15 — scroll cue under the hero body + tablet/mobile 1:1.
   ============================================================ */

/* (R15) Scroll cue sits RIGHT UNDER the hero body text (was pinned absolute to
   the section's bottom edge). The cue markup now lives inside .page-hero-inner
   (after the body), so make it flow there: static, left-aligned under the copy,
   a small gap above. Override the absolute base + its translateX bob. */
.page-hero .scroll-cue {
  position: static !important;
  left: auto !important; bottom: auto !important; top: auto !important;
  transform: none !important;
  margin-top: 34px;
  /* Sits at the copy's left edge (shrink-to-content), but the glowing line is
     CENTER-aligned under the word "SCROLL" (align-items:center within the cue's
     own width = the width of the word). */
  width: fit-content;
  align-items: center !important;
  animation: bs-cue-bob 2.8s infinite ease-in-out;
}
@keyframes bs-cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .page-hero .scroll-cue { animation: none !important; } }

/* ── Mobile + tablet: collapse to one centered column (≤1024 — was ≤900, which
   left tablet on the cramped desktop split: hero copy mis-aligned with the
   off-screen particle B). Tablet now centres like the homepage. ── */
/* Stacked footer is tall — make it solid so the fixed particle B can't bleed
   through over the footer copy. */
@media (max-width: 1024px) {
  .footer { background: #020409 !important; }
}
@media (max-width: 1024px) {
  .page-hero { min-height: auto !important; }
  .page-hero .page-hero-inner,
  .callout .container, .four-pillars .container, .why-we-exist .container, .proof .container {
    max-width: 620px; margin-left: auto !important; margin-right: auto !important;
  }
  /* Hero text CENTERED on tablet/mobile — 1:1 with the homepage hero (which
     centres .hero-inner ≤1024). Content sections below stay left-aligned, also
     like the homepage. */
  .page-hero .page-hero-inner { text-align: center !important; }
  .page-hero .section-eyebrow { justify-content: center !important; }
  /* Nav fits 5 links (Home + 4) + CTA + wordmark without crowding in the
     961–1024 band (links only hide ≤960) — IDENTICAL to v2-home. */
  #nav.nav { padding-left: 24px !important; padding-right: 24px !important; }
  #nav .nav-links { gap: 14px !important; }
  /* Hero: eyebrow at the top, a gap for the centred mark, then the copy below. */
  .page-hero .section-eyebrow { margin-bottom: 34vh; }
  .page-hero .scroll-cue { display: none !important; }

  /* No global overlay. Each content panel carries a ~50% fill so the copy stands
     out and the glow behind it is minimised (the particles themselves are also
     fewer + smaller on phones). Nested cards drop their own fill to avoid
     double-tinting — their border still delineates them on the panel. */
  .callout .container,
  .four-pillars .container,
  .proof .container {
    background: rgba(3, 7, 18, 0.5);
    padding: 28px 22px;
    border-radius: 12px;
    border: 1px solid rgba(160, 200, 255, 0.09);
  }
  .proof .route,
  .four-pillars .dev-item { background: transparent !important; }
}

/* Mobile CTA fit — see v2-home.css. The inline-flex buttons need max-width:100%
   so white-space:normal can actually wrap them (otherwise they grow to full
   single-line width and overflow the phone viewport). Relaxed line-height +
   trimmed padding. No font-size or desktop change. */
@media (max-width: 600px) {
  .nav-cta, .btn-primary, .btn-ghost {
    white-space: normal !important;
    max-width: 100% !important;
    padding: 11px 16px !important;
    line-height: 1.2 !important;
    text-align: center;
  }
  .door-cta { white-space: normal !important; max-width: 100% !important; }
}