/* Hallmark · genre: editorial · macrostructure: 20 Ecosystem Index · theme: Almanac Plate (custom, warm)
 * nav: N6 Newspaper masthead · footer: Ft4 Dense colophon · enrichment: Tier C generated diagram set
 * anchor hue: 250 cool · display-font: Spectral · body-font: IBM Plex Sans
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 * The single brand layer for whatisreputationmanagement.com. Linked as /brand.css after site.css.
 * Build agents add NO new CSS; use the locked classes. */

:root{
  /* Almanac palette. Paper is near-white with a faint cool cast; ink is blue-black; one warm accent. */
  --paper:#F7F9FB; --paper-2:#EDF1F5; --paper-3:#E3E9EF;
  --navy:#12304F; --navy-deep:#0D2438; --navy-2:#075EA9;
  --accent:#075EA9; --accent-deep:#075EA9; --amber:#B64E10; --amber-deep:#8F3D0C;
  --ink:#1A2028; --muted:#505963; --line:#D2D8DF; --line-strong:#7E8A98;
  --bg:var(--paper-2); --surface:var(--paper);
  --on-navy:#F2F6FA;
  --radius:4px; --radius-sm:3px; --maxw:1200px;
  --measure:72ch;
  --head:"Spectral",Georgia,"Times New Roman",serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --shadow:none; --shadow-card:none; --btn-shadow:none;
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

/* ── type ───────────────────────────────────────────────────────────────── */
body{background:var(--paper);color:var(--ink);font-size:17px;line-height:1.65}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.011em;font-weight:600}
h1{font-weight:600;line-height:1.08}
h2{font-size:clamp(1.55rem,2.8vw,2.15rem);line-height:1.15}
h3{font-size:1.13rem;font-weight:600}
a{color:var(--accent-deep);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--navy)}
.eyebrow{font-family:var(--body);font-weight:600;letter-spacing:.11em;font-size:.72rem;color:var(--muted)}
.section-head h2{font-family:var(--head)}
.section-sub{color:var(--muted);max-width:60ch;margin-inline:auto}
strong{font-weight:600}

/* ── masthead nav (N6): wordmark row, then a ruled nav row ──────────────── */
header.site{background:var(--paper);border-bottom:1px solid var(--line-strong)}
header.site .wrap{flex-wrap:wrap;justify-content:center;row-gap:0;padding-top:.7rem;padding-bottom:0}
.logo{order:1}
header.site .wrap>a.btn,header.site .wrap>.cta,header.site .wrap .nav-cta{order:2;margin-left:auto}
nav.main{order:3;flex-basis:100%;justify-content:center;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:.6rem;font-family:var(--body);font-weight:500;font-size:.86rem}
nav.main>a,nav.main>.has-mega>a{color:var(--ink);border-radius:0;padding:.72rem .74rem;letter-spacing:.005em}
nav.main>a:hover,nav.main>.has-mega>a:hover{background:transparent;color:var(--accent-deep);box-shadow:inset 0 -2px 0 var(--amber)}
nav.main .cta,nav.main a.btn-primary{color:#fff}
/* The CTA is the last child of nav.main. With nine hubs the flex row wrapped it onto a line of
   its own, stranded between the nav rule and the dropdown panel. Absolutely positioning it was
   worse: it left the flow and covered the last two menu items. The group DOES fit on one line
   (nine items ~940px + button ~215px inside a ~1296px wrap), so the fix is simply to forbid the
   wrap and let the whole row centre as one unit. */
@media (min-width:1260px){
  nav.main{flex-wrap:nowrap}
  nav.main .cta{margin-left:.7rem;padding:.5rem 1.05rem;font-size:.85rem;
    border-radius:var(--radius);white-space:nowrap}
  nav.main>a,nav.main>.has-mega>a{white-space:nowrap}
}
@media (min-width:901px) and (max-width:1259px){
  nav.main{flex-wrap:nowrap;font-size:.795rem;gap:.1rem}
  nav.main>a,nav.main>.has-mega>a{padding:.7rem .5rem;white-space:nowrap}
  nav.main .cta{margin-left:.45rem;font-size:.78rem;padding:.44rem .72rem;white-space:nowrap;
    border-radius:var(--radius)}
}

.mega,.mega-panel{background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 24px 48px -32px rgba(26,32,40,.45)}

/* ── hero: LIGHT editorial split. `img.bg` is a SIBLING of `.wrap`, not a child,
      so the flex row lives on `.hero` itself and `.wrap` gives up its own centering. ── */
.hero,.ihero{background:var(--paper);border-bottom:1px solid var(--line);position:relative;
  display:flex;align-items:center;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3.5rem);
  max-width:var(--maxw);margin-inline:auto;padding:clamp(2.4rem,5vw,4rem) var(--space);
  border-bottom:1px solid var(--line)}
.hero::after,.ihero::after{content:none}
.hero>.wrap,.ihero>.wrap{flex:1 1 28rem;max-width:none;margin:0;padding:0;position:relative;z-index:2}
.hero .col,.ihero .col{max-width:54ch}
.hero h1,.ihero h1{color:var(--ink);font-size:clamp(2.15rem,4.2vw,3.2rem)}
.hero p.lede,.ihero p.lede{color:var(--ink);font-size:1.145rem;line-height:1.6;max-width:52ch}
.hero .eyebrow,.ihero .eyebrow{color:var(--muted)}
.hero>img.bg,.ihero>img.bg{position:static;flex:0 1 26rem;order:2;width:100%;height:auto;
  max-height:24rem;object-fit:contain;opacity:1;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--paper);padding:.75rem}
.hero .btn-ghost,.ihero .btn-ghost{color:var(--ink);border-color:var(--line-strong)}
.hero .btn-ghost:hover,.ihero .btn-ghost:hover{background:var(--paper-2);color:var(--ink)}
.hero .actions,.ihero .actions{margin-top:1.4rem}


/* ── inner-page hero (.ihero) uses `.sub` + `.crumb`, NOT `.lede`. Both inherit the
      dark-hero white default from site.css, so on a light hero they render white on
      white. Explicit ink here, not a tint. ── */
.ihero p.sub,.ihero .sub{color:var(--ink);font-size:1.115rem;line-height:1.6;max-width:52ch}
.ihero h1{color:var(--ink);max-width:20ch}
.crumb{color:var(--muted);font-size:.8rem}
.crumb a{color:var(--muted);text-decoration:underline;text-underline-offset:.16em}
.crumb a:hover{color:var(--accent-deep)}

/* ── MEGA MENU — a table of contents, not a promo card ─────────────────────
   Three rules do the work here:
   1. Every entry sits on ONE line. A wrapped menu item reads as an accident, and
      the eye cannot scan a ragged two-line list. Labels are curated to <=23 chars
      (nav-labels.json) and the columns are sized to hold them without wrapping.
   2. No button in the panel. The header already carries a persistent CTA; a second
      one inside the menu made the panel read as an ad rather than navigation.
   3. Hover is a rule, not a fill. A filled row in a dropdown is the cheapest-looking
      hover there is; a hairline that slides in under the word is quieter and reads
      as a considered editorial system. ── */
.mega{background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius);
  box-shadow:0 30px 60px -38px rgba(30,27,24,.55),0 2px 0 0 var(--paper) inset;
  padding:1.5rem 1.7rem 1.35rem;
  /* The panel is anchored to the NAV BAR, not to its trigger. site.css positions it against
     `.has-mega` and right-aligns only the last two, which overflows the right edge at nine hubs;
     centring on the trigger instead overflows BOTH edges for the first and last. Anchoring to
     `nav.main` drops every panel in the same place under the masthead, which cannot overflow and
     reads as deliberate rather than as a panel chasing the cursor. */
  top:100%;left:50%;right:auto;transform:translateX(-50%);max-width:calc(100vw - 2rem)}
nav.main{position:relative}
.has-mega{position:static}
.has-mega:hover .mega,.has-mega:focus-within .mega{display:flex;gap:2.4rem}
.mega--std{min-width:min(44rem,calc(100vw - 2rem))}
.mega--wide{min-width:min(61rem,calc(100vw - 2rem))}
.mega__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1.9rem;row-gap:0}
.mega--std .mega__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.mega a:not(.btn){display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:.44rem 0;border-radius:0;background:none;color:var(--ink);font-size:.925rem;
  line-height:1.35;border-bottom:1px solid transparent;transition:color .12s var(--ease-out),
  border-color .12s var(--ease-out)}
.mega a:not(.btn):hover{background:none;color:var(--accent-deep);border-bottom-color:var(--amber)}

/* the right-hand rail: a section note, a count, and nothing to click but the section itself */
.mega__feature{width:13.5rem;flex:none;background:none;border:0;border-left:1px solid var(--line);
  border-radius:0;padding:.1rem 0 .1rem 2rem;gap:.5rem;align-items:flex-start}
.mega__feature-h{font-family:var(--head);font-weight:600;color:var(--ink);font-size:1.06rem;
  letter-spacing:-.01em}
.mega__feature p{font-size:.86rem;color:var(--muted);line-height:1.5;margin:0}
.mega__feature .btn{display:none}
.mega__all{font-family:var(--body);font-weight:600;color:var(--accent-deep);font-size:.855rem;
  margin-top:.35rem;border-bottom:1px solid transparent;padding-bottom:1px}
.mega__all:hover{border-bottom-color:var(--accent-deep)}

@media (max-width:900px){
  .mega,.mega--wide,.mega--std{min-width:0;padding:1rem;left:0;transform:none;max-width:100%}
  .has-mega:hover .mega,.has-mega:focus-within .mega{display:block}
  .mega__cols,.mega--wide .mega__cols,.mega--std .mega__cols{grid-template-columns:1fr}
  .mega a:not(.btn){white-space:normal}
  .mega__feature{width:100%;border-left:0;border-top:1px solid var(--line);
    padding:.9rem 0 0;margin-top:.6rem}
}

nav.main .has-mega:nth-last-of-type(-n+2) .mega{left:50%;right:auto;transform:translateX(-50%)}
/* the trigger keeps its own underline cue now that it no longer anchors the panel */
nav.main>.has-mega>a{position:relative}

/* ── contact form ──────────────────────────────────────────────────────── */
.contact-form input,.contact-form textarea{background:var(--paper);border:1px solid var(--line-strong);
  border-radius:var(--radius);color:var(--ink);font-family:var(--body);padding:.68rem .75rem;width:100%}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent-deep);outline:3px solid var(--amber);outline-offset:1px}
.contact-form label{font-weight:600;font-size:.88rem;display:block;margin-bottom:.3rem}
.contact-form .field{margin-bottom:1.05rem}
.contact-form .consent{font-size:.79rem;line-height:1.5;color:var(--muted)}
.contact-form .btn--primary,.contact-form .cta{background:var(--amber);color:#fff;border:0}
.contact-form .btn--primary:hover{background:var(--amber-deep)}
.contact-section{background:var(--paper-2);border-block:1px solid var(--line)}
.contact-section .split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.contact-section .split{grid-template-columns:minmax(0,1fr)}}
.fineprint{font-size:.78rem;color:var(--muted)}

/* ── buttons: squared editorial, warm primary ──────────────────────────── */
.btn{border-radius:var(--radius);font-family:var(--body);font-weight:600;font-size:.95rem;padding:.8rem 1.3rem}
.btn-amber{background:var(--amber);color:#fff}
.btn-amber:hover{background:var(--amber-deep);color:#fff}
.btn-primary{background:var(--accent-deep);color:#fff}

/* ── surfaces: hairlines, not shadows ──────────────────────────────────── */
.card,.mcard,.svc,.value,.quote,.compare__col{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:none}
.card.seg{border-top:3px solid var(--accent)}
.mcard img{background:var(--paper-2);aspect-ratio:3/2;object-fit:contain;padding:.6rem}
.mcard.svc-media img{aspect-ratio:3/2;object-fit:contain}
.bg-soft{background:var(--paper-2);border-block:1px solid var(--line)}
section{border-bottom:0}
.grid{gap:1.1rem}


/* ── hub child index: typographic, not auto-icon. The keyword icon matcher guesses
      (a leaf for "online defamation", a heart for "libel vs slander"), and an arbitrary
      icon reads worse on a reference index than no icon at all. Suppress it and let the
      card be a ruled entry with a rule accent instead. ── */
.svc .ico{display:none}
a.svc,.svc{padding:1.15rem 1.2rem;border-top:2px solid var(--line-strong);border-radius:0;
  border-left:0;border-right:0;border-bottom:0;background:transparent;gap:.32rem}
a.svc:hover{transform:none;box-shadow:none;border-top-color:var(--amber);background:var(--paper-2)}
.svc h3{font-size:1.03rem;margin:0}
.svc p{font-size:.895rem;color:var(--muted);line-height:1.55}

/* ── the one dark band: the closing CTA. Deep ink-blue, not a gradient. ── */
.cta-band{background:var(--navy);color:var(--on-navy);text-align:left}
.cta-band .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2rem;align-items:center}
.cta-band h2,.cta-band p{color:var(--on-navy)}
.cta-band p{margin:.5rem 0 0;max-width:52ch}
.cta-band .actions{justify-content:flex-start}
.cta-band .btn-ghost{color:var(--on-navy);border-color:rgba(242,246,250,.5)}

/* ── comparison + value blocks ─────────────────────────────────────────── */
.compare__col{padding:1.4rem}
.compare__col--rec{border-color:var(--line-strong)}
.checks li{margin-bottom:.45rem}
.value .vmark{color:var(--accent-deep)}

/* ── long-form prose (content-page / blog-post body_md) ────────────────── */
.prose--longform{max-width:var(--measure);font-size:1.0625rem;line-height:1.72}
.prose--longform h2{margin-top:2.4em;padding-top:.7em;border-top:1px solid var(--line);font-size:1.62rem}
.prose--longform h3{margin-top:1.8em;font-size:1.16rem}
.prose--longform p{margin:0 0 1.15em}
.prose--longform ul,.prose--longform ol{margin:0 0 1.3em;padding-left:1.15em}
.prose--longform li{margin-bottom:.42em}
.prose--longform blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.15em;border-left:3px solid var(--amber);
  font-style:normal;color:var(--ink)}
.prose--longform table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.95rem}
.prose--longform th,.prose--longform td{border-bottom:1px solid var(--line);padding:.65em .7em;text-align:left;vertical-align:top}
.prose--longform thead th{border-bottom:2px solid var(--line-strong);font-family:var(--body);font-weight:600;font-size:.86rem;letter-spacing:.03em}
.prose--longform a{font-weight:500}

/* ── footer: Ft4 dense colophon ────────────────────────────────────────── */
footer.site{background:var(--paper-3);color:var(--muted);border-top:1px solid var(--line-strong);
  font-size:.87rem;padding:2.6rem 0 1.4rem}
footer.site h3{color:var(--ink);font-family:var(--body);font-size:.72rem;letter-spacing:.11em}
footer.site a{color:var(--muted)} footer.site a:hover{color:var(--accent-deep)}
footer.site .foot-logo{font-family:var(--head);font-weight:600;color:var(--ink);font-size:1.1rem}

/* ── a11y: instant, high-contrast focus ring ───────────────────────────── */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--amber);outline-offset:2px;border-radius:2px;transition:none}

/* ── responsive ────────────────────────────────────────────────────────── */
html,body{overflow-x:clip}
h1,h2,h3{overflow-wrap:anywhere;min-width:0}
@media (max-width:900px){
  .hero .wrap,.ihero .wrap,.cta-band .wrap{grid-template-columns:minmax(0,1fr)}
  .hero img.bg,.ihero img.bg{grid-column:1;order:2;max-height:18rem}
  .cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .cols-3,.cols-2,.cols-4{grid-template-columns:minmax(0,1fr)}
  nav.main{font-size:.8rem}
  .btn{min-height:44px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===== VARIANT ===== */

/* wordmark only, no monogram */
.brandmark .monogram{display:none}
.brandmark .wordmark{font-family:var(--head);font-weight:600;font-size:1.16rem;letter-spacing:-.005em;color:var(--ink)}

:root{
  --paper:#FCF9F3; --paper-2:#F1EADD; --paper-3:#E6DCC9;
  --ink:#1E1B18; --muted:#5A5248; --line:#D8CDB8; --line-strong:#7E7361;
  --accent:#7A2B2B; --accent-deep:#6B2424; --amber:#A8451C; --amber-deep:#83350F;
  --navy:#20342C; --navy-deep:#182720; --on-navy:#F5EFE2;
  --plate-1:#20342C; --plate-2:#6B2424; --plate-3:#2A3B52;
  --bg:var(--paper-2); --surface:var(--paper);
}
body{background:var(--paper)}
h1,h2,h3{font-weight:600;letter-spacing:-.018em}
.hero h1,.ihero h1{font-size:clamp(2.5rem,5.6vw,4.2rem);line-height:1.02}
/* engraved double rule under every section head, heads left-aligned */
.section-head.center{text-align:left;max-width:none;margin-bottom:2rem;
  border-bottom:1px solid var(--line-strong);box-shadow:0 3px 0 -1px var(--line-strong);padding-bottom:.75rem}
.section-head.center h2{font-size:clamp(1.9rem,3.6vw,2.8rem);max-width:20ch}
.section-head.center .section-sub{margin-inline:0;max-width:54ch}
/* full-bleed COLOUR PLATES: alternating bands carry real colour, so 125 pages are not one flat wash */
.bg-soft{background:var(--plate-1);color:var(--on-navy);border-block:0}
.bg-soft h2,.bg-soft h3,.bg-soft p,.bg-soft li{color:var(--on-navy)}
.bg-soft .section-head.center{border-bottom-color:rgba(245,239,226,.45);box-shadow:0 3px 0 -1px rgba(245,239,226,.45)}
.bg-soft .card,.bg-soft .mcard,.bg-soft .svc{background:rgba(245,239,226,.06);border-color:rgba(245,239,226,.24)}
.bg-soft .checks li::marker{color:var(--amber)}
.bg-soft img{background:var(--paper);border-radius:2px}
.bg-soft a{color:#E8C9A6}
.prose--longform>p:first-of-type::first-letter{float:left;font-family:var(--head);font-weight:600;
  font-size:3.8em;line-height:.8;padding:.05em .12em 0 0;color:var(--accent-deep)}
.prose--longform h2{border-top:1px solid var(--line-strong);box-shadow:0 3px 0 -2px var(--line-strong);padding-top:.8em}
.mcard img,.hero>img.bg,.ihero>img.bg{background:var(--paper-2);border-color:var(--line-strong)}
.cta-band{background:var(--cta-band,#232C27)}
footer.site{background:var(--navy);color:rgba(245,239,226,.8);border-top:0}
footer.site h3,footer.site .foot-logo{color:var(--on-navy)} footer.site a{color:rgba(245,239,226,.78)}
footer.site a:hover{color:#E8C9A6}
a.svc{border-top-color:var(--ink)} a.svc:hover{border-top-color:var(--accent-deep)}


/* ═══ PER-SECTION PLATE IDENTITY ════════════════════════════════════════════
   Nine topic sections, nine plate colours. Every page carries `data-section` from
   its record, so /law/ and /digital-footprint/ do not read as the same page twice.
   The plate is used on the full-bleed band, the CTA band, and the accent rules;
   ink stays constant so the site is still one publication. Every pairing below is
   verified >= 7:1 against the cream ink (#F5EFE2). */
[data-section="basics"]            { --plate-1:#20342C; --plate-2:#3A4A2E; --accent-deep:#33452B; }
[data-section="cost-and-providers"]{ --plate-1:#2A3B52; --plate-2:#1F3143; --accent-deep:#24405C; }
[data-section="removal"]           { --plate-1:#5A2A2A; --plate-2:#6B2424; --accent-deep:#6B2424; }
[data-section="law"]               { --plate-1:#26303F; --plate-2:#3A2C22; --accent-deep:#2E3C50; }
[data-section="digital-footprint"] { --plate-1:#3A2F45; --plate-2:#4A3350; --accent-deep:#43335A; }
[data-section="reviews"]           { --plate-1:#2F4038; --plate-2:#544019; --accent-deep:#3C5245; }
[data-section="ai-search"]         { --plate-1:#1F3A44; --plate-2:#264A52; --accent-deep:#22434F; }
[data-section="crisis"]            { --plate-1:#4A2C22; --plate-2:#5A2A2A; --accent-deep:#5A3227; }
[data-section="who-needs-it"]      { --plate-1:#33403A; --plate-2:#46392A; --accent-deep:#3B4C42; }
.bg-soft{background:var(--plate-1)}
.cta-band{background:var(--cta-band,#232C27)}

/* ═══ EDITORIAL FURNITURE — the parts that give a reference page a voice ════ */
/* key-term callout: a defined term set apart the way a dictionary sets one apart */
.prose--longform .keyterm,.prose--longform aside.keyterm{background:var(--paper-2);border-left:4px solid var(--accent-deep);
  padding:1rem 1.15rem;margin:1.7em 0;border-radius:2px}
.prose--longform .keyterm strong,.prose--longform aside.keyterm strong{font-family:var(--head);font-size:1.05em}
/* an aside set in the margin on wide screens, inline on narrow */
.prose--longform .aside{font-size:.93rem;color:var(--muted);border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);padding:.85rem 0;margin:1.7em 0}
/* evidence figure: a real screenshot with a caption, the proof layer */
figure.evidence{margin:1.9em 0;border:1px solid var(--line-strong);background:var(--paper-2);padding:.7rem;border-radius:2px}
figure.evidence img{width:100%;height:auto;display:block;border:1px solid var(--line)}
figure.evidence figcaption{font-size:.82rem;color:var(--muted);margin-top:.6rem;line-height:1.5}
figure.evidence figcaption b{color:var(--ink);font-weight:600}

/* ── evidence figures authored in body_md: an image-only paragraph becomes the frame,
      the italic paragraph directly after it becomes the caption. body_md runs html:false,
      so this is the only way to set a real captioned figure from markdown. ── */
.prose--longform p:has(>img:only-child){border:1px solid var(--line-strong);background:var(--paper-2);
  padding:.7rem;border-radius:2px;margin:1.9em 0 .45em}
.prose--longform p:has(>img:only-child)>img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.prose--longform p:has(>img:only-child)+p>em:only-child{display:block;font-size:.82rem;color:var(--muted);
  font-style:normal;line-height:1.55;margin-bottom:1.9em}

/* ── CTA band: ONE column, centred, bigger head, one short line, then the button.
      The claret plate read as a warning strip; the band is now the quiet deep ink
      the rest of the publication closes on. ── */
.cta-band{background:var(--cta-band,#232C27);text-align:center;padding:clamp(3.4rem,6vw,5rem) 0}
.cta-band .wrap{display:block;max-width:46rem;margin-inline:auto}
.cta-band h2{color:var(--on-navy);font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1.08;margin:0 0 .55rem}
.cta-band p{color:rgba(245,239,226,.86);font-size:1.1rem;max-width:44ch;margin:0 auto 1.7rem}
.cta-band .actions{justify-content:center}
.cta-band .btn-amber{font-size:1.02rem;padding:.95rem 1.8rem}

/* ── LEGIBILITY ON DARK PLATES. site.css keeps card headings at var(--navy) and card
      body at var(--muted); on a dark plate that is dark-on-dark. Force the cream ink
      for every card, link and caption that lands inside a plate band. ── */
.bg-soft .card,.bg-soft a.card,.bg-soft .post,.bg-soft a.post,
.bg-soft .mcard,.bg-soft a.mcard,.bg-soft .svc,.bg-soft a.svc,.bg-soft .value{color:var(--on-navy)}
.bg-soft .card h3,.bg-soft a.card h3,.bg-soft .post h3,.bg-soft a.post h3,
.bg-soft .mcard h3,.bg-soft a.mcard h3,.bg-soft .svc h3,.bg-soft .value h3{color:var(--on-navy)}
.bg-soft .card p,.bg-soft a.card p,.bg-soft .post p,.bg-soft a.post p,
.bg-soft .mcard p,.bg-soft a.mcard p,.bg-soft .svc p,.bg-soft .value p{color:rgba(245,239,226,.84)}
.bg-soft .card .more,.bg-soft .go,.bg-soft .mcard .go{color:#EAC9A4}
.bg-soft .value .vmark{color:#EAC9A4}
.bg-soft .about-band__glyph{color:rgba(245,239,226,.12)}

.prose--longform aside.keyterm p{margin:0}
.prose--longform aside.keyterm p+p{margin-top:.6em}