/* medicalbillssuck.com — storefront styles.
 *
 * Standalone: this file does not load site.css. The two brands share an origin, fonts
 * and a server, not a design. Keeping them apart means a change to the advocacy site's
 * stylesheet can never restyle the storefront, and vice versa.
 *
 * Class prefix is `mbs-` throughout, matching the project's existing convention.
 */

/* Halogen Agency brand (Oct 2026): DM Sans only. The storefront has its own variable
   file (weights 100-1000) because the advocacy site's dm-sans.woff2 stops at 700 and the
   headlines need Black 900. The metric-matched fallback is copied verbatim from site.css:
   font-display:swap paints fallback text first, and without a metric match everything
   below the headline jumps when the real font arrives. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('/fonts/dm-sans-mbs.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Arial');
  size-adjust: 103.66%; ascent-override: 95.7%; descent-override: 29.9%; line-gap-override: 0%;
}

/* Brand colours. Contrast is computed (WCAG 2.x), not eyeballed:
     --mbs-black  on --mbs-paper  21.0:1   --mbs-black  on --mbs-canvas 20.1:1
     --mbs-gray   on --mbs-paper  15.1:1   --mbs-gray   on --mbs-canvas 14.5:1
     --mbs-victory on --mbs-paper  6.17:1  --mbs-victory on --mbs-canvas 5.91:1
     --mbs-paper  on --mbs-victory 6.17:1  --mbs-paper  on --mbs-victory-deep 8.89:1
     --mbs-black  on --mbs-shout   5.50:1  --mbs-shout  on --mbs-black 5.50:1
     --mbs-shout  on --mbs-paper   3.82:1  FAILS body text: large type (24px+), the logo,
     decoration and solid blocks only. White text on --mbs-shout is the same 3.82:1, so a
     pink block carries BLACK text. Violet is the text accent, link and button colour. */
:root {
  --mbs-black: #000000;       /* type, footer ground */
  --mbs-gray: #262626;        /* secondary type, input borders */
  --mbs-shout: #ff0073;       /* hot pink: blocks, rings, big numbers */
  --mbs-victory: #692cff;     /* violet: links, emphasis, buttons */
  --mbs-victory-deep: #4a14d6; /* violet button hover, white on it 8.89:1 */
  --mbs-paper: #ffffff;       /* page ground */
  --mbs-canvas: #fafafa;      /* panels (the deck's canvas) */
  --mbs-line: #d4d4d4;        /* hairlines: decoration, never the only cue */
}

/* Light only, said out loud: without it a dark-mode browser re-colours form controls and
   scrollbars while the page stays white (a half-switched page). */
:root { color-scheme: light; }
/* A focused control scrolls into view clear of the fixed chat button (bottom right,
   shown once the store is live): WCAG 2.2 2.4.11 Focus Not Obscured. */
html { scroll-padding: 1rem 0 6rem; }

*, *::before, *::after { box-sizing: border-box; }

/* A long word or address wraps instead of pushing the page sideways (1.4.10 Reflow, and
   200% text on a phone). Single-column grids use minmax(0, 1fr) for the same reason: the
   default `1fr` will not shrink below its content. */
body { overflow-wrap: break-word; }
.mbs-fit, .mbs-faq, .mbs-duo, .mbs-hero-grid, .mbs-villain, .mbs-about, .mbs-footer-grid, .mbs-outcomes, .mbs-results { grid-template-columns: minmax(0, 1fr); }

body {
  margin: 0;
  background: var(--mbs-paper);
  color: var(--mbs-black);
  font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Visible only once focused — a keyboard user's first Tab should reach the content,
   not a nav they cannot see. */
.mbs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--mbs-black);
  color: var(--mbs-paper);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  z-index: 10;
}
/* The ring sits inside the box: at the top-left corner an outside ring would be cut off
   by the window. White on black is 21:1. */
.mbs-skip:focus { left: 0; outline: 3px solid var(--mbs-paper); outline-offset: -6px; }

/* The compact header: the logo and nothing else. It stays small so the headline and the
   first button still show on a 375x667 phone without scrolling. One picture, one ratio
   (both marks are about 2.2:1), so swapping the mark at tablet width moves nothing. */
.mbs-header-in {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0.5rem clamp(1.25rem, 4vw, 3rem) 0;
}
.mbs-logo { display: block; width: 5.25rem; height: auto; }
@media (min-width: 48rem) {
  .mbs-header-in { padding-top: 1.25rem; }
  .mbs-logo { width: 11rem; }
}

.mbs-wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 6rem) 1.5rem clamp(2.5rem, 6vw, 4rem);
}

.mbs-eyebrow {
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mbs-victory);
}

/* Headlines are DM Sans Black. The deck's tracking is -40/-20; loosened (Jerry, round 2) to
   -0.03em on the h1, -0.02em on h2/h3 and -0.01em on subheads so no two words touch at 375
   or 1440. */
.mbs-headline {
  margin: 0 0 1.5rem;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.mbs-headline em { font-style: normal; color: var(--mbs-victory); }
.mbs-headline-sub {
  display: block;
  margin-top: 0.75rem;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--mbs-victory);
  letter-spacing: -0.01em;
}

.mbs-lede {
  margin: 0 0 2rem;
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  max-width: 36rem;
}

.mbs-lede + .mbs-lede { margin-top: -1rem; }
.mbs-lede--strong { font-weight: 700; color: var(--mbs-black); }

.mbs-inside {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  font-weight: 700;
}

.mbs-points {
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
  max-width: 36rem;
}
.mbs-points li {
  position: relative;
  padding-left: 1.85rem;
  color: var(--mbs-gray);
}
/* Decorative, so it is aria-hidden by virtue of being a pseudo-element — a screen
   reader announces the list semantics instead. */
.mbs-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--mbs-shout);
}

/* The jump to the form. Smooth only for people who haven't asked for less motion, and
   the card stops short of the top edge so it doesn't land flush against the browser bar. */
.mbs-jump { margin: 0 0 2rem; }
.mbs-jump .mbs-btn { display: inline-block; text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
#notify { scroll-margin-top: 1.5rem; }

.mbs-card {
  background: var(--mbs-canvas);
  border: 2px solid var(--mbs-black);
  border-radius: 14px;
  padding: clamp(1.5rem, 4vw, 2rem);
}

.mbs-price { margin: 0 0 1.25rem; }
.mbs-price-num {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.mbs-price-note { color: var(--mbs-gray); font-size: 0.9375rem; }
.mbs-price-lead {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.35;
}
.mbs-price-lead + .mbs-price-note { display: block; }

.mbs-label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.mbs-field { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Name and email side by side where there is room, stacked on a phone. Each keeps its
   own visible label — a placeholder is not a label once someone starts typing. */
.mbs-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.mbs-fielditem { min-width: 0; }
.mbs-fielditem .mbs-input { width: 100%; }

.mbs-input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  font: inherit;
  color: var(--mbs-black);
  background: var(--mbs-paper);
  border: 2px solid var(--mbs-gray);
  border-radius: 9px;
}
.mbs-input::placeholder { color: #595959; } /* 7.0:1 on white */

.mbs-btn {
  padding: 0.8rem 1.4rem;
  font: inherit;
  font-weight: 700;
  color: var(--mbs-paper);   /* white on violet 6.17:1 */
  background: var(--mbs-victory);
  border: 2px solid var(--mbs-victory);
  border-radius: 9px;
  cursor: pointer;
  /* WCAG 2.2 SC 2.5.8 wants a 24px minimum target; this is comfortably past it, and
     the same lesson the advocacy site's hero dots had to be fixed for. */
  min-height: 44px;
}
.mbs-btn--block { width: 100%; }
.mbs-btn:hover { background: var(--mbs-victory-deep); border-color: var(--mbs-victory-deep); }
.mbs-btn:disabled { opacity: 0.6; cursor: default; }

:where(a, button, input):focus-visible {
  outline: 3px solid var(--mbs-victory); /* 6.17:1 on white, 5.91:1 on the canvas */
  outline-offset: 2px;
}

.mbs-help {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  color: var(--mbs-gray);
}
/* Pink fails as body-size text (3.82:1 on white), so an error is bold black type with a
   pink bar: the words carry the message, the bar only adds colour. The advocacy site was
   bitten by exactly this (pastel accent reused as text colour at 1.58:1). */
.mbs-help--error {
  color: var(--mbs-black);
  font-weight: 700;
  padding-left: 0.75rem;
  border-left: 5px solid var(--mbs-shout);
}

.mbs-ok {
  margin: 0.75rem 0 0;
  font-weight: 700;
  color: var(--mbs-victory); /* 6.17:1 on white */
}

/* Off-screen rather than display:none — some bots skip hidden inputs, and this one is
   only useful if they fill it. aria-hidden + tabindex="-1" in the markup keep it away
   from real users. */
.mbs-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mbs-sign {
  margin: 2rem 0 0;
  font-weight: 700;
}

.mbs-powered {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  color: var(--mbs-gray);
}
.mbs-powered a { color: var(--mbs-victory); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mbs-legal { margin-top: 0.5rem; font-size: 1rem; }
.mbs-chat-notice a { color: var(--mbs-victory); }

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

/* ── Free product-question bot (views/mbs/_chat.ejs, public/js/mbs-chat.js) ───────
   Colours reuse the tokens above; the new pairings are white on violet for the visitor
   bubble and the toggle (6.17:1) and black on the canvas for the bot bubble (20.1:1). */
.mbs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mbs-chat {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  max-width: calc(100vw - 32px);
}

.mbs-chat-toggle {
  min-height: 44px;
  padding: 0.7rem 1.2rem;
  font: inherit;
  font-weight: 700;
  color: var(--mbs-paper);
  background: var(--mbs-victory);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
  cursor: pointer;
}

.mbs-chat-panel {
  order: -1;
  display: flex;
  flex-direction: column;
  width: 22rem;
  max-width: 100%;
  max-height: min(34rem, calc(100vh - 100px));
  padding: 1rem;
  background: var(--mbs-paper);
  border: 2px solid var(--mbs-black);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
}
.mbs-chat-panel[hidden] { display: none; }

.mbs-chat-head { display: flex; align-items: center; justify-content: space-between; }
.mbs-chat-title { margin: 0; font-weight: 700; }
.mbs-chat-close {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.5rem;
  color: var(--mbs-black);
  background: none;
  border: 0;
  cursor: pointer;
}

.mbs-chat-notice { margin: 0.25rem 0 0.75rem; font-size: 1rem; color: var(--mbs-gray); }

.mbs-chat-log {
  flex: 1 1 auto;
  min-height: 6rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mbs-chat-msg {
  margin: 0;
  padding: 0.6rem 0.8rem;
  max-width: 90%;
  border-radius: 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mbs-chat-msg--bot { align-self: flex-start; color: var(--mbs-black); background: var(--mbs-canvas); border: 1px solid var(--mbs-line); }
.mbs-chat-msg--you { align-self: flex-end; color: var(--mbs-paper); background: var(--mbs-victory); }
.mbs-chat-msg--error { align-self: flex-start; color: var(--mbs-black); font-weight: 700; padding-left: 0.75rem; border-left: 5px solid var(--mbs-shout); border-radius: 0; }
.mbs-chat-msg--pending { color: var(--mbs-gray); }

.mbs-chat-challenge:not(:empty) { margin-top: 0.5rem; }

.mbs-chat-form { margin-top: 0.75rem; }
.mbs-chat-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.8rem;
  font: inherit;
  color: var(--mbs-black);
  background: var(--mbs-paper);
  border: 2px solid var(--mbs-gray);
  border-radius: 9px;
  resize: vertical;
}
.mbs-chat-form textarea::placeholder { color: #595959; }
.mbs-chat-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
.mbs-chat-reset {
  min-height: 44px;
  padding: 0 0.25rem;
  font: inherit;
  font-size: 1rem;
  color: var(--mbs-gray);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
:where(textarea):focus-visible { outline: 3px solid var(--mbs-victory); outline-offset: 2px; }

/* ── Checkout pages (views/mbs/thanks.ejs, notice.ejs) ─────────────────────────── */
a.mbs-btn {
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  line-height: 1.3;
}
.mbs-meeting { margin-top: 1.5rem; }
.mbs-card a:not(.mbs-btn) { color: var(--mbs-victory); }

/* ── Landing page, Draft 3 (views/mbs/coming-soon.ejs) ──────────────────────────
   Responsive in three steps, mobile first:
     phone   (< 48rem)  one column, exactly as Draft 3 reads top to bottom
     tablet  (≥ 48rem)  hero + guide cover, sign-up card, YES/NO, FAQ, footer side by side
     laptop  (≥ 64rem)  the story sections pair up too (moment + system, life after,
                        proof), and the page widens to 76rem
   Paragraphs never run past ~38rem, whatever the screen: the extra width goes to a
   second column, not to longer lines, which is what makes a wide page still readable.
   Colour pairings are measured, not eyeballed (same lesson as above); the table at the
   top of this file has the page-wide ones. The rest:
     white on violet (cover, last ask)       6.17:1   black on pink (Free tag, NO chip) 5.50:1
     white on violet (YES chip, number dot)  6.17:1   pink on canvas (stat numbers)      3.66:1, 40px+ only
     white on black (footer)                21.0:1    pink on black (footer links)       5.50:1
     white 35% lines on violet are decoration, not text.
   Rotated blocks: solid pink or violet slabs tilted like the logo badge (-4.74deg, right
   edge higher), always behind the content, never carrying small text on their own. */
:root {
  --mbs-measure: 38rem;
  --mbs-tilt: -4.74deg;
}

.mbs-wrap--wide {
  max-width: 76rem;
  padding-left: clamp(1.25rem, 4vw, 3rem);
  padding-right: clamp(1.25rem, 4vw, 3rem);
}

/* ── Hero ── */
.mbs-hero .mbs-wrap { padding-top: 1.25rem; padding-bottom: clamp(2rem, 5vw, 4rem); }
@media (min-width: 48rem) { .mbs-hero .mbs-wrap { padding-top: clamp(2rem, 5vw, 4rem); } }
.mbs-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.mbs-hero-copy .mbs-lede { max-width: 34rem; }
.mbs-hero-copy .mbs-jump { margin-bottom: 0; }

/* The guide cover, after the deck's "Digital Guide" treatment: a violet sheet with the
   title in white Black, a pink slab tilted behind it. With no logo panel (Jerry, round 2)
   the sheet is balanced the other way: brand line on top with a pink bar under it, the
   title big in the middle, the by-line pinned to the bottom above the text-line rules.
   The sheet and the slab are pseudo-elements at z-index -1 / -2 so both sit under the text
   and the whole cover tilts as one piece. Text is a fixed 1rem (16px) or more: it is an
   illustration, but it is still read. Phone: hidden, so the first button stays above the
   fold (Draft 3's phone rule). */
.mbs-cover { display: none; }
@media (min-width: 48rem) {
  .mbs-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .mbs-cover {
    display: flex;
    flex-direction: column;
    position: relative;
    justify-self: center;
    width: min(100%, 22rem);
    aspect-ratio: 8.5 / 11;
    padding: 9% 9% 8%;
    transform: rotate(2.5deg);
    color: var(--mbs-paper);
    font-size: 1rem;
    line-height: 1.25;
  }
  .mbs-cover::before,
  .mbs-cover::after { content: ""; position: absolute; }
  .mbs-cover::before {
    inset: 6% -9% -5% 9%;
    z-index: -2;
    background: var(--mbs-shout);
    transform: rotate(var(--mbs-tilt));
  }
  .mbs-cover::after {
    inset: 0;
    z-index: -1;
    background: var(--mbs-victory);
    border-radius: 6px;
    box-shadow: 0 24px 48px rgb(0 0 0 / 0.2);
  }
  .mbs-cover-band { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.9em; }
  .mbs-cover-brand { font-weight: 900; font-size: 1.125em; letter-spacing: -0.01em; }
  .mbs-cover-brand em { font-style: normal; }
  .mbs-cover-brand::after { content: ""; display: block; width: 3rem; height: 6px; margin-top: 0.6em; background: var(--mbs-shout); }
  .mbs-cover-title { margin-top: auto; font-weight: 900; font-size: 2.3em; line-height: 1.02; letter-spacing: -0.02em; }
  .mbs-cover-sub { font-weight: 400; }
  .mbs-cover-by { margin-top: 0.5em; font-weight: 700; }
  .mbs-cover-lines { display: grid; gap: 0.7rem; padding: 1.25rem 0 0; }
  .mbs-cover-lines i { display: block; height: 0.45rem; border-radius: 3px; background: rgb(255 255 255 / 0.35); }
  .mbs-cover-lines i:nth-child(3n) { width: 70%; }
  .mbs-cover-lines i:nth-child(4) { width: 85%; }
  .mbs-cover-tag {
    position: absolute;
    top: -0.9rem;
    right: -0.9rem;
    padding: 0.45rem 0.9rem;
    background: var(--mbs-shout);
    color: var(--mbs-black);   /* black on pink 5.50:1 */
    font-weight: 900;
    font-size: 1.125rem;
    transform: rotate(8deg);
  }
}

/* ── Sections ── */
.mbs-section > .mbs-wrap,
.mbs-band > .mbs-wrap {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--mbs-line);
}
.mbs-section--signup > .mbs-wrap { border-top: 0; }

.mbs-h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.625rem, 3.6vw, 2.5rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 30ch;
}

.mbs-prose { max-width: var(--mbs-measure); }
.mbs-prose p { margin: 0 0 1rem; }
.mbs-prose p:last-child { margin-bottom: 0; }
/* The deck's emphasis line: the setup in black, the punch in violet Black. */
.mbs-strong { font-weight: 900; color: var(--mbs-victory); letter-spacing: -0.01em; }
.mbs-note { font-size: 0.9375rem; color: var(--mbs-gray); max-width: var(--mbs-measure); }
.mbs-gets { margin: 1rem 0 0; }
.mbs-gets li { color: var(--mbs-black); }

/* Two-column pairs. One column until laptop width; the moment + system pair gives the
   story the wider column and the numbers panel the narrower one. */
.mbs-duo { display: grid; gap: clamp(2rem, 4vw, 4rem); }
.mbs-duo > .mbs-block { min-width: 0; }
/* On a phone the moment is one story: no duo gap between its halves, only the loop's own margin. */
.mbs-duo--moment { gap: 0; }
@media (min-width: 64rem) {
  .mbs-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  /* The moment: the loop card sits level with the start of the story, not the heading. */
  .mbs-duo--moment { align-items: center; gap: clamp(2rem, 4vw, 4rem); }
  .mbs-duo--moment .mbs-loop { margin-top: 0; }
  .mbs-duo--after > .mbs-block:last-child,
  .mbs-duo--proof > .mbs-block:last-child { padding-top: 0.5rem; }
}

/* The system panel and its two figures. */
.mbs-panel {
  background: var(--mbs-canvas);
  border: 2px solid var(--mbs-black);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.mbs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0.25rem 0 1.5rem; }
.mbs-stat { display: flex; flex-direction: column; gap: 0.25rem; }
.mbs-stat-num {
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mbs-shout); /* large type only: 3.66:1 on the canvas */
}
.mbs-stat-label { font-size: 0.9375rem; color: var(--mbs-gray); line-height: 1.5; }

/* The billing merry-go-round figure. The artwork is still in the old palette and has a
   white ground, so it sits on a white card with a black rule; regenerating it in the new
   palette is a follow-up. */
.mbs-figure { margin: 0; }
.mbs-figure .mbs-wrap { padding-top: clamp(1rem, 3vw, 2rem); padding-bottom: clamp(1.5rem, 4vw, 3rem); }
/* Phone: the cycle as a loop of steps. A line joins the pictures; the last step's
   ring is pink and a "back to the start" arrow closes the loop. Hidden from tablet
   width, where the full infographic is legible. */
.mbs-cycle { display: block; }
.mbs-cycle-title {
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mbs-victory);
}
.mbs-cycle-steps { list-style: none; margin: 0; padding: 0; counter-reset: cycle; position: relative; }
/* The connecting line, behind the pictures. */
.mbs-cycle-steps::before {
  content: "";
  position: absolute;
  left: 47px;
  top: 48px;
  bottom: 48px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--mbs-gray) 0 6px, transparent 6px 12px);
}
.mbs-cycle-step {
  counter-increment: cycle;
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1rem;
  /* Top-aligned so the number badge stays on its picture however long the text runs. */
  align-items: start;
  margin-bottom: 1rem;
}
.mbs-cycle-step img {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--mbs-black);
  background: var(--mbs-paper);
}
/* Step number, on the picture's rim. */
.mbs-cycle-step::before {
  content: counter(cycle);
  position: absolute;
  left: -4px;
  top: -4px;
  z-index: 1;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--mbs-paper);
  background: var(--mbs-victory);
}
.mbs-cycle-step p { margin: 0; padding-top: 0.75rem; line-height: 1.5; }
.mbs-cycle-step.mbs-cycle-step--loop span { font-style: normal; color: var(--mbs-black); }
.mbs-cycle-step strong { display: block; }
.mbs-cycle-step span { display: block; margin-top: 0.2rem; color: var(--mbs-gray); font-style: italic; }
.mbs-cycle-step--loop img { box-shadow: 0 0 0 4px var(--mbs-shout); }
.mbs-cycle-step--loop::before { content: "\21BB"; font-size: 1rem; }
.mbs-cycle-deadline {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin: 1.25rem 0 0;
  padding: 0.9rem 1rem;
  border: 2px solid var(--mbs-black);
  border-left: 8px solid var(--mbs-shout);
  border-radius: 12px;
  background: var(--mbs-canvas);
  font-size: 0.9375rem;
}
.mbs-cycle-deadline img { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; background: var(--mbs-paper); }
.mbs-cycle-deadline strong { color: var(--mbs-black); }

.mbs-figure-img { display: none; }
@media (min-width: 48rem) {
  .mbs-cycle { display: none; }
  .mbs-figure-img { display: block; }
}
.mbs-figure-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: var(--mbs-paper);
  border: 2px solid var(--mbs-black);
  padding: clamp(0.5rem, 1.5vw, 1rem);
}
.mbs-figure-cap {
  margin: 1rem auto 0;
  max-width: var(--mbs-measure);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--mbs-gray);
}

/* Life after: the two endings as cards, stacked one above the other on every screen
   (Draft 4). */
.mbs-outcomes { display: grid; gap: 1rem; margin: 0 0 1.5rem; }
.mbs-outcome {
  margin: 0;
  padding: 1.25rem 1.25rem 1.25rem 1.4rem;
  background: var(--mbs-canvas);
  border: 2px solid var(--mbs-black);
  border-left: 8px solid var(--mbs-victory);
  border-radius: 12px;
}
.mbs-duo--after .mbs-jump { margin: 1.5rem 0 0; }

/* Proof: results as tiles. */
.mbs-results-lead { margin: 0 0 1rem; font-weight: 700; }
.mbs-results {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 30rem) { .mbs-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mbs-result {
  padding: 1rem 1.1rem;
  background: var(--mbs-canvas);
  border: 2px solid var(--mbs-black);
  border-radius: 12px;
}
.mbs-result strong { color: var(--mbs-victory); font-weight: 900; font-size: 1.15em; letter-spacing: -0.01em; }
.mbs-result--wide { grid-column: 1 / -1; color: var(--mbs-gray); }

.mbs-cite { color: var(--mbs-victory); text-decoration: underline; margin-left: 0.15em; padding: 0 0.2em; }
.mbs-cite sup { font-size: max(0.7em, 0.875rem); } /* footnote marker: never under 14px */
.mbs-cite:hover { color: var(--mbs-black); }

/* The CTA can wrap on a phone: two balanced lines rather than overflowing; the block
   button in the form does too. */
.mbs-btn { line-height: 1.3; text-wrap: balance; }
.mbs-jump .mbs-btn { max-width: 100%; }
/* The small line under every button, saying what the click gets you. */
.mbs-cta-note { display: block; margin: 0.6rem 0 0; font-size: 1rem; color: var(--mbs-gray); }
.mbs-form .mbs-cta-note { text-align: center; }

.mbs-review {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.5rem;
  border-left: 8px solid var(--mbs-shout);
  background: var(--mbs-canvas);
  border-radius: 0 12px 12px 0;
}
.mbs-review blockquote { margin: 0; }
.mbs-review blockquote p { margin: 0; font-size: 1.1875rem; font-weight: 500; }
.mbs-review figcaption { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--mbs-gray); }
.mbs-review a { color: var(--mbs-victory); display: inline-block; padding: 0.2rem 0; }

/* Sign-up: the offer and the form side by side from tablet width. The white card is a
   pseudo-element over a violet slab tilted behind it (same trick as the cover), so the
   form keeps its black-on-white contrast and the brand still shows at the edges. The
   section clips the slab's overhang, so a tilted corner never causes a sideways scroll. */
.mbs-section--signup { overflow-x: clip; }
.mbs-signup {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: none;
  border: 0;
}
.mbs-signup::before,
.mbs-signup::after { content: ""; position: absolute; }
.mbs-signup::before {
  inset: 0.75rem -1rem -0.75rem 1rem;
  z-index: -2;
  background: var(--mbs-victory);
  border-radius: 14px;
  transform: rotate(-1.5deg);
}
.mbs-signup::after {
  inset: 0;
  z-index: -1;
  background: var(--mbs-paper);
  border: 2px solid var(--mbs-black);
  border-radius: 14px;
}
.mbs-signup .mbs-h2 { margin-bottom: 0.75rem; }
.mbs-signup-copy > p { margin: 0; }
@media (min-width: 48rem) {
  .mbs-signup { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
  .mbs-signup .mbs-fields { grid-template-columns: minmax(0, 1fr); }
}

/* YES / NO. Side by side from tablet width. The words YES and NO carry the meaning;
   colour only reinforces it. YES is white on violet, NO is black on pink: each chip
   passes on its own, and a tilted slab echoes the logo badge. */
.mbs-fit { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .mbs-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
.mbs-fit-col {
  background: var(--mbs-canvas);
  border: 2px solid var(--mbs-black);
  border-radius: 14px;
  padding: 1.25rem 1.5rem 0.5rem;
}
.mbs-fit-head { margin: 0 0 0.75rem; font-size: 1.125rem; font-weight: 900; letter-spacing: -0.02em; }
.mbs-fit-head span {
  display: inline-block;
  padding: 0 0.4em;
  font-size: 1.3em;
  font-weight: 900;
  letter-spacing: -0.02em;
  transform: rotate(-3deg);
}
.mbs-fit-col--yes .mbs-fit-head span { background: var(--mbs-victory); color: var(--mbs-paper); }
.mbs-fit-col--no .mbs-fit-head span { background: var(--mbs-shout); color: var(--mbs-black); }
.mbs-fit-col--yes { border-top: 8px solid var(--mbs-victory); }
.mbs-fit-col--no { border-top: 8px solid var(--mbs-shout); }
.mbs-fit ul { margin: 0; padding-left: 1.1rem; }
.mbs-fit li { margin-bottom: 0.75rem; }

/* About: photo beside the text from tablet width. */
.mbs-about { display: grid; gap: 1.5rem; }
.mbs-kim { width: 160px; height: 160px; border-radius: 50%; border: 4px solid var(--mbs-shout); }
@media (min-width: 48rem) {
  /* Centred as a unit: the text column stops at the reading measure, so a 1fr column
     would leave a dead strip on the right of a wide screen. */
  .mbs-about { grid-template-columns: auto minmax(0, var(--mbs-measure)); justify-content: center; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .mbs-kim { width: clamp(180px, 20vw, 240px); height: auto; aspect-ratio: 1; }
}

/* FAQ: two columns from tablet width. Each Q+A stays together. */
.mbs-faq { display: grid; gap: 1.75rem 3rem; }
@media (min-width: 48rem) { .mbs-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mbs-faq-q { margin: 0 0 0.4rem; font-size: 1.125rem; line-height: 1.3; font-weight: 900; letter-spacing: -0.02em; }
.mbs-faq-a { margin: 0; color: var(--mbs-black); max-width: var(--mbs-measure); }

/* Last ask: centred, on every screen, on a violet slab tilted like the logo badge.
   Everything on it is white (6.17:1) and the button flips to white with violet type. */
.mbs-last { position: relative; z-index: 0; overflow-x: clip; }
.mbs-last::before {
  content: "";
  position: absolute;
  inset: 1.5rem -3rem;
  z-index: -1;
  background: var(--mbs-victory);
  transform: rotate(-1.5deg);
}
.mbs-last .mbs-wrap { text-align: center; color: var(--mbs-paper); border-top: 0; }
.mbs-last .mbs-h2 { margin-left: auto; margin-right: auto; }
.mbs-last .mbs-lede { margin: 0 auto 1.5rem; }
.mbs-last .mbs-cta-note { color: var(--mbs-paper); }
.mbs-last .mbs-btn { color: var(--mbs-victory); background: var(--mbs-paper); border-color: var(--mbs-paper); }
.mbs-last .mbs-btn:hover { color: var(--mbs-paper); background: var(--mbs-black); border-color: var(--mbs-black); }
.mbs-last :focus-visible { outline-color: var(--mbs-paper); }

/* Footer: black, white type (21:1), pink links (5.5:1 on black). */
.mbs-footer { background: var(--mbs-black); color: var(--mbs-paper); }
.mbs-footer .mbs-wrap { padding-top: 2rem; }
.mbs-footer :focus-visible { outline-color: var(--mbs-paper); }
.mbs-footer-grid { display: grid; gap: 0.5rem 3rem; }
@media (min-width: 48rem) { .mbs-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mbs-footer-h { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 900; letter-spacing: -0.02em; }
.mbs-sources { margin: 0 0 1.25rem; padding-left: 1.25rem; font-size: 1rem; color: var(--mbs-paper); }
.mbs-sources a, .mbs-footer .mbs-powered a { color: var(--mbs-shout); text-underline-offset: 3px; }
.mbs-footer .mbs-powered { color: var(--mbs-paper); }
.mbs-sources li { scroll-margin-top: 1.5rem; }
/* Link targets in the footer and under the cards are at least 24px tall (WCAG 2.2 2.5.8),
   although inline links in a sentence are exempt: these are easy to miss with a thumb. */
.mbs-powered a, .mbs-sources a { display: inline-block; padding: 0.2rem 0.1rem; }
.mbs-footer-grid .mbs-powered:first-child { margin-top: 0; }
.mbs-ok:focus { outline: none; }

/* ── Readability pass (2026-10-03, "the text is very small") ──────────────────────
   Body text scales with the screen: 18px on a phone up to ~21px on a laptop. Nothing
   on the page renders below 16px, and long-form answers use full-strength text rather
   than the muted tone. The reading measure moves from rem to ch so it widens with the
   font instead of squeezing bigger letters into the same line. */
body { font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem); line-height: 1.65; }
:root { --mbs-measure: 66ch; }
.mbs-lede { font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem); line-height: 1.55; }
.mbs-hero-copy .mbs-lede { max-width: 40ch; }
.mbs-headline-sub { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); }
.mbs-note,
.mbs-help,
.mbs-figure-cap,
.mbs-stat-label,
.mbs-review figcaption,
.mbs-powered,
.mbs-cycle-deadline { font-size: max(1rem, 0.9em); }
.mbs-sources, .mbs-legal { font-size: 1rem; }
.mbs-faq-q { font-size: 1.1em; }
.mbs-review blockquote p { font-size: 1.2em; }
.mbs-fit-head { font-size: 1.1em; }
.mbs-cycle-title { font-size: 1rem; }
.mbs-results-lead { font-size: 1.05em; }
.mbs-label { font-size: 1rem; }

/* ── Copy tweaks (2026-10-03) ─────────────────────────────────────────────────────
   No lonely one-word last lines: headings balance their lines (so "Picture the next
   medical bill." breaks as two even lines, not "…medical / bill."), and running text
   avoids a single orphaned word on its last line. Both are progressive enhancements:
   a browser without them just wraps as before. */
.mbs-headline, .mbs-h2, .mbs-faq-q, .mbs-fit-head, .mbs-subhead, .mbs-payoff { text-wrap: balance; }
.mbs-prose p, .mbs-faq-a, .mbs-points li, .mbs-lede, .mbs-outcome p, .mbs-cycle-step p, .mbs-stack > * { text-wrap: pretty; }


/* Life after: headline + subhead, bold lead-in bullets, payoff line set apart. */
.mbs-h2--with-sub { margin-bottom: 0.5rem; }
.mbs-subhead {
  margin: 0 0 1.25rem;
  font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--mbs-gray);
}
.mbs-knows { margin: 0 0 1.5rem; max-width: var(--mbs-measure); }
.mbs-knows li { color: var(--mbs-black); }
.mbs-knows strong { color: var(--mbs-black); }
.mbs-payoff {
  margin: 0;
  font-size: 1.2em;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--mbs-victory);
}

/* ── Draft 4 (2026-10-03): more short lines, lists and cards, so the page skims ──── */

/* Lines Kim wants stacked, one per line, inside one paragraph. */
.mbs-stack > span, .mbs-stack > strong { display: block; }
.mbs-hero-copy .mbs-stack > span + span { margin-top: 0.15em; }

/* Brand emphasis, for a name only (Strategic Dysfunction™, the live bonuses). Violet,
   not pink: this is body-size type. */
.mbs-brand { color: var(--mbs-victory); }

/* The phone loop: five typed lines in a box, the replies indented under their call. */
.mbs-loop {
  list-style: none;
  margin: 1.25rem 0 1.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--mbs-canvas);
  border: 2px solid var(--mbs-black);
  border-left: 8px solid var(--mbs-shout);
  border-radius: 12px;
  display: grid;
  gap: 0.35rem;
}
.mbs-loop li { margin: 0; }
.mbs-loop-reply { padding-left: 1.25rem; color: var(--mbs-gray); font-style: italic; }
.mbs-loop-reply span { font-style: normal; color: var(--mbs-victory); margin-right: 0.25rem; }
.mbs-loop-end { font-weight: 700; }
.mbs-loop-end span { color: var(--mbs-victory); margin-right: 0.35rem; }

/* Check marks, not dots. */
.mbs-checks { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.4rem; }
.mbs-checks li { position: relative; padding-left: 1.85rem; }
.mbs-checks li::before {
  content: "\2713";
  position: absolute;
  left: 0.1rem;
  top: 0;
  font-weight: 900;
  color: var(--mbs-victory);
}

/* The villain: text, then the two number cards right after "And it works." on a
   phone; the cards beside the text on a laptop. */
.mbs-villain { display: grid; gap: 1.5rem; }
.mbs-villain > * { min-width: 0; }
.mbs-villain .mbs-prose p:last-child { margin-bottom: 0; }
.mbs-villain .mbs-stats { grid-template-columns: minmax(0, 1fr); margin: 0; }
.mbs-villain .mbs-stat {
  margin: 0;
  padding: 1.1rem 1.25rem;
  background: var(--mbs-canvas);
  border: 2px solid var(--mbs-black);
  border-radius: 14px;
}
.mbs-villain .mbs-stat-num { font-size: clamp(2.25rem, 5vw, 3.25rem); }
.mbs-villain .mbs-stat-label { color: var(--mbs-black); font-size: 1em; }
.mbs-stats-after { margin: 1rem 0 0; font-weight: 900; font-size: 1.1em; letter-spacing: -0.01em; color: var(--mbs-victory); }
@media (min-width: 64rem) {
  .mbs-villain {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas: "a cards" "b cards";
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: 1rem;
    align-items: start;
  }
  .mbs-villain-a { grid-area: a; }
  .mbs-villain-b { grid-area: b; }
  .mbs-villain-cards { grid-area: cards; position: sticky; top: 1.5rem; padding-top: 0.5rem; }
}

/* Life-after cards: a bold headline, short lines, one bold. */
.mbs-outcome-h { margin: 0 0 0.5rem; font-size: 1.15em; font-weight: 900; letter-spacing: -0.02em; line-height: 1.3; text-wrap: balance; }
.mbs-outcome p { margin: 0; }
.mbs-outcome .mbs-stack > * + * { margin-top: 0.2rem; }

/* Short lists inside running prose. */
.mbs-points--tight { margin: 0 0 1rem; gap: 0.35rem; }
.mbs-prose .mbs-points li { color: var(--mbs-black); }

/* The live bonuses, each on its own line under the workshop. */
.mbs-bonuses { list-style: none; margin: 0.5rem 0 0.4rem; padding: 0; display: grid; gap: 0.3rem; }
.mbs-bonuses li { position: relative; padding-left: 1.25rem; }
/* Overrides the parent list's dot: these li sit inside a .mbs-points li. */
.mbs-points .mbs-bonuses li { padding-left: 1.25rem; }
.mbs-points .mbs-bonuses li::before {
  content: "\25E6";
  top: 0; left: 0.1rem;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  color: var(--mbs-victory);
  font-weight: 700;
}
.mbs-bonus-note { display: block; color: var(--mbs-gray); }

/* ── After sign-up: guide sent + workshop, with add-to-calendar buttons ─────────────── */
.mbs-done { display: grid; gap: 0.75rem; }
.mbs-done:focus { outline: none; }
.mbs-done p { margin: 0; }
.mbs-done-h { margin: 0.5rem 0 0; font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.3; }
.mbs-done-h:first-child { margin-top: 0; }
.mbs-done-cal-label { font-weight: 700; }
.mbs-cal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mbs-cal-btn {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border: 2px solid var(--mbs-black);
  border-radius: 8px;
  background: var(--mbs-paper);
  color: var(--mbs-black);
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
}
.mbs-cal-btn:hover, .mbs-cal-btn:focus-visible { background: var(--mbs-victory); border-color: var(--mbs-victory); color: var(--mbs-paper); }

/* ── Windows High Contrast / forced colours ───────────────────────────────────────
   The logo files are black paths on transparent, which vanish on a dark forced theme, so
   the header mark gets a white plate and is exempt from the colour override. Pink and
   violet slabs and the cover sheet are decoration under the text (negative z-index): the
   system repaints their backgrounds to Canvas, and the text stays CanvasText. The chips
   lose their fill, so they get a border to stay chips. */
@media (forced-colors: active) {
  .mbs-logo { forced-color-adjust: none; background: #fff; padding: 0.25rem 0.4rem; }
  .mbs-fit-head span { border: 2px solid currentColor; }
  .mbs-cover-tag { border: 2px solid currentColor; }
  .mbs-cover-lines i { background: currentColor; }
  .mbs-cover::before, .mbs-cover::after, .mbs-signup::before { display: none; }
  .mbs-cover { border: 2px solid currentColor; }
}

/* ── Countdown beside the logo (Kim, 2026-10-14) ──────────────────────────────────
   In the header row, so on a phone it sits in the empty space right of the compact mark
   instead of adding a row above the headline: the headline and the first button still
   show on a 375x548 Safari viewport (iPhone SE with its toolbars) without scrolling.
   White on black boxes (21:1); the label is full-strength black. Units stay at 16px,
   the page's floor. Tabular figures so the seconds don't jiggle the row. */
.mbs-header-in--countdown { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.mbs-countdown { text-align: right; line-height: 1.15; }
.mbs-countdown-label { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 700; color: var(--mbs-black); }
.mbs-countdown-clock { display: flex; justify-content: flex-end; gap: 0.3rem; margin: 0; }
.mbs-countdown-clock > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.75rem;
  padding: 0.25rem 0.3rem 0.2rem;
  border-radius: 6px;
  background: var(--mbs-black);
  color: var(--mbs-paper);
  font-size: 1rem;
}
.mbs-countdown-clock b { font-size: 1.25rem; font-weight: 900; font-variant-numeric: tabular-nums; }
@media (min-width: 48rem) {
  .mbs-countdown-label { font-size: 1.125rem; }
  .mbs-countdown-clock { gap: 0.5rem; }
  .mbs-countdown-clock > span { min-width: 4rem; padding: 0.4rem 0.5rem 0.3rem; }
  .mbs-countdown-clock b { font-size: 1.75rem; }
}
@media (forced-colors: active) {
  .mbs-countdown-clock > span { border: 2px solid currentColor; }
}

/* The four lines under the headline (Kim, 2026-10-14): enough space between them that a
   line which wraps on a phone still reads as one line, not as part of a paragraph. The
   hero's top padding and the gap above the button give back what the timer and this
   spacing take, so the button stays on the first screen. */
.mbs-hero-copy .mbs-stack > span + span { margin-top: 0.5em; }
@media (max-width: 47.99rem) {
  .mbs-hero .mbs-wrap { padding-top: 0.75rem; }
  .mbs-hero-copy .mbs-lede { margin-bottom: 1.25rem; }
}

/* The kit's cover beside the sentence about the kit (2026-10-14). A small upright
   thumbnail with the page's black frame and a pink offset block, like the free guide's
   cover up top, but a real image: this one is the actual product. */
.mbs-kit { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }
.mbs-kit p { margin: 0; }
.mbs-kit-cover {
  flex: 0 0 auto;
  width: 8rem;
  height: auto;
  border: 2px solid var(--mbs-black);
  box-shadow: 6px 6px 0 var(--mbs-shout);
  transform: rotate(-2deg);
}
@media (min-width: 48rem) { .mbs-kit-cover { width: 11rem; } .mbs-kit { gap: 2rem; } }

/* The kit's "Before you start" acceptance (views/mbs/kit-notice.ejs): a large tick target
   beside text the buyer must read, not a fine-print row. */
.mbs-check { display: flex; gap: 0.75rem; align-items: flex-start; margin: 1.25rem 0 1rem; font-size: 1rem; }
.mbs-check input[type="checkbox"] { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; accent-color: var(--mbs-victory); }
.mbs-check label { cursor: pointer; }

/* Kit + Kim capacity popup (modal enhancement of views/mbs/kitkim-pushed.ejs) */
.mbs-kitkim-dialog { max-width: 32rem; width: calc(100% - 2rem); border: 0; border-radius: 12px; padding: 1.5rem; }
.mbs-kitkim-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.mbs-kitkim-dialog .mbs-btn { margin: 0.25rem 0.25rem 0 0; display: inline-block; text-decoration: none; }