/* ============================================================
   /brandbook — rendered in the system it documents.
   Nothing below is a literal colour: everything comes from mc-tokens.css.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:100%; -webkit-text-size-adjust:100%; }

body.bb{
  margin:0;
  font-family:var(--f-ui); font-stretch:100%; font-weight:400;
  font-size:var(--t-body); line-height:1.55;
  color:var(--mc-ink-2); background:var(--mc-surface);
  font-optical-sizing:auto; text-rendering:optimizeLegibility;
}

.bb-wrap{ max-width:var(--mc-container); margin:0 auto; padding:0 var(--mc-gutter-m); }
@media (min-width:768px){ .bb-wrap{ padding:0 var(--mc-gutter-d); } }

/* every interactive element, without exception */
a,button,input,select,textarea,summary,label,[role="button"]{
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--mc-focus); outline-offset:var(--s-1); }
.on-navy :focus-visible{ outline-color:var(--mc-on-navy); }

/* ---- type ------------------------------------------------ */
h1,h2,h3,h4{ font-family:var(--f-ui); font-weight:600; color:var(--mc-ink); margin:0; }
h1{ font-size:var(--t-h1); line-height:1.06; letter-spacing:-.03em; text-wrap:balance; }
h2{ font-size:var(--t-h2); font-weight:700; line-height:1.1; letter-spacing:-.05em; text-wrap:balance; }  /* car-planet's 40px h2: 700, -0.05em */
h3{ font-size:var(--t-h3); line-height:1.30; letter-spacing:-.012em; }
h4{ font-size:var(--t-value); line-height:1.3; }
.bb-display{ font-size:var(--t-display); line-height:1.06; font-weight:700;
  letter-spacing:-.03em;  color:var(--mc-ink); margin:0; }
p{ margin:0 0 var(--s-4); }
.bb-prose{ font-size:var(--t-prose); line-height:1.62;
  color:var(--mc-ink-2); max-width:44ch; }   /* 44ch = 544.1px at 18px, 421.3px at 14px. Longest line rendered: 66-69 chars,
     measured by walking a Range per character with whitespace runs collapsed. An
     earlier note said 75 — that count included the newlines and indentation of the
     Blade source, which the browser collapses. Do not count text.length/lines. */
.bb-label{ font-size:var(--t-label); line-height:1.30; font-weight:500;
  letter-spacing:.010em; color:var(--mc-ink-3); }
.bb-small{ font-size:var(--t-small); line-height:1.45; }
.bb-section > p.bb-small,.bb-foot p.bb-small{ max-width:44ch; }
#voice table.bb-t{ table-layout:fixed; width:auto; max-width:100%; }
#voice table.bb-t th:first-child{ width:13.15rem; }   /* 22ch at the table's own 14px */
#voice table.bb-t th:last-child{ width:26.3rem; }     /* 44ch, the book's prose measure */
/* the table inside a note lives in a 471px box, so 210 + 421 cannot fit: it shares the
   ratio instead of the absolute widths */
#voice .bb-note table.bb-t{ width:100%; }
#voice .bb-note table.bb-t td:first-child{ width:33%; }
@media (max-width:600px){ #voice table.bb-t th:first-child,#voice .bb-note table.bb-t td:first-child{ width:35%; } }
.bb-note table.bb-t tr:last-child td{ border-bottom:0; }
/* one family. Code is the same face, medium weight, tabular — not the viewer's OS mono */
code,.bb-mono{ font-family:var(--f-ui); font-weight:500; font-variant-numeric:tabular-nums;
  font-size:var(--t-small); color:var(--mc-ink); }
.bb-top code,.bb-foot code{ color:var(--mc-on-navy); }

/* ---- status chips — decided / proposed / your call -------- */
.bb-st{ display:inline-flex; align-items:center; gap:var(--s-2);
  padding:var(--s-1) var(--s-2); border-radius:var(--mc-r-s);
  font-size:var(--t-label); font-weight:500; line-height:1.3; letter-spacing:.010em;
  white-space:nowrap; border:1px solid; vertical-align:middle; }
.bb-st::before{ content:""; width:8px; height:8px; flex:0 0 auto; background:currentColor; }
.bb-st--fixed{ color:var(--mc-ink-2);  border-color:var(--mc-control); }
.bb-st--prop { color:var(--mc-blue);   border-color:var(--mc-blue); }
.bb-st--you  { color:var(--mc-accent); border-color:var(--mc-accent); }

/* ---- sections -------------------------------------------- */
.bb-section{ padding:var(--s-8) 0; }
.bb-head{ margin-bottom:var(--s-6); }
.bb-head h2{ margin-bottom:var(--s-4); }

.bb-num{ display:block; margin-bottom:var(--s-2); }

/* ---- masthead / footer ----------------------------------- */
.bb-top{ background:var(--mc-navy); color:var(--mc-on-navy-2);
  padding:var(--s-7) 0 var(--s-8); }
.bb-top .bb-display,.bb-top h2{ color:var(--mc-on-navy); }
.bb-top .bb-prose,.bb-top .bb-label{ color:var(--mc-on-navy-2); }
.bb-meta{ display:flex; flex-wrap:wrap; gap:var(--s-5); margin-top:var(--s-6);
  padding-top:var(--s-5); border-top:1px solid var(--mc-navy-line); }
.bb-meta b{ display:block; font-size:var(--t-value); font-weight:600; line-height:1.3; color:var(--mc-on-navy); }
.bb-meta .bb-label{ display:block; margin-bottom:var(--s-1); }
.bb-toc .bb-label{ flex:0 0 2ch; font-variant-numeric:tabular-nums; }
.bb-foot{ background:var(--mc-navy); color:var(--mc-on-navy-2);
  padding:var(--s-8) 0 var(--s-6); margin-top:0; }
.bb-foot h2{ color:var(--mc-on-navy); }

.bb-mark{ font-size:clamp(3rem,14vw,11rem); line-height:.86; font-weight:700;
  letter-spacing:-.05em; margin:var(--s-7) 0 0;
  overflow:hidden; }

/* ---- contents -------------------------------------------- */
.bb-toc{ display:grid; gap:0; margin:0; padding:0; list-style:none; }
@media (min-width:640px){ .bb-toc{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .bb-toc{ grid-template-columns:repeat(3,1fr); } }
.bb-toc > *{ min-width:0; }
.bb-toc a{ display:flex; gap:var(--s-3); align-items:baseline; min-height:var(--mc-tap);
  padding:var(--s-3) 0; border-bottom:1px solid var(--mc-hairline);
  color:var(--mc-ink); text-decoration:none;
  transition:color var(--m-quick) var(--e-out); }
.bb-toc a:hover{ color:var(--mc-blue); }

/* ---- swatches -------------------------------------------- */
.bb-grid{ display:grid; gap:var(--s-4); grid-template-columns:1fr; }
@media (min-width:560px){ .bb-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .bb-grid{ grid-template-columns:repeat(3,1fr); } }
.bb-grid > *{ min-width:0; }
.bb-sw{ border:1px solid var(--mc-hairline); background:var(--mc-surface); border-radius:var(--mc-r-l); overflow:hidden; box-shadow:var(--mc-shadow-1); }
.bb-sw-chip{ height:var(--s-9); display:flex; align-items:flex-end; padding:var(--s-3);
  font-size:var(--t-label); font-weight:500; line-height:1.3; letter-spacing:.010em; }
.bb-sw-body{ padding:var(--s-3); border-top:1px solid var(--mc-hairline); }
.bb-sw-body code{ display:block; margin-bottom:var(--s-1); line-height:1.45; }
.bb-sw-body p{ margin:0; font-size:var(--t-small); line-height:1.45; color:var(--mc-ink-3); }

/* ---- tables ---------------------------------------------- */
.bb-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain; max-width:100%; min-width:0; }
table.bb-t{ width:100%; min-width:560px; border-collapse:collapse; font-size:var(--t-small); line-height:1.45; }
#colour table.bb-t,#type table.bb-t,#voice table.bb-t,#appendix table.bb-t,#wall table.bb-t,.bb-note table.bb-t{ min-width:0; }
@media (max-width:600px){ #wall table.bb-t th{ white-space:normal; } }
#type table.bb-t td:first-child{ white-space:nowrap; }
@media (max-width:600px){ #type table.bb-t th:nth-child(2){ white-space:normal; } }
#signoff table.bb-t td:first-child{ white-space:nowrap; }
#contrast table.bb-t td:last-child{ white-space:nowrap; }
#signoff table.bb-t th:nth-child(n+4){ text-align:center; }
/* vertical-align:middle cannot centre a block-level flex child, so the row does it */
#signoff table.bb-t td:nth-child(n+4){ padding:0; }
#signoff .mc-check{ align-items:center; height:100%; margin:0; padding:0; min-height:var(--mc-tap-pref); }
#signoff .mc-check input{ margin:0; }
#signoff table.bb-t td{ vertical-align:middle; }   /* the 48px checkbox rows centre; the ID must sit with them */
#photos table.bb-t{ min-width:0; } #photos table.bb-t th:last-child{ white-space:normal; }
@media (max-width:600px){ #signoff table.bb-t{ min-width:0; } #signoff table.bb-t th:nth-child(3),#signoff table.bb-t td:nth-child(3){ display:none; }
  #signoff table.bb-t th,#signoff table.bb-t td{ padding-right:var(--s-2); }   /* 360 → under 358: the last 2px were cell padding */ }
/* the order tables carry a 19-line prose column; on a phone they stack instead of scroll */
@media (max-width:600px){
  #order table.bb-t{ min-width:0; }
  #order table.bb-t thead{ display:none; }
  #order table.bb-t tr{ display:grid; grid-template-columns:3ch minmax(0,1fr); column-gap:var(--s-3);
    padding:var(--s-3) 0; border-bottom:1px solid var(--mc-hairline); }
  #order table.bb-t td{ display:block; padding:0 0 var(--s-2); border:0; }
  #order table.bb-t td:first-child{ grid-row:1 / span 4; }
  #order table.bb-t td:nth-child(n+2){ grid-column:2; }
  #order table.bb-t td:last-child{ padding-bottom:0; }
  #order .bb-t--qa td:first-child{ font-weight:600; color:var(--mc-ink); }
  #order table.bb-t:has(.bb-num-cell) td:last-child{ font-size:var(--t-label); color:var(--mc-ink-3); }   /* the header is hidden here; the question must outweigh its answer */
  /* the stack above is for the #-numbered tables; prose-first tables stack in one column */
  #order table.bb-t:not(:has(.bb-num-cell)) tr{ grid-template-columns:minmax(0,1fr); }
  #order table.bb-t:not(:has(.bb-num-cell)) td:first-child{ grid-row:auto; }
  #order table.bb-t:not(:has(.bb-num-cell)) td:nth-child(n+2){ grid-column:1; }
}
/* a five-column table that must scroll says so at its edge */
/* the fade signals overflow. It is applied only to containers that scroll, by a
   3-line script at the foot of the page (a class, not a selector guess). */
.bb-scroll.is-overflowing,.bb-ruler.is-overflowing{ mask-image:linear-gradient(90deg,#000 calc(100% - var(--s-6)),transparent); }
table.bb-t th,table.bb-t td{ text-align:left; padding:var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom:1px solid var(--mc-hairline); vertical-align:top; }
table.bb-t th{ font-size:var(--t-label); font-weight:500; line-height:1.3; letter-spacing:.010em;
  color:var(--mc-ink-3); border-bottom:1px solid var(--mc-rule); white-space:nowrap; }
table.bb-t td b{ font-weight:600; color:var(--mc-ink); }
@media (min-width:601px){ #order table.bb-t,#wall table.bb-t{ width:auto; max-width:100%; } }
#order table.bb-t td .bb-st{ display:flex; width:max-content; margin-top:var(--s-1); }   /* prose columns hold 52ch, not 133 */
/* specificity: table.bb-t td (0,1,2) outranked .bb-num-cell (0,1,0), so right-align never applied */
table.bb-t .bb-num-cell,.bb-num-cell{ font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.bb-pass{ color:var(--mc-ink); font-weight:600; }
.bb-fail{ color:var(--mc-accent); font-weight:600; }
.bb-exempt{ color:var(--mc-ink-3); }
.bb-pair-chip{ display:inline-flex; align-items:center; font-size:var(--t-small); font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bb-pair-chip i{ display:inline-block; width:var(--s-4); height:var(--s-4); margin-right:var(--s-1);
  border:1px solid var(--mc-control); flex:0 0 auto; }   /* 3.61:1 — 20 of these swatches are white */
.bb-pair-chip i + i{ margin-right:var(--s-2); }
table.bb-t .bb-mono{ overflow-wrap:anywhere; }

/* ---- do / don't / note ----------------------------------- */
.bb-two{ display:grid; gap:var(--s-5); grid-template-columns:1fr; }
@media (min-width:760px){ .bb-two{ grid-template-columns:repeat(2,minmax(0,471px)); } }
.bb-two > *{ min-width:0; }
.bb-section > .bb-do,.bb-section > .bb-dont,.bb-section > .bb-note{ max-width:471px; }   /* the 44ch measure + padding + borders */
.bb-do,.bb-dont,.bb-note{ position:relative; padding:var(--s-4) var(--s-5); border-radius:var(--mc-r-l);
  border:1px solid var(--mc-hairline); background:var(--mc-bg); }
/* the semantic stripe stops short of the 22px arcs: a 3px bar that tapers to 1px and
   blends hue across a corner reads as an artefact, not a rule */
.bb-do::before,.bb-dont::before,.bb-note::before{ content:""; position:absolute;
  left:-1px; top:var(--mc-r-l); bottom:var(--mc-r-l); width:3px; }
.bb-do::before{ background:var(--mc-blue); }
.bb-dont::before{ background:var(--mc-accent); }
.bb-note::before{ background:var(--mc-warn); }
.bb-note--bad::before{ background:var(--mc-accent); }   /* a live defect, not an advisory */
.bb-do ul,.bb-dont ul{ margin:0; padding-left:var(--s-4); }
.bb-do li,.bb-dont li{ margin-bottom:var(--s-2); font-size:var(--t-small); line-height:1.45; }
.bb-two h3,.bb-do h3,.bb-dont h3,.bb-note h3{ margin-bottom:var(--s-4); }
.bb-do p,.bb-do li,.bb-dont p,.bb-dont li,.bb-note p,.bb-note li{
  font-size:var(--t-small); line-height:1.45; max-width:44ch; }
.bb-st{ padding-block:0; }   /* 18.9px: fits the 21.7 paragraph pitch and the 23.4 h3 line */
.bb-el__name,.mc-empty__t{ line-height:1.3; letter-spacing:-.012em; }
.bb-note ul{ margin:0; padding-left:var(--s-4); } .bb-note li{ margin-bottom:var(--s-2); font-size:var(--t-small); } .bb-note li:last-child{ margin-bottom:0; }
.bb-section > h3{ margin:var(--s-6) 0 var(--s-4); }
b,strong{ font-weight:600; color:var(--mc-ink); } .bb-top b,.bb-foot b{ color:var(--mc-on-navy); }
.bb-display,h3{ text-wrap:balance; }
#ref table.bb-t th:nth-child(2){ width:9ch; }
.bb-toc{ row-gap:var(--s-2); column-gap:var(--s-5); } .bb-toc a:hover .bb-label{ color:inherit; }
.bb-stagecap{ font-weight:500; }
.bb-mark{ color:var(--mc-navy-line); }
@media (max-width:639px){ .bb-meta{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4) var(--s-5); }
  .bb-meta > div:last-child:nth-child(odd){ grid-column:1 / -1; } }
.bb-note p:last-child,.bb-do li:last-child,.bb-dont li:last-child{ margin-bottom:0; }
.bb-ruler{ display:flex; align-items:flex-end; gap:var(--s-2); flex-wrap:nowrap; overflow-x:auto; padding-bottom:var(--s-5); }
.bb-ruler div{ position:relative; flex:0 0 auto; }
.bb-ruler .bb-label{ position:absolute; left:0; top:24px; }
.bb-ruler span:first-child{ display:block; background:var(--mc-ink); height:24px; }

/* ============================================================
   THE ELEMENTS GALLERY
   ============================================================ */
.bb-el{ border:1px solid var(--mc-hairline); background:var(--mc-surface); border-radius:var(--mc-r-l);
  box-shadow:var(--mc-shadow-1); overflow:hidden; margin-bottom:var(--s-6); }
.bb-el__bar{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2) var(--s-4);
  padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--mc-rule); }
.bb-el__id{ font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:.010em;
  font-size:var(--t-label); color:var(--mc-ink-3); }
.bb-el__name{ font-size:var(--t-h3); font-weight:600; color:var(--mc-ink);
  letter-spacing:-.012em; }
.bb-el__where{ font-size:var(--t-small); color:var(--mc-ink-3); margin-left:auto; }
.bb-el__stage{ background:var(--mc-bg); padding:var(--s-5); }
.bb-el__stage--navy{ background:var(--mc-navy); }
.bb-el__stage--flush{ padding:0; }
/* gap:1px over a rule-coloured ground draws the hairlines between state cells — this is
   a border technique, not a spacing value, and it is the only 1px gap in the system */
.bb-el__states{ display:grid; gap:1px; background:var(--mc-rule);
  border-top:1px solid var(--mc-rule);
  grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:640px){ .bb-el__states{ grid-template-columns:1fr; } }
.bb-state .mc-btn{ white-space:nowrap; }
.bb-state{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3);
  padding:var(--s-4); background:var(--mc-surface); min-width:0; }
.bb-el__why{ margin:0; padding:var(--s-4); border-top:1px solid var(--mc-hairline);
  padding-right:max(var(--s-4), calc(100% - 44ch - var(--s-4)));
  background:var(--mc-bg);
  font-size:var(--t-small); line-height:1.55; color:var(--mc-ink-2); }
.bb-el__why b{ color:var(--mc-ink); font-weight:600; }
.bb-sign{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-4); border-top:1px solid var(--mc-rule); }
.bb-sign__box{ display:inline-flex; align-items:center; min-height:var(--mc-tap);
  padding:var(--s-2) var(--s-3); border:1px solid var(--mc-control); border-radius:var(--mc-r-s);
  font-size:var(--t-small); color:var(--mc-ink-2); }
.bb-sign__box::before{ content:""; width:16px; height:16px; margin-right:var(--s-2);
  border:1px solid var(--mc-ink); flex:0 0 auto; }
.bb-sign__note{ flex:1 1 12rem; min-width:0; font-size:var(--t-small);
  color:var(--mc-ink-3); border-bottom:1px solid var(--mc-rule); min-height:var(--mc-tap); }

/* ============================================================
   THE REAL COMPONENTS — this is the site's CSS, not a mock-up
   ============================================================ */

/* ---- buttons: one base, four variants -------------------- */
.mc-btn{
  --btn-bg:var(--mc-blue); --btn-fg:var(--mc-surface); --btn-bd:var(--mc-blue);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:var(--s-2);
  min-height:var(--mc-tap-pref); min-width:var(--mc-tap-pref);
  padding:var(--s-3) var(--s-5);
  font-family:var(--f-ui); font-size:var(--t-ui); font-weight:700; line-height:1.2;
  text-align:center; text-decoration:none;
  color:var(--btn-fg); background:var(--btn-bg); border:1px solid var(--btn-bd);
  border-radius:var(--mc-r); cursor:pointer; user-select:none;
  transition:background var(--m-quick) var(--e-out),
             border-color var(--m-quick) var(--e-out),
             color var(--m-quick) var(--e-out);
}
.mc-btn:hover,.mc-btn.is-hover{ --btn-bg:var(--mc-blue-dark); --btn-bd:var(--mc-blue-dark); }
.mc-btn:active,.mc-btn.is-active{ --btn-bg:var(--mc-navy); --btn-bd:var(--mc-navy);
  transition-duration:var(--m-instant); }
/* Two rings. A single ink ring on the blue fill measures 2.40:1 and fails
   SC 1.4.11; the white inner ring means ink only ever touches white. */
/* Two rings, and no box-shadow: a single ink ring drawn straight onto the blue
   fill measures 2.40:1 and fails SC 1.4.11. The white ring sits between them, so
   ink only ever touches white. Built from a border, not a shadow, so the
   zero-elevation rule keeps no exceptions. */
.mc-btn:focus-visible,.mc-btn.is-focus{
  outline:3px solid var(--mc-focus); outline-offset:var(--s-1); }
.mc-btn:focus-visible::after,.mc-btn.is-focus::after{
  content:""; position:absolute; inset:calc(-1px - var(--s-1));
  border:var(--s-1) solid var(--mc-focus-inner); pointer-events:none; }
.mc-btn[disabled],.mc-btn.is-disabled{
  --btn-bg:var(--mc-band); --btn-fg:var(--mc-ink-3); --btn-bd:var(--mc-rule);
  cursor:not-allowed; }

.mc-btn--cta{ --btn-bg:var(--mc-wa); --btn-bd:var(--mc-wa); }
.mc-btn--cta:hover,.mc-btn--cta.is-hover{ --btn-bg:var(--mc-wa-dark); --btn-bd:var(--mc-wa-dark); }
/* the WhatsApp mark, in the label's own colour, without touching the markup */
.mc-btn--cta::before{ content:""; flex:0 0 auto; width:20px; height:20px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M13.6 2.33A7.94 7.94 0 0 0 8 0a7.9 7.9 0 0 0-6.85 11.9L0 16l4.2-1.1A7.9 7.9 0 0 0 8 15.85 7.92 7.92 0 0 0 13.6 2.33ZM8 14.5a6.6 6.6 0 0 1-3.35-.92l-.24-.14-2.49.65.66-2.43-.16-.25A6.57 6.57 0 1 1 8 14.5Zm3.6-4.92c-.2-.1-1.17-.58-1.35-.64s-.31-.1-.44.1-.51.64-.63.78-.23.15-.43.05a5.4 5.4 0 0 1-1.59-.98 6 6 0 0 1-1.1-1.37c-.11-.2 0-.3.09-.4s.2-.23.3-.35a1.34 1.34 0 0 0 .2-.33.36.36 0 0 0 0-.35c0-.1-.44-1.07-.6-1.46s-.32-.33-.44-.34h-.38a.72.72 0 0 0-.52.25 2.2 2.2 0 0 0-.69 1.64 3.83 3.83 0 0 0 .8 2.03 8.75 8.75 0 0 0 3.35 2.96 11 11 0 0 0 1.12.41 2.68 2.68 0 0 0 1.23.08 2.02 2.02 0 0 0 1.32-.93 1.63 1.63 0 0 0 .11-.93c-.05-.09-.18-.14-.38-.24Z%27/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M13.6 2.33A7.94 7.94 0 0 0 8 0a7.9 7.9 0 0 0-6.85 11.9L0 16l4.2-1.1A7.9 7.9 0 0 0 8 15.85 7.92 7.92 0 0 0 13.6 2.33ZM8 14.5a6.6 6.6 0 0 1-3.35-.92l-.24-.14-2.49.65.66-2.43-.16-.25A6.57 6.57 0 1 1 8 14.5Zm3.6-4.92c-.2-.1-1.17-.58-1.35-.64s-.31-.1-.44.1-.51.64-.63.78-.23.15-.43.05a5.4 5.4 0 0 1-1.59-.98 6 6 0 0 1-1.1-1.37c-.11-.2 0-.3.09-.4s.2-.23.3-.35a1.34 1.34 0 0 0 .2-.33.36.36 0 0 0 0-.35c0-.1-.44-1.07-.6-1.46s-.32-.33-.44-.34h-.38a.72.72 0 0 0-.52.25 2.2 2.2 0 0 0-.69 1.64 3.83 3.83 0 0 0 .8 2.03 8.75 8.75 0 0 0 3.35 2.96 11 11 0 0 0 1.12.41 2.68 2.68 0 0 0 1.23.08 2.02 2.02 0 0 0 1.32-.93 1.63 1.63 0 0 0 .11-.93c-.05-.09-.18-.14-.38-.24Z%27/%3E%3C/svg%3E") center/contain no-repeat; }

.mc-btn--outline{ --btn-bg:transparent; --btn-fg:var(--mc-blue); --btn-bd:var(--mc-blue); }
.mc-btn--outline:hover,.mc-btn--outline.is-hover{
  --btn-bg:var(--mc-blue-tint); --btn-fg:var(--mc-blue-dark); --btn-bd:var(--mc-blue); }
.mc-btn--outline:active,.mc-btn--outline.is-active{
  --btn-bg:var(--mc-band); --btn-fg:var(--mc-ink); --btn-bd:var(--mc-ink); }

.mc-btn--quiet{ --btn-bg:transparent; --btn-fg:var(--mc-ink-2); --btn-bd:transparent;
  padding-inline:var(--s-3); }
.mc-btn--quiet:hover,.mc-btn--quiet.is-hover{
  --btn-bg:var(--mc-band); --btn-fg:var(--mc-ink); --btn-bd:var(--mc-band); }

.mc-btn--block{ display:flex; width:100%; }

/* loading: a line drawn along the bottom edge, not a spinner */
.mc-btn__label{ display:inline-block; }
.mc-btn__prog{ position:absolute; left:var(--mc-r); right:var(--mc-r); bottom:0; height:2px;
  background:currentColor; opacity:0; transform:scaleX(0); transform-origin:left center; }
.mc-btn.is-loading{ cursor:progress; }
.mc-btn.is-loading .mc-btn__label{ visibility:hidden; }
.mc-btn.is-loading .mc-btn__label::after{ content:attr(data-busy); visibility:visible;
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.mc-btn.is-loading .mc-btn__prog{ opacity:.7; animation:mc-draw var(--m-move) var(--e-line) infinite alternate; }
@keyframes mc-draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* on navy the fill flips to white — accent on navy is 2.53:1 and cannot be fixed
   by recolouring without pushing navy to black */
.on-navy .mc-btn--cta{ --btn-bg:var(--mc-surface); --btn-fg:var(--mc-wa-dark); --btn-bd:var(--mc-surface); }
.on-navy .mc-btn--outline{ --btn-fg:var(--mc-on-navy); --btn-bd:var(--mc-on-navy-2); }

/* ---- links ----------------------------------------------- */
.mc-link{ color:var(--mc-blue); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:.16em;
  transition:text-decoration-thickness var(--m-quick) var(--e-out),
             color var(--m-quick) var(--e-out); }
.mc-link:hover,.mc-link.is-hover{ color:var(--mc-ink); text-decoration-thickness:2px; }
.on-navy .mc-link{ color:var(--mc-blue-light); }
.mc-go{ display:inline-flex; align-items:center; gap:var(--s-2);
  min-height:var(--mc-tap); font-size:var(--t-ui); font-weight:500;
  color:var(--mc-ink); text-decoration:none;
  border-bottom:1px solid var(--mc-rule);
  transition:color var(--m-quick) var(--e-out), border-color var(--m-quick) var(--e-out); }
.mc-go__arrow{ display:inline-block; transition:transform var(--m-quick) var(--e-out); }
.mc-go:hover,.mc-go.is-hover{ color:var(--mc-blue); border-color:var(--mc-blue); }
.mc-go:hover .mc-go__arrow,.mc-go.is-hover .mc-go__arrow{ transform:translateX(4px); }

/* ---- THE PAIR — price and mileage as one unit ------------ */
.mc-pair{ display:flex; width:fit-content; flex-wrap:wrap; align-items:baseline; gap:var(--s-2) var(--s-3);
  font-size:var(--t-price); }
.mc-price,.mc-km{ white-space:nowrap; }
.mc-price{ font-size:1em; line-height:1; font-weight:700;
  letter-spacing:-.02em; color:var(--mc-price); font-variant-numeric:tabular-nums; }
.mc-km{ font-size:var(--t-km); line-height:1; font-weight:500;
  letter-spacing:-.01em; color:var(--mc-ink-2); font-variant-numeric:tabular-nums; }
.mc-km.is-unknown{ font-size:var(--t-value); font-weight:500; color:var(--mc-ink-3); }

/* ---- the vehicle card ------------------------------------ */
.mc-cardgrid{ display:grid; gap:var(--s-4); grid-template-columns:1fr; }
@media (min-width:560px){ .mc-cardgrid{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .mc-cardgrid{ grid-template-columns:repeat(3,1fr); } }
.mc-cardgrid > *{ min-width:0; }
.mc-card{ position:relative; background:var(--mc-surface); border:1px solid var(--mc-hairline);
  border-radius:var(--mc-r-card); box-shadow:var(--mc-shadow-1); overflow:hidden;
  transition:box-shadow var(--m-quick) var(--e-out), border-color var(--m-quick) var(--e-out); }
.mc-card__link{ display:block; color:inherit; text-decoration:none; }
.mc-card__body{ padding:var(--s-3) var(--s-4) var(--s-4); display:flex; flex-direction:column; gap:var(--s-3); }
.mc-card__title{ margin:0; font-size:var(--t-h3); font-weight:600; line-height:1.3;
  color:var(--mc-ink); }
/* car-planet sets the card price inside a pale box. Same device, on the ramp. */
.mc-card .mc-pair{ display:flex; width:fit-content; padding:var(--s-2) var(--s-3);
  font-size:1.75rem; }
.mc-card .mc-km{ font-size:1.375rem; }
.mc-card .mc-pair{
  background:var(--mc-blue-tint); border-radius:var(--mc-r-card); }
/* a chip inside a card is part of the card, so it follows the card. Outside one —
   a filter, a tag on a band — it keeps the 4px of the small ladder. */
.mc-card .mc-chip{ border-radius:var(--mc-r-card); }
.mc-card__go{ display:inline-flex; align-items:center; gap:var(--s-2);
  min-height:0; margin-top:auto; font-size:var(--t-ui); font-weight:500;
  color:var(--mc-ink); transition:color var(--m-quick) var(--e-out); }
.mc-card__arrow{ display:inline-block; transition:transform var(--m-quick) var(--e-out); }
.mc-card:hover,.mc-card.is-hover{ box-shadow:var(--mc-shadow-2); border-color:var(--mc-rule); }
.mc-card:hover .mc-card__go,.mc-card.is-hover .mc-card__go{ color:var(--mc-blue); }
.mc-card:hover .mc-card__arrow,.mc-card.is-hover .mc-card__arrow{ transform:translateX(4px); }

.mc-card.is-focus{ outline:3px solid var(--mc-focus); outline-offset:var(--s-1); }
.mc-card--sold .mc-frame img{ filter:var(--mc-sold-img); opacity:.9; }
.mc-card--sold .mc-card__title,.mc-card--sold .mc-km{ color:var(--mc-ink-2); }
.mc-card--sold .mc-price{ color:var(--mc-ink-2); }
.mc-card--sold .mc-chip{ background:var(--mc-band); color:var(--mc-ink-3); }
.mc-card--sold .mc-pair{ background:var(--mc-band); }

.mc-frame{ position:relative; display:block; overflow:hidden; background:var(--mc-band); }
.bb-el__stage > .mc-frame, .bb-atom .mc-frame{ border-radius:var(--mc-r); }
.pg-sec > .mc-frame{ border-radius:var(--mc-r); }
.mc-frame--card{ aspect-ratio:var(--ar-card); }
.mc-frame--empty{ border:1px solid var(--mc-rule); }
.mc-frame__none{ position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:var(--t-label); letter-spacing:.010em; color:var(--mc-ink-3); }
.mc-img{ display:block; width:100%; height:100%; object-fit:cover; background:var(--mc-band); }
.mc-img--vehicle{ object-position:var(--pos-vehicle); }
.mc-img--portrait{ object-position:var(--pos-portrait); }

.mc-chips{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin:0; padding:0; list-style:none; }
.mc-chip{ display:inline-flex; align-items:center; min-height:var(--s-5); letter-spacing:.010em;
  padding:var(--s-1) var(--s-2); border:0; border-radius:var(--mc-r-s);
  background:var(--mc-blue-100); font-size:var(--t-label); font-weight:500; line-height:1.2;
  color:var(--mc-ink-2); white-space:nowrap; }

.mc-badge{ display:inline-flex; align-items:center; min-height:var(--s-5); border:1px solid transparent;  border-radius:var(--mc-r-card);
  padding:0 var(--s-3); font-size:var(--t-label); font-weight:500;
  letter-spacing:.010em; line-height:1.2; }
.mc-badge--available{ background:var(--mc-blue-tint); color:var(--mc-blue); }
.mc-badge--reserved { background:var(--mc-warn-tint); color:var(--mc-warn);
  border-color:var(--mc-warn); }
.mc-badge--sold     { background:var(--mc-navy);   color:var(--mc-on-navy); }
.mc-frame .mc-badge{ position:absolute; left:var(--s-2); top:var(--s-2); z-index:1; }

/* ---- spec table ------------------------------------------ */
.mc-specs{ margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s-2); }
.mc-specs__row{ display:grid; grid-template-columns:minmax(9ch,12ch) minmax(0,1fr); gap:var(--s-3);
  align-items:baseline; padding:var(--s-2) var(--s-3); background:var(--mc-blue-tint);
  border-radius:var(--mc-r-s); }
.mc-specs dt{ font-size:var(--t-small); color:var(--mc-ink-3); }
.mc-specs dd{ margin:0; min-width:0; overflow-wrap:break-word;
  font-size:var(--t-value); font-weight:600; line-height:1.3; color:var(--mc-ink);
  font-variant-numeric:tabular-nums; }
@media (min-width:640px){
  .mc-specs{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2) var(--s-4); } }

/* ---- forms ----------------------------------------------- */
.mc-form{ max-width:36rem; }
.mc-field{ display:block; margin-bottom:var(--s-5); }
.mc-field__label{ display:block; margin-bottom:var(--s-2); font-size:var(--t-label); letter-spacing:.010em; line-height:1.3;
  font-weight:500; color:var(--mc-ink); }
.mc-field__opt{ font-weight:400; color:var(--mc-ink-3); }
.mc-input,.mc-textarea{
  display:block; width:100%; min-height:var(--mc-tap-pref); padding:var(--s-3);
  font-family:var(--f-ui);
  font-size:var(--t-ui);        /* 16px floor. Below this Safari iOS zooms on
                                   focus and never zooms back out. */
  line-height:1.55; color:var(--mc-ink); background:var(--mc-surface);   /* on the ladder; the single-line input is centred by min-height, the textarea needs the leading */
  border:1px solid var(--mc-control); border-radius:var(--mc-r);
  -webkit-appearance:none; appearance:none;
  transition:border-color var(--m-quick) var(--e-out); }
.mc-textarea{ min-height:6rem; resize:vertical; }
.mc-input{ padding-block:0; }   /* after the shared rule, so min-height 48 centres the line */
.mc-input::placeholder{ color:var(--mc-ink-3); opacity:1; }
.mc-input:hover,.mc-input.is-hover{ border-color:var(--mc-ink-3); }
.mc-input:focus-visible,.mc-input.is-focus,.mc-textarea.is-focus{
  outline:3px solid var(--mc-focus); outline-offset:var(--s-1); border-color:var(--mc-ink); }
.mc-input.is-invalid{ border-color:var(--mc-accent); border-left-width:3px;
  background:var(--mc-accent-tint); }
.mc-empty{ border-radius:var(--mc-r-l); }
.mc-input.is-disabled{ background:var(--mc-band); color:var(--mc-ink-3); cursor:not-allowed; }
.mc-err{ display:flex; gap:var(--s-2); margin:var(--s-2) 0 0; font-size:var(--t-small);
  color:var(--mc-accent); }
.mc-err::before{ content:"\2193"; flex:0 0 auto; }
.mc-check{ display:flex; align-items:flex-start; gap:var(--s-3); margin-bottom:var(--s-2);
  min-height:var(--mc-tap-pref); padding:var(--s-2) 0; cursor:pointer; }
.mc-check input{ flex:0 0 auto; width:var(--s-5); height:var(--s-5); margin:-2px 0 0;
  accent-color:var(--mc-blue); }
.mc-check__t{ font-size:var(--t-small); line-height:1.45; color:var(--mc-ink-2); }

.mc-alert{ padding:var(--s-4) var(--s-5); margin-bottom:var(--s-5); border-radius:var(--mc-r);
  border:1px solid var(--mc-rule); border-left-width:3px;
  background:var(--mc-surface); font-size:var(--t-small); }
.mc-alert__t{ margin:0 0 var(--s-2); font-size:var(--t-value); font-weight:600; line-height:1.3;
  color:var(--mc-ink); }
.mc-alert p:last-child,.mc-alert ul:last-child{ margin-bottom:0; }
.mc-alert ul{ margin:0; padding-left:var(--s-4); }
.mc-alert--error{ border-left-color:var(--mc-accent); background:var(--mc-accent-tint); }
.mc-alert--ok{ border-left-color:var(--mc-ok); background:var(--mc-ok-tint); }
.mc-alert--note{ border-left-color:var(--mc-warn); background:var(--mc-warn-tint); }

/* ---- header ---------------------------------------------- */
.mc-head{ background:var(--mc-surface); box-shadow:var(--mc-shadow-2); position:relative; z-index:2; }
.mc-head__in{ display:flex; align-items:center; gap:var(--s-3);
  min-height:var(--mc-head-h); padding:0 var(--s-4); }
.mc-logo{ font-size:var(--t-ui); font-weight:700; letter-spacing:-.01em;
  color:var(--mc-ink); text-decoration:none; margin-right:auto;
  display:inline-flex; align-items:center; min-height:var(--mc-tap); }
.mc-nav{ display:flex; align-items:center; gap:var(--s-5); }
.mc-nav__i{ position:relative; display:inline-flex; align-items:center;
  min-height:var(--mc-tap); font-size:var(--t-ui); color:var(--mc-ink);
  text-decoration:none; }
.mc-nav__i.is-current{ color:var(--mc-blue); font-weight:600; }
.mc-nav__i:hover{ color:var(--mc-blue); }
@media (max-width:899px){ #EL-HDR-01 .bb-el__stage--flush{ display:none; } }

.ph .mc-head .mc-btn--cta{ padding-inline:var(--s-3); }
@media (max-width:399px){ .mc-head .mc-btn--cta{ font-size:0; gap:0; padding-inline:var(--s-3); } }
.mc-burger{ display:inline-flex; align-items:center; gap:var(--s-2);
  min-height:var(--mc-tap-pref); min-width:var(--mc-tap-pref); padding:var(--s-2) var(--s-3);
  background:var(--mc-band); border:1px solid var(--mc-band); border-radius:var(--mc-r); color:var(--mc-ink);
  font-family:var(--f-ui); font-size:var(--t-small); cursor:pointer; }
.mc-burger__bars,.mc-burger__bars::before,.mc-burger__bars::after{
  display:block; width:18px; height:2px; background:currentColor; }
.mc-burger__bars{ position:relative; }
.mc-burger__bars::before,.mc-burger__bars::after{ content:""; position:absolute; left:0; }
.mc-burger__bars::before{ top:-6px; } .mc-burger__bars::after{ top:6px; }

/* ---- fixed bottom bar ------------------------------------ */
.mc-bar{ display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-2) var(--s-4); min-height:var(--mc-bar-h);
  background:var(--mc-surface); border-top:1px solid var(--mc-hairline); box-shadow:var(--mc-shadow-up); }
.mc-bar__pair{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
  line-height:1.1; }
.mc-bar__price{ font-size:var(--t-h3); font-weight:700; color:var(--mc-price);
  font-variant-numeric:tabular-nums; }
.mc-bar__km{ font-size:var(--t-label); font-weight:500; letter-spacing:.010em; color:var(--mc-ink-2);
  font-variant-numeric:tabular-nums; }
.mc-bar__act{ display:flex; gap:var(--s-3); flex:0 0 auto; }
.mc-bar .mc-btn{ padding-inline:var(--s-3); }

/* ---- footer specimen ------------------------------------- */
.mc-foot-demo{ background:var(--mc-navy); color:var(--mc-on-navy-2); padding:var(--s-6) var(--s-5); }
.mc-foot-demo h4{ color:var(--mc-on-navy); margin-bottom:var(--s-3);
  font-size:var(--t-label); font-weight:500; letter-spacing:.010em; }
.mc-foot-demo p a{ display:inline; min-height:0; padding:0; border-bottom:0;
  font-size:inherit; text-decoration:underline; }
.mc-foot-demo a{ display:flex; align-items:center; min-height:var(--mc-tap-pref); padding-block:var(--s-1);
  color:var(--mc-on-navy); text-decoration:none; font-size:var(--t-ui);
  border-bottom:1px solid var(--mc-navy-line); }
.mc-foot-demo{ border-radius:var(--mc-r-l); }
.bb-el__stage--flush .mc-foot-demo{ border-radius:0; }
.mc-foot-demo__cols{ display:grid; gap:var(--s-5); grid-template-columns:1fr; }
@media (min-width:640px){ .mc-foot-demo__cols{ grid-template-columns:1.4fr 1fr 1fr; } }

/* ---- empty state ----------------------------------------- */
.mc-empty{ padding:var(--s-7) var(--s-5); border:1px solid var(--mc-rule);
  background:var(--mc-surface); }
.mc-empty__t{ margin:0 0 var(--s-3); font-size:var(--t-h3); font-weight:600; color:var(--mc-ink); }
.mc-cta{ display:grid; gap:var(--s-3); grid-template-columns:1fr; }
@media (min-width:480px){ .mc-cta{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   TESTIMONIALS — the row list. Measured layout.
   ============================================================ */
.tt-list{ display:grid; grid-template-columns:1fr; gap:0; }
.tt-row{ display:grid; grid-template-columns:140px minmax(0,1fr); gap:var(--s-4);
  align-items:start; padding:var(--s-4) 0; border-bottom:1px solid var(--mc-hairline); }
.tt-row{ border-top:1px solid var(--mc-hairline); border-bottom:0; }
.tt-row:first-child{ border-top:0; }
.tt-photo{ aspect-ratio:var(--ar-portrait); overflow:hidden; background:var(--mc-band); border-radius:var(--mc-r); }
.tt-photo.is-tall{ aspect-ratio:var(--ar-tall); }
.tt-photo.is-wide{ aspect-ratio:var(--ar-wide); }
.tt-body{ display:flex; flex-direction:column; gap:var(--s-2); min-width:0; }
.tt-quote{ margin:0; font-family:var(--f-voice); font-style:italic; font-size:var(--t-caption); line-height:1.45; /* the customer's own words: italic, same family */
  color:var(--mc-ink); white-space:pre-line; overflow-wrap:anywhere; }
.tt-quote.is-clamped{ display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:9; line-clamp:9; overflow:hidden; }
.tt-more{ align-self:flex-start; min-height:var(--mc-tap); padding:var(--s-2) 0;
  background:none; border:0; font:inherit; font-size:var(--t-ui); font-weight:400;
  color:var(--mc-blue); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.16em; cursor:pointer;
  transition:color var(--m-quick) var(--e-out), text-decoration-thickness var(--m-quick) var(--e-out); }
.tt-more:hover{ color:var(--mc-ink); text-decoration-thickness:2px; }
.tt-attr{ font-size:var(--t-label); font-weight:500; letter-spacing:.010em; line-height:1.3; color:var(--mc-ink-3); }
.tt-attr b{ color:var(--mc-ink); font-weight:600; }
@media (min-width:992px){
  .tt-list{ grid-template-columns:1fr 1fr; column-gap:var(--s-7); }
  .tt-row:nth-child(-n+2){ border-top:0; }
  .tt-row{ grid-template-columns:200px minmax(0,1fr); gap:var(--s-5); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ============================================================
   THE PHONE — a 390px frame that reads as a phone without leaving
   the system: ink border, status strip, home indicator, no radius.
   Everything inside is mobile layout written explicitly, because a
   media query inside a narrow div still resolves against the page.
   ============================================================ */
.ph{ width:390px; max-width:100%; background:var(--mc-bg);
  border:1px solid var(--mc-rule); border-radius:var(--mc-r-l); box-shadow:var(--mc-shadow-2);
  position:relative; overflow:hidden; }
.ph__status{ height:32px; display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--s-4); background:var(--mc-surface); border-bottom:1px solid var(--mc-hairline);
  font-size:var(--t-label); font-weight:500; color:var(--mc-ink-2);
  font-variant-numeric:tabular-nums; }
.ph__status i{ display:inline-block; width:26px; height:10px; border:1px solid var(--mc-ink-2);
  padding:1px; }
.ph__status i::before{ content:""; display:block; height:100%; width:78%; background:var(--mc-ink-2); }
.ph__home{ height:24px; display:flex; align-items:center; justify-content:center;
  background:var(--mc-surface); border-top:1px solid var(--mc-hairline); }
.ph__home::before{ content:""; width:120px; height:4px; background:var(--mc-ink); }
.ph__screen{ position:relative; }
.ph--clip .ph__screen{ height:1180px; overflow:hidden; }
.ph--clip .ph__screen::after{ content:""; position:absolute; left:0; right:0; bottom:0;
  height:120px; background:linear-gradient(to bottom, transparent, var(--mc-surface)); }
.ph__fold{ position:absolute; left:0; right:0; top:769px;   /* the 8px gutter between spec rows; .ph__screen is the containing block */ z-index:2; height:0;
  border-top:1px dashed var(--mc-ink); }
.ph__fold span{ position:absolute; right:0; top:-1px; transform:translateY(-100%); line-height:1.2; min-height:var(--s-5); display:inline-flex; align-items:center;
  padding:var(--s-1) var(--s-2); background:var(--mc-ink); color:var(--mc-surface);
  border-radius:var(--mc-r-s) var(--mc-r-s) 0 0; font-size:var(--t-label); font-weight:500; letter-spacing:.010em; }
.ph__bar{ position:absolute; left:0; right:0; bottom:0; z-index:3; }

/* the assembled page, mobile-first and explicit */
.pg-sec{ padding:var(--s-7) var(--s-4); }

.pg-sec--band{ background:var(--mc-blue-tint); }
.pg-sec--navy{ background:var(--mc-navy); color:var(--mc-on-navy-2); }
.pg-h{ margin:0 0 var(--s-4); font-size:var(--t-h2); font-weight:700; line-height:1.1;
  letter-spacing:-.05em; color:var(--mc-ink); text-wrap:balance; }
.pg-sub{ margin:0 0 var(--s-5); font-size:var(--t-sub); color:var(--mc-ink-2); }
.pg-h:has(+ .pg-sub){ margin-bottom:var(--s-1); }
.pg-sec--navy .pg-h{ color:var(--mc-on-navy); }
.pg-eyebrow{ display:block; margin-bottom:var(--s-2); font-size:var(--t-label); font-weight:500; line-height:1.3;
  letter-spacing:.010em; color:var(--mc-ink-3); }
.pg-h1{ margin:0 0 var(--s-3); font-size:var(--t-h1); line-height:1.06;
  letter-spacing:-.03em; font-weight:700; color:var(--mc-ink); text-wrap:balance; }
.pg-lead{ margin:0 0 var(--s-4); font-size:var(--t-prose); line-height:1.62; color:var(--mc-ink-2); }
.pg-proof{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-3); margin:0 0 var(--s-5);
  font-size:var(--t-small); color:var(--mc-ink-2); font-variant-numeric:tabular-nums; }
.pg-proof b{ color:var(--mc-ink); font-weight:600; }
.pg-prose{ font-size:var(--t-prose); line-height:1.62;
  color:var(--mc-ink-2); }
.pg-prose p{ margin:0 0 var(--s-3); }
.pg-note{ margin:var(--s-3) 0 0; font-size:var(--t-small);
  color:var(--mc-ink-3); }

.ph .mc-cardgrid{ grid-template-columns:1fr; gap:var(--s-4); }
.ph .mc-head__in{ min-height:56px; }
.ph .mc-cta{ grid-template-columns:1fr; }
.ph .mc-specs{ display:flex; flex-direction:column; gap:var(--s-2); }
@media (max-width:421px){ .bb-phones{ margin-inline:calc(var(--mc-gutter-m) * -1); } .bb-phones > div{ max-width:none; } }
/* clamp() reads the page viewport, not the frame. Pin every fluid size to the
   390px end of its scale, so the frame shows what a phone shows. */
.ph .pg-h1{ font-size:2.125rem; }         /* 34 */
.ph .pg-h{ font-size:1.75rem; }           /* 28 */
.ph .pg-lead{ font-size:1.0625rem; }      /* 17 */
.ph .mc-price{ font-size:1.75rem; }       /* 28: --t-price at 390 */
.ph .mc-km{ font-size:1.375rem; }         /* 22: --t-km at 390 */

.ph .tt-list{ grid-template-columns:1fr; }
.ph .tt-row{ grid-template-columns:120px minmax(0,1fr); gap:var(--s-3); }
.ph .tt-quote{ font-size:var(--t-small); }
.ph .mc-head__in{ padding:0 var(--s-4); }
.ph .mc-bar{ padding-bottom:calc(var(--s-2) + var(--s-4)); } /* stands in for the safe-area inset */

/* gallery strip inside the vehicle page */
.pg-gal{ display:flex; gap:var(--s-2); margin-top:var(--s-2); overflow:hidden; }
.pg-gal > div{ position:relative; flex:0 0 calc((100% - 3 * var(--s-2)) / 4); aspect-ratio:var(--ar-card);
  background:var(--mc-band); overflow:hidden; border-radius:var(--mc-r-s); }
.pg-gal > div.is-on::after{ content:""; position:absolute; left:0; right:0; bottom:0;
  height:3px; background:var(--mc-blue); }
.pg-gal__tag{ position:absolute; left:0; bottom:0; line-height:1.2; min-height:var(--s-5); display:inline-flex; align-items:center; padding:2px var(--s-2);
  background:var(--mc-ink); color:var(--mc-surface); font-size:var(--t-label); font-weight:500; padding:var(--s-1) var(--s-2); letter-spacing:.010em; }

/* ============================================================
   SPECIMEN CHROME, refined: caption under the state, chips for
   "where", a quieter sign-off row.
   ============================================================ */
.bb-el__where{ display:flex; flex-wrap:wrap; gap:var(--s-1); margin-left:auto; }
.bb-el__where span{ padding:var(--s-1) var(--s-2); line-height:1.2; min-height:var(--s-5); letter-spacing:.010em; border-radius:var(--mc-r-s); background:var(--mc-band);
  font-size:var(--t-label); color:var(--mc-ink-2); white-space:nowrap; }
.bb-state{ gap:0; padding:0; }
.bb-state > .mc-card{ align-self:stretch; }
.bb-state > *:first-child:not(.bb-label){ margin:var(--s-4); }
.bb-state .bb-cap{ margin-top:auto; width:100%; padding:var(--s-2) var(--s-4);
  border-top:1px solid var(--mc-hairline); font-size:var(--t-label); letter-spacing:.010em; color:var(--mc-ink-3); }
.bb-state--wide{ grid-column:1 / -1; }
.bb-el__stage--band{ background:var(--mc-blue-tint); }
.bb-el__stage--twin{ display:grid; gap:var(--s-5); grid-template-columns:minmax(0,1fr); align-items:start; }
.bb-el__stage--twin > .ph{ width:390px; max-width:100%; }
@media (max-width:421px){
  .bb-el{ margin-inline:calc(var(--mc-gutter-m) * -1); border-inline-width:0; border-radius:0; }
  .bb-el__stage{ padding:var(--s-4); }
  .bb-el__stage--flush{ padding:0; }
  /* the twin stages bleed to the frame edge; only the captions keep the gutter.
     Declared after .bb-el__stage so it wins, and the form's inner two-up drops its own padding. */
  .bb-el__stage.bb-el__stage--band{ padding-inline:0; }
  .bb-el__stage--band > .bb-stagecap,.bb-el__stage--twin > :not(.ph,div){ padding-inline:var(--s-4); }
  .bb-el__stage--twin > div:has(> .ph){ padding-inline:0 !important; }
  .bb-el__stage--twin > div:not(.ph):not(:has(> .ph)){ padding-inline:var(--s-4); }
  .bb-phones .bb-label,.bb-phones .bb-small{ padding-inline:var(--mc-gutter-m); }
}
@media (min-width:900px){ .bb-el__stage--twin{ grid-template-columns:1fr auto; } #EL-HDR-01 .bb-el__stage--twin{ grid-template-columns:390px 390px; } }
.bb-el__stage--twin > *{ min-width:0; }
.bb-stagecap{ display:block; margin-bottom:var(--s-3); font-size:var(--t-label); letter-spacing:.010em;
  color:var(--mc-ink-3); }

/* the two assembled phones */
.bb-phones{ display:grid; gap:var(--s-6); grid-template-columns:1fr; justify-items:center; }
@media (min-width:860px){ .bb-phones{ grid-template-columns:1fr 1fr; align-items:start; } }
.bb-phones > div{ min-width:0; width:100%; max-width:390px; }
.bb-phones .bb-label{ display:block; margin-bottom:var(--s-3); }

/* small parts: a tight table of atoms, not a card each */
.bb-atoms{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--mc-rule); }
.bb-atom{ display:grid; grid-template-columns:1fr; gap:var(--s-3); padding:var(--s-4) 0;
  border-bottom:1px solid var(--mc-hairline); align-items:center; }
@media (min-width:640px){ .bb-atom{ grid-template-columns:16ch 1fr; } }
.bb-atom__n{ font-size:var(--t-small); font-weight:500; color:var(--mc-ink); }
.bb-atom__n small{ display:block; font-weight:500; letter-spacing:.010em; color:var(--mc-ink-3); font-size:var(--t-label); }
.bb-atom__s{ display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; min-width:0; }

/* the built pages, reachable from the book's first screen */
.bb-pages{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin:var(--s-5) 0 var(--s-2); }
.bb-pages .mc-btn{ min-height:48px; }
.bb-pages__ghost{ --btn-fg:#FFFFFF; --btn-bd:rgba(255,255,255,.55); }
.bb-pages__ghost:hover{ --btn-bd:#FFFFFF; }

/* ---- Appendix C: the system as built --------------------------------------
   Specimens are the real classes, but a stage is not a page. The marque tiles
   come from a full-width row on /vende; here they need their own track count,
   and it has to break where the real one breaks (480) or "Volkswagen" sits
   against the tile edge on a phone. */
#built .bb-marques{ display:grid; gap:var(--s-3); max-width:34rem;
  grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:479.98px){ #built .bb-marques{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ---- Appendix D: the parts list -------------------------------------------
   The class is the row's identity and must not wrap; the "what" is two or three
   words and does not need a third of the table. Both only above the phone,
   where 358px has to hold three columns and nowrap would push the table into a
   scroller for the sake of one long class name. */
@media (min-width:601px){
  #parts table.bb-t td:first-child{ white-space:nowrap; }
  #parts table.bb-t th:nth-child(2){ width:13ch; }
}