/* ═══════════════════════════════════════════════════════════════════════════
   AUDITABLY v2  —  sitewide design upgrade
   Loaded after each page's own styles, so it upgrades the existing class
   vocabulary instead of requiring every page to be re-authored. No page
   content changes. The palette is the same ten colours.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --v2-ink:#0d0e23; --v2-ink-2:#1a1a2e;
  --v2-brand:#4042E4; --v2-brand-deep:#2B2DBC; --v2-ok:#10B981;
  --v2-body:#4b5563; --v2-muted:#6b7280;
  --v2-rule:#e5e7eb; --v2-canvas:#fafbfc; --v2-paper:#fff;
  --v2-mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
  --v2-ease:cubic-bezier(.22,.61,.36,1);
  --v2-radius:12px; --v2-radius-lg:18px;
}

/* ── typography ─────────────────────────────────────────────────────────── */
.t-display,h1.t-display{
  font-size:clamp(38px,5vw,72px) !important;
  line-height:1.04 !important;
  letter-spacing:-.032em !important;
  font-weight:600 !important;
  color:var(--v2-ink) !important;
}
.t-h2,h2.t-h2{
  font-size:clamp(26px,2.8vw,38px) !important;
  line-height:1.14 !important;
  letter-spacing:-.022em !important;
  font-weight:600 !important;
}
.t-h3,h3.t-h3{font-size:20px !important;line-height:1.32 !important;letter-spacing:-.01em !important;font-weight:600 !important}
.t-lead{font-size:clamp(17px,1.5vw,20px) !important;line-height:1.58 !important}
.t-body{line-height:1.68 !important}

/* The eyebrow becomes structural: mono, letterspaced, with a brand rule.
   On an audit product the monospace register is true to the subject. */
.t-label{
  font:500 12px/1 var(--v2-mono) !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  color:var(--v2-muted) !important;
  display:inline-flex !important;
  align-items:center; gap:10px;
}
.t-label::before{
  content:''; width:20px; height:1px; flex:0 0 20px;
  background:var(--v2-brand);
}
.sec-air.dark .t-label,.dark .t-label{color:rgba(255,255,255,.5) !important}
.sec-air.dark .t-label::before,.dark .t-label::before{background:var(--v2-ok)}

/* ── dark bands read as punctuation, not decoration ─────────────────────── */
.sec-air.dark{background:var(--v2-ink) !important}
.sec-air.dark .t-h2,.sec-air.dark h2,.sec-air.dark h3{color:#fff !important}
.sec-air.dark .t-body,.sec-air.dark .t-lead,.sec-air.dark p{color:rgba(255,255,255,.74) !important}

/* ── cards lift on hover instead of sitting flat ────────────────────────── */
.rail-card,.card,.rcard,.who{
  border-radius:var(--v2-radius) !important;
  transition:border-color .2s var(--v2-ease), box-shadow .2s var(--v2-ease),
             transform .2s var(--v2-ease) !important;
}
.rail-card:hover,.card:hover,.rcard:hover{
  border-color:rgba(64,66,228,.30) !important;
  box-shadow:0 1px 2px rgba(13,14,35,.04), 0 12px 28px -14px rgba(13,14,35,.20) !important;
  transform:translateY(-2px);
}

/* ── buttons: colour and dimension ──────────────────────────────────────────
   Depth from a darker bottom edge of the same hue plus a real press state.
   Both gradient stops are already in the palette. */
.primary,a.primary,.nav-cta a[href="/readiness"],.btn-pri,
.hero .ctas .primary{
  background:linear-gradient(180deg,var(--v2-brand) 0%,var(--v2-brand-deep) 100%) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:var(--v2-radius) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 1px 0 var(--v2-brand-deep),
    0 4px 12px -2px rgba(64,66,228,.42),
    0 10px 24px -8px rgba(64,66,228,.32) !important;
  transition:transform .12s var(--v2-ease), box-shadow .18s var(--v2-ease),
             background .18s var(--v2-ease) !important;
}
.primary:hover,.btn-pri:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 2px 0 var(--v2-brand-deep),
    0 8px 18px -2px rgba(64,66,228,.48),
    0 16px 32px -10px rgba(64,66,228,.36) !important;
}
.primary:active,.btn-pri:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 6px rgba(13,14,35,.28), 0 1px 0 var(--v2-brand-deep) !important;
}
.second,a.second,.btn-sec{
  background:linear-gradient(180deg,#fff 0%,var(--v2-canvas) 100%) !important;
  border:1px solid var(--v2-rule) !important;
  border-radius:var(--v2-radius) !important;
  color:var(--v2-ink) !important;
  box-shadow:0 1px 0 var(--v2-rule), 0 2px 6px -2px rgba(13,14,35,.10) !important;
  transition:transform .12s var(--v2-ease), box-shadow .18s var(--v2-ease),
             border-color .18s var(--v2-ease) !important;
}
.second:hover,.btn-sec:hover{
  border-color:var(--v2-brand) !important;
  color:var(--v2-brand-deep) !important;
  transform:translateY(-1px);
}
.second:active,.btn-sec:active{transform:translateY(1px)}

/* ── data tables get room and a real header ─────────────────────────────── */
table{border-collapse:collapse}
table th{
  font:500 12px/1 var(--v2-mono) !important;
  letter-spacing:.09em !important; text-transform:uppercase !important;
  color:var(--v2-muted) !important; background:var(--v2-canvas);
}
table th,table td{border-bottom:1px solid var(--v2-rule)}

/* ── focus, for keyboard users, everywhere ──────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--v2-brand) !important;
  outline-offset:3px !important;
  border-radius:6px;
}
.dark a:focus-visible,.sec-air.dark a:focus-visible{outline-color:#fff !important}
:focus:not(:focus-visible){outline:none}

@media (prefers-reduced-motion:reduce){
  .primary,.second,.btn-pri,.btn-sec,.rail-card,.card{
    transition:none !important; transform:none !important;
  }
}

/* ── header at small widths ─────────────────────────────────────────────────
   Measured at 320 and 375: the blog shell's CTA pill wrapped "Sign in" onto
   two lines and overflowed the viewport at 320. Nothing in a header may wrap. */
.nv-cta a,.nv-links a,a.nav-cta{white-space:nowrap !important}
.nv-cta{flex-wrap:nowrap !important}
@media (max-width:560px){
  /* the secondary route stays reachable in the page body */
  a[href="/specialist/"].hov[style*="margin-right"],
  .nav-in > a[href="/specialist/"]{display:none !important}
  a.nav-cta{padding:9px 14px !important;font-size:13.5px !important}
}

/* ── article tables must scroll inside themselves, never widen the page ──── */
.post table,article table,.art-main table{
  display:block; max-width:100%; overflow-x:auto;
  -webkit-overflow-scrolling:touch; border-collapse:collapse;
}
@media (max-width:560px){
  .post table,article table,.art-main table{font-size:14px}
}

/* ── 320px fixes, each traced to a specific element ──────────────────────────
   Both blog pages reported an identical scrollWidth of 337, which pointed at
   a shared element rather than their tables: the footer link row is a flex
   line that never wrapped. The proof page's ledger table sits in .tbl-wrap,
   which was not scrolling. */
.foot-in,.foot-in > div{flex-wrap:wrap !important}
.foot-in{row-gap:10px}
.tbl-wrap{overflow-x:auto !important;max-width:100% !important;-webkit-overflow-scrolling:touch}
.tbl-wrap table{min-width:0}

@media (max-width:400px){
  .foot-in,.foot-in > div{gap:8px 12px !important}
  .foot-in a{font-size:13px}
}

/* Flex items default to min-width:auto, so they refuse to shrink below their
   content width. The footer link row measured 293px inside a 257px parent for
   exactly this reason. Letting the items shrink lets the links wrap. */
.foot-in > *{min-width:0 !important}
.foot-in a{white-space:normal}

/* At 320 the footer's space-between row cannot fit five links each carrying
   16px of horizontal margin. Stacking is the honest fix; wrapping alone left
   a 17px overhang. */
@media (max-width:420px){
  .foot-in{flex-direction:column !important;align-items:flex-start !important;gap:10px !important}
  .foot-in > *{width:100%}
  .foot-in a{margin:0 12px 0 0 !important;display:inline-block}
}

/* ============================================================
   v2 LAYOUT LAYER  —  the dark opening band, sitewide
   Applies to the markup the live pages already use, so no page
   loses a word of copy: only its clothes change.
   Palette is unchanged: ink #0d0e23, brand #4042E4/#2B2DBC, ok #10B981.
   ============================================================ */

.sec-hero{
  background:#0d0e23;
  position:relative;
  overflow:hidden;
  padding-block:104px 92px !important;
  border-bottom:1px solid rgba(255,255,255,.10);
}
/* one wide brand wash from the top-left, the only lighting in the band */
.sec-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1100px 460px at 10% -12%,rgba(64,66,228,.34),transparent 62%),
    radial-gradient(700px 340px at 92% 0%,rgba(16,185,129,.10),transparent 60%);
}
.sec-hero > *{position:relative;z-index:1}

.sec-hero h1,
.sec-hero .t-display,
.sec-hero strong,
.sec-hero b{color:#fff}

.sec-hero p,
.sec-hero .t-lead,
.sec-hero .t-body,
.sec-hero .sub,
.sec-hero li{color:rgba(255,255,255,.74)}

.sec-hero .t-label{
  color:#10B981;
  border-color:rgba(16,185,129,.45);
}
.sec-hero .t-label::before{background:#10B981}

.sec-hero .trust{
  color:rgba(255,255,255,.46);
  font:500 12.5px/1.65 var(--v2-mono,'JetBrains Mono','SF Mono',Menlo,Consolas,monospace);
  letter-spacing:.04em;
}
.sec-hero a:not(.primary):not(.second):not(.go){
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.34);
  text-decoration:none;
}
.sec-hero a:not(.primary):not(.second):not(.go):hover{
  border-bottom-color:#10B981;color:#fff;
}

/* buttons on the dark band ------------------------------------ */
.sec-hero .primary{
  background:linear-gradient(180deg,#5052ea 0%,#4042E4 46%,#2B2DBC 100%);
  color:#fff;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,
             0 10px 24px -10px rgba(64,66,228,.85);
}
.sec-hero .primary:hover{
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,
             0 14px 30px -10px rgba(64,66,228,.95);
  transform:translateY(-1px);
}
.sec-hero .second{
  background:rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset;
}
.sec-hero .second:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.34);
  transform:translateY(-1px);
}

/* the homepage two-column hero -------------------------------- */
.sec-hero .hero{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:64px;align-items:center;
}
.sec-hero .hero-visual{min-width:0}
@media(max-width:980px){
  .sec-hero .hero{grid-template-columns:1fr;gap:40px}
  .sec-hero{padding-block:72px 64px !important}
}

/* section rhythm below the band ------------------------------- */
.sec{padding-block:88px}
.sec-tight{padding-block:64px}
@media(max-width:720px){
  .sec{padding-block:60px}
  .sec-tight{padding-block:44px}
}

/* the veneer pass above sets these with !important; the dark band has to
   outrank it, so the on-ink variants carry the same weight. */
.sec-hero .t-label{color:#10B981 !important;border-color:rgba(16,185,129,.42) !important}
.sec-hero .t-label::before{background:#10B981 !important}

.sec-hero .primary,.sec-hero a.primary{
  background:linear-gradient(180deg,#5052ea 0%,#4042E4 46%,#2B2DBC 100%) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,
             0 10px 26px -10px rgba(64,66,228,.85) !important;
}
.sec-hero .primary:hover,.sec-hero a.primary:hover{
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset,
             0 16px 32px -10px rgba(64,66,228,.95) !important;
}
.sec-hero .second,.sec-hero a.second{
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.045) 100%) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset !important;
}
.sec-hero .second:hover,.sec-hero a.second:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.08) 100%) !important;
  border-color:rgba(255,255,255,.36) !important;
}

/* .hero .ctas .primary in the veneer is (0,3,0); the band needs to clear it. */
.sec-hero .hero .ctas .primary,
.sec-hero .ctas .primary,
.sec-hero .ctas a.primary{
  background:linear-gradient(180deg,#5052ea 0%,#4042E4 46%,#2B2DBC 100%) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,
             0 10px 26px -10px rgba(64,66,228,.85) !important;
}
.sec-hero .hero .ctas .primary:hover,
.sec-hero .ctas .primary:hover{
  box-shadow:0 1px 0 rgba(255,255,255,.30) inset,
             0 16px 32px -10px rgba(64,66,228,.95) !important;
  transform:translateY(-1px);
}
.sec-hero .hero .ctas .second,
.sec-hero .ctas .second{
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.045) 100%) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
}

/* .t-display / .t-h2 carry !important in the veneer, which on the ink band
   rendered the headline ink-on-ink. Every text role in the band is pinned. */
.sec-hero h1,
.sec-hero .t-display,
.sec-hero h2,
.sec-hero .t-h2,
.sec-hero h3,
.sec-hero .t-h3,
.sec-hero strong,
.sec-hero b{color:#fff !important}

.sec-hero p,
.sec-hero .t-lead,
.sec-hero .t-body,
.sec-hero .t-small,
.sec-hero .sub,
.sec-hero li,
.sec-hero em{color:rgba(255,255,255,.74) !important}

.sec-hero .trust,
.sec-hero .t-meta{color:rgba(255,255,255,.46) !important}

.sec-hero a:not(.primary):not(.second):not(.go):not(.btn){color:#fff !important}

/* ------------------------------------------------------------
   SECTION RHYTHM
   .tint-flat and .tint-brand appear all over the markup but were
   never given a surface, so every band rendered the same white and
   the page read as one undifferentiated wall. Both tints come from
   the locked palette: canvas #fafbfc and a 5% brand wash.
   ------------------------------------------------------------ */
.tint-flat{
  background:#fafbfc;
  border-top:1px solid rgba(229,231,235,.85);
  border-bottom:1px solid rgba(229,231,235,.85);
}
.tint-brand{
  background:
    linear-gradient(180deg,rgba(64,66,228,.055) 0%,rgba(64,66,228,.022) 100%),
    #fff;
  border-top:1px solid rgba(64,66,228,.14);
  border-bottom:1px solid rgba(64,66,228,.14);
  position:relative;
}
/* a single hairline of brand at the top edge, the way a ledger rules a column */
.tint-brand::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#4042E4 18%,#10B981 82%,transparent);
  opacity:.55;
}
/* consecutive tints of the same kind would double the rule */
.tint-flat + .tint-flat{border-top:0}
.tint-brand + .tint-brand{border-top:0}

/* cards need to lift off the tinted surface, not disappear into it */
.tint-flat .card,.tint-flat .box,.tint-flat .tile{background:#fff}

/* Pages that never had tint classes ran four or more identical white
   sections in a row. main[data-rhythm] alternates them against canvas,
   skipping the ink hero and the dark bands so the sequence stays legible. */
main[data-rhythm] > section:not(.sec-hero):not(.dark):not(.sec-air):nth-of-type(2n){
  background:#fafbfc;
  border-top:1px solid rgba(229,231,235,.85);
  border-bottom:1px solid rgba(229,231,235,.85);
}
main[data-rhythm] > section:not(.sec-hero):not(.dark):not(.sec-air):nth-of-type(2n) .card,
main[data-rhythm] > section:not(.sec-hero):not(.dark):not(.sec-air):nth-of-type(2n) .box{
  background:#fff;
}

/* Several pages open with a .sec-air.dark immediately under the hero. With a
   light hero those read as two bands; with the ink hero they fused into one
   slab. The second one steps up to ink-surface #1a1a2e (already in the palette)
   and carries a hairline, so the boundary is legible without a colour change. */
.sec-hero + .sec-air.dark,
.sec-hero + section.dark,
.sec-hero + .sec-air{
  background:#1a1a2e !important;
  border-top:1px solid rgba(255,255,255,.12);
}
/* and if a third dark band follows, step it back down */
.sec-hero + .sec-air.dark + .sec-air.dark{
  background:#0d0e23 !important;
}

/* /tools/ and /faq/ carry a second .sec-hero as a continuation of the first.
   It keeps the ink surface but drops the opening padding and the gradient, so
   the two read as one band rather than two stacked slabs. */
.sec-hero + .sec-hero{
  padding-top:0 !important;
  padding-bottom:80px !important;
  border-top:0;
}
.sec-hero + .sec-hero::after{display:none}
@media(max-width:980px){
  .sec-hero + .sec-hero{padding-bottom:56px !important}
}

/* ------------------------------------------------------------
   OPENING BAND FOR THE PAGES THAT USE THE OLDER HEADER MARKUP
   /blog/ uses .list-head and /proof/ opens with a plain .section;
   both are full-width body children, so they take the band cleanly.
   Article bodies keep a light reading surface: their header sits in
   the 570px centre column of a three-column grid and cannot be
   banded without rebuilding the reading layout.
   ------------------------------------------------------------ */
.list-head,
body > .section.tight:first-of-type{
  background:#0d0e23;
  color:rgba(255,255,255,.74);
  position:relative;
  overflow:hidden;
  padding:104px 24px 92px;
  margin-bottom:0;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.list-head::after,
body > .section.tight:first-of-type::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1100px 460px at 10% -12%,rgba(64,66,228,.34),transparent 62%),
    radial-gradient(700px 340px at 92% 0%,rgba(16,185,129,.10),transparent 60%);
}
.list-head > *,
body > .section.tight:first-of-type > *{position:relative;z-index:1}

.list-head h1,
body > .section.tight:first-of-type h1{color:#fff !important}
.list-head p,
body > .section.tight:first-of-type p,
body > .section.tight:first-of-type .lede{color:rgba(255,255,255,.74) !important}
.list-head .eyebrow,
body > .section.tight:first-of-type .eyebrow{
  color:#10B981 !important;
  border-color:rgba(16,185,129,.42) !important;
}
body > .section.tight:first-of-type a:not(.primary):not(.second):not(.go):not(.btn){
  color:#fff !important;
}
@media(max-width:980px){
  .list-head,
  body > .section.tight:first-of-type{padding:72px 20px 64px}
}

/* ============================================================
   BUTTON GEOMETRY  —  the fix for text sitting outside its box
   The rules above painted a background, a border and a radius onto
   every button class but never gave them the shape to hold it, so
   any button that did not inherit padding from elsewhere rendered
   with padding 0 and the label ran to the edges. Geometry is set
   once, here, for every class that receives a button surface.
   ============================================================ */
.primary,a.primary,.second,a.second,.btn,.btn-pri,.btn-sec,
.nav-cta,.nav-cta a,.hero .ctas .primary,.hero .ctas .second,
.ctas .primary,.ctas .second{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px;
  padding:0 22px !important;
  min-height:48px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  text-align:center;
  text-decoration:none !important;
  box-sizing:border-box !important;
  font-weight:600 !important;
  font-size:15.5px !important;
  width:auto !important;
  max-width:100%;
}
/* the compact button in the sticky header */
.nav-cta,.nav-cta a{
  min-height:40px !important;
  padding:0 16px !important;
  font-size:14.5px !important;
}
/* long labels on narrow screens may wrap rather than overflow */
@media(max-width:520px){
  .primary,a.primary,.second,a.second,.btn-pri,.btn-sec,
  .ctas .primary,.ctas .second{
    white-space:normal !important;
    padding:12px 18px !important;
    min-height:0 !important;
  }
}

/* ------------------------------------------------------------
   .go is a text link with an arrow, not a filled button.
   It had been folded into the primary-button selector, which
   painted a full-width gradient bar behind an 82px label.
   ------------------------------------------------------------ */
.go,a.go{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  width:auto !important;
  background:none !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  min-height:0 !important;
  color:#2B2DBC !important;
  font:600 14.5px/1.4 var(--v2-sans,'Inter',-apple-system,system-ui,sans-serif) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  text-decoration:none !important;
  border-bottom:1px solid transparent !important;
  transition:border-color .18s ease,color .18s ease;
}
.go:hover,a.go:hover{
  color:#4042E4 !important;
  border-bottom-color:#4042E4 !important;
  transform:none !important;
  box-shadow:none !important;
}
.dark .go,.sec-air.dark .go,.sec-hero .go{color:#10B981 !important}
.dark .go:hover,.sec-air.dark .go:hover,.sec-hero .go:hover{
  color:#10B981 !important;border-bottom-color:#10B981 !important;
}

/* ------------------------------------------------------------
   BLOG / ARTICLE NAV
   .nav-in is a three-column grid, but a "Talk to us" link was added
   next to the Sign in button in an earlier pass, making four items.
   The fourth wrapped onto a second grid row, so Sign in rendered
   below the bar and scrolled with the page. The pair now sits in one
   cluster, the way the marketing nav already did it.
   ------------------------------------------------------------ */
.nav-cta-group{
  display:flex;
  align-items:center;
  gap:14px;
  justify-self:end;
  white-space:nowrap;
}
.nav-cta-group > a[href="/specialist/"]{
  margin-right:0 !important;
  display:inline-flex;
  align-items:center;
  min-height:40px;
}
@media (max-width:999.98px){
  .nav-cta-group{display:none}
}

/* ------------------------------------------------------------
   CARD FOOT ALIGNMENT
   Cards already stretch to equal height, but the "Read more" link
   sat directly under the body copy, so it landed at a different
   depth in each card and the row of links stepped up and down.
   Each card becomes a column and the link is pushed to the foot.
   ------------------------------------------------------------ */
.cardgrid > *,
.rescards > *,
.whygrid > *,
.cards > *,
.rcard,
.rescard{
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
}
.cardgrid > * > .go,
.rescards > * > .go,
.whygrid > * > .go,
.cards > * > .go,
.rcard > .go,
.rescard > .go{
  margin-top:auto !important;
  padding-top:16px !important;
}
/* children of a flex card still need to fill the card's width */
.rcard > .rt,.rcard > .rd,
.cardgrid > * > p,.cardgrid > * > span:not(.go),
.rescards > * > p,.rescards > * > span:not(.go){
  width:100%;
}

/* ============================================================
   INLINE LINKS INSIDE SENTENCES
   The pages carry a tap-target rule that gives .hov/.go/.btn a
   48px min-height and inline-flex. That is right for a standalone
   button, but .hov is also used for links inside a paragraph,
   where a 48px box drew the underline ~25px below the words and
   read as a stray outlined box. Links in running text go back to
   normal inline flow. (WCAG 2.5.8 exempts links inside a sentence
   from the target-size minimum, so no accessibility is lost.)
   ============================================================ */
p .hov, li .hov, td .hov, dd .hov,
p .go:not(.card .go), li .go,
.t-lead .hov, .t-body .hov, .t-small .hov,
.trust .hov, .sub .hov, .lede .hov, .auth-sub .hov{
  display:inline !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
  gap:0 !important;
  white-space:normal !important;
  line-height:inherit !important;
  vertical-align:baseline !important;
}

/* on the ink band, a link inside a sentence reads as a link:
   the emerald accent already in the palette, not plain white. */
.sec-hero p a:not(.primary):not(.second):not(.go):not(.btn),
.sec-hero li a:not(.primary):not(.second):not(.go):not(.btn),
.list-head p a,
body > .section.tight:first-of-type p a:not(.primary):not(.second){
  color:#10B981 !important;
  border-bottom:1px solid rgba(16,185,129,.42) !important;
  text-decoration:none !important;
}
.sec-hero p a:not(.primary):not(.second):not(.go):not(.btn):hover,
.sec-hero li a:not(.primary):not(.second):not(.go):not(.btn):hover,
.list-head p a:hover,
body > .section.tight:first-of-type p a:not(.primary):not(.second):hover{
  color:#10B981 !important;
  border-bottom-color:#10B981 !important;
}

/* ============================================================
   FOOTER
   Four links had been packed into one <li>, so they rendered as
   "ProofCoverageAssurance statementFor advisers". The markup is
   fixed; this gives the grid real measurements: a wider brand
   column, even link columns, and a comfortable rhythm down each
   list so the block reads as three tidy columns rather than a wall.
   ============================================================ */
.site-foot .foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:48px 40px;
  align-items:start;
  padding-block:56px 40px;
}
.site-foot .foot-brand{max-width:34ch}
.site-foot .foot-brand p{margin-top:14px}

.site-foot .foot-col h4{
  margin:0 0 16px !important;
  white-space:nowrap;
}
.site-foot .foot-col ul{display:flex;flex-direction:column;gap:2px}
.site-foot .foot-col li{padding:0 !important}
.site-foot .foot-col a{
  display:inline-block;
  padding:6px 0;
  line-height:1.4;
  border-bottom:1px solid transparent;
}
.site-foot .foot-col a:hover{
  color:#2B2DBC;
  border-bottom-color:rgba(43,45,188,.35);
}

/* the base bar: rule above, generous breathing room, links spaced */
.site-foot .foot-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px 28px;
  padding-block:22px 28px;
  border-top:1px solid #e5e7eb;
  font-size:13px;
  color:#6b7280;
}
.site-foot .foot-base-links{display:flex;gap:24px;flex-wrap:wrap}
.site-foot .foot-base-links a{
  color:#6b7280;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.site-foot .foot-base-links a:hover{color:#2B2DBC;border-bottom-color:rgba(43,45,188,.35)}

@media (max-width:900px){
  .site-foot .foot-grid{grid-template-columns:1fr 1fr;gap:40px 32px}
  .site-foot .foot-brand{grid-column:1 / -1;max-width:52ch}
}
@media (max-width:520px){
  .site-foot .foot-grid{grid-template-columns:1fr;gap:32px;padding-block:44px 32px}
  .site-foot .foot-base{flex-direction:column;align-items:flex-start}
}