@charset "utf-8";
/* =========================================================================
   Design tokens & modernised base layer
   Loaded BEFORE style.css so legacy rules can still override where needed.
   ========================================================================= */

:root {
  /* =======================================================================
     BRAND v2.0 — "Deep forest on warm paper. The press to Inscribe's institute."
     Source of truth: bpr-assets/brands/bpr/brand-guidelines.html
     Forest is the new primary; vivid green is demoted to accent (badges +
     success states only). OKLCH values are reference; hex is canonical here.
     ======================================================================= */

  /* ---- v2 PRIMARY palette — deep forest ---- */
  --color-primary:        #1F5236;   /* deep forest — primary CTAs, links, accents */
  --color-secondary:      #377A4F;   /* lighter forest — hover states */
  /* Accent = golden yellow (brand v2.1, Scribendi-style refinement 2026-06-16).
     The true accent — a CONTRASTING hue, not a brighter green. A clearer, more
     vivid yellow than the previous antique gold (#B8893E), which read muted.
     Forest is the action colour for EVERY button, link, and active state EXCEPT
     one: yellow fills the single highest-intent CONVERSION CTA per view
     (hero/masthead marquee, instant-quote "proceed", foot-of-page band, checkout
     "Pay") via .btn-pill--accent — the one contrasting "click here" the eye lands
     on. Yellow also carries badges, promo chips, star ratings, and single
     highlight marks. Used as a fill (with --color-accent-ink text — white/light
     text on yellow fails contrast) or as a glyph colour. There is exactly ONE
     gold: accent-coloured TEXT on paper is NOT a separate amber — it is forest
     (the action colour), so eyebrows, links, and labels never introduce a second
     gold beside the yellow. Yellow is NEVER a generic button fill across all
     buttons and never a co-lead field — a glint, not a second large field.
     Vivid green is no longer an accent — it is only the success semantic. */
  --color-accent:         #F5B82E;   /* golden yellow — badges, chips, stars, marks */
  --color-accent-strong:  #E0A41E;   /* yellow hover/active (interactive accent) */
  /* RETIRED: was a deep amber (#8A6420) for "accent text on paper". That read as
     a SECOND gold beside the yellow (the eyebrows smell). Accent text on paper is
     now forest — one gold only. Kept as a token so existing consumers repoint in
     one place; chip text that sits on a yellow wash uses --color-accent-ink. */
  --color-accent-text:    var(--color-primary);
  --color-accent-ink:     #33260E;   /* ink text on a yellow fill */
  --color-accent-wash:    rgba(245, 184, 46, 0.14);  /* yellow chip/badge tint bg */
  --color-accent-line:    rgba(245, 184, 46, 0.42);  /* yellow chip/badge border */
  --color-deep-shadow:    #143524;   /* deep shadow green — footer accents, depth */

  /* ---- v2 SURFACE family (shared paper substrate with Inscribe) ---- */
  --color-paper:   #FAFAF7;          /* page background — SHARED with Inscribe */
  --color-panel:   #F4F2EC;          /* cards / sectional surfaces */
  --color-border:  #E5E3DC;          /* dividers / hairlines */
  --color-cream:   #F5F1E8;          /* warm wash section accents — SHARED */
  --color-mint:    #EFF8EF;          /* testimonial / quote backgrounds */
  --color-ink:     #2E221E;          /* warm near-black ink */

  /* ---- Brand palette aliases — kept so existing consumers don't break,
     but REMAPPED to the v2 intent. The single lever that kills "too green":
     --brand-green-700 (the de-facto primary used everywhere) now resolves
     to deep forest, so every existing var(--brand-green-700) consumer
     instantly becomes forest. Vivid green now survives only as the success
     semantic (--color-success); the accent is golden yellow, not green. */
  --brand-green-700: var(--color-primary);    /* was vivid → deep forest */
  --brand-green-500: var(--color-secondary);  /* was vivid → lighter forest (hover) */
  --brand-green-300: #9BBFA8;                  /* muted forest tint — focus rings, hairlines */
  --brand-green-100: #E4EDE7;                  /* soft forest wash — icon chips */
  --brand-green-50:  #EFF4F0;                  /* faintest forest wash */

  /* ---- Use-case audience palette ----
     Per-slug wayfinding hues shared by the homepage use-case cards
     (.svc-card__icon--<slug>) and the meganav Use-cases dropdown + mobile
     accordion (.meganav__flyout-item--<slug> / .meganav__m-sublink--<slug>).
     The bare value is the saturated glyph colour (both surfaces); `-wash` is the
     soft tile background (cards only). academic anchors on brand forest; none is
     gold, so the single-gold CTA rule stays intact. */
  --usecase-academic:           var(--brand-green-700);
  --usecase-academic-wash:      var(--brand-green-100);
  --usecase-authors:            #9B4779;   /* plum */
  --usecase-authors-wash:       #F5E9F0;
  --usecase-professionals:      #3A5A8C;   /* slate blue */
  --usecase-professionals-wash: #E7ECF6;
  --usecase-students:           #12776E;   /* teal */
  --usecase-students-wash:      #E0F0EE;
  --usecase-technical:          #574BB0;   /* indigo */
  --usecase-technical-wash:     #EAE7F8;

  --brand-ink-900:      #2E221E;  /* warm near-black, body text */
  --brand-charcoal-800: #2D2F31;  /* footer band */
  --brand-charcoal-700: #3C3C3B;  /* secondary text */
  --brand-charcoal-500: #67747C;  /* muted */

  --brand-paper-50:  #FAFAF7;     /* page background */
  --brand-paper-100: #F4F2EC;     /* panel background */
  --brand-paper-200: #E5E3DC;     /* borders / dividers */

  --brand-mint-50:  #EFF8EF;      /* legacy pastel wash — retired as a section bg */
  --brand-cream-50: #F5F1E8;      /* warm section wash (v2 cream) */
  --brand-sand-50:  #EEE8DC;      /* warm stone — RETIRED as a section field (see greige) */
  --brand-greige-50: #EAE6DD;     /* warm greige — THE single alternate section wash
                                     (resolve-color-scheme). Paper canvas + this one
                                     wash are the only two light fields; cream/sand/panel
                                     and full-bleed white are retired as section fields. */

  /* Semantic */
  --color-text:        var(--brand-ink-900);
  --color-text-muted:  var(--brand-charcoal-500);
  --color-bg:          var(--brand-paper-50);
  --color-accent-hi:   var(--color-secondary);
  --color-success:     #3FA561;   /* vivid green — success semantic, DECOUPLED from
                                     --color-accent (now gold). Success stays green. */
  --color-error:       #8E2421;   /* error / destructive — notification badges, form errors */

  /* Type scale — v2 two-family editorial system: Lora display + Inter body.
     The two retired v1 families are gone; aliases resolve to the v2 families. */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   var(--font-display);  /* alias — legacy consumers */
  --font-sans:    var(--font-body);     /* alias — legacy consumers (now Inter) */
  /* Long-form reading body (blog article prose). Source Serif 4 — the
     editorial "reading" serif sanctioned by the brand guidelines for
     article surfaces where Inter feels too UI-flavoured. Loaded only on
     blog post pages (see blog/post.html). Falls back to the display serif
     stack if the webfont hasn't loaded. */
  --font-prose:   'Source Serif 4', Georgia, 'Times New Roman', serif;

  --fs-display: 3.5rem;    /* 56px hero (v2: tightened 60→56) */
  --fs-h1:      2.5rem;    /* 40px masthead */
  --fs-h2:      2rem;      /* 32px section title */
  --fs-h3:      1.5rem;    /* 24px subsection */
  --fs-h4:      1.25rem;   /* 20px card title */
  --fs-body:    1rem;      /* 16px */
  --fs-sm:      0.875rem;  /* 14px */
  --fs-xs:      0.75rem;   /* 12px label */

  --lh-display: 1.1;
  --lh-heading: 1.25;
  --lh-body:    1.65;

  /* Canonical vertical rhythm for running prose. Every paragraph / list /
     blockquote in a body-copy context gets this as its bottom margin so the
     gap BETWEEN stacked paragraphs is uniform site-wide. Consume this token
     (or the `.prose` utility) instead of hand-picking a margin per block —
     that hand-picking is what produced the divergent paragraph spacing. */
  --prose-gap: 1rem;

  /* Comfortable reading measure for long-form copy. Caps line length so text
     stays readable on wide viewports (the eye loses the next line beyond
     ~75 chars). Consumed by `.prose`. */
  --measure: 68ch;

  /* Spacing scale (8pt grid) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6rem;

  /* Radius / shadow */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  /* Button corner (design-refinement 2026-07-10). Squared, ~8px — the reedsy/
     scribendi/proofed bar uses small-radius rectangular buttons; the fully-round
     pill read consumer-app. Consumed by .btn-pill and the meganav buttons. The
     true --radius-pill (999px) is kept for GENUINE pills only: subnav chips,
     status pills, promo/notif chips, count badges. */
  --radius-btn:  8px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(46, 34, 30, 0.06), 0 1px 1px rgba(46, 34, 30, 0.04);
  --shadow-2: 0 4px 10px rgba(46, 34, 30, 0.08), 0 2px 4px rgba(46, 34, 30, 0.04);
  --shadow-3: 0 14px 32px rgba(46, 34, 30, 0.12), 0 6px 12px rgba(46, 34, 30, 0.06);
  --shadow-4: 0 28px 60px rgba(46, 34, 30, 0.18), 0 10px 22px rgba(46, 34, 30, 0.10);

  /* Layout */
  --container-narrow: 720px;
  --container-wide:   1240px;

  /* Fixed navbar height — used by any first-section to offset top padding
     so visible padding is correct under the overlay. Recomputed on
     responsive breakpoints below. */
  --nav-height: 78px;
}

@media (max-width: 768px) {
  :root { --nav-height: 70px; }
}

/* -----------------------------------------------------------------
   Base typography (gentle overrides — does not break Bootstrap)
   ----------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  /* Reset the UA default 8px margin. The public pages inherit this from
     Bootstrap's reboot, but the writer/staff shell (work/_base) loads no
     Bootstrap — without it the sticky meganav sat 8px below the top until
     the page was scrolled. */
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sticky footer (UAT #6): make the page a full-height flex column so short
     pages (e.g. /apply/success/, /sendemail/success/) don't leave a cavernous
     band of background above the footer. The footer block is pushed to the
     bottom via `margin-top: auto` below. */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* The first footer in the body's flex flow absorbs the spare vertical space,
   pinning both the footer and sub-footer to the bottom on short pages while
   sitting naturally below the content on long ones. (UAT #6) */
body > .proofreading-footer {
  margin-top: auto;
}

/* Form controls inherit the body font (Inter). The UA stylesheet leaves
   <button>/<input>/<select>/<textarea> on a system font; Bootstrap's reboot
   resets this on the public/customer shell, but the writer/staff shell
   (work/_base) loads NO Bootstrap — so without this, its bare buttons (the
   notif "Mark all read" / "Clear all" pills, the meganav Account trigger)
   fell back to the system font and the same `font-weight: 600` rendered
   heavier than the Inter customer shell. This backfills the one reboot rule
   the non-Bootstrap shells miss. font-family ONLY (not size/line-height) so
   existing button sizing is untouched; on the public shell it re-asserts the
   value Bootstrap already sets (design-tokens loads after bootstrap), so it's
   a no-op there. */
button, input, optgroup, select, textarea {
  font-family: inherit;
}

/* -----------------------------------------------------------------
   CANONICAL HEADING RULE (single source of truth)
   Headings are Lora (--font-display) and UPRIGHT by default. The
   handoff rule (UI.md › Typography) keeps Lora above 20px; the few
   genuinely-small "heading" elements that fall below the boundary
   are eyebrow / label / chip / button text and carry their own
   Inter rule, so a blanket Lora default here is correct.

   `font-style: normal` is asserted deliberately. The Lora webfont is
   loaded ROMAN-ONLY (no italic axis), so any stray `font-style: italic`
   on a heading renders as ugly FAUX italic. The retired "italic-only
   Lora" convention (see UI.md) left `font-style: italic` baked into
   several heading-class rules; this default makes upright the baseline
   and italic an explicit opt-in for emphasis only. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  line-height: var(--lh-heading);
  color: var(--brand-ink-900);
}

/* Inline emphasis inside a heading is the ONLY sanctioned italic in a
   heading context. Because Lora ships roman-only, an italic `<em>`/`<i>`
   in a heading would render faux-italic — so emphasis inside a Lora
   heading drops to the body family (Inter, which DOES ship a true
   italic) for a clean slant. Standalone emphasis in running prose is
   unaffected. */
h1 em, h1 i, h2 em, h2 i, h3 em, h3 i,
h4 em, h4 i, h5 em, h5 i, h6 em, h6 i,
.h1 em, .h1 i, .h2 em, .h2 i, .h3 em, .h3 i {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: inherit;
}

/* -----------------------------------------------------------------
   CANONICAL PARAGRAPH / PROSE RHYTHM (single source of truth)
   Every running-text <p> gets a uniform bottom margin (--prose-gap)
   so stacked paragraphs always have consistent breathing room. The
   last paragraph in a flow drops its trailing margin so the block
   doesn't over-pad against whatever follows.

   This restates Bootstrap's `p { margin-bottom: 1rem }` as a TOKEN so
   the value is editable in one place and survives any component rule
   that resets `margin: 0` on a paragraph wrapper. Components that
   deliberately want a tighter/looser rhythm should still consume
   --prose-gap (or a multiple of the --sp-* scale), never a magic number.

   `.prose` is the opt-in utility for any container of long-form copy
   (marketing body columns, info pages): it applies the rhythm to ALL
   block children (p / ul / ol / blockquote) and comfortable line-height.
   Phase-2 / marketing agents: wrap multi-paragraph body copy in `.prose`
   (or, for one-off stacked <p>s that lost their margin, add the
   `.prose-stack` class to the parent) instead of hand-tuning margins. */
p {
  margin-top: 0;
  margin-bottom: var(--prose-gap);
}
p:last-child {
  margin-bottom: 0;
}

.prose,
.prose-stack {
  line-height: var(--lh-body);
}
/* Cap the reading measure so long-form copy (legal pages, info columns) never
   stretches to an unreadable line length on wide viewports. */
.prose {
  max-width: var(--measure);
}
.prose > p,
.prose > ul,
.prose > ol,
.prose > blockquote,
.prose-stack > p {
  margin-top: 0;
  margin-bottom: var(--prose-gap);
}
.prose > :last-child,
.prose-stack > :last-child {
  margin-bottom: 0;
}

/* Override legacy style.css that forced strong to a heading font / green / 12pt.
   Strong should inherit family + colour + size from its surrounding context. */
body strong, body b {
  font-family: inherit;
  color: inherit;
  font-size: inherit;
  font-weight: 600;
}

a {
  color: var(--brand-green-700);
  transition: color 120ms ease;
}
a:hover { color: var(--brand-green-500); text-decoration: none; }

/* Override legacy purple connecting-text */
body a.connecting-text,
body a.title-connecting-text {
  color: var(--brand-green-700);
  font-family: var(--font-sans);
  font-weight: 600;
}
body a.connecting-text:hover,
body a.title-connecting-text:hover {
  color: var(--brand-green-500);
}

/* -----------------------------------------------------------------
   New components
   ----------------------------------------------------------------- */

/* Pill buttons */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.65rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  border-radius: var(--radius-btn);
  border: 1.5px solid transparent;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, color 120ms ease, border-color 120ms ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-pill:focus { outline: 2px solid var(--brand-green-300); outline-offset: 2px; }

.btn-pill--primary {
  background: var(--brand-green-700);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.btn-pill--primary:hover {
  background: var(--brand-green-500);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

/* Conversion accent (brand v2.1 refinement, 2026-06-16): golden-yellow fill with
   ink text — reserved for the SINGLE highest-intent conversion CTA per view
   (hero/masthead marquee, instant-quote "proceed", foot-of-page band, checkout
   "Pay"). Forest (--primary) stays the colour for every other button, link, and
   active state; this is the one contrasting button the eye is meant to land on.
   White-on-yellow fails contrast, so the fill always uses ink text. Reads well on
   paper AND on the charcoal final-CTA band (opaque fill), so no per-surface
   override is needed. */
.btn-pill--accent {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-1);
}
.btn-pill--accent:hover {
  background: var(--color-accent-strong);
  color: var(--color-accent-ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.btn-pill--accent:focus { outline-color: var(--color-accent-strong); }

.btn-pill--ghost {
  background: transparent;
  color: var(--brand-ink-900);
  border-color: var(--brand-ink-900);
}
.btn-pill--ghost:hover {
  background: var(--brand-ink-900);
  color: #fff;
}

/* "Sign in with Google" — white pill with the Google mark (Reedsy-style
   hero CTA, 2026-07-06). White fill + ink text + quiet paper border, so it
   reads as a neutral secondary next to the gold --accent conversion button
   without competing for the eye. Mirrors the login page's `.acc-auth__google`
   treatment, in the btn-pill sizing system. */
.btn-pill--google {
  background: #fff;
  color: var(--brand-ink-900);
  border-color: var(--brand-paper-200);
  box-shadow: var(--shadow-1);
}
.btn-pill--google:hover {
  background: #fff;
  color: var(--brand-ink-900);
  border-color: var(--brand-green-300);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
/* Negative block margins stop the 20px logo inflating the flex line box —
   without them the Google pill renders ~3px taller than its gold sibling
   (line-height:1 text is ~17px), which read as a mismatched CTA pair when
   the hero buttons stack full-width on mobile (homepage-hero-elite). */
.btn-pill--google img { display: block; margin-block: -0.25rem; }

.btn-pill--lg { padding: 1.05rem 2rem; font-size: 1.0625rem; }
/* Compact size ladder (xs < sm < base < lg). Both were referenced by account
   surfaces (order-detail invoice button, order-history card actions) before
   they existed, so those buttons rendered at full size — define them here. */
.btn-pill--sm { padding: 0.5rem 1.1rem; font-size: 0.875rem; gap: 0.4rem; }
.btn-pill--xs { padding: 0.35rem 0.85rem; font-size: 0.8125rem; gap: 0.35rem; }

/* -----------------------------------------------------------------
   Masthead — centered hero with full-bleed glyph canvas background
   Used on every service / careers / info page.
   ----------------------------------------------------------------- */

.bpr-masthead {
  position: relative;
  /* Professional-grade header height. The pre-fix `min-height: 62vh +
     nav` grew unbounded on tall desktop viewports (~750px+ on a 1080p
     screen), reading as a cavernous hero on what is just a page header.
     Cap the breathing room: a sensible fixed min-height plus generous —
     but bounded — top/bottom padding gives a confident masthead that
     conforms to standard marketing-header heights (~360–420px). */
  padding: calc(var(--nav-height) + var(--sp-6)) var(--sp-5) var(--sp-7);
  min-height: calc(280px + var(--nav-height));
  display: flex;
  align-items: center;
  /* v2: flat warm paper + a whisper of the greige wash, NOT vivid-green radial
     gradients. The brand brief retires radial gradient hero backgrounds in
     favour of flat paper + display type + a thin rule. A subtle greige→paper
     fall plus a faint forest depth at the top grounds the section without
     reading "too green" (greige is the single warm wash; cream is retired). */
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(31, 82, 54, 0.05), transparent 65%),
    linear-gradient(180deg, var(--brand-greige-50) 0%, var(--brand-paper-50) 100%);
  border-bottom: 1px solid var(--brand-paper-200);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

/* Bold "circle" variant (service mastheads): a deep-forest field — the
   .bpr-arc--top-* span — descends over the masthead with a curved bottom edge;
   the text reads cream on the forest, and the glyph canvas uses the on-forest
   light palette. A touch taller so the bottom curve has room below the text.

   RATIFIED EXCEPTION to the "flat paper + display type + thin rule" masthead
   default noted on .bpr-masthead / .bpr-hero above: the curved forest arc is the
   deliberate, Scribendi-inspired treatment for the service + /prices/ page
   headers (owner call, design-refinement 2026-07-10). Do NOT "flatten" it to
   match the flat-paper brief line — the arc is the sanctioned header for those
   pages, and forest here + the closing .bpr-cta are the only two forest anchors
   a service page carries. See docs/UI.md "Masthead height" + brand-guidelines. */
.bpr-masthead--circle {
  min-height: calc(360px + var(--nav-height));
  border-bottom: 0;
}
.bpr-masthead--circle .bpr-masthead__title { color: var(--brand-paper-50); }
.bpr-masthead--circle .bpr-masthead__subtitle { color: rgba(255, 255, 255, 0.88); }
.bpr-masthead--circle .bpr-masthead__subtitle strong { color: #fff; }
@media (max-width: 992px) {
  .bpr-masthead--circle { min-height: calc(300px + var(--nav-height)); }
}

/* Circle masthead that DIRECTLY introduces a greige `.bpr-section--wash` band
   (e.g. /prices/). The masthead base gradient bottoms out at near-white paper
   (--brand-paper-50); on a circle masthead that gradient is hidden behind the
   forest arc EXCEPT in the two corner crescents its curved bottom leaves
   exposed. Against a wash section those near-white crescents clash and read as
   stray whitespace at the seam. Flatten the base to the same greige so the arc
   descends into a continuous field. (Only for a direct seam — service/use-case
   pages buffer the masthead with a paper .bpr-subnav band, so they keep the
   default paper base that already matches.) */
.bpr-masthead--circle.bpr-masthead--on-wash {
  background: var(--brand-greige-50);
}

.bpr-masthead__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.bpr-masthead__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

@media (max-width: 992px) {
  .bpr-masthead { padding: calc(var(--nav-height) + var(--sp-5)) var(--sp-4) var(--sp-6); min-height: calc(200px + var(--nav-height)); }
}

.bpr-masthead__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  /* One step down (design-refinement 2026-07-10): the 4.75rem cap read
     oversized vs the reedsy/scribendi/proofed page-header bar. */
  font-size: clamp(2.5rem, 4.5vw + 1rem, 3.75rem);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-5);
}

.bpr-masthead__subtitle {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--brand-charcoal-700);
  margin: 0 auto var(--sp-7);
  max-width: 48ch;
}

.bpr-masthead__ctas {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* -----------------------------------------------------------------
   Trustpilot badge — styled, non-official review card rendered in the
   masthead's optional `trust_badge` slot (markup: _trustpilot_badge.html).
   Authentic Trustpilot green (#00B67A) for the logo star + rating tiles is a
   deliberate, scoped exception to the internal gold-star rule: a third-party
   trust mark must look like the real thing (same logic as Google's logo
   colours). Built from tokens otherwise so it sits on the warm-paper hero.
   ----------------------------------------------------------------- */
/* CTA + Trustpilot badge sit in one centred row on desktop and stack on mobile.
   The wrapper holds the existing .bpr-masthead__ctas (buttons) plus the optional
   trust badge as a second flex item, vertically centred against the buttons. */
.bpr-masthead__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) var(--sp-5);
}
@media (max-width: 640px) {
  .bpr-masthead__actions { flex-direction: column; gap: var(--sp-5); }
}
.bpr-masthead__trust {
  display: flex;
}

/* -----------------------------------------------------------------
   Split masthead — use-case sub-service pages only (_masthead_split.html).
   Saturated deep-forest LEFT panel (cream text + gold CTA + Trustpilot)
   with a two-tone CSS arc edge; hero image on the light RIGHT side.
   On desktop the section background is paper (so the photo sits on light)
   and the forest is painted by the arc disc behind the text; on mobile the
   whole section goes forest and the arc is dropped (white text needs a dark
   field once the columns stack).
   ----------------------------------------------------------------- */
.bpr-masthead-split {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--brand-paper-50);
  border-bottom: 1px solid var(--brand-paper-200);
}
/* Two-tone arc: solid forest disc + a thin lighter-forest band tracing its
   rim, transparent beyond so the paper + photo show. Radius/centre tuned for
   a gentle sweep behind the left text column. */
/* Two-tone arc primitive — a forest circle with a lighter-forest rim band, the
   shared geometric motif. A real border-radius circle (not a gradient) so the
   curve stays crisply anti-aliased. The consumer sizes/positions it and must set
   position:absolute so the ::before disc anchors to it. Used by the use-case
   split masthead and the homepage "Review every change" section. */
.bpr-arc {
  border-radius: 50%;
  background: var(--brand-green-500);   /* lighter outer band */
}
.bpr-arc::before {
  content: "";
  position: absolute;
  inset: 16px;                          /* exposed green-500 ring = the two-tone edge */
  border-radius: 50%;
  background: var(--brand-green-700);   /* main forest disc */
}

/* Bold "circle descends over the text" field for the service masthead (Scribendi
   reference) — UNIFORM across all service pages. The field covers the whole
   masthead (inset:0) and its curved bottom edge is the descending arc; the text
   sits ON the deep-forest field (cream, via .bpr-masthead--circle), with no glyph
   canvas. ::before is the forest disc; the green-500 strip left exposed along the
   bottom curve is the two-tone band. Border-radius (not a vw circle) → reliable
   full coverage + a crisp curve at any width; bottom corners round UP so the
   forest is tallest in the centre where the centred text sits. */
.bpr-arc--circle {
  position: absolute;
  inset: 0;
  z-index: -1;                          /* behind the text */
  background: var(--brand-green-500);   /* two-tone band (shows along the curve) */
  border-radius: 0 0 50% 50% / 0 0 28% 28%;
}
.bpr-arc--circle::before {
  inset: 0 0 14px 0;                    /* 14px shorter at the bottom → band on the curve */
  border-radius: inherit;
  background: var(--brand-green-700);   /* the deep-forest field */
}

/* Big off-frame-left sweep: forest fills the left ~75%, the two-tone arc curves
   down the right. Shared by the use-case masthead and the homepage audit panel.
   (Shape comes from .bpr-arc; the consumer is overflow:hidden to clip it.) */
.bpr-arc--sweep-left {
  position: absolute;
  /* Viewport-scaled (NOT fixed px): the circle's right edge sits at ~74vw at any
     width, so the forest always covers the centred text — fixes the wide-viewport
     bug where fixed-px (1756) left the cream text on the paper at >1920. */
  top: 50%;
  left: 6vw;
  width: 136vw;
  height: 136vw;
  margin-top: -68vw;
  margin-left: -68vw;
  z-index: -1;
  pointer-events: none;
}
.bpr-masthead-split__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + var(--sp-6)) var(--sp-5) var(--sp-7);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--sp-7);
}
.bpr-masthead-split__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  color: var(--brand-paper-50);
  margin: 0 0 var(--sp-4);
}
.bpr-masthead-split__subtitle {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--sp-5);
  max-width: 46ch;
}
/* The shared actions wrapper centres by default; left-align it in the split panel. */
.bpr-masthead-split .bpr-masthead__actions { justify-content: flex-start; }
.bpr-masthead-split__media {
  display: flex;
  justify-content: center;
}
.bpr-masthead-split__img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.bpr-masthead-split__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.bpr-masthead-split__ph i {
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 860px) {
  /* Mobile: text + image stack on a forest panel whose curved two-tone bottom
     edge crosses the IMAGE at ~its midpoint (top half on forest, bottom half on
     the page), like the Scribendi mobile masthead — raised up so it never sweeps
     down into the sub-nav. The forest is drawn by the image's ::before/::after,
     anchored to bottom:50% of the image so the curve tracks the image regardless
     of how tall the heading/subtitle are. border-radius keeps the curve crisp. */
  .bpr-masthead-split { background: var(--brand-paper-50); }
  .bpr-masthead-split__arc { display: none; }
  .bpr-masthead-split__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    padding-top: calc(var(--nav-height) + var(--sp-5));
    padding-bottom: var(--sp-6);
    text-align: center;
  }
  .bpr-masthead-split .bpr-masthead__actions { justify-content: center; }
  .bpr-masthead-split__media { order: 2; position: relative; }
  .bpr-masthead-split__media::before,
  .bpr-masthead-split__media::after {
    content: "";
    position: absolute;
    top: -1600px;                          /* extend up behind all the text */
    left: calc(-1 * var(--sp-5));          /* full-bleed to the viewport edges */
    right: calc(-1 * var(--sp-5));
    border-radius: 0 0 50% 50% / 0 0 46px 46px;
    z-index: -1;
    pointer-events: none;
  }
  .bpr-masthead-split__media::before {     /* lighter band, dips 7px lower */
    bottom: calc(50% - 7px);
    background: var(--brand-green-500);
  }
  .bpr-masthead-split__media::after {      /* main forest, ends at mid-image */
    bottom: 50%;
    background: var(--brand-green-700);
  }
}

/* -----------------------------------------------------------------
   Checklist — title-only deliverable ticks ("What you receive" section).
   ----------------------------------------------------------------- */
.bpr-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.bpr-checklist__item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-family: var(--font-body);
  color: var(--brand-ink-900);
  line-height: 1.5;
}
.bpr-checklist__item .fa-check {
  flex: none;
  margin-top: 0.2em;
  color: var(--color-primary);
}
/* Document-types list — centred under the centred heading: a wrapping row of
   tick items, centred as a group. NO max-width/margin-auto here: the
   `ul:has(> li.menu-item) { margin-left:0 }` rule in style.css (higher
   specificity) would override margin-auto and pin the box left, so we let the
   full-width flex container centre the items via justify-content instead. */
.bpr-doctypes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-6);
}
.bpr-doctypes > li.menu-item { margin-bottom: 0; }
@media (max-width: 575px) {
  .bpr-doctypes { columns: 1; }
}

.bpr-trustpilot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.bpr-trustpilot:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}
.bpr-trustpilot:focus-visible {
  outline: 2px solid #00B67A;
  outline-offset: 3px;
}

.bpr-trustpilot__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  line-height: 1;
}
.bpr-trustpilot__logo-star {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}
.bpr-trustpilot__word {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: #191919;  /* Trustpilot brand near-black — deliberate exception to --color-ink, matches Trustpilot's own wordmark */
}

.bpr-trustpilot__stars {
  display: inline-flex;
  gap: 3px;  /* sub-token: tighter than --sp-1 (4px) to match Trustpilot's native tile spacing */
  line-height: 1;
}
.bpr-trustpilot__tile {
  width: 1.6rem;
  height: 1.6rem;
  display: block;
}

.bpr-trustpilot__caption {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.bpr-trustpilot__score { font-weight: 500; }
.bpr-trustpilot__score strong { font-weight: 700; }
.bpr-trustpilot__count {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bpr-trustpilot:hover .bpr-trustpilot__count { color: var(--color-text); }

/* -----------------------------------------------------------------
   Trust certificate seals (.bpr-trustcerts) — on-brand emblems that mirror the
   Scribendi seal strip: a soft-filled icon MEDALLION + bold label + sub, in a
   subtle card. Built from tokens, NOT third-party seal artwork. One component,
   two surfaces via a modifier: the footer trust strip (--on-dark, 3 seals) and
   the checkout order rail (--on-light, 2 seals — the base treatment). Markup:
   content/_partials/_trust_badges.html.
   ----------------------------------------------------------------- */
.bpr-trustcerts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bpr-trustcert {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: #fff;   /* white "official" badge — reads on the dark footer AND the paper rail */
  box-shadow: var(--shadow-1);
}
/* The medallion — a small solid-forest tile with a white glyph — is the seal
   mark; on the white card it reads like a compact security stamp. Identical on
   both surfaces (owner wants the footer + checkout badges consistent). */
.bpr-trustcert__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 5px;
  background: var(--color-primary);
  color: #fff;
}
.bpr-trustcert__icon { font-size: 0.8rem; line-height: 1; }
.bpr-trustcert__text {
  display: flex;
  flex-direction: column;
  gap: 0.02rem;
  line-height: 1.2;
  text-align: left;
}
.bpr-trustcert__label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: -0.006em;
  color: var(--brand-ink-900);
}
.bpr-trustcert__sub {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--brand-charcoal-700);   /* AA-legible muted on white */
}

/* Both surfaces share ONE white-card treatment (owner wants the footer and
   checkout badges identical + reading "official"). The --on-dark / --on-light
   modifiers stay as variant hooks but need no per-surface card overrides: a
   white official badge sits cleanly on both the charcoal footer and the paper
   rail. --on-light is also the safe fallback for any unknown variant. */

/* -----------------------------------------------------------------
   Home hero — split masthead (homepage-hero-elite, 2026-07-11):
   left copy column + right code-built document visual, with the
   stats proof band spanning the rail beneath both. Flat warm paper
   (brand v2.1) — the anchor is the layout + visual, not a gradient.
   ----------------------------------------------------------------- */

.bpr-hero {
  position: relative;
  padding: calc(var(--nav-height) + var(--sp-7)) var(--sp-5) var(--sp-7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* reedsy-style hero (hero-green-shape v4, 2026-07-11): a soft vertical
     top->bottom wash from a pale forest tint down to warm paper, paired with the
     .bpr-hero::before flare wedge below. This supersedes the brand v2.1
     flat-paper-only hero — the owner ratified the gradient direction (à la
     reedsy.com) and brands/bpr/brand-guidelines.html is updated to match. */
  background: linear-gradient(180deg, var(--brand-green-100) 0%, var(--brand-paper-50) 60%);
  border-bottom: 1px solid var(--brand-paper-200);
  overflow: hidden;
  isolation: isolate;
}

.bpr-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-8);
  align-items: center;
}

.bpr-hero__copy {
  text-align: left;
}

/* NOTE: the mobile single-column overrides live in ONE block at the END of the
   hero CSS (search "Mobile hero — single column"), placed AFTER every hero
   component rule. Equal-specificity overrides only win by source order, so a
   rule like `.bpr-hero__visual { display: none }` MUST come after the component
   `.bpr-hero__visual { display: flex }` further down — putting it here would be
   dead CSS. (This is the recurring trap flagged in docs/UI.md.) */

.bpr-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-green-700);
  margin: 0 0 var(--sp-3);
}
.bpr-hero__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  /* Sized for the split-hero copy column (homepage-hero-elite): the fixed
     two-line sentence ("Bulletproof your" / "<word>.") must fit the column at
     every width without reflowing as the word changes — "dissertation." is
     the widest case. Stays inside the calm competitor bar (~40–56px). The
     2.1rem floor is the sweet spot on phones: it keeps "Bulletproof your" on
     ONE line down to 320px (2.25rem wrapped it to a ragged three-liner) while
     keeping the h1 ABOVE the 2rem mobile section titles and roughly 2x the
     mobile lede — the top of the type scale, where an h1 belongs. */
  font-size: clamp(2.1rem, 2.6vw + 1rem, 3.5rem);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  color: var(--brand-ink-900);
  /* Gap to the lede: --sp-5, tightened from --sp-6 (design-refinement follow-up
     2026-07-10). The larger --sp-6 was padded to clear the marker underline that
     descended below the rotating word on line 2; with the underline removed that
     padding read as an unbalanced empty gap against the tight title leading. */
  margin: 0 0 var(--sp-5);
}
/* -----------------------------------------------------------------
   Hero typewriter — the rotating document-type word on its own line
   under "Bulletproof your", left-anchored in the split hero's copy
   column (homepage-hero-elite). Solid forest word (forest leads), a
   soft blinking caret, and a static ink full stop that closes the
   sentence — so a mid-type frame reads as a sentence being typed,
   never a truncated fragment (the old centred layout recentred a
   floating 2-char fragment every frame). Driven by
   js/hero_typewriter.js. Reduced-motion: static first word, no caret.
   ----------------------------------------------------------------- */
.bpr-typeword {
  position: relative;
  display: inline-block;      /* left-anchored on its own line via the h1 */
  color: var(--brand-green-700);
  white-space: nowrap;
  vertical-align: baseline;
}
.bpr-typeword__stop {
  color: var(--brand-ink-900);   /* the stop belongs to the sentence, not the word */
}
.bpr-typeword__caret {
  display: inline-block;
  width: 0.06em;
  height: 0.92em;
  margin-left: 0.04em;
  background: currentColor;
  vertical-align: baseline;
  transform: translateY(0.08em);
  animation: bpr-caret-blink 1.05s steps(1, end) infinite;
}
/* The hand-drawn marker underline under the rotating word was removed
   (design-refinement 2026-07-10) — the rotating typewriter word + caret is the
   single hero flourish now; the stacked underline gimmick read as trying-too-hard
   next to the calmer competitor heroes. */

@keyframes bpr-caret-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .bpr-typeword__caret { display: none; }
}

/* "Why Bullet Proofreading" cards — dedicated sizing so the under-icon text
   stays card-scale (the legacy `#why-choose-us h4.section-title` rule renders
   at ~2.5rem, far too big for cards) and the four blurbs read as even columns. */
/* Inline Lucide icon (design-refinement 2026-07-10). Rendered by the
   {% bpr_icon %} tag (content/templatetags/bpr_icons.py). Sizes to the
   container's font-size — exactly like the Font Awesome glyph it replaced — and
   inherits colour via stroke:currentColor, so the existing icon-tile containers
   (.svc-card__icon / .bpr-feature__icon / .meganav__panel-card-icon /
   .bpr-why__icon) need no per-icon change. Scope: marketing card/topic icons
   plus the writer submit-card / preflight-readout severity glyphs (2026-07-11);
   other functional FA glyphs (chevrons, stars, form + brand icons) stay
   Font Awesome. --3x replaces the old `fa-3x` on the plain (untiled) icon rows. */
.bpr-ico {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex: none;
  stroke: currentColor;
}
.bpr-ico--3x { width: 3em; height: 3em; }

.bpr-why__icon { margin-bottom: var(--sp-3); color: var(--brand-green-700); }
.bpr-why__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-2);
}
.bpr-why__body {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--brand-charcoal-700);
  max-width: 30ch;
  margin: 0 auto;
}

.bpr-hero__lede {
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--brand-charcoal-700);
  margin: 0 0 var(--sp-6);
  max-width: 46ch;
}

.bpr-hero__ctas {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: 0;
  justify-content: flex-start;
}
/* Keep each CTA label on one line — full-width and stacked on small screens,
   "Sign in with Google" otherwise wrapped to three lines at ~320px. */
.bpr-hero__ctas .btn-pill { white-space: nowrap; }

/* -----------------------------------------------------------------
   Hero document visual (.bpr-heromock, homepage-hero-elite Stage 2)
   — the split hero's right-column anchor: a code-built, depicted
   proofread page with a tracked edit, a floating editor comment and
   a status chip. Craft lineage: the stepper's .bpr-mock cards
   (style.css) for the ins/del + comment language; .bpr-audit__art
   for the layered drop-shadow. The page is deliberately pure white
   (it depicts a document, not a UI card) — same reasoning as the
   stepper mocks staying off --card-surface. Decorative: the whole
   subtree is aria-hidden in the template.
   ----------------------------------------------------------------- */
.bpr-hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Flare wedge (hero-green-shape v7, 2026-07-11) — reedsy.com's `.header-flare`,
   recoloured to BPR forest: a soft green triangle that reads as a RAY emitted
   from the document, fanning downward. Built as an inline SVG so the apex is
   genuinely rounded (a clip-path polygon can't round).
   Two things keep it stable and un-janky at every viewport — the fix for the
   distorted, drifting apex the earlier hero-width version showed on wide screens:
     • ANCHORED TO THE DOC — the pseudo-element is scoped to .bpr-hero__visual
       (the column that holds the mock) and centred on it (left/top:50% +
       translate), so it always sits under the document. The column is capped by
       .bpr-hero__inner's max-width, so on huge monitors the ray no longer blows
       up or slides off to the right the way a viewport-width element did.
     • FIXED ASPECT — `aspect-ratio` matches the SVG viewBox (1000 x 380), so the
       rounded apex is never stretched; the whole ray just scales as one piece.
   Symmetric about the mock's centre; the fill fades to transparent before its
   base so it never reaches the stats band below the column; z-index 0 under the
   mock (.bpr-heromock is z-index 1). Auto-hides ≤992px with the column (no
   separate mobile rule). Fill hex mirrors --color-primary (#1F5236) — CSS vars
   can't reach inside a data-URI. */
.bpr-hero__visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -34%);
  width: 132%;
  aspect-ratio: 1000 / 380;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 380' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%231F5236' stop-opacity='0.36'/><stop offset='0.68' stop-color='%231F5236' stop-opacity='0.3'/><stop offset='1' stop-color='%231F5236' stop-opacity='0'/></linearGradient></defs><path d='M140 380 L860 380 L560 32 Q500 0 440 32 Z' fill='url(%23g)'/></svg>") center / 100% 100% no-repeat;
  pointer-events: none;
}

.bpr-heromock {
  position: relative;
  z-index: 1;                          /* the document sits on the .bpr-hero__visual::before ray */
  width: min(100%, 470px);
  /* Breathing room so the floating comment/chip overhangs stay inside
     the hero's overflow:hidden box. */
  padding: var(--sp-4) var(--sp-5);
}

.bpr-heromock__page {
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px rgba(46, 34, 30, 0.14), 0 8px 16px rgba(46, 34, 30, 0.08);
  padding: 2rem 2.25rem 2.5rem;
  transform: rotate(-1.25deg);
}

.bpr-heromock__doctitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--brand-ink-900);
  margin: 0 0 1.1rem;
}

.bpr-heromock__line {
  height: 0.55rem;
  border-radius: 999px;
  background: var(--brand-paper-100);
  border: 1px solid var(--brand-paper-200);
  margin: 0 0 0.8rem;
}
.bpr-heromock__line--full  { width: 100%; }
.bpr-heromock__line--long  { width: 88%; }
.bpr-heromock__line--short { width: 55%; margin-bottom: 0; }

.bpr-heromock__passage {
  /* Serif body: the mock depicts a manuscript page, so the passage sets in
     the display serif like the running head (verifier polish, Stage 4). */
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--brand-ink-900);
  margin: 0.2rem 0 1rem;
}
/* Tracked-changes marks — same treatment as the stepper's .bpr-mock__doc. */
.bpr-heromock__passage ins {
  text-decoration: none;
  color: var(--brand-green-700);
  background: var(--brand-green-50);
  border-bottom: 1.5px solid var(--brand-green-500);
  padding: 0 0.1em;
}
.bpr-heromock__passage del {
  color: var(--color-error, #C0392B);
  text-decoration: line-through;
  opacity: 0.7;
}

.bpr-heromock__comment {
  position: absolute;
  top: 17%;
  right: calc(-1 * var(--sp-2));
  max-width: 220px;
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: 0 12px 28px rgba(46, 34, 30, 0.12);
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--brand-charcoal-700);
  transform: rotate(0.75deg);
}
.bpr-heromock__comment-author {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--brand-ink-900);
  margin-bottom: 0.15rem;
}

.bpr-heromock__chip {
  position: absolute;
  bottom: 9%;
  left: calc(-1 * var(--sp-2));
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-pill);   /* a genuine status chip — pills stay pills */
  box-shadow: 0 10px 24px rgba(46, 34, 30, 0.12);
  padding: 0.5rem 0.95rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-green-700);
}

/* -----------------------------------------------------------------
   Animated stats bar (P4-08) — the hero's proof band, spanning the
   rail beneath both split-hero columns (homepage-hero-elite). Flat
   paper hero, dark-on-light treatment. Numbers use tabular-nums so
   the width doesn't jiggle as they count up.
   ----------------------------------------------------------------- */
.bpr-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  max-width: 760px;
  margin: 0 auto;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--brand-paper-200);
}
/* On the split hero the band spans the full content rail beneath both
   columns (the same .bpr-stats copies on /about/ pages keep the narrow
   centred treatment inside their own sections). */
.bpr-hero .bpr-stats {
  width: 100%;
  max-width: var(--container-wide);
  margin: var(--sp-7) auto 0;
}

@media (max-width: 639px) {
  .bpr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
  /* Stack the hero CTAs full-width and equal on mobile so a long label
     ("Sign in with Google") doesn't leave the two pills mismatched. */
  .bpr-hero__ctas { flex-direction: column; align-items: stretch; }
  .bpr-hero__ctas .btn-pill { width: 100%; }
}

.bpr-stats__cell {
  text-align: center;
}
/* Hairline dividers make the band read as one designed unit (Stage 3). */
.bpr-stats__cell + .bpr-stats__cell {
  border-left: 1px solid var(--brand-paper-200);
}
@media (max-width: 639px) {
  /* 2x2 grid: cells 1 and 3 start their row — no leading divider. */
  .bpr-stats__cell:nth-child(odd) { border-left: 0; }
}

.bpr-stats__star {
  color: var(--color-accent);
  font-size: 0.55em;            /* small anchor glyph beside the number */
  vertical-align: 0.35em;
  margin-right: 0.3rem;
}

.bpr-stats__number {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  line-height: 1.1;
  color: var(--brand-green-700);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  margin-bottom: 0.35rem;
}

.bpr-stats__suffix {
  color: var(--brand-green-700);
}

.bpr-stats__label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-charcoal-500);
  /* Desktop 4-across the compact labels sit on one line (no reservation
     needed — kept tight). */
}
@media (max-width: 992px) {
  /* Single-column / 2-up: the narrow cells can wrap the longest label
     ("Years of experience") to two lines while the others stay on one, so
     reserve two lines and the row baselines stay aligned. */
  .bpr-stats__label { min-height: 2.4em; }
}

/* -----------------------------------------------------------------
   Mobile hero — single column (homepage-hero-elite, owner feedback
   2026-07-11). Below the split breakpoint the two-column layout can't
   hold, and the document visual — a DESKTOP split-layout device —
   stacked into ~600px of decorative height above the real content, so
   the masthead read heavier and worse than a clean text hero. So we go
   text-first and centred here (like the pre-split hero the owner
   preferred), while keeping every refinement that isn't tied to the
   split: the stabilised typewriter + static full stop, the demoted
   Google CTA, and the designed stats band.

   This block sits AFTER every .bpr-hero* / .bpr-heromock component rule
   on purpose: these overrides share their specificity, so only source
   order makes them win. Keep it last. (docs/UI.md records this trap.)
   ----------------------------------------------------------------- */
@media (max-width: 992px) {
  /* The hero already starts below the in-flow nav, so the desktop rule's
     `+ var(--nav-height)` top padding double-counts it (~70px of dead space
     above the eyebrow once the hero lost its min-height + vertical centering
     on mobile). Pad by a plain gap here instead. */
  .bpr-hero { padding: var(--sp-6) var(--sp-4) var(--sp-7); }
  /* Collapse the two-column split to a single full-width column. Without this
     the grid keeps both tracks, the hidden visual leaves its column empty on
     the right, and the centred copy sits inside the LEFT half — reading as
     "uncentered" against the full-width stats band below it. */
  .bpr-hero__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .bpr-hero__visual { display: none; }        /* mock (+ its ::before ray) stays in the DOM, just unpainted; the top->bottom hero wash stays */
  .bpr-hero__copy { text-align: center; }
  .bpr-hero__lede { margin-left: auto; margin-right: auto; }
  .bpr-hero__ctas { justify-content: center; }
  /* Smaller + tighter tracking so "Proofreading · Editing · Critique" holds
     one line instead of orphaning "Critique" on a second centred line. */
  .bpr-hero__eyebrow { font-size: 0.72rem; letter-spacing: 0.09em; }
  /* Type-scale hierarchy (best-practice pass, 2026-07-11): the desktop lede
     (1.25rem) against the clamped-down mobile title read as "subtitle almost
     as big as the title" (30px:20px = 1.5x). 1.0625rem restores a ~2x
     title:lede ratio and pulls the lede from 5-8 lines down to 3-4. */
  .bpr-hero__lede { font-size: 1.0625rem; max-width: 40ch; }
}

/* -----------------------------------------------------------------
   Home — "Audit every change" feature section
   Laptop image gets its own moment below the hero.
   ----------------------------------------------------------------- */

.bpr-audit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--sp-9) var(--sp-5);
  /* De-forested (design-refinement 2026-07-10): was a full deep-forest slab —
     the second full-bleed forest field on the homepage, which read heavy next to
     the calmer competitor pages. Now the single greige --wash punctuation for
     this feature moment (ink copy below), so forest survives only as the closing
     .bpr-cta anchor. Hairline edges match the .bpr-section--wash treatment. */
  background: var(--brand-greige-50);
  border-top: 1px solid var(--brand-paper-200);
  border-bottom: 1px solid var(--brand-paper-200);
}
/* The sweep arc previously painted the forest behind the left copy on an
   otherwise-paper field. The whole field is forest now, so retire it. */
.bpr-audit__arc { display: none; }

.bpr-audit__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-8);
  align-items: center;
}

@media (max-width: 992px) {
  .bpr-audit { padding: var(--sp-7) var(--sp-4); }
  .bpr-audit__inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  /* The field is a flat greige wash now (de-forested) — the old mobile two-tone
     curved-bottom pseudos (which split a paper/forest field) are redundant. */
  .bpr-audit__art::before,
  .bpr-audit__art::after { display: none; }
}

.bpr-audit__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--color-accent-text);   /* forest eyebrow on the greige wash */
  margin: 0 0 var(--sp-3);
}
.bpr-audit__eyebrow::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: var(--sp-2) 0 0;
  background: var(--color-accent);
  border-radius: 1px;
}

.bpr-audit__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(2rem, 3.5vw + 1rem, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--brand-ink-900);   /* ink on the greige wash */
  margin: 0 0 var(--sp-5);
}

.bpr-audit__body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--brand-charcoal-700);   /* ink body on the greige wash */
  margin: 0 0 var(--sp-5);
  max-width: 50ch;
}

.bpr-audit__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.bpr-audit__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--brand-ink-900);   /* ink on the greige wash */
}
.bpr-audit__points li::before {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
  background: var(--color-primary);   /* forest tick on the greige wash */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}

.bpr-audit__art {
  position: relative;   /* anchors the mobile curved-bottom pseudos */
  display: flex;
  justify-content: center;
  align-items: center;
}
.bpr-audit__art img {
  display: block;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(46, 34, 30, 0.18))
          drop-shadow(0 8px 16px rgba(46, 34, 30, 0.08));
}

/* -----------------------------------------------------------------
   Free Sample section (combines free sample + 10% off promo)
   ----------------------------------------------------------------- */

.bpr-fs {
  padding: var(--sp-9) var(--sp-5);
  background:
    radial-gradient(ellipse 55% 50% at 90% 50%, rgba(31, 82, 54, 0.05), transparent 65%),
    var(--brand-paper-100);
}

.bpr-fs__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}

@media (max-width: 992px) {
  .bpr-fs { padding: var(--sp-7) var(--sp-4); }
  .bpr-fs__inner { grid-template-columns: 1fr; gap: var(--sp-6); text-align: center; }
  .bpr-fs__ctas, .bpr-fs__promo { justify-content: center; }
}

.bpr-fs__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--color-accent-text);
  margin: 0 0 var(--sp-3);
}

.bpr-fs__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(2rem, 3.5vw + 1rem, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-4);
}

.bpr-fs__body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--brand-charcoal-700);
  margin: 0 0 var(--sp-5);
  max-width: 56ch;
}

.bpr-fs__promo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--sp-5);
  padding: 0.4rem 1rem;
  background: var(--color-accent-wash);
  border: 1px solid var(--color-accent-line);
  color: var(--color-accent-ink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--radius-pill);
}
.bpr-fs__promo code {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}

.bpr-fs__ctas {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.bpr-fs__art {
  display: flex;
  justify-content: center;
  align-items: center;
}
.bpr-fs__art img {
  max-width: 80%;
  height: auto;
  filter: drop-shadow(0 18px 36px rgba(46, 34, 30, 0.08));
}

/* -----------------------------------------------------------------
   Final CTA band — used at the foot of every page
   ----------------------------------------------------------------- */

.bpr-cta {
  position: relative;
  padding: var(--sp-9) var(--sp-5);
  /* Brand v2.1: flat deep forest (was charcoal under retired radial gradients).
     Forest is the brand's dark surface; the glyph canvas glows over it. */
  background: var(--brand-green-700);
  color: var(--brand-paper-100);
  text-align: center;
}

.bpr-cta__inner {
  max-width: 720px;
  margin: 0 auto;
}

/* Animated glyph canvas behind the CTA band (resolve-ui-batch, concern 8).
   The dark band gets the floating-glyph engine (heroCanvas.js, playful
   palette); screen blend makes the green/gold glyphs glow over the charcoal
   rather than disappear, and the text sits above it. */
.bpr-cta--canvas { overflow: hidden; }
.bpr-cta__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  mix-blend-mode: screen;
}
.bpr-cta--canvas .bpr-cta__inner { position: relative; z-index: 1; }

.bpr-cta__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(2rem, 3.5vw + 1rem, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 var(--sp-4);
}

.bpr-cta__body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 auto var(--sp-6);
  max-width: 56ch;
}

.bpr-cta__buttons {
  display: inline-flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

.bpr-cta .btn-pill--ghost {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.bpr-cta .btn-pill--ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

/* Secondary (ghost) CTA on the deep-forest circle masthead: the base ghost is a
   dark-ink outline (for light backgrounds) and reads near-invisible on forest,
   so give it the same white treatment as the forest CTA band. */
.bpr-masthead--circle .btn-pill--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.bpr-masthead--circle .btn-pill--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.65);
}

/* -----------------------------------------------------------------
   Social-proof bar — institution/customer logo strip, sits directly
   above the final CTA band on the home + service pages.
   White logo cards on a paper band; mixed logo backgrounds (incl. the
   non-transparent Istanbul JPEG) sit cleanly on the white card.
   ----------------------------------------------------------------- */

.bpr-proofbar {
  padding: var(--sp-8) var(--sp-5);
  background: var(--brand-paper-100);
}
.bpr-proofbar__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  text-align: center;
}
.bpr-proofbar__intro {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1.1vw + 0.9rem, 1.375rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--brand-ink-900);
  max-width: 46ch;
  margin: 0 auto var(--sp-6);
}
/* Brand "foil rule" accent above the lead-in — the recurring gold eyebrow
   motif, used as a topper so the long sentence reads as a finished section
   lead-in rather than uppercasing it into a true eyebrow. */
.bpr-proofbar__intro::before {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin: 0 auto var(--sp-4);
  background: var(--color-accent);
  border-radius: 1px;
}
.bpr-proofbar__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bpr-proofbar__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  min-width: 160px;
  padding: var(--sp-4) var(--sp-5);
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}
.bpr-proofbar__logo img {
  display: block;
  width: auto;
  max-width: 150px;
  max-height: 44px;
  object-fit: contain;
}

@media (max-width: 640px) {
  .bpr-proofbar { padding: var(--sp-7) var(--sp-4); }
  .bpr-proofbar__logos { gap: var(--sp-3) var(--sp-4); }
  .bpr-proofbar__logo { height: 72px; min-width: 132px; padding: var(--sp-3) var(--sp-4); }
  .bpr-proofbar__logo img { max-width: 116px; max-height: 36px; }
}

/* -----------------------------------------------------------------
   Bullet Speed promo strip
   ----------------------------------------------------------------- */

.bpr-speed {
  padding: var(--sp-8) var(--sp-5);
  background: var(--brand-paper-50);   /* paper — part of the paper↔greige ladder */
}
/* Positional greige variant — used where the rhythm needs this band to be the
   greige step (e.g. between the paper testimonials band and a paper questions
   band on service-overview). Passed via the bullet_speed partial's `wash` param. */
.bpr-speed--wash {
  background: var(--brand-greige-50);
  border-top: 1px solid var(--brand-paper-200);
  border-bottom: 1px solid var(--brand-paper-200);
}
.bpr-speed__inner {
  max-width: 660px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
}
.bpr-speed__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--color-accent-text);
  margin: 0 0 var(--sp-2);
}
.bpr-speed__eyebrow::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: var(--sp-2) auto 0;
  background: var(--color-accent);
  border-radius: 1px;
}
@media (max-width: 768px) {
  .bpr-speed__eyebrow::after { margin-left: auto; margin-right: auto; }
}
.bpr-speed__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: 1.875rem;
  line-height: 1.2;
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-2);
}
.bpr-speed__body {
  margin: 0 auto;
  color: var(--brand-charcoal-700);
  max-width: 60ch;
}
.bpr-speed__cta { display: flex; }

/* -----------------------------------------------------------------
   Questions / contact mini-section
   ----------------------------------------------------------------- */

.bpr-questions {
  padding: var(--sp-8) var(--sp-5);
  background: var(--brand-paper-50);
}
/* Positional greige variant — used where the rhythm needs this band to be the
   greige step (e.g. after a paper section). Passed via the contact_us partial's
   `wash` param. */
.bpr-questions--wash {
  background: var(--brand-greige-50);
  border-top: 1px solid var(--brand-paper-200);
  border-bottom: 1px solid var(--brand-paper-200);
}
.bpr-questions__inner {
  max-width: 660px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-4);
}
.bpr-questions__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--color-accent-text);
  margin: 0 0 var(--sp-2);
}
.bpr-questions__eyebrow::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: var(--sp-1) auto 0;
  background: var(--color-accent);
  border-radius: 1px;
}
@media (max-width: 768px) {
  .bpr-questions__eyebrow::after { margin-left: auto; margin-right: auto; }
}
.bpr-questions__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-1);
}
.bpr-questions__body { margin: 0 auto; color: var(--brand-charcoal-700); max-width: 56ch; }
.bpr-questions__cta { display: flex; }

/* -----------------------------------------------------------------
   Service cards (refreshed — drop pastel stripes, use elevation)
   ----------------------------------------------------------------- */

.card.service-pane {
  border: 1px solid var(--brand-paper-200) !important;
  border-radius: var(--radius-md) !important;
  background: #fff !important;
  box-shadow: var(--shadow-1);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.card.service-pane:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3) !important;
  /* Warm gold edge on hover — a glint of the accent on interaction, distinct
     from the resting forest hairline (v2.1 conversion-accent refinement). */
  border-color: var(--color-accent-line) !important;
}
.card.service-pane .card-header {
  background: transparent !important;
  border-bottom: none !important;
  padding-bottom: var(--sp-2) !important;
}
.card.service-pane .card-header i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  background: var(--brand-green-100);
  color: var(--brand-green-700) !important;
  border-radius: 50%;
  font-size: 1.6rem !important;
}
.card.service-pane .card-header i::before { color: var(--brand-green-700) !important; }
.card.service-pane h5.service-card {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--brand-ink-900);
  margin-bottom: var(--sp-2);
}
.card.service-pane h5.service-card .section-subtitle {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--brand-green-700);
  font-size: 1rem;
  letter-spacing: 0;
}
.card.service-pane .btn-warning {
  background: var(--brand-green-700) !important;
  border-color: var(--brand-green-700) !important;
  color: #fff !important;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill) !important;
}
.card.service-pane .btn-warning:hover {
  background: var(--brand-green-500) !important;
  border-color: var(--brand-green-500) !important;
}

/* -----------------------------------------------------------------
   Misc legacy overrides — generic buttons → pill, colour normalisation
   ----------------------------------------------------------------- */

.btn-success, body .btn-success {
  background-color: var(--brand-green-700) !important;
  border-color: var(--brand-green-700) !important;
}
.btn-success:hover, body .btn-success:hover {
  background-color: var(--brand-green-500) !important;
  border-color: var(--brand-green-500) !important;
}

.text-success, body .text-success,
i.fas.text-success { color: var(--brand-green-700) !important; }
.bg-success { background-color: var(--brand-green-700) !important; }
.badge.badge-success { background-color: var(--brand-green-700) !important; }

/* -----------------------------------------------------------------
   Generic section header (eyebrow + serif title + lede)
   ----------------------------------------------------------------- */

.bpr-section {
  padding: var(--sp-8) var(--sp-5);
  background: var(--brand-paper-50);
  /* Section-aware card surface (run-2). A card sitting on THIS paper field
     takes the panel tone (#F4F2EC) so it lifts off the near-identical paper
     instead of going white-on-near-white; a card on the greige --wash field
     (below) takes pure white — the one place white is sanctioned. Marketing
     card shells consume `var(--card-surface, #fff)`; the #fff fallback keeps a
     card white anywhere outside a toned section. Border stays paper-200. */
  --card-surface: var(--brand-paper-100);
}
/* The single warm-greige alternate wash (resolve-color-scheme). Paper canvas
   (default .bpr-section) and this wash are the ONLY two light full-bleed fields;
   the page alternates between them, with forest as the dark anchor and gold as
   the accent. Hairline edges top+bottom make the gentle paper↔greige step read
   as a deliberate panel. The legacy --cream / --tinted modifiers are retired as
   distinct tones and repointed onto the wash so any stray usage stays on-system. */
.bpr-section--wash,
.bpr-section--cream,
.bpr-section--tinted {
  background: var(--brand-greige-50);
  border-top: 1px solid var(--brand-paper-200);
  border-bottom: 1px solid var(--brand-paper-200);
  /* White cards pop on the greige wash (run-2 card-surface mechanism). */
  --card-surface: #fff;
}
/* RETIRED: full-bleed pure white reads as a cold hole on warm paper (brand: "no
   pure-white fields"). Repointed to paper so white survives only on CARDS. */
.bpr-section--white { background: var(--brand-paper-50); }
/* When two consecutive paper .bpr-section elements meet, add a hairline so they
   don't blur into one block. (Wash sections carry their own edges, above.) */
.bpr-section + .bpr-section:not(.bpr-section--wash):not(.bpr-section--tinted):not(.bpr-section--white):not(.bpr-section--cream) {
  border-top: 1px solid var(--brand-paper-200);
}
.bpr-section__header {
  max-width: 720px;
  margin: 0 auto var(--sp-6);
  text-align: center;
}
/* Left-aligned header variant (homepage blog carousel, resolve-ui-batch). */
.bpr-section__header--left {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

/* Homepage "latest articles" cards (resolve-ui-batch, concern 11). Live in the
   .svc-carousel shell; styled here (blog.css is not loaded on the homepage). */
.bpr-article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-5);
  background: var(--card-surface, #fff);   /* section-aware (run-2) */
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.bpr-article-card:hover {
  box-shadow: var(--shadow-3);
  transform: translateY(-4px);
  border-color: transparent;
  text-decoration: none;
}
.bpr-article-card__meta {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-3);
}
.bpr-article-card__date { color: var(--color-text-muted); }
.bpr-article-card__read { color: var(--color-accent-text); font-weight: 600; }
.bpr-article-card__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-3);
}
.bpr-article-card__excerpt {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--brand-charcoal-700);
  margin: 0;
}
.bpr-blog-cta { margin-top: var(--sp-5); }
.bpr-section__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--color-accent-text);
  margin: 0 0 var(--sp-3);
}
/* Short antique-gold "foil rule" under the section eyebrow — a recurring
   editorial-press motif that threads a glint of gold down the page spine so the
   long restful middle never reads as flat green-on-paper. Centred by default
   (margin auto); left-aligned in the --left header variant. */
.bpr-section__eyebrow::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: var(--sp-2) auto 0;
  background: var(--color-accent);
  border-radius: 1px;
}
.bpr-section__header--left .bpr-section__eyebrow::after { margin-left: 0; }
/* Split image/text sections place the eyebrow in a Bootstrap
   `text-center text-md-left` column, so the block-level foil rule (centred via
   margin:auto) floats out from under the left-aligned eyebrow text once the
   column goes left at >=768px. Make the rule track the column's alignment:
   left under a left-aligned eyebrow, centred under a centred one. */
.text-left .bpr-section__eyebrow::after { margin-left: 0; margin-right: auto; }
@media (min-width: 768px) {
  .text-md-left .bpr-section__eyebrow::after { margin-left: 0; margin-right: auto; }
}
.bpr-section__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-3);
}
/* NOTE: the compact modifier (.bpr-section__title--compact) is defined further
   down, next to the doubled-specificity .bpr-section__title.bpr-section__title
   override it has to beat — see the comment there. */
.bpr-section__lede {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--brand-charcoal-700);
  /* Canonical prose rhythm: stacked ledes (e.g. /about/) need a gap
     between them. The last lede in the header drops its trailing margin
     so the block doesn't over-pad against the content below. */
  margin: 0 0 var(--prose-gap);
}
.bpr-section__lede:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------
   Testimonials band — the designed social-proof moment (run-3)
   Shared partial: content/_partials/_testimonials_band.html. Panel-tone
   quote CARDS in the count-adaptive .svc-carousel shell replace the old
   single floating quote + Bootstrap carousel. Height is stable by
   construction: the track is one flex row, so every step shows slides cut
   from the same constant row height (the old min-height:19rem guard
   against Bootstrap's per-slide reflow is no longer needed).
   ----------------------------------------------------------------- */

.bpr-testimonials {
  padding: var(--sp-8) var(--sp-5);
  background: var(--brand-paper-50);   /* ALWAYS paper — the band sits between greige bands in every ladder */
  /* Paper host that isn't a .bpr-section, so it wires the card-surface
     mechanism itself (same as .bpr-reviews-shell): quote cards resolve to
     the panel tone here, white on any future wash host. */
  --card-surface: var(--brand-paper-100);
}
/* Volume-cue meter under the section title — the hero's "3,000+ clients" /
   "4.6/5" proof re-surfaced where the quotes are. Values come from
   content/stats.py via get_social_proof_stats(); never hardcoded. */
.bpr-testimonials__meter {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--brand-charcoal-500);
  margin: 0;
}
.bpr-testimonials__meter strong {
  font-weight: 600;
  color: var(--brand-ink-900);
}
/* Each stat phrase wraps as a unit (no "average / rating" splits on mobile). */
.bpr-testimonials__meter-item { display: inline-block; }
.bpr-testimonials__meter-dot {
  margin: 0 var(--sp-2);
  color: var(--brand-paper-200);
}
/* The quote card — heavy uncoated stock on the paper band. Same elevation
   grammar as .svc-card (resting shadow, paper-200 border, radius-lg); the
   fill is section-aware via --card-surface (panel on this paper band). */
.bpr-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 13rem;
  margin: 0;
  padding: var(--sp-5);
  background: var(--card-surface, #fff);
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(46, 34, 30, 0.06), 0 8px 22px -8px rgba(46, 34, 30, 0.14);
  text-align: left;
}
/* Blind-embossed closing-quote watermark — an oversized Lora glyph pressed
   into the card corner at whisper opacity. Editorial character with zero
   gold: the small star row is the band's only accent presence (it sits one
   band above the gold closing CTA). The "/ ''" alt keeps it decorative for
   screen readers. */
.bpr-quote::after {
  content: "\201D" / "";
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1;
  color: rgba(46, 34, 30, 0.07);
  pointer-events: none;
  user-select: none;
}
/* Calm stars: small gold hits, not the former display-size row. */
.bpr-quote__stars {
  display: inline-flex;
  gap: 0.14rem;
  font-size: 0.75rem;
  color: var(--color-accent);
  margin-bottom: var(--sp-3);
}
.bpr-quote__star--empty { color: var(--brand-paper-200) !important; }
.bpr-quote__body { margin: 0 0 var(--sp-4); }
/* Editorial pull-quote in Lora at card scale — the sanctioned card-display
   exception (see UI.md, TYP2), like the card titles. */
.bpr-quote__text {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.1875rem);
  line-height: 1.55;
  color: var(--brand-ink-900);
  margin: 0;
}
/* Quiet attribution row pinned to the card foot: name + verification left,
   date right, split by a hairline. */
.bpr-quote__meta {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--brand-paper-200);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  font-family: var(--font-body);
}
.bpr-quote__who { min-width: 0; }
.bpr-quote__name {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--brand-ink-900);
  overflow-wrap: anywhere;
}
.bpr-quote__source {
  display: block;
  margin-top: 0.15rem;
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--brand-green-700);
}
.bpr-quote__source .fa-check-circle { font-size: 0.7rem; }
.bpr-quote__date {
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--brand-charcoal-500);
  white-space: nowrap;
}

/* -----------------------------------------------------------------
   Home sub-navigation (existing service pages) — tone down the green pill
   ----------------------------------------------------------------- */

.section-subtitle {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--brand-charcoal-700) !important;
  font-size: 0.9375rem;
}
.section-subtitle:hover { color: var(--brand-green-700) !important; }
.badge.badge-pill.badge-success {
  background: transparent !important;
  color: var(--brand-green-700) !important;
  border-bottom: 2px solid var(--brand-green-700);
  border-radius: 0 !important;
  padding: 0.15rem 0.35rem !important;
  font-weight: 700;
}

/* -----------------------------------------------------------------
   "WHAT DO WE OFFER" 2x2 section
   ----------------------------------------------------------------- */

section.section-five { padding: var(--sp-8) 0; background: var(--brand-paper-50); }
section.section-five h4.section-title {
  font-family: var(--font-display);  /* feature-card headings are Lora (UAT 2026-06-03) */
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--brand-ink-900);
}
section.section-five > .container > h4.section-title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--brand-ink-900);
  text-align: center;
  padding-bottom: var(--sp-5) !important;
  padding-top: 0 !important;
}

/* "WHY BULLET PROOFREADING?" heading */
#why-choose-us h4.section-title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--brand-ink-900);
}
#why-choose-us {
  padding-top: var(--sp-7) !important;
  padding-bottom: var(--sp-7) !important;
}
#why-choose-us h4:not(.section-title) {
  font-family: var(--font-display);  /* the three feature headings are Lora (UAT 2026-06-03) */
  font-weight: 600;
}

/* -----------------------------------------------------------------
   Receive an instant quote widget — soften
   ----------------------------------------------------------------- */

.card.card-form,
.card.form-shadow {
  border: 1px solid var(--brand-paper-200) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-1) !important;
}

/* -----------------------------------------------------------------
   Mega footer (resolve-ui-batch) — Scribendi-style: a brand/contact
   column on the left, a responsive link grid on the right, and a clean
   bottom bar. Replaces the old .proofreading-footer / -sub-footer.

   On mobile (<=900px) it becomes the Scribendi-style mobile footer
   (resolve-mobile-ui): the brand block centres with a larger logo, and
   each link section collapses into a tap-to-expand accordion. The chevron
   toggle button is display:none on desktop (so desktop is unchanged — no
   extra tab stops); on mobile it shows and an Alpine `is-open` class on the
   column reveals the list. The use-case headings stay links (the toggle is
   a separate sibling button, never nested inside the link).
   ----------------------------------------------------------------- */

.bpr-footer {
  background: var(--brand-charcoal-800);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-body);
  /* Forest accent rule across the top (Scribendi-style colour bar) — the
     brand's action colour marking the footer boundary against a LIGHT section
     above. A bold, deliberate band (not a hairline) so it reads as an
     intentional brand device. */
  border-top: 16px solid var(--color-primary);
}
/* …but when the closing forest CTA band sits directly above the footer, that
   16px bar is the SAME forest as the band (--brand-green-700 → --color-primary),
   so they merge — extending the green ~16px below the CTA's symmetrically-padded
   text and making it read off-centre/high. Drop the bar in that adjacency. The
   forest→charcoal tonal step still reads as the boundary. General sibling (~),
   not adjacent (+): the CTA partial emits a <script> after its </section>, so
   `+` would miss the footer. `.bpr-cta` is only ever the closing band, so `~`
   can't over-match a mid-page CTA. */
.bpr-cta ~ .bpr-footer { border-top: 0; }
.bpr-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  /* Compact vertical rhythm (footer-restyle) — trimmed top/bottom padding so the
     mega footer reads shorter and denser, Scribendi-style. */
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 900px) {
  .bpr-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding: var(--sp-7) var(--sp-5) var(--sp-6);
  }
}

/* Left brand column */
/* Larger + reversed to white: the shipped footer-logo.svg is the dark-ink logo,
   invisible on the charcoal band. brightness(0) flattens every fill to black,
   invert(1) flips black→white — one uniform white mark, no separate asset. */
.bpr-footer__logo img { height: 60px; width: auto; display: block; filter: brightness(0) invert(1); }
.bpr-footer__contact {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 var(--sp-4);
}
.bpr-footer__contact li { margin-bottom: 0.4rem; }
.bpr-footer__contact a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9375rem;
  text-decoration: none;
}
.bpr-footer__contact a:hover { color: #fff; }
.bpr-footer__social {
  list-style: none;
  display: flex;
  gap: var(--sp-2);
  padding: 0;
  margin: 0;
}
.bpr-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  transition: background 120ms ease, color 120ms ease;
}
.bpr-footer__social a:hover { background: var(--color-accent, #F5B82E); color: #fff; }

/* Right link grid — secondary surface panel (Scribendi-style): a faint white
   wash lifting the links off the charcoal base into their own zone. NOT a gold
   fill — gold is an accent glint, never a large field behind body text (v2.1). */
.bpr-footer__grid {
  display: grid;
  /* Fixed 4-column track (footer-restyle) — the 7 columns (4 audience use-cases +
     Services/Company/Resources) lay out edge-to-edge as a tidy 4×2 grid: audiences
     on row 1, the rest on row 2. Fills horizontal space evenly instead of the old
     auto-fit pack that left ragged trailing space. Collapses to a 1-col accordion
     ≤900px (see the mobile block below). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}
.bpr-footer__heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  color: #fff;
  margin: 0 0 var(--sp-3);
  letter-spacing: 0;
}
.bpr-footer__heading a { color: inherit; text-decoration: none; }
.bpr-footer__heading a:hover { color: rgba(255, 255, 255, 0.8); }
/* The heading wraps a label (use-case <a> link or a plain <span>) + a chevron
   toggle button. On desktop the toggle is hidden, so the heading renders exactly
   as before; the accordion behaviour is mobile-only (see the <=900px block). */
.bpr-footer__heading-label { color: inherit; text-decoration: none; }
.bpr-footer__heading-label:hover { color: rgba(255, 255, 255, 0.8); }
.bpr-footer__toggle {
  display: none;  /* desktop: hidden — heading renders as before */
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
.bpr-footer__chev { transition: transform 160ms ease; }
.bpr-footer__list { list-style: none; padding: 0; margin: 0; }
.bpr-footer__list li { margin-bottom: 0.45rem; }
.bpr-footer__list a {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-decoration: none;
}
.bpr-footer__list a:hover { color: #fff; }

/* Trust strip — the dedicated seal row (.bpr-trustcerts, on-dark) between the
   link grid and the bottom bar. The component centres + wraps itself; this
   just sets the strip width + breathing room. The bottom bar's own top hairline
   closes the strip, so no extra divider is needed here. */
.bpr-footer__trust {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-6);
  /* A hairline above (echoing the bottom bar's) demarcates the seals as an
     intentional trust band between the link grid and the copyright bar. */
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
/* Right-aligned (Scribendi-style) so the white badges sit as a trust signature
   above the right-hand legal links, not floating centred in the dark. */
.bpr-footer__trust .bpr-trustcerts { justify-content: flex-end; }
@media (max-width: 900px) {
  .bpr-footer__trust { padding: var(--sp-5); }
  /* Re-centre on mobile — a right-aligned stack looks lopsided on a narrow screen. */
  .bpr-footer__trust .bpr-trustcerts { justify-content: center; }
}

/* Bottom bar */
.bpr-footer__bar {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.bpr-footer__copy {
  margin: 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}
.bpr-footer__legal { display: flex; gap: var(--sp-4); }
.bpr-footer__legal a {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
}
.bpr-footer__legal a:hover { color: #fff; }
@media (max-width: 900px) {
  /* Stack + centre the bottom bar on mobile, and reserve clearance below it
     so the fixed Chatra "Let's talk" tab (bottom-right, ~102×40 at bottom:20px)
     never sits on top of the Terms / Privacy legal links. Centring moves the
     legal row off the bottom-right corner the tab occupies; the extra
     padding-bottom lifts it clear of the tab's height when scrolled to the
     page foot. */
  .bpr-footer__bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-4) var(--sp-5) calc(var(--sp-5) + 60px);
  }
  .bpr-footer__legal { justify-content: center; }
}

/* --- Mobile footer: centred brand + accordion link sections (resolve-mobile-ui) --- */
@media (max-width: 900px) {
  /* Centre + enlarge the brand block (Scribendi-style). */
  .bpr-footer__brand { text-align: center; }
  .bpr-footer__logo { display: inline-block; }
  .bpr-footer__logo img { height: 84px; margin: 0 auto; }
  .bpr-footer__contact { text-align: center; }
  .bpr-footer__social { justify-content: center; }

  /* Drop the wash panel + grid — sections stack as full-width accordion rows. */
  .bpr-footer__grid {
    grid-template-columns: 1fr;
    gap: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
  }
  .bpr-footer__col { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .bpr-footer__col:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }

  /* Heading is a tap bar: label left, chevron toggle right. */
  .bpr-footer__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: 0;
    padding: var(--sp-4) 0;
  }
  .bpr-footer__heading-label { font-size: 0.9375rem; }
  .bpr-footer__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: var(--sp-2);
    margin: calc(var(--sp-4) * -1) calc(var(--sp-2) * -1) calc(var(--sp-4) * -1) 0;
    color: rgba(255, 255, 255, 0.6);
  }
  .bpr-footer__chev { font-size: 0.8125rem; }
  .bpr-footer__col.is-open .bpr-footer__chev { transform: rotate(180deg); }

  /* List collapsed by default; revealed when its column is open. */
  .bpr-footer__list { display: none; padding-bottom: var(--sp-4); }
  .bpr-footer__col.is-open .bpr-footer__list { display: block; }
}

/* -----------------------------------------------------------------
   SITE-WIDE PAGE-BODY SYSTEM
   Sections that follow a masthead get consistent top breathing room.
   Stray top-of-body <hr>s (a legacy pattern) are hidden.
   ----------------------------------------------------------------- */

/* Default vertical rhythm for any top-level section inside main flow */
.bpr-masthead + section,
.bpr-masthead + main > section:first-of-type {
  padding-top: var(--sp-7);
}

/* All <section> children directly under any masthead start with proper spacing */
.bpr-masthead ~ section:not([class*="bpr-"]) {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}

/* Hide stray top-of-body <hr> separators left over from the legacy layout.
   A masthead has its own border-bottom so any <hr> right after is redundant. */
.bpr-masthead + section > .container > hr:first-child,
.bpr-masthead + section > .container-fluid > hr:first-child,
.bpr-masthead + section > div > hr:first-child,
section > .container > hr:first-child,
section > .container-fluid > hr:first-child {
  display: none;
}

/* Trailing <hr> inside a content block — usually before the next sub-footer
   include. Render as a subtle divider rather than a thick line. */
hr {
  border: 0 !important;
  border-top: 1px solid var(--brand-paper-200) !important;
  margin: var(--sp-6) 0 !important;
  height: 0 !important;
}

/* -----------------------------------------------------------------
   Body section titles — unify with serif italic display family
   Exceptions: 4-col card grids and #why-choose-us keep sans
   ----------------------------------------------------------------- */

section h4.section-title,
section h3.section-title,
section h5.service-card {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--brand-ink-900);
}

/* Sub-section titles in card grids: compact size, but Lora (display) per the
   card-title rule — these are feature/card headings, not eyebrow labels
   (UAT 2026-06-03: previously pinned to --font-sans, which the user kept
   reporting as "not Lora"). */
section.section-five h4.section-title,
#why-choose-us h4,
.card.service-pane h5.service-card {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0;
}
/* Doubled specificity (a legacy hack) kept so this wins over older
   section-title rules and so the two-class --compact variant below can in turn
   override it. Carries only the display size + tracking; family/weight/colour
   come from the base .bpr-section__title. (The prior dead 1.25rem sans block
   that sat above this was removed in the 2026-07-11 size pass.) */
.bpr-section__title.bpr-section__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.25rem);
  letter-spacing: -0.015em;
}

/* Compact variant — a real Lora heading kept at a calmer sub-section scale
   (~h3). Used where the section title is an in-column "what is this" heading
   rather than a page-level section banner (the use-case sub-service intro), so
   it sits in scale with the body + the section headings below it rather than
   reading as an oversized display heading. Carries TWO classes deliberately so
   it matches the doubled-specificity .bpr-section__title.bpr-section__title
   override above (a legacy specificity hack) and, sitting after it, wins.
   (FLAG: that doubled-specificity rule is a smell — it just re-asserts the base
   .bpr-section__title size at 0,2,0; worth collapsing in a later cleanup.) */
.bpr-section__title.bpr-section__title--compact {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Body lead-ins for service pages — section-title used directly as h4 */
section h4.section-title {
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* -----------------------------------------------------------------
   Sub-navigation on service pages — clean up the pill+pipe row
   ----------------------------------------------------------------- */

.bpr-masthead + section > .container-fluid > .text-center.pt-3 {
  padding-top: var(--sp-6) !important;
  padding-bottom: var(--sp-4) !important;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}

/* -----------------------------------------------------------------
   Auth / account / form cards — login + register + similar
   ----------------------------------------------------------------- */

.list-group.mb-4 {
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.list-group-item.bg-secondary {
  background-color: var(--brand-charcoal-700) !important;
  color: #fff !important;
  font-family: var(--font-sans);
  font-weight: 500;
  border: 0 !important;
  padding: var(--sp-3) var(--sp-4) !important;
}
.list-group-item.bg-secondary a,
.list-group-item.bg-secondary a.text-warning {
  color: var(--brand-green-300) !important;
  font-weight: 600;
  text-decoration: none;
}
.list-group-item.bg-secondary a:hover { color: #fff !important; }
.list-group-item.bg-light {
  background-color: #fff !important;
  border-color: var(--brand-paper-200) !important;
  padding: var(--sp-4) !important;
}
.list-group-item.bg-dark {
  background-color: var(--brand-paper-100) !important;
  border-color: var(--brand-paper-200) !important;
  padding: var(--sp-4) !important;
}
.list-group-item.bg-dark .btn-primary {
  background: var(--brand-green-700) !important;
  border-color: var(--brand-green-700) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600;
  padding: 0.65rem 1.5rem !important;
}
.list-group-item.bg-dark .btn-primary:hover {
  background: var(--brand-green-500) !important;
  border-color: var(--brand-green-500) !important;
}
.list-group-item h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}

/* Google sign-in button */
a#google-btn, .google-btn {
  background: #fff !important;
  color: var(--brand-ink-900) !important;
  border: 1px solid var(--brand-paper-200) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1rem !important;
}
a#google-btn:hover { border-color: var(--brand-green-300) !important; }

#subBtn, #realBtn, button[name='submit'].btn-success {
  background: var(--brand-green-700) !important;
  border-color: var(--brand-green-700) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600;
  padding: 0.65rem 1.5rem !important;
}

/* -----------------------------------------------------------------
   Generic ".section-title" — tone down all-caps shouty default
   ----------------------------------------------------------------- */

h4.section-title, h5.section-title, h3.section-title {
  text-transform: none;
  letter-spacing: 0;
  color: var(--brand-ink-900);
}

/* Sections that still use a plain <h2> — make them match the new aesthetic */
#international-students h2,
#our-expertise h2 {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.875rem, 3vw + 0.5rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--brand-ink-900);
  margin-bottom: var(--sp-4);
}

/* #our-expertise is marked .bpr-section--tinted in the markup — let it render
   as a standard tinted section (same padding, background, and borders as its
   sibling #second-language-editing) rather than this paper-bg/0-padding
   override, which made the two read as inconsistently-padded (UAT 2026-06-03). */
#international-students {
  padding: var(--sp-8) 0 !important;
  background: var(--brand-paper-50) !important;
  border: 0 !important;
}

/* -----------------------------------------------------------------
   Price calculator widget polish
   ----------------------------------------------------------------- */

.form-shadow {
  background: #fff !important;
  border: 1px solid var(--brand-paper-200) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-1) !important;
}
/* "Receive an instant quote" heading on the price-calculator widget.
   This is a genuine section heading, so it takes the display family
   (Lora) per the canonical heading rule — NOT Inter. (Pre-fix it was
   pinned to --font-sans, which rendered the heading in the wrong font.) */
.form-shadow h6 {
  font-family: var(--font-display);
  border-bottom-color: var(--brand-paper-200) !important;
}
.form-shadow h6 span { font-family: inherit; }
.form-shadow h6 i.fas { color: var(--brand-green-700) !important; }

#hoverTarget {
  border-radius: var(--radius-md) !important;
  border-color: var(--brand-paper-200) !important;
  background: #fff !important;
  box-shadow: var(--shadow-1);
}
#hoverTarget #wordCount {
  color: var(--brand-green-700) !important;
  font-family: var(--font-sans);
  font-weight: 600 !important;
}
#hoverTarget #servicePrice {
  color: var(--brand-green-700) !important;
  font-family: var(--font-serif) !important;
  font-style: normal;
  font-weight: 600 !important;
  font-size: 2rem !important;
}
#hoverTarget .btn.btn-success.dropdown-toggle {
  background: var(--brand-green-700) !important;
  border-color: var(--brand-green-700) !important;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}

/* -----------------------------------------------------------------
   Index sub-nav (anchor list on home services section) — softer
   ----------------------------------------------------------------- */

.section-five h4.section-title,
section.section-five h4.section-title {
  font-family: var(--font-display);  /* Lora feature-card headings (UAT 2026-06-03) */
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--brand-ink-900);
}

/* -----------------------------------------------------------------
   Navbar tune-up (still Bootstrap-compatible)
   ----------------------------------------------------------------- */

nav.navbar.bg-light {
  background-color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--brand-paper-200);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

nav.navbar .nav-main-text {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--brand-ink-900) !important;
}
nav.navbar .navbar-brand img {
  height: 46px !important;
  width: auto !important;
}

/* Navbar action buttons → pill style consistent with the rest of the site */
nav.navbar .btn.btn-dark,
nav.navbar .btn.btn-success {
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-sans);
  font-weight: 600;
  padding: 0.5rem 1.2rem !important;
  font-size: 0.9375rem;
  line-height: 1;
  border: 1.5px solid transparent;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, color 120ms ease;
}
nav.navbar .btn.btn-dark {
  background: transparent !important;
  color: var(--brand-ink-900) !important;
  border-color: var(--brand-ink-900) !important;
}
nav.navbar .btn.btn-dark:hover {
  background: var(--brand-ink-900) !important;
  color: #fff !important;
}
nav.navbar .btn.btn-success {
  background: var(--brand-green-700) !important;
  border-color: var(--brand-green-700) !important;
  color: #fff !important;
}
nav.navbar .btn.btn-success:hover {
  background: var(--brand-green-500) !important;
  border-color: var(--brand-green-500) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
nav.navbar .btn.btn-sm { padding: 0.4rem 1rem !important; font-size: 0.875rem; }

/* Don't let Bootstrap's w-50 squash the buttons too narrow on desktop */
nav.navbar ul.navbar-nav.ml-auto .d-flex { gap: 0.5rem; }
nav.navbar ul.navbar-nav.ml-auto .btn.w-50,
nav.navbar ul.navbar-nav.ml-auto .btn.w-md-100 {
  width: auto !important;
}

/* Footer logo — render the green logo as white on the dark band */
.bpr-footer-logo {
  display: inline-flex;
  align-items: center;
}
.bpr-footer-logo img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  transition: opacity 120ms ease;
}
.bpr-footer-logo:hover img { opacity: 1; }

/* -----------------------------------------------------------------
   Services carousel
   ----------------------------------------------------------------- */

.svc-carousel {
  position: relative;
  max-width: var(--container-wide);
  margin: 0 auto;
  /* Horizontal padding is the gutter the prev/next arrows live in (they sit at
     left:0 / right:0). It MUST stay >= the 44px arrow width so the arrows never
     overlap the card — 48px gives a 4px clearance. This holds on mobile too,
     where one 100%-width card shows and the arrows would otherwise sit on it. */
  padding: 0 var(--sp-7);
}

.svc-carousel__track-wrap {
  /* P4-04 (2026-05-29): the carousel only needs to clip HORIZONTALLY (so
     off-screen slides don't leak). The previous bare `overflow: hidden`
     also clipped vertically, cutting off the `.svc-card:hover` translateY
     lift + box-shadow at the top edge. `overflow-x: clip` keeps the
     horizontal clip; `overflow-y: visible` lets the lift + shadow render
     fully (this pairing is well-supported — unlike `hidden` + `visible`).
     Vertical padding gives the shadow room without changing layout (the
     outer .svc-carousel margins already provide section spacing). */
  overflow-x: clip;
  overflow-y: visible;
  padding-block: 12px;
  border-radius: var(--radius-md);
}

.svc-carousel__track {
  display: flex;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
/* Stepping is the shell's only motion (no auto-advance anywhere) — honour
   reduced motion for every consumer (services / audiences / blog /
   testimonials). Must follow the base rule to win the cascade. */
@media (prefers-reduced-motion: reduce) {
  .svc-carousel__track { transition: none; }
}

.svc-carousel__slide {
  flex: 0 0 calc(100% / 3);
  min-width: 0;
  padding: 0 var(--sp-3);
  box-sizing: border-box;
}

@media (max-width: 1023px) {
  .svc-carousel__slide { flex: 0 0 50%; }
}

@media (max-width: 639px) {
  .svc-carousel__slide { flex: 0 0 100%; }
  /* No padding override here: the base --sp-7 (48px) gutter is kept so the 44px
     arrows clear the single mobile card. A narrower gutter (the old --sp-6/32px)
     put the arrows 12px on top of the card. */
}

/* Static mode: fewer slides than visible slots — render as a centred wrapping
   row instead of a scrollable carousel. Applied by Alpine when
   totalSlides <= visibleCount (e.g. 3 careers cards at desktop visibleCount=3).
   Horizontal clipping is relaxed so the track fills the container naturally. */
.svc-carousel--static .svc-carousel__track {
  flex-wrap: wrap;
  justify-content: center;
  transform: none !important;
}
.svc-carousel--static .svc-carousel__track-wrap {
  overflow-x: visible;
}
.svc-carousel--static .svc-carousel__slide {
  flex: 0 0 calc(100% / 3);
}
@media (max-width: 1023px) {
  .svc-carousel--static .svc-carousel__slide { flex: 0 0 50%; }
}
@media (max-width: 639px) {
  .svc-carousel--static .svc-carousel__slide { flex: 0 0 100%; }
}
/* In static mode all slides are visible at once, so the carousel chrome is
   redundant. The controls are always server-rendered (robust to Alpine init
   timing); CSS — not x-if — hides them when static. */
.svc-carousel--static .svc-carousel__btn,
.svc-carousel--static .svc-carousel__dots {
  display: none;
}

/* Elevated, left-aligned editorial card (homepage services + use-cases, service
   overview, use-case summaries). Redesign 2026-06-29: real resting elevation,
   a squared forest icon tile (not the repeated pale-green circle), a Lora
   title, the price as a gold chip, and a visible "Learn more →" affordance —
   the cards previously read flat/generic. One on-brand treatment for every
   card; distinction comes from the glyph.
   SCOPED EXCEPTION (resolve-inscribe-footer-sections): the five homepage
   use-case cards carry a per-audience icon-chip hue (`.svc-card__icon--<slug>`
   below) for wayfinding — a soft wash tile only, card body/title/hover/arrow
   unchanged, no tile is gold/yellow (the single-gold CTA rule is untouched).
   This is the same pattern as `.social-card__icon--*`; every OTHER svc-card
   still follows "distinction comes from the glyph, never a rainbow of colours". */
.svc-card {
  position: relative;
  background: var(--card-surface, #fff);   /* panel on paper, white on wash (run-2) */
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(46, 34, 30, 0.06), 0 8px 22px -8px rgba(46, 34, 30, 0.14);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: left;
  color: inherit;             /* .svc-card is sometimes an <a> (use-case cards) */
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

/* Whole-card click affordance (wired by content/js/service_carousel.js). */
.svc-card[data-service-card-url],
.svc-card[data-href] {
  cursor: pointer;
}

.svc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(46, 34, 30, 0.07), 0 18px 36px -12px rgba(31, 82, 54, 0.24);
  border-color: var(--brand-green-500);
}

/* Squared, soft-radius icon tile — left-aligned. (Was a 64px pale-green circle
   centred over left-aligned text, repeated ~17x down the page: the main
   "generic template" tell.) */
.svc-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-green-100);
  color: var(--brand-green-700);
  border-radius: var(--radius-md);
  font-size: 1.35rem;
  margin: 0 0 var(--sp-4);
  flex-shrink: 0;
}

/* Per-audience icon-chip hues for the five homepage use-case cards (see the
   note on .svc-card above). Soft wash tile + saturated glyph; academic anchors
   on brand forest, the others take a distinct professional hue. Same pattern as
   .social-card__icon--* — categorical wayfinding colour on the chip only. */
.svc-card__icon--academic      { background: var(--usecase-academic-wash);      color: var(--usecase-academic); }
.svc-card__icon--authors       { background: var(--usecase-authors-wash);       color: var(--usecase-authors); }
.svc-card__icon--professionals { background: var(--usecase-professionals-wash); color: var(--usecase-professionals); }
.svc-card__icon--students      { background: var(--usecase-students-wash);      color: var(--usecase-students); }
.svc-card__icon--technical     { background: var(--usecase-technical-wash);     color: var(--usecase-technical); }

.svc-card__title {
  font-family: var(--font-display);   /* Lora — the editorial touch the rest of the page has */
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-3);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Price chip in the card's top-right (run-2): the soft accent-WASH treatment,
   not a solid gold fill. Three service cards can share one viewport (the
   homepage/overview carousels), so three solid-gold pills used to concentrate
   and dilute the single-gold-CTA discipline. The wash tint + accent-ink text
   keeps the price yellow-family and legible while reserving the solid gold for
   the one conversion CTA per view. Frees the title to stand on its own. */
.svc-card__price {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  background: var(--color-accent-wash);
  color: var(--color-accent-ink);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.svc-card__body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--brand-charcoal-700);
  flex: 1;
  margin: 0 0 var(--sp-4);
}

/* The card title is the descriptive link (good anchor text + a11y — no repeated
   generic "Learn more"/"Explore" anchors); a forest arrow after the title
   nudges on card hover as the "go" cue. Social-media cards keep their own
   visible .svc-card__cta button, so they're excluded from the title arrow. */
.svc-card__title a { color: inherit; text-decoration: none; }
.svc-card:not(.social-card) .svc-card__title::after {
  content: "\00a0\2192";
  color: var(--brand-green-700);
  display: inline-block;
  transition: transform 160ms ease;
}
.svc-card:not(.social-card):hover .svc-card__title::after { transform: translateX(3px); }

/* .svc-card__cta is now used only by the social-media cards (a btn-pill link). */
.svc-card__cta {
  align-self: flex-start;
  padding: 0.6rem 1.25rem;
  font-size: 0.9375rem;
}

/* Social channel grid (content/social_media.html) — reuses .svc-card as a
   whole-card link so the page matches the services pages, with each platform's
   brand colour carried only by the icon accent (no off-brand solid buttons). */
.social-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.social-card {
  text-decoration: none;
  text-align: center;
}
.social-card .svc-card__cta { align-self: center; }
/* Social cards stay centred (the redesigned .svc-card icon tile is left-aligned). */
.social-card .svc-card__icon { margin-left: auto; margin-right: auto; }
/* Platform accents — override the default green .svc-card__icon circle. */
.social-card__icon--facebook  { background: #eaeefb; color: #4c68d7; }
.social-card__icon--youtube   { background: #fdeceb; color: #c4302b; }
.social-card__icon--twitter   { background: #e6f4fe; color: #1d9bf0; }
.social-card__icon--instagram { background: #fdecf3; color: #cd486b; }
@media (max-width: 900px) {
  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .social-grid { grid-template-columns: 1fr; }
}

/* Prev / next buttons */
.svc-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--brand-paper-200);
  border-radius: 50%;
  color: var(--brand-ink-900);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease, opacity 120ms ease;
  z-index: 10;
}

.svc-carousel__btn:hover {
  background: var(--brand-green-700);
  border-color: var(--brand-green-700);
  color: #fff;
}

.svc-carousel__btn:focus-visible {
  outline: 2px solid var(--brand-green-300);
  outline-offset: 3px;
}

.svc-carousel__btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.svc-carousel__btn--prev { left: 0; }
.svc-carousel__btn--next { right: 0; }

/* Dot indicators */
.svc-carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.svc-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--brand-paper-200);
  cursor: pointer;
  padding: 0;
  transition: background 160ms ease, transform 160ms ease;
}

.svc-carousel__dot--active {
  background: var(--brand-green-700);
  transform: scale(1.25);
}

.svc-carousel__dot:focus-visible {
  outline: 2px solid var(--brand-green-300);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Ordering "how it works" steps (ordering.html) — modern bpr-section style,
   replacing the legacy Bootstrap list-group layout. Forest-on-paper, brand v2.
   ------------------------------------------------------------------------- */
.bpr-steps {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}
.bpr-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
.bpr-steps__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--sp-5);
}
.bpr-steps__num {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
}
.bpr-steps__body { flex: 1; }
.bpr-steps__title {
  margin: 0 0 0.25rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--brand-ink-900);
}
.bpr-steps__icon { color: var(--color-primary); margin-right: 0.35rem; }
.bpr-steps__desc {
  margin: 0;
  color: var(--brand-charcoal-500, var(--brand-ink-900));
  font-size: 0.95rem;
}
.bpr-steps__cta {
  text-align: center;
  margin-top: var(--sp-6);
}

/* Fine-print note — a muted, centred caveat/footnote that sits under a stepper
   or feature block (e.g. the express-page large-document caveat, the "other
   turnaround options" cross-links). Constrained to the narrow column so it
   aligns with the stepper above it, and `margin-top` keeps it off the block it
   follows (the bug where the caveat touched the stepper). */
.bpr-note {
  max-width: var(--container-narrow);
  margin: var(--sp-6) auto 0;
  padding: 0 var(--sp-4);
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--brand-charcoal-700);
}

/* Reassurance callout — one centred card for a standalone promise, used by the
   shared "Deadline guarantees" block on every deadline page so the guarantee
   reads as an intentional element (not a stray grey legacy heading). */
.bpr-assurance {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-6);
  text-align: center;
  background: var(--card-surface, #fff);   /* section-aware (run-2) */
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.bpr-assurance__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto var(--sp-3);
  border-radius: 999px;
  background: var(--brand-green-50);
  color: var(--color-primary);
  font-size: 1.1rem;
}
.bpr-assurance__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-2);
}
.bpr-assurance__body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--brand-charcoal-700);
  margin: 0;
}

/* ============================================================================
   Custom styled dropdown (.chk-dropdown__*)
   ----------------------------------------------------------------------------
   Shared, site-wide styled <select> replacement: a hidden (sr-only) native
   <select> for form submit + a11y, plus an Alpine-driven trigger button and
   options menu. Behaviour lives in content/js/bpr-dropdown.js (window.chkDropdown).
   Used by the checkout doc card AND the public instant-quote section, which is
   why these visuals live in the site-wide token layer rather than checkout.css.
   The positioning context is owned by each consumer's wrapper
   (.chk-field on checkout, .bpr-iq__dropdown on the instant quote). The
   checkout-only embellishments (--described tooltip rows, .chk-mega) stay in
   checkout.css. See docs/UI.md "Custom dropdowns".
   ========================================================================== */
.chk-dropdown__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.chk-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--brand-ink-900);
  line-height: 1.4;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.chk-dropdown__trigger:hover {
  border-color: var(--brand-green-300);
}

.chk-dropdown__trigger:focus,
.chk-dropdown__trigger.is-open {
  outline: none;
  border-color: var(--brand-green-500);
  box-shadow: 0 0 0 3px rgba(58, 170, 53, 0.18);
}

.chk-dropdown__trigger.is-placeholder .chk-dropdown__label {
  color: var(--brand-charcoal-500);
}

.chk-dropdown__label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0.5rem;
}

.chk-dropdown__chev {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--brand-green-700);
  border-bottom: 2px solid var(--brand-green-700);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
  flex-shrink: 0;
}

.chk-dropdown__trigger.is-open .chk-dropdown__chev {
  transform: translateY(2px) rotate(-135deg);
}

.chk-dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(46, 34, 30, 0.12);
  list-style: none;
  padding: 0.25rem;
  margin: 0;
  max-height: 280px;
  overflow-y: auto;
}

.chk-dropdown__item {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: calc(var(--radius-sm) - 2px);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--brand-ink-900);
  cursor: pointer;
  transition: background 80ms ease;
}

.chk-dropdown__item.is-active,
.chk-dropdown__item:hover {
  background: var(--brand-green-50, #f1f8f3);
}

.chk-dropdown__item.is-selected {
  background: var(--brand-green-100, #e1f0e7);
  color: var(--brand-green-700);
  font-weight: 600;
}

.chk-dropdown__item.is-blank {
  color: var(--brand-charcoal-500);
  font-style: italic;
}