/* PipedriveExperts — one stylesheet, no webfonts, no external requests.
   Revised 2026-07-19: the first cut was tasteful but timid — near-invisible section
   alternation, an accent that never appeared at any size, and a single typeface doing
   everything. Same structure and copy; the contrast is now real. */
:root{
  /* Paper tones are now genuinely distinguishable. The old --paper-alt differed from
     white by ~4%, so alternating sections read as one continuous scroll. */
  --paper:#FFFFFF; --paper-alt:#E8EDF3; --paper-sunk:#D8E0E9;
  --ink:#131F33; --ink-2:#4A5568; --line:#C9D2DD;
  /* --accent is the text-safe brass (6.8:1 on white). --accent-bright is for dark
     surfaces and for large non-text fields, where the 3:1 floor applies. */
  --accent:#7A5312; --accent-bright:#E0AC55; --accent-mid:#B8811F;
  /* The one saturated field on the site, spent on the spec plate. Navy was the ink, so a
     navy plate could not read as an accent object — it read as more ink. */
  --plate:#5A2233; --plate-key:#D8AEB8;
  /* 2b re-skin (2026-07-20): dark chrome + dark hero. Deep navy for the utility bar so the
     header reads as two planes; light-on-dark text tones from the approved concept. */
  --ink-deep:#0D1626; --on-dark:#C6CFDC; --on-dark-muted:#9FACC0;
  --hairline-dark:rgba(255,255,255,.14); --hairline-dark-2:rgba(255,255,255,.2);
  --mono:Consolas,Menlo,ui-monospace,monospace;
  --focus:#0B5FCE; --focus-dark:var(--accent-bright); --ok:#1F5D50;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Georgia carries the headings. It ships everywhere, costs nothing, and gives the
     page the typographic contrast it completely lacked when one family did all of it. */
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6rem;
  --gutter:clamp(1.25rem,5vw,3rem); --radius:2px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.65 var(--sans);
  text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--radius)}
.utility :focus-visible,.band :focus-visible,.foot :focus-visible{outline-color:var(--focus-dark)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:50}
.skip:focus{left:0}
.wrap{width:min(72rem,100% - var(--gutter)*2);margin-inline:auto}
/* Headings: serif, and a full step larger than before. The h1 was topping out at
   3.25rem, which is a paragraph with ambitions rather than a headline. */
.h1{font-family:var(--serif);font-weight:700;
  font-size:clamp(2.35rem,1.5rem + 3.4vw,4.25rem);line-height:1.02;letter-spacing:-.02em;
  margin:0 0 var(--s3);max-width:19ch}
.h2{font-family:var(--serif);font-weight:700;
  font-size:clamp(1.7rem,1.3rem + 1.6vw,2.6rem);line-height:1.12;letter-spacing:-.012em;
  margin:0 0 var(--s2);max-width:26ch}
.h3{font-family:var(--serif);font-weight:700;font-size:1.1875rem;line-height:1.3;margin:0 0 var(--s1)}
.lede{font-size:clamp(1.09rem,1rem + .45vw,1.375rem);line-height:1.55;color:var(--ink-2);
  max-width:60ch;margin:0 0 var(--s3)}
p{max-width:68ch}
.small{font-size:.875rem}
.muted{color:var(--ink-2)}
/* The eyebrow now carries a short brass rule, so the accent has a physical presence on
   the page instead of existing only as 12px letterforms. */
.eyebrow{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  font-weight:700;margin:0 0 var(--s2);display:flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";flex:0 0 auto;width:1.75rem;height:3px;background:var(--accent-mid)}
section{padding-block:clamp(var(--s5),8vw,var(--s6))}
.alt{background:var(--paper-alt);border-block:1px solid var(--line)}
/* ---- asymmetric section layout ----
   Every section used to start at the same left edge with the same vertical rhythm, which is
   most of what made the page read as a document rather than a designed page. Headings now
   hang in a narrow left column and the body runs wider on the right, off the centre line.
   Excluded, deliberately: .hero and any section carrying an .h1 (a page title needs the full
   measure), .principal (already two-column), and .band — keeping the dark bands full-width
   is what makes them punctuate the split sections instead of continuing them. */
@media (min-width:68em){
  section:not(.hero):not(.principal):not(.band):not(.mk):not(:has(.h1)) > .wrap{
    display:grid;grid-template-columns:[head] 22rem [body] minmax(0,1fr);
    column-gap:var(--s5);align-items:start}
  section:not(.hero):not(.principal):not(.band):not(.mk):not(:has(.h1)) > .wrap > .eyebrow,
  section:not(.hero):not(.principal):not(.band):not(.mk):not(:has(.h1)) > .wrap > .h2{grid-column:head}
  section:not(.hero):not(.principal):not(.band):not(.mk):not(:has(.h1)) > .wrap > *:not(.eyebrow):not(.h2){
    grid-column:body}
  /* the full-width clamp tops out at 2.6rem, which wraps to about seven characters in a
     22rem column — the narrow column needs its own size, not the wide one */
  section:not(.hero):not(.principal):not(.band):not(.mk):not(:has(.h1)) > .wrap > .h2{
    font-size:2rem;max-width:none}
  /* bands get more vertical room than the split sections, so the page has two scales
     rather than one uniform rhythm */
  .band{padding-block:clamp(var(--s6),11vw,8.5rem)}
}
/* ---- utility bar + header (dark chrome, concept 2b) ---- */
.utility{background:var(--ink-deep);color:var(--on-dark);font-size:.8125rem}
.utility .wrap{display:flex;flex-wrap:wrap;gap:.4rem var(--s3);align-items:center;padding-block:.55rem}
.utility a{color:var(--accent-bright)}
.utility .contact{display:flex;flex-wrap:wrap;gap:.25rem var(--s3);margin:0;padding:0;list-style:none}
.lang{margin:0 0 0 auto;padding:0;list-style:none;display:flex;align-items:center;gap:.6rem}
.lang li + li{border-left:1px solid rgba(232,235,240,.45);padding-left:.6rem}
.lang [aria-current]{color:#fff;font-weight:700;text-decoration:none}
.head{background:var(--ink);border-bottom:1px solid var(--hairline-dark)}
.head .wrap{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;padding-block:var(--s2)}
.head :focus-visible{outline-color:var(--focus-dark)}
/* wordmark goes serif on the dark chrome — Georgia 700, white + brass-bright */
.wordmark{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;font-size:1.3125rem;
  color:#fff;text-decoration:none}
.wordmark span{color:var(--accent-bright)}
/* ---- nav: native details, no JS, no hardcoded open ---- */
#nav{margin-left:auto;width:100%}
#nav > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s1);min-height:44px;padding:.5rem .75rem;border:1px solid var(--hairline-dark-2);
  border-radius:var(--radius);font-weight:600;color:#fff}
#nav > summary::-webkit-details-marker{display:none}
#nav > summary::after{content:"▾";color:var(--accent-bright)}
#nav[open] > summary::after{content:"▴"}
.nav__panel{padding-top:var(--s2)}
.nav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.125rem}
.nav__list > li > a,.drop > summary{display:block;padding:.65rem .5rem;min-height:44px;text-decoration:none;
  color:var(--on-dark);font-weight:600;font-size:.90625rem;white-space:normal;border-radius:var(--radius)}
.nav__list a:hover,.drop > summary:hover{color:#fff}
.nav__list [aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent-bright);color:#fff}
.drop > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem}
.drop > summary::-webkit-details-marker{display:none}
.drop > summary::after{content:"▾";color:var(--accent);transition:transform 120ms ease}
.drop[open] > summary::after{content:"▴"}
.submenu{list-style:none;margin:0 0 var(--s2);padding:0 0 0 var(--s2);border-left:2px solid var(--hairline-dark-2);
  display:grid;gap:.125rem}
.submenu a{display:block;padding:.55rem .5rem;min-height:44px;text-decoration:none;color:var(--on-dark-muted);white-space:normal}
.submenu a:hover{color:#fff}
@media (min-width:62em){
  #nav{width:auto}
  /* a closed <details> size-contains its content subtree, so the panel below painted at zero
     width and the links stacked off-screen. Releasing containment is what makes the bar lay out. */
  #nav::details-content{content-visibility:visible;block-size:auto}
  #nav > summary{display:none}
  .nav__panel{display:block;padding-top:0}
  .nav__list{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.25rem var(--s1)}
  .nav__list > li{position:relative}
  .drop[open] .submenu{position:absolute;top:100%;left:0;z-index:20;background:var(--paper);
    border:1px solid var(--line);border-top:3px solid var(--accent-mid);
    box-shadow:0 12px 28px rgba(19,31,51,.14);margin:0;padding:var(--s2);
    width:max-content;min-width:28rem;max-width:min(90vw,40rem);
    grid-template-columns:repeat(2,minmax(14rem,1fr));gap:.125rem var(--s2)}
  /* the desktop dropdown pops over LIGHT paper — restore ink links inside it */
  .drop[open] .submenu a{color:var(--ink-2)}
  .drop[open] .submenu a:hover{color:var(--accent)}
}
/* ---- hero (dark, concept 2b) — only the homepage twins carry .hero ---- */
/* concept paddings (56/52px), not the page-wide section clamp: the hero's argument
   has to complete above a 1280×800 fold */
.hero{background:var(--ink);color:var(--on-dark);padding-block:3.5rem 3.25rem}
.hero .wrap{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:60em){.hero .wrap{grid-template-columns:1fr 26.5rem;align-items:start;gap:3rem}}
/* concept 2b sets the hero headline near 50px over 2 lines, not the page-wide 68px clamp;
   width-unconstrained so it breaks "…Nobody / ever finished…" like the approved mock */
.hero .h1{color:#fff;letter-spacing:-.01em;font-size:clamp(2rem,1.3rem + 2.2vw,3rem);
  line-height:1.1;max-width:none;margin-bottom:1.25rem}
.hero .lede{margin-bottom:1.25rem}
.hero .lede{color:var(--on-dark);max-width:36rem}
.hero .eyebrow{color:var(--accent-bright)}
.hero .eyebrow::before{background:var(--accent-bright)}
/* arrow points under the lede */
.points{list-style:none;margin:0 0 var(--s3);padding:0;display:grid;gap:.25rem;color:var(--on-dark)}
.points li{display:flex;gap:.6rem}
.points li::before{content:"→";color:var(--accent-bright);font-weight:600;flex:0 0 auto}
/* two-offer block: equal columns split by hairlines, labels above, captions below */
.offers{display:grid;grid-template-columns:1fr 1fr;max-width:40rem;border-top:1px solid var(--hairline-dark-2);
  margin-bottom:var(--s3)}
.offers > div{padding:1.25rem 1.6rem 1.4rem 0}
.offers > div + div{border-left:1px solid var(--hairline-dark-2);padding:1.25rem 0 1.4rem 1.6rem}
.offers .label{font-size:.71875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-bright);
  font-weight:600;margin:0 0 .875rem}
.offers .cap{font-size:.84375rem;line-height:1.55;color:var(--on-dark-muted);margin:.75rem 0 0}
.offers .cap-first{margin:0 0 .75rem}
@media (max-width:38em){.offers{grid-template-columns:1fr}
  .offers > div{padding-right:0}.offers > div + div{border-left:0;border-top:1px solid var(--hairline-dark-2);padding-left:0}}
/* signature row: small portrait + first-person line */
.signature{display:flex;gap:1.125rem;align-items:flex-start;border-top:1px solid var(--hairline-dark-2);
  padding-top:1.375rem;max-width:40rem}
.signature img{width:4.75rem;aspect-ratio:4/5;object-fit:cover;object-position:50% 15%;
  border-top:3px solid var(--accent-bright)}
.signature p{font-size:.875rem;line-height:1.6;color:var(--on-dark);margin:0}
/* the automation-rule artifact: monospace condition chain */
.chain{display:grid;margin:0}
.chain .step{background:rgba(255,255,255,.06);border:1px solid var(--hairline-dark-2);
  padding:.875rem 1rem;font:400 .875rem/1.5 var(--mono);color:#fff}
.chain .step + .step{position:relative;margin-top:18px}
.chain .step + .step::before{content:"";position:absolute;top:-19px;left:28px;width:2px;height:18px;
  background:var(--accent-mid)}
.chain .step-out{background:var(--accent-bright);border-color:var(--accent-bright);color:var(--ink);font-weight:600}
.chain .chip{background:var(--plate);color:var(--plate-key);padding:2px 8px}
.chain .hot{color:var(--accent-bright)}
.artifact-cap{font-family:var(--serif);font-style:italic;font-size:.84375rem;line-height:1.55;
  color:var(--on-dark-muted);margin:.75rem 0 0}
/* section-marker grammar: rule + caps label; replaces the eyebrow on marked sections
   (the [NN] numbers were removed 2026-07-20 at Joe's request — label + long rule remain) */
.mark{display:flex;align-items:center;gap:.75rem;margin:0 0 var(--s3)}
.mark::before{content:"";width:7.5rem;height:1px;background:var(--accent-mid)}
.mark span{font-size:.71875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  font-weight:600}
.band .mark{margin-bottom:.75rem}
.band .mark span{color:var(--accent-bright)}
.band .mark::before{background:var(--accent-bright)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.btn{display:inline-block;padding:.85rem 1.4rem;min-height:44px;border-radius:var(--radius);
  font-weight:700;text-decoration:none;white-space:normal;border:2px solid var(--ink)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000;border-color:#000}
.btn-secondary{background:transparent;color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:#fff}
/* buttons on dark grounds (hero + bands): brass primary, white-outline secondary */
.hero .btn-primary{background:var(--accent-bright);border-color:var(--accent-bright);color:var(--ink)}
.hero .btn-primary:hover{background:#EFC276;border-color:#EFC276}
.hero .btn-secondary{border:1px solid #fff;color:#fff;background:transparent;font-weight:600}
.hero .btn-secondary:hover{background:#fff;color:var(--ink)}
/* The spec plate is meant to be the site's signature object, so it now reads as one:
   a dark datasheet rather than a pale grey box that disappeared into the page. */
.plate{background:var(--plate);color:#E8EBF0;border:0;border-top:4px solid var(--accent-bright);
  border-radius:var(--radius);padding:var(--s3)}
.plate dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.55rem var(--s2);font-size:.9375rem}
/* warm key against the oxblood; the old #9FAEC2 was a cool grey mixed for navy */
.plate dt{color:var(--plate-key);white-space:normal}
.plate dd{margin:0;font-weight:600;color:#fff}
/* ---- lists, tables, method spine ---- */
.stack{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.stack > li{border-bottom:1px solid var(--line);padding-block:var(--s3)}
.stack .h3{margin-bottom:.25rem}
.method{list-style:none;margin:0;padding:0 0 0 var(--s4);position:relative}
.method::before{content:"";position:absolute;left:.9rem;top:.6rem;bottom:.6rem;width:3px;background:var(--accent-mid)}
.method > li{position:relative;padding-block:0 var(--s4)}
.method > li:last-child{padding-bottom:0}
/* Filled with the darker --accent, not --accent-mid: white on #B8811F is only 3.39:1,
   under the 4.5 floor for 13px bold. On #7A5312 it is 6.8:1. */
.method .num{position:absolute;left:calc(-1 * var(--s4));top:0;width:2rem;height:2rem;border-radius:50%;
  background:var(--accent);border:2px solid var(--accent);color:#fff;font-size:.8125rem;
  font-weight:800;display:flex;align-items:center;justify-content:center}
.alt .method .num{box-shadow:0 0 0 4px var(--paper-alt)}
.scroller{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.9375rem}
/* break-word, not anywhere: `anywhere` also lets a column size below its longest word, which
   is what split "Negotiation" and "Specification" mid-word. Narrow screens are already handled
   by .scroller's horizontal scroll, so nothing needs to break inside a word. */
th,td{text-align:left;padding:.75rem var(--s2);border-bottom:1px solid var(--line);vertical-align:top;
  overflow-wrap:break-word}
thead th{background:var(--ink);color:#fff;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
tbody tr:last-child td{border-bottom:0}
caption{caption-side:bottom;padding-top:.6rem;text-align:left}
.out{color:var(--ink-2)}
.in{color:var(--ok);font-weight:600}
.rule{background:var(--paper-sunk);border:0;border-left:4px solid var(--accent-mid);
  border-radius:var(--radius);padding:var(--s3);margin-top:var(--s3)}
.rule p{margin-top:0}
.rule .cond{font-size:.875rem;color:var(--ink-2);margin-bottom:0}
/* ---- principal ---- */
.principal .wrap{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:52em){.principal .wrap{grid-template-columns:16rem 1fr;gap:var(--s5)}}
.portrait{margin:0}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--paper-sunk);
  border:0;border-bottom:4px solid var(--accent-mid);border-radius:var(--radius)}
.portrait figcaption{font-size:.8125rem;color:var(--ink-2);margin-top:.6rem}
/* The serif is the site's voice-of-the-principal signal, so it is set larger than body
   text and given room, not tucked in at the same size. */
.voice{font-family:var(--serif);font-size:1.1875rem;line-height:1.7;color:var(--ink)}
/* the process coda: breathing room between the numbered spine and the signature line */
.method + .voice{margin-top:var(--s4)}
.voice p{max-width:60ch}
.sig{font-family:var(--serif);font-style:italic;color:var(--ink-2);margin-top:var(--s3)}
/* ---- dark bands: the page's punctuation ---- */
.band{background:var(--ink);color:#E8EBF0;border-block:0}
.band .h1,.band .h2,.band .h3{color:#fff}
.band .lede{color:#C3CEDC}
.band a{color:var(--accent-bright)}
.band .eyebrow{color:var(--accent-bright)}
.band .eyebrow::before{background:var(--accent-bright)}
.band .stack{border-top-color:var(--accent-bright)}
.band .stack > li{border-bottom-color:rgba(232,235,240,.22)}
.band .muted{color:#A9B7C8}
.band .btn{border-color:var(--accent-bright);background:var(--accent-bright);color:var(--ink)}
.band .btn:hover{background:#EFC276;border-color:#EFC276}
.band .btn-secondary{background:transparent;color:#fff}
.band .btn-secondary:hover{background:#fff;color:var(--ink)}
.price{font-family:var(--serif);font-size:clamp(2rem,1.5rem + 1.8vw,3rem);font-weight:700;
  color:#fff;margin:0 0 var(--s1)}
.grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));align-content:start}
/* ---- q&a ---- */
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s2);padding-block:var(--s2);font-weight:600;min-height:44px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:0 0 auto;color:var(--accent);font-weight:800;line-height:1.4}
.qa[open] summary::after{content:"–"}
.qa > p{padding-bottom:var(--s2);margin-top:0}
/* ---- embeds ---- */
.embed{border:1px solid var(--line);border-top:3px solid var(--accent-mid);border-radius:var(--radius);
  padding:var(--s3);min-height:12rem;background:var(--paper)}
.embed > *{max-width:100%}
/* ---- footer ---- */
.foot{background:var(--ink);color:#C9D1DC;padding-block:var(--s5) var(--s4);font-size:.9375rem;
  border-top:4px solid var(--accent-mid)}
.foot a{color:#E8EBF0;text-decoration:none}
.foot a:hover{color:var(--accent-bright);text-decoration:underline}
.foot h2{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-bright);margin:0 0 var(--s2)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot .plate{background:transparent;border:1px solid rgba(232,235,240,.28);border-top:3px solid var(--accent-bright)}
.foot .plate dt{color:#9FAEC2}
.foot .plate dd{color:#fff}
.colophon{border-top:1px solid rgba(232,235,240,.28);margin-top:var(--s4);padding-top:var(--s3);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;font-size:.875rem}
.colophon .lang{margin-left:auto}
.colophon .lang li + li{border-left-color:rgba(232,235,240,.45)}
/* ---- integrations ticker (concept 2b): text wordmarks on an infinite marquee ---- */
.ticker-band{padding-block:var(--s3) 1.75rem;border-block:1px solid #E2E7EE}
.ticker-label{text-align:center;font-size:.71875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin:0 0 1.25rem}
.ticker{overflow:hidden}
.ticker-track{display:flex;width:max-content;animation:ticker 36s linear infinite}
.ticker-set{display:flex;align-items:center;gap:4.5rem;padding-right:4.5rem;margin:0;padding-left:0;list-style:none}
/* one step darker than the concept's #8A96A8, which sat at exactly 3.0:1 on white */
.ticker-set li{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:1.1875rem;
  color:#6E7C90;white-space:nowrap}
/* brand marks, pre-tinted #6E7C90 in the SVG files themselves (assets/logos/) */
.ticker-set img{height:1.25rem;width:auto}
.ticker-set img.wm{height:1.05rem}
@keyframes ticker{to{transform:translateX(-50%)}}
/* ---- pipeline stage cards (evidence section) ---- */
.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:.875rem;list-style:none;margin:0 0 var(--s4);padding:0}
.stage{background:var(--paper);border:1px solid #C9D3DF;border-top:3px solid var(--ink);padding:1rem}
.stage .h3{font-size:.9375rem;margin-bottom:.5rem}
.stage p{font-size:.8125rem;line-height:1.5;color:var(--ink-2);margin:0 0 .4rem}
.stage .exit{color:#5A6A85}
.stage-hot{border-color:var(--plate);border-top-color:var(--plate)}
.stage-hot .h3{color:var(--plate)}
@media (max-width:60em){.stages{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}}
/* ---- before / after cards ---- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);align-items:stretch}
@media (max-width:52em){.ba{grid-template-columns:1fr}}
.ba-card{padding:1.625rem 1.75rem}
.ba-before{background:var(--paper-alt);border:1px solid #C9D3DF}
.ba-after{background:var(--paper);border:1px solid #C9D3DF;border-top:3px solid var(--accent-mid)}
.ba-card .label{font-size:.71875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  margin:0 0 1.25rem}
.ba-before .label{color:#5A6A85}
.ba-after .label{color:var(--accent)}
.ba-card ul{list-style:none;margin:0;padding:0;display:grid;gap:1.125rem}
.ba-card li{display:flex;gap:.75rem;align-items:flex-start}
.ba-card li::before{flex:0 0 auto;font-weight:700;font-size:.9375rem;line-height:1.4}
.ba-before li::before{content:"×";color:#8A96A8}
.ba-after li::before{content:"✓";color:var(--accent)}
.ba-card b{display:block;font-size:.9375rem;line-height:1.4;color:var(--ink);font-weight:600}
.ba-card li p{font-size:.84375rem;line-height:1.5;color:#5A6A85;margin:.2rem 0 0}
/* ---- diagnostic price plate (dark band, oxblood) ---- */
.band-split{display:grid;gap:var(--s4);align-items:center}
@media (min-width:60em){.band-split{grid-template-columns:minmax(0,39rem) auto;justify-content:space-between}}
.priceplate{background:var(--plate);border-top:3px solid var(--accent-mid);padding:1.625rem 2rem;
  text-align:center;align-self:center}
.priceplate .label{font-size:.8125rem;color:var(--plate-key);margin:0 0 .625rem}
.priceplate .price{font-family:var(--serif);font-weight:700;font-size:2.75rem;line-height:1;color:#fff;
  margin:0 0 1.25rem}
:lang(fr) .h1,:lang(fr) .h2{letter-spacing:-.008em}
/* No auto-hyphenation anywhere — Joe's ruling 2026-07-20 (headings first, then body text:
   "I simply find it easier to read without them"). French wraps whole words like the English
   pages always have; tables keep their break-word backstop for genuinely oversized words. */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}