/* ============================================================
   HERO FIT — additive, never edits locked CSS. Loaded AFTER styles.css
   so it wins (same specificity, later source). Inner pages have 3-line
   H1s + a longer promise; the theme's default hero (h1 clamp 56-144px +
   ~270px vertical padding + 92vh min-height) is sized for index.html's
   short headline and overflows the viewport. This shrinks the hero so the
   whole thing fits on screen without scrolling. NOT linked on index.html.
   ============================================================ */
/* Restore the frosted-glass backdrop blur on the fixed header so inner pages
   match index.html. Sections/css/sections.css disables it on
   .custom-sections-body pages (it set backdrop-filter:none + a near-opaque 94%
   paper) to dodge an old Chromium fixed+backdrop repaint bug — but the blanket
   card `will-change` that actually triggered that bug was already removed, and
   the homepage runs this exact blur with no issue. Loaded after sections.css,
   same specificity, so this wins. Values copied from styles.css `.nav`. */
.custom-sections-body .nav,
.custom-sections-body .nav.is-scrolled {
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
}
.custom-sections-body .nav { background: color-mix(in srgb, var(--paper) 80%, transparent); }
.custom-sections-body .nav.is-scrolled { background: color-mix(in srgb, var(--paper) 86%, transparent); }

.hero {
  /* Uniform height: every inner-page hero fills exactly one viewport, content
     vertically centered, so heroes read the same page to page (short-content
     heroes no longer come out stubby). Richer heroes that genuinely need more
     than a screen still grow past this floor. */
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: clamp(96px, 12vh, 132px) 0 clamp(44px, 6vh, 72px);
}
.hero-h1 {
  font-size: clamp(42px, 6.2vw, 92px);
  line-height: 0.95;
  margin-bottom: 24px;
}
.hero-promise {
  font-size: clamp(17px, 1.25vw, 21px);
  margin-bottom: 28px;
  /* match other section body text width (~850px) instead of the narrow 60ch */
  max-width: 850px;
}

@media (max-width: 1024px) {
  .hero { padding: clamp(96px, 12vh, 128px) 0 clamp(44px, 6vh, 64px); }
  .hero-h1 { font-size: clamp(38px, 7vw, 64px); }
}
@media (max-width: 640px) {
  .hero { padding: 84px 0 40px; }
  .hero-h1 { font-size: clamp(33px, 8.5vw, 50px); line-height: 0.99; }
}

/* Orphaned hero motif markup left behind when the per-page .hv-* style
   blocks were removed (their CSS lived there). Hide so every hero is the
   clean standard theme hero. (hsplit-copy = copy wrapper, kept; renders as
   a normal block.) */
.hero-flow,
.hm-phases,
.hero-render,
.hero-bg-orbit,
.hero-seal,
.supa-rail,
.vsag-rail,
.vsag-vs,
.hkx-helm,
.aist-chips,
.ntf-chips,
.scale-chips,
.hv-mohit { display: none !important; }

/* Hero H1 marker squiggle (.hh-marker). The theme default renders it ~59px
   tall (viewBox 720x90 at full word width) sitting at bottom:-8%, so it cuts
   THROUGH the lower half of the letters and, on 3-line headings, overhangs the
   line below. Make it a slim underline that sits cleanly BELOW the word, and
   give the marked line enough room so it never touches the next line. (index
   .html doesn't load this file, so the homepage marker is unchanged.) */
.hero-h1 .hh-codewrap { isolation: isolate; }
.hero-h1 .hh-marker { height: 0.58em; bottom: -0.15em; z-index: -1; }
.hero-h1 .hh-line.dt-line:has(.hh-marker) { margin-bottom: 0.14em; }

/* Marker-float fix: the theme marker is positioned left:38%/width:66% of the
   codewrap, which only lands under the word when the codewrap is SHORT. On pages
   whose codewrap held a long lead phrase, the inline-block wrapped internally and
   the underline floated to the right of the actual word. Those pages now wrap only
   the highlighted word in `.hh-cw-tight`; span the marker across that whole word. */
.hero-h1 .hh-cw-tight .hh-marker { left: -4%; right: auto; width: 108%; }

/* s22 header (the "Nadia / founder story" band, reused across many pages): the
   theme default is a flex ROW with a 35% eyebrow column on the left and the big
   title pushed into the right column, so the title never lines up with the
   eyebrow above it or the stat cards below. Stack it so eyebrow -> title ->
   cards all share the left edge. Also drop the title's em highlight band from
   78-92% (which strikes THROUGH the big letters) to a clean 85-98% underline. */
.custom-sections-body .s22-top { flex-direction: column; gap: clamp(18px, 2.6vw, 30px); }
.custom-sections-body .s22-top-left { flex: none; }
.custom-sections-body .s22-top-left .eyebrow { margin-bottom: 0; }
.custom-sections-body .s22-title em {
  background-image: linear-gradient(180deg, transparent 85%, var(--teal-light) 85%, var(--teal-light) 98%, transparent 98%);
}

/* FAQ accordion (.s14-accordion, the FAQ on ~100 pages): restyle the boxed-card
   list into the contact-page .faq look — full-width rows split by hairline rules,
   with a round solid toggle (+/x). Markup and the locked accordion JS are
   untouched; only the visual changes. Title em gets the same clean underline. */
.custom-sections-body .s14-accordion { gap: 0; }
.custom-sections-body .s14-accordion-item { background: none; border-radius: 0; border-top: 1px solid var(--rule); }
.custom-sections-body .s14-accordion-item:last-child { border-bottom: 1px solid var(--rule); }
.custom-sections-body .s14-accordion-btn { padding: 24px 0; gap: 24px; }
/* `.custom-sections-body [class$="-title"] { max-width: 880px }` (sections.css:5757)
   is the section-heading measure — but the attribute selector also catches
   .s14-accordion-title, capping the FAQ question at 880px. Same (0,2,0)
   specificity, and this file loads later, so `none` wins. */
.custom-sections-body .s14-accordion-title { font-size: clamp(17px, 1.5vw, 20px); padding-right: 0; max-width: none; }
/* FAQ toggle — same three states as the legacy .faq-toggle (css/styles.css:1196):
   collapsed = outline circle + ink plus, hover = teal fill, open = ink fill + white
   minus. The old rule pinned `background: var(--ink); border: none` on EVERY row,
   so every question showed a solid black circle and the open state was invisible.
   These land in hero-fit.css, which loads after sections.css, so the base
   :hover / .active rules there need re-stating at (0,3,0) to survive. */
.custom-sections-body .s14-accordion-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background-color: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
}
.custom-sections-body .s14-accordion-icon::before,
.custom-sections-body .s14-accordion-icon::after { background-color: currentColor; }
.custom-sections-body .s14-accordion-item:hover .s14-accordion-icon {
  background-color: var(--teal);
  border-color: var(--teal);
  color: var(--paper);
}
.custom-sections-body .s14-accordion-item.active .s14-accordion-icon {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.custom-sections-body .s14-accordion-content p { padding: 0 0 26px 0; }
.custom-sections-body .s14-title em {
  background-image: linear-gradient(180deg, transparent 85%, var(--teal-light) 85%, var(--teal-light) 98%, transparent 98%);
}

/* Hero stat strip (.hero-trust-row): the theme default (gap 36px, padding
   24px 36px, big numbers) makes 4-stat rows wrap to 2 lines, leaving an
   orphan divider on line 1 and one stat alone on line 2. Tighten so all
   stats stay on ONE line across desktop. Page-specific overrides (e.g.
   .hero--agencies) are more specific and still win. */
.hero-trust-row {
  flex-wrap: nowrap;
  gap: clamp(14px, 1.6vw, 26px);
  padding: 16px clamp(16px, 1.9vw, 26px);
  max-width: 100%;
}
.htr-num { font-size: clamp(21px, 1.9vw, 29px); white-space: nowrap; }
.htr-lab { font-size: 10px; letter-spacing: 0.045em; white-space: nowrap; }
.htr-divider { height: 24px; }

/* Footer sitemap: 100+ links across 11 groups. Stacking them one-per-line ran the
   footer ~1100px tall. Instead lay each group out INLINE — a small mono header,
   then its links flowing horizontally and wrapping, middot-separated — so all
   links stay visible but the whole index collapses to a short, tidy directory
   (~3-4× shorter). On wide screens two groups sit side by side to use the width.
   Footer is always dark (both themes) so link colour is a fixed light. */
.footer-cols.footer-sitemap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(7px, 0.9vw, 11px);
  padding-top: clamp(36px, 3.6vw, 52px);
  padding-bottom: clamp(36px, 3.6vw, 52px);
}
.footer-sitemap .footer-col {
  display: grid;
  grid-template-columns: minmax(140px, 168px) 1fr;
  align-items: baseline;
  gap: 4px 24px;
  margin: 0;
  padding-bottom: clamp(7px, 0.9vw, 11px);
  border-bottom: 1px solid rgba(244, 245, 241, 0.07);
}
.footer-sitemap .footer-col:last-child { border-bottom: none; padding-bottom: 0; }
.footer-sitemap .footer-col-h { margin: 0; padding-top: 2px; }
.footer-sitemap .footer-col ul {
  display: block; margin: 0; padding: 0; list-style: none; line-height: 1.75;
}
.footer-sitemap .footer-col li { display: inline; }
.footer-sitemap .footer-col li:not(:last-child)::after {
  content: "\00b7"; margin: 0 8px; color: rgba(244, 245, 241, 0.26);
}
.footer-sitemap .footer-col li a {
  display: inline;
  font-size: 13px; line-height: 1.3;
  color: rgba(244, 245, 241, 0.6);
  transition: color .18s ease;
}
.footer-sitemap .footer-col li a:hover { color: var(--teal-bright); padding-left: 0; }
@media (max-width: 880px) {
  .footer-cols.footer-sitemap { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .footer-sitemap .footer-col { grid-template-columns: 1fr; gap: 8px; }
}

/* Founder photo in the s22 quote-author block (only where the author is Mohit). */
.s22-author { display: flex; align-items: center; gap: 13px; }
.s22-author-img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex: none; }

/* Dark-mode tag pills (.X-tag.is-on on the R3/spec-list hero blocks): the page
   sets `[data-theme=dark] .X-tag { background:#1b1f29 }` at higher specificity
   than `.X-tag.is-on { background:var(--teal) }`, so in dark mode the ACTIVE pill
   loses its teal fill but keeps its dark `--paper` text — dark-on-dark, unreadable.
   Restore a bright filled accent pill (one rule covers every -tag prefix). */
:root[data-theme="dark"] [class*="-tag"].is-on {
  background: var(--teal-bright) !important;
  border-color: var(--teal-bright) !important;
  color: #0a0a10 !important;
}
/* Narrow-desktop safety: a few pages have very long labels that still can't
   fit one line below ~1180px — let them wrap cleanly (no orphan divider)
   instead of overflowing the capsule. The ≤760px grid in styles.css still
   governs mobile. */
@media (max-width: 1180px) and (min-width: 761px) {
  .hero-trust-row { flex-wrap: wrap; }
  .hero-trust-row .htr-divider { display: none; }
}

/* ============================================================
   BROADSHEET HERO SYSTEM  (new hero language for non-service families)
   One language, two layouts (.xhero--a / .xhero--b), two themes
   (.xhero--light / .xhero--dark). Colours are EXPLICIT, not theme
   vars, so a "dark" hero stays a dark band in either site theme and a
   "light" hero stays light in dark mode (same trick the footer uses).
   STATIC ONLY — no transform/animation/backdrop on .custom-sections-body
   pages (compositing-clip bug). Replaces the old per-page .hero--* heroes.
   ============================================================ */
.xhero{ position:relative; min-height:100svh; display:grid; align-content:center;
  padding: clamp(104px,13vh,150px) 0 clamp(48px,7vh,80px); overflow:hidden; }
.xhero .container{ width:100%; }

/* THEME-DRIVEN: hero follows the site theme (light hero in light mode, dark in
   dark mode). The .xhero--light / .xhero--dark modifiers stay in markup for
   compatibility but no longer force a fixed band — both resolve to theme vars. */
.xhero,
.xhero--light,
.xhero--dark{ --xh-bg:var(--paper); --xh-ink:var(--ink); --xh-soft:var(--ink-soft); --xh-mut:var(--muted);
  --xh-rule:var(--rule); --xh-line:var(--ink); --xh-acc:var(--teal); --xh-accbg:color-mix(in srgb,var(--teal) 20%,transparent); }
.xhero{ background:var(--xh-bg); color:var(--xh-ink); }

/* faint static grid backdrop (background-image only — no mask/compositing) */
.xhero--dark .xhero-grid,
.xhero--light .xhero-grid{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--xh-rule) 1px,transparent 1px),linear-gradient(90deg,var(--xh-rule) 1px,transparent 1px);
  background-size:72px 72px; }
.xhero-grid::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 28% 16%, transparent 38%, var(--xh-bg) 78%); }

/* masthead rule row */
.xhero .container{ position:relative; z-index:2; }
.xh-masthead{ display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding-bottom:16px; border-bottom:1px solid var(--xh-line);
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--xh-soft); }
.xh-place{ color:var(--xh-mut); white-space:nowrap; }

/* headline / promise */
.xh-h1{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.03em; line-height:0.95;
  margin: clamp(30px,4.4vw,58px) 0 0; color:var(--xh-ink); }
.xh-h1 em{ font-style:normal; color:var(--xh-acc); }
.xh-h1 u{ text-decoration:none; background-image:linear-gradient(180deg,transparent 78%,var(--xh-accbg) 78%,var(--xh-accbg) 96%,transparent 96%); }
.xh-promise{ color:var(--xh-soft); line-height:1.6; }
.xh-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* meta items (used as bottom strip in A, side column in B) */
.xh-mi{ }
.xh-mk{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--xh-mut); margin-bottom:6px; }
.xh-mv{ font-family:var(--font-display); font-weight:600; color:var(--xh-ink); line-height:1.1; }

/* ---------- LAYOUT A: headline + horizontal meta strip ---------- */
.xhero--a .xh-h1{ font-size:clamp(44px,7.4vw,116px); max-width:17ch; }
.xhero--a .xh-promise{ max-width:64ch; font-size:clamp(17px,1.3vw,20px); margin: clamp(28px,3.4vw,46px) 0 clamp(26px,3vw,40px); }
.xhero--a .xh-actions{ margin-bottom: clamp(30px,4vw,52px); }
.xhero--a .xh-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 24px; border-top:1px solid var(--xh-rule); }
.xhero--a .xh-meta .xh-mi{ padding-top:20px; }
.xhero--a .xh-meta .xh-mv{ font-size:clamp(21px,2.1vw,30px); }
@media(max-width:700px){ .xhero--a .xh-meta{ grid-template-columns:1fr 1fr; gap:20px 18px; } }

/* ---------- LAYOUT B: headline + side spec column ---------- */
.xhero--b .xh-body{ display:grid; grid-template-columns:1.08fr 0.92fr; gap:clamp(36px,5vw,84px); align-items:start; margin-top: clamp(30px,4vw,52px); }
.xhero--b .xh-h1{ font-size:clamp(40px,5vw,82px); max-width:15ch; margin-top:0; }
.xhero--b .xh-promise{ max-width:48ch; font-size:clamp(16px,1.2vw,19px); margin:24px 0 28px; }
.xhero--b .xh-meta{ border-left:1px solid var(--xh-line); padding-left:clamp(22px,2vw,32px); }
.xhero--b .xh-meta .xh-mi{ padding:16px 0; border-bottom:1px solid var(--xh-rule); }
.xhero--b .xh-meta .xh-mi:first-child{ padding-top:0; }
.xhero--b .xh-meta .xh-mi:last-child{ border-bottom:none; }
.xhero--b .xh-meta .xh-mv{ font-size:clamp(17px,1.5vw,21px); }
@media(max-width:820px){ .xhero--b .xh-body{ grid-template-columns:1fr; gap:36px; }
  .xhero--b .xh-meta{ border-left:none; border-top:1px solid var(--xh-line); padding-left:0; padding-top:8px; } }

/* buttons follow theme (btn-classy is already theme-aware) — no hero override */

/* ============================================================
   IMAGE SECTIONS  (placeholder-ready). Two components:
   .imgsplit  — image + copy, alternating (.imgsplit--rev flips)
   .imgframe  — screenshot inside a browser/phone frame
   Placeholders (.ph) are intentional branded blocks (crosshatch +
   mono caption), so an empty image reads as "image goes here", not
   broken. Swap <figure class="ph ..."> for <img> later. STATIC only.
   ============================================================ */
.ph{ position:relative; display:grid; place-items:center; overflow:hidden;
  border:1px solid var(--rule); border-radius:18px; background:var(--paper-2);
  background-image:repeating-linear-gradient(135deg, color-mix(in srgb,var(--ink) 4%,transparent) 0 1px, transparent 1px 11px);
  color:var(--muted); margin:0; }
.ph-img{ width:100%; height:100%; object-fit:cover; display:block; }
.ph:has(img){ background-image:none; }
.ph-16x9{ aspect-ratio:16/9; } .ph-4x3{ aspect-ratio:4/3; } .ph-1x1{ aspect-ratio:1/1; }
.ph-3x4{ aspect-ratio:3/4; } .ph-9x16{ aspect-ratio:9/16; }
.ph-inner{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:18px; }
.ph-ico{ width:34px; height:34px; opacity:.5; }
.ph-lab{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; }
.ph-sub{ font-size:12px; color:var(--muted); opacity:.8; max-width:24ch; }

/* ---- split image / text ---- */
.imgsplit{ padding: clamp(56px,8vh,110px) 0; }
.imgsplit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,80px); align-items:center; }
.imgsplit--rev .imgsplit-fig{ order:2; }
.imgsplit-copy .eyebrow{ margin-bottom:14px; }
.imgsplit-copy h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.2vw,46px); line-height:1.05; letter-spacing:-0.02em; margin:0 0 18px; }
.imgsplit-copy h2 em{ font-style:normal; color:var(--teal); }
.imgsplit-copy p{ color:var(--ink-soft); font-size:clamp(16px,1.2vw,18px); line-height:1.6; margin:0 0 16px; max-width:54ch; }
.imgsplit-list{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.imgsplit-list li{ position:relative; padding-left:24px; color:var(--ink-soft); font-size:15px; line-height:1.5; }
.imgsplit-list li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--teal); }
@media(max-width:820px){ .imgsplit-grid{ grid-template-columns:1fr; gap:30px; }
  .imgsplit--rev .imgsplit-fig{ order:0; } }

/* ---- device / screenshot frame ---- */
.imgframe{ padding: clamp(56px,8vh,110px) 0; }
.imgframe-head{ max-width:none; margin:0 auto clamp(32px,4vw,52px); text-align:center; }   /* was 680px - the h2 75pct must resolve against the row; the block is still
   centred by text-align + the flex align-items:center in css/styles.css */
.imgframe-head p{ max-width:56ch; }   /* body measure, was implied by the 680px cap */
.imgframe-head .eyebrow{ margin-bottom:14px; }
.imgframe-head h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.4vw,50px); line-height:1.04; letter-spacing:-0.025em; margin:0 0 16px; }
.imgframe-head h2 em{ font-style:normal; color:var(--teal); }
.imgframe-head p{ color:var(--ink-soft); font-size:clamp(16px,1.2vw,19px); line-height:1.6; margin:0; }
.device{ border:1px solid var(--rule); border-radius:16px; background:var(--paper); box-shadow:0 40px 90px -60px rgba(0,0,0,0.5); overflow:hidden; max-width:1040px; margin:0 auto; }
.device-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--rule); background:var(--paper-2); }
.device-dot{ width:11px; height:11px; border-radius:50%; background:var(--rule); flex:0 0 auto; }
.device-url{ margin-left:14px; font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:0.02em; }
.device .ph{ border:none; border-radius:0; }
/* phone variant */
.device-phone{ max-width:320px; border-radius:34px; padding:10px; background:#16181d; border-color:#23262e; }
.device-phone .ph{ border-radius:26px; }
.device-phone .device-notch{ height:22px; display:grid; place-items:center; }
.device-phone .device-notch span{ width:96px; height:6px; border-radius:100px; background:rgba(255,255,255,0.25); }
.imgframe-pair{ display:flex; gap:clamp(24px,3vw,44px); justify-content:center; align-items:flex-end; flex-wrap:wrap; }

/* imgframe layout: header flush left, browser image full-width, and on desktop a
   2-col grid (content left / image right). Applies to every .imgframe section
   (mvp, web-app, mobile-app, custom-saas, saas, ai-product, services). The
   full-width is scoped to the DIRECT-child browser frame so paired devices
   (.imgframe-pair) keep their own sizing. */
.imgframe-head{ text-align:left !important; align-items:flex-start !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; }
.imgframe-head h2{ max-width:100% !important; }
.imgframe > .container > .device-browser{ max-width:none !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; }
@media (min-width:900px){
  body section.imgframe > .container{ display:grid !important; grid-template-columns:0.85fr 1.15fr; gap:clamp(40px,5vw,80px); align-items:center; }
  .imgframe-head{ margin-bottom:0 !important; }
}

/* ============================================================
   SERVICE CONSOLE HERO  (.shero) — distinct 3rd hero language for the
   service-detail pages. NOT the home hero (no squiggle, not centered),
   NOT Broadsheet (mono spec/console panel). One consistent look across all
   service pages. THEME-DRIVEN — follows the site theme (light in light mode,
   dark in dark mode), colours from theme vars. STATIC only.
   ============================================================ */
.shero{ position:relative; min-height:100svh; display:grid; align-content:center;
  padding: clamp(104px,13vh,150px) 0 clamp(48px,7vh,80px); overflow:hidden;
  background:var(--paper); color:var(--ink); }
.shero-grid-bg{ position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:70px 70px; }
.shero-grid-bg::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 85% at 26% 16%, transparent 36%, var(--paper) 78%); }
.shero .container{ position:relative; z-index:2; }
.shero-grid{ display:grid; grid-template-columns:1.4fr 0.6fr; gap:clamp(36px,5vw,80px); align-items:center; }
/* hero label === .eyebrow (was --muted / 12px / 0.16em / 12px gap / weight 400) */
.shero-eyebrow{ display:inline-flex; align-items:flex-start; gap:10px; font-family:var(--font-mono); font-size:var(--fs-mono); font-weight:500; letter-spacing:0.18em; line-height:1.6; text-transform:uppercase; color:var(--ink); margin-bottom:clamp(20px,2.4vw,30px); }
.shero-eyebrow::before{ content:''; width:7px; height:7px; background:var(--teal); flex:0 0 auto; margin-top:calc((1.6em - 7px) / 2); }
.shero-eyebrow .se-no{ color:var(--teal); flex:0 0 auto; }
/* mobile: let the long hero label wrap instead of overflowing off-screen.
   Type/tracking stay canonical — only the nowrap is lifted. */
@media (max-width:767px){
  .shero-copy, .shero-stats{ min-width:0; }
  /* row 1 = square + first word; the long descriptor drops to row 2, left-aligned.
     .se-no grows to fill row 1, so the (anonymous) descriptor text run wraps below. */
  .shero-eyebrow{ white-space:normal; flex-wrap:wrap; }
  .shero-eyebrow .se-no{ flex:1 0 auto; }
}
.shero-h1{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.03em; line-height:0.98;
  font-size:clamp(40px,5.2vw,84px); margin:0; color:var(--ink); max-width:100%; }
.shero-h1 em{ font-style:normal; color:var(--teal); }
.shero-promise{ color:var(--ink-soft); font-size:clamp(16px,1.2vw,19px); line-height:1.6; max-width:none; margin:clamp(22px,2.6vw,32px) 0 clamp(26px,3vw,36px); }
.shero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
/* outcome stats column (oversized numbers, teal rule) */
.shero-stats{ display:flex; flex-direction:column; gap:clamp(40px,4.5vw,60px);
  border-left:2px solid var(--teal); padding-left:clamp(22px,2.2vw,34px); }
.shero-stat .n{ display:block; font-family:var(--font-display); font-weight:600;
  font-size:clamp(40px,4.6vw,72px); line-height:0.9; letter-spacing:-0.03em; color:var(--ink); }
.shero-stat .l{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); margin-top:10px; max-width:none; line-height:1.5; }
@media(max-width:880px){ .shero-grid{ grid-template-columns:1fr; gap:34px; } .shero-h1{ max-width:none; } }

/* ============================================================
   BLOG DETAIL — widen article + title. Root cause: --gutter is 10%
   (~127px each side at desktop), so the blog inners squeeze both the
   article (capped 760px → ~720px rendered) and the title (capped 18ch).
   Use a tighter fixed gutter on the blog inners, drop the article cap,
   and widen the title so text fills the column. Inline <style> wins by
   source order → !important required. Nav/footer use .container, untouched.
   ============================================================ */
/* Side spacing matches the header: blog inners use the same --gutter as .container,
   so their left/right edges line up with the nav logo and CTA. Caps removed so the
   title and article fill the aligned band instead of sitting narrow inside it. */
.blog-hero-inner,
.blog-body-inner{ padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
.blog-content{ max-width: none !important; }
.blog-hero h1{ max-width: none !important; }

/* ============================================================
   CTA / PROOF / MANIFESTO em colour — styles.css sets these to the
   vivid --teal-bright (mint) + a bright highlight slab (meant for the
   old always-dark bands). On the now theme-driven light sections that
   mint reads washed-out. Use the brand --teal + a teal highlight so it
   matches the theme on every page. (nav.is-dark em left bright.)
   ============================================================ */
.proof em, .cta em, .manifesto em{
  color: var(--teal);
  background-image: linear-gradient(180deg, transparent 78%, rgba(var(--accent-rgb),0.26) 78%, rgba(var(--accent-rgb),0.26) 92%, transparent 92%);
}

/* ============================================================
   s10 card number — .s11-num has no CSS, so it inherited --ink (dark) and
   vanished on the dark --ink circle (looked like an empty black dot). Colour
   it light so the number reads on the circle in both themes.
   ============================================================ */
.s10-icon-wrap .s11-num{ color: #f4f5f1; font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1; }