/* Crux V5 - Visual Design Elevation (Phase A.5)
 * "Blueprint Plate": light drafting-vellum plates alternate with deep cyanotype-navy
 * plates for rhythm. Yellow is the registration/drafting accent. Signature element:
 * the registration crosshair (+ that rotates to x) used in nav, eyebrows, and the
 * corners of conceptual product "schematic plates".
 *
 * Marketing-only layer. Loaded AFTER marketing.css on the five public pages; the
 * contrast-tested dev harnesses (_dev/*) do not load it, so the foundation stays intact.
 * Approved brand only (R2): Navy #1a2660 / Blue #34469d / Yellow #FFDA00.
 * Mechanism: context-based semantic-token flipping. Components keep consuming
 * semantic tokens; the surrounding plate re-maps those tokens to ink-on-paper or
 * white-on-navy, so cards/steps/lists adapt automatically and stay coherent.
 */

/* ======================================================================
 * 1. Palette extensions (approved brand, derived tones only)
 * ==================================================================== */
:root {
  /* Drafting vellum (paper) */
  --paper-0:   #ffffff;
  --paper-50:  #f6f8fc;
  --paper-100: #eef2fa;
  --paper-200: #e6ebf7;
  --paper-line: rgba(23, 33, 84, 0.12);
  --paper-line-soft: rgba(23, 33, 84, 0.055);

  /* Ink (navy-derived text on paper, tuned to WCAG AA) */
  --ink-strong: #131c47;
  --ink:        #2b3563;
  --ink-muted:  #4a5480;

  /* Cyanotype plate */
  --plate-1: #17215c;
  --plate-2: #121c50;
  --plate-3: #0d1740;
  --blue-glow: rgba(52, 70, 157, 0.38);
  --yellow-glow: rgba(255, 218, 0, 0.07);

  /* ---- Default marketing context = PAPER (light) ---- */
  --bg-page:    var(--paper-100);
  --bg-surface: var(--paper-0);
  --bg-subtle:  var(--paper-50);
  --bg-raised:  var(--paper-100);

  --text:        var(--ink);
  --text-strong: var(--ink-strong);
  --text-muted:  var(--ink-muted);
  --text-dim:    #6a739e;

  --border:        var(--paper-line);
  --border-strong: rgba(52, 70, 157, 0.34);

  /* On paper, the "accent"/eyebrow/link read as structural blue (yellow fails on white) */
  --accent:      var(--blue-600);
  --link:        var(--blue-600);
  --link-hover:  #26316f;
  --focus:       var(--blue-600);

  /* Secondary button on paper = ink outline */
  --action-secondary-text:   var(--ink-strong);
  --action-secondary-border: rgba(52, 70, 157, 0.40);

  /* Softer, lifted shadows for light surfaces */
  --shadow-1: 0 1px 2px rgba(20, 29, 71, 0.06);
  --shadow-2: 0 10px 30px rgba(20, 29, 71, 0.10);
  --shadow-3: 0 30px 66px rgba(20, 29, 71, 0.16);

  /* Registration accent kept available regardless of context */
  --reg: var(--yellow-500);
}

/* ======================================================================
 * 2. Page canvas + drafting-grid atmosphere
 * ==================================================================== */
body {
  background: var(--paper-100);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* The whole-page vellum ruling was removed in the final production pass. A
   square grid tiled behind every page competed with the content it sat under
   and read as texture rather than as drawing. The light-to-dark section
   treatment and the plate gradients below carry the character on their own. */

/* ======================================================================
 * 3. Plate contexts - token flips
 * ==================================================================== */

/* Deep cyanotype-navy plates: hero, dark bands, CTA plate, chrome */
.section--navy,
.hero,
.cta-band,
.masthead,
.footer {
  --bg-surface: rgba(255, 255, 255, 0.045);
  --bg-subtle:  rgba(255, 255, 255, 0.03);
  --bg-raised:  rgba(255, 255, 255, 0.09);

  --text:        rgba(255, 255, 255, 0.92);
  --text-strong: #ffffff;
  --text-muted:  rgba(255, 255, 255, 0.82);
  --text-dim:    rgba(255, 255, 255, 0.60);

  --border:        rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 218, 0, 0.30);

  --accent:     var(--yellow-500);
  --link:       var(--yellow-500);
  --link-hover: #ffe23a;
  --focus:      var(--yellow-500);

  --action-secondary-text:   #ffffff;
  --action-secondary-border: rgba(255, 218, 0, 0.42);

  color: var(--text);
}

/* Lifted white "paper plate" (alternation tone) */
.section--paper {
  background: var(--paper-0);
  border-block: 1px solid var(--paper-line);
}

/* The cyanotype background treatment. The drafting grid that used to be laid
   over these plates is gone; the lighting gradient is the whole treatment now,
   which is what the plate was always doing the work with. */
.section--navy,
.hero,
.cta-band {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(115% 80% at 8% -10%, var(--blue-glow), transparent 58%),
    radial-gradient(90% 90% at 108% 118%, var(--yellow-glow), transparent 55%),
    linear-gradient(176deg, var(--plate-1) 0%, var(--plate-2) 52%, var(--plate-3) 100%);
}
/* The hairline "horizon" between a navy plate and paper is replaced by the
   graded seam in polish.css: a 1px rule is exactly the hard edge this pass
   was asked to soften. */

/* ======================================================================
 * 4. Signature - registration crosshair + drafting eyebrow
 * ==================================================================== */

/* Eyebrow: mono label preceded by a small drawn registration tick (replaces "// ") */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--accent);
  letter-spacing: 0.22em;
}
.eyebrow::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  opacity: 0.9;
}

/* Corner registration marks utility for schematic plates */
.reg-corners { position: relative; }
.reg-corners::before,
.reg-corners::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 1.5px solid var(--border-strong);
  pointer-events: none;
}
.reg-corners::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.reg-corners::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* ======================================================================
 * 5. Header / masthead - glass cyanotype chrome
 * ==================================================================== */
.masthead {
  background: var(--navy-900);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 1px 0 rgba(255, 218, 0, 0.10);
}
.masthead__inner { min-height: 80px; }
.brand__logo { height: 34px; }
.mainnav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--reg); color: #fff; }

/* Header CTA normalized to the approved flat style (shared V5 header).
   Body CTAs on these routes are unchanged. */
.masthead .btn, .mobilenav__cta { font-family: var(--font-body); text-transform: none; letter-spacing: 0.005em; border-radius: 8px; }
.masthead .btn--primary, .mobilenav__cta.btn--primary { background: var(--yellow-500); color: var(--navy-900); border-color: var(--yellow-500); box-shadow: none; }
.masthead .btn--primary:hover, .mobilenav__cta.btn--primary:hover { background: var(--yellow-600); border-color: var(--yellow-600); box-shadow: none; transform: none; }
.masthead .btn--primary::after, .mobilenav__cta.btn--primary::after { content: none; }

/* Restrained dropdown caret: a clean thin chevron (shared V5 header). */
.menu__caret,
.mobilenav__caret {
  font-size: 0;                 /* hide the literal "v" glyph */
  width: 8px; height: 8px;
  display: inline-block;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--motion-base) var(--ease-standard);
  color: var(--reg);
}
.menu__trigger[aria-expanded="true"] .menu__caret,
.mobilenav__group-trigger[aria-expanded="true"] .mobilenav__caret {
  transform: rotate(225deg) translate(-1px, -1px);
}

/* Dropdown panel - approved navy popover */
.menu__panel {
  background: var(--navy-900);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(10, 16, 44, 0.45);
  padding: var(--space-2);
}
.menu__panel a { color: rgba(255, 255, 255, 0.82); border-radius: var(--radius-sm); }
.menu__panel a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.menu__panel .menu__desc {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.52);
  margin-top: 2px;
}

/* ======================================================================
 * 6. Typography hierarchy
 * ==================================================================== */
.hero__title { letter-spacing: 0.005em; text-wrap: balance; }
.section-header__title { text-wrap: balance; }
.section-header__summary,
.hero__lead { max-width: 54ch; }
.section-header { max-width: 60ch; }
p { max-width: 68ch; }
.lead, .hero__lead { font-weight: 400; }

/* Eyebrow "// " prefix from base.css is redundant with the drawn tick - suppress it */
.eyebrow::first-line { }
.eyebrow { text-indent: 0; }

/* ======================================================================
 * 7. Hero - dramatic two-column with a conceptual control plate
 * ==================================================================== */
.hero { padding-block: clamp(3.5rem, 8vw, 8rem) clamp(3rem, 6vw, 6.5rem); overflow: hidden; }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}
.hero__inner { max-width: 40rem; }
.hero .eyebrow { color: var(--reg); }
.hero__title { font-size: clamp(52px, 6.6vw, 104px); line-height: 0.94; }
.hero__lead { color: rgba(255, 255, 255, 0.86); font-size: clamp(18px, 1.5vw, 23px); line-height: 1.55; }
.hero__actions { margin-top: var(--space-7); }
.hero__trust {
  margin-top: var(--space-5);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.62); text-transform: uppercase;
}
.hero__trust span { display: inline-flex; align-items: center; gap: 0.5em; }
.hero__trust span::before {
  content: ""; width: 6px; height: 6px; border-radius: 1px;
  background: var(--reg); box-shadow: 0 0 8px rgba(255, 218, 0, 0.6);
}

/* ======================================================================
 * 8. Conceptual product visuals ("schematic plates" - drawn, not screenshots)
 * ==================================================================== */

/* Generic schematic plate wrapper */
.plate {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: var(--shadow-2);
  padding: var(--space-5);
}
.section--navy .plate,
.hero .plate {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 40px 90px rgba(8, 13, 38, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.plate__cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.plate__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-dim);
}
.plate__badge {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 3px 9px;
}

/* Invoice / UI card */
.uicard {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  padding: var(--space-4);
}
.section--navy .uicard,
.hero .uicard { background: rgba(255, 255, 255, 0.04); }
.uicard + .uicard { margin-top: var(--space-3); }
.uicard__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.uicard__vendor { font-family: var(--font-mono); font-size: 13px; color: var(--text-strong); letter-spacing: 0.02em; }
.uicard__amt { font-family: var(--font-display); font-size: 24px; color: var(--text-strong); letter-spacing: 0.02em; }
.uicard__meta { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-dim); }

/* Status pills (shape + text + icon; never color alone) */
.pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1px solid currentColor;
  white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--approved { color: #37d27f; }
.pill--pending  { color: #f5c542; }
.pill--synced   { color: #56d08a; }
.pill--syncing  { color: #7fa0ff; }
.section--paper .pill--approved, .pill--approved { color: #0a8f46; }
.section--navy .pill--approved, .hero .pill--approved { color: #37d27f; }
.section--paper .pill--pending, .pill--pending { color: #9a6a00; }
.section--navy .pill--pending, .hero .pill--pending { color: #f5c542; }

/* Approval flow (routed chain -> decision) */
.approve { display: grid; gap: var(--space-2); }
.approve__row { display: flex; align-items: center; gap: var(--space-3); }
.approve__node {
  flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px var(--space-3); background: var(--bg-subtle);
}
.section--navy .approve__node, .hero .approve__node { background: rgba(255,255,255,0.04); }
.approve__who {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--text-strong);
  background: var(--bg-raised); border: 1px solid var(--border-strong);
}
.approve__label { font-family: var(--font-mono); font-size: 12px; color: var(--text); letter-spacing: 0.02em; }
.approve__sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); }
.approve__connector {
  width: 1.5px; height: 14px; margin-left: 25px;
  background: repeating-linear-gradient(var(--border-strong) 0 3px, transparent 3px 6px);
}

/* Budget vs actual bars */
.bva { display: grid; gap: var(--space-4); }
.bva__row { display: grid; gap: 6px; }
.bva__head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); }
.bva__name { font-size: 12px; color: var(--text); letter-spacing: 0.02em; }
.bva__val { font-size: 12px; color: var(--text-dim); }
.bva__track {
  position: relative; height: 12px; border-radius: 999px;
  background: var(--bg-raised); border: 1px solid var(--border); overflow: hidden;
}
.bva__fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; }
.bva__fill--committed { background: linear-gradient(90deg, var(--blue-500), var(--blue-600)); }
.bva__fill--approved  { background: linear-gradient(90deg, #37d27f, #0a8f46); }
.bva__fill--over      { background: linear-gradient(90deg, #f5c542, #d99400); }
.bva__mark {
  position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--reg);
  box-shadow: 0 0 6px rgba(255, 218, 0, 0.6);
}
.bva__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }
.bva__key { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; }
.bva__key i { width: 10px; height: 10px; border-radius: 2px; }

/* QuickBooks sync rows */
.syncrows { display: grid; gap: var(--space-2); }
.syncrow {
  display: flex; align-items: center; gap: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px var(--space-3); background: var(--bg-subtle);
  font-family: var(--font-mono); font-size: 12px; color: var(--text);
}
.section--navy .syncrow, .hero .syncrow { background: rgba(255,255,255,0.04); }
.syncrow__arrow { color: var(--accent); }
.syncrow__to { color: var(--text-strong); font-weight: 500; }
.syncrow .pill { margin-left: auto; }

/* Command Center dashboard concept */
.dash { display: grid; gap: var(--space-4); }
.dash__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.dtile { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--bg-subtle); min-width: 0; }
.section--navy .dtile, .hero .dtile { background: rgba(255,255,255,0.04); }
.dtile__k { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); line-height: 1.3; }
.dtile__v { display: block; font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); color: var(--text-strong); line-height: 1; margin-top: 8px; }
.dtile__u { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); margin-top: 4px; }
.dash__list { display: grid; gap: var(--space-2); }
.dash__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg-subtle);
  font-family: var(--font-mono); font-size: 12px; color: var(--text);
}
.section--navy .dash__item, .hero .dash__item { background: rgba(255,255,255,0.04); }
.dash__item .pill { margin-left: auto; }

/* ======================================================================
 * 9. Cards / steps / contrast / flow - plate-aware elevation
 * ==================================================================== */
.mcard {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  transition: transform var(--motion-base) var(--ease-emphasized),
              box-shadow var(--motion-base) var(--ease-emphasized),
              border-color var(--motion-base) var(--ease-standard);
}
.mcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.section--navy .mcard, .hero .mcard {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border-color: rgba(255, 255, 255, 0.12);
}
.mcard__icon { background: var(--bg-raised); border-color: var(--border-strong); color: var(--accent); }
.section--navy .mcard__icon, .hero .mcard__icon { background: rgba(255,218,0,0.10); }

.rolecard { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-1); }
.rolecard { border-left: 3px solid var(--reg); }
.rolecard__role { color: var(--accent); }

.step { background: var(--bg-surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.step::before { color: var(--accent); }
.section--navy .step, .hero .step { background: rgba(255,255,255,0.045); }

.contrast__col { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-1); }
.contrast__col--accent {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(255, 218, 0, 0.10);
}
.section--navy .contrast__col, .hero .contrast__col { background: rgba(255,255,255,0.04); }
.section--navy .contrast__col--accent, .hero .contrast__col--accent {
  background: linear-gradient(180deg, rgba(255,218,0,0.07), rgba(255,255,255,0.02));
}
.contrast__title { color: var(--text-strong); }

.ticklist li::before { background: var(--reg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--reg) 18%, transparent); }

.frame { background: var(--bg-subtle); border-color: var(--border-strong); }
.flow__node { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-1); }
.flow__node--qb { border-color: var(--border-strong); color: var(--accent); }
.flow__arrow { color: var(--accent); }

/* ======================================================================
 * 10. CTA polish - depth, motion, arrow
 * ==================================================================== */
.btn {
  border-radius: var(--radius-md);
  transition: background-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-emphasized),
              transform var(--motion-base) var(--ease-emphasized);
}
.btn--primary {
  background: linear-gradient(180deg, #ffe23a 0%, var(--action) 60%, var(--action-hover) 100%);
  color: var(--action-text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
              0 10px 24px rgba(255, 218, 0, 0.22),
              0 2px 6px rgba(20, 29, 71, 0.18);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #ffe850 0%, #ffde1a 60%, var(--action) 100%);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
              0 16px 34px rgba(255, 218, 0, 0.30),
              0 4px 10px rgba(20, 29, 71, 0.22);
}
.btn--primary::after {
  content: "\2192";
  font-family: var(--font-mono);
  margin-left: 0.1em;
  transform: translateX(0);
  transition: transform var(--motion-base) var(--ease-emphasized);
}
.btn--primary:hover::after { transform: translateX(4px); }
.btn--secondary { backdrop-filter: blur(2px); }
.btn--secondary:hover { transform: translateY(-1px); }

/* Consultation callout plate (the .cta-band becomes a distinct navy plate) */
.cta-band {
  border: 0;
  margin: 0;
}
.cta-band__inner {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 3rem);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255,218,0,0.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 218, 0, 0.24);
  box-shadow: 0 30px 70px rgba(8, 13, 38, 0.45);
}
.cta-band__inner.reg-corners::before,
.cta-band__inner.reg-corners::after { border-color: rgba(255, 218, 0, 0.5); }
.cta-band .reassure { color: rgba(255, 255, 255, 0.72); }

/* ======================================================================
 * 11. Breadcrumb + footer
 * ==================================================================== */
.breadcrumb { background: var(--paper-0); border-bottom: 1px solid var(--paper-line); }
.breadcrumb__list a { color: var(--ink-muted); }
.breadcrumb__list a:hover { color: var(--ink-strong); }
.breadcrumb__current { color: var(--ink); }

.footer {
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(52,70,157,0.35), transparent 60%),
    linear-gradient(180deg, var(--plate-2), var(--plate-3));
  border-top: 1px solid rgba(255, 218, 0, 0.16);
  color: rgba(255, 255, 255, 0.82);
}
.footer .brand { color: #fff; }
.footer__heading { color: var(--reg); }
.footer__links a { color: rgba(255, 255, 255, 0.72); }
.footer__links a:hover { color: #fff; }
.footer .muted { color: rgba(255, 255, 255, 0.6); }
.footer__legal { border-top-color: rgba(255, 255, 255, 0.12); }

/* ======================================================================
 * 12. Section header accent tick alignment + rhythm helpers
 * ==================================================================== */
.section { position: relative; }
.section-header { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Two-column "media" section: copy + schematic plate */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 64rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-media { grid-template-columns: 0.9fr 1.1fr; }
  .split--flip .split__media { order: -1; }
}
.split__body .section-header { margin-bottom: var(--space-5); }

/* ======================================================================
 * 13. Responsive + motion + a11y preservation
 * ==================================================================== */
/* Grid/flex children must be allowed to shrink below their content width so the
   drawn schematics never force horizontal overflow on narrow viewports. */
.hero__grid > *, .split > * { min-width: 0; }
.plate, .uicard, .approve__node, .syncrow, .dash__item, .dtile { min-width: 0; }
.uicard__top, .syncrow, .plate__cap, .approve__node, .dash__item { flex-wrap: wrap; }
.uicard__vendor, .approve__label, .approve__sub, .syncrow span { overflow-wrap: anywhere; min-width: 0; }
.syncrow .pill, .approve__node .pill { margin-left: auto; }

@media (max-width: 63.99rem) {
  .dash__tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 39.99rem) {
  .dash__tiles { grid-template-columns: 1fr; }
  .uicard__amt { font-size: 20px; }
  .plate { padding: var(--space-4); }
  .dash__tiles { gap: var(--space-2); }
  .approve__node, .syncrow, .dash__item { padding: 10px var(--space-2); }
  .hero__trust { gap: 0.4rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mcard, .btn, .btn--primary::after, .menu__caret, .mobilenav__caret { transition: none; }
  .mcard:hover, .btn--primary:hover, .btn--secondary:hover { transform: none; }
}

/* Keep focus outlines crisp on both plate types */
.section--navy :focus-visible,
.hero :focus-visible,
.masthead :focus-visible,
.footer :focus-visible { outline-color: var(--reg); }