/*
Theme Name: Launcher 2026
Theme URI: https://www.launcher.solutions
Author: Launcher Solutions, Inc.
Author URI: https://www.launcher.solutions
Description: 2026 rebuild theme for Launcher Solutions. Custom-built theme replacing WPBakery Page Builder. Brand colors: blue #0177B5 (primary), rust #B54001 and green #98BE50 (secondary accents). See the Design Specification doc in Marketing\Website\2026 Website Rebuild for full color and typography rules.
Version: 0.107.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: launcher2026
*/

:root {
  --ink: #1A202C;
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --accent: #0177B5;
  --accent-dark: #015E90;
  --rust: #B54001;
  --green: #98BE50;
  --green-text: #5C7A2E;
  --slate: #4C6178;
  --slate-light: #7A8CA0;
  --line: #E2E5EA;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Lato', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: -0.01em; }
.mono { font-family: 'Lato', sans-serif; font-weight: 700; letter-spacing: 0.06em; }
/* .scrawl hardcoded Caveat, so the v0.56.0 decision to take eyebrows
   off hand lettering missed it — that change worked by repointing
   --font-hand, which this rule never used. It is a label, not an
   annotation: all 37 instances read "Let's talk" and sit exactly where
   an eyebrow sits. Hand lettering is for marks and margin notes, which
   are specific to their context; a string repeated identically on 37
   pages is a label. Converted in v0.58.3. */
.scrawl {
  font-family: 'Lato', sans-serif; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 0; }

/* trajectory divider — signature device: launch trajectory + real process sequence, use at genuine sequence moments only */
.trajectory { height: 40px; width: 100%; position: relative; overflow: hidden; }
.trajectory svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* header */
header.site-header { background: var(--accent); position: sticky; top: 0; z-index: 10; }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 32px; max-width: 1120px; margin: 0 auto; }
.logo { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.02em; color: #fff; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo .mark { color: var(--green); font-size: 20px; }
.logo-mark { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; flex-shrink: 0; display: block; }
.logo img { max-height: 30px; }
nav.primary-nav ul { list-style: none; display: flex; gap: 14px; }
/* The panel is positioned against header.site-header, which is already
   position:sticky and so is the nearest positioned ancestor — the same
   containing block .site-search-form uses. That only works if the
   top-level <li> stays static; a relative one would trap the panel at
   the width of its own trigger. Items inside the panel keep relative. */
nav.primary-nav > ul > li { position: static; }
nav.primary-nav ul ul li { position: relative; }
nav.primary-nav a { color: #fff; opacity: 0.9; text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; }
nav.primary-nav a:hover { opacity: 1; }

/* Nav panel, 0.91.0 — a described, multi-column dropdown replacing the
   single-column ink flyout. Eleven lending solutions and nine platform
   entries read as an undifferentiated run of links in one column, and a
   bare label cannot say what autoBUILT is.

   White, not var(--ink): the old panel was the one place in the theme
   that used navy as a background fill, which the brand rules say it
   never is. On a blue bar a white panel also reads as a surface the
   page opened rather than as more chrome.

   Still a <ul> that is a direct child of its <li> — main.js finds a
   dropdown with li.querySelector(':scope > ul') and treats an item
   without one as an ordinary link, so wrapping this in a <div> would
   leave every top-level item silently unopenable. No JS changed in
   0.91.0; the 0.75.2 hover/touch gate is untouched.

   Padding rather than an inner wrapper is what aligns the grid to the
   1120px column while the fill spans the full header — the same
   max()/calc() trick the section rail uses. 528px is (1120 - 64) / 2. */
nav.primary-nav .nav-panel {
  /* vw, not %, and that is the whole point (0.91.2). This token is read as
     padding on the panel and as a cancelling negative margin on the tail,
     and a percentage resolves against a different containing block in each:
     the header (1280px wide, giving 112px) for the panel's padding, the
     panel's own content box (1056px, giving 0 and falling through to the
     32px floor) for the tail's margin. The tail pulled back 32 of the 112
     it needed and sat inset by 80px a side. vw is the same number wherever
     it is read.

     The cost is the scrollbar: vw counts it and the header's own width does
     not, so where a classic scrollbar is drawn the grid sits half its width
     right of the logo. Overlay scrollbars make that zero. */
  --nav-pad: max(32px, calc(50vw - 528px));
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 28px;
  padding: 26px var(--nav-pad) 0;
  margin-top: 0; /* no dead gap between trigger and panel — see main.js */
  background: var(--surface);
  border-top: 1px solid var(--line);
  /* Tightened in 0.91.3. At 18px/40px the shadow spread into nothing over
     a pale band and the panel had no visible bottom; a shorter, darker one
     reads as an edge rather than as atmosphere. */
  box-shadow: 0 10px 24px rgba(26,32,44,0.22);
  z-index: 20;
}
/* Column count comes from the walker, which reads the child count. Four
   or fewer children take one row of that many; anything larger takes
   three. That is what lets Resources (four) and What You Finance
   (eleven) share one component with no per-menu setting. */
nav.primary-nav .nav-panel-cols-1 { grid-template-columns: minmax(0, 1fr); }
nav.primary-nav .nav-panel-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
nav.primary-nav .nav-panel-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Dropdowns are opened/closed by JS (assets/js/main.js) on CLICK, and on
   keyboard focus — never on hover, and never by CSS :hover/:focus-within.
   Hover-to-open was removed in 0.94.2: the panel opened itself before the
   cursor arrived, so the click that followed closed it again. Plain CSS
   :hover could not guarantee one open panel at a time either. */
nav.primary-nav .menu-item-has-children.is-open > .nav-panel { display: grid; }
nav.primary-nav .menu-item-has-children > a { cursor: pointer; }

/* The open item is marked on the bar, 0.91.1. Before this .is-open styled
   the panel and left its trigger identical to the four that were not open,
   so a full-width panel read as part of the header rather than as belonging
   to a section.

   ::after rather than border-bottom: a border joins the anchor's box and
   would shove every sibling label sideways the moment one opened. Green
   rather than white or blue — the bar is blue, so blue does not read, and
   green appears in almost nothing else on the site.

   The current section carries the same mark at lower contrast, from the
   classes WordPress already writes. */
nav.primary-nav > ul > li > a { position: relative; display: block; padding-bottom: 4px; }
nav.primary-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 2px;
  background: var(--green);
  opacity: 0;
  transition: opacity 0.15s ease;
}
nav.primary-nav > ul > li.is-open > a::after { opacity: 1; }
nav.primary-nav > ul > li.current-menu-item > a::after,
nav.primary-nav > ul > li.current-menu-ancestor > a::after,
nav.primary-nav > ul > li.current-menu-parent > a::after { opacity: 0.55; }
nav.primary-nav > ul > li > a:hover::after { opacity: 0.35; }
nav.primary-nav > ul > li.is-open > a:hover::after { opacity: 1; }

/* white-space:nowrap is inherited from the bar's own links and would
   put a description on one very long line. */
nav.primary-nav .nav-panel a {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--ink); opacity: 1; white-space: normal;
}
.nav-panel-icon {
  flex: 0 0 24px; width: 24px; text-align: center;
  color: var(--accent); font-size: 17px; line-height: 1.35;
}
.nav-panel-label {
  display: block; font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: 16px; line-height: 1.35; color: var(--ink);
}
.nav-panel-desc {
  display: block; font-size: 14px; line-height: 1.45;
  color: var(--slate-light); margin-top: 3px;
}
/* An item whose icon is missing from both sources would start its label at
   the cell edge while every sibling starts 34px in, which reads as a broken
   column rather than as a missing glyph. 24px icon track + 10px gap. */
.nav-panel-item-noicon > a { padding-left: 34px; }
nav.primary-nav .nav-panel a:hover .nav-panel-label { color: var(--accent); }
nav.primary-nav .nav-panel a:hover .nav-panel-desc { color: var(--slate); }

/* The tail row is the only route from the bar to a section's own hub
   page: top-level triggers preventDefault() in main.js, and the
   per-menu "Overview" child that used to carry it was dropped in
   0.91.0 when items gained descriptions. Full-bleed by cancelling the
   panel's own padding, so it reads as a foot to the panel rather than
   as a twelfth item. */
.nav-panel-tail {
  grid-column: 1 / -1;
  margin: 22px calc(-1 * var(--nav-pad)) 0;
  padding: 13px var(--nav-pad);
  background: var(--band-blue);
  border-top: 1px solid var(--line);
  /* The panel has to own its bottom edge, 0.91.3. The tail is --band-blue
     and the first band of a tinted page is the same value, so on a blue
     hero the two fills ran together and the panel simply had no bottom.
     A fill cannot be relied on to contrast with what is under it, because
     what is under it changes page by page — the same lesson as 0.67.2,
     reached from the other direction. */
  border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
}
nav.primary-nav .nav-panel-tail-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--accent);
}
nav.primary-nav .nav-panel-tail-link:hover { color: var(--accent-dark); }
.nav-panel-tail-link i { font-size: 13px; }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-right .btn-primary {
  /* Load-bearing, not cosmetic: without this, a flex row with no spare
     room shrinks whichever child has no explicit protection — that was
     this button, since nav.primary-nav's links already carry their own
     white-space:nowrap. A version of this fix existed but was scoped
     inside the @media (max-width:1100px) block, on the assumption the
     header had roomier spacing above that width. Once nav-row's max-
     width became a permanent 1120px (matching every other section)
     rather than a wide-viewport-only 1200px, that assumption no longer
     held, and the button could wrap into a multi-line blob at full
     desktop width. Unconditional now, not viewport-gated. */
  white-space: nowrap; flex-shrink: 0;
}
.menu-toggle { display: none; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }
/* Search, v0.44.0 — a collapsed icon by default (matches nav-right's
   existing white/translucent icon language) that reveals a full-width
   panel dropped just below the header row. header.site-header's own
   position:sticky already establishes the containing block this
   needs, so no extra wrapper is required. */
.search-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: none; border: none;
  color: #fff; opacity: 0.85; font-size: 15px; cursor: pointer;
  transition: opacity 0.15s ease;
}
.search-toggle:hover { opacity: 1; }
.site-search-form {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--accent-dark); padding: 16px 32px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.site-search-form.is-open { display: flex; gap: 10px; max-width: 1120px; margin: 0 auto; }
.site-search-input {
  flex: 1 1 auto; border: none; border-radius: 8px; padding: 11px 16px;
  font-family: 'Lato', sans-serif; font-size: 15px; color: var(--ink);
}
.site-search-input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.site-search-form button[type="submit"] {
  flex: 0 0 auto; width: 44px; border-radius: 8px; border: none;
  background: var(--green); color: var(--ink); cursor: pointer; font-size: 15px;
}
.btn { display: inline-block; font-size: 14px; font-weight: 700; text-decoration: none; padding: 11px 22px; border-radius: 24px; font-family: 'Lato', sans-serif; border: none; cursor: pointer; }
.btn-primary { background: var(--green); color: var(--ink); }
.btn-primary:hover { background: #86A83E; }
.btn-ghost { border: 1.5px solid rgba(255,255,255,0.5); color: #fff; background: transparent; }
.btn-ghost:hover { border-color: #fff; }

/* hero — bold full-bleed blue. Content inside .hero-content is now real
   block content (see front-page.php + the Home page's block editor),
   so these rules target block output directly rather than fixed
   template classes. */
.hero-wrap { background: var(--accent); padding: 64px 0 0; overflow: hidden; }
.hero { max-width: 1120px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; padding-bottom: 60px; }

.hero-content { color: #fff; }
.hero-content h1,
.hero-content h2,
.hero-content .wp-block-heading {
  font-size: 46px; line-height: 1.12; color: #fff; margin-bottom: 24px; font-weight: 700; font-family: 'Poppins', sans-serif;
}
.hero-content p { font-size: 17px; color: #DCEBF5; max-width: 460px; margin-bottom: 24px; line-height: 1.6; }
.hero-content p.is-style-eyebrow {
  font-family: var(--font-hand); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green); font-weight: var(--font-hand-weight); max-width: none; margin-bottom: 18px;
}
.hero-content mark.has-inline-color { background: transparent; padding: 0; } /* inline text-color highlight, e.g. the word "BETTER" */
.hero-content .wp-block-buttons { margin-bottom: 32px; gap: 14px; }

/* Registered block styles (functions.php: register_block_style) —
   selectable from the block toolbar's "Styles" panel, no manual class
   typing required from the editor. */
.wp-block-button.is-style-btn-primary .wp-block-button__link {
  background: var(--green); color: var(--ink); border-radius: 24px; font-weight: 600; padding: 11px 22px;
}
.wp-block-button.is-style-btn-primary .wp-block-button__link:hover { background: #86A83E; }
.wp-block-button.is-style-btn-ghost .wp-block-button__link {
  background: transparent; border: 1.5px solid rgba(255,255,255,0.5); color: #fff; border-radius: 24px; font-weight: 600; padding: 11px 22px;
}
.wp-block-button.is-style-btn-ghost .wp-block-button__link:hover { border-color: #fff; }
p.is-style-eyebrow {
  font-family: var(--font-hand); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); font-weight: var(--font-hand-weight);
}

/* Partner trust strip (v0.13.0) — launcher2026_render_partner_trust_strip()
   in functions.php. Its own neutral section (not embedded in a colored
   hero) so the same markup/styling works identically on the homepage,
   Solution pages, and Product pages regardless of what's above it. */
.partner-trust-strip { background: var(--bg); padding: var(--section-y-tight) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.partner-trust-strip .wrap { max-width: 1120px; margin: 0 auto; }
.partner-trust-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-light); margin-bottom: 18px; font-weight: 700; }
.partner-trust-logos { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.partner-trust-chip { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 28px; height: 76px; display: flex; align-items: center; text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
.partner-trust-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.partner-trust-chip img { max-height: 46px; max-width: 190px; width: auto; height: auto; object-fit: contain; }
.partner-trust-chip.is-text { font-size: 17px; font-weight: 700; color: var(--ink); }
.partner-trust-more { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; padding: 8px 4px; white-space: nowrap; }
.partner-trust-more:hover { text-decoration: underline; }


/* product screenshot panel */
.hero-visual { position: relative; }
.hero-visual-block { width: 100%; }
.hero-visual-block img {
  width: 100%; border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,0.25);
}
.badge-live { position: absolute; top: -14px; right: 30px; background: #fff; color: var(--accent); border: 2px dashed var(--accent); border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 700; transform: rotate(6deg); z-index: 2; }
.mascot { position: absolute; top: -46px; left: 30px; z-index: 2; }
.browser-card { background: #fff; border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,0.25); overflow: hidden; }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.browser-dot { width: 10px; height: 10px; border-radius: 50%; }
.browser-title { font-size: 12px; color: var(--slate-light); margin-left: 8px; }
.browser-body { display: flex; }
.browser-sidebar { width: 40px; padding: 16px 10px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--line); }
.sb-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--line); }
.sb-dot.active { background: var(--accent); }
.sb-dot.active-green { background: var(--green); }
.browser-content { flex: 1; padding: 18px 20px; }
.bc-toprow { display: flex; gap: 10px; margin-bottom: 16px; }
.bc-bar { height: 12px; border-radius: 4px; background: var(--line); }
.bc-btn { height: 30px; border-radius: 6px; background: var(--accent); width: 90px; }
.bc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.bc-tab { height: 46px; border-radius: 6px; background: var(--line); }
.bc-tab.active { background: var(--green); opacity: 0.85; }
.bc-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.bc-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
.bc-line { height: 9px; border-radius: 3px; background: var(--line); flex: 1; max-width: 140px; }
/* semantic status colors — NOT brand accents, used only for product-UI state indicators */
.pill { font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 10px; margin-left: auto; }
.pill-approved { background: #E4F3DD; color: #5C8A2E; }
.pill-review { background: #FDF1DA; color: #B5760A; }
.pill-pending { background: #EDEFF2; color: #64748B; }
.pill-declined { background: #FBE2DE; color: #C0392B; }

/* Generic eyebrow label — used by fixed template markup: section heads
   (Products/Solutions/Latest) and page-hero bands on product/solution/
   generic templates. Separate from .is-style-eyebrow, which is the
   block-editor style variation for the same look inside real content. */
.eyebrow { font-family: var(--font-hand); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: var(--font-hand-weight); color: var(--green); }

/* Single post "MEDIA" eyebrow (v0.20.0) — links back to the Media
   Archive page, so give it a hover state instead of the inherited
   default link underline. */
.news-eyebrow-link { display: inline-block; text-decoration: none; margin-bottom: 10px; }
.news-eyebrow-link:hover { color: var(--accent); }


/* v0.33.0 — .grid-4, .news-grid, .solutions-inner used `margin: 0 auto`,
   which CENTERS them independently within their section. Every heading
   above them (.section-head) is flush-left by design (a narrow text
   column, never centered) with no such margin. Below roughly 1184px
   viewport width the two looked the same, since a centered box with no
   room to center just fills the available width — but on any wider
   screen the grid drifts rightward while the heading stays put,
   producing the leftward-leaning heading the screenshot shows. All
   three now sit flush-left, matching .section-head, at every width.

/* section shared.
   Horizontal padding used to live here AND on .grid-4/.news-grid
   (both max-width:1120 + margin:auto) — two padding layers stacking,
   which shifted this section's content roughly 32px left of every
   .wrap-based section (page body copy, footer, CTA band). Padding is
   now vertical only here; the 32px horizontal gutter moves onto the
   direct children below, matching .wrap's own convention exactly so
   they align at every viewport width, not just wide desktop ones.
   Vertical padding also switches from a hardcoded 80px to the
   standard --section-y token, and picks up the same drawn top rule
   every other section boundary uses. */
section.block { max-width: 1120px; margin: 0 auto; padding: var(--section-y) 32px; position: relative; }
.section-head { max-width: 560px; margin-bottom: 48px; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 { font-size: 32px; margin-bottom: 12px; color: var(--ink); }
.section-head p { color: var(--slate); font-size: 16px; }
section.block .eyebrow { color: var(--accent); }

/* products grid — cards are <a> elements (v0.17.0) so the whole card
   is a tap target, not just the "Explore" text — meaningfully bigger
   hit area on mobile. */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* =================================================================
   CARD FEATURED-IMAGE BACKGROUND — see the consolidated block further
   down this file, placed after the drawn-frame .card rules it needs
   to sit on top of in the cascade. Nothing here; kept as a marker so
   a future edit doesn't reintroduce a rule at this position by
   mistake — see the note by the later block for why that matters.
   ================================================================= */

.card .tag { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; }
.tag-blue { color: var(--accent); }
.tag-rust { color: var(--rust); }
.tag-green { color: var(--green-text); }
.tag-neutral { color: var(--slate-light); }
.card h3 { font-size: 17px; }
.card p { font-size: 14px; color: var(--slate); flex-grow: 1; }
.card .card-cta { font-size: 13px; font-weight: 600; color: var(--ink); }
.card:hover .card-cta { color: var(--accent); }

/* solutions — trajectory sequence. Also a full-row <a> (v0.17.0). */
.solutions-wrap { background: var(--surface); padding: var(--section-y-loose) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.solutions-inner { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.seq { display: flex; flex-direction: column; }
.seq-item {
  display: flex; align-items: center; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: padding-left 0.15s ease;
}
/* Hover is scoped to a.seq-item, not .seq-item — the row shifts
   because it's clickable, so a non-anchor row using the same
   layout (a static sequence in page content, say) must not move
   under the cursor and promise a click that isn't there. Both
   current uses, the homepage Solutions band and the Solutions hub,
   are anchors and are unaffected. */
a.seq-item:hover { padding-left: 8px; }
.seq-item:last-child { border-bottom: none; }
.seq-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.seq-dot.dot-rust { background: var(--rust); }
.seq-dot.dot-green { background: var(--green); }
.seq-item h3 { color: var(--ink); font-size: 18px; min-width: 240px; }
.seq-item p { color: var(--slate); font-size: 14px; flex-grow: 1; }
.seq-item .arrow { color: var(--accent); font-size: 13px; }
a.seq-item:hover .arrow { transform: translateX(4px); display: inline-block; transition: transform 0.15s ease; }

/* news */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card { border-top: 2px solid var(--accent); padding-top: 16px; }
.news-card.news-rust { border-top-color: var(--rust); }
.news-card.news-green { border-top-color: var(--green); }
/* display:block added in 0.68.0 — .news-date moved from a <div> to a
   <time> so the date is machine-readable, and <time> is inline, so
   without this the margin-bottom below does nothing. */
.news-date { display: block; font-size: 12px; color: var(--slate-light); margin-bottom: 8px; }
.news-card h3 { font-size: 16px; margin-bottom: 8px; line-height: 1.3; }
.news-card h3 a { text-decoration: none; color: inherit; }
.news-card a.more { font-size: 13px; color: var(--slate); text-decoration: none; }
.news-empty { color: var(--slate); font-size: 14px; }

/* Media page: filter tabs + full card grid, reusing .news-card styling */
.media-filters { max-width: 1120px; margin: 0 auto 32px; display: flex; gap: 8px; flex-wrap: wrap; padding: 0 32px; }
.media-filter-tab {
  font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
  padding: 9px 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface);
  color: var(--slate); cursor: pointer; text-decoration: none; display: inline-block;
}
.media-filter-tab:hover { border-color: var(--accent); color: var(--accent); }
.media-filter-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1120px; margin: 0 auto; }
.media-card-image {
  display: block; aspect-ratio: 400 / 240; overflow: hidden; border-radius: 8px;
  background: var(--line); margin-bottom: 14px;
}
.media-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-excerpt { font-size: 14px; color: var(--slate); margin-bottom: 10px; }

/* Media Archive pagination (v0.7.0) — plain server-rendered links, no
   JS required. Reuses .media-filter-tab's pill look via shared type
   scale/spacing rather than shared class, since tabs vs. page numbers
   have slightly different active-state semantics. */
.media-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 1120px; margin: 40px auto 0; padding: 0 32px 64px; flex-wrap: wrap; }
.media-page-link {
  font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 700;
  padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  color: var(--slate); text-decoration: none; min-width: 38px; text-align: center; line-height: 1.2;
}
.media-page-link:hover { border-color: var(--accent); color: var(--accent); }
.media-page-link.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.media-page-link.is-disabled { opacity: 0.4; pointer-events: none; }
.media-page-gap { color: var(--slate-light); font-size: 13px; padding: 0 2px; }

/* Fallback archive heading (v0.69.1). index.php is the template of
   last resort — category archives land here — and it had no document
   heading at all. Deliberately plain: this is a bare fallback, not a
   designed archive like Media or Guides. */
.archive-title { font-size: 28px; line-height: 1.25; margin: 0 0 28px; }

/* Search results (v0.44.0) — reuses .media-grid's column/gap values
   directly rather than redefining them, so any future spacing change
   there stays consistent here too. */
/* Assistant panel on search (v0.75.0). Sits above the keyword results
   and never replaces them: a wrong answer costs the visitor nothing
   because the real pages are still on the page. Accent border rather
   than a fill, so it reads as an aside to the results rather than as a
   competing band. */
.assistant-mount { max-width: 1120px; margin: 0 auto 28px; padding: 0 32px; }
/* Green, matching the invitation bar (0.81.1). Blue carries the site's
   whole visual weight, so a blue panel on a blue-linked page reads as
   more of the page. Green appears in almost nothing else — the CTA
   button and the logo mark — and that scarcity is what makes the
   assistant read as a distinct voice rather than as another section.
   The panel and the bar are now one object across two surfaces. */
.assistant-panel {
  border: 1px solid #D8E6BE; border-left: 3px solid var(--green);
  border-radius: 10px; background: var(--band-green); padding: 20px 22px;
}
.assistant-panel.is-refusal { border-left-color: var(--slate-light); background: var(--surface); }
.assistant-panel.is-refusal .assistant-label { color: var(--slate); }
.assistant-head { display: flex; align-items: center; margin-bottom: 10px; }
.assistant-label {
  font-family: 'Lato', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--green-text);
}
.assistant-panel.is-refusal .assistant-label { color: var(--slate); }
.assistant-body p { font-size: 15px; line-height: 1.65; margin: 0 0 12px; }
.assistant-body p:last-child { margin-bottom: 0; }
.assistant-status { color: var(--slate); font-style: italic; }

/* The panel is inserted after the page has painted, so without this it
   pops in and shoves the results down in one frame. A short fade plus a
   few pixels of travel reads as "this arrived" rather than as a jump.
   Kept off for reduced-motion. */
.assistant-panel { animation: assistant-in 220ms ease-out both; }
@keyframes assistant-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* While working, the left rule breathes. It is the only moving thing on
   the page and it stops the moment the answer lands, which is the signal
   that matters — a static panel for eight seconds reads as stalled. */
.assistant-panel.is-working { animation: assistant-in 220ms ease-out both, assistant-pulse 1.6s ease-in-out 220ms infinite; }
@keyframes assistant-pulse {
  0%, 100% { border-left-color: var(--green); }
  50%      { border-left-color: #D8E6BE; }
}

@media (prefers-reduced-motion: reduce) {
  .assistant-panel,
  .assistant-panel.is-working { animation: none; }
}
.assistant-sources {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #D8E6BE;
}
.assistant-sources-label { font-size: 12px; color: var(--slate-light); }
/* Chips take the surface so they lift off the tinted panel; the link
   colour stays blue because a link that is not blue on this site is not
   obviously a link. */
.assistant-source {
  font-size: 13px; color: var(--accent); text-decoration: none;
  background: var(--surface); border: 1px solid #D8E6BE;
  border-radius: 6px; padding: 3px 10px;
}
.assistant-source:hover { border-color: var(--green); }

.assistant-ask {
  font: inherit; font-size: 14px; cursor: pointer; color: var(--accent);
  background: none; border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 14px;
}
.assistant-ask:hover { border-color: var(--accent); }

/* Follow-up (0.76.0). A conversation stays on screen: an answer that
   replaced the one it refines would lose the thread the reader is
   holding, so each turn appends and earlier turns dim rather than go. */
.assistant-question { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }

/* Added 0.81.0 with the answer page. The mascot slot reuses the
   invitation bar's artwork so the assistant is one character across both
   surfaces rather than green-with-a-robot in the bar and anonymous blue
   on search. */
.assistant-robot {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--green);
  background-size: cover; background-position: center;
}
.assistant-head { display: flex; align-items: center; gap: 9px; }

/* The handoff strip. Its own row under a rule, so leaving the assistant
   to talk to a person is visibly a different action from asking it
   another question. */
.assistant-cta-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.assistant-cta-note { font-size: 12px; color: var(--slate); }
.assistant-panel.is-refusal .assistant-cta-strip { border-top-color: #D8E6BE; }

/* Turn cap. The input stays; only the thread resets. */
.assistant-reset {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
}
.assistant-reset-note { font-size: 12px; color: var(--slate); }
.assistant-reset-cta {
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--accent); border: 1px solid var(--accent);
  border-radius: 6px; padding: 5px 13px;
}
.assistant-reset-cta:hover { background: var(--accent); color: #fff; }
.assistant-panel.is-previous { opacity: .82; }
.assistant-panel + .assistant-panel { margin-top: 12px; }
.assistant-followup {
  display: flex; gap: 8px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.assistant-followup-input {
  flex: 1; font: inherit; font-size: 14px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--ink);
}
.assistant-followup-input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.assistant-followup-send {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 8px 16px; border-radius: 6px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff;
}
.assistant-followup-send:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
@media (max-width: 700px) { .assistant-followup { flex-direction: column; } }
@media (max-width: 700px) { .assistant-mount { padding: 0 20px; } }

/* Search glyph sparkle (0.77.3). Static — no animation.

   It was animated once per session, and twice failed to be noticeable
   for the same underlying reason: the glyph renders about 3px across
   inside its 10px box, and nothing that small carries motion. Making it
   move harder would have read as a rendering artifact rather than a
   flourish.

   The sparkle earns its place by being *there* — it says the box does
   more than match keywords — not by moving during a two-second window
   on one page of a session that most visitors will not be looking at.

   The magnifier is never replaced. It is among the few icons every
   visitor reads without a label, and swapping it for a sparkle trades
   an understood affordance for a fashionable one. */
.search-glyph { position: relative; display: inline-flex; }
.search-glyph-spark {
  position: absolute; top: -5px; right: -6px; font-size: 10px;
  color: var(--green); pointer-events: none;
}

/* Robot invitation (0.77.0). Slides up from the bottom edge rather than
   sitting in the corner: on mobile that is the native bottom-sheet
   pattern, and on desktop it leaves the corner to .back-to-top, which
   already owns it at z-index 9.

   z-index 8 — under .back-to-top so the scroll button is never covered,
   above ordinary content. */
.assistant-invite {
  /* Centred, not left-aligned: it reads as a page-level offer rather
     than something docked in a corner, and it lines up with the
     content column above it. left/right 0 plus auto margins keeps it
     centred without a transform, which the slide animation is using. */
  position: fixed; left: 0; right: 0; margin: 0 auto; bottom: 14px; z-index: 8;
  /* Green, and green is used almost nowhere else on a page — the CTA
     button and the logo mark. That scarcity is the point: the bar has
     to read as a different kind of thing from the content behind it,
     and blue is the site's whole visual weight. */
  background: var(--band-green); border: 1px solid #D8E6BE;
  border-left: 3px solid var(--green); border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.10);
  transform: translateY(calc(100% + 24px)); opacity: 0;
  transition: transform 260ms ease-out, opacity 200ms ease-out;
  max-width: 620px;
}
.assistant-invite.is-in { transform: none; opacity: 1; }
.assistant-invite-inner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; }

.assistant-invite-robot {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--green);
  background-size: cover; background-position: center;
}
/* Stopgap crop of solutions-hero-v3-launcher-robot.webp, a 1288x878
   scene. Frames the head and shoulders. Replace the hero and this
   points at nothing in particular — set a dedicated square image in
   Appearance -> Chatbot corpus instead. */
.invite-robot--fallback { background-size: 335px auto; background-position: -168px -72px; }

.assistant-invite-body { flex: 1; min-width: 0; }
.assistant-invite-message { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.assistant-invite-form { display: flex; gap: 7px; }
.assistant-invite-input {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink);
}
.assistant-invite-input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.assistant-invite-send {
  /* Deeper green than the CTA's --green, so a demo button and an
     assistant button are never mistaken for each other. */
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 7px 16px; border-radius: 6px; border: 1px solid var(--green-text);
  background: var(--green-text); color: #fff;
}
.assistant-invite-send:hover { filter: brightness(1.12); }
.assistant-invite-close {
  font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
  background: none; border: none; color: var(--slate-light); padding: 0 2px;
}
.assistant-invite-close:hover { color: var(--ink); }

/* Dismissed state. Collapsing to a tab rather than vanishing: somebody
   who dismisses it here may want it three pages later, and a permanent
   disappearance leaves no route back. */
.assistant-invite-tab {
  /* Centred to match the bar it collapsed from, so reopening feels
     like the same object returning rather than a new one appearing. */
  position: fixed; left: 0; right: 0; margin: 0 auto; width: fit-content;
  bottom: 0; z-index: 8;
  display: flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--green-text); color: #fff; border: none;
  border-radius: 10px 10px 0 0; padding: 8px 18px;
  transform: translateY(100%); transition: transform 200ms ease-out;
}
.assistant-invite-tab.is-in { transform: none; }
.assistant-invite-tab-dot {
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  background-size: cover; background-position: center;
}
.assistant-invite-tab-dot.invite-robot--fallback { background-size: 150px auto; background-position: -75px -32px; }

@media (max-width: 700px) {
  .assistant-invite { bottom: 0; max-width: none; border-radius: 12px 12px 0 0; border-left: none; border-top: 2px solid var(--green); }
  .assistant-invite-form { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-invite, .assistant-invite-tab { transition: none; }
}

/* The answer page (0.81.0).

   Replaces the grouped search results. Section headings came out: they
   read as a filing cabinet rather than as results, and a small type
   label per row carries the same information at a fraction of the
   weight. The priority ordering survives as sort order.

   One type scale — 15px body throughout, matching the assistant panel.
   The old rules ran 17px titles against 14px text against a 14px count
   and read as three components sharing a page. */

.answer-page { padding-bottom: var(--section-y); }

/* The single input. Sits directly under the answer so it is in view the
   moment the reader finishes, rather than at the foot of the results
   where the old "Search again" box was. */
.answer-ask {
  display: flex; gap: 10px; max-width: 1120px;
  margin: 0 auto 32px; padding: 0 32px; box-sizing: border-box;
}
.answer-ask-input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 11px 15px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink);
}
.answer-ask-input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.answer-ask-send {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 11px 22px; border-radius: 8px;
  border: 1px solid var(--green-text); background: var(--green-text); color: #fff;
}
.answer-ask-send:hover { filter: brightness(1.12); }

.answer-results,
.answer-empty { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

.answer-results-title {
  font-size: 13px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--slate); font-weight: 700; margin: 0 0 6px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.answer-results-count { color: var(--slate-light); font-weight: 400; margin-left: 8px; }

.answer-list { list-style: none; margin: 0; padding: 0; }
.answer-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.answer-item:last-child { border-bottom: none; }
.answer-item-kind {
  margin: 0 0 3px; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--slate-light);
}
.answer-item-link {
  display: inline-block; font-size: 17px; line-height: 1.35;
  color: var(--accent); text-decoration: none; font-weight: 600;
}
.answer-item-link:hover { text-decoration: underline; }
.answer-item-text {
  margin: 5px 0 0; font-size: 15px; line-height: 1.6;
  color: var(--slate); max-width: 74ch;
}

.answer-empty-lead { font-size: 15px; line-height: 1.6; color: var(--slate); margin: 0; }
.answer-empty-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.answer-empty-contact { margin: 16px 0 0; }

/* The handoff. Blue in a green panel, and in its own strip below a
   rule, so leaving the assistant to talk to a person is visibly a
   different kind of action from asking it another question. */
.answer-cta {
  display: inline-block; font-size: 14px; font-weight: 600;
  text-decoration: none; padding: 9px 18px; border-radius: 8px;
  background: var(--accent); color: #fff;
}
.answer-cta:hover { background: var(--accent-dark); }

@media (max-width: 700px) {
  .answer-ask,
  .answer-results,
  .answer-empty { padding-left: 20px; padding-right: 20px; }
  .answer-ask { flex-direction: column; }
  .answer-item-link { font-size: 16px; }
}

/* WordPress's standard visually-hidden utility (v0.68.0). The theme
   never had one — nothing had needed a label that shouldn't be seen
   until 404.php's search field. Core does not supply this for the
   front end; it is the theme's to provide. */
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; padding: 0; overflow: hidden; position: absolute;
  white-space: nowrap; word-wrap: normal;
}
.screen-reader-text:focus {
  clip-path: none; height: auto; width: auto; position: static;
}

/* 404 (v0.68.0). The header's .site-search-input is deliberately not
   reused: it is border:none because it sits on the dark --accent-dark
   bar, and on a white page that renders as an invisible field. Same
   proportions, its own border. */
.error-404-search { display: flex; flex-wrap: wrap; gap: 10px; max-width: 560px; margin: 0 0 28px; }
.error-404-input {
  flex: 1 1 240px; border: 1px solid var(--line); border-radius: 8px; padding: 11px 16px;
  font-family: 'Lato', sans-serif; font-size: 15px; color: var(--ink); background: var(--surface);
}
.error-404-input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.error-404-nav { display: flex; flex-wrap: wrap; gap: 10px; }
/* Uppercased because six of the seven labels come from the primary
   menu, whose item titles are *stored* in caps, while Contact is
   appended by the template in title case — the row read as a mix.
   Normalising here survives a menu edit in either direction, which
   uppercasing the appended string in PHP would not. */
.error-404-link {
  font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--slate); text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.error-404-link:hover { border-color: var(--accent); color: var(--accent); }

/* WordPress core's the_posts_pagination() default markup — same
   visual treatment as .media-page-link above, applied to core's own
   class names (.page-numbers, .current) instead of duplicating the
   custom classes the hand-built Media Archive pagination uses. */
.pagination.navigation { max-width: 1120px; margin: 8px auto 64px; padding: 0 32px; }
.pagination .nav-links { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.pagination .page-numbers {
  font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 700;
  padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  color: var(--slate); text-decoration: none; min-width: 38px; text-align: center; line-height: 1.2;
}
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination .page-numbers.dots { border: none; background: none; color: var(--slate-light); }

/* Integrations page: partner directory (v0.8.0). Search + category tabs
   are both client-side (see assets/js/main.js) — deliberately different
   from the Media Archive's server-side approach; see the strategy note
   at the top of template-integrations.php for why. .partner-filters
   reuses .media-filter-tab's pill styling directly. */
.partner-controls { max-width: 1120px; margin: 0 auto 24px; padding: 0 32px; display: flex; flex-direction: column; gap: 16px; }
.partner-search-wrap { max-width: 360px; }
.partner-search {
  width: 100%; font-family: 'Lato', sans-serif; font-size: 14px; padding: 11px 16px;
  border-radius: 24px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.partner-search:focus { outline: none; border-color: var(--accent); }
.partner-filters { margin: 0; padding: 0; }

/* "Shown on" chip (v0.13.0) — a contextual filter indicator, not a
   permanent control; only rendered when the page was reached via a
   "?placement=slug" link. Rust accent distinguishes it from the blue
   category pills, so it reads as a different kind of filter (where
   this partner appears) rather than another category option. */
.partner-placement-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--slate); }
.partner-placement-chip-name {
  display: inline-flex; align-items: center; gap: 6px; background: #FDEDE6; color: var(--rust);
  font-weight: 600; padding: 6px 8px 6px 14px; border-radius: 20px;
}
.partner-placement-clear {
  background: none; border: none; cursor: pointer; color: inherit; font-size: 16px;
  line-height: 1; padding: 0 2px; display: flex; align-items: center;
}

.partner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; padding: 0 32px 24px; }
.partner-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 20px;
  display: flex; flex-direction: column; gap: 10px; transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
}
.partner-card.is-hidden { display: none; }
.partner-card.is-highlighted { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(1, 119, 181, 0.15); }
/* Hover was never added, despite the transition above anticipating one
   — border-color and box-shadow declared a transition but had nothing
   to transition to. Matches the language .partner-trust-chip and .card
   already use: accent border, soft shadow, small lift. */
.partner-card:hover { border-color: var(--accent); box-shadow: 0 6px 16px rgba(26,32,44,0.08); transform: translateY(-2px); }
.partner-logo { height: 48px; display: flex; align-items: center; }
.partner-logo img { max-height: 48px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.partner-name { font-size: 16px; color: var(--ink); }
.partner-name a { text-decoration: none; color: inherit; }
.partner-name a:hover { color: var(--accent); }
.partner-desc { font-size: 14px; color: var(--slate); line-height: 1.55; flex-grow: 1; }

/* Category/placement tags at the bottom of each card (v0.14.0) —
   informational, matching the "Shown on" chip's blue/rust color split
   so category and placement read as two distinct kinds of tag rather
   than one undifferentiated list. */
.partner-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.partner-tag { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 12px; line-height: 1.4; text-decoration: none; display: inline-block; }
.partner-tag-category { background: #E6F1FB; color: var(--accent-dark); }
.partner-tag-placement { background: #FDEDE6; color: var(--rust); }
a.partner-tag-placement:hover { background: var(--rust); color: #fff; }
.partner-empty-filtered { text-align: center; color: var(--slate); font-size: 14px; max-width: 1120px; margin: 0 auto; padding: 0 32px 40px; }

/* CTA band */
.cta-band { background: var(--surface); border-top: 1px solid var(--line); padding: var(--section-y) 32px; text-align: center; }
.cta-band > *, .cta-band .wp-block-group__inner-container > * { max-width: 640px; margin-left: auto; margin-right: auto; }
.cta-band .wp-block-buttons { max-width: none; display: flex; justify-content: center; }
.cta-band .scrawl { color: var(--accent); font-size: 12px; margin-bottom: 10px; }
.cta-band h2, .cta-band .wp-block-heading { font-size: 30px; margin-bottom: 12px; }
.cta-band p { color: var(--slate); margin-bottom: 28px; }
.cta-band .wp-block-buttons { justify-content: center; }

/* footer */
footer.site-footer { background: var(--bg); color: var(--slate); padding: 56px 0 32px; border-top: 1px solid var(--line); }
/* Footer layout (v0.24.0) — explicit tracks rather than auto-fit.
   auto-fit with a 150px minimum caps at six tracks inside 1120px, so
   a brand column plus five link columns plus Contact (seven tracks)
   always wrapped to a second row and left dead space beside the
   blurb. A fixed brand column plus six equal link tracks fits on one
   row and keeps the columns aligned regardless of how many links each
   one holds. */
.footer-inner { max-width: 1120px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 240px repeat(6, 1fr); gap: 32px 20px; }
.footer-inner > div:first-child { grid-column: auto; }
.footer-inner h4 { font-family: 'Lato', sans-serif; font-size: 13px; color: var(--ink); margin-bottom: 14px; font-weight: 700; }
.footer-inner ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-inner a { color: var(--slate); text-decoration: none; font-size: 13px; line-height: 1.35; }
/* "View all" footer links (v0.46.0) — a plain text-decoration
   underline in the accent color, plus bold weight, so it reads as a
   distinct "see everything" action rather than one more item in the
   list above it. Applied via a "view-all" CSS class on the menu item
   itself (Appearance → Menus → CSS Classes, same mechanism as the
   dropdown icons above) rather than matching by link text, since
   text content is fragile to rely on in CSS and the class is
   explicit about intent either way. */
/* "View all" footer links (v0.46.0) — a plain text-decoration
   underline in the accent color, plus bold weight, so it reads as a
   distinct "see everything" action rather than one more item in the
   list above it. Applied via a "view-all" CSS class on the menu item
   itself (Appearance → Menus → CSS Classes, same mechanism as the
   dropdown icons above) rather than matching by link text, since
   text content is fragile to rely on in CSS and the class is
   explicit about intent either way.

   li.view-all a, not a.view-all directly: WordPress's native CSS
   Classes field always applies to the <li> wrapper, never the <a>
   inside it — confirmed by inspecting the actual rendered markup
   after the first version of this rule matched nothing live. */
.footer-inner li.view-all a {
  color: var(--accent); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.footer-inner li.view-all a:hover { color: var(--accent-dark); }
.footer-inner a:hover { color: var(--accent); }
.footer-bottom { max-width: 1120px; margin: 40px auto 0; padding: 24px 32px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 13px; color: var(--slate-light); flex-wrap: wrap; gap: 8px; }

/* trademark attribution band (0.97.0) — fine print beneath the footer
   bottom row on every page. Deliberately has no rule of its own:
   .footer-bottom::before already paints the hand-drawn divider above it. */
.footer-trademarks { max-width: 1120px; margin: 22px auto 0; padding: 0 32px; }
.footer-trademarks p { margin: 0; font-size: 11px; line-height: 1.6; color: var(--slate-light); text-align: center; }

/* LAUNCHER chevron lockup (0.99.0) - .has-launcher-mark

   Put the class on any element whose text opens with a LAUNCHER mark and
   the chevron is drawn in front of it, sized and coloured to that element's
   own type. Used on the footer trademark band and the appTRAKER hero H1.

   Geometry is measured off the master artwork: the chevron is 1.212x cap
   height, its top on the cap line and its foot at the descender, set 0.24x
   cap from the wordmark, ink aspect 84:118.

   Sized in cap units so it holds across typefaces. Lato (footer, 0.723 cap
   per em) and Poppins (hero, 0.698) differ by 3.6% - enough to misfit
   visibly if this were tuned in em to one of them. The em block below is
   the fallback and IS Lato-tuned.

   The site icon is a padded square (84x118 of ink inside 150x150), so the
   mask is scaled and offset to crop the padding away; uncropped, that
   whitespace alone exceeds the brand gap.

   Painted via mask + currentColor rather than an <img> so the mark takes
   the colour of its surrounding text, as the master lockup does. An <img>
   would also need display:inline-block, since the theme resets img to
   display:block. The URL comes from --launcher-mark, set on :root in
   launcher2026_mark_custom_property(). */
.has-launcher-mark::before { content: none; }
@supports (mask-image: url(#m)) or (-webkit-mask-image: url(#m)) {
  .has-launcher-mark::before {
    content: ""; display: inline-block; background-color: currentColor;
    width: 0.624em; height: 0.876em; vertical-align: -0.153em; margin-right: 0.174em;
    -webkit-mask: var(--launcher-mark) no-repeat -0.245em -0.119em / 1.114em 1.114em;
    mask: var(--launcher-mark) no-repeat -0.245em -0.119em / 1.114em 1.114em;
  }
}
@supports (height: 1cap) {
  .has-launcher-mark::before {
    width: 0.863cap; height: 1.212cap; vertical-align: -0.212cap; margin-right: 0.24cap;
    -webkit-mask: var(--launcher-mark) no-repeat -0.339cap -0.164cap / 1.541cap 1.541cap;
    mask: var(--launcher-mark) no-repeat -0.339cap -0.164cap / 1.541cap 1.541cap;
  }
}

/* footer brand blurb — real block content (Theme Options > Footer brand
   blurb page), falls back to a fixed <p> if no page is selected */
.footer-blurb { font-size: 13px; max-width: 260px; color: var(--slate); margin-top: 12px; }
.footer-blurb p { margin-bottom: 10px; }
.footer-blurb :last-child { margin-bottom: 0; }

/* footer social icons (v0.12.0) — only platforms with a URL set in
   Theme Options render; empty row renders nothing at all. Single-color
   SVGs via currentColor, same hover-to-accent treatment as other
   footer links. */
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--line);
  color: var(--slate); transition: background 0.15s ease, color 0.15s ease;
}
.footer-social a:hover { background: var(--accent); color: #fff; }
.footer-social svg { width: 16px; height: 16px; }
/* Contact info (phone/email/city) moved here from its own footer
   column in v0.44.0 — inherits .footer-inner ul/a styling above,
   just needs separation from the social icons sitting above it. */
.footer-contact { margin-top: 16px; }

/* footer-bottom legal links — either the footer-legal nav menu (ul/li
   stripped to bare <li> via items_wrap) or the fallback <a> tags */
.footer-legal { display: flex; align-items: center; gap: 0; }
.footer-legal li { display: inline; list-style: none; }
.footer-legal a { color: var(--slate-light); text-decoration: none; }
.footer-legal a:hover { color: var(--accent); }
.footer-legal li:not(:last-child)::after,
.footer-legal a:not(:last-child)::after { content: '·'; margin: 0 8px; color: var(--slate-light); }

/* basic page/post content (non-front-page templates) */
.content-wrap { max-width: 780px; margin: 0 auto; padding: var(--section-y) 32px; }

/* =================================================================
   BODY-CONTENT SECTION DIVIDERS, v0.40.0

   Product/Solution page bodies had no visual separation between
   sections — a heading like "Why Choose launchPAD?" ran straight
   into the previous section's last paragraph with nothing but
   whitespace between them, so a long page read as one undifferentiated
   block rather than a sequence of distinct sections.

   Rather than requiring every section to be manually wrapped in a
   group, this targets the H2 headings themselves: on this theme,
   every real section break in body content is marked with an H2
   (Essential Lending Tools, Why Choose launchPAD, FAQ, and so on), so
   giving H2 a consistent rule + spacing makes every current and
   future page divide consistently with zero extra editor steps.

   :not(.is-style-default) excludes the intro lead sentence — the
   large H2 immediately under the hero — which already sits against
   the hero's own boundary rule and doesn't need a second one 40px
   below it.
   ================================================================= */
.content-wrap-wide h2.wp-block-heading:not(.is-style-default) {
  position: relative;
  margin-top: 56px;
  padding-top: 40px;
}
.content-wrap-wide h2.wp-block-heading:not(.is-style-default)::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%2010%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%205%20C%20120%202.8%2C%20250%207.4%2C%20380%204.6%20C%20510%202.2%2C%20640%207.2%2C%20760%204.8%20C%20870%202.6%2C%20950%206.6%2C%201020%205%22%20fill%3D%22none%22%20stroke%3D%22%23C7CDD6%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-size: 100% 100%;
}
/* A padded band always follows <main>, so its own bottom padding is
   halved rather than stacking with the next section's top padding. */
main > .content-wrap:last-child { padding-bottom: var(--section-y-tight); }
.content-wrap h1 { font-size: 34px; margin-bottom: 20px; color: var(--ink); }
.content-wrap p { margin-bottom: 16px; color: var(--ink); }
.content-wrap img { border-radius: 10px; margin: 16px 0; }
.content-wrap-wide { max-width: 1120px; }

/* page hero bands — product/solution/generic pages. Lighter than the
   homepage hero (which is the one place full-saturation blue is used) */
.page-hero { padding: 56px 0; }
.page-hero h1 {
  /*
   * 36px at every width until 0.107.2, with no media rule of any kind — the
   * 0.82.0 lesson in its purest form: a breakpoint that fires once looks
   * handled, and one that never fires looks handled too.
   *
   * The binding string is the company's own name. "LAUNCHER.SOLUTIONS" has no
   * break opportunity a browser will take (the period is not one), and at 36px
   * Poppins it measures 398px against a 311px column at 390px viewport — so it
   * overflowed its box by 87px and scrolled the whole document sideways by 48px
   * at 390, 78px at 360 and 118px at 320. Live on About, Careers and Contact;
   * Communications overflowed 42px at 320 on "Communications".
   *
   * 11.2 is that string's width per font-px (measured 398 / 36 = 11.06, plus
   * headroom), and 5rem is the wrap's 32px of padding a side plus a scrollbar.
   * Same shape as the credential rail's min(23px, 4.7vw) in 0.101.1: measure
   * the longest word, cap fluidly, leave the design size alone once it fits.
   * The cap binds only below ~483px, so no desktop rendering changes.
   *
   * overflow-wrap is the net, not the mechanism — at 320px and up the size
   * rule means it never fires, and it is here so a longer word than the brand
   * breaks a line instead of the viewport.
   */
  font-size: min(36px, calc((100vw - 5rem) / 11.2));
  margin-bottom: 12px;
  overflow-wrap: break-word;
}
.page-hero .lead { font-size: 17px; color: var(--slate); max-width: 640px; margin-bottom: 20px; }
.page-hero-product { background: var(--surface); border-bottom: 1px solid var(--line); }
.page-hero-product h1 { color: var(--ink); }
.page-hero-solution { background: var(--accent); }
.page-hero-solution h1 { color: #fff; }
.page-hero-solution .eyebrow { color: var(--green); }
.page-hero-solution .lead { color: #DCEBF5; }
.page-hero-generic { background: var(--surface); border-bottom: 1px solid var(--line); }
.page-hero-generic h1 { color: var(--ink); }

/* Page Hero block content (v0.9.0) — .page-hero-content wraps the
   editable eyebrow/heading/lead when a "Page Hero — ..." pattern
   (block inserter > Patterns > Launcher) has been inserted into the
   page. Matches the same visual treatment as the fixed fallback
   markup (.eyebrow, h1, .lead) it replaces — see
   launcher2026_render_page_hero() in functions.php. */
.page-hero .is-style-eyebrow {
  font-family: var(--font-hand); font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: var(--font-hand-weight); color: var(--green); margin: 0 0 10px;
}
.page-hero .is-style-lead {
  font-size: 17px; color: var(--slate); max-width: 640px; margin: 0 0 20px;
}
.page-hero-solution .is-style-lead { color: #DCEBF5; }

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: 1fr; }
  .media-pagination { gap: 4px; }
  .media-page-link { padding: 8px 11px; font-size: 12px; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-search-wrap { max-width: 100%; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-inner > div:first-child { grid-column: span 2; }
  .hero { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
  .mascot { display: none; }

  /* header row: keep logo, CTA, and hamburger on one line without
     overlapping — the nav itself becomes a full-width dropdown panel
     rather than sitting inline. */
  .nav-row { flex-wrap: nowrap; gap: 12px; padding: 14px 20px; }
  .logo { font-size: 15px; }
  .nav-right .btn-primary { padding: 9px 14px; font-size: 13px; white-space: nowrap; }
  .menu-toggle { display: block; order: 3; }

  nav.primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--accent);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    box-shadow: 0 16px 32px rgba(0,0,0,0.25);
    z-index: 30;
  }
  nav.primary-nav.is-mobile-open { display: block; }

  /* top-level list: stacked full-width rows instead of a horizontal flex row */
  nav.primary-nav > ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  nav.primary-nav > ul > li {
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.15);
  }
  nav.primary-nav > ul > li > a {
    display: block;
    padding: 14px 20px;
  }
  /* A rule spanning a full-width stacked row is a divider, not a marker —
     the accordion already says which item is open by being open. */
  nav.primary-nav > ul > li > a::after { display: none; }

  /* submenus: inline accordion under their parent, not an absolutely
     positioned flyout — a floating panel makes no sense once the parent
     nav is already a full-width stacked list. */
  nav.primary-nav .nav-panel {
    --nav-pad: 20px;
    position: static;
    display: none;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 6px 0;
    background: var(--surface);
    border-top: none;
    border-radius: 0;
    box-shadow: none;
  }
  /* Every panel is one column here regardless of child count — the
     walker's column classes describe a row of a desktop grid, and two
     tracks in a 320px tray is not a smaller version of that. */
  nav.primary-nav .nav-panel-cols-1,
  nav.primary-nav .nav-panel-cols-2,
  nav.primary-nav .nav-panel-cols-4 { grid-template-columns: minmax(0, 1fr); }
  nav.primary-nav .menu-item-has-children.is-open > .nav-panel { display: grid; }
  nav.primary-nav .nav-panel a { padding: 11px 20px 11px 24px; }
  /* Descriptions are dropped, not shrunk. Eleven of them turn one
     accordion into a page of scrolling, and the label is what someone
     is scanning for once they have already chosen the section. */
  .nav-panel-desc { display: none; }
  .nav-panel-tail {
    margin: 4px 0 0;
    padding: 12px 20px;
    flex-direction: column; align-items: flex-start; gap: 10px;
  }
}

/* ---------------------------------------------------------------------
   The phone step (0.82.0)

   The block above is the *tablet* step, and for a long time it was the
   only one these components got: .grid-4 and .partner-grid stop at two
   columns here and nothing takes them further. On a 386px screen that
   is two 144px tracks — a product blurb at two or three words per line,
   with the card's corner watermark running through "Explore".

   That is the shape of the whole defect: there IS a breakpoint, so the
   component looks handled, and it never fires again below 900px. The
   700px rules that do exist are almost all chatbot and answer-page work
   from 0.75–0.81; the layout components predate it. Audited Sep 2026
   across every page at 386px — see claude/mobile-responsive-audit.md.

   .seq-item is the worst of them because it had no media rule at all.
   Its row is 307px inside the wrap, and the children want
   44 + 24 + 240 + 24 = 332px before the paragraph is given anything, so
   the paragraph lands at 76px wide, 273px tall, and 54px past the right
   edge of the screen. The 240px min-width on the heading is a desktop
   measure — it aligns the labels into a column — and on a phone it is
   a hard floor with no flex-wrap to relieve it. A min-width without a
   wrap is a promise the container cannot keep at every width.
   --------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* Number/dot and label on the first line, description full width
     under it. order:2 on the paragraph is what keeps the arrow up on
     the first line — without it the 100% basis breaks the line before
     the arrow is reached and it strands alone on a third row. */
  .seq-item { flex-wrap: wrap; align-items: center; gap: 6px 16px; }
  /* flex-basis 0, not auto (0.82.1). Under flex-wrap an item whose
     hypothetical main size exceeds the space left on the line moves to
     a line of its own; it is only shrunk afterwards, within the line it
     lands on. So with basis auto the heading's max-content width decided
     the outcome, and the one label long enough to exceed it —
     "Commercial Equipment & Trucks" on the Solutions hub — took a whole
     line by itself, leaving the dot alone above it and the arrow
     stranded below. Basis 0 makes the hypothetical size zero, so the
     heading never triggers a wrap, grows into whatever the line has
     left, and wraps its own text instead. Wrapping and shrinking are
     not two settings of one behaviour, and only the longest string on
     the page tells you which one you got. */
  .seq-item h3 { min-width: 0; flex: 1 1 0; }
  .seq-item p { flex: 1 1 100%; order: 2; }
  .seq-item .arrow { margin-left: auto; }

  /* Two 144px tracks is not a card. */
  .grid-4 { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: 1fr; }

  /* .footer-inner deliberately stays at two columns. It fails the same
     structural test as the grids above — 143px tracks below 900px —
     and reads correctly on screen: every link fits, and a 2-up footer
     on a phone is ordinary. Measuring finds the candidate; looking at
     it decides. */
}

/* Hero Slide Carousel (v0.16.0) — launcher2026_render_slide_collection()
   in inc/hero-slides.php, driven by assets/js/carousel.js. Two visual
   styles, chosen per block instance: "hero" (full-bleed blue, matches
   the homepage's static hero it can replace) and "compact" (smaller,
   neutral, safe inline anywhere else). */
.slide-collection { position: relative; overflow: hidden; }
.slide-collection-track { position: relative; }
.slide-collection-slide { display: none; }
.slide-collection-slide.is-active { display: block; }
.slide-collection[data-transition="fade"] .slide-collection-slide.is-active { animation: launcher2026-fade-in 0.5s ease; }
@keyframes launcher2026-fade-in { from { opacity: 0; } to { opacity: 1; } }
.slide-collection[data-transition="slide"] .slide-collection-slide.is-active { animation: launcher2026-slide-in 0.4s ease; }
@keyframes launcher2026-slide-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }

/* Hero style */
.slide-collection-hero { background: var(--accent); padding: 32px 32px 0; }
.slide-collection-hero .slide-collection-slide-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; padding-bottom: 24px;
}
.slide-collection-hero .slide-collection-text { color: #fff; }
.slide-collection-hero .slide-collection-text h1,
.slide-collection-hero .slide-collection-text h2,
.slide-collection-hero .slide-collection-text .wp-block-heading {
  font-size: 46px; line-height: 1.12; color: #fff; margin-bottom: 24px; font-weight: 700; font-family: 'Poppins', sans-serif;
}
.slide-collection-hero .slide-collection-text p { font-size: 17px; color: #DCEBF5; max-width: 460px; margin-bottom: 24px; line-height: 1.6; }
.slide-collection-hero .slide-collection-text p.is-style-eyebrow {
  font-family: var(--font-hand); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green); font-weight: var(--font-hand-weight); max-width: none; margin-bottom: 18px;
}
/* The hero slides carry transparent line art that sits directly on the band
   (0.96.0). A radius rounds off the origination line exactly where it runs out
   of frame to meet the next slide, and a drop shadow paints a card behind
   artwork that has no card. Both were mixed for the opaque screenshots this
   hero used to hold. If a slide ever goes back to an opaque image, the lift
   belongs on that image, not on every slide in the collection. */
.slide-collection-hero .slide-collection-visual img { width: 100%; }
.slide-collection-hero .slide-collection-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.slide-collection-hero .slide-collection-arrow:hover { background: rgba(255,255,255,0.3); }
.slide-collection-hero .slide-collection-prev { left: 20px; }
.slide-collection-hero .slide-collection-next { right: 20px; }
.slide-collection-hero .slide-collection-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }
.slide-collection-hero .slide-collection-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); border: none; cursor: pointer; padding: 0; }
.slide-collection-hero .slide-collection-dot.is-active { background: #fff; }

/* Compact style */
.slide-collection-compact { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 40px 32px; margin: 40px auto; max-width: 1120px; }
.slide-collection-compact .slide-collection-slide-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.slide-collection-compact .slide-collection-text h1,
.slide-collection-compact .slide-collection-text h2,
.slide-collection-compact .slide-collection-text .wp-block-heading { font-size: 26px; margin-bottom: 12px; color: var(--ink); }
.slide-collection-compact .slide-collection-text p { font-size: 15px; color: var(--slate); margin-bottom: 16px; line-height: 1.6; }
.slide-collection-compact .slide-collection-text p.is-style-eyebrow {
  font-family: var(--font-hand); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); font-weight: var(--font-hand-weight); margin-bottom: 10px;
}
.slide-collection-compact .slide-collection-visual img { width: 100%; border-radius: 10px; }
.slide-collection-compact .slide-collection-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.slide-collection-compact .slide-collection-prev { left: 8px; }
.slide-collection-compact .slide-collection-next { right: 8px; }
.slide-collection-compact .slide-collection-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.slide-collection-compact .slide-collection-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); border: none; cursor: pointer; padding: 0; }
.slide-collection-compact .slide-collection-dot.is-active { background: var(--accent); }

@media (max-width: 900px) {
  .slide-collection-hero .slide-collection-slide-inner,
  .slide-collection-compact .slide-collection-slide-inner { grid-template-columns: 1fr; }
  .slide-collection-hero .slide-collection-arrow,
  .slide-collection-compact .slide-collection-arrow { width: 32px; height: 32px; }
}


/* Platform section (v0.22.0) — sibling cards at the foot of every
   Platform capability page. Driven by template assignment, so the grid
   grows automatically as Platform pages are added. Deliberately quieter
   than the product/solution card treatments: this is lateral navigation
   within a section, not a primary conversion path. */
.platform-siblings { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line); }
.platform-siblings-title { font-size: 20px; margin-bottom: 20px; }
.platform-sibling-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.platform-sibling-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.platform-sibling-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.platform-sibling-name { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); }
.platform-sibling-blurb { font-size: 13px; color: var(--slate); line-height: 1.5; }

/* Platform hero — the narrative layer sits visually between Product
   (light surface) and Solution (full blue): a tinted band with the
   green eyebrow, so a visitor can tell at a glance which layer of the
   site they're on. Navy stays text-only per the design spec. */
.page-hero-platform { background: var(--bg); border-bottom: 3px solid var(--green); }
.page-hero-platform h1 { color: var(--ink); }
.page-hero-platform .eyebrow { color: var(--rust); }
.page-hero-platform .lead { color: var(--slate); }


/* Header nav density (v0.23.0) — the IA went from 7 top-level items to 8,
   which overflows the 1200px nav row at laptop widths: the logo collided
   with the first item, "Trust Center" wrapped to two lines, and "Contact"
   slid under the demo button. Items no longer wrap (white-space: nowrap
   above); instead the row tightens progressively before the mobile
   hamburger takes over at 900px. */
@media (max-width: 1280px) {
  .nav-row { padding: 18px 20px; gap: 12px; }
  nav.primary-nav ul { gap: 10px; }
  nav.primary-nav a { font-size: 12.5px; }
}
@media (max-width: 1100px) {
  nav.primary-nav ul { gap: 8px; }
  .nav-right { gap: 10px; }
  .nav-right .btn-primary { padding: 9px 14px; font-size: 13px; }
}


/* Footer: step down to three columns before the two-column mobile
   layout, so the seven-track desktop grid doesn't squeeze below a
   readable width on small laptops and tablets. */
@media (max-width: 1100px) and (min-width: 901px) {
  .footer-inner { grid-template-columns: 220px repeat(3, 1fr); gap: 30px 20px; }
}


/* Back-to-top control (v0.24.0) — markup in footer.php, behavior in
   assets/js/main.js.

   Fixed bottom-right and deliberately out of the content flow so it
   never reflows or overlaps page copy. z-index 9 keeps it *below* the
   sticky header (z-index 10) and the mobile nav panel (z-index 30), so
   an open menu is never obscured by it. Hidden entirely until scrolled
   via the [hidden] attribute. */
.back-to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 9;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  border: none; cursor: pointer;
  box-shadow: 0 2px 10px rgba(26, 32, 44, 0.25);
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.2s ease;
}
.back-to-top[hidden] { display: none; }
.back-to-top:hover { background: var(--accent-dark); transform: translateY(-2px); }
.back-to-top:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.back-to-top svg { display: block; }

/* Tuck it in slightly on small screens, where 24px of inset eats into
   a narrow reading column and can sit over tap targets. */
@media (max-width: 600px) {
  .back-to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}

/* Respect the OS reduce-motion setting for the hover lift too. */
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: background 0.15s ease; }
  .back-to-top:hover { transform: none; }
}

/* main-content receives tabindex="-1" on activation so focus can move
   there; suppress the resulting focus ring, which would otherwise
   outline the whole page body. */
#main-content:focus { outline: none; }


/* =================================================================
   DRAWN TREATMENTS (v0.25.0)

   Three treatments, all built from hand-authored bezier paths held in
   inline SVG data URIs. No SVG filters anywhere: a displacement filter
   randomises every edge, which degrades a line rather than drawing it,
   and it cannot be confined to borders — it hits glyphs too.

   Nothing here modifies text rendering. Headings stay Poppins, body
   stays Lato. The marks below sit *behind* type as background images;
   the glyphs are untouched.
   ================================================================= */

:root {
  --section-y: 56px;        /* standard band padding, top and bottom */
  --section-y-tight: 36px;  /* compact bands, and where two bands meet */
  --section-y-loose: 72px;  /* the one or two bands that carry a page */
}

:root { --font-hand: 'Kalam', 'Comic Sans MS', cursive; --font-hand-weight: 700; }

/* --- 1. Drawn frame -----------------------------------------------
   9-slice border image. border-image-slice protects all four corners,
   so they never stretch — only the straight edge segments do. One
   drawing serves a 200px card and a 900px banner at identical weight. */
.drawn-frame,
.wp-block-image.is-style-drawn-frame img,
.wp-block-image.is-style-drawn-frame-shaded img,
.wp-block-group.is-style-drawn-frame {
  border: 10px solid transparent;
  border-image-source: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cpath%20d%3D%22M22%206%20C%2070%203%2C%20130%208%2C%20178%205%20M194%2022%20C%20197%2070%2C%20192%20130%2C%20195%20178%20M178%20194%20C%20130%20197%2C%2070%20192%2C%2022%20195%20M6%20178%20C%203%20130%2C%208%2070%2C%205%2022%20M5%2022%20C%205%2012%2C%2012%205%2C%2022%206%20M178%205%20C%20188%205%2C%20195%2012%2C%20194%2022%20M195%20178%20C%20195%20188%2C%20188%20195%2C%20178%20194%20M22%20195%20C%2012%20195%2C%205%20188%2C%206%20178%22%20fill%3D%22none%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  border-image-slice: 24;
  border-image-repeat: stretch;
  border-image-width: 10px;
}
.wp-block-image.is-style-drawn-frame img,
.wp-block-image.is-style-drawn-frame-shaded img { display: block; }
.wp-block-group.is-style-drawn-frame { padding: 8px 20px 18px; background: var(--surface); }
.drawn-frame-blue { border-image-source: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cpath%20d%3D%22M22%206%20C%2070%203%2C%20130%208%2C%20178%205%20M194%2022%20C%20197%2070%2C%20192%20130%2C%20195%20178%20M178%20194%20C%20130%20197%2C%2070%20192%2C%2022%20195%20M6%20178%20C%203%20130%2C%208%2070%2C%205%2022%20M5%2022%20C%205%2012%2C%2012%205%2C%2022%206%20M178%205%20C%20188%205%2C%20195%2012%2C%20194%2022%20M195%20178%20C%20195%20188%2C%20188%20195%2C%20178%20194%20M22%20195%20C%2012%20195%2C%205%20188%2C%206%20178%22%20fill%3D%22none%22%20stroke%3D%22%230177B5%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.drawn-frame-rust { border-image-source: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cpath%20d%3D%22M22%206%20C%2070%203%2C%20130%208%2C%20178%205%20M194%2022%20C%20197%2070%2C%20192%20130%2C%20195%20178%20M178%20194%20C%20130%20197%2C%2070%20192%2C%2022%20195%20M6%20178%20C%203%20130%2C%208%2070%2C%205%2022%20M5%2022%20C%205%2012%2C%2012%205%2C%2022%206%20M178%205%20C%20188%205%2C%20195%2012%2C%20194%2022%20M195%20178%20C%20195%20188%2C%20188%20195%2C%20178%20194%20M22%20195%20C%2012%20195%2C%205%20188%2C%206%20178%22%20fill%3D%22none%22%20stroke%3D%22%23B54001%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }

/* Hatched shading — the reference illustrations shade with strokes, so
   depth comes from hatching offset behind the frame rather than a
   blurred box-shadow, which belongs to a different visual language. */
.wp-block-image.is-style-drawn-frame-shaded { position: relative; }
.wp-block-image.is-style-drawn-frame-shaded::after {
  content: ""; position: absolute; left: 10px; right: -9px; top: 13px; bottom: -9px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cg%20transform%3D%22rotate%28-38%2010%2010%29%22%3E%3Cline%20x1%3D%220%22%20y1%3D%22-4%22%20x2%3D%220%22%20y2%3D%2224%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%221.0%22%20opacity%3D%220.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%225%22%20y1%3D%22-4%22%20x2%3D%225%22%20y2%3D%2224%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%221.0%22%20opacity%3D%220.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%22-4%22%20x2%3D%2210%22%20y2%3D%2224%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%221.0%22%20opacity%3D%220.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2215%22%20y1%3D%22-4%22%20x2%3D%2215%22%20y2%3D%2224%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%221.0%22%20opacity%3D%220.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2220%22%20y1%3D%22-4%22%20x2%3D%2220%22%20y2%3D%2224%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%221.0%22%20opacity%3D%220.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  z-index: -1; border-radius: 8px; opacity: 0.7;
}
.wp-block-image.is-style-drawn-frame-shaded > * { position: relative; }

/* --- 2. Drawn text marks ------------------------------------------
   Applied from the block editor toolbar (assets/js/editor-marks.js).
   Background images, so line wrapping is handled by the browser and
   the type itself is never scaled or distorted. */
.mark-underline {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2011%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M3%207%20C%2055%202%2C%20120%209%2C%20197%204%22%20fill%3D%22none%22%20stroke%3D%22%2398BE50%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: left calc(100% + 6px);
  background-size: 100% 10px;
  padding-bottom: 4px;
}
.mark-circle {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20220%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M30%208%20C%2090%202%2C%20170%203%2C%20205%2014%20C%20216%2020%2C%20210%2040%2C%20180%2050%20C%20130%2060%2C%2050%2058%2C%2018%2046%20C%204%2039%2C%206%2020%2C%2034%2011%22%20fill%3D%22none%22%20stroke%3D%22%23B54001%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: 4px 14px;
  /* The ellipse is one background image at 100% 100%, so an inline span that
     wraps paints it once PER LINE BOX: two squashed half-ellipses plus stray
     padding at the cut ends. inline-block keeps the phrase whole and pushes it
     to the next line intact instead. The negative block margin cancels the
     vertical padding’s effect on line-box height, which inline-block would
     otherwise add (inline boxes ignore vertical padding for that purpose). */
  display: inline-block;
  margin-block: -4px;
}

/* --- 3. Eyebrow lettering -----------------------------------------
   Kalam 700 for eyebrows only: they are three-or-four-word
   labels, never read at length, so a hand face adds voice at no
   legibility cost. Letter-spacing is reduced from the Lato setting —
   a hand face already has irregular sidebearings and the wide tracking
   made it look gappy. Size bumped because its x-height runs small. */
/* Eyebrow typography now lives on the original rules above — each of
   which hardcoded font-family/size/weight and outranked a late override
   on specificity. Changing them at source is why there is no !important
   anywhere in this section. */

/* Figure captions pick up the same hand, matching the caption style in
   the process illustrations. */
.wp-block-image figcaption {
  font-family: var(--font-hand);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--slate);
}

/* Frames are decorative; on a narrow screen the 14px border eats real
   reading width, so ease it back. */
@media (max-width: 600px) {
  .drawn-frame,
  .wp-block-image.is-style-drawn-frame img,
  .wp-block-image.is-style-drawn-frame-shaded img,
  .wp-block-group.is-style-drawn-frame { border-width: 10px; border-image-width: 10px; }
}


/* =================================================================
   DRAWN COMPONENTS (v0.26.0)

   v0.25 wired up frames, text marks and eyebrows but left the rest of
   the kit unused. This applies the drawn language to the components
   that appear on every page: buttons, cards, section rules, and the
   hairlines between bands.

   Same principle throughout — hand-authored bezier paths in inline
   SVG, 9-slice for anything with corners so they never stretch, and
   nothing that touches a glyph.

   Rules are ONE stroke stretched across the container, not a repeating
   tile. A tile repeats its wobble on a fixed period, which reads as a
   shaky hand rather than a drawn line; a single shallow arc reads as
   one confident stroke, and flattening slightly on very wide screens
   is exactly what a ruled line does anyway.
   ================================================================= */

/* --- Buttons ------------------------------------------------------ */
.btn,
.wp-block-button__link {
  border: 1.8px solid var(--ink);
  border-radius: 22px;
  padding: 10px 22px;
  box-shadow: none;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover,
.wp-block-button__link:hover { transform: translateY(-1px); }

.btn-primary,
.wp-block-button.is-style-btn-primary .wp-block-button__link { background: var(--green); color: var(--ink); }
.btn-primary:hover,
.wp-block-button.is-style-btn-primary .wp-block-button__link:hover { background: #86A83E; }

/* Ghost buttons sit on the blue band, where an ink stroke disappears. */
.btn-ghost,
.wp-block-button.is-style-btn-ghost .wp-block-button__link {
  background: transparent; color: #fff;
  border-color: rgba(255,255,255,0.75);
}
.btn-ghost:hover,
.wp-block-button.is-style-btn-ghost .wp-block-button__link:hover { border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .btn, .wp-block-button__link { transition: background 0.15s ease; }
  .btn:hover, .wp-block-button__link:hover { transform: none; }
}

/* --- Cards -------------------------------------------------------- */
.card {
  border: 10px solid transparent;
  border-image-source: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cpath%20d%3D%22M22%205%20H178%20Q195%205%20195%2022%20V178%20Q195%20195%20178%20195%20H22%20Q5%20195%205%20178%20V22%20Q5%205%2022%205%20Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M22%206%20C%2070%203%2C%20130%208%2C%20178%205%20M194%2022%20C%20197%2070%2C%20192%20130%2C%20195%20178%20M178%20194%20C%20130%20197%2C%2070%20192%2C%2022%20195%20M6%20178%20C%203%20130%2C%208%2070%2C%205%2022%20M5%2022%20C%205%2012%2C%2012%205%2C%2022%206%20M178%205%20C%20188%205%2C%20195%2012%2C%20194%2022%20M195%20178%20C%20195%20188%2C%20188%20195%2C%20178%20194%20M22%20195%20C%2012%20195%2C%205%20188%2C%206%20178%22%20fill%3D%22none%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  border-image-slice: 24 fill;
  border-image-repeat: stretch;
  border-image-width: 10px;
  border-radius: 0;
  padding: 14px 18px 16px;
  background: transparent;
}
.card:hover { box-shadow: none; transform: translateY(-2px); border-image-source: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cpath%20d%3D%22M22%205%20H178%20Q195%205%20195%2022%20V178%20Q195%20195%20178%20195%20H22%20Q5%20195%205%20178%20V22%20Q5%205%2022%205%20Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M22%206%20C%2070%203%2C%20130%208%2C%20178%205%20M194%2022%20C%20197%2070%2C%20192%20130%2C%20195%20178%20M178%20194%20C%20130%20197%2C%2070%20192%2C%2022%20195%20M6%20178%20C%203%20130%2C%208%2070%2C%205%2022%20M5%2022%20C%205%2012%2C%2012%205%2C%2022%206%20M178%205%20C%20188%205%2C%20195%2012%2C%20194%2022%20M195%20178%20C%20195%20188%2C%20188%20195%2C%20178%20194%20M22%20195%20C%2012%20195%2C%205%20188%2C%206%20178%22%20fill%3D%22none%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }

/* The coloured top border that typed each card is now a drawn rule
   under the tag, since the border box is occupied by the frame. */
.card .tag { position: relative; padding-bottom: 9px; display: inline-block; }
.card.card-blue .tag::after,
.card.card-rust .tag::after,
.card.card-green .tag::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background-repeat: no-repeat; background-size: 100% 4px;
}
.card.card-blue .tag::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%204%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%201.7%20C%20190%201.1%2C%20340%202.5%2C%20500%201.6%20C%20670%200.9%2C%20830%202.3%2C%201020%201.7%22%20fill%3D%22none%22%20stroke%3D%22%230177B5%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.card.card-rust .tag::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%204%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%201.7%20C%20190%201.1%2C%20340%202.5%2C%20500%201.6%20C%20670%200.9%2C%20830%202.3%2C%201020%201.7%22%20fill%3D%22none%22%20stroke%3D%22%23B54001%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.card.card-green .tag::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%204%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%201.7%20C%20190%201.1%2C%20340%202.5%2C%20500%201.6%20C%20670%200.9%2C%20830%202.3%2C%201020%201.7%22%20fill%3D%22none%22%20stroke%3D%22%2398BE50%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }

.platform-sibling-card {
  border: 10px solid transparent;
  border-image-source: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cpath%20d%3D%22M22%205%20H178%20Q195%205%20195%2022%20V178%20Q195%20195%20178%20195%20H22%20Q5%20195%205%20178%20V22%20Q5%205%2022%205%20Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M22%206%20C%2070%203%2C%20130%208%2C%20178%205%20M194%2022%20C%20197%2070%2C%20192%20130%2C%20195%20178%20M178%20194%20C%20130%20197%2C%2070%20192%2C%2022%20195%20M6%20178%20C%203%20130%2C%208%2070%2C%205%2022%20M5%2022%20C%205%2012%2C%2012%205%2C%2022%206%20M178%205%20C%20188%205%2C%20195%2012%2C%20194%2022%20M195%20178%20C%20195%20188%2C%20188%20195%2C%20178%20194%20M22%20195%20C%2012%20195%2C%205%20188%2C%206%20178%22%20fill%3D%22none%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  border-image-slice: 24 fill;
  border-image-repeat: stretch;
  border-image-width: 10px;
  border-radius: 0;
  padding: 14px 18px 16px;
  background: transparent;
}
.platform-sibling-card:hover { border-image-source: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cpath%20d%3D%22M22%205%20H178%20Q195%205%20195%2022%20V178%20Q195%20195%20178%20195%20H22%20Q5%20195%205%20178%20V22%20Q5%205%2022%205%20Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M22%206%20C%2070%203%2C%20130%208%2C%20178%205%20M194%2022%20C%20197%2070%2C%20192%20130%2C%20195%20178%20M178%20194%20C%20130%20197%2C%2070%20192%2C%2022%20195%20M6%20178%20C%203%20130%2C%208%2070%2C%205%2022%20M5%2022%20C%205%2012%2C%2012%205%2C%2022%206%20M178%205%20C%20188%205%2C%20195%2012%2C%20194%2022%20M195%20178%20C%20195%20188%2C%20188%20195%2C%20178%20194%20M22%20195%20C%2012%20195%2C%205%20188%2C%206%20178%22%20fill%3D%22none%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); transform: translateY(-2px); }

/* =================================================================
   CARD CORNER MARK, v0.58.0 — replaces CARD FEATURED-IMAGE BACKGROUND

   The old treatment mounted the page's Featured Image inside the card
   and laid an 86% brand tint over it. It broke silently and site-wide,
   for a reason worth recording: inc/icons.php filters
   has_post_thumbnail() to return TRUE whenever a featured ICON is set,
   so that call sites using post_thumbnail_html() pick the icon up with
   no template edits. But these four call sites read
   get_the_post_thumbnail_url(), which is NOT filtered. The guard said
   "there is a thumbnail", the URL came back empty, and the tint painted
   over nothing — a flat slab of brand colour. Nine of ten Products-hub
   cards, four of four homepage cards, seven of seven Platform siblings
   and every Related Products row were rendering that way.

   **Never test for an image with has_post_thumbnail() in this theme.**
   Test the URL: get_the_post_thumbnail_url() is truthy only for a real
   attachment. launcher2026_card_mark() (inc/icons.php) does that, and
   falls back to the featured icon.

   The mark is a corner watermark rather than a full-bleed panel, so a
   card stays legible whether it resolves to a photograph, an icon, or
   nothing at all.
   ================================================================= */

.card, .platform-sibling-card {
  position: relative; overflow: hidden; isolation: isolate;
  text-decoration: none;
}

/* The mark is emitted first so that everything after it, being
   positioned, paints above it. */
.card > *:not(.card-mark),
.platform-sibling-card > *:not(.card-mark) { position: relative; }

.card-mark { position: absolute; pointer-events: none; }
.card-mark-icon {
  right: -14px; bottom: -18px;
  font-size: 92px; line-height: 1; opacity: 0.13;
}
.card-mark-img {
  right: -10px; bottom: -14px; width: 104px; height: 104px; opacity: 0.16;
  background-size: contain; background-repeat: no-repeat;
  background-position: bottom right;
}
.card-blue .card-mark-icon  { color: var(--accent); }
.card-rust .card-mark-icon  { color: var(--rust); }
.card-green .card-mark-icon { color: var(--green); }
/* Platform siblings have no accent rotation — green marks that section
   already, the same way the hero underline does. */
.platform-sibling-card .card-mark-icon { color: var(--green); }

.card:hover .card-mark-icon,
.platform-sibling-card:hover .card-mark-icon { opacity: 0.18; }
.card:hover .card-mark-img,
.platform-sibling-card:hover .card-mark-img { opacity: 0.22; }

/* -----------------------------------------------------------------
   SOFT CARD, v0.58.1

   Cards come off the drawn pencil frame. The frame is still the
   theme's signature on images and group blocks, but on a card it was
   fighting the corner mark and the tinted bands behind it: three
   hand-drawn elements in one 260px box. A soft surface lets the
   corner mark and the tag rule carry the character instead.

   Overrides the border-image .card rule above it — border-image must
   be reset explicitly, not just border-width, or the source keeps
   painting.
   ----------------------------------------------------------------- */
.card, .platform-sibling-card {
  border: 0; border-image: none; border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(26,32,44,0.05), 0 10px 26px rgba(26,32,44,0.07);
  padding: 22px 22px 20px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* -----------------------------------------------------------------
   STATEMENT PANEL, v0.59.2

   Replaces the one Drawn frame group on appTRAKER. The frame rendered
   correctly; it just does not survive the width. A hand-drawn stroke
   stretched across a 1056px column flattens into a straight line, so
   the character is gone and it reads as a default browser box. The
   drawn frame belongs at card width, where the wobble spans a short
   enough run to be seen.

   A tinted panel with an accent rule carries the same "this is the
   point" weight at any width, and reuses the device the deep band
   already uses.
   ----------------------------------------------------------------- */
.is-style-statement {
  background: var(--band-blue);
  border-left: 3px solid var(--accent);
  padding: 22px 26px;
  margin: 22px 0;
}
.is-style-statement > .wp-block-group__inner-container > *:last-child,
.is-style-statement > *:last-child { margin-bottom: 0; }

/* Same tint-on-tint trap as the cards: on a tinted band the panel takes
   the surface and lets the accent rule carry the colour. */
.has-bands .band:not(.band-plain):not(.band-deep) .is-style-statement {
  background: var(--surface);
}
.has-bands .band-deep .is-style-statement {
  background: rgba(255,255,255,0.12); border-left-color: #CDE6A4;
}
.has-bands .band-deep .is-style-statement p { color: #fff; }

.card:hover, .platform-sibling-card:hover {
  border-image: none; transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(26,32,44,0.06), 0 18px 36px rgba(26,32,44,0.10);
}

/* -----------------------------------------------------------------
   THE LINKED ICON-FEATURE BLEED, v0.59.1

   a.wp-block-launcher2026-icon-feature carries `padding: 20px;
   margin: -20px` so a linked card's hover target is bigger than its
   text without shifting the layout around it. That bleed is invisible
   while the item has no background — and it silently broke the moment
   the card treatments gave it one: every linked card sat 20px past
   its grid track on both sides and overlapped its neighbour by 8px.
   Four cards in a 1056px row measured 280px each in 240px tracks.

   A carded item takes the card's own padding and no bleed. The plain
   (uncarded) grids keep it, which is still the right behaviour there.

   **A negative margin is invisible until something paints.** Any
   treatment that gives an element a background has to check for one.
   ----------------------------------------------------------------- */
.cards-tint a.wp-block-launcher2026-icon-feature,
.is-style-cards-tint a.wp-block-launcher2026-icon-feature,
.cards-soft a.wp-block-launcher2026-icon-feature,
.is-style-cards-soft a.wp-block-launcher2026-icon-feature,
.cards-rule a.wp-block-launcher2026-icon-feature,
.is-style-cards-rule a.wp-block-launcher2026-icon-feature,
.cards-rule-solid a.wp-block-launcher2026-icon-feature,
.cards-drawn a.wp-block-launcher2026-icon-feature,
.is-style-cards-drawn a.wp-block-launcher2026-icon-feature {
  margin: 0;
}

/* -----------------------------------------------------------------
   THE TAIL OF A BANDED PAGE, v0.58.1

   Related products, the partner strip, the CTA and the footer are
   template markup outside <main>'s band pass, so they never saw the
   chaptering and kept drawing the straddling pencil rules the rest of
   the page stopped using at the last chapter. On a banded page they
   join the band rhythm instead: one divider device from hero to
   footer.
   ----------------------------------------------------------------- */
.has-bands main#main-content > section.block,
.has-bands main#main-content > .platform-siblings-band { background: var(--band-blue); }
/* The tail grew internal seams in 0.87.0. It used to be one card row, so
   painting every `section.block` blue could not produce two touching fills;
   with up to three card sections it can. The sections carry their own tone
   from launcher2026_appears_on_tone() and it has to beat the blanket rule
   above — `.band-plain` here is (1,3,2) against its (1,2,2), so no
   `!important`. */
.has-bands main#main-content > section.block.band-blue  { background: var(--band-blue); }
.has-bands main#main-content > section.block.band-plain { background: var(--surface); }
.has-bands .partner-trust-strip { background: var(--surface); }
.has-bands main#main-content > section.block::before,
.has-bands .partner-trust-strip::before,
.has-bands .partner-trust-strip::after,
.has-bands .cta-band::before,
.has-bands footer.site-footer::before { content: none; }

.has-bands .cta-band { background: var(--accent); border-top: 0; }
.has-bands .cta-band h2,
.has-bands .cta-band .wp-block-heading { color: #fff; }
.has-bands .cta-band p { color: #DCEBF5; }
.has-bands .cta-band .scrawl { color: #CDE6A4; }
/* The CTA button is a core/button (green fill, ink label), not a
   .btn-primary — that class is the header/hero button and does not
   appear in a cta-band at all. Green on the deep blue reads well and
   keeps the button identical to every other CTA on the site, so it is
   deliberately left alone. */

/* Browsers without :has() (very old Safari/Firefox) simply never match
   these selectors — cards render as plain cards, the safe fallback. */

.news-card {

  border-top: none; padding-top: 20px;
  background-repeat: no-repeat; background-position: top left; background-size: 100% 4px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%204%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%201.7%20C%20190%201.1%2C%20340%202.5%2C%20500%201.6%20C%20670%200.9%2C%20830%202.3%2C%201020%201.7%22%20fill%3D%22none%22%20stroke%3D%22%230177B5%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.news-card.news-rust { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%204%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%201.7%20C%20190%201.1%2C%20340%202.5%2C%20500%201.6%20C%20670%200.9%2C%20830%202.3%2C%201020%201.7%22%20fill%3D%22none%22%20stroke%3D%22%23B54001%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.news-card.news-green { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%204%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%201.7%20C%20190%201.1%2C%20340%202.5%2C%20500%201.6%20C%20670%200.9%2C%20830%202.3%2C%201020%201.7%22%20fill%3D%22none%22%20stroke%3D%22%2398BE50%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }

/* --- Section rules ------------------------------------------------ */
.cta-band, footer.site-footer, .platform-siblings, .footer-bottom,
.partner-tags, .seq-item {
  background-repeat: no-repeat;
  background-size: 100% 4px;
  background-position: top left;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%204%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%201.7%20C%20190%201.1%2C%20340%202.5%2C%20500%201.6%20C%20670%200.9%2C%20830%202.3%2C%201020%201.7%22%20fill%3D%22none%22%20stroke%3D%22%23C7CDD6%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.cta-band { border-top: none; padding-top: var(--section-y); }
footer.site-footer { border-top: none; padding-top: 58px; }
.platform-siblings { border-top: none; padding-top: 38px; }
.footer-bottom { border-top: none; padding-top: 26px; }
.seq-item { border-bottom: none; padding-top: 24px; }
.seq-item:first-child { background-image: none; padding-top: 0; }
.partner-tags { border-top: none; padding-top: 14px; }

.page-hero-product, .page-hero-generic {
  border-bottom: none;
  background-repeat: no-repeat; background-size: 100% 4px;
  background-position: bottom left;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%204%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%202.3%20C%20190%202.9%2C%20340%201.5%2C%20500%202.4%20C%20670%203.1%2C%20830%201.7%2C%201020%202.3%22%20fill%3D%22none%22%20stroke%3D%22%23C7CDD6%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.partner-trust-strip {
  border-top: none; border-bottom: none;
  background-repeat: no-repeat;
  background-size: 100% 4px;
  background-position: top left;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%204%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%201.7%20C%20190%201.1%2C%20340%202.5%2C%20500%201.6%20C%20670%200.9%2C%20830%202.3%2C%201020%201.7%22%20fill%3D%22none%22%20stroke%3D%22%23C7CDD6%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.solutions-wrap {
  border-top: none; border-bottom: none;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 4px, 100% 4px;
  background-position: top left, bottom left;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%204%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%201.7%20C%20190%201.1%2C%20340%202.5%2C%20500%201.6%20C%20670%200.9%2C%20830%202.3%2C%201020%201.7%22%20fill%3D%22none%22%20stroke%3D%22%23C7CDD6%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%204%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%202.3%20C%20190%202.9%2C%20340%201.5%2C%20500%202.4%20C%20670%203.1%2C%20830%201.7%2C%201020%202.3%22%20fill%3D%22none%22%20stroke%3D%22%23C7CDD6%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.partner-trust-strip { padding: var(--section-y-tight) 0; }

/* Heavier green break, available to templates and to editors through
   the core separator block's Styles panel. */
.rule-drawn,
.wp-block-separator.is-style-drawn {
  border: none; height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%206%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%201.7%20C%20190%201.1%2C%20340%202.5%2C%20500%201.6%20C%20670%200.9%2C%20830%202.3%2C%201020%201.7%22%20fill%3D%22none%22%20stroke%3D%22%2398BE50%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M-20%204.0%20C%20200%203.4%2C%20360%204.7%2C%20520%203.9%20C%20690%203.2%2C%20850%204.5%2C%201020%204.0%22%20fill%3D%22none%22%20stroke%3D%22%2398BE50%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.45%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-size: 100% 6px;
  margin: 40px auto; opacity: 1;
}
.rule-drawn-ink { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%204%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%201.7%20C%20190%201.1%2C%20340%202.5%2C%20500%201.6%20C%20670%200.9%2C%20830%202.3%2C%201020%201.7%22%20fill%3D%22none%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }

/* --- Hatched shading (opt-in, one feature element per page) -------- */
.shaded { position: relative; }
.shaded::after {
  content: ""; position: absolute; left: 10px; right: -9px; top: 13px; bottom: -9px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cg%20transform%3D%22rotate%28-38%2010%2010%29%22%3E%3Cline%20x1%3D%220%22%20y1%3D%22-4%22%20x2%3D%220%22%20y2%3D%2224%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%221.0%22%20opacity%3D%220.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%225%22%20y1%3D%22-4%22%20x2%3D%225%22%20y2%3D%2224%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%221.0%22%20opacity%3D%220.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%22-4%22%20x2%3D%2210%22%20y2%3D%2224%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%221.0%22%20opacity%3D%220.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2215%22%20y1%3D%22-4%22%20x2%3D%2215%22%20y2%3D%2224%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%221.0%22%20opacity%3D%220.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2220%22%20y1%3D%22-4%22%20x2%3D%2220%22%20y2%3D%2224%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%221.0%22%20opacity%3D%220.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); z-index: -1; opacity: 0.7;
}
.shaded > * { position: relative; }

/* --- Step number rings, for genuinely sequential content ----------- */
.step-num {
  position: relative; flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px;
  color: var(--rust);
}
.step-num::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M24%204%20C%2036%204%2C%2045%2013%2C%2045%2024%20C%2045%2035%2C%2036%2044%2C%2024%2044%20C%2012%2044%2C%203%2035%2C%203%2024%20C%203%2013.5%2C%2011.5%204.5%2C%2023%204%20C%2027%203.8%2C%2031%204.6%2C%2034%206%22%20stroke%3D%22%23B54001%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-size: 100% 100%;
}

@media (max-width: 600px) {
  .card, .platform-sibling-card { border-width: 8px; border-image-width: 8px; }
}


/* Two rules at one boundary (v0.27.3).
   .page-hero-product and .page-hero-generic draw a rule on their bottom
   edge; .partner-trust-strip draws one on its top edge. On Product and
   Solution pages the strip directly follows the hero, so both landed on
   the same boundary and rendered as a double line. Scoped to the
   adjacent-sibling case, so the Home page — where the strip follows the
   carousel and is the only thing drawing a rule — is unaffected. */
/* The trust strip now sits above the closing CTA band, which draws its
   own top rule. Suppress the strip's rule in that pairing so the two
   don't stack — the same double-line problem, one section further down. */
.partner-trust-strip + .cta-band { background-image: none; padding-top: var(--section-y-tight); }


/* =================================================================
   SECTION RULES, v0.29.0 — straddling pseudo-elements.

   Previously each section painted a rule as its own background, which
   forced a choice between two bad options: a tall band (the stroke
   sits several px inside the section, showing a colour sliver at the
   join) or a very short band (no room to waver, so it reads as a
   plain hairline — the "doesn't look pencil drawn" problem).

   A pseudo-element pulled up by half its height straddles the
   boundary instead. The stroke is centred exactly on the join AND has
   10px of room to deviate, so it reads as drawn at any section colour
   change.
   ================================================================= */

:root { --rule-h: 10px; }

/* Clear the old background-painted rules. */
.cta-band, footer.site-footer, .platform-siblings, .footer-bottom,
.partner-tags, .seq-item, .partner-trust-strip, .solutions-wrap,
.page-hero-product, .page-hero-generic { background-image: none; }

.cta-band, footer.site-footer, .platform-siblings, .footer-bottom,
.partner-tags, .seq-item, .partner-trust-strip, .solutions-wrap,
.page-hero-product, .page-hero-generic, section.block { position: relative; }

.cta-band::before, footer.site-footer::before, .platform-siblings::before,
.footer-bottom::before, .seq-item::before,
.partner-trust-strip::before, .solutions-wrap::before, section.block::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(var(--rule-h) / -2); height: var(--rule-h);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%2010%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%205%20C%20120%202.8%2C%20250%207.4%2C%20380%204.6%20C%20510%202.2%2C%20640%207.2%2C%20760%204.8%20C%20870%202.6%2C%20950%206.6%2C%201020%205%22%20fill%3D%22none%22%20stroke%3D%22%23C7CDD6%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-size: 100% 100%;
  pointer-events: none; z-index: 1;
}

.partner-trust-strip::after, .solutions-wrap::after,
.page-hero-product::after, .page-hero-generic::after {
  content: ""; position: absolute; left: 0; right: 0;
  bottom: calc(var(--rule-h) / -2); height: var(--rule-h);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%2010%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%205%20C%20120%202.8%2C%20250%207.4%2C%20380%204.6%20C%20510%202.2%2C%20640%207.2%2C%20760%204.8%20C%20870%202.6%2C%20950%206.6%2C%201020%205%22%20fill%3D%22none%22%20stroke%3D%22%23C7CDD6%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-size: 100% 100%;
  pointer-events: none; z-index: 1;
}

/* .partner-tags is a divider inside a single partner CARD, roughly
   200px wide — a fifth the width the section-rule path above was
   designed for. Reusing that path (three wave cycles across a
   virtual 1000-unit span) at card width packs the same three cycles
   into a fifth the space: same waver, five times the density, and it
   reads as a jittery scribble instead of a calm stroke. This is a
   dedicated line for narrow contexts — ONE gentle arc rather than
   three, the way a hand actually draws a one-inch underline: a
   single easy stroke, not a repeating ripple. */
.partner-tags::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(var(--rule-h) / -2); height: var(--rule-h);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20210%2010%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M2%205.5%20C%2060%203.2%2C%20140%207.2%2C%20208%204.8%22%20fill%3D%22none%22%20stroke%3D%22%23C7CDD6%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-size: 100% 100%;
  pointer-events: none; z-index: 1;
}

.seq-item:first-child::before { display: none; }

/* section.block picks up the standard top rule, but two instances sit
   directly against a section that already draws one at that exact
   boundary: the homepage Products grid follows the partner trust
   strip (whose ::after already marks it — partner-trust-strip sits
   outside <main>, so the adjacent-sibling combinator can't reach it;
   targeting main's first child gets the same result), and the
   Newsroom grid follows .solutions-wrap directly. The Related
   Products section on Solution pages has no such collision — nothing
   before it currently draws a rule — so its instance keeps its own. */
main#main-content > section.block:first-child::before,
.solutions-wrap + section.block::before { display: none; }

/* Where two ruled sections meet, only one draws. */
.partner-trust-strip + .cta-band::before { display: none; }
/* .page-hero-generic (Media, Integrations) draws its own bottom rule
   and is followed directly by <main> — but unlike Product pages,
   main's first child there is often .media-filters or .partner-
   controls, not a self-padded .content-wrap, so nothing supplied a
   gap and content sat flush against the rule.
   page-hero-product is deliberately excluded here: its main always
   opens with .content-wrap-wide, which already carries its own
   padding-top: var(--section-y) unconditionally (see .content-wrap
   above). Adding it again at the <main> level would stack the two
   and double the gap on every Product page — reintroducing the exact
   excess-whitespace problem fixed a few versions back.

   Scoped with :not(:has(...)) rather than assuming today's content:
   if an editor ever adds hero-pattern content on Media or
   Integrations, main's first child becomes a self-padded
   .content-wrap there too (same as Product), and this rule steps
   aside automatically instead of stacking with it.

   :not(:has(> .band)) added 0.67.3 for the same reason. On a banded
   generic page — every Trust page, About, Careers — main's first
   child is .rail-col, not a .content-wrap, so this rule fired and
   added 56px of page background between the hero and the first band.
   It read as an empty grey section, and the rail started inside it,
   12px ABOVE the content it indexes. Bands carry their own padding,
   so the rule steps aside for them too. */
.page-hero-generic + main:not(:has(> .content-wrap:first-child)):not(:has(> .band)) { padding-top: var(--section-y); }

/* Symmetrical again — the earlier tightened top was compensating for
   the doubled rule, which no longer happens. */
.partner-trust-strip + .cta-band { padding-top: var(--section-y); }

/* =================================================================
   BAND COLOURS
   Adjacent bands were both --bg, so the partner strip and the content
   above it merged into one grey block. The reading column is now white
   and the partner strip stays grey, giving a clear alternation:
   hero (white) / content (white) / partners (grey) / closing (white).
   ================================================================= */
body.page-template-template-product main,
body.page-template-template-solution main,
body.page-template-template-platform main { background: var(--surface); }

.partner-trust-strip { background: var(--bg); }
.cta-band { background: var(--surface); }

/* =================================================================
   EYEBROW COLOUR ON LIGHT HERO BANDS
   Green was chosen when eyebrows sat on the blue band. On the white
   Product and Generic heroes it washes out; rust is the light-surface
   colour from the approved specimen.
   ================================================================= */
.page-hero-product .eyebrow, .page-hero-product .is-style-eyebrow,
.page-hero-generic .eyebrow, .page-hero-generic .is-style-eyebrow,
.page-hero-platform .eyebrow, .page-hero-platform .is-style-eyebrow { color: var(--rust); }

/* The homepage "trajectory" diagonal is removed from front-page.php;
   hide any cached instance so it can't reappear as a stray diagonal. */
.trajectory { display: none; }


/* =================================================================
   PAGE HERO VISUAL, v0.30.0

   Solution, Product and Platform heroes reserve a right-hand column
   for the page's own Featured Image — no separate upload step, no
   pattern to insert. A page with no Featured Image keeps the
   original single-column layout; nothing shifts or leaves a gap.

   Reuses the same two-column proportions as the homepage .hero grid
   for visual consistency, but scoped under .page-hero.has-visual so
   plain heroes (Trust Center, Generic, Media, Integrations) are
   completely unaffected.
   ================================================================= */

.page-hero .wrap { display: block; }
.page-hero.has-visual .wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  max-width: 1120px;
}
.page-hero-text { min-width: 0; }
.page-hero-visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.page-hero-visual img {
  /* Was width:100%, which stretched every image to fill the column
     regardless of its actual size — a 150x150 source rendered at
     ~500px wide, over 3x upscaled and visibly soft. max-width/height
     only ever shrinks an oversized image to fit; it never enlarges a
     small one. A genuinely small source now renders at its true
     size, centered in the slot, rather than blown up to fill it. */
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  display: block; border-radius: 10px;
}


@media (max-width: 900px) {
  .page-hero.has-visual .wrap { grid-template-columns: 1fr; gap: 28px; }
  .page-hero-visual { order: -1; max-width: 420px; }
}


/* =================================================================
   RELATED-PRODUCTS SCROLL ROW, v0.35.0

   Replaces the old .grid-4 for Related Products on Solution pages.
   The grid was hard-capped at exactly four cards — a solution with
   five or more related products silently dropped the rest with no
   visual sign anything was missing. A horizontal row has no such
   ceiling: every related product renders, and if there are more than
   fit on screen, the visitor scrolls rather than a card disappearing
   with no trace.

   Native overflow-x scrolling handles touch and trackpad with no JS.
   The prev/next buttons (added by main.js, only when .has-overflow
   is present) are for mouse users without a horizontal scroll
   gesture — each button hides itself once there's nothing left in
   that direction.
   ================================================================= */

.scroll-row-wrap { position: relative; }

.scroll-row {
  display: flex; gap: 20px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; /* room for the focus outline on a tabbed card, so it isn't clipped by overflow */
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.scroll-row::-webkit-scrollbar { height: 6px; }
.scroll-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.scroll-row::-webkit-scrollbar-track { background: transparent; }

.scroll-card {
  flex: 0 0 auto; width: 270px;
  scroll-snap-align: start;
}

/* Fade the trailing edge on rows that actually overflow, as a quiet
   hint there's more to scroll to — absent on rows with 4 or fewer
   cards, since nothing is hidden there. */
.scroll-row-wrap.has-overflow::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 4px; width: 48px;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none; transition: opacity 0.2s ease;
}
.scroll-row-wrap.has-overflow.is-at-end::after { opacity: 0; }

/* Prev/next buttons — same drawn-circle language as the step-number
   rings elsewhere, not a generic square icon button. */
.scroll-row-btn {
  position: absolute; top: 50%; margin-top: -20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1.6px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  box-shadow: 0 4px 10px rgba(26,32,44,0.12);
  transition: transform 0.12s ease, opacity 0.15s ease;
}
.scroll-row-btn:hover { transform: translateY(-1px); }
.scroll-row-btn[hidden] { display: none; }
.scroll-row-btn-prev { left: -18px; }
.scroll-row-btn-next { right: -18px; }
.scroll-row-btn svg { color: var(--ink); }

@media (max-width: 700px) {
  /* Buttons crowd a narrow screen where swipe is the natural
     gesture anyway — fade edge stays as the only affordance. */
  .scroll-row-btn { display: none; }
  .scroll-card { width: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-row { scroll-behavior: auto; }
  .scroll-row-btn:hover { transform: none; }
}


/* =================================================================
   ICON BADGE, v0.37.0

   Font Awesome icons framed in the theme's own hand-drawn circle —
   the same single-stroke technique .step-num uses, redrawn larger.
   Direct continuation of a treatment the old WPBakery site used with
   real effect: large, brand-coloured icons as visual anchors next to
   short feature copy. What's deliberately NOT carried over is the
   old mechanism — a flat hexagon with a drop shadow. That was
   generic page-builder styling with no relationship to anything else
   on the page. This is a drawn ring, matching the same pencil
   language as every card, frame, and rule elsewhere in the theme, in
   the same three brand colours already used for the accent rotation.
   ================================================================= */

.icon-badge {
  position: relative;
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-bottom: 18px;
}
.icon-badge::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M40%206%20C%2060%205%2C%2078%2014%2C%2079%2034%20C%2080%2056%2C%2062%2074%2C%2040%2074%20C%2019%2074%2C%202%2057%2C%202%2036%20C%202%2016.5%2C%2018.5%205%2C%2039%206%20C%2044%206.2%2C%2049%207.5%2C%2054%2010%22%20stroke%3D%22%230177B5%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-size: 100% 100%;
}
.icon-badge i, .icon-badge svg {
  position: relative; z-index: 1;
  font-size: 32px; color: var(--accent);
  width: 32px; height: 32px;
}

.icon-badge-blue::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M40%206%20C%2060%205%2C%2078%2014%2C%2079%2034%20C%2080%2056%2C%2062%2074%2C%2040%2074%20C%2019%2074%2C%202%2057%2C%202%2036%20C%202%2016.5%2C%2018.5%205%2C%2039%206%20C%2044%206.2%2C%2049%207.5%2C%2054%2010%22%20stroke%3D%22%230177B5%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-blue i { color: var(--accent); }
.icon-badge-rust::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M40%206%20C%2060%205%2C%2078%2014%2C%2079%2034%20C%2080%2056%2C%2062%2074%2C%2040%2074%20C%2019%2074%2C%202%2057%2C%202%2036%20C%202%2016.5%2C%2018.5%205%2C%2039%206%20C%2044%206.2%2C%2049%207.5%2C%2054%2010%22%20stroke%3D%22%23B54001%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-rust i { color: var(--rust); }
.icon-badge-green::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M40%206%20C%2060%205%2C%2078%2014%2C%2079%2034%20C%2080%2056%2C%2062%2074%2C%2040%2074%20C%2019%2074%2C%202%2057%2C%202%2036%20C%202%2016.5%2C%2018.5%205%2C%2039%206%20C%2044%206.2%2C%2049%207.5%2C%2054%2010%22%20stroke%3D%22%2398BE50%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-green i { color: var(--green); }
.icon-badge-ink::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M40%206%20C%2060%205%2C%2078%2014%2C%2079%2034%20C%2080%2056%2C%2062%2074%2C%2040%2074%20C%2019%2074%2C%202%2057%2C%202%2036%20C%202%2016.5%2C%2018.5%205%2C%2039%206%20C%2044%206.2%2C%2049%207.5%2C%2054%2010%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-ink i { color: var(--ink); }

/* Small variant — inline with a heading or list item, rather than a
   standalone feature anchor. */
.icon-badge-sm { width: 48px; height: 48px; margin-bottom: 10px; }
.icon-badge-sm i { font-size: 20px; width: 20px; height: 20px; }

/* Extra-small variant — a checklist marker, sitting beside a single
   line of text rather than its own heading. Smaller than -sm, which
   is already tuned for Reason Grid's icon-beside-a-heading context;
   a checklist tick needs to be noticeably more compact than that. */
.icon-badge-xs { width: 26px; height: 26px; margin-bottom: 0; flex-shrink: 0; }
.icon-badge-xs i { font-size: 11px; width: 11px; height: 11px; }

/* Large variant — the "impact" size, for a single hero-level feature
   rather than one of a grid of several. */
.icon-badge-lg { width: 108px; height: 108px; margin-bottom: 22px; }
.icon-badge-lg i { font-size: 44px; width: 44px; height: 44px; }

/* Icon Feature Grid pattern (registered in functions.php) — plain
   3-column layout, no card frame of its own. The badge is already
   the visual anchor; wrapping it in another drawn frame would
   compete with it rather than support it. */
.icon-feature { text-align: left; }
.icon-feature h3 { font-size: 18px; margin-bottom: 8px; }
.icon-feature p { font-size: 14.5px; color: var(--slate); line-height: 1.55; }

@media (max-width: 700px) {
  .icon-badge { width: 64px; height: 64px; }
  .icon-badge i { font-size: 26px; width: 26px; height: 26px; }
  .icon-badge-lg { width: 84px; height: 84px; }
  .icon-badge-lg i { font-size: 34px; width: 34px; height: 34px; }
}


/* =================================================================
   CONTENT PATTERNS, v0.38.0

   Four patterns for long-form pages (launchPAD-style product pages
   with a real content plan behind them). All are ordinary block
   patterns, inserted like Hero Visual or CTA Band — nothing here is
   wired into any template. A page that never inserts one renders
   exactly as it did before.
   ================================================================= */

/* --- Checklist — "who this is for" style qualification lists ------ */
.checklist {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px 32px; margin: 20px 0;
}
/* Same fix used below for .icon-feature-grid/.reason-grid: core/group
   wraps its children in .wp-block-group__inner-container, which
   would otherwise be the checklist's only grid item and collapse
   every checklist item into one column regardless of width. */
.checklist > .wp-block-group__inner-container { display: contents; }

/* Editor-only: two WordPress core editor behaviors, neither present
   on the live front end since this markup only exists in wp-admin.

   1) Every block is wrapped in .block-editor-block-list__block,
      which carries a default 28px top/bottom margin — invisible on
      the published page, but here it stacks on top of the grid's own
      10px gap and roughly triples the space between rows.

   2) That same wrapper doesn't stretch to fill its grid column the
      way a plain block-level element normally would — some core
      editor style sizes it to its own content's width instead
      (measured: 216px in a 404px-wide column). That's what produced
      the "zigzag": each item sized to its own text length rather
      than sharing a common left edge, so a short line could land
      anywhere from flush-left to visually centered depending on how
      much narrower it was than the column.

   .editor-styles-wrapper only matches inside the block editor, so
   both fixes are inert on the front end without needing a separate
   editor-only stylesheet. */
.editor-styles-wrapper .checklist .block-editor-block-list__block,
.editor-styles-wrapper .icon-feature-grid .block-editor-block-list__block,
.editor-styles-wrapper .reason-grid .block-editor-block-list__block {
  margin-top: 0; margin-bottom: 0;
  width: 100% !important;
}
.checklist-item { display: flex; align-items: flex-start; gap: 12px; transition: transform 0.15s ease; }
.checklist-item:hover { transform: translateX(2px); }
.checklist-item:hover .icon-badge-xs { transform: scale(1.12); }
.checklist-item .icon-badge-xs { transition: transform 0.15s ease; margin-top: 1px; }

/* Legacy marker — pages built before the Checklist Item block existed
   used a plain filled circle rather than the icon-badge/flavor
   system. Kept so nothing already published breaks; the block always
   outputs .icon-badge-xs instead, which the rules above already
   cover via the shared .icon-badge/.flavor-* system. */
.checklist-item .check {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px;
  border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.checklist-item .check i { color: #fff; font-size: 11px; }
/* =================================================================
   BODY TEXT TYPE SCALE, v0.40.2

   Checklist items, feature descriptions, reason descriptions, and FAQ
   answers had each picked up their own size independently as each
   section was built (17/16/15/14.5/14.5/13.5px) — nothing wrong with
   any single value, but no shared scale governing them meant the page
   visibly got smaller for no reason as a reader scrolled down it.

   v0.40.1 first unified this into two tiers (16px reading text /
   14px supporting text), but 14px read as too small for the grid
   descriptions in practice, so that lower tier came up to 15.5px —
   still a shade under the 16px reading-text tier so a description
   remains visually subordinate to its own heading, but no longer
   small enough to strain against. Feature Grid and Reason Grid now
   share the same 15.5px description size; the two grids stay
   differentiated by icon size and treatment, not by shrinking one
   grid's text against the other's.

   The hero lead sentence (17px) is a deliberate exception, not a
   third scale step — a slightly larger intro line above the fold is
   a standard, intentional pattern, not drift.
   ================================================================= */
.checklist-item span { font-size: 16px; color: var(--ink); line-height: 1.5; }

/* --- Icon Feature Grid — flexible, not fixed to 3 or 6 ------------- */
.icon-feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 36px 32px; margin: 24px 0;
}
/* core/group wraps its children in .wp-block-group__inner-container,
   so without this the grid above sees exactly ONE child (that
   wrapper) and every icon-feature block piles into a single column
   regardless of viewport width. display:contents removes the wrapper
   from the layout tree entirely, so the grid applies directly to its
   actual children — the real fix, not a width/breakpoint tweak. */
.icon-feature-grid > .wp-block-group__inner-container { display: contents; }

/* --- Hub card grid, v0.92.0 ---------------------------------------
   The Lenders and Solutions hubs render their listings as tinted icon
   cards (.icon-feature-grid.cards-tint), so the only thing they need
   of their own is a track count.

   Three tracks, not four. Lenders publishes 5 pages and Solutions 11:
   at three tracks those run 3+2 and 3+3+3+2 — one short slot at the
   end of each, which reads as the end of a list. .icon-feature-grid's
   own minmax(220px, 1fr) resolves to four tracks at the 1056px
   measure, which leaves Lenders' fifth card alone on a row of its
   own. That is the documented grid-hole case, not a matter of taste.

   Set on .hub-grid rather than by widening .icon-feature-grid, which
   has dozens of consumers across the Solution pages whose item counts
   were authored against four tracks. Widening it would silently
   reflow every one of them.

   300px is chosen against the measure, not picked round: three tracks
   need 3x300 + 2x32 = 964px and fit; four need 1296px and do not.
   ------------------------------------------------------------------ */
.hub-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* --- Hub page ground, v0.92.1 --------------------------------------
   A card wash is mixed to sit on --surface. Every other consumer of
   .cards-tint is inside a band-plain, which is --surface; the hubs are
   not banded, so 0.92.0 put #F3F8FC cards on the page's own #F7F8FA
   and the tint was applied, correct, and invisible. Reported as "cards
   don't have tinting" — which is exactly what a wash with nothing to
   read against looks like from the outside.

   The three tint scales are deliberately distinct and each is a step
   stronger than the one it sits on. Nothing here changes a token: the
   fix is to give the hub the ground the scale assumes, not to darken
   the scale for everybody.

   So the hub paints the same three-part rhythm a banded page has —
   tinted hero, plain (white) body, deep CTA — without claiming to be
   banded. .page-hero-generic is --surface by default and would
   otherwise be white above white, which is the 0.67.2 trap: two
   identical fills with only a drawn rule between them.
   ------------------------------------------------------------------ */
.hub-page .page-hero-generic { background: var(--band-blue); }
.hub-page main#main-content { background: var(--surface); }
/* Same values as the .has-bands tail treatment, reached without the
   band machinery. The CTA is the commitment moment on every other
   page and was rendering as a white block on the three hubs. */
.hub-page .cta-band { background: var(--accent); border-top: 0; }
.hub-page .cta-band h2,
.hub-page .cta-band .wp-block-heading { color: #fff; }
.hub-page .cta-band p { color: #DCEBF5; }
.hub-page .cta-band .scrawl { color: #CDE6A4; }

/* --- Reason Grid — icon-left row, for one-line "why us" points ----- */
.reason-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px 32px; margin: 24px 0;
}
.reason-grid > .wp-block-group__inner-container { display: contents; }
.reason-item { display: flex; align-items: flex-start; gap: 14px; }
.reason-item .icon-badge-sm { margin-bottom: 0; }
.reason-item h4 { font-size: 15.5px; margin-bottom: 3px; }
.reason-item p { font-size: 13.5px; color: var(--slate); line-height: 1.5; margin: 0; }

/* --- FAQ Accordion — native <details>, no JS required for the
   toggle itself; the plus mark rotates to a line on open via CSS. --- */
.faq-list { margin: 24px 0; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 4px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 18px;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Editor-only: the FAQ Item block's own edit() UI (question RichText
   + InnerBlocks answer area), styled to read like the real
   <summary>/.faq-answer it becomes once saved — matching sizes/colors
   above — plus a border so multiple FAQ items in the editor canvas
   read as visually separated the way accordion rows do on the front
   end, since there's no <details> element providing that separation
   here. */
.wp-block-launcher2026-faq-item-editor { padding: 16px 4px; border-bottom: 1px solid var(--line); }
.wp-block-launcher2026-faq-item-editor .faq-item-editor-question {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 18px;
  color: var(--ink); margin: 0 0 10px;
}
.wp-block-launcher2026-faq-item-editor .block-editor-inner-blocks { font-size: 16px; color: var(--slate); }
.faq-item .faq-icon {
  flex: 0 0 auto; width: 22px; height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%204%20L12%2020%20M4%2012%20L20%2012%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-size: 100% 100%;
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item .faq-answer { padding: 0 4px 20px; font-size: 16px; color: var(--slate); line-height: 1.6; max-width: 720px; }
/* An FAQ answer with a bulleted list, v0.47.0 — first used on the
   API & Data Exchange page's capabilities summary. Without this, a
   list's last <li> sits flush against whatever text follows it, with
   no breathing room. */
.faq-item .faq-answer ul { margin: 4px 0 10px 20px; }
.faq-item .faq-answer li { margin-bottom: 4px; }

/* =================================================================
   TABLES, v0.54.0

   The theme had no table styling at all until now — a core/table
   block rendered at browser defaults: no padding, hairline 2px
   outset borders, text at the wrong size and color, and no
   horizontal scroll, so anything wider than the viewport simply
   overflowed the page. Nothing had needed a table before the Auto
   Lending page's direct-vs-indirect comparison.

   Two layers here. The first styles core/table generically, so any
   table anyone inserts anywhere is at least correct. The second,
   the "Comparison" block style, is the opinionated variant for a
   side-by-side comparison of two things across shared criteria. It
   is selectable from the block toolbar's "Styles" panel — no manual
   class to type, and no way to misspell it.

   Scrolling lives on the <figure>, which is what core/table already
   wraps every table in — no extra markup, no wrapper div to
   remember. The min-width on the table itself is what forces the
   scroll rather than letting columns crush to unreadable widths on
   a phone. */
.wp-block-table { margin: 28px 0; overflow-x: auto; }
.wp-block-table table {
  width: 100%; border-collapse: collapse;
  font-size: 15.5px; color: var(--slate); line-height: 1.5;
}
.wp-block-table th,
.wp-block-table td {
  padding: 13px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.wp-block-table thead th {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--ink); border-bottom: 2px solid var(--ink);
}
.wp-block-table tbody tr:last-child td { border-bottom: none; }
.wp-block-table figcaption {
  font-size: 13px; color: var(--slate-light); margin-top: 10px; text-align: left;
}

/* --- Comparison table — two channels, shared criteria ------------- */

/* The first column is the criterion, not data: it reads as a label,
   so it takes the ink/semibold treatment the header row gets rather
   than the slate body treatment. The two compared columns carry the
   categorical blue/rust pairing used everywhere else on the site for
   exactly this "two related but distinct things" job. The tints are
   5% — enough to group a column vertically down a long table,
   nowhere near enough to fight the text sitting on them.

   Navy is deliberately absent as a fill here, per the brand rule:
   the ink in this component is the header rule and the label text,
   both linework. */
.wp-block-table.is-style-comparison table { min-width: 680px; }
.wp-block-table.is-style-comparison td:first-child,
.wp-block-table.is-style-comparison th:first-child {
  font-weight: 600; color: var(--ink); width: 22%;
}
.wp-block-table.is-style-comparison thead th:nth-child(2) { color: var(--accent); border-bottom-color: var(--accent); }
.wp-block-table.is-style-comparison thead th:nth-child(3) { color: var(--rust); border-bottom-color: var(--rust); }
.wp-block-table.is-style-comparison tbody td:nth-child(2) { background: rgba(1, 119, 181, 0.05); }
.wp-block-table.is-style-comparison tbody td:nth-child(3) { background: rgba(181, 64, 1, 0.05); }

/* --- The comparison table stacks on a phone (0.83.0) --------------- */

/* `min-width: 680px` inside a 307px column means 373px of the table
   is off-screen, reachable only by a horizontal swipe that nothing
   on the page advertises. **This is a different failure from a
   crushed layout and no structural audit finds it**: the table is not
   overflowing the page, its columns are not squeezed, and the visible
   left-hand portion looks like a complete table. It was reported by
   someone reading the page on a phone, which is the only way it was
   ever going to surface.

   A scroll affordance was built and rejected — a fade at the edge
   plus a sticky first column. It works, but at rest it is almost
   indistinguishable from the broken page it fixes, so it only
   announces itself to a reader who has already guessed there is
   something to swipe to; and the sticky column then paints over the
   scrolled text and clips it mid-word. More importantly it never
   shows both compared columns at once, which is the entire job of a
   comparison table.

   So below 700px the table stops being a grid: one block per
   criterion, its label as the heading, the two values beneath it
   each tagged with its own column header. The blue/rust tints are
   already bound to :nth-child(2)/(3) and carry over untouched.

   Gated on `.has-stacked-labels`, which main.js adds only after it
   has copied the header text onto every cell. **Stacking without the
   labels would be worse than scrolling** — two anonymous values per
   criterion and no way to tell which channel is which — so with no
   JS, or a table with no thead, the scroll behaviour is what remains.
   ------------------------------------------------------------------ */
@media (max-width: 700px) {
  .wp-block-table.is-style-comparison.has-stacked-labels { overflow-x: visible; }
  .is-style-comparison.has-stacked-labels table { min-width: 0; display: block; }
  .is-style-comparison.has-stacked-labels thead { display: none; }
  .is-style-comparison.has-stacked-labels tbody { display: block; }

  .is-style-comparison.has-stacked-labels tbody tr {
    display: block; margin-bottom: 16px;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  }
  .is-style-comparison.has-stacked-labels tbody tr:last-child { margin-bottom: 0; }

  .is-style-comparison.has-stacked-labels tbody td {
    display: block; width: auto;
    padding: 12px 16px; border-bottom: none;
  }

  /* The criterion is the block's heading, so it takes the header
     row's typeface. width:auto is not optional — the desktop rule
     sets 22% on this cell, which survives display:block and wraps
     "Relationship begins with" onto three lines inside a 67px box. */
  .is-style-comparison.has-stacked-labels tbody td:first-child {
    width: auto;
    font-family: 'Poppins', sans-serif; font-size: 16px;
    border-bottom: 2px solid var(--ink);
  }

  /* Keyed on the attribute, not on nth-child: a column whose header
     cell is empty gets no data-label and must not draw a blank line
     above its value. */
  .is-style-comparison.has-stacked-labels tbody td[data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: 3px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .is-style-comparison.has-stacked-labels tbody td:nth-child(2)::before { color: var(--accent); }
  .is-style-comparison.has-stacked-labels tbody td:nth-child(3)::before { color: var(--rust); }
}

/* --- Flow chain — a linear process rendered inline ----------------- */

/* "Application → Verification → Underwriting → …" appears four times
   across the Auto Lending page and reads as a run-on sentence set as
   a plain bold paragraph. Each step is a span; the arrows between
   them are literal characters the author types, which is what keeps
   the whole thing editable as ordinary paragraph text rather than
   needing a block.

   The arrows get their color for free: .flow-chain sets accent on
   the paragraph and .flow-step overrides back to ink, so the only
   text still inheriting accent is the arrows. No pseudo-elements, so
   what the editor shows is what the page renders.

   Bare text between spans becomes an anonymous flex item, which is
   what lets the arrows participate in the wrap and the gap. */
.flow-chain {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 10px; margin: 22px 0;
  color: var(--accent); font-size: 15px;
}
.flow-step {
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 13px; font-weight: 600; font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .checklist { grid-template-columns: 1fr; }
  .reason-grid { grid-template-columns: 1fr; }
}

/* =================================================================
   FLOW CHAIN — RIBBON, v0.57.0

   The arrows in a chain are literal characters typed between the
   spans, so the line edits as ordinary paragraph text. Nothing here
   removes them: the chain sets font-size: 0 so the anonymous flex
   item collapses, and the steps set their own size. A pure
   stylesheet change — no page needed re-authoring.

   A progression line under the chevrons was tried in 0.57.0/0.57.1
   and dropped in 0.57.2. The chevron shape already carries direction;
   a second direction cue was redundant, and it forced wrap detection
   in JS because one absolutely positioned line cannot underline two
   rows. Don't re-add it without solving the wrap case first.

   A chevron asserts sequence by its shape, so it must not be applied
   to a chain that is a SET rather than a sequence. Those are marked
   .flow-set / .is-style-flow-set (paragraph block style "Flow —
   non-sequential set") and keep the original pill treatment with
   their + separators visible. Five of the 66 chains on the site.
   ================================================================= */

:root {
  /* A step stronger than the card tints, so a segment still reads
     when the ribbon sits on a tinted band. */
  --flow-seg-blue:  #D7E9F4;
  --flow-seg-rust:  #F3DDD0;
  --flow-seg-green: #E2EFCB;
}

.flow-chain:not(.flow-set):not(.is-style-flow-set) {
  font-size: 0; gap: 4px; position: relative;
  width: fit-content; max-width: 100%;
}
.flow-chain:not(.flow-set):not(.is-style-flow-set) .flow-step {
  font-size: 14px; white-space: nowrap;
  background: var(--flow-seg-blue); border: 0; border-radius: 0;
  padding: 12px 26px 12px 32px; font-weight: 600; color: var(--ink);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.flow-chain:not(.flow-set):not(.is-style-flow-set) .flow-step:first-of-type {
  padding-left: 20px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.flow-chain:not(.flow-set):not(.is-style-flow-set) .flow-step:nth-of-type(3n+2) { background: var(--flow-seg-rust); }
.flow-chain:not(.flow-set):not(.is-style-flow-set) .flow-step:nth-of-type(3n+3) { background: var(--flow-seg-green); }
.flow-chain:not(.flow-set):not(.is-style-flow-set) .flow-step:last-of-type {
  padding-right: 20px; background: var(--accent); color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
}

/* On a deep band the tinted segments and the blue pencil line both
   disappear into the fill. */
.has-bands .band-deep .flow-chain:not(.flow-set):not(.is-style-flow-set) .flow-step {
  background: rgba(255,255,255,0.16); color: #fff;
}
.has-bands .band-deep .flow-chain:not(.flow-set):not(.is-style-flow-set) .flow-step:last-of-type {
  background: #fff; color: var(--accent);
}
/* A wrapped chain wants breathing room between rows; the chevrons
   carry the sequence on their own. */
.flow-chain:not(.flow-set):not(.is-style-flow-set) { row-gap: 10px; }

/* -----------------------------------------------------------------
   THE SET, v0.59.3

   A set is not a sequence, so it must not get chevrons — but it was
   still wearing the pre-ribbon pill, which beside two ribbons reads
   as the chain nobody styled rather than the chain that is
   deliberately different. Auto Lending shows all three in one
   section: Direct and Indirect flow, "Across both" does not.

   So: same palette, same metrics, same accent rotation as the ribbon
   — and a pill instead of a chevron, with the + separators left
   visible. The family resemblance says "these are the same kind of
   thing"; the shape says "this one has no order". Deliberately no
   solid terminal segment: in a set nothing comes last.
   ----------------------------------------------------------------- */
.flow-chain.flow-set,
.flow-chain.is-style-flow-set {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; row-gap: 10px; margin: 24px 0;
  font-size: 15px; font-weight: 700; color: var(--slate-light);
}
.flow-chain.flow-set .flow-step,
.flow-chain.is-style-flow-set .flow-step {
  background: var(--flow-seg-blue); border: 0; border-radius: 999px;
  padding: 9px 18px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.flow-chain.flow-set .flow-step:nth-of-type(3n+2),
.flow-chain.is-style-flow-set .flow-step:nth-of-type(3n+2) { background: var(--flow-seg-rust); }
.flow-chain.flow-set .flow-step:nth-of-type(3n+3),
.flow-chain.is-style-flow-set .flow-step:nth-of-type(3n+3) { background: var(--flow-seg-green); }

.has-bands .band-deep .flow-chain.flow-set .flow-step,
.has-bands .band-deep .flow-chain.is-style-flow-set .flow-step {
  background: rgba(255,255,255,0.16); color: #fff;
}
.has-bands .band-deep .flow-chain.flow-set,
.has-bands .band-deep .flow-chain.is-style-flow-set { color: rgba(255,255,255,0.6); }

@media (max-width: 700px) {
  .flow-chain:not(.flow-set):not(.is-style-flow-set) { width: auto; }
}



/* =================================================================
   ICON FLAVOR SYSTEM, v0.39.0

   Every treatment shown in review is now a pure CSS modifier on one
   identical markup shape: <div class="icon-badge icon-badge-{color}
   flavor-{flavor}"><i class="fa-... "></i></div>. Nothing about the
   flavor changes the DOM — only which class is present — which is
   what lets the Icon Feature block (registered in functions.php,
   assets/js/icon-feature-block.js) offer flavor as a plain sidebar
   dropdown instead of needing different markup per style.

   Default (no flavor-* class) stays the original ring, unchanged —
   every pattern and page built before this version keeps rendering
   exactly as it did.
   ================================================================= */

.icon-badge-blue.flavor-underline::before { content: none; }
.icon-badge-blue.flavor-underline { flex-direction: column; gap: 8px; width: auto; height: auto; }
.icon-badge-blue.flavor-underline::after {
  content: ""; display: block; width: 46px; height: 8px; margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%206%20C%2022%202.5%2C%2044%208%2C%2076%204%22%20stroke%3D%22%230177B5%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 100% 100%;
}
.icon-badge-blue.flavor-ring-underline::after {
  content: ""; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%206%20C%2022%202.5%2C%2044%208%2C%2076%204%22%20stroke%3D%22%230177B5%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 100% 100%;
}
.icon-badge-blue.flavor-ring-underline { margin-bottom: 30px; }
.icon-badge-blue.flavor-double::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M40%206%20C%2060%205%2C%2078%2014%2C%2079%2034%20C%2080%2056%2C%2062%2074%2C%2040%2074%20C%2019%2074%2C%202%2057%2C%202%2036%20C%202%2016.5%2C%2018.5%205%2C%2039%206%20C%2044%206.2%2C%2049%207.5%2C%2054%2010%22%20stroke%3D%22%230177B5%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M40%2010%20C%2058%209%2C%2074%2017%2C%2075%2034%20C%2076%2053%2C%2060%2069%2C%2040%2069%20C%2021.5%2069%2C%206%2054%2C%206%2036%20C%206%2018.5%2C%2021%208%2C%2039%2010%22%20stroke%3D%22%230177B5%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.55%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-blue.flavor-brackets::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6%2026%20C%205%2014%2C%2014%205%2C%2026%206%20M54%2074%20C%2066%2075%2C%2075%2066%2C%2074%2054%22%20stroke%3D%22%230177B5%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-blue.flavor-fill::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M40%206%20C%2060%205%2C%2078%2014%2C%2079%2034%20C%2080%2056%2C%2062%2074%2C%2040%2074%20C%2019%2074%2C%202%2057%2C%202%2036%20C%202%2016.5%2C%2018.5%205%2C%2039%206%20C%2044%206.2%2C%2049%207.5%2C%2054%2010%20Z%22%20fill%3D%22%230177B5%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-blue.flavor-fill i { color: #fff; }
.icon-badge-blue.flavor-square::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M18%205%20H62%20Q76%205%2076%2018%20V62%20Q76%2076%2062%2076%20H18%20Q5%2076%205%2062%20V18%20Q5%205%2018%205%20Z%22%20stroke%3D%22%230177B5%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-blue.flavor-dot {
  width: auto; height: auto; flex-direction: row; gap: 12px; margin-bottom: 0;
}
.icon-badge-blue.flavor-dot::before { content: none; }
.icon-badge-blue.flavor-dot::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: #0177B5;
}
/* Duotone — a genuinely different rendering mode from the other
   flavors above: those are all a single-color glyph plus a
   CSS-drawn container shape. Duotone glyphs draw their own two
   layers (see fa-duotone in the icon markup), so the container
   ring is suppressed here rather than stacked on top of an
   already two-toned icon — the glyph carries enough visual
   weight on its own. Both layers map onto the same accent
   color already used everywhere else, secondary layer at Font
   Awesome's own default reduced opacity, so this stays inside
   the existing color system rather than needing a second color
   picker. */
.icon-badge-blue.flavor-duotone::before { content: none; }
.icon-badge-blue.flavor-duotone i {
  --fa-primary-color: #0177B5; --fa-secondary-color: #0177B5; --fa-secondary-opacity: 0.4;
}

.icon-badge-rust.flavor-underline::before { content: none; }
.icon-badge-rust.flavor-underline { flex-direction: column; gap: 8px; width: auto; height: auto; }
.icon-badge-rust.flavor-underline::after {
  content: ""; display: block; width: 46px; height: 8px; margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%206%20C%2022%202.5%2C%2044%208%2C%2076%204%22%20stroke%3D%22%23B54001%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 100% 100%;
}
.icon-badge-rust.flavor-ring-underline::after {
  content: ""; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%206%20C%2022%202.5%2C%2044%208%2C%2076%204%22%20stroke%3D%22%23B54001%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 100% 100%;
}
.icon-badge-rust.flavor-ring-underline { margin-bottom: 30px; }
.icon-badge-rust.flavor-double::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M40%206%20C%2060%205%2C%2078%2014%2C%2079%2034%20C%2080%2056%2C%2062%2074%2C%2040%2074%20C%2019%2074%2C%202%2057%2C%202%2036%20C%202%2016.5%2C%2018.5%205%2C%2039%206%20C%2044%206.2%2C%2049%207.5%2C%2054%2010%22%20stroke%3D%22%23B54001%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M40%2010%20C%2058%209%2C%2074%2017%2C%2075%2034%20C%2076%2053%2C%2060%2069%2C%2040%2069%20C%2021.5%2069%2C%206%2054%2C%206%2036%20C%206%2018.5%2C%2021%208%2C%2039%2010%22%20stroke%3D%22%23B54001%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.55%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-rust.flavor-brackets::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6%2026%20C%205%2014%2C%2014%205%2C%2026%206%20M54%2074%20C%2066%2075%2C%2075%2066%2C%2074%2054%22%20stroke%3D%22%23B54001%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-rust.flavor-fill::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M40%206%20C%2060%205%2C%2078%2014%2C%2079%2034%20C%2080%2056%2C%2062%2074%2C%2040%2074%20C%2019%2074%2C%202%2057%2C%202%2036%20C%202%2016.5%2C%2018.5%205%2C%2039%206%20C%2044%206.2%2C%2049%207.5%2C%2054%2010%20Z%22%20fill%3D%22%23B54001%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-rust.flavor-fill i { color: #fff; }
.icon-badge-rust.flavor-square::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M18%205%20H62%20Q76%205%2076%2018%20V62%20Q76%2076%2062%2076%20H18%20Q5%2076%205%2062%20V18%20Q5%205%2018%205%20Z%22%20stroke%3D%22%23B54001%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-rust.flavor-dot {
  width: auto; height: auto; flex-direction: row; gap: 12px; margin-bottom: 0;
}
.icon-badge-rust.flavor-dot::before { content: none; }
.icon-badge-rust.flavor-dot::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: #B54001;
}
/* Duotone — a genuinely different rendering mode from the other
   flavors above: those are all a single-color glyph plus a
   CSS-drawn container shape. Duotone glyphs draw their own two
   layers (see fa-duotone in the icon markup), so the container
   ring is suppressed here rather than stacked on top of an
   already two-toned icon — the glyph carries enough visual
   weight on its own. Both layers map onto the same accent
   color already used everywhere else, secondary layer at Font
   Awesome's own default reduced opacity, so this stays inside
   the existing color system rather than needing a second color
   picker. */
.icon-badge-rust.flavor-duotone::before { content: none; }
.icon-badge-rust.flavor-duotone i {
  --fa-primary-color: #B54001; --fa-secondary-color: #B54001; --fa-secondary-opacity: 0.4;
}

.icon-badge-green.flavor-underline::before { content: none; }
.icon-badge-green.flavor-underline { flex-direction: column; gap: 8px; width: auto; height: auto; }
.icon-badge-green.flavor-underline::after {
  content: ""; display: block; width: 46px; height: 8px; margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%206%20C%2022%202.5%2C%2044%208%2C%2076%204%22%20stroke%3D%22%2398BE50%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 100% 100%;
}
.icon-badge-green.flavor-ring-underline::after {
  content: ""; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%206%20C%2022%202.5%2C%2044%208%2C%2076%204%22%20stroke%3D%22%2398BE50%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 100% 100%;
}
.icon-badge-green.flavor-ring-underline { margin-bottom: 30px; }
.icon-badge-green.flavor-double::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M40%206%20C%2060%205%2C%2078%2014%2C%2079%2034%20C%2080%2056%2C%2062%2074%2C%2040%2074%20C%2019%2074%2C%202%2057%2C%202%2036%20C%202%2016.5%2C%2018.5%205%2C%2039%206%20C%2044%206.2%2C%2049%207.5%2C%2054%2010%22%20stroke%3D%22%2398BE50%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M40%2010%20C%2058%209%2C%2074%2017%2C%2075%2034%20C%2076%2053%2C%2060%2069%2C%2040%2069%20C%2021.5%2069%2C%206%2054%2C%206%2036%20C%206%2018.5%2C%2021%208%2C%2039%2010%22%20stroke%3D%22%2398BE50%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.55%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-green.flavor-brackets::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6%2026%20C%205%2014%2C%2014%205%2C%2026%206%20M54%2074%20C%2066%2075%2C%2075%2066%2C%2074%2054%22%20stroke%3D%22%2398BE50%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-green.flavor-fill::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M40%206%20C%2060%205%2C%2078%2014%2C%2079%2034%20C%2080%2056%2C%2062%2074%2C%2040%2074%20C%2019%2074%2C%202%2057%2C%202%2036%20C%202%2016.5%2C%2018.5%205%2C%2039%206%20C%2044%206.2%2C%2049%207.5%2C%2054%2010%20Z%22%20fill%3D%22%2398BE50%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-green.flavor-fill i { color: #fff; }
.icon-badge-green.flavor-square::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M18%205%20H62%20Q76%205%2076%2018%20V62%20Q76%2076%2062%2076%20H18%20Q5%2076%205%2062%20V18%20Q5%205%2018%205%20Z%22%20stroke%3D%22%2398BE50%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-green.flavor-dot {
  width: auto; height: auto; flex-direction: row; gap: 12px; margin-bottom: 0;
}
.icon-badge-green.flavor-dot::before { content: none; }
.icon-badge-green.flavor-dot::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: #98BE50;
}
/* Duotone — a genuinely different rendering mode from the other
   flavors above: those are all a single-color glyph plus a
   CSS-drawn container shape. Duotone glyphs draw their own two
   layers (see fa-duotone in the icon markup), so the container
   ring is suppressed here rather than stacked on top of an
   already two-toned icon — the glyph carries enough visual
   weight on its own. Both layers map onto the same accent
   color already used everywhere else, secondary layer at Font
   Awesome's own default reduced opacity, so this stays inside
   the existing color system rather than needing a second color
   picker. */
.icon-badge-green.flavor-duotone::before { content: none; }
.icon-badge-green.flavor-duotone i {
  --fa-primary-color: #98BE50; --fa-secondary-color: #98BE50; --fa-secondary-opacity: 0.4;
}

.icon-badge-ink.flavor-underline::before { content: none; }
.icon-badge-ink.flavor-underline { flex-direction: column; gap: 8px; width: auto; height: auto; }
.icon-badge-ink.flavor-underline::after {
  content: ""; display: block; width: 46px; height: 8px; margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%206%20C%2022%202.5%2C%2044%208%2C%2076%204%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 100% 100%;
}
.icon-badge-ink.flavor-ring-underline::after {
  content: ""; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4%206%20C%2022%202.5%2C%2044%208%2C%2076%204%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 100% 100%;
}
.icon-badge-ink.flavor-ring-underline { margin-bottom: 30px; }
.icon-badge-ink.flavor-double::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M40%206%20C%2060%205%2C%2078%2014%2C%2079%2034%20C%2080%2056%2C%2062%2074%2C%2040%2074%20C%2019%2074%2C%202%2057%2C%202%2036%20C%202%2016.5%2C%2018.5%205%2C%2039%206%20C%2044%206.2%2C%2049%207.5%2C%2054%2010%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M40%2010%20C%2058%209%2C%2074%2017%2C%2075%2034%20C%2076%2053%2C%2060%2069%2C%2040%2069%20C%2021.5%2069%2C%206%2054%2C%206%2036%20C%206%2018.5%2C%2021%208%2C%2039%2010%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.55%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-ink.flavor-brackets::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6%2026%20C%205%2014%2C%2014%205%2C%2026%206%20M54%2074%20C%2066%2075%2C%2075%2066%2C%2074%2054%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%222.8%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-ink.flavor-fill::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M40%206%20C%2060%205%2C%2078%2014%2C%2079%2034%20C%2080%2056%2C%2062%2074%2C%2040%2074%20C%2019%2074%2C%202%2057%2C%202%2036%20C%202%2016.5%2C%2018.5%205%2C%2039%206%20C%2044%206.2%2C%2049%207.5%2C%2054%2010%20Z%22%20fill%3D%22%231A202C%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-ink.flavor-fill i { color: #fff; }
.icon-badge-ink.flavor-square::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M18%205%20H62%20Q76%205%2076%2018%20V62%20Q76%2076%2062%2076%20H18%20Q5%2076%205%2062%20V18%20Q5%205%2018%205%20Z%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.icon-badge-ink.flavor-dot {
  width: auto; height: auto; flex-direction: row; gap: 12px; margin-bottom: 0;
}
.icon-badge-ink.flavor-dot::before { content: none; }
.icon-badge-ink.flavor-dot::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: #1A202C;
}
/* Duotone — a genuinely different rendering mode from the other
   flavors above: those are all a single-color glyph plus a
   CSS-drawn container shape. Duotone glyphs draw their own two
   layers (see fa-duotone in the icon markup), so the container
   ring is suppressed here rather than stacked on top of an
   already two-toned icon — the glyph carries enough visual
   weight on its own. Both layers map onto the same accent
   color already used everywhere else, secondary layer at Font
   Awesome's own default reduced opacity, so this stays inside
   the existing color system rather than needing a second color
   picker. */
.icon-badge-ink.flavor-duotone::before { content: none; }
.icon-badge-ink.flavor-duotone i {
  --fa-primary-color: #1A202C; --fa-secondary-color: #1A202C; --fa-secondary-opacity: 0.4;
}

/* icon-feature block wrapper — matches .icon-feature exactly, just
   scoped so the block works standalone too, not only inside the
   .icon-feature-grid pattern wrapper. */
.wp-block-launcher2026-icon-feature { text-align: left; }
.wp-block-launcher2026-icon-feature h3,
.wp-block-launcher2026-icon-feature .icon-feature-heading { font-size: 20px; margin: 0 0 8px; font-family: 'Poppins', sans-serif; font-weight: 600; }
.wp-block-launcher2026-icon-feature p,
.wp-block-launcher2026-icon-feature .icon-feature-desc { font-size: 15.5px; color: var(--slate); line-height: 1.6; margin: 0; }

/* Optional link — set via the block's "Link" field. Unlinked cards
   (a plain <div>, the default) get none of this; only an <a> version
   of the block picks it up, via the tag selector rather than a class,
   so there's nothing to remember to toggle. Same hover language as
   .card/.partner-card elsewhere: a lift, a soft shadow, no color
   change on the text itself since these already carry their own
   icon-badge accent color. */
a.wp-block-launcher2026-icon-feature {
  display: block; text-decoration: none; color: inherit;
  padding: 20px; margin: -20px;
  border-radius: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.wp-block-launcher2026-icon-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(26,32,44,0.10);
}
a.wp-block-launcher2026-icon-feature:hover .icon-badge {
  transform: scale(1.06);
}
a.wp-block-launcher2026-icon-feature .icon-badge { transition: transform 0.15s ease; }

/* Reason Grid reuses the same Icon Feature block, laid out icon-left
   instead of icon-top — the block itself doesn't know which context
   it's in; the wrapping .reason-grid container controls it entirely
   through CSS, so one block serves both patterns rather than needing
   a second block built just for a different arrangement. .reason-grid
   itself is already declared above (v0.38.0); only the nested
   overrides for the block's own markup are new here. */
.reason-grid .wp-block-launcher2026-icon-feature { display: flex; align-items: flex-start; gap: 14px; }
.reason-grid .wp-block-launcher2026-icon-feature .icon-badge { margin-bottom: 0; }
/* min-width:0 lets the text block actually shrink within its flex
   share and wrap normally — without it, a flex item defaults to a
   min-width based on its content's longest unbreakable run, which is
   exactly what squeezed descriptions into an oddly narrow column
   before the icon-feature-text wrapper existed. */
.reason-grid .wp-block-launcher2026-icon-feature .icon-feature-text { min-width: 0; }
.reason-grid .wp-block-launcher2026-icon-feature .icon-feature-heading { font-size: 17px; margin-bottom: 4px; }
.reason-grid .wp-block-launcher2026-icon-feature .icon-feature-desc { font-size: 15.5px; }

/* =================================================================
   GLOSSARY, v0.49.0

   One page, 246 terms, every one present in the HTML at load. The
   search box and category chips only hide and show what is already
   in the DOM — see assets/js/glossary.js for why that matters.

   The letter headings deliberately do NOT reuse the automatic H2
   drawn rule from .content-wrap-wide: that rule is scoped to
   h2.wp-block-heading, and these headings are template markup, not
   block content. They get their own, heavier treatment — a large
   hand-drawn letter mark — because 21 of them set the rhythm of the
   whole page rather than dividing prose sections.

   Category chips cycle blue/rust/green rather than sitting on blue
   alone. Category is a real categorical dimension, which is exactly
   what the secondary palette is for.
   ================================================================= */

/* The hero uses .wrap, not .content-wrap — same as every other page hero
   (template-contact.php, launcher2026_render_page_hero()). .content-wrap
   carries 56px of vertical padding, which stacked on .page-hero's own 56px
   and produced 112px of dead space above and below the hero copy.

   The sticky controls bar sits flush against the hero. An existing rule,
   `.page-hero-generic + main:not(:has(> .content-wrap:first-child))`, adds
   --section-y to a main following a generic hero unless its first child is a
   .content-wrap. This main opens with .glossary-controls instead, so that rule
   fires and opens a band of page background above the sticky bar. The bar is
   its own full-bleed surface and supplies its own padding, so the inherited
   The body-class prefix is doing real work here. That rule computes to
   specificity (0,3,1) — :not() and :has() each inherit the specificity of
   their most specific argument, so `.content-wrap:first-child` contributes
   two class-level units. A plain `.page-hero-generic + main.glossary` is only
   (0,2,1) and silently loses. Prefixing with the body class reaches (0,4,1)
   and wins without resorting to !important. */
body.page-template-template-glossary .page-hero-generic + main.glossary { padding-top: 0; }

/* --- controls bar ------------------------------------------------
   Sticks under the site header. Solid background, not translucent:
   246 terms scroll underneath it and anything semi-transparent turns
   into visual noise at speed. */
.glossary-controls {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.glossary-controls > .content-wrap {
  padding-top: 18px; padding-bottom: 14px;
}

.glossary-search { position: relative; margin-bottom: 14px; }
.glossary-search > .fa-magnifying-glass {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--slate-light); font-size: 14px; pointer-events: none;
}
.glossary-search-input {
  width: 100%; font-family: 'Lato', sans-serif; font-size: 16px;
  padding: 13px 44px 13px 42px;
  border: 1.5px solid var(--line); border-radius: 24px;
  background: var(--bg); color: var(--ink);
}
.glossary-search-input:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
}
.glossary-search-input::placeholder { color: var(--slate-light); }
.glossary-search-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer;
  color: var(--slate-light); font-size: 15px; padding: 6px;
}
.glossary-search-clear:hover { color: var(--ink); }

.glossary-cats { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
/* The filter chip, shared by all three index filters (0.61.0).

   0.60.0 duplicated these declarations for .guide-filter-pill with a
   note that extracting was not worth editing a working page and its
   script to save eight declarations, and that the time to extract was
   when a third consumer appeared. Case studies are the third. Nothing
   moved in the markup or in either script — only the selector lists
   grew, so glossary and guides render byte-identically. */
.glossary-cat,
.guide-filter-pill,
.cs-filter-pill {
  font-family: 'Lato', sans-serif; font-size: 12.5px; font-weight: 600;
  padding: 6px 13px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--slate);
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.glossary-cat:hover,
.guide-filter-pill:hover,
.cs-filter-pill:hover { border-color: var(--slate-light); color: var(--ink); }
.glossary-cat.is-active,
.guide-filter-pill.is-active,
.cs-filter-pill.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.glossary-cat-blue.is-active,
.guide-filter-blue.is-active,
.cs-filter-blue.is-active  { background: var(--accent); border-color: var(--accent); }
.glossary-cat-rust.is-active,
.guide-filter-rust.is-active,
.cs-filter-rust.is-active  { background: var(--rust);   border-color: var(--rust); }
.glossary-cat-green.is-active,
.guide-filter-green.is-active,
.cs-filter-green.is-active { background: var(--green-text); border-color: var(--green-text); }

.glossary-az { display: flex; flex-wrap: wrap; gap: 2px; }
.glossary-az-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 27px; height: 27px; padding: 0 4px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--accent); border-radius: 6px;
}
a.glossary-az-link:hover { background: var(--accent); color: #fff; }
.glossary-az-link.is-current { background: #E4F0F7; color: var(--accent-dark); }
.glossary-az-link.is-empty { color: #C7CDD6; cursor: default; }
.glossary-az-link.is-filtered-out { opacity: 0.3; }

.glossary-status {
  margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--slate);
}

/* --- term list ---------------------------------------------------- */
.glossary-body { padding-top: var(--section-y-tight); }
.glossary-empty { font-size: 16px; color: var(--slate); padding: 32px 0; }

.glossary-letter { margin-bottom: 8px; }
.glossary-letter-head {
  font-size: 40px; line-height: 1; color: var(--accent);
  margin: 44px 0 4px; padding-bottom: 14px;
  position: relative;
  /* Offset so anchor jumps clear the sticky controls bar. */
  scroll-margin-top: 200px;
}
.glossary-letter:first-child .glossary-letter-head { margin-top: 0; }
.glossary-letter-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%2010%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%205%20C%20120%202.8%2C%20250%207.4%2C%20380%204.6%20C%20510%202.2%2C%20640%207.2%2C%20760%204.8%20C%20870%202.6%2C%20950%206.6%2C%201020%205%22%20fill%3D%22none%22%20stroke%3D%22%23C7CDD6%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-size: 100% 100%;
}

.glossary-list { margin: 0; }
.glossary-term {
  padding: 22px 0; border-bottom: 1px solid var(--line);
  scroll-margin-top: 200px;
}
.glossary-term:last-child { border-bottom: none; }

.glossary-term-name {
  font-size: 18px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  margin-bottom: 7px;
}

.glossary-anchor {
  color: var(--slate-light); font-size: 12px; text-decoration: none;
  opacity: 0; transition: opacity 0.12s ease, color 0.12s ease;
}
.glossary-term:hover .glossary-anchor,
.glossary-anchor:focus { opacity: 1; }
.glossary-anchor:hover { color: var(--accent); }
.glossary-anchor.is-copied { opacity: 1; color: var(--green-text); }

.glossary-tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; margin-left: auto;
}

.glossary-term-def { margin: 0; }
.glossary-term-def p { font-size: 16px; color: var(--ink); margin: 0 0 8px; }
.glossary-term-def p:last-child { margin-bottom: 0; }

.glossary-related { font-size: 15.5px; color: var(--slate); }
.glossary-related-label {
  font-family: var(--font-hand); font-weight: var(--font-hand-weight);
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--green-text); margin-right: 6px;
}
.glossary-related a { color: var(--accent); text-decoration: none; }
.glossary-related a:hover { text-decoration: underline; }

.glossary-deep a {
  font-size: 15.5px; font-weight: 700; color: var(--accent); text-decoration: none;
}
.glossary-deep a:hover { text-decoration: underline; }
.glossary-deep i { font-size: 12px; margin-left: 3px; }

.glossary-src { font-size: 13.5px; color: var(--slate-light); }
.glossary-src a { color: var(--slate); }

.glossary-disclaimer {
  margin-top: 40px; padding: 18px 20px;
  background: var(--surface); border-left: 3px solid var(--rust);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px; line-height: 1.6; color: var(--slate);
}

.glossary-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 30;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: none; background: var(--accent); color: #fff; font-size: 15px;
  box-shadow: 0 2px 10px rgba(26,32,44,0.22);
}
.glossary-top:hover { background: var(--accent-dark); }

@media (max-width: 782px) {
  /* wp-admin's own admin bar stops being fixed below 782px, so the
     sticky offset changes with it. */
  .glossary-letter-head, .glossary-term { scroll-margin-top: 240px; }
  .glossary-letter-head { font-size: 32px; }
  .glossary-term-name { font-size: 17px; }
  .glossary-tag { margin-left: 0; flex-basis: 100%; }
  .glossary-controls > .content-wrap { padding-top: 14px; padding-bottom: 10px; }
  .glossary-az-link { min-width: 24px; height: 24px; font-size: 12px; }
  .glossary-top { right: 14px; bottom: 14px; }
}

/* =================================================================
   INTEGRATIONS HEADER — matched to the glossary, v0.50.0

   Only the header band changes: the sticky controls bar, its search
   field, and its category chips. The partner grid below is untouched.

   The hero itself needed nothing — template-integrations.php already
   routes through launcher2026_render_page_hero(), which uses .wrap
   correctly. The gap under it was not the doubled-padding defect the
   glossary had; it was the intro .content-wrap band spending 112px of
   vertical padding on a single sentence. That band is tightened at the
   end of this block.

   IMPORTANT — the chips are .media-filter-tab, a class shared with the
   Media archive page (template-archive-media.php). Every chip rule
   below is scoped to .partner-filters so the Media page keeps its own
   larger tab styling. Do not lift these rules onto .media-filter-tab
   directly.
   ================================================================= */

/* Full-bleed sticky surface, mirroring .glossary-controls. The width
   constraint moves off this element onto the inner wrapper so the
   background and bottom rule span the viewport. */
.partner-controls {
  position: sticky; top: 0; z-index: 20;
  max-width: none; margin: 0; padding: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: block;
}
.partner-controls-inner {
  max-width: 1120px; margin: 0 auto; padding: 18px 32px 14px;
  display: flex; flex-direction: column; gap: 14px;
}

/* Search: full width with the icon inset, same as the glossary. */
.partner-search-wrap { max-width: none; position: relative; }
.partner-search-wrap > .fa-magnifying-glass {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--slate-light); font-size: 14px; pointer-events: none;
}
.partner-search {
  width: 100%; font-family: 'Lato', sans-serif; font-size: 16px;
  padding: 13px 16px 13px 42px;
  border: 1.5px solid var(--line); border-radius: 24px;
  background: var(--bg); color: var(--ink);
}
.partner-search:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
}
.partner-search::placeholder { color: var(--slate-light); }

/* Chips — scoped to .partner-filters, never bare .media-filter-tab. */
.partner-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.partner-filters .media-filter-tab {
  font-family: 'Lato', sans-serif; font-size: 12.5px; font-weight: 600;
  padding: 6px 13px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--slate);
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.partner-filters .media-filter-tab:hover { border-color: var(--slate-light); color: var(--ink); }
.partner-filters .media-filter-tab.is-active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* One sentence of intro copy did not need 56px above and below it. */
body.page-template-template-integrations main > .content-wrap:first-child {
  padding-top: var(--section-y-tight);
  padding-bottom: var(--section-y-tight);
}

/* The partner grid supplied its own top gap via the old controls
   margin-bottom, which is now gone with the bar becoming full-bleed. */
body.page-template-template-integrations .partner-grid { margin-top: 28px; }

@media (max-width: 782px) {
  .partner-controls-inner { padding: 14px 32px 10px; }
}

/* =================================================================
   ICONS EVERYWHERE, v0.51.0

   Three consumers beyond the two icon blocks, all drawing from the
   same curated set in assets/js/icon-picker.js:

     .icon-inline        an icon inside the text of any block
     .block-icon-badge   an icon badge on a container block
     .featured-icon      an icon standing in for a Featured Image

   The badge treatments (.icon-badge, .flavor-*) are reused as-is —
   nothing is redefined here, so a badge on a Group and a badge on an
   Icon Feature card stay identical by construction rather than by
   two copies of the same rules being kept in step by hand.
   ================================================================= */

/* --- inline icons -------------------------------------------------
   Sized in em, not px, so the icon tracks whatever it sits in: 16px
   body copy, a 36px hero H1, or a 12.5px chip. Baseline nudged very
   slightly so the glyph's optical centre lines up with lowercase
   x-height rather than sitting high.

   The element wraps a zero-width space (the character the RichText
   format attaches to) — it has no visible text of its own, so the
   width comes entirely from the Font Awesome glyph. */
.icon-inline {
  font-size: 0.95em;
  line-height: 1;
  vertical-align: -0.05em;
  margin: 0 0.12em;
}
.icon-inline-blue  { color: var(--accent); }
.icon-inline-rust  { color: var(--rust); }
.icon-inline-green { color: var(--green-text); }
.icon-inline-ink   { color: var(--ink); }

/* An icon opening a line shouldn't carry a leading gap. */
.icon-inline:first-child { margin-left: 0; }

/* --- block icon badges --------------------------------------------
   Injected by launcher2026_render_block_icon_badge() as the first
   child of the block's own outer element, so the block keeps its
   layout, alignment and any width constraints. */
.block-icon-badge { margin-bottom: 14px; }

/* Columns lay their children out horizontally; a badge inside one
   would otherwise become a flex item competing with the content. */
.wp-block-columns.has-launcher-icon > .block-icon-badge { flex: 0 0 100%; }

/* Cover stacks its children in a positioned container — keep the
   badge above the overlay rather than behind it. */
.wp-block-cover.has-launcher-icon > .block-icon-badge { position: relative; z-index: 2; }

/* Media & Text is a grid; span both tracks. */
.wp-block-media-text.has-launcher-icon > .block-icon-badge { grid-column: 1 / -1; }

/* --- featured icons -----------------------------------------------
   Substituted for post_thumbnail_html when a post has no image. The
   call sites expect something image-shaped, so this centres the badge
   in a comparable block rather than letting a 64px circle sit alone
   against the left edge of a card. */
.featured-icon {
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.card .featured-icon,
.news-card .featured-icon {
  min-height: 120px; width: 100%;
  background: var(--bg); border-radius: 10px;
}
.page-hero-visual .featured-icon { min-height: 200px; }

/* --- editor ------------------------------------------------------- */
.launcher2026-inline-icon-picker { max-height: 340px; overflow-y: auto; }

/* Featured icon on the solution hero, v0.51.2.

   .page-hero-solution is the one hero band with a saturated background
   (var(--accent)). Every icon-badge ring is a ::before SVG with its
   stroke colour baked into the data URI, and the glyph takes the same
   colour — so a blue featured icon on that band rendered blue-on-blue
   and was invisible. Rust, green and ink are legible there but still
   read as three unrelated treatments against the blue.

   Rather than authoring a white variant of every ring SVG in every
   flavour, the hero normalises: one white ring, white glyph, whatever
   colour and flavour the editor picked. The hero is a distinct context
   and the icon's job there is to read as a hero visual, not to carry
   the categorical colour it would carry inside body content. */
.page-hero-solution .featured-icon::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M40%206%20C%2060%205%2C%2078%2014%2C%2079%2034%20C%2080%2056%2C%2062%2074%2C%2040%2074%20C%2019%2074%2C%202%2057%2C%202%2036%20C%202%2016.5%2C%2018.5%205%2C%2039%206%20C%2044%206.2%2C%2049%207.5%2C%2054%2010%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") !important;
  content: "" !important;
}
.page-hero-solution .featured-icon i { color: #fff !important; }

/* Extra-large badge, v0.51.3 — added for featured icons, which stand in
   for an image and sit in an image-sized slot. The previous largest,
   -lg at 108px, left a 200px hero visual area looking underfilled.
   Available to every icon consumer, not just featured icons. */
.icon-badge-xl { width: 140px; height: 140px; margin-bottom: 24px; }
.icon-badge-xl i { font-size: 58px; width: 58px; height: 58px; }

@media (max-width: 700px) {
  .icon-badge-xl { width: 100px; height: 100px; }
  .icon-badge-xl i { font-size: 42px; width: 42px; height: 42px; }
}

/* =================================================================
   PRESENTATION LAYER, v0.56.0

   Chaptered bands, the section rail, card treatments and the two new
   icon flavours. Bands and rail are opt-in per page (Page Layout meta
   box → body.has-bands / body.has-rail, markup from
   inc/page-layout.php). Card treatments are opt-in per grid, as a
   core/group block style. Everything else in this block — the light
   solution hero, flat checklist markers, and eyebrows off Kalam — is
   unconditional and was decided Aug 2026.
   ================================================================= */
/* =================================================================
   LAUNCHER 2026 — PRESENTATION LAYER (proposed v0.56.0), rev 2

   Opt-in hooks, all driven by one per-page checkbox except where noted:
     body.has-bands     chaptered section bands
     body.has-rail      sticky section rail
     body.light-chrome  light header + light hero      (site-wide)
     body.clean-checks  flat checklist markers
     body.marked-up     hand lettering + margin notes  (per page)
     .cards-{style}
/* =================================================================
   LAUNCHER 2026 — PRESENTATION LAYER (proposed v0.56.0), rev 2

   Opt-in hooks, all driven by one per-page checkbox except where noted:
     body.has-bands     chaptered section bands
     body.has-rail      sticky section rail
     body.light-chrome  light header + light hero      (site-wide)
     body.clean-checks  flat checklist markers
     body.marked-up     hand lettering + margin notes  (per page)
     .is-style-cards- {style}     card treatment, per grid
   ================================================================= */

:root {
  --band-blue:  #EFF6FB;
  --band-green: #F4F9EA;
  --band-rust:  #FBF3EE;
  --card-tint-blue:  #F3F8FC;
  --card-tint-rust:  #FBF5F1;
  --card-tint-green: #F6FAEF;
  --card-tint-ink:   #F1F3F5;
  --rail-w: 186px;
  --rule-4-blue: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%204%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%201.7%20C%20190%201.1%2C%20340%202.5%2C%20500%201.6%20C%20670%200.9%2C%20830%202.3%2C%201020%201.7%22%20fill%3D%22none%22%20stroke%3D%22%230177B5%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --rule-4-rust: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%204%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%201.7%20C%20190%201.1%2C%20340%202.5%2C%20500%201.6%20C%20670%200.9%2C%20830%202.3%2C%201020%201.7%22%20fill%3D%22none%22%20stroke%3D%22%23B54001%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --rule-4-ink: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%204%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%201.7%20C%20190%201.1%2C%20340%202.5%2C%20500%201.6%20C%20670%200.9%2C%20830%202.3%2C%201020%201.7%22%20fill%3D%22none%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --rule-4-green: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%204%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-20%201.7%20C%20190%201.1%2C%20340%202.5%2C%20500%201.6%20C%20670%200.9%2C%20830%202.3%2C%201020%201.7%22%20fill%3D%22none%22%20stroke%3D%22%2398BE50%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

/* -----------------------------------------------------------------
   1. BANDS — the band edge is the only divider. No drawn rule at a
   join: the colour change already says "new section", and two
   markers at one boundary was the double-line problem again.
   ----------------------------------------------------------------- */
.band { position: relative; }
.has-bands .band > .content-wrap { padding-top: 46px; padding-bottom: 46px; }
/* Scoped to .band (0.69.0). These were `.has-bands .band-deep` etc,
   which also matched the chapter HEADING — a tone override is typed
   into the heading's Additional CSS classes, so `h2.band-deep` carried
   the class too and painted itself. Invisible while heading and band
   were the same colour, and it surfaced the moment a band fill was
   changed: the h2 kept the old fill and read as a highlighted box
   behind the text. Every page with a tone override had one. */
.has-bands .band.band-plain { background: var(--surface); }
.has-bands .band.band-blue  { background: var(--band-blue); }
.has-bands .band.band-green { background: var(--band-green); }
.has-bands .band.band-rust  { background: var(--band-rust); }
.has-bands .band.band-deep  { background: var(--accent); }

/* Only the chapter heading that OPENS a band drops its divider — the
   band edge already marks that boundary. Subsection H2s further down
   the same band keep the pencil rule, which is what gives the two
   devices distinct jobs. */
.has-bands .band .content-wrap-wide h2.is-style-chapter {
  margin-top: 0; padding-top: 0;
}
.has-bands .band .content-wrap-wide h2.is-style-chapter::before { content: none; }

.has-bands .band-deep > .content-wrap { padding-top: var(--section-y-loose); padding-bottom: var(--section-y-loose); }
.has-bands .band-deep h2, .has-bands .band-deep h2.wp-block-heading { color: #fff; font-size: 34px; max-width: 20ch; }
.has-bands .band-deep p { color: #DCEBF5; max-width: 60ch; }
/* var(--green) is #98BC4E, which against the deep blue is roughly 2.3:1
   — under the 4.5:1 AA threshold for small text, and an eyebrow is 12px
   letterspaced caps, the worst case for it. Found live on Commercial
   Equipment (14545) in Aug 2026 and still on Data Protection (14377).
   Lifted to the same #CDE6A4 the checklist glyph and the underline mark
   already use, so the deep band has one light-on-blue value rather than
   three. The rule existed and was the cause: an override is not
   automatically a correct override. */
.has-bands .band-deep .is-style-eyebrow, .has-bands .band-deep .eyebrow { color: #CDE6A4; }

/* Everything else that can land in a deep band. Only prose has appeared in one
   so far, so none of this is exercised yet — but ink-on-blue is a legibility
   failure waiting for the first page that puts a checklist or a card in here,
   and it fails silently. */
.has-bands .band-deep .checklist-item span,
.has-bands .band-deep .icon-feature-heading,
.has-bands .band-deep h3 { color: #fff; }
.has-bands .band-deep .icon-feature-desc,
.has-bands .band-deep .reason-item p { color: #DCEBF5; }
.has-bands .band-deep a:not(.btn) { color: #fff; text-decoration-color: rgba(255,255,255,0.55); }
/* Brand green reads muddy against the blue; lift it rather than drop it. */
.has-bands .band-deep .checklist-item .icon-badge-xs i { color: #CDE6A4; }
/* The drawn badge ring is a hardcoded blue stroke — the same reason the hero
   featured icon needed an override on the old blue hero band. */
.has-bands .band-deep .icon-badge::before { filter: brightness(0) invert(1); opacity: 0.85; }
.has-bands .band-deep .icon-badge i { color: #fff; }
/* The drawn TEXT marks are the same hardcoded-stroke problem, missed above
   because they are background images on an inline span rather than a badge.
   Found live on Automotive Indirect (14556) in Aug 2026: green #98BE50 on
   #0177B5 is near-identical in luminance and adjacent in hue, so the stroke
   reads as a rendering artifact rather than a mark. `filter` is not usable
   here — it would invert the type along with the background image — so the
   stroke colour is respecified. Lifted, not dropped, matching the checklist
   glyph above. Also live on Dealer Portal (109). */
.has-bands .band-deep .mark-underline {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2011%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M3%207%20C%2055%202%2C%20120%209%2C%20197%204%22%20fill%3D%22none%22%20stroke%3D%22%23CDE6A4%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.has-bands .band-deep .mark-circle {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20220%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M30%208%20C%2090%202%2C%20170%203%2C%20205%2014%20C%20216%2020%2C%20210%2040%2C%20180%2050%20C%20130%2060%2C%2050%2058%2C%2018%2046%20C%204%2039%2C%206%2020%2C%2034%2011%22%20fill%3D%22none%22%20stroke%3D%22%23F3DDD0%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
/* Subsection dividers inside a deep band: the pencil grey all but vanishes. */
.has-bands .band-deep .content-wrap-wide h2.wp-block-heading:not(.is-style-chapter)::before {
  filter: brightness(0) invert(1); opacity: 0.32;
}

.no-bands .band > .content-wrap { padding-top: 0; padding-bottom: 0; }
.no-bands > .band:first-child > .content-wrap { padding-top: var(--section-y); }
.no-bands > .band:last-of-type > .content-wrap { padding-bottom: var(--section-y); }

/* -----------------------------------------------------------------
   2. LIGHT CHROME — header and hero come off full-saturation blue.
   Site-wide, not per page: a header can't change page to page.
   ----------------------------------------------------------------- */
.page-hero-solution { background: var(--band-blue); }
.page-hero-solution h1 { color: var(--ink); }
.page-hero-solution .lead,
.page-hero-solution .is-style-lead { color: var(--slate); }
.page-hero-solution .eyebrow,
.page-hero-solution .is-style-eyebrow { color: var(--accent); }
/* The hero featured-icon ring is a hardcoded blue stroke — invisible on
   the old blue band, which is why it needed a white override. On a
   light hero it renders as drawn, so the override stands down. */
.page-hero-solution .featured-icon i { color: var(--accent) !important; }

/* -----------------------------------------------------------------
   3. TYPE — hand lettering is reserved for marked-up pages.
   --font-hand drives every eyebrow in the theme from one place, so
   this is a single variable swap plus tracking, which Lato needs
   more of than Kalam did at the same size.
   ----------------------------------------------------------------- */
/* Eyebrows come off Kalam site-wide. The pencil LINEWORK — marks,
   margin notes, drawn rings and frames — is untouched and always on
   wherever it is authored. Only the typeface changes here. */
:root { --font-hand: 'Lato', sans-serif; --font-hand-weight: 700; }
.eyebrow, .is-style-eyebrow, .page-hero .is-style-eyebrow,
.section-rail .rail-head { letter-spacing: 0.11em; font-size: 12px; }
/* Marks keep Kalam — they are lettering, not labels. */
.margin-note { font-family: 'Kalam', cursive; font-weight: 700; }

.margin-note {
  font-family: var(--font-hand); font-weight: var(--font-hand-weight);
  color: var(--rust); font-size: 17px; line-height: 1.35;
  padding-left: 14px; margin: 10px 0 18px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%206%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M3%202%20C%201%2025%2C%205%2050%2C%203%2098%22%20fill%3D%22none%22%20stroke%3D%22%23B54001%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat left top / 6px 100%;
}
@media (min-width: 1000px) {
  .margin-note { float: right; width: 216px; margin: 4px 0 20px 36px; }
  .margin-note ~ .icon-feature-grid, .margin-note ~ .reason-grid,
  .margin-note ~ .checklist, .margin-note ~ .faq-list,
  .margin-note ~ .flow-chain, .margin-note ~ .wp-block-table { clear: right; }
}

/* -----------------------------------------------------------------
   4. CHECKLISTS — flat marker, no filled disc, more air per row.
   ----------------------------------------------------------------- */
.checklist { gap: 15px 40px; }
.checklist-item { gap: 11px; }
.checklist-item .icon-badge-xs { width: 19px; height: 19px; margin-top: 3px; }
.checklist-item .icon-badge-xs::before { content: none; }
.checklist-item .icon-badge-xs i { color: var(--green-text); font-size: 15px; width: 15px; height: 15px; }
.checklist-item:hover { transform: none; }
.checklist-item:hover .icon-badge-xs { transform: none; }
.checklist-item span { font-size: 16.5px; line-height: 1.45; }

/* -----------------------------------------------------------------
   5. CARD TREATMENTS — one class per grid, five to choose from.
   Default (no class) stays exactly as the theme renders today.
   ----------------------------------------------------------------- */
.cards-soft .wp-block-launcher2026-icon-feature,
.cards-rule .wp-block-launcher2026-icon-feature,
.cards-tint .wp-block-launcher2026-icon-feature,
.cards-drawn .wp-block-launcher2026-icon-feature {
  padding: 26px 24px 24px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
/* -----------------------------------------------------------------
   5. CARD TREATMENTS — one class per grid, five to choose from.
   Default (no class) stays exactly as the theme renders today.
   ----------------------------------------------------------------- */
.is-style-cards-soft .wp-block-launcher2026-icon-feature,
.is-style-cards-rule .wp-block-launcher2026-icon-feature,
.is-style-cards-tint .wp-block-launcher2026-icon-feature,
.is-style-cards-drawn .wp-block-launcher2026-icon-feature {
  padding: 26px 24px 24px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
/* soft — surface, no border, one shadow doing the separating */
.cards-soft .wp-block-launcher2026-icon-feature {
  background: var(--surface); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(26,32,44,0.05), 0 10px 26px rgba(26,32,44,0.06);
}
/* soft — surface, no border, one shadow doing the separating */
.is-style-cards-soft .wp-block-launcher2026-icon-feature {
  background: var(--surface); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(26,32,44,0.05), 0 10px 26px rgba(26,32,44,0.06);
}
/* rule — hairline box with a drawn colour rule along the top edge */
.cards-rule .wp-block-launcher2026-icon-feature {
  background: var(--surface) var(--rule-4-blue) no-repeat top left / 100% 4px;
  border: 1px solid var(--line); border-radius: 12px;
}
/* rule — hairline box with a drawn colour rule along the top edge */
.is-style-cards-rule .wp-block-launcher2026-icon-feature {
  background: var(--surface) var(--rule-4-blue) no-repeat top left / 100% 4px;
  border: 1px solid var(--line); border-radius: 12px;
}
.cards-rule .wp-block-launcher2026-icon-feature:has(.icon-badge-rust),
.is-style-cards-rule .wp-block-launcher2026-icon-feature:has(.icon-badge-rust) { background-image: var(--rule-4-rust); }
.cards-rule .wp-block-launcher2026-icon-feature:has(.icon-badge-green),
.is-style-cards-rule .wp-block-launcher2026-icon-feature:has(.icon-badge-green) { background-image: var(--rule-4-green); }
.cards-rule .wp-block-launcher2026-icon-feature:has(.icon-badge-ink),
.is-style-cards-rule .wp-block-launcher2026-icon-feature:has(.icon-badge-ink) { background-image: var(--rule-4-ink); }
/* tint — a wash of the card's own accent, no border at all */
.cards-tint .wp-block-launcher2026-icon-feature { background: var(--card-tint-blue); border-radius: 14px; }
/* tint — a wash of the card's own accent, no border at all */
.is-style-cards-tint .wp-block-launcher2026-icon-feature { background: var(--card-tint-blue); border-radius: 14px; }
/* The wash follows the icon's own colour, not the card's position. A 3n
   rotation only matches while a grid runs blue/rust/green in order; the
   "Why" grids run blue/rust/green/ink in fours, so every fourth card wore a
   blue wash under an ink icon. */
.cards-tint .wp-block-launcher2026-icon-feature:has(.icon-badge-rust),
.is-style-cards-tint .wp-block-launcher2026-icon-feature:has(.icon-badge-rust) { background: var(--card-tint-rust); }
.cards-tint .wp-block-launcher2026-icon-feature:has(.icon-badge-green),
.is-style-cards-tint .wp-block-launcher2026-icon-feature:has(.icon-badge-green) { background: var(--card-tint-green); }
.cards-tint .wp-block-launcher2026-icon-feature:has(.icon-badge-ink),
.is-style-cards-tint .wp-block-launcher2026-icon-feature:has(.icon-badge-ink) { background: var(--card-tint-ink); }
/* drawn — the theme's 9-slice pencil frame, the hand-drawn option */
.cards-drawn .wp-block-launcher2026-icon-feature {
  background: var(--surface);
  border: 10px solid transparent;
  border-image-source: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cpath%20d%3D%22M22%206%20C%2070%203%2C%20130%208%2C%20178%205%20M194%2022%20C%20197%2070%2C%20192%20130%2C%20195%20178%20M178%20194%20C%20130%20197%2C%2070%20192%2C%2022%20195%20M6%20178%20C%203%20130%2C%208%2070%2C%205%2022%20M5%2022%20C%205%2012%2C%2012%205%2C%2022%206%20M178%205%20C%20188%205%2C%20195%2012%2C%20194%2022%20M195%20178%20C%20195%20188%2C%20188%20195%2C%20178%20194%20M22%20195%20C%2012%20195%2C%205%20188%2C%206%20178%22%20fill%3D%22none%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  border-image-slice: 24; border-image-repeat: stretch; border-image-width: 10px;
  padding: 20px 18px 18px;
}
/* drawn — the theme's 9-slice pencil frame, the hand-drawn option */
.is-style-cards-drawn .wp-block-launcher2026-icon-feature {
  background: var(--surface);
  border: 10px solid transparent;
  border-image-source: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cpath%20d%3D%22M22%206%20C%2070%203%2C%20130%208%2C%20178%205%20M194%2022%20C%20197%2070%2C%20192%20130%2C%20195%20178%20M178%20194%20C%20130%20197%2C%2070%20192%2C%2022%20195%20M6%20178%20C%203%20130%2C%208%2070%2C%205%2022%20M5%2022%20C%205%2012%2C%2012%205%2C%2022%206%20M178%205%20C%20188%205%2C%20195%2012%2C%20194%2022%20M195%20178%20C%20195%20188%2C%20188%20195%2C%20178%20194%20M22%20195%20C%2012%20195%2C%205%20188%2C%206%20178%22%20fill%3D%22none%22%20stroke%3D%22%231A202C%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  border-image-slice: 24; border-image-repeat: stretch; border-image-width: 10px;
  padding: 20px 18px 18px;
}
.cards-soft a.wp-block-launcher2026-icon-feature:hover,
.cards-tint a.wp-block-launcher2026-icon-feature:hover { transform: translateY(-2px); }
.is-style-cards-soft a.wp-block-launcher2026-icon-feature:hover,
.is-style-cards-tint a.wp-block-launcher2026-icon-feature:hover { transform: translateY(-2px); }
.cards-rule a.wp-block-launcher2026-icon-feature:hover { transform: translateY(-2px); border-color: #C9D3DC; }
.is-style-cards-rule a.wp-block-launcher2026-icon-feature:hover { transform: translateY(-2px); border-color: #C9D3DC; }
/* Cards want a smaller badge than a bare grid item does — 80px of ring
   inside a 24px-padded card leaves no room for the heading to breathe. */
.cards-soft .icon-badge, .cards-rule .icon-badge,
.cards-tint .icon-badge, .cards-drawn .icon-badge {
  width: 54px; height: 54px; margin-bottom: 14px;
}
/* Cards want a smaller badge than a bare grid item does — 80px of ring
   inside a 24px-padded card leaves no room for the heading to breathe. */
.is-style-cards-soft .icon-badge, .is-style-cards-rule .icon-badge,
.is-style-cards-tint .icon-badge, .is-style-cards-drawn .icon-badge {
  width: 54px; height: 54px; margin-bottom: 14px;
}
.cards-soft .icon-badge i, .cards-rule .icon-badge i,
.cards-tint .icon-badge i, .cards-drawn .icon-badge i {
  font-size: 23px; width: 23px; height: 23px;
}
.is-style-cards-soft .icon-badge i, .is-style-cards-rule .icon-badge i,
.is-style-cards-tint .icon-badge i, .is-style-cards-drawn .icon-badge i {
  font-size: 23px; width: 23px; height: 23px;
}

/* A tinted card on a tinted band is two washes of the same colour, so the
   card takes the surface instead — but dropping the wash also dropped the
   accent, which is half of what the treatment is for. The accent comes back
   as a drawn top rule on the same 3n rotation the icon colours follow, so a
   card on a tinted band still reads blue, rust or green. */
.has-bands .band:not(.band-plain):not(.band-deep) .cards-tint .wp-block-launcher2026-icon-feature,
.has-bands .band:not(.band-plain):not(.band-deep) .is-style-cards-tint .wp-block-launcher2026-icon-feature {
  background: var(--surface) var(--rule-4-blue) no-repeat top left / 100% 4px;
}
.has-bands .band:not(.band-plain):not(.band-deep) .cards-tint .wp-block-launcher2026-icon-feature:has(.icon-badge-rust),
.has-bands .band:not(.band-plain):not(.band-deep) .is-style-cards-tint .wp-block-launcher2026-icon-feature:has(.icon-badge-rust) {
  background-image: var(--rule-4-rust);
}
.has-bands .band:not(.band-plain):not(.band-deep) .cards-tint .wp-block-launcher2026-icon-feature:has(.icon-badge-green),
.has-bands .band:not(.band-plain):not(.band-deep) .is-style-cards-tint .wp-block-launcher2026-icon-feature:has(.icon-badge-green) {
  background-image: var(--rule-4-green);
}
.has-bands .band:not(.band-plain):not(.band-deep) .cards-tint .wp-block-launcher2026-icon-feature:has(.icon-badge-ink),
.has-bands .band:not(.band-plain):not(.band-deep) .is-style-cards-tint .wp-block-launcher2026-icon-feature:has(.icon-badge-ink) {
  background-image: var(--rule-4-ink);
}

/* -----------------------------------------------------------------
   6. SECTION RAIL — an absolutely positioned column bounded by <main>,
   with the rail sticky inside it. That containment is what keeps it
   off the header, the hero and everything below main, which all stay
   full width.
   ----------------------------------------------------------------- */
.rail-col { display: none; }
@media (min-width: 1400px) {
  .has-rail main#main-content { position: relative; }
  .has-rail .rail-col {
    display: block; position: absolute; top: 0; bottom: 0;
    left: max(24px, calc(50% - 637px)); width: var(--rail-w);
    pointer-events: none;
    /* Bands are position:relative and come later in the DOM, so without
       this they paint over the rail — which is why it only appeared
       across "Built to support this solution", the one section below
       that is not a band. */
    z-index: 3;
  }
  .has-rail .section-rail { position: sticky; top: 96px; pointer-events: auto; }
  /* Widen the wrap by exactly what the rail takes, so the reading column
     stays 1056px. Otherwise 250px comes off the content and auto-fit drops
     .icon-feature-grid from four tracks to three, stranding the fourth card
     of every 4-item grid. Track counts are computed from available width, so
     anything that narrows the column silently reflows every grid on the page.
     The breakpoint moved to 1400px for the same reason: below that there is
     no room for both a rail and a full-width column, so the rail stands down
     rather than squeezing the grids. */
  .has-rail main#main-content .content-wrap-wide,
  .has-rail main#main-content > section.block {
    max-width: calc(1120px + var(--rail-w) + 32px);
    padding-left: calc(var(--rail-w) + 64px);
  }
}
.section-rail .rail-head {
  font-family: var(--font-hand); font-weight: var(--font-hand-weight);
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--slate-light); margin-bottom: 10px;
}
.section-rail ol { list-style: none; border-left: 1px solid var(--line); }
.section-rail a {
  display: block; padding: 7px 0 7px 14px; margin-left: -1px;
  border-left: 2px solid transparent;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--slate); text-decoration: none; line-height: 1.3;
}
.section-rail a:hover { color: var(--ink); }
.section-rail a[aria-current="true"] { color: var(--accent); border-left-color: var(--accent); }

/* Over a deep band the rail inverts rather than sitting in a white
   panel — a panel would read as a floating object over the page.
   A script toggles .on-dark when a .band-deep covers the rail's
   vertical centre; everything below is just the inverted palette. */
.section-rail .rail-head, .section-rail a { transition: color 0.18s ease, border-color 0.18s ease; }
.section-rail ol { transition: border-color 0.18s ease; }
.section-rail.on-dark .rail-head { color: rgba(255,255,255,0.68); }
.section-rail.on-dark ol { border-left-color: rgba(255,255,255,0.28); }
.section-rail.on-dark a { color: rgba(255,255,255,0.82); }
.section-rail.on-dark a:hover { color: #fff; }
.section-rail.on-dark a[aria-current="true"] { color: #fff; border-left-color: var(--green); }
.band[id] { scroll-margin-top: 96px; }

/* -----------------------------------------------------------------
   7. RULED CARD, SOLID VARIANT — crisp 3px top edge rather than the
   drawn stroke. Same box, different voice.
   ----------------------------------------------------------------- */
.cards-rule-solid .wp-block-launcher2026-icon-feature {
  background: var(--surface);
  border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: 12px; padding: 24px 22px 22px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* -----------------------------------------------------------------
   7. RULED CARD, SOLID VARIANT — crisp 3px top edge rather than the
   drawn stroke. Same box, different voice.
   ----------------------------------------------------------------- */
.is-style-cards-rule-solid .wp-block-launcher2026-icon-feature {
  background: var(--surface);
  border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: 12px; padding: 24px 22px 22px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cards-rule-solid .wp-block-launcher2026-icon-feature:nth-child(3n+2) { border-top-color: var(--rust); }
.is-style-cards-rule-solid .wp-block-launcher2026-icon-feature:nth-child(3n+2) { border-top-color: var(--rust); }
.cards-rule-solid .wp-block-launcher2026-icon-feature:nth-child(3n+3) { border-top-color: var(--green); }
.is-style-cards-rule-solid .wp-block-launcher2026-icon-feature:nth-child(3n+3) { border-top-color: var(--green); }
.cards-rule-solid a.wp-block-launcher2026-icon-feature:hover {
  transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,32,44,0.07);
}
.is-style-cards-rule-solid a.wp-block-launcher2026-icon-feature:hover {
  transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,32,44,0.07);
}
.cards-rule-solid .icon-badge { width: 54px; height: 54px; margin-bottom: 14px; }
.is-style-cards-rule-solid .icon-badge { width: 54px; height: 54px; margin-bottom: 14px; }
.cards-rule-solid .icon-badge i { font-size: 23px; width: 23px; height: 23px; }
.is-style-cards-rule-solid .icon-badge i { font-size: 23px; width: 23px; height: 23px; }

/* -----------------------------------------------------------------
   8. ICON TREATMENTS BEYOND THE DRAWN RINGS
   Three flavours added in v0.56.0: entries in FLAVORS
   (icon-picker.js) plus the rules below. No size-map entry — that
   map is for SIZES; a flavor needs only its CSS and its list entry.

   The two line treatments render in the FA light weight, resolved by
   launcher2026_icon_weight_class() / weightClass(). light.min.css is
   574 bytes of @font-face; the glyph codepoints live in the shared
   fontawesome.min.css, so all 102 icons work at light weight with no
   new assets.
   ----------------------------------------------------------------- */
.icon-badge.flavor-chip::before { content: none; }
.icon-badge.flavor-chip {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--card-tint-blue); margin-bottom: 16px;
}
.icon-badge-rust.flavor-chip  { background: var(--card-tint-rust); }
.icon-badge-green.flavor-chip { background: var(--card-tint-green); }
.icon-badge-ink.flavor-chip   { background: #EFF1F4; }
.icon-badge.flavor-chip i { font-size: 20px; width: 20px; height: 20px; }

.icon-badge.flavor-line::before { content: none; }
.icon-badge.flavor-line {
  width: 34px; height: 34px; margin-bottom: 16px; justify-content: flex-start;
}
.icon-badge.flavor-line i { font-size: 30px; width: 30px; height: 30px; }

.icon-badge.flavor-line-chip::before { content: none; }
.icon-badge.flavor-line-chip {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--card-tint-blue); margin-bottom: 16px;
}
.icon-badge-rust.flavor-line-chip  { background: var(--card-tint-rust); }
.icon-badge-green.flavor-line-chip { background: var(--card-tint-green); }
.icon-badge-ink.flavor-line-chip   { background: #EFF1F4; }
.icon-badge.flavor-line-chip i { font-size: 22px; width: 22px; height: 22px; }

/* An xs badge in a checklist never takes a chip or a line treatment —
   at 19px there is no room for a container. */
.checklist-item .icon-badge.flavor-chip,
.checklist-item .icon-badge.flavor-line,
.checklist-item .icon-badge.flavor-line-chip { background: none; width: 19px; height: 19px; }

/* =================================================================
   GUIDES  (0.60.0)

   The Resources knowledge-base article layout. Three departures from
   the marketing-page treatment, each deliberate:

     .guide-wrap        720px, not 1120px — sustained prose, not grids
     h3 is real         guides have two-level structure; nothing else
                        in this theme authors an H3
     core/list styled   single column, so no even-count constraint

   Everything here is scoped to .guide-wrap or body.guide-single so no
   published page changes. In particular the core/list styles below are
   the first styling core/list has ever had in this theme, and they
   must stay scoped — the four content stubs and api-data-exchange
   (14673) still hold raw core/list blocks that render at browser
   defaults, and they should keep doing so until they are converted
   deliberately rather than being restyled by accident.
   ================================================================= */

.guide-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.guide-main { padding-bottom: 0; }

/* The meta line under the hero: topic, reading time, reviewed date. */
.guide-meta-wrap { padding-top: 28px; }
.guide-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  font-size: 13px; color: var(--slate-light); margin: 0 0 4px;
}
.guide-meta-topic {
  color: var(--accent); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px;
}

.guide-body { padding-top: 8px; padding-bottom: var(--section-y); }

/* -----------------------------------------------------------------
   Headings. H2 opens a framework section and takes a drawn rule; H3
   is a subsection inside one and takes none. Two devices, two jobs —
   the same split the bands and the pencil rule make on Solution
   pages, one level further down.
   ----------------------------------------------------------------- */
.guide-body h2.wp-block-heading {
  font-size: 26px; line-height: 1.25; margin-top: 52px; padding-top: 30px;
  position: relative; scroll-margin-top: 96px;
}
.guide-body > h2.wp-block-heading:first-child { margin-top: 8px; padding-top: 0; }
.guide-body h2.wp-block-heading::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 64px; height: var(--rule-h);
  background-image: var(--rule-4-blue);
  background-repeat: no-repeat; background-size: 100% 100%;
}
.guide-body > h2.wp-block-heading:first-child::before { content: none; }
.guide-body h3 {
  font-size: 18px; line-height: 1.35; margin-top: 32px; margin-bottom: 6px;
  color: var(--ink);
}
.guide-body p { max-width: none; }

/* -----------------------------------------------------------------
   Lists. Single column, so item counts do not matter — which is the
   entire reason guides do not use .checklist.

   Markers are drawn in CSS rather than set as icon-font glyphs,
   because core/list renders bare <li> elements and there is no block
   render pass to inject an <i> into. A CSS-drawn check and two plain
   text characters need no font to be loaded and cannot silently
   render as a blank box if an FA weight is ever dropped from the
   enqueue list.
   ----------------------------------------------------------------- */
.guide-wrap ul, .guide-wrap ol { margin: 18px 0; padding: 0; list-style: none; }
.guide-wrap li {
  position: relative; padding-left: 34px; margin-bottom: 12px;
  font-size: 16px; line-height: 1.6; color: var(--ink);
}
.guide-wrap li:last-child { margin-bottom: 0; }

/* Default marker: a drawn tick in brand green. Applied to every ul in
   a guide, not only to .is-style-guide-list, so a list an editor
   forgot to style still renders as a list rather than as unmarked
   indented text. The named style exists to be selectable in the
   editor and to say out loud which treatment is intended. */
.guide-wrap ul li::before {
  content: ""; position: absolute; left: 4px; top: 6px;
  width: 6px; height: 11px;
  border-right: 2px solid var(--green-text);
  border-bottom: 2px solid var(--green-text);
  transform: rotate(42deg);
}

/* Caution: mistakes and red flags. Rust, because rust is this
   palette's categorical warning and there is no red. */
.guide-wrap ul.is-style-guide-caution li::before,
.guide-wrap ul.is-style-guide-questions li::before {
  position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  /* The default tick is drawn from two borders and a rotation, so
     both have to be unwound here or the glyph inherits them and sits
     at 42 degrees inside its circle. */
  border: 0; transform: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.guide-wrap ul.is-style-guide-caution li::before {
  content: "!"; background: var(--card-tint-rust); color: var(--rust);
}
.guide-wrap ul.is-style-guide-questions li::before {
  content: "?"; background: var(--card-tint-blue); color: var(--accent);
}

/* Numbered steps: the journey sequences, which run to eight and so
   cannot go in a .flow-chain — ten wraps, and eight is already past
   what a chevron ribbon reads well at. */
.guide-wrap ol { counter-reset: guide-step; }
.guide-wrap ol li { counter-increment: guide-step; padding-left: 40px; }
.guide-wrap ol li::before {
  content: counter(guide-step);
  position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--card-tint-blue); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; line-height: 1;
}

/* -----------------------------------------------------------------
   The tail. Product fit and FAQ break full width against the narrow
   body — that contrast is the point of the layout, so the padding
   here is deliberately looser than a band on a marketing page.
   ----------------------------------------------------------------- */
.guide-single .band.guide-band > .guide-wrap {
  padding-top: var(--section-y); padding-bottom: var(--section-y);
}
.guide-single .band.guide-band h2 { margin-top: 0; padding-top: 0; }
.guide-single .band.guide-band h2::before { content: none; }

/* -----------------------------------------------------------------
   The rail. Same markup, same labels, same three-item minimum as the
   banded pages — but positioned against a 720px column rather than a
   1056px one, so the left offset and the reserved padding both differ
   from the .content-wrap-wide case and cannot share its rule.

   As on banded pages, the wrap is widened by exactly what the rail
   takes so the reading measure stays 720px either way. Anything that
   narrows it instead would reflow the whole column.
   ----------------------------------------------------------------- */
@media (min-width: 1400px) {
  .guide-single.has-rail main#main-content { position: relative; }
  .guide-single.has-rail .rail-col {
    left: max(24px, calc(50% - 469px));
  }
  .guide-single.has-rail main#main-content .guide-wrap {
    max-width: calc(720px + var(--rail-w) + 32px);
    padding-left: calc(var(--rail-w) + 64px);
  }
}

/* -----------------------------------------------------------------
   The hub: topic filter, then the card grid.

   The pill treatment duplicates .glossary-cat rather than sharing it.
   Extracting a common chip would mean editing the glossary's markup
   and CSS — a working page with its own filter script — to save eight
   declarations. Not worth the risk. If a third consumer ever appears,
   extract it then.

   The filter row itself is suppressed below eight guides and below two
   topics in use (see launcher2026_render_guides_index()), so it does
   not exist at all on a hub with five.
   ----------------------------------------------------------------- */
.guide-filter { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 22px; }
/* Pill appearance now lives with .glossary-cat — see the extraction note there. */
.guide-filter-empty { color: var(--slate); margin: 0 0 var(--section-y); }

/* -----------------------------------------------------------------
   The hub grid.
   ----------------------------------------------------------------- */
.guide-card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; margin: 32px 0 var(--section-y);
}
.guide-card { display: flex; flex-direction: column; }
.guide-card h3 { margin: 10px 0 6px; font-size: 19px; line-height: 1.3; }
.guide-card p { flex: 1 1 auto; }
.guide-card-meta {
  font-size: 12px; color: var(--slate-light);
  letter-spacing: 0.04em; margin-top: 10px;
}

@media (max-width: 720px) {
  .guide-body h2.wp-block-heading { font-size: 22px; margin-top: 40px; }
}

/* =================================================================
   CASE STUDIES  (0.61.0)

   The dossier layout. Where a guide is a narrow uninterrupted read,
   a case study is a short narrative with a card of facts pinned
   beside it — because the reader's first question is "is this lender
   like me", and they answer it before the first paragraph.

   Everything here is scoped to .cs-* or body.case-study-single, so no
   published page changes. In particular the core/list rules below are
   scoped to the glance card: the four content stubs and
   api-data-exchange (14673) still hold raw core/list blocks and must
   keep rendering at browser defaults until they are converted
   deliberately, exactly as the guide list styles are scoped.

   No rail. Three H2s, the same three on every study — the rail's own
   three-chapter minimum exists to prevent precisely this.
   ================================================================= */

.cs-main { padding-bottom: 0; }

/* The measure is 656px against a 320px card, inside a 1064px wrap.
   As with the rail on banded pages and on guides, the column is sized
   first and the wrap widened to hold the card — the reading measure
   is the fixed quantity, not the leftover. */
.cs-layout {
  max-width: 1064px; margin: 0 auto; padding: 0 32px var(--section-y);
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px; align-items: start;
}
/* A study with no profile, technology or solutions renders no card at
   all rather than an empty one, and the column recentres at the
   ordinary prose measure instead of sitting off to one side. */
.cs-layout-solo { grid-template-columns: minmax(0, 1fr); max-width: 780px; }

.cs-body { min-width: 0; }
.cs-body > *:first-child { margin-top: 0; }

/* Headings match the guide treatment rather than the marketing-page
   one: a 64px drawn rule at the section head, not the full-width rule
   .content-wrap-wide draws. A full-width drawn rule flattens into a
   straight line over a long run, which is the same reason
   is-style-statement exists. The first H2 takes none — it sits
   directly under the hero's own boundary rule. */
.cs-body h2.wp-block-heading {
  font-size: 26px; line-height: 1.25; margin-top: 52px; padding-top: 30px;
  position: relative; scroll-margin-top: 96px;
}
.cs-body > h2.wp-block-heading:first-child { margin-top: 8px; padding-top: 0; }
.cs-body h2.wp-block-heading::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 64px; height: var(--rule-h);
  background-image: var(--rule-4-blue);
  background-repeat: no-repeat; background-size: 100% 100%;
}
.cs-body > h2.wp-block-heading:first-child::before { content: none; }
.cs-body p { margin-bottom: 16px; color: var(--ink); max-width: none; }

/* -----------------------------------------------------------------
   The At a glance card.

   Soft, not tinted: a tinted card directly under a tinted hero is two
   washes of the same colour, the collision the banded card rules
   already solve by moving the accent rather than deleting it. Here
   the accent moves into the header strip.
   ----------------------------------------------------------------- */
.cs-glance {
  position: sticky; top: 28px;
  background: var(--surface); border-radius: 12px;
  box-shadow: 0 2px 14px rgba(26, 32, 44, 0.09);
  overflow: hidden;
}
.cs-glance-head {
  background: var(--card-tint-blue);
  border-bottom: 1px solid #E4EDF5;
  padding: 15px 22px 14px;
}
.cs-glance-kicker {
  font-family: 'Lato', sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
}
.cs-glance-sec { padding: 18px 22px; }
.cs-glance-sec + .cs-glance-sec { border-top: 1px solid var(--line); }

/* The card's own headings. h2 here is a label on a sidebar, not a
   section of the document — sized down so it never competes with the
   narrative's H2s, and never carrying the drawn rule. */
.cs-glance h2, .cs-glance h2.wp-block-heading {
  font-size: 13px; line-height: 1.3; margin: 0 0 10px;
  padding-top: 0; color: var(--ink); letter-spacing: 0;
}
.cs-glance h2.wp-block-heading::before { content: none; }
.cs-profile { font-size: 15.5px; line-height: 1.58; color: var(--slate); margin: 0; }

/* core/list inside the card, single column, no even-count constraint —
   the whole reason technology and solutions are not .checklist. Six
   and seven items are normal here, and five is normal for solutions;
   merging "Carleton Origination" into "Wolters Kluwer" to make a
   count even would be a content edit wearing a layout fix's clothes. */
.cs-glance ul, .cs-glance ol { margin: 0; padding: 0; list-style: none; }
.cs-glance li {
  position: relative; padding: 5px 0 5px 22px;
  font-size: 15px; line-height: 1.5; color: var(--ink);
}
.cs-glance li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent); opacity: 0.55;
}
.cs-glance-sol li::before { background: var(--green); opacity: 0.9; }
.cs-glance-sol a { color: var(--accent-dark); text-decoration: none; border-bottom: 1px solid rgba(1, 119, 181, 0.3); }
.cs-glance-sol a:hover { border-bottom-color: var(--accent-dark); }

.cs-glance-foot { padding: 16px 22px 20px; border-top: 1px solid var(--line); background: #FBFCFD; }
/* Not .btn-ghost — that one is white-on-dark, for hero bands. */
.cs-glance-btn {
  display: inline-block; font-family: 'Poppins', sans-serif;
  font-size: 13.5px; font-weight: 500; color: var(--accent-dark);
  text-decoration: none; border: 1.5px solid var(--accent);
  border-radius: 6px; padding: 9px 16px;
  transition: background 0.12s ease, color 0.12s ease;
}
.cs-glance-btn:hover { background: var(--accent); color: #fff; }

/* -----------------------------------------------------------------
   The tail. "More case studies" is template markup outside the band
   pass, so it takes the band classes directly — the same treatment
   related products takes on a banded Solution page.
   ----------------------------------------------------------------- */
.case-study-single .cs-more-band { padding: var(--section-y) 0; }
.case-study-single .cs-more-band h2 { font-size: 22px; margin: 0 0 22px; padding-top: 0; }
.case-study-single .cs-more-band h2::before { content: none; }

/* -----------------------------------------------------------------
   The hub grid. Cards, matching Guides, Products, Solutions and the
   glossary. The caption is the customer profile rather than a reading
   time: every case study is a three-minute read, so printing that on
   all of them says nothing, while the profile is the thing being
   scanned for.
   ----------------------------------------------------------------- */
.cs-filter { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 22px; }
.cs-filter-empty { color: var(--slate); margin: 0 0 var(--section-y); }

.case-study-card-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; margin: 32px 0 var(--section-y);
}
.cs-more-band .case-study-card-grid { margin: 0; }
.case-study-card { display: flex; flex-direction: column; }
.case-study-card h3 { margin: 10px 0 6px; font-size: 19px; line-height: 1.3; }
.case-study-card p { flex: 1 1 auto; }
.case-study-card-meta {
  font-size: 12px; color: var(--slate-light);
  line-height: 1.45; margin-top: 10px;
}

/* -----------------------------------------------------------------
   Below the two-column breakpoint the card drops BELOW the narrative,
   not above it. The standfirst already carries the profile, so
   leading a phone screen with a metadata block pushes the story past
   a second fold to say something the reader has just read.
   ----------------------------------------------------------------- */
@media (max-width: 1000px) {
  .cs-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0; max-width: 780px; padding-inline: 24px;
  }
  .cs-glance { position: static; margin-top: 40px; }
}
@media (max-width: 720px) {
  .cs-body h2.wp-block-heading { font-size: 22px; margin-top: 40px; }
}

/* ---------------------------------------------------------------------
   Job postings (0.62.0)
   A row list, not a card grid. Cards are for browsing a library; a
   careers list is scanned for a title and a location and then clicked.
   At one to ten roles a grid also looks sparse at the low end, which a
   row list does not.
   --------------------------------------------------------------------- */
.job-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.job-row {
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.job-row-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 20px 20px 20px 18px;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.job-row-link:hover,
.job-row-link:focus-visible {
  background: var(--bg);
  border-left-color: var(--accent);
}
.job-row-rust .job-row-link:hover,
.job-row-rust .job-row-link:focus-visible { border-left-color: var(--rust); }
.job-row-green .job-row-link:hover,
.job-row-green .job-row-link:focus-visible { border-left-color: var(--green); }

.job-row-title {
  font-family: var(--font-head, inherit);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  flex: 1 1 320px;
}
.job-row-link:hover .job-row-title { color: var(--accent); }
.job-row-facts {
  color: var(--slate);
  font-size: 0.95rem;
}
.job-row-closed {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-light);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
}

.job-wrap { max-width: 720px; }
.job-closed-notice {
  background: var(--card-ink, #F1F3F5);
  border-left: 3px solid var(--slate-light);
  padding: 12px 16px;
  color: var(--slate);
}
.job-apply {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.job-back { margin-top: 32px; }

/* ---------------------------------------------------------------------
   Contact (0.63.0)
   Routing sections on the left, the form on the right. Replaces the
   original scaffolding's inline styles. Collapses to one column below
   900px, form first — on a phone the form is what the visitor came for
   and the routing copy is context they can read after.
   --------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .contact-form-col { order: -1; }
}
.contact-routes > h2 { margin-top: 32px; }
.contact-routes > h2:first-child { margin-top: 0; }

.contact-details {
  list-style: none;
  margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}
.contact-details li { margin-bottom: 10px; }
.contact-details .contact-city { color: var(--slate-light); }

.contact-form-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px;
}
/* The embed brings its own field styling; keep the container from
   fighting it and only normalise the outer spacing. */
.contact-form-col > *:first-child { margin-top: 0; }
.contact-form-col > *:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Front page in the banded palette (0.64.0)
   The homepage now carries body.has-bands, so it inherits the band
   tints, the stood-down horizontal rules and the deep CTA treatment
   already used on Solution pages. These rules only reconcile the two
   homepage components that predate the band system.
   --------------------------------------------------------------------- */

/* .solutions-wrap supplied its own tinted background and inner padding
   before it sat inside a .band. The band now owns the fill, so the
   wrapper contributes layout only — otherwise the tint paints twice
   and the section reads a step darker than the rotation intends. */
.has-bands .band .solutions-inner {
  background: none;
  padding: 0;
  max-width: none;
}

/* The partner strip sits between a plain band and the deep CTA. Keeping
   it on the surface colour lets the logos read as their own register
   rather than as a fourth tinted band, and removes the rule that used
   to separate it from the hero. */
.has-bands .partner-trust-strip { border-top: 0; border-bottom: 0; }

/* Section heads inside a band already get the band's own padding. */
.has-bands .band > .content-wrap > .section-head:first-child { margin-top: 0; }

/* ---------------------------------------------------------------------
   Front page, corrections (0.64.1)
   --------------------------------------------------------------------- */

/* 0.64.0 wrapped the homepage sections in .content-wrap-wide, which
   brought the section-divider rule with it: any authored section-head
   h2 is a .wp-block-heading, so it drew a pencil rule immediately under
   the hero. The PHP fallback headings are plain <h2> and never did,
   which is why it only appeared on the sections that had been authored
   — the sections we most want people to author. Suppressed here rather
   than by adding is-style-default in content, so it cannot come back
   when someone edits the heading in wp-admin. */
/* Scoped to .section-head in 0.64.1, which was too narrow: the authored
   sections added in 0.65.0 put their h2 directly in the band, outside
   any .section-head, so the rule came straight back on exactly the new
   content. Every homepage h2 sits at the top of its own band and never
   needs a divider above it, so the suppression covers the band. */
.home .band h2.wp-block-heading::before { content: none; }
.home .band h2.wp-block-heading { margin-top: 0; padding-top: 0; }

/* The strip took --band-green from 0.64.1 to 0.93.0, because the
   newsroom band directly above it was surface white and the two ran
   together with no boundary once the dividing rules were stood down.
   0.93.0 moved the newsroom below the trust section, where the
   rotation lands it on band-rust — so the green strip put two tints
   against each other, which is the one thing the rotation exists to
   prevent. Surface again, which is what every other template already
   gives it.

   This is the seam the front page has no guard for.
   launcher2026_layout_avoid_tail_collision() only runs on the
   chaptered pass; here the tail tone is a CSS fact and the band above
   it is computed, so the two have to be checked by hand whenever a
   homepage section is added, removed or moved. Read the fills in DOM
   order and look for adjacent duplicates — that audit is what found
   the seven collisions in 0.69.0. */
body.home .partner-trust-strip { background: var(--surface); }

/* --- The credential rail, 0.93.0 -----------------------------------
   Four short facts on a rule directly under the hero, outside <main>,
   because it is the base of the hero rather than a band of its own.

   Navy, and it is the site's only navy fill (0.93.2). The brand rule
   is that navy is text and linework only, and this rail is the single
   signed-off exception rather than the rule loosening: 0.93.0 shipped
   it on --accent-dark and the result read as more hero, because a
   darker blue under a blue hero is a shade, not a boundary. Navy is
   what makes it a different object.

   band-deep was the other candidate and is not available: it is one
   per page at most and the closing CTA already spends it.

   Authored-only — front-page.php renders nothing here without a
   home-credentials group, deliberately. Everything in this rail is a
   claim about the company, and a claim that lives in a template is a
   claim no page carries and nobody reviews.

   Shape contract: the group holds one core/group per cell, each with a
   heading (the figure) and a paragraph (the label). Nothing breaks
   with three or five — the track count is auto-fit.
   ------------------------------------------------------------------ */
.home-credentials-rail { background: var(--ink); padding: 34px 0; }
/* .content-wrap carries `padding: var(--section-y) 0` globally, which is a
   band's rhythm and not a rail's — 56px top and bottom around 47px of
   content made the rail 203px tall, more than twice what it holds. The
   rail owns its own vertical padding; the wrap contributes the measure
   only. Anything else reusing .content-wrap outside a band has the same
   trap waiting for it. */
.home-credentials-rail > .content-wrap { padding-top: 0; padding-bottom: 0; }
.home-credentials-rail .wp-block-group.home-credentials > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px 30px;
}
.home-credentials-rail .wp-block-group.home-credentials > .wp-block-group__inner-container > .wp-block-group {
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.home-credentials-rail .wp-block-group.home-credentials > .wp-block-group__inner-container > .wp-block-group:first-child {
  padding-left: 0;
  border-left: 0;
}
.home-credentials-rail h2,
.home-credentials-rail h3,
.home-credentials-rail h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 5px;
}
/* The figures carry the accent rotation, lightened for a dark ground.
   This is the only place on the site where the three accents appear at
   once at display size, and it is what makes the rail read as a
   statement rather than as a caption strip. A fourth cell takes white
   rather than repeating blue — the rotation has three colours and
   pretending otherwise would put the same one at both ends of the row.
   #CDE6A4 is the green the deep band already uses on-dark, so the two
   dark surfaces on the page agree. */
.home-credentials-rail .wp-block-group__inner-container > .wp-block-group:nth-child(4n+1) :is(h2, h3, h4) { color: #7CC3E8; }
.home-credentials-rail .wp-block-group__inner-container > .wp-block-group:nth-child(4n+2) :is(h2, h3, h4) { color: #E8A177; }
.home-credentials-rail .wp-block-group__inner-container > .wp-block-group:nth-child(4n+3) :is(h2, h3, h4) { color: #CDE6A4; }
/* The divider rule is suppressed on .home .band headings, and this
   rail is not a band — so it needs its own suppression or a pencil
   line is drawn across the dark blue. */
.home-credentials-rail h2:not(.has-launcher-mark)::before,
.home-credentials-rail h3:not(.has-launcher-mark)::before,
.home-credentials-rail h4:not(.has-launcher-mark)::before { content: none; }
.home-credentials-rail p {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  color: #9FB3C6;
}
/* A figure may be a link — "Under 60 days" points at Turnkey, which is
   the page that carries the claim. It must keep its accent colour, so
   the anchor inherits rather than taking the rail's link colour, and
   the underline is what says it is clickable. Ordinary links in a
   label still take white. */
.home-credentials-rail :is(h2, h3, h4) a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
}
.home-credentials-rail :is(h2, h3, h4) a:hover { text-decoration-color: currentColor; }
.home-credentials-rail p a { color: #fff; }

/* One column is what auto-fit gives below ~440px — a 190px track cannot
   fit twice in a 311px column — and four stacked cells made the rail
   343px on a 390px phone: very nearly a full screen of navy before the
   first section. Two columns halves it. The figures step down with the
   track, and the divider moves to the even cell so each row still has
   exactly one internal rule. Same lesson as .seq-item (0.82.0): a
   component whose narrow behaviour is whatever auto-fit happens to do
   has not been designed for narrow, it has been left there. */
@media (max-width: 700px) {
  .home-credentials-rail { padding: 26px 0; }
  .home-credentials-rail .wp-block-group.home-credentials > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 18px;
  }
  .home-credentials-rail .wp-block-group.home-credentials > .wp-block-group__inner-container > .wp-block-group {
    padding-left: 0;
    border-left: 0;
  }
  .home-credentials-rail .wp-block-group.home-credentials > .wp-block-group__inner-container > .wp-block-group:nth-child(even) {
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
  /* Two-up cells are 142px at 390px and 127px at 360px. At 23px the
     longest figures do not fit: "Under 60 days" wrapped to two lines,
     and the 0.101.0 chevron lockup pushed "appTRAKER" onto a second
     line of its own. Scale the figure with the cell instead of picking
     a fixed size - min() caps it at the design size once there is room,
     and nowrap makes the guarantee explicit rather than incidental.
     4.7vw keeps the widest string ("Under 60 days", 7.32px per font-px)
     inside the cell from 320px up. */
  .home-credentials-rail :is(h2, h3, h4) { font-size: min(23px, 4.7vw); white-space: nowrap; }
  .home-credentials-rail p { font-size: 10.5px; letter-spacing: 0.08em; }
}

/* --- What you finance: the pill field, 0.93.0 ----------------------
   Eleven lending lines, all of them, in the height four cards used to
   take. Not a grid: eleven items leave a hole in a four-track grid and
   in a three-track one, and the count is content — it changes the day
   a twelfth page publishes. A pill sizes to its own label and wraps,
   so there is no arithmetic to keep in step with the content at all.

   The fills are the ribbon segment scale, not the card washes. This
   section lands on a tinted band, and the segment scale is the one
   mixed a step stronger for exactly that — the card washes would
   repeat the 0.92.1 defect, a tint applied, correct and invisible.
   ------------------------------------------------------------------ */
.home-pill-field { display: flex; flex-wrap: wrap; gap: 12px; }
.home-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--flow-seg-blue);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.home-pill-rust  { background: var(--flow-seg-rust); }
.home-pill-green { background: var(--flow-seg-green); }
.home-pill-ink   { background: #E1E5EA; }
.home-pill:hover { transform: translateY(-2px); border-color: var(--accent); }
.home-pill:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
/* .icon-badge-sm is 48px — a card size. A pill needs the badge at
   label height, and the badge keeps its own ring colour, which is what
   makes the field read as three colours rather than one. */
/* No background on the badge. The drawn ring is a background-image
   SVG on a square box, so any fill here paints the square and not the
   ring — it shipped in 0.93.0 as a pale white tile behind every glyph,
   which read as a rendering fault rather than as a highlight. A
   border-radius would not fix it either: the ring is hand-drawn and
   does not sit on a true circle. Transparent, and the pill's own tint
   is the ground. */
.home-pill .icon-badge {
  width: 32px; height: 32px; margin-bottom: 0; flex: none;
  background: none;
}
.home-pill .icon-badge i { font-size: 14px; width: 14px; height: 14px; }
.home-pill-label { min-width: 0; }

/* A pill is a desktop measure. "Commercial Equipment & Trucks" is
   28 characters and does not fit a 307px column on one line, and a
   999px radius around two wrapped lines reads as a mistake rather
   than as a shape. Below 700px the field becomes a stack of full-width
   rounded rows — a real narrow design, not the same component with a
   smaller gap. This is the .seq-item lesson (0.82.0): a component
   whose only breakpoint is the 900px tablet step has not been made
   responsive, it has been left at the tablet layout. */
@media (max-width: 700px) {
  .home-pill-field { gap: 8px; }
  .home-pill { width: 100%; border-radius: 12px; padding: 9px 14px 9px 9px; }
}

/* --- The statement band, 0.93.0 ------------------------------------
   One deep-blue sentence where the eight product cards were. Prose is
   the only shape with real mileage on band-deep, which is exactly what
   this slot is for — anything else authored in here is unexercised and
   wants looking at.

   Measured rather than full width: a single sentence set across
   1056px reads as a banner, not as a statement. */
.home .home-platform-band .wp-block-group__inner-container,
.home .home-platform-band > .content-wrap > * { max-width: 720px; }

/* ---------------------------------------------------------------------
   Front page, optional authored sections (0.65.0)
   home-proof / home-implementation / home-trust. Ordinary block content
   in a band, so most of the styling is inherited. These rules only give
   the sections a section-head rhythm matching the query-driven bands
   above them.
   --------------------------------------------------------------------- */
.home .home-proof-band h2,
.home .home-implementation-band h2,
.home .home-trust-band h2 { margin-top: 0; }

.home .home-proof-band .checklist,
.home .home-implementation-band .checklist,
.home .home-trust-band .checklist { margin-top: 24px; }

/* The proof section uses the existing icon-feature card grid rather
   than a bespoke one — the same linked, tinted cards used on Solution
   and Product pages, so it needs no layout rules of its own. A custom
   .proof-grid shipped in 0.65.0 and was removed here: a group renders
   its children inside .wp-block-group__inner-container, so a grid on
   the outer element sees one child and lays out nothing. */

/* ---------------------------------------------------------------------
   Section "see all" links (0.66.0)
   The homepage grids show a curated eight; these carry the real totals
   into the hubs. Same visual weight as the partner strip's "See more",
   which is the pattern already on the page.
   --------------------------------------------------------------------- */
/* Widened off `.home` in 0.86.0. The homepage grew this as the "and there
   are more of these" link under a grid it had truncated; a Lender page wants
   exactly the same affordance under its "What you finance" and "Built on the
   appTRAKER platform" card rows, pointing at the matching hub. The
   declarations are unchanged, so the homepage renders identically — only the
   selector got broader. */
.section-more { margin: 28px 0 0; }
/* The hub outro sits below the list it offers an alternative to, so it
   needs real space above rather than the tight 28px a section-more takes
   when it hangs under a grid. */
.hub-outro-wrap { padding-bottom: var(--section-y); }
.hub-outro-wrap .section-more { margin-top: 0; }
.section-more a {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 8px 4px;
  white-space: nowrap;
}
.section-more a:hover,
.section-more a:focus-visible { text-decoration: underline; }

/* On a deep band the accent blue is the band's own fill, so the link would
   disappear into it. */
.band-deep .section-more a { color: #fff; }

/* ---------------------------------------------------------------------
   Banded pages: no rule between the hero and the first band (0.67.1)
   The tail-treatment block already stands down every other horizontal
   rule on a banded page — section.block, both partner-strip rules, the
   CTA and the footer — but not the hero's own bottom edge. So the one
   remaining rule on those pages sat at the most visible boundary of
   all, directly under the h1.

   Solution pages never showed it because .page-hero-solution has no
   ::after; Product and Platform pages, and every generic-template page
   (Trust, About, Careers, Contact, the hubs), did. The first band edge
   already separates hero from content, so the rule is redundant there.
   Non-banded pages keep it — search, the media archive and the case
   study archive still need the separation.
   --------------------------------------------------------------------- */
.has-bands .page-hero-product::after,
.has-bands .page-hero-generic::after { content: none; }

.has-bands .page-hero-product,
.has-bands .page-hero-generic,
.has-bands .page-hero-platform { border-bottom: 0; }

/* ---------------------------------------------------------------------
   Section rail: breathing room under the hero (0.67.1)
   .rail-col is absolutely positioned against main#main-content with
   top: 0, so "ON THIS PAGE" began at exactly the pixel the hero ended —
   the rail read as part of the hero rather than as navigation for the
   content beside it. The padding sits on the column, not the sticky
   element, so the sticky offset is unaffected once scrolling starts.
   --------------------------------------------------------------------- */
@media (min-width: 1400px) {
  /* var(--section-y) is exactly the padding a band puts above its first
     heading, so "ON THIS PAGE" lines up with the first chapter title
     rather than floating at an arbitrary offset. One value drives both,
     so the rail stays aligned if the band rhythm is ever retuned. */
  .has-rail .rail-col { padding-top: var(--section-y); }
}

/* ---------------------------------------------------------------------
   Banded heroes take the tint (0.67.2)
   Removing the hero rule in 0.67.1 exposed a collision the rule had
   been hiding: .page-hero-product and .page-hero-generic are
   var(--surface) white and the first band is band-plain, also white,
   so hero and content merged into one slab. .page-hero-platform sat on
   var(--bg) #F7F8FA, near enough to white to do the same.

   Solution pages never showed this either — .page-hero-solution has
   been var(--band-blue) since 0.56.0, which is exactly why they read
   correctly: a tinted hero above a plain first band. The other three
   families now do the same, so every banded page opens tinted and the
   first chapter lands plain against it.

   Scoped to .has-bands. Careers, Contact, the hubs and the media
   archive are not banded, still carry their hero rule, and are
   unchanged.
   --------------------------------------------------------------------- */
.has-bands .page-hero-product,
.has-bands .page-hero-generic,
.has-bands .page-hero-platform { background: var(--band-blue); }


/* =====================================================================
   THE ORIGINATION LINE — page backdrop (0.94.0)

   One image behind the whole page: a single continuous stroke passing
   through six drawn rings, over four soft colour fields in the three
   brand accents. It is the lifecycle the platform runs — apply,
   decide, document, sign, fund, board — used as ornament.

   TWO THINGS MAKE THIS WORK, AND BOTH ARE EASY TO UNDO BY ACCIDENT.

   1. THE BANDS HAVE TO LET IT THROUGH. Every full-width surface on the
      site is opaque, so 100% of the page height is painted and a
      backdrop is invisible. The fills below are the same tones as
      rgba(). Transmission is graduated deliberately: least where body
      copy sits, most where it does not. **A new full-width surface
      added later will be opaque and will read as a gap in the image**
      — that is the maintenance cost of this feature, and it is the
      whole cost.

   2. THE BACKDROP IS LIGHT. Its base is --bg, so letting 12-18% of it
      through a white band shifts that ground by two or three points and
      contrast barely moves. The visible event is the line, not a
      darkening. Do not be tempted to darken the artwork to make it
      "show" — that is what would break the text.

   Shipped as an inline SVG data URI, not an image file: no request, no
   LCP cost, no build step, resolution-independent, and the brand hexes
   stay editable as text right here.

   Fixed to the viewport via a pseudo-element rather than
   `background-attachment: fixed`, which is the one thing iOS Safari
   reliably gets wrong. It does not move otherwise — the hero already
   carries a five-slide carousel, and 0.77.3 settled that two moving
   things in one viewport compete.
   ===================================================================== */

/* TONED DOWN IN 0.94.6. Every alpha in the SVG above is ~0.65 of what
   0.94.0 shipped, and the white surfaces went 0.82 -> 0.86 — reported as
   "a little bit of a distraction", which on a backdrop means it is
   competing with the reading rather than sitting under it. Both levers
   move the same way, so tune the artwork first: it changes the image
   everywhere at once, where a band alpha changes only that surface.
   The floor is the line still being visible on the deep band and the
   hero, which is where it does its work. */
html { background: var(--bg); }
body { background: transparent; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3CradialGradient id='w1' cx='1250' cy='60' r='940' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230177B5' stop-opacity='.19'/%3E%3Cstop offset='.55' stop-color='%230177B5' stop-opacity='.08'/%3E%3Cstop offset='1' stop-color='%230177B5' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='w2' cx='120' cy='560' r='780' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23015E90' stop-opacity='.11'/%3E%3Cstop offset='.55' stop-color='%23015E90' stop-opacity='.045'/%3E%3Cstop offset='1' stop-color='%23015E90' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='w3' cx='1460' cy='900' r='720' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2398BE50' stop-opacity='.13'/%3E%3Cstop offset='.55' stop-color='%2398BE50' stop-opacity='.05'/%3E%3Cstop offset='1' stop-color='%2398BE50' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='w4' cx='300' cy='1010' r='620' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23B54001' stop-opacity='.07'/%3E%3Cstop offset='.55' stop-color='%23B54001' stop-opacity='.025'/%3E%3Cstop offset='1' stop-color='%23B54001' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='ln' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230177B5' stop-opacity='.35'/%3E%3Cstop offset='.5' stop-color='%23015E90' stop-opacity='.29'/%3E%3Cstop offset='1' stop-color='%235C7A2E' stop-opacity='.25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='1000' fill='%23F7F8FA'/%3E%3Crect width='1600' height='1000' fill='url(%23w1)'/%3E%3Crect width='1600' height='1000' fill='url(%23w2)'/%3E%3Crect width='1600' height='1000' fill='url(%23w3)'/%3E%3Crect width='1600' height='1000' fill='url(%23w4)'/%3E%3Cpath d='M-180 60C-60 70 60 95 180 130C300 165 380 210 460 255C560 310 640 360 690 440C740 520 700 560 640 600C580 640 700 700 1000 720C1300 740 1360 860 1560 960C1650 1005 1720 1030 1790 1060' fill='none' stroke='%230177B5' stroke-opacity='.045' stroke-width='48' stroke-linecap='round'/%3E%3Cpath d='M-180 60C-60 70 60 95 180 130C300 165 380 210 460 255C560 310 640 360 690 440C740 520 700 560 640 600C580 640 700 700 1000 720C1300 740 1360 860 1560 960C1650 1005 1720 1030 1790 1060' fill='none' stroke='url(%23ln)' stroke-width='6' stroke-linecap='round'/%3E%3Cg fill='none' stroke='%230177B5' stroke-opacity='.27' stroke-width='3.5'%3E%3Ccircle cx='180' cy='130' r='34'/%3E%3Ccircle cx='460' cy='255' r='34'/%3E%3Ccircle cx='690' cy='440' r='34'/%3E%3Ccircle cx='640' cy='600' r='34'/%3E%3Ccircle cx='1000' cy='720' r='34'/%3E%3Ccircle cx='1560' cy='960' r='34'/%3E%3C/g%3E%3Cg fill='%23015E90' fill-opacity='.19'%3E%3Ccircle cx='180' cy='130' r='11'/%3E%3Ccircle cx='460' cy='255' r='11'/%3E%3Ccircle cx='690' cy='440' r='11'/%3E%3Ccircle cx='640' cy='600' r='11'/%3E%3Ccircle cx='1000' cy='720' r='11'/%3E%3Ccircle cx='1560' cy='960' r='11'/%3E%3C/g%3E%3C/svg%3E") center center / cover no-repeat;
}

/* Below 900px the artwork is cropped hard by `cover` — 1600 units of
   drawing into a ~390px viewport shows roughly the middle third. Bias
   the frame right so what survives is the run of rings rather than the
   empty left approach. */
@media (max-width: 900px) {
  body::before { background-position: 64% center; }
}

/* A fixed decorative layer has no business on paper, and forced-colours
   mode is asking for the page without it. A due-diligence reviewer
   printing the Trust pages is a real user here. */
@media print { body::before { display: none; } }
@media (forced-colors: active) { body::before { display: none; } }

/* --- The surfaces, as rgba ------------------------------------------
   Same tones, same order as the opaque rules above. Appended at the end
   of the file so they win on source order at equal specificity —
   including `body.home .partner-trust-strip`, which is restated here
   for exactly that reason. */
.has-bands .band.band-plain { background: rgba(255, 255, 255, 0.86); }
.has-bands .band.band-blue  { background: rgba(239, 246, 251, 0.88); }
.has-bands .band.band-green { background: rgba(244, 249, 234, 0.88); }
.has-bands .band.band-rust  { background: rgba(251, 243, 238, 0.88); }
.has-bands .band.band-deep  { background: rgba(1, 119, 181, 0.84); }

/* THE HOMEPAGE HERO IS THE ONLY SATURATED-BLUE HERO ON THE SITE, and
   0.94.0 forgot it. `.page-hero-solution` was declared twice — saturated
   at line 1067 and then overridden to --band-blue at 3457, which is the
   0.56.0 decision that a blue header above a blue hero reads as one
   continuous slab. Solution and Lender heroes have carried ink headings
   and slate lead copy ever since. Appending an accent fill at the end of
   the file beat that override and left dark text on saturated blue on
   every Solution and Lender page — unreadable, and invisible from the
   homepage, which is the one page that does not use this class.
   **A rule appended at the end of a 4,700-line stylesheet wins against
   every earlier decision, including the ones that were themselves
   corrections.** Grep for a second declaration before adding a third.

   The homepage hero transmits least of the blue surfaces: at 0.89 it
   renders about rgb(23,131,187) against the brand's rgb(1,119,181) —
   lighter, unmistakably the same blue, and still enough for the line to
   read across it. Below about 0.85 it stops looking like #0177B5 and
   starts looking like a photograph of #0177B5. */
.hero-wrap,
.slide-collection-hero { background: rgba(1, 119, 181, 0.89); }

/* Solution and Lender heroes are the light tint, with ink headings.
   Same value as the tinted heroes below, because they are the same
   kind of surface. */
.page-hero-solution,
.page-hero-lender { background: rgba(239, 246, 251, 0.88); }

.has-bands .page-hero-product,
.has-bands .page-hero-generic,
.has-bands .page-hero-platform { background: rgba(239, 246, 251, 0.88); }

/* The rail is the page's darkest object and has to stay one. At 0.93
   the backdrop reads as depth behind it; below about 0.88 it stops
   being solid and starts being a filter. */
.home-credentials-rail { background: rgba(26, 32, 44, 0.93); }

.has-bands .cta-band { background: rgba(1, 119, 181, 0.84); }

.has-bands .partner-trust-strip,
body.home .partner-trust-strip { background: rgba(255, 255, 255, 0.86); }

footer.site-footer { background: rgba(247, 248, 250, 0.88); }


/* --- Backdrop, the surfaces the first pass missed (0.94.3) ----------
   Audited by loading six page families in an iframe and listing every
   full-width block whose computed background is fully opaque. 0.94.0
   converted the banded surfaces and left every UNBANDED one behind, so
   the image broke into panels the moment you left a Solution page:
   the hub heroes, the hub `main`, the Platform `main`, the plain CTA,
   the partner strip's own default and the appears-on card sections.

   Nothing here is a new decision — same tones, same three alphas as
   above: white 0.82, tint 0.88, accent 0.84. This is the maintenance
   cost the block above warns about, arriving one release later, and
   the audit is the cheap part: **list the opaque full-width blocks,
   do not look for gaps by eye.** A panel boundary in a pale image is
   exactly the thing an eye reads past.

   TWO SURFACES STAY OPAQUE ON PURPOSE. `.site-header` is chrome, not
   page — it is the bar the panels hang from, and 0.91.3 spent a
   release getting its bottom edge to read against arbitrary content.
   The staging banner in inc/environment.php is a warning; a warning
   you can see through is a worse warning.
   ------------------------------------------------------------------ */
.page-hero-product,
.page-hero-generic { background: rgba(255, 255, 255, 0.86); }
.page-hero-platform { background: rgba(247, 248, 250, 0.82); }

.hub-page .page-hero-generic { background: rgba(239, 246, 251, 0.88); }
.hub-page main#main-content { background: rgba(255, 255, 255, 0.86); }
.hub-page .cta-band { background: rgba(1, 119, 181, 0.84); }

body.page-template-template-platform main { background: rgba(255, 255, 255, 0.82); }

.cta-band { background: rgba(255, 255, 255, 0.86); }
.partner-trust-strip { background: rgba(247, 248, 250, 0.86); }

.has-bands main#main-content > .platform-siblings-band { background: rgba(239, 246, 251, 0.88); }
.has-bands main#main-content > section.block.band-blue  { background: rgba(239, 246, 251, 0.88); }
.has-bands main#main-content > section.block.band-plain { background: rgba(255, 255, 255, 0.86); }

/* Restated last, because the rules above would otherwise beat them on
   source order — same reason body.home .partner-trust-strip is
   restated in the 0.94.0 block. */
.has-bands .cta-band { background: rgba(1, 119, 181, 0.84); }
.has-bands .partner-trust-strip,
body.home .partner-trust-strip { background: rgba(255, 255, 255, 0.86); }
.page-hero-solution,
.page-hero-lender { background: rgba(239, 246, 251, 0.88); }
.has-bands .page-hero-product,
.has-bands .page-hero-generic,
.has-bands .page-hero-platform { background: rgba(239, 246, 251, 0.88); }


/* --- Two more opaque surfaces (0.94.4) -----------------------------
   The Product and Solution `main` elements, which 0.94.3 caught on
   Platform and missed on its two siblings — one rule, three selectors,
   two of them left behind. They sit *under* the bands, so an opaque
   main blocks the backdrop even where every band above it is
   translucent: the audit finds it, the eye does not. */
body.page-template-template-product main,
body.page-template-template-solution main,
body.page-template-template-platform main { background: rgba(255, 255, 255, 0.86); }

/* =====================================================================
   THE NAV PANEL GOES DARK (0.94.4)

   The panel was --surface white, and 0.94.0 made the page it opens over
   paler and more atmospheric — so a white panel over a near-white page
   had nothing but a shadow holding it up, which is exactly the
   "washes out" report.

   It takes --accent-dark, the same fill as the header bar it drops
   from, so it reads as the bar extending downward rather than as a
   sheet floating above the page. That is the "similar but
   complementary" answer: one tone, already in the system, already
   directly above it.

   This does NOT reopen the navy question. 0.91.0 moved the panel off
   `var(--ink)` because navy is text and linework, and the one sanctioned
   navy fill is the credential rail (0.93.2). --accent-dark is a blue.

   **An overlay cannot borrow its edge from the page** (0.91.3), and a
   dark panel needs that more, not less: the top border and the tail's
   hairlines are light now, because the fills under them changed.
   ===================================================================== */
/* The panel carries its own artwork (0.94.7) — deliberately NOT a crop
   of the page backdrop. Same vocabulary, inverted: the page is a line
   travelling through rings on a light ground; the panel is the rings
   without the line, in white on a dark one, weighted to the right where
   every menu has its emptiest column. One ring is picked out in the
   on-dark green, which is the only place the panel is allowed a colour
   that is not blue or white.

   Alphas top out at 10%. This sits behind up to eleven labels and their
   descriptions, so it is depth, not decoration — anything stronger and
   the panel starts competing with the thing it exists to present.

   `cover` on a 1600x400 drawing: the rings crop rather than shrink as
   the header widens, which keeps their stroke weight constant. The
   mobile rule below uses the `background` shorthand, so it clears this
   image on its own — the accordion is a stacked list in a tray and
   artwork behind it is noise. */
nav.primary-nav .nav-panel {
  background: var(--accent-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 400' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3CradialGradient id='g1' cx='1330' cy='-30' r='560' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.10'/%3E%3Cstop offset='.6' stop-color='%23ffffff' stop-opacity='.035'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='g2' cx='120' cy='420' r='420' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23000000' stop-opacity='.10'/%3E%3Cstop offset='1' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1600' height='400' fill='url(%23g1)'/%3E%3Crect width='1600' height='400' fill='url(%23g2)'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.075' stroke-width='2'%3E%3Ccircle cx='1355' cy='196' r='104'/%3E%3Ccircle cx='1355' cy='196' r='192'/%3E%3Ccircle cx='1355' cy='196' r='288'/%3E%3Ccircle cx='1355' cy='196' r='392'/%3E%3C/g%3E%3Ccircle cx='1355' cy='196' r='30' fill='%23ffffff' fill-opacity='.055'/%3E%3Cg fill='none' stroke='%23CDE6A4' stroke-opacity='.14' stroke-width='2'%3E%3Ccircle cx='1355' cy='196' r='192'/%3E%3C/g%3E%3Cpath d='M-40 372C240 330 430 250 690 258C900 264 1060 316 1290 300' fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='%23ffffff' fill-opacity='.10'%3E%3Ccircle cx='690' cy='258' r='5'/%3E%3Ccircle cx='1163' cy='196' r='5'/%3E%3Ccircle cx='1355' cy='4' r='5'/%3E%3C/g%3E%3C/svg%3E") right center / cover no-repeat;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  /* A darker panel casts a weaker-looking shadow against a pale page, so
     it needs a little more than 0.91.3's 10px/24px to keep its edge. */
  box-shadow: 0 14px 30px rgba(26, 32, 44, 0.30);
}
nav.primary-nav .nav-panel a { color: #fff; }
.nav-panel-label { color: #fff; }
.nav-panel-desc { color: rgba(255, 255, 255, 0.70); }
/* Green, not white: the icon is the one coloured thing in the panel, and
   green is already the on-dark accent this theme uses for the open-item
   rule and for eyebrows in a deep band. Blue on --accent-dark would be
   the blue-on-blue problem the panel exists to avoid. */
.nav-panel-icon { color: #CDE6A4; }
nav.primary-nav .nav-panel a:hover .nav-panel-label { color: #CDE6A4; }
nav.primary-nav .nav-panel a:hover .nav-panel-desc { color: rgba(255, 255, 255, 0.86); }

.nav-panel-tail {
  background: rgba(0, 0, 0, 0.20);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}
nav.primary-nav .nav-panel-tail-link { color: #fff; }
nav.primary-nav .nav-panel-tail-link:hover { color: #CDE6A4; }

/* The mobile drawer is already --accent, and a media query adds no
   specificity — so the rules above would have repainted the accordion
   --accent-dark without anyone deciding to. Deciding: the accordion is
   an inset in the drawer rather than a second panel on top of it, so it
   takes a black wash over the drawer's own blue and keeps nesting
   visible at any drawer tone. */
@media (max-width: 900px) {
  nav.primary-nav .nav-panel {
    background: rgba(0, 0, 0, 0.16);
    border-top: none;
    box-shadow: none;
  }
  .nav-panel-tail {
    background: rgba(0, 0, 0, 0.22);
    border-bottom: none;
  }
}


/* --- The appears-on card sections were never full-bleed (0.94.5) ----
   `section.block` is the measure AND the fill: `max-width: 1120px;
   margin: 0 auto`, widened to 1338px by the rail. Every `.band` beside
   it spans the viewport and holds its measure in an inner
   `.content-wrap`, so on a Lender page "What you finance" and "Built on
   the appTRAKER platform" were 1338px-wide panels sitting in a 1652px
   row — inset by 157px a side, with the page showing down both edges.

   **It has been inset since 0.87.0 and nothing could show it.** Behind
   it sat either an opaque white `main` or a flat --bg, and a white
   panel on white reads as one surface. 0.94.0 put an image back there,
   and the seam it had always had became two vertical stripes. Reported
   as "a weird background clash on the lending solutions and platform
   sections", which is exactly what an inset panel looks like once the
   thing behind it stops being blank.

   The fill bleeds with a 100vw box-shadow spread rather than by moving
   the measure into an inner wrapper, which would mean changing the
   markup in inc/appears-on.php and re-checking the 0.90.0 band-run
   seams. `clip-path` then trims the shadow vertically to the section's
   own box, so it cannot leak into the bands above and below. A shadow
   never affects layout, so neither does this — no overflow, no
   scrollbar, and the content measure is untouched.

   The vertical clip sits exactly on the box edge. Nothing inside gets
   near it: the section's own `--section-y` padding is 56px and the
   biggest thing that moves is a 2px card hover lift.
   ------------------------------------------------------------------ */
.has-bands main#main-content > section.block { clip-path: inset(0 -100vw); }
.has-bands main#main-content > section.block.band-blue {
  box-shadow: 0 0 0 100vw rgba(239, 246, 251, 0.88);
}
.has-bands main#main-content > section.block.band-plain {
  box-shadow: 0 0 0 100vw rgba(255, 255, 255, 0.86);
}
/* The blanket rule from 0.87.0 paints any section with no tone class at
   all; it needs the bleed too, or a future family renders as the inset
   panel this fixes. */
.has-bands main#main-content > section.block:not(.band-blue):not(.band-plain) {
  box-shadow: 0 0 0 100vw rgba(239, 246, 251, 0.88);
}


/* --- Who owns the ground, and it is one of two things (0.94.8) ------
   Reported as "the background image is quite prominent on the resources
   pages and the privacy page". It was: an unbanded page has no
   full-width fill anywhere, so the backdrop ran at **full strength
   directly behind running text** — including the Privacy Policy, which
   is the worst page on the site to put an image behind.

   The model was never written down, so it drifted. Writing it down:

     A BANDED PAGE'S GROUND IS ITS BANDS.
     AN UNBANDED PAGE'S GROUND IS ONE VEIL OVER THE BACKDROP.

   **The veil is a second fixed layer, not a fill on `main`.** `main` is
   measure-constrained on several templates — 1120px on Generic, so a
   fill there renders as an inset panel with the backdrop at full
   strength down both sides, which is the 0.94.5 defect reached from a
   new direction. A fixed layer is full-bleed by construction, needs no
   `clip-path`, and cannot interact with sticky or absolutely positioned
   children the way clipping `main` would.

   0.86 is not a coincidence: it is the plain-band alpha, so an unbanded
   page reads as exactly one plain band from top to bottom. That is the
   right mental model and the reason the two kinds of page now match.

   **`main` never carries the ground.** The three rules below are the
   ones that used to, and 0.94.4 is why they must not: a 0.86 main under
   a 0.86 band computes to 0.98, and the backdrop had quietly gone from
   every banded Product, Solution and Platform page.
   ------------------------------------------------------------------ */
body:not(.has-bands)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.86);
}
@media print { body::after { display: none; } }
@media (forced-colors: active) { body::after { display: none; } }

main#main-content,
.hub-page main#main-content,
body.page-template-template-product main,
body.page-template-template-solution main,
body.page-template-template-platform main { background: transparent; }


/* --- Partner strip eyebrow and intro (0.95.0) ----------------------
   The strip carried one label. It now takes an optional eyebrow above
   and an optional sentence below, both Theme Options, both rendering
   only when set — so a site that never fills them in gets the strip it
   already had.

   The eyebrow uses the site's eyebrow treatment rather than
   .is-style-eyebrow: this is template markup, not block content, and
   borrowing a block style's class into PHP is how the two drift apart.
   ------------------------------------------------------------------ */
.partner-trust-eyebrow {
  font-family: 'Lato', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
/* With an eyebrow above it the label stops being a label and becomes the
   section's heading, so it takes heading type and loses the uppercase
   transform — the copy carries its own capitals ("DATA, VENDORS, and
   LENDERS") and a transform would flatten the distinction. Keyed on the
   eyebrow's presence rather than applied outright, so a strip with no
   eyebrow set renders exactly as it did before 0.95.0. */
.partner-trust-eyebrow + .partner-trust-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 12px;
}
.partner-trust-intro {
  max-width: 62ch;
  margin: 0 0 20px;
  color: var(--slate);
  font-size: 15px;
  line-height: 1.6;
}