/* ============================================================================
   currency-pages.css · currency retone for the inner marketing pages
   ----------------------------------------------------------------------------
   Spec:    specs/brand/003-currency-visual-system.md
   Rollout: specs/brand/004-currency-rollout.md

   The 28 inner pages share one markup vocabulary (.rl-section, .rl-card,
   .rl-h2, .section-title, .service-pill, .site-header, .site-footer). Rather
   than rewrite 28 files of markup, this sheet restyles that vocabulary in
   currency terms. Markup and copy are untouched, so no page can lose copy in
   the migration and every page moves together.

   LOAD ORDER MATTERS. Pages load:
       currency.css → static-page.css → rich-landing.css → currency-pages.css
   The first three supply layout; this one supplies the identity and must come
   last so its colours win.

   Band assignment follows spec 003's rhythm: the hero is space, .rl-section
   alternates parchment and vault, the final CTA is space, the footer is vault.
   ============================================================================ */

/* ---- Legacy token bridge -------------------------------------------------
   These pages' markup consumes brand.css variables. brand.css is no longer
   loaded, so the variables are re-declared in currency terms. Parchment is the
   default substrate for inner pages, so the bridge reads light, unlike the
   homepage checkout bridge which reads vault. */
:root{
  --bg:var(--parchment-hi); --bg-deep:var(--parchment); --surface:var(--parchment-hi);
  --text:var(--money-ink); --text-dim:rgba(27,48,32,.66);
  --accent:var(--money-green-mid); --accent-hover:var(--money-green-dp);
  --accent-dim:rgba(74,122,58,.42); --accent-on:var(--parchment-hi);
  --star-glow:var(--money-green); --gold:var(--money-green);
  --border:rgba(27,48,32,.22); --hairline:rgba(27,48,32,.14);
  --hairline-strong:rgba(27,48,32,.3);
  --error:#b3261e; --radius:4px; --radius-brand:4px;
  --surface-gradient:linear-gradient(180deg,var(--parchment-hi),var(--parchment));
  --shadow-card:0 1px 3px rgba(27,48,32,.10);
  --glow-soft:none; --glow-accent:none;
  /* NEVER set these to none. .rl-display span and .rl-h2 span use
     background:var(--grad-headline) with background-clip:text and
     color:transparent. A `none` background leaves transparent text on
     transparent background: the copy vanishes silently, and a colour-only
     check still passes because the computed colour is 'correct'. */
  --grad-headline:linear-gradient(90deg,var(--money-ink),var(--money-green-dp));
  --grad-accent-text:linear-gradient(90deg,var(--money-green-mid),var(--money-green-dp));
  --grad-accent:linear-gradient(90deg,var(--money-green),var(--money-green-mid));
}

/* ---- Page substrate ---- */
body{background:var(--parchment-hi);color:var(--money-ink);font-family:var(--sans)}
.page-wrap,.rl-page .page-wrap{background:transparent}

/* The old cosmic backdrop belongs to the amber era. Parchment is opaque paper. */
.rl-stars,.rl-constellation,#cosmos{display:none !important}

/* ---- Header · parchment with an ink hairline ---- */
.site-header{
  background:var(--parchment-hi);
  border-bottom:1px solid rgba(27,48,32,.16);
  backdrop-filter:none;
}
.site-header a,.site-header .nav-link{color:var(--money-ink)}
.site-header a:hover{color:var(--money-green-mid)}

/* ---- Hero · the space band ---- */
.rl-hero,.page-hero{
  background:var(--space-band);
  background-size:200% 200%;
  animation:plaidGlow 18s ease-in-out infinite;
  color:var(--parchment-hi);
  padding:96px 0 84px;
}
.rl-hero .rl-display,.rl-hero .page-title,.rl-hero h1{color:var(--parchment-hi)}
/* The gilded operative phrase: Plaid's light wash, never gold. */
.rl-hero .rl-display span,.rl-hero .page-title span,.rl-hero h1 span{
  background:linear-gradient(90deg,var(--space-light-pink) 0%,var(--space-light-purple) 50%,var(--space-light-teal) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rl-hero .rl-sub,.rl-hero .page-subtitle{color:var(--space-periwinkle)}
.rl-hero .rl-eyebrow{color:var(--space-light-purple)}
.rl-hero .rl-eyebrow .dot{background:var(--space-light-pink)}

/* ---- Sections · alternating parchment and vault ---- */
.rl-section,.section{background:var(--parchment-hi);color:var(--money-ink);border-top:0}
.rl-section:nth-of-type(even){
  background:var(--money-ink);color:var(--money-green-lt);
  /* Rebind the legacy tokens inside the vault, rather than chasing individual
     selectors. Anything using var(--text) / var(--text-dim) inherits the
     parchment values otherwise and paints dark ink on dark ink: .rl-bar-axis
     was doing exactly that, invisible on every vault section on the site. */
  --text:var(--money-green-lt);
  --text-dim:rgba(200,223,168,.66);
  --border:rgba(200,223,168,.24);
  --hairline:rgba(200,223,168,.16);
  --accent:var(--money-green);
}
.rl-section:nth-of-type(even) .rl-h2,
.rl-section:nth-of-type(even) .section-title,
.rl-section:nth-of-type(even) h2,
.rl-section:nth-of-type(even) h3{color:var(--parchment-hi)}
.rl-section:nth-of-type(even) .rl-sub,
.rl-section:nth-of-type(even) p{color:rgba(200,223,168,.82)}
.rl-section:nth-of-type(even) .rl-eyebrow{color:var(--money-green)}

/* ---- Headings ---- */
/* NOT bare h1,h2: that painted every heading intaglio ink, including ones on
   vault and space bands, where ink on ink is invisible. It stayed green in the
   harness because the visibility check only inspects leaf nodes and these
   headings contain a .soft span. Scoped to parchment contexts. */
.rl-h2,.section-title,.page-title,.psec-head h2,
.rl-section:nth-of-type(odd) h1,.rl-section:nth-of-type(odd) h2,
.page-wrap > h1,.page-wrap > h2{
  font-family:var(--sans);font-weight:800;letter-spacing:-.02em;color:var(--money-ink);
}
.rl-h2 span,.section-title span{color:var(--money-green-mid);background:none;-webkit-text-fill-color:currentColor}
.rl-eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--money-green-mid);
}
.rl-eyebrow .dot{background:var(--money-green);box-shadow:none}
.rl-sub,.page-subtitle{color:rgba(27,48,32,.7)}

/* ---- Cards · 1px self-coloured, 2px reserved for figures (spec 003 rule 7) ---- */
.rl-card,.feature,.case-card,.faq-item,.highlight-box,.rl-quote,.heritage-band{
  background:var(--parchment-hi);
  border:1px solid rgba(27,48,32,.22);
  border-radius:2px;box-shadow:none;
}
.rl-card-glow{box-shadow:none;border-color:rgba(27,48,32,.3)}
.rl-section:nth-of-type(even) .rl-card,
.rl-section:nth-of-type(even) .feature,
.rl-section:nth-of-type(even) .case-card{
  background:rgba(250,248,240,.05);border-color:rgba(200,223,168,.24);color:var(--money-green-lt);
}
.rl-numeral{color:var(--money-green-mid);opacity:1;text-shadow:none}
.rl-section:nth-of-type(even) .rl-numeral{color:var(--money-green)}

/* ---- Pills and chips · labels, never buttons (spec 003 primitive 15) ---- */
.rl-pill,.rl-chip,.service-pill,.case-tag,.case-metric{
  background:transparent;border:1.5px solid rgba(27,48,32,.32);
  color:var(--money-ink);border-radius:100px;box-shadow:none;
}
/* The whole chip family, not a subset. .rl-chip and .rl-pill were left out of
   the first pass and rendered ink-on-vault: the "Construction" and "B2B SaaS"
   labels on the case cards were invisible. */
.rl-section:nth-of-type(even) .service-pill,
.rl-section:nth-of-type(even) .case-tag,
.rl-section:nth-of-type(even) .case-metric,
.rl-section:nth-of-type(even) .rl-chip,
.rl-section:nth-of-type(even) .rl-pill,
.rl-section:nth-of-type(even) [class*="chip"],
.rl-section:nth-of-type(even) [class*="pill"]{
  border-color:rgba(200,223,168,.34) !important;
  color:var(--money-green-lt) !important;
  -webkit-text-fill-color:var(--money-green-lt) !important;
  background:transparent;
}

/* ---- Tables (comparison pages) ---- */
.compare-table{border:2px solid var(--money-ink);border-radius:0}
.compare-table th{background:var(--money-ink);color:var(--parchment-hi)}
.compare-table td{border-color:rgba(27,48,32,.16);color:var(--money-ink)}
.compare-table tr.highlight td{background:rgba(133,187,101,.10)}

/* ---- Final CTA · space band ---- */
.page-cta,.rl-final-cta{
  background:var(--space-band);
  background-size:200% 200%;
  animation:plaidGlow 18s ease-in-out infinite;
  color:var(--parchment-hi);border-top:0;
}
.page-cta h2,.rl-final-cta h2,.page-cta .rl-h2{color:var(--parchment-hi)}
.page-cta p,.rl-final-cta p{color:var(--space-periwinkle)}

/* ---- Footer · vault ---- */
.site-footer{background:var(--money-ink);color:var(--money-green-lt);border-top:0}
.site-footer a{color:rgba(200,223,168,.78)}
.site-footer a:hover{color:var(--money-green)}
.footer-head{color:var(--money-green);letter-spacing:.16em;text-transform:uppercase}
.footer-copy{color:rgba(200,223,168,.52)}

/* ---- The arrow icon button is the only primary CTA (house rule) ---- */
.btn-primary,.rl-cta,.cta-button{
  background:var(--money-ink);color:var(--parchment-hi);
  border:2px solid var(--money-ink);border-radius:2px;box-shadow:none;
}
.btn-primary:hover,.rl-cta:hover,.cta-button:hover{background:var(--money-green-dp);border-color:var(--money-green-dp)}
.page-cta .btn-primary,.rl-final-cta .btn-primary{
  background:var(--parchment-hi);color:var(--money-ink);border-color:var(--parchment-hi);
}

/* ---- Links ---- */
a{color:var(--money-green-mid)}
a:hover{color:var(--money-green-dp)}

/* ---- Motion · the guard must outrank every animation-setting selector ---- */
@media (prefers-reduced-motion:reduce){
  .rl-hero,.page-hero,.page-cta,.rl-final-cta,
  .pricing-hero,.industry-hero,.vs-hero,.about-hero,.results-hero,
  .rl-stars i,.rl-twinkle-1,.rl-twinkle-2,.rl-twinkle-3,.rl-twinkle-4,
  .cstar,.cglow,.exhaust,.reveal{
    animation:none !important;transition:none !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
}


/* ============================================================================
   Layout scaffolding
   ----------------------------------------------------------------------------
   brand.css carried more than tokens: the reset, the sticky flex .site-header,
   .site-nav, and .page-wrap centring all lived there. currency.css was written
   for v4-signal's .wrap/.band structure and defines none of them, so dropping
   brand.css collapsed the inner pages' header and gutters. Restored here in
   currency terms.
   ============================================================================ */
*,*::before,*::after{box-sizing:border-box}

.site-header{
  max-width:1100px;margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;
  background:var(--parchment-hi);
  border-bottom:1px solid rgba(27,48,32,.14);
}
.site-nav{display:flex;align-items:center;gap:2px;margin-left:auto;margin-right:12px}
.site-nav a{
  font-size:13.5px;font-weight:600;color:rgba(27,48,32,.72);text-decoration:none;
  padding:9px 11px;border-radius:3px;line-height:1;white-space:nowrap;
  transition:color .18s,background .18s;
}
.site-nav a:hover,.site-nav a:focus{color:var(--money-ink);background:rgba(133,187,101,.14)}
.site-nav a[aria-current="page"]{color:var(--money-ink);background:rgba(133,187,101,.18)}

.page-wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.page-wrap--wide{max-width:1240px}
.page-wrap--narrow{max-width:760px}
.rl-narrow{max-width:820px;margin-left:auto;margin-right:auto}

/* Full-bleed bands.
   Sections are nested INSIDE .page-wrap, which is a max-width column, so a
   plain width:100% leaves the substrate stopping mid-viewport with parchment
   either side: the band reads as a card rather than a printed band. The
   negative-margin breakout lets each section paint edge to edge while its
   content stays on the same 1100px measure as the header.

   body already carries overflow-x:clip, so the 100vw breakout cannot introduce
   a horizontal scrollbar. */
.rl-section,.section,.page-cta,.rl-final-cta,
.rl-hero,.page-hero,.pricing-hero,.industry-hero,.vs-hero,.about-hero,.results-hero,
.site-footer{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding-left:max(24px,calc(50vw - 550px));
  padding-right:max(24px,calc(50vw - 550px));
}

/* Per-page hero variants that are not .rl-hero (pricing, industries, vs, ...) */
.pricing-hero,.industry-hero,.vs-hero,.about-hero,.results-hero{
  background:var(--space-band);
  background-size:200% 200%;
  animation:plaidGlow 18s ease-in-out infinite;
  color:var(--parchment-hi);padding:92px 24px 80px;
}
.pricing-hero h1,.industry-hero h1,.vs-hero h1,.about-hero h1,.results-hero h1,
.pricing-hero .rl-display,.pricing-hero h2{color:var(--parchment-hi)}
.pricing-hero p,.industry-hero p,.vs-hero p,.about-hero p,.results-hero p{color:var(--space-periwinkle)}
.pricing-hero .rl-eyebrow,.industry-hero .rl-eyebrow,.vs-hero .rl-eyebrow{color:var(--space-light-purple)}
.pricing-hero .rl-display span,.pricing-hero h1 span{
  background:linear-gradient(90deg,var(--space-light-pink),var(--space-light-purple),var(--space-light-teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Price figures: solid ink, never a clipped gradient (spec 003 tier-amt). */
.price-amount,.rl-price,.tier-amt,.price-big{color:var(--money-ink);-webkit-text-fill-color:var(--money-ink)}
.rl-section:nth-of-type(even) .price-amount,
.rl-section:nth-of-type(even) .rl-price{color:var(--money-green-lt);-webkit-text-fill-color:var(--money-green-lt)}


/* ============================================================================
   Specificity corrections
   ----------------------------------------------------------------------------
   rich-landing.css uses `.rl-page .page-wrap` (0,2,0) and clips .rl-numeral to
   a gradient. Single-class overrides lose to both, so these are matched at or
   above their specificity. Verified by the harness's layout and visibility
   gates rather than by eye.
   ============================================================================ */
.rl-page .page-wrap{max-width:1100px}
.rl-page .rl-narrow,.rl-narrow{max-width:820px}

/* .rl-numeral is clipped to a gradient. Paint it solid ink and force the fill,
   or the figure renders transparent-on-parchment: present in the DOM, correct
   in computed colour, invisible on screen. */
.rl-numeral,.rl-page .rl-numeral{
  background:none !important;
  -webkit-background-clip:border-box !important;background-clip:border-box !important;
  color:var(--money-ink) !important;-webkit-text-fill-color:var(--money-ink) !important;
  text-shadow:none;
}
.rl-section:nth-of-type(even) .rl-numeral{
  color:var(--money-green) !important;-webkit-text-fill-color:var(--money-green) !important;
}
.rl-hero .rl-numeral,.pricing-hero .rl-numeral{
  color:var(--parchment-hi) !important;-webkit-text-fill-color:var(--parchment-hi) !important;
}


/* ============================================================================
   Clipped-text safety net
   ----------------------------------------------------------------------------
   Several pages carry their own inline <style> that paints a figure with
   background:var(--grad-*) + background-clip:text + color:transparent. If any
   of those gradients ever resolves to none, the text becomes transparent on
   transparent: still in the DOM, still "correctly" coloured to a computed-style
   check, and completely invisible on screen. That is how the $19.99 on /pricing
   disappeared.

   These figures are solid ink in the currency system anyway (spec 003: .tier-amt
   is a solid ink price, never a gradient), so paint them solid and force the
   fill. Cheaper than auditing 28 inline stylesheets, and it fails safe.
   ============================================================================ */
.price-card-amount,.price-card-amount span,
.rl-numeral,.rl-numeral span,
.pain-big,.pain-big small,
.case-metric-value,.metric-value{
  background:none !important;
  -webkit-background-clip:border-box !important;background-clip:border-box !important;
  color:var(--money-ink) !important;-webkit-text-fill-color:var(--money-ink) !important;
  filter:none !important;
}
.rl-section:nth-of-type(even) .price-card-amount,
.rl-section:nth-of-type(even) .price-card-amount span,
.rl-section:nth-of-type(even) .rl-numeral,
.rl-section:nth-of-type(even) .rl-numeral span,
.rl-section:nth-of-type(even) .case-metric-value{
  color:var(--money-green) !important;-webkit-text-fill-color:var(--money-green) !important;
}
/* Only figures sitting DIRECTLY on a space band go parchment. The pricing
   card is its own parchment surface inside the hero, so its amount stays ink:
   painting it parchment put cream text on a cream card and the price vanished
   a second time, in a way a transparency check cannot see. */
.rl-hero > .rl-numeral,.rl-hero > * > .rl-numeral,
.pricing-hero > .rl-numeral,.pricing-hero > * > .rl-numeral{
  color:var(--parchment-hi) !important;-webkit-text-fill-color:var(--parchment-hi) !important;
}
.price-card,.price-card-inner,.rl-card{background:var(--parchment-hi)}
.price-card .price-card-amount,.price-card .price-card-amount span,
.rl-card .price-card-amount,.rl-card .rl-numeral{
  color:var(--money-ink) !important;-webkit-text-fill-color:var(--money-ink) !important;
}

/* ============================================================================
   Sitewide layout repairs
   ----------------------------------------------------------------------------
   brand.css supplied more structure than the token bridge replaced. These are
   the remaining collapses, all visible on every inner page.
   ============================================================================ */

/* Footer. .footer-cols was display:block and .footer-col a was inline, so every
   column and every link ran together into one unreadable line:
   "PRODUCTHow it worksPricingResultsDocs". */
.site-footer .footer-cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:36px 28px;
  padding:56px 0 28px;
  align-items:start;
}
.site-footer .footer-col{display:flex;flex-direction:column;gap:9px}
.site-footer .footer-col a{
  display:block;font-size:14px;line-height:1.5;
  color:rgba(200,223,168,.72);text-decoration:none;
}
.site-footer .footer-col a:hover{color:var(--money-green)}
.site-footer .footer-head{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--money-green);margin-bottom:4px;
}
.site-footer .footer-copy{
  padding:20px 0 40px;border-top:1px solid rgba(200,223,168,.16);
  font-size:13px;color:rgba(200,223,168,.5);
}

/* Final CTA. padding-bottom was 0, so the trial line sat flush against the
   footer edge and read as overlapping it. */
.page-cta,.rl-final-cta{padding-top:88px;padding-bottom:88px}
.page-cta > *,.rl-final-cta > *{position:relative;z-index:2}

/* Hero. The display heading was inheriting a narrow measure from .rl-narrow
   while its sub stayed centred, so the two disagreed: a left-crammed headline
   over a centred paragraph. Centre the whole hero block on one measure. */
.rl-hero,.page-hero,.pricing-hero,.industry-hero,.vs-hero,.about-hero,.results-hero{
  text-align:center;
}
.rl-hero .rl-display,.rl-hero h1,
.pricing-hero h1,.industry-hero h1,.vs-hero h1,.about-hero h1,.results-hero h1{
  max-width:19ch;margin-left:auto;margin-right:auto;text-align:center;
}
.rl-hero .rl-sub,.rl-hero p,.pricing-hero p,.industry-hero p,
.vs-hero p,.about-hero p,.results-hero p{
  max-width:62ch;margin-left:auto;margin-right:auto;
}

/* Vault sections. Eyebrow pills and headings were inheriting parchment-era
   colours and rendered dark-on-dark: "CONSTRUCTION" and "LeadsRx" were both
   effectively unreadable on the case cards. */
.rl-section:nth-of-type(even) .rl-eyebrow,
.rl-section:nth-of-type(even) .case-tag,
.rl-section:nth-of-type(even) .case-label,
.rl-section:nth-of-type(even) [class*="eyebrow"]{
  color:var(--money-green) !important;
  border-color:rgba(200,223,168,.34);
}
.rl-section:nth-of-type(even) h2,
.rl-section:nth-of-type(even) h3,
.rl-section:nth-of-type(even) .case-name,
.rl-section:nth-of-type(even) [class*="-title"]{
  color:var(--parchment-hi) !important;
  -webkit-text-fill-color:var(--parchment-hi) !important;
}
.rl-section:nth-of-type(even) .case-metric,
.rl-section:nth-of-type(even) [class*="metric"]{
  color:var(--money-green) !important;-webkit-text-fill-color:var(--money-green) !important;
}

/* ============================================================================
   Shared defects reported by the nav-page pass
   ----------------------------------------------------------------------------
   Each of these was found by working on a single page and correctly reported
   rather than patched locally. All are sitewide.
   ============================================================================ */

/* 1. Bands must butt. rich-landing.css sets `.rl-section{margin:72px 0 0}` with
      no bottom padding, so every substrate change showed a parchment gutter and
      vault bands ended flush against their last card. Spec 003 layout rule 1:
      "Sections butt directly against each other. No hairline, no border-top."
      Must be margin-top/-bottom, NOT the shorthand: the shorthand wipes the
      full-bleed `margin-left: calc(50% - 50vw)` and the page overflows. */
.rl-section{
  margin-top:0 !important; margin-bottom:0 !important;
  padding-top:76px; padding-bottom:76px;
}
@media (max-width:600px){ .rl-section{padding-top:52px;padding-bottom:52px} }

/* 2. The final CTA sat under a static-page.css margin + border-top hairline,
      putting a gap and a rule between the vault band and the space CTA. */
.page-cta,.rl-final-cta{margin-top:0 !important;border-top:0 !important}

/* 3. .cta-hint rendered near-black on the space gradient. The contrast gate
      cannot see this: the band paints with a background-image, so the luminance
      walk bails out. Found by eye, not by the harness. */
.page-cta .cta-hint,.rl-final-cta .cta-hint,
.rl-hero .cta-hint,.pricing-hero .cta-hint{
  color:var(--space-periwinkle) !important;
}
.page-cta .cta-hint b,.page-cta .cta-hint strong,
.rl-final-cta .cta-hint b,.rl-final-cta .cta-hint strong{color:var(--parchment-hi) !important}

/* 4. .rl-h2 span resolved to --money-green-mid, which is dim on intaglio ink. */
.rl-section:nth-of-type(even) .rl-h2 span,
.rl-section:nth-of-type(even) .section-title span{
  color:var(--money-green) !important;-webkit-text-fill-color:var(--money-green) !important;
}

/* 5. The header CTA and lockup were defined only in brand.css, which no page
      loads any more. The arrow button rendered 28x32 and unstyled on all 27
      inner pages: the stray mark at the right of the nav. */
.site-header .btn-header-cta{
  width:44px;height:44px;flex:0 0 44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--money-ink);border:0;border-radius:2px;
  color:var(--parchment-hi);text-decoration:none;
  transition:background .18s,transform .18s;
}
.site-header .btn-header-cta:hover{background:var(--money-green-dp);transform:translateY(-1px)}
.site-header .btn-header-cta svg{width:20px;height:20px;stroke:currentColor;color:var(--parchment-hi)}
/* The lockup is defined once in currency.css. These duplicates loaded after it
   and pinned the wordmark back to 19px on every inner page, so the homepage
   showed the new size and the other 13 pages did not. Removed rather than
   updated: two definitions is how they drifted apart in the first place. */

/* 6. The sticky header was capped at 1100px while every band below it is
      full-bleed, so over a dark band it read as a floating parchment card with
      bare page background either side. Full-bleed shell, inner measure. */
.site-header{
  width:100vw;max-width:none;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-left:max(24px,calc(50vw - 550px));padding-right:max(24px,calc(50vw - 550px));
}

/* 7. Stat tiles are not chips. .case-metric was swept into the chip family and
      inherited border-radius:100px, so a metric box rendered as a pill. */
.case-metric,.metric,[class*="metric-tile"]{
  border-radius:2px !important;
  border:1px solid rgba(27,48,32,.22);
  background:transparent;
}
.rl-section:nth-of-type(even) .case-metric{border-color:rgba(200,223,168,.26)}

/* 8. .faq-q padding is tuned for the v4-signal wrap and crowds on narrow
      viewports. */
@media (max-width:600px){
  .faq-q{padding-left:14px;padding-right:14px;gap:10px}
  .faq-a{padding-left:14px;padding-right:14px}
}

/* ============================================================================
   Logo wall
   ----------------------------------------------------------------------------
   .logo-grid / .logo-cell were styled by brand.css. Unstyled, the grid falls
   back to display:block and each cell becomes a full-width row sized to its
   image's natural height. Nine of the twelve logos are 500x500 PNGs, so the
   wall rendered ~4,500px tall: 43% of /industries/contractors was a column of
   giant logos. Present on all 10 industry pages and /about.

   The logos are also light marks made for a dark backdrop, so on parchment they
   were washing out to nearly nothing. The wall therefore carries its own vault
   panel rather than relying on whichever band it lands in. That is also the
   right register: this is the provenance strip, and vault is where the site
   states credentials.
   ============================================================================ */
.logo-wall,.logo-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:22px 30px;
  align-items:center;
  background:var(--money-ink);
  border:1px solid rgba(200,223,168,.18);
  border-radius:2px;
  padding:34px 30px;
  margin:26px 0;
}
.logo-cell{
  display:flex !important;
  align-items:center;justify-content:center;
  height:46px;width:auto;padding:0;
}
.logo-cell img{
  max-width:100%;max-height:34px;width:auto;height:auto;
  object-fit:contain;
  filter:grayscale(1) brightness(1.9);
  opacity:.72;
  transition:opacity .18s;
}
.logo-cell:hover img{opacity:1}
@media (max-width:600px){
  .logo-wall,.logo-grid{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:18px;padding:24px 18px}
  .logo-cell{height:38px}
  .logo-cell img{max-height:26px}
}

/* ---- Primitives that needed adapter-page equivalents ---------------------- */

/* .band--photo on an .rl-section page needs the same full-bleed breakout the
   other bands get, or the portrait sits inside the content column. */
.rl-section.band--photo,.page-wrap .band--photo{
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-left:0;padding-right:0;padding-bottom:0;
}

/* .service-pill had border and colour but no padding or font-size, so pills
   collapsed to bare bordered text unless each page added them. */
.service-pill,.rl-pill,.rl-chip,.cert-pill{
  display:inline-flex;align-items:center;
  padding:7px 14px;font-size:13.5px;font-weight:600;line-height:1;
  letter-spacing:-.01em;
}

/* Mobile header. The nav wrapped to a second row and crowded the CTA at 375px.
   Let it scroll horizontally instead of wrapping. */
@media (max-width:640px){
  .site-header{padding-top:10px;padding-bottom:10px;gap:10px}
  .site-nav{
    overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-right:8px;
  }
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{padding:8px 9px;font-size:13px}
  .site-header .btn-header-cta{width:38px;height:38px;flex:0 0 38px}
}