/* ============================================================
   COMMERCIAL CORE — shared patterns for the 2026-07 ICP revamp
   Loaded ONLY by the rewritten commercial pages (index, platform,
   sprints, deliverable, ask-devis, applications, how-it-works,
   partners). Every class namespaced .cx- so nothing here can touch
   pages that do not opt in. devis.css remains untouched.
   Visual language: warm-black canvas, brushed gold, hairline
   ledgers, gradient slabs — no card grids, no glow.
   ============================================================ */

/* ---- hero microcopy row ---- */
.cx-micro{
  margin-top:1.6rem; color:var(--bone-faint); font-size:var(--step--1);
  letter-spacing:.05em; display:flex; flex-wrap:wrap; gap:.35rem .6rem; align-items:baseline;
}
.cx-micro .dot{ color:var(--gold); }

/* ---- supporting line (italic, gold-spined) ---- */
.cx-support{
  margin-top:2.2rem; max-width:56ch;
  font-family:var(--serif); font-style:italic; color:var(--bone-dim);
  font-size:var(--step-0); line-height:1.55;
  border-left:2px solid var(--gold-deep); padding-left:1.2rem;
}

/* ============================================================
   GAP DIAGRAM — workstreams -> DEVIS layer -> consequences
   ============================================================ */
.cx-gap{
  margin-top:3rem; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(1.4rem,3.5vw,3rem); align-items:center; max-width:980px;
}
.cx-gap-col{ min-width:0; }
.cx-gap-k{
  display:block; font-family:var(--label); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-dim); margin-bottom:1rem;
}
.cx-gap-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.cx-gap-list li{
  padding:.72rem 0; border-bottom:1px solid var(--line-soft);
  font-family:var(--serif); font-size:var(--step-0); color:var(--bone); line-height:1.3;
}
.cx-gap-list--out li{ color:var(--bone-dim); }
.cx-gap-core{
  position:relative; text-align:center; padding:clamp(1.3rem,2.6vw,2rem) clamp(1.2rem,2.4vw,1.9rem);
  background:linear-gradient(180deg,var(--slab-a),var(--slab-b));
  border:1px solid var(--gold-deep); border-top:2px solid var(--gold);
  box-shadow:0 40px 80px -45px rgba(198,163,90,.28);
  max-width:230px;
}
.cx-gap-core .cx-core-mark{
  font-family:var(--label); letter-spacing:.4em; color:var(--gold); font-size:1rem; display:block;
}
.cx-gap-core .cx-core-sub{
  display:block; margin-top:.55rem; font-family:var(--label); font-size:.56rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim); line-height:1.7;
}
.cx-gap-core::before, .cx-gap-core::after{
  content:""; position:absolute; top:50%; width:clamp(.9rem,2.4vw,2.2rem); height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-deep));
}
.cx-gap-core::before{ right:100%; }
.cx-gap-core::after{ left:100%; background:linear-gradient(90deg, var(--gold-deep), transparent); }
@media (max-width:820px){
  .cx-gap{ grid-template-columns:minmax(0,1fr); gap:0; }
  .cx-gap-core{ margin:1.8rem auto; max-width:280px; }
  .cx-gap-core::before, .cx-gap-core::after{
    left:50%; right:auto; top:auto; width:1px; height:1.4rem;
    background:linear-gradient(180deg, transparent, var(--gold-deep));
  }
  .cx-gap-core::before{ bottom:100%; }
  .cx-gap-core::after{ top:100%; background:linear-gradient(180deg, var(--gold-deep), transparent); }
  .cx-gap-col--out{ margin-top:1.6rem; }
}

/* ============================================================
   STEP FLOW — numbered horizontal ledger (3-across, 6-across wide;
   stacks on phones). Arrows use alt-text syntax so they stay out
   of the accessibility tree.
   ============================================================ */
.cx-steps{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1rem,2.4vw,1.8rem); margin-top:2.8rem;
}
@media (min-width:1280px){ .cx-steps{ grid-template-columns:repeat(6, minmax(0,1fr)); gap:clamp(.8rem,1.4vw,1.4rem); } }
.cx-steps--five{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (min-width:1280px){ .cx-steps--five{ grid-template-columns:repeat(5, minmax(0,1fr)); } }
.cx-step{ min-width:0; border-top:1px solid var(--line); padding-top:1rem; position:relative; }
.cx-step .cx-step-n{
  font-family:var(--label); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.cx-step h3{
  font-family:var(--serif); font-weight:500; font-size:var(--step-1); line-height:1.12;
  margin:.5rem 0 .5rem; color:var(--bone);
}
.cx-step p{ margin:0; color:var(--bone-dim); font-size:var(--step--1); line-height:1.5; }
.cx-step:not(:last-child)::after{
  content:"\2192" / ""; position:absolute; top:.95rem; right:-.7rem; color:var(--gold-deep); font-family:var(--sans);
}
@media (max-width:1279px){ .cx-step:nth-child(3)::after{ content:""; } }
@media (max-width:680px){
  .cx-steps{ grid-template-columns:minmax(0,1fr); gap:0; }
  .cx-step{ padding-block:1.15rem; }
  .cx-step:not(:last-child)::after{ content:""; }
}

/* ============================================================
   TWO-COLUMN COMPARISON LEDGERS
   .cx-adds  — neutral column vs gold DEVIS column
   .cx-bounds — does (gold) / does-not (neutral)
   ============================================================ */
.cx-adds, .cx-bounds{
  margin-top:2.8rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3rem); max-width:980px;
}
.cx-adds-col, .cx-bounds-col{ min-width:0; }
.cx-adds-k{
  display:block; font-family:var(--label); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-dim); margin-bottom:1.1rem;
}
.cx-bounds-k{
  font-family:var(--serif); font-weight:500; font-size:var(--step-1);
  color:var(--bone); margin:0 0 1.1rem; line-height:1.2;
}
.cx-col--gold .cx-adds-k{ color:var(--gold); }
.cx-col--gold .cx-bounds-k{ color:var(--gold-bright); }
.cx-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.cx-list li{
  padding:.85rem 0 .85rem 1.15rem; border-bottom:1px solid var(--line-soft);
  color:var(--bone-dim); line-height:1.5; position:relative; font-size:var(--step--1);
}
.cx-list li::before{
  content:""; position:absolute; left:0; top:1.55em; width:.5rem; height:1px; background:var(--bone-faint);
}
.cx-col--gold .cx-list{ border-top-color:var(--gold-deep); }
.cx-col--gold .cx-list li{ color:var(--bone); }
.cx-col--gold .cx-list li::before{ background:var(--gold); }
@media (max-width:700px){ .cx-adds, .cx-bounds{ grid-template-columns:minmax(0,1fr); } }

/* ============================================================
   AUDIENCE / PLAIN TWO-COLUMN SERIF LEDGER
   ============================================================ */
.cx-who{
  list-style:none; margin:2.6rem 0 0; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 clamp(2rem,5vw,4rem); max-width:880px; border-top:1px solid var(--line);
}
.cx-who li{
  padding:.85rem 0; border-bottom:1px solid var(--line-soft);
  font-family:var(--serif); font-size:var(--step-0); color:var(--bone); line-height:1.3;
}
@media (max-width:640px){ .cx-who{ grid-template-columns:minmax(0,1fr); } }

/* ============================================================
   SIX-PART REPORT INDEX — compact numbered grid (titles only)
   ============================================================ */
.cx-parts{
  list-style:none; margin:2.6rem 0 0; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 clamp(2rem,5vw,4rem); max-width:880px; border-top:1px solid var(--line);
}
.cx-parts li{
  display:flex; align-items:baseline; gap:1rem;
  padding:.95rem 0; border-bottom:1px solid var(--line-soft);
}
.cx-parts .cx-pn{
  font-family:var(--label); font-size:.66rem; letter-spacing:.2em; color:var(--gold); flex:none;
}
.cx-parts .cx-pt{
  font-family:var(--serif); font-weight:500; font-size:var(--step-0); color:var(--bone); line-height:1.3;
}
@media (max-width:640px){ .cx-parts{ grid-template-columns:minmax(0,1fr); } }
/* single-column variant (used beside the brief artifact) */
.cx-parts--single{ grid-template-columns:minmax(0,1fr); }

/* a follow-on note section that hangs off the previous section without a rule */
.cx-follow-note{ padding-block:0 var(--chapter); }
.section + .cx-follow-note{ border-top:none; }

/* ============================================================
   PROMPT SLAB — restrained chat-style question visual
   ============================================================ */
.cx-chat{
  position:relative; margin-top:2.8rem; max-width:880px;
  background:linear-gradient(180deg,var(--slab-a),var(--slab-b));
  border:1px solid var(--line); border-top:2px solid var(--gold);
  padding:clamp(1.4rem,3.6vw,2.4rem);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.85);
}
.cx-chat-stamp{
  position:absolute; top:.9rem; right:1.1rem;
  font-family:var(--label); font-size:.52rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim);
}
.cx-prompts{
  list-style:none; margin:.4rem 0 0; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1.1rem clamp(1.4rem,3.5vw,2.6rem);
}
.cx-prompt{ min-width:0; }
.cx-prompt .cx-role{
  display:block; font-family:var(--label); font-size:.56rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone-dim); margin-bottom:.4rem;
}
.cx-prompt p{
  margin:0; font-family:var(--serif); font-style:italic; color:var(--bone);
  font-size:var(--step-0); line-height:1.35;
}
.cx-chat-answer{ margin-top:1.6rem; padding-top:1.3rem; border-top:1px solid var(--line-soft); }
.cx-chat-answer .cx-role{
  display:block; font-family:var(--label); font-size:.56rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.5rem;
}
.cx-chat-answer p{
  margin:0; color:var(--bone); line-height:1.6; font-size:var(--step--1);
  border-left:2px solid var(--gold-deep); padding-left:1rem; max-width:64ch;
}
@media (max-width:640px){
  .cx-prompts{ grid-template-columns:minmax(0,1fr); }
  .cx-chat-stamp{ position:static; display:block; margin:0 0 1.2rem; }
}

/* ============================================================
   Shared fixes for pages loading this sheet
   ============================================================ */
/* the shared hero .signal trace loops an infinite keyframe with no
   reduce-motion guard in devis.css — close it here */
@media (prefers-reduced-motion: reduce){
  .signal::after{ animation:none; opacity:0; }
}
/* the menu stagger in devis.css covers items 1–7; the revamped menu has 8 */
.menu-stagger li:nth-child(8) a{ transition-delay:.48s; }

/* ============================================================
   DEEP-AUDIT VISUAL FIXES (2026-07-13)
   ============================================================ */
/* row-end arrows: suppress at every 3rd item when the grid is 3-across
   (was nth-child(3) only, which leaks an arrow at item 6 on 7-step flows) */
@media (max-width:1279px){ .cx-step:nth-child(3n)::after{ content:""; } }
/* seven-step flows: 4+3 on wide screens instead of orphaning step 07 */
@media (min-width:1280px){
  .cx-steps--seven{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(1rem,2vw,1.8rem); }
  .cx-steps--seven .cx-step:nth-child(4)::after{ content:""; }
  /* equal heading zones so the six-across descriptions share a reading line */
  .cx-steps:not(.cx-steps--seven) .cx-step h3{ min-height:2.24em; }
}
/* unequal gap-diagram columns (e.g. 5 vs 9 rows): top-align the columns so
   their headers sit level; keep the DEVIS core slab vertically centred */
.cx-gap--tall{ align-items:start; }
.cx-gap--tall .cx-gap-core{ align-self:center; }

/* ============================================================
   CATEGORY COMPARISON — "what each route gives you / where it
   stops" (platform page). Real <table> for semantics; hairline
   ledger with a gold-highlighted DEVIS row; stacks to labelled
   slabs on phones (same learned pattern as the ask-devis ledger,
   including the full-width caption fix).
   ============================================================ */
.cx-cmp-wrap{ margin-top:2.8rem; max-width:1080px; }
.cx-cmp{ width:100%; border-collapse:collapse; }
.cx-cmp caption{
  caption-side:bottom; margin-top:1.3rem; text-align:left;
  font-family:var(--serif); font-style:italic; color:var(--bone-faint); font-size:var(--step--1);
}
.cx-cmp thead th{
  font-family:var(--label); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:400; text-align:left; vertical-align:bottom; color:var(--bone-dim);
  padding:0 1.2rem 1rem 0; border-bottom:1px solid var(--line);
}
.cx-cmp tbody th{
  font-family:var(--serif); font-weight:500; font-size:var(--step-0); color:var(--bone);
  text-align:left; vertical-align:top; width:24%;
  padding:1.2rem 1.4rem 1.2rem 0; border-bottom:1px solid var(--line-soft); line-height:1.3;
}
.cx-cmp tbody td{
  vertical-align:top; padding:1.2rem 1.2rem 1.2rem 0; border-bottom:1px solid var(--line-soft);
  color:var(--bone-dim); font-size:var(--step--1); line-height:1.55; width:38%;
}
.cx-cmp tbody tr:last-child :is(th,td){ border-bottom:1px solid var(--line); }
/* the DEVIS row — gold inflection, never a shouting highlight */
.cx-cmp .cx-cmp-devis :is(th,td){
  background:rgba(198,163,90,.05); border-bottom:1px solid var(--gold-deep);
  padding-left:1.1rem;
}
.cx-cmp .cx-cmp-devis th{
  color:var(--gold-bright); border-left:2px solid var(--gold); padding-left:1.1rem;
}
.cx-cmp .cx-cmp-devis td{ color:var(--bone); }
.cx-cmp .cx-cmp-devis td b{ color:var(--gold-bright); font-weight:500; }
/* phones: drop the shared header, stack each row into a labelled slab */
@media (max-width:760px){
  .cx-cmp caption{ display:block; width:100%; caption-side:top; margin:0 0 1.6rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line-soft); }
  .cx-cmp thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .cx-cmp, .cx-cmp tbody, .cx-cmp tr, .cx-cmp th, .cx-cmp td{ display:block; width:auto; }
  .cx-cmp tbody tr{
    margin-bottom:1.1rem; padding:1.15rem 1.2rem;
    border:1px solid var(--line); border-top:2px solid var(--gold-deep);
    background:linear-gradient(180deg,var(--slab-a),var(--slab-b));
  }
  .cx-cmp tbody th{
    width:auto; padding:0 0 .9rem; margin-bottom:.2rem;
    border-bottom:1px solid var(--line-soft); font-size:var(--step-1);
  }
  .cx-cmp tbody td{ width:auto; padding:.9rem 0 0; border-bottom:none; }
  .cx-cmp tbody td::before{
    content:attr(data-label); display:block;
    font-family:var(--label); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--bone-faint); margin-bottom:.4rem;
  }
  .cx-cmp tbody tr:last-child :is(th,td){ border-bottom:none; }
  .cx-cmp tbody tr:last-child th{ border-bottom:1px solid var(--line-soft); }
  .cx-cmp .cx-cmp-devis :is(th,td){ background:none; border-left:none; padding-left:0; }
  .cx-cmp tbody tr.cx-cmp-devis{ border-top:2px solid var(--gold); background:radial-gradient(120% 120% at 18% 0%, rgba(198,163,90,.08), transparent 58%), linear-gradient(180deg,var(--slab-a),var(--slab-b)); }
  .cx-cmp .cx-cmp-devis td::before{ color:var(--gold); }
}

/* ============================================================
   CINEMATIC CLOSES (2026-07-13, Gavin go) — platform / report /
   ask-devis reuse the homepage cinema--close machinery; these
   modifiers swap in each page's own graded poster still.
   ============================================================ */
.cinema--close.cx-cin-platform .cinema-media::before{ background-image:url("../assets/img/cin-platform-poster.jpg"); }
.cinema--close.cx-cin-report .cinema-media::before{ background-image:url("../assets/img/cin-report-poster.jpg"); }
.cinema--close.cx-cin-askdevis .cinema-media::before{ background-image:url("../assets/img/cin-askdevis-poster.jpg"); }

/* cinematic HEROES (2026-07-13, Gavin: hero video + different close video per page) —
   swap the shared .hero-media graded still for each page's own poster */
.hero--cinema.cx-cinh-platform .hero-media::before{ background-image:url("../assets/img/cinh-platform-poster.jpg"); }
.hero--cinema.cx-cinh-report .hero-media::before{ background-image:url("../assets/img/cinh-report-poster.jpg"); }
.hero--cinema.cx-cinh-askdevis .hero-media::before{ background-image:url("../assets/img/cinh-askdevis-poster.jpg"); }
.hero--cinema.cx-cinh-founding .hero-media::before{ background-image:url("../assets/img/cinh-founding-poster.jpg"); }
.cinema--close.cx-cin-founding .cinema-media::before{ background-image:url("../assets/img/cin-founding-poster.jpg"); }

/* ============================================================
   WHERE DEVIS FITS — market-category comparison (platform page).
   Desktop: a real <table>, dimension rows x category columns,
   hairline ledger, restrained gold on the DEVIS column (which
   leads, so it is bracketed on both edges). Below 1000px each
   row becomes its own labelled card.

   The explicit role= and headers/id attributes in the markup are
   load-bearing, not decoration: the card layout sets display:block
   on the table elements, which strips the implicit table roles and
   the scope= header association. Both are restored explicitly so
   assistive technology keeps column context on small screens.

   NOT sticky: body{overflow-x:hidden} in devis.css makes body a
   scroll container, so position:sticky is inert site-wide (the nav
   does not stick either). A sticky thead here would be a lie in
   code. Revisit only if that body rule changes to overflow-x:clip.

   All classes .cxfit- so nothing here can reach another page.
   ============================================================ */
.cxfit-wrap{ margin-top:2.9rem; }
.cxfit-table{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }

/* column ruler: dimension column + five equal category columns */
.cxfit-table thead th:nth-child(1){ width:15%; }
.cxfit-table thead th:nth-child(n+2){ width:17%; }

/* fixed table-layout + long compound words = overlap at large text sizes
   unless cells are allowed to break. Required for WCAG 1.4.4 (200% text). */
.cxfit-table :is(th,td), .cxfit-lab, .cxfit-eg{ overflow-wrap:break-word; }

.cxfit-table thead th{
  background:var(--ink);
  font-family:var(--label); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:400; text-align:left; vertical-align:bottom; color:var(--bone-dim);
  line-height:1.4; padding:1.1rem 1rem .95rem 0; box-shadow:inset 0 -1px 0 var(--line);
}
.cxfit-eg{
  display:block; margin-top:.4rem; font-family:var(--sans); font-size:.68rem;
  letter-spacing:.02em; text-transform:none; color:var(--bone-faint);
}
.cxfit-table tbody th{
  font-family:var(--serif); font-weight:500; font-size:var(--step-0); color:var(--bone);
  text-align:left; vertical-align:top; line-height:1.3;
  padding:1.15rem 1.3rem 1.15rem 0; border-bottom:1px solid var(--line-soft);
}
.cxfit-table tbody td{
  vertical-align:top; padding:1.15rem 1rem; border-bottom:1px solid var(--line-soft);
  color:var(--bone-dim); font-size:var(--step--1); line-height:1.55;
}
.cxfit-table tbody tr:last-child :is(th,td){ border-bottom:1px solid var(--line); }

/* the DEVIS column — a gold inflection, never a promotional shout. It leads the
   matrix rather than closing it, so it is bracketed on BOTH edges, otherwise the
   tint trails off into the next column instead of reading as a deliberate block. */
.cxfit-table thead th.cxfit-devis{
  color:var(--gold-bright); padding-left:1.1rem;
  border-left:2px solid var(--gold); border-right:1px solid var(--gold-deep);
  background:linear-gradient(rgba(198,163,90,.05),rgba(198,163,90,.05)), var(--ink);
}
.cxfit-table tbody td.cxfit-devis{
  background:rgba(198,163,90,.05); padding-left:1.1rem; color:var(--bone);
  border-left:2px solid var(--gold-deep); border-right:1px solid var(--gold-deep);
}

/* per-cell category label: a real DOM span (not generated content) so it is
   always available, hidden on desktop where the column header already says it */
.cxfit-lab{ display:none; }

/* laptop band — tighten before anything can crowd */
@media (min-width:1000px) and (max-width:1179px){
  .cxfit-table thead th{ font-size:.7rem; letter-spacing:.12em; padding-right:.75rem; }
  .cxfit-table tbody th{ font-size:.95rem; padding-right:.9rem; }
  .cxfit-table tbody td{ padding-left:.75rem; padding-right:.75rem; font-size:.82rem; }
  .cxfit-table tbody td.cxfit-devis, .cxfit-table thead th.cxfit-devis{ padding-left:.85rem; }
}

/* tablet and phone — one card per comparison dimension */
@media (max-width:999px){
  .cxfit-wrap{ margin-top:2.4rem; }
  .cxfit-table{ table-layout:auto; }
  .cxfit-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .cxfit-table, .cxfit-table tbody, .cxfit-table tr, .cxfit-table th, .cxfit-table td{
    display:block; width:auto;
  }
  .cxfit-table tbody tr{
    margin-bottom:1.15rem; padding:1.2rem 1.25rem;
    border:1px solid var(--line); border-top:2px solid var(--gold-deep);
    background:linear-gradient(180deg,var(--slab-a),var(--slab-b));
  }
  .cxfit-table tbody th{
    width:auto; padding:0 0 .9rem; font-size:var(--step-1);
    border-bottom:1px solid var(--line-soft);
  }
  .cxfit-table tbody td{
    width:auto; padding:.95rem 0 0; border-bottom:none; background:none;
    border-left:none; font-size:var(--step--1);
  }
  .cxfit-table tbody tr:last-child :is(th,td){ border-bottom:none; }
  .cxfit-table tbody tr:last-child th{ border-bottom:1px solid var(--line-soft); }
  .cxfit-table tbody td.cxfit-devis{
    color:var(--bone); border-left:2px solid var(--gold);
    padding:.95rem 0 .1rem .9rem; margin-top:.95rem;
  }
  /* .72rem rather than the .56-.62rem used for micro-labels elsewhere: on phones
     this label is the only thing carrying column context, so it stays legible */
  .cxfit-lab{
    display:block; font-family:var(--label); font-size:.72rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--bone-faint); margin-bottom:.45rem;
    line-height:1.35;
  }
  .cxfit-table tbody td.cxfit-devis .cxfit-lab{ color:var(--gold); }
}

/* --- the proof block above the matrix ------------------------------------
   Two lanes that are each individually correct, then the line that only
   appears when they are read together. It enacts the argument the matrix
   then documents. Copy mirrors the approved clean-on-the-surface field note. */
.cxfit-proof{ margin-top:2.9rem; max-width:900px; }
.cxfit-proof-k{
  font-family:var(--label); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim); margin:0 0 1.1rem;
}
.cxfit-proof-lanes{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.cxfit-lane{
  padding:1.25rem 1.35rem; border:1px solid var(--line); border-top:2px solid var(--gold-deep);
  background:linear-gradient(180deg,var(--slab-a),var(--slab-b));
}
.cxfit-lane-k{
  display:block; font-family:var(--label); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-faint); margin-bottom:.55rem;
}
.cxfit-lane p{ margin:0; color:var(--bone-dim); font-size:var(--step--1); line-height:1.55; }
.cxfit-join{
  margin-top:1.1rem; padding:1.25rem 1.35rem;
  border:1px solid var(--gold-deep); border-left:2px solid var(--gold);
  background:radial-gradient(120% 130% at 12% 0%, rgba(198,163,90,.09), transparent 60%),
             linear-gradient(180deg,var(--slab-a),var(--slab-b));
}
.cxfit-join p{ margin:0; color:var(--bone); line-height:1.6; }
.cxfit-join p.cxfit-join-line{ margin-top:.7rem; }
.cxfit-join-line b{ color:var(--gold-bright); font-weight:500; }
@media (max-width:700px){
  .cxfit-proof-lanes{ grid-template-columns:minmax(0,1fr); }
}

/* closing block under the matrix */
.cxfit-note{ margin-top:1.5rem; color:var(--bone-faint); font-size:var(--step--1); max-width:74ch; }
.cxfit-close{
  margin-top:3rem; max-width:62ch; padding-left:1.4rem;
  border-left:2px solid var(--gold-deep); color:var(--bone-dim);
}
.cxfit-close-h{
  font-family:var(--serif); font-weight:500; font-size:var(--step-1); line-height:1.25;
  color:var(--bone); margin:0 0 .7rem;
}
.cxfit-close p{ margin:0; }

/* a deal team will print or PDF this matrix for an IC pack; the site has no
   print stylesheet, so dark-on-dark would come out near-white on white paper */
@media print{
  .cxfit-table :is(th,td){ color:#000; background:none !important; border-color:#999; }
  .cxfit-table thead th{ box-shadow:none; border-bottom:1px solid #999; }
  .cxfit-lane, .cxfit-join{ background:none; border-color:#999; }
  .cxfit-lane p, .cxfit-join p, .cxfit-close, .cxfit-note{ color:#000; }
}