/* ============================================================
   ALTERIC · AI for insurance brokers
   SHARED design system (used by every page)
   Warm-monochrome editorial marketing site.
   Homepage-specific CSS (hero, product-film, metrics band,
   use-case highlight, etc.) stays INLINE in index.html.
   ============================================================ */

:root{
  --near-black:#0E0D0B;
  --ivory:#F2F0EA;
  --ink:#14120E;
  --cream:#F4F2EC;
  --muted-ivory:#6C685F;
  --muted-dark:#A9A49A;
  --hair-dark:rgba(255,255,255,.14);
  --hair-light:rgba(0,0,0,.12);
  --hair-light-soft:rgba(0,0,0,.07);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pad-y:clamp(6rem,12vh,10rem);
  --gutter:clamp(1.4rem,5vw,6rem);
  --maxw:1280px;
  --nav-h:64px;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--body);
  background:var(--ivory);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

::selection{background:rgba(20,18,14,.85);color:var(--cream)}

/* ---------- grain texture (dark sections) ---------- */
.grain::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);position:relative;z-index:1}
section{position:relative}

.eyebrow{
  font-family:var(--mono);
  font-weight:500;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted-ivory);
}
.dark .eyebrow{color:var(--muted-dark)}

.hair{height:1px;width:100%;background:var(--hair-light)}
.dark .hair{background:var(--hair-dark)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--sans);
  font-weight:500;
  font-size:.92rem;
  letter-spacing:.01em;
  padding:.92em 1.55em;
  border-radius:11px;
  cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn-cream{background:var(--cream);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.04)}
.btn-cream:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.45)}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(0,0,0,.55)}
.btn-outline{background:transparent;border-color:var(--hair-light);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink);transform:translateY(-2px)}
.dark .btn-outline{border-color:var(--hair-dark);color:var(--cream)}
.dark .btn-outline:hover{border-color:rgba(255,255,255,.55)}

.textlink{
  font-family:var(--sans);
  font-weight:500;
  font-size:.92rem;
  display:inline-flex;align-items:center;gap:.45em;
  transition:gap .35s cubic-bezier(.2,.7,.3,1),opacity .3s ease;
}
.textlink .arw{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.textlink:hover .arw{transform:translateX(4px)}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announce{
  background:#0A0908;
  color:var(--muted-dark);
  text-align:center;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:.72rem 1rem;
  position:relative;z-index:60;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.announce b{color:var(--cream);font-weight:500}
/* the bar is a claim, so it links through to the page that argues it */
.announce a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.55em;transition:color .3s ease}
.announce a:hover{color:var(--cream)}
.announce .ann-arw{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.3,1);opacity:.7}
.announce a:hover .ann-arw{transform:translateX(3px);opacity:1}

/* ============================================================
   WORDMARK (custom inline-SVG ALTERIC logotype)
   Stroked geometric letterforms, uniform weight, Tesla-style
   three-bar "E". currentColor => adapts: cream over the dark
   hero, ink in the scrolled / solid nav.
   ============================================================ */
.wordmark{
  display:inline-flex;align-items:flex-start;gap:.34em;
  color:var(--cream);
  transition:color .5s ease;
  line-height:1;
  font-family:var(--mono);font-weight:500;font-size:1.2rem;letter-spacing:.16em;
}
.wm-ai{
  font-family:var(--mono);font-weight:500;font-size:.62rem;line-height:1;
  letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-top:1px;
}

/* ============================================================
   NAV + MEGA-MENU DROPDOWNS  (Harvey-style)
   Default state = transparent, cream text (sits over the dark
   hero on the homepage). .scrolled / .nav--solid = ivory blur,
   ink text (scrolled homepage + all light content pages).
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:50;
  transition:background .5s ease, border-color .5s ease, box-shadow .5s ease;
  border-bottom:1px solid transparent;
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:1.15rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}

/* ---- primary links + triggers ---- */
.nav-links{
  display:flex;align-items:center;gap:.18rem;
  list-style:none;
  font-family:var(--sans);font-weight:400;font-size:.9rem;letter-spacing:.01em;
}
/* static so the full-width mega panel resolves against the sticky .nav bar,
   not the individual item (that's what makes the panel span the viewport) */
.nav-item{position:static}
/* Three groups, not seven equal items: the product (Platform, How it works,
   Ecosystem), then the evaluation (Solutions, Security, ROI calculator), then
   the company. The extra space is the only thing separating them, so it has to
   be bigger than the gap but small enough that 7 items still fit at 1200px. */
.nav-links > .nav-gap{margin-right:clamp(.55rem,1.3vw,1.05rem)}
.nav-item > a,
.nav-trigger{
  display:inline-flex;align-items:center;gap:.42em;white-space:nowrap;
  padding:.5rem .55rem;border-radius:9px;
  font-family:var(--sans);font-weight:400;font-size:.9rem;letter-spacing:.01em;
  color:rgba(244,242,236,.78);
  background:none;border:0;cursor:pointer;
  transition:color .3s ease, background .3s ease;
}
.nav-item > a:hover,
.nav-trigger:hover,
.nav-item.open > .nav-trigger{color:var(--cream)}
.nav-caret{width:9px;height:9px;opacity:.6;transition:transform .35s ease;flex:0 0 auto}
.nav-item.open .nav-caret{transform:rotate(180deg)}

/* ---- mega dropdown: Harvey-style full-width panel ----
   Anchored to the full-width sticky nav (not the item), so it drops flush
   beneath the bar across the whole viewport; the content is constrained to
   the site max-width and laid out as a calm multi-column list. The panel
   stays warm-ivory / ink over BOTH the dark homepage hero and the light
   content pages, so it reads the same everywhere. */
.mega{
  position:absolute;top:100%;left:0;right:0;
  background:rgba(244,242,236,.72);
  backdrop-filter:blur(32px) saturate(1.15);
  -webkit-backdrop-filter:blur(32px) saturate(1.15);
  border-top:1px solid var(--hair-light-soft);
  border-bottom:1px solid var(--hair-light);
  box-shadow:0 44px 84px -52px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .34s cubic-bezier(.2,.7,.3,1), transform .34s cubic-bezier(.2,.7,.3,1), visibility .34s;
  z-index:55;
}
/* invisible hover bridge so the sliver under the bar doesn't drop the menu */
.mega::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-item.open > .mega{opacity:1;visibility:visible;transform:none}

.mega-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(2rem,3.2vw,3rem) var(--gutter) clamp(2.2rem,3.6vw,3.4rem);
  display:grid;grid-template-columns:repeat(3,minmax(0,300px));
  justify-content:start;
  column-gap:clamp(1.6rem,3vw,3.5rem);row-gap:.15rem;
}
/* fewer-item menus stay tidy: 2 links => 2 columns, no lonely stretched cell */
.mega-inner:not(:has(.mega-link:nth-child(3))){grid-template-columns:repeat(2,minmax(0,330px))}

.mega-link{
  display:block;padding:1.05rem 1.05rem;border-radius:12px;
  border-top:1px solid var(--hair-light-soft);
  transition:background .28s ease;
}
.mega-link:hover{background:rgba(20,18,14,.05)}
.ml-title{
  display:block;font-family:var(--sans);font-weight:600;font-size:1.02rem;
  color:var(--ink);margin-bottom:.32rem;letter-spacing:-.006em;
}
.ml-desc{display:block;font-family:var(--body);font-size:.86rem;line-height:1.45;color:var(--muted-ivory);max-width:32ch}

/* ---- right side ---- */
.nav-right{display:flex;align-items:center;gap:1.5rem}
.nav-login{font-family:var(--sans);font-size:.9rem;color:rgba(244,242,236,.72);transition:color .3s ease}
.nav-login:hover{color:var(--cream)}

/* ---- scrolled (homepage past hero) + solid (content pages) ---- */
.nav.scrolled,
.nav--solid{
  background:rgba(242,240,234,.97);
  border-bottom-color:var(--hair-light);
}
.nav.scrolled .wordmark,
.nav--solid .wordmark{color:var(--ink)}
.nav.scrolled .nav-item > a,
.nav.scrolled .nav-trigger,
.nav--solid .nav-item > a,
.nav--solid .nav-trigger{color:rgba(20,18,14,.7)}
.nav.scrolled .nav-item > a:hover,
.nav.scrolled .nav-trigger:hover,
.nav.scrolled .nav-item.open > .nav-trigger,
.nav--solid .nav-item > a:hover,
.nav--solid .nav-trigger:hover,
.nav--solid .nav-item.open > .nav-trigger{color:var(--ink)}
.nav.scrolled .nav-login,
.nav--solid .nav-login{color:rgba(20,18,14,.66)}
.nav.scrolled .nav-login:hover,
.nav--solid .nav-login:hover{color:var(--ink)}
.nav.scrolled .btn-cream,
.nav--solid .btn-cream{background:var(--ink);color:var(--cream)}

/* ---- hamburger ---- */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative;margin-right:-10px}
.nav-toggle span{position:absolute;left:11px;height:1.5px;width:22px;background:var(--cream);transition:background .4s ease,transform .4s ease,opacity .3s ease}
.nav-toggle span:nth-child(1){top:16px}
.nav-toggle span:nth-child(2){top:22px}
.nav-toggle span:nth-child(3){top:28px}
.nav.scrolled .nav-toggle span,
.nav--solid .nav-toggle span{background:var(--ink)}

/* ============================================================
   MOBILE MENU (full-screen, collapsible sections)
   ============================================================ */
.mobile-menu{
  position:fixed;inset:0;z-index:65;
  background:rgba(14,13,11,.98);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease;
  overflow-y:auto;overscroll-behavior:contain;
}
.mobile-menu.open{opacity:1;visibility:visible}
.mm-inner{
  padding:calc(var(--nav-h) + 1.6rem) var(--gutter) 3rem;
  max-width:640px;width:100%;margin:0 auto;
  display:flex;flex-direction:column;
}
.mm-group{border-bottom:1px solid var(--hair-dark)}
.mm-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:0;cursor:pointer;padding:1.15rem 0;text-align:left;
  font-family:var(--serif);font-variation-settings:'opsz' 40;font-weight:400;
  font-size:1.75rem;letter-spacing:-.01em;color:var(--cream);
}
.mm-caret{width:16px;height:16px;flex:0 0 auto;color:var(--muted-dark);transition:transform .35s ease}
.mm-group.open .mm-caret{transform:rotate(180deg)}
.mm-panel{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.2,.7,.3,1)}
.mm-panel-inner{display:flex;flex-direction:column;padding:.2rem 0 1.1rem}
.mm-panel a{
  font-family:var(--sans);font-size:1rem;color:rgba(244,242,236,.68);
  padding:.72rem 0;transition:color .25s ease;   /* ≥44px tap target */
}
.mm-panel a:hover{color:var(--cream)}
.mm-link{
  display:block;border-bottom:1px solid var(--hair-dark);
  font-family:var(--serif);font-variation-settings:'opsz' 40;font-weight:400;
  font-size:1.75rem;letter-spacing:-.01em;color:var(--cream);padding:1.15rem 0;
}
.mm-actions{display:flex;flex-direction:column;gap:1rem;margin-top:2.2rem}
.mm-actions .btn{justify-content:center;width:100%}
.mm-login{font-family:var(--sans);font-size:1rem;color:var(--cream);text-align:center;padding:.8rem}

/* menu-open chrome: lock scroll, lift nav above the menu, force cream marks */
body.menu-open{overflow:hidden}
body.menu-open .nav{z-index:66;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent}
body.menu-open .wordmark{color:var(--cream)}
body.menu-open .nav-toggle span{background:var(--cream)}
body.menu-open .nav-toggle span:nth-child(1){top:22px;transform:rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){top:22px;transform:rotate(-45deg)}

/* ============================================================
   FOOTER  (Harvey-style multi-column sitemap)
   ============================================================ */
.footer{background:linear-gradient(180deg,rgba(14,13,11,.84),rgba(14,13,11,.9)),#0E0D0B url(/media/footer-london.jpg) center/cover no-repeat;color:var(--cream);padding-top:clamp(4rem,8vh,6rem);position:relative;overflow:hidden}
.footer-top{
  display:grid;
  grid-template-columns:1.6fr repeat(5, minmax(0,1fr));
  gap:clamp(1.6rem,3vw,3rem);
  padding-bottom:clamp(3rem,6vh,5rem);
}
.footer-brand .wordmark{color:var(--cream);font-size:1.5rem;margin-bottom:1.1rem}
.footer-brand p{color:var(--muted-dark);font-size:.9rem;max-width:26ch}
.footer-col h5{font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:1.25rem}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.8rem}
.footer-col a{color:rgba(244,242,236,.72);font-size:.95rem;transition:color .3s ease}
.footer-col a:hover{color:var(--cream)}

.footer-giant{
  padding:clamp(1rem,3vh,2.5rem) 0 0;
  line-height:0;
  overflow:hidden;
  user-select:none;
  pointer-events:none;
}
.wm-giant{
  font-family:var(--mono);
  font-weight:600;
  font-size:clamp(4rem,19vw,15rem);
  letter-spacing:.02em;
  line-height:.85;
  white-space:nowrap;
  color:var(--cream);
  opacity:.08;
}
.footer-bottom{
  border-top:1px solid var(--hair-dark);
  padding:1.8rem 0;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.03em;color:var(--muted-dark);
}
.footer-bottom .fb-links{display:flex;gap:1.6rem}
.footer-bottom a:hover{color:var(--cream)}

/* ============================================================
   REVEAL ANIMATION  (shared)
   Reveal hiding only applies when JS is active (.js on <html>);
   without JS everything shows.
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal,.js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .mega,.mm-panel,.nav-caret,.mm-caret{transition:none}
}

/* ============================================================
   RESPONSIVE  (shared chrome only)
   ============================================================ */
@media (max-width:1024px){
  .footer-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1}
}

/* 4 top-level items need ~389px of bar, so the desktop nav fits comfortably
   from the site's original 960px breakpoint. This was pushed up to 1200px when
   the bar briefly carried 7 items; flattening and removing pages released it. */
@media (max-width:960px){
  .nav-links{display:none}
  .nav-toggle{display:block}
}

/* start pulling the large desktop section padding down on tablets/phones so pages
   aren't endless; it steps down again under 560px */
@media (max-width:700px){
  :root{--pad-y:clamp(4rem,9vh,6.5rem)}
}

@media (max-width:620px){
  .footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* roomier tap targets for the sitemap + bottom-bar links on touch */
  .footer-col a{display:inline-block;padding:.35rem 0}
  .footer-col ul{gap:.35rem}
  .footer-bottom .fb-links{gap:1.4rem}
  .footer-bottom .fb-links a{display:inline-block;padding:.3rem 0}
}

@media (max-width:560px){
  :root{--gutter:1.4rem;--pad-y:clamp(3.75rem,9vh,5.5rem)}
  /* wordmark + hamburger carry the header on phones; the mobile menu holds the CTAs */
  .nav-right{display:none}
  .announce{font-size:.62rem;letter-spacing:.09em;padding:.62rem 1rem;line-height:1.5}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

@media (max-width:420px){
  .footer-top{grid-template-columns:1fr}
}

@media (max-width:360px){
  .announce{font-size:.58rem;letter-spacing:.06em}
}

/* ==========================================================================
   MOBILE LEGIBILITY & TAP TARGETS — added 2026-08-02 (rev 2)
   Measured on a real 390px viewport. No page scrolled horizontally, but a lot
   of mono labels rendered between 7.5px and 10px and several controls were
   under 30px tall.

   !important is deliberate here. Each page's CSS loads AFTER this file and
   most of these labels are set by descendant selectors (.cx-draft .dk span),
   which outrank anything reasonable this file can write. This block is a
   legibility floor for phones, not a design layer — nothing under 10.5px.
   ========================================================================== */
@media (max-width:760px){

  /* --- floor 10.5px: these measured 7.5-9px, genuinely unreadable --- */
  html .cx-sub, html .cx-chan, html .aw-tag, html .cx-k, html .cx-t,
  html .cx-hint, html .cx-ref, html .lw-k, html .pc-k, html .as-k,
  html .cmo-k, html .cx-replay,
  html .cx-draft .dk span,
  html .cx-audit .cx-item b,
  html .cx-stage .jump,
  html .cx-state span{
    font-size:10.5px !important;letter-spacing:.08em !important;
  }

  /* --- floor 11px: these measured 9-10.3px --- */
  html .announce,
  html .cx-clock span, html .cx-clock b, html .cx-tab,
  html .nlf-k, html .nl-num, html .m-value .sub,
  html .lane-tag, html .cx-wm, html .compat-h, html .psi-n,
  html .rep-stats .stat .l, html .rs-tag, html .rep-tag, html .lv-tag, html .lv-w,
  html .op-n, html .io-fig figcaption,
  html .kick .lbl, html .gd-num,
  html .roi-out .tag, html .panel-label,
  html .flow-tag, html .flow-wm, html .roadmap-chip,
  html .cap-label, html .int-names{
    font-size:11px !important;
  }

  /* --- tap targets: aim for ~40px of finger --- */
  html .announce a{min-height:34px;padding:.4rem 0}
  html .wordmark{display:inline-block;padding:.5rem 0}
  html .cx-tab{min-height:42px;padding-top:.55rem;padding-bottom:.55rem}
  html .cx-replay{min-height:38px;padding:.55rem .9rem}
  html .pp-link{display:inline-block;min-height:38px;padding:.6rem 0}
  html .footer-bottom .fb-links a{padding:.55rem 0}
  /* every .textlink on this site is a standalone CTA, not an inline prose link —
     verified across all pages before applying vertical padding */
  html .textlink{display:inline-block;padding:.55rem 0;min-height:38px}
  html .rl-list a{padding-top:1.2rem;padding-bottom:1.2rem}
}

/* ==========================================================================
   TEMPORARY: LOGIN LINK HIDDEN — added 2026-07-30 at Raj's request.
   Hides the "Login" link in both the desktop nav (.nav-login) and the
   mobile menu (.mm-login) on every page. The links themselves are still
   in the HTML, untouched — nothing was deleted.

   TO PUT LOGIN BACK: delete this whole comment block and the two rules
   below (everything from this banner to the closing banner). That is the
   only change; no HTML edits are needed.
   ========================================================================== */
.nav-login,
.mm-login{display:none !important}
/* ===================== END TEMPORARY LOGIN HIDE ========================== */

/* ---------- pulsing CTA ----------
   A beacon, not a blip. Two rings half a cycle apart so one is always in
   flight, over a slow halo that gives the button depth on the dark band.
   The rings are pseudo-elements behind the button (z-index:-1), so nothing
   reflows, the label never moves under the cursor and the hit area is fixed.
   Pauses on hover: once it has been found it stops asking. */
.btn-pulse{position:relative;isolation:isolate;animation:btnGlow 2s ease-in-out infinite}
.btn-pulse::before,
.btn-pulse::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid var(--cream);
  animation:btnRing 2s cubic-bezier(.16,.7,.3,1) infinite both;
  pointer-events:none;z-index:-1;
}
.btn-pulse::after{animation-delay:1s}

@keyframes btnRing{
  0%{opacity:.7;transform:scale(1)}
  45%{opacity:.38;transform:scale(1.11)}
  75%{opacity:.18;transform:scale(1.21)}
  100%{opacity:0;transform:scale(1.3)}
}
@keyframes btnGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(244,242,236,.16)}
  50%{box-shadow:0 0 30px 5px rgba(244,242,236,.17)}
}

.btn-pulse .btn-arw{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.btn-pulse:hover .btn-arw{transform:translateX(3px)}
/* deliberately no hover pause: the pulse runs continuously */

.hiw-cta{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  margin-top:clamp(2.6rem,5.5vh,4rem);text-align:center;
}
.hiw-cta-sub{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-dark);
}
@media (prefers-reduced-motion: reduce){
  .btn-pulse,
  .btn-pulse::before,
  .btn-pulse::after{animation:none}
  .btn-pulse::before,
  .btn-pulse::after{opacity:0}
}

/* ============================================================
   MOBILE LEGIBILITY & TOUCH
   Audited at 390px across every page. No horizontal overflow was
   found, but two things needed fixing: mono micro-labels rendering
   at 8.5-10.5px, which is below comfortable reading on a phone, and
   a few controls under the 44px touch guideline. Sizes are raised
   only on small screens so the desktop typography is untouched.
   ============================================================ */
@media (max-width:640px){
  /* floor the smallest mono labels at ~11px */
  .cx-ref,.cx-sub,.cx-k,.jump,.cx-own,.hiw-cta-sub,.imp-k,.ask-foot,
  .dir-role,.pw-more,.pipe-k,.pipe-perm,.hw-foot,.askq-foot,.hw-role,
  .subp-k,.subp-p,.gate-n,.pipe-say-k,.askq-t,.pn-lock,.pn-n{
    font-size:.69rem;letter-spacing:.08em;
  }
  .pipe-wf li,.pipe-draft p{font-size:.86rem}

  /* touch targets: keep the visual size, grow the hit area */
  .cx-ctl{min-width:44px;min-height:44px}
  .pipe-st{min-height:44px;padding-top:.35rem;padding-bottom:.35rem}
  .pipe-btn{min-height:44px;padding-top:.7rem;padding-bottom:.7rem}
  .cx-own{display:inline-block;padding:.6rem 0;min-height:44px}
  .wordmark{display:inline-flex;align-items:center;min-height:44px}
}

/* ============================================================
   INLINE CTA
   Sits at the end of a section, inheriting that section's
   background, so a reader is never more than a couple of
   sections from a way to act. Hairline above, one line of
   context, one button. Dark sections flip via .dark.
   ============================================================ */
.inline-cta{
  display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);flex-wrap:wrap;
  margin-top:clamp(2.2rem,4.5vh,3.2rem);
  padding-top:clamp(1.6rem,3vh,2.2rem);
  border-top:1px solid var(--hair-light);
}
.inline-cta p{
  font-family:var(--body);font-size:clamp(.95rem,1.2vw,1.06rem);line-height:1.55;
  color:var(--muted-ivory);margin:0;max-width:54ch;
}
.dark .inline-cta,.on-dark .inline-cta{border-top-color:var(--hair-dark)}
.dark .inline-cta p,.on-dark .inline-cta p{color:var(--muted-dark)}
@media (max-width:640px){
  .inline-cta{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .inline-cta .btn{width:100%;justify-content:center}
}

/* ============================================================
   MOBILE TAP TARGETS (shared chrome)
   Footer and standalone text links measured 20-36px tall on a
   phone. Grow the hit area with padding, not the type, so the
   visual design is untouched.
   ============================================================ */
@media (max-width:640px){
  .footer-col a{display:inline-block;padding:.45rem 0}
  .fb-links a{display:inline-block;padding:.55rem .15rem}
  .hero-actions .textlink,.fc-actions .textlink,
  .gd-foot .textlink,.cta-sub + * .textlink{display:inline-flex;align-items:center;min-height:44px}
  .announce a,.announce{min-height:40px}
}