/* RED AS TYPE BECOMES EMBER ON DARK. Solid --marrow-red is 1.62:1 on the
   dark ground. --marrow-ember-text is the shipped accessibility token for
   exactly this case, measured 7.69:1. Red still points; it just does not
   colour a word at 1.62. */
/* ===== MARROW LAMELLA, page scoped layout only =====
   Rules honored here:
     - Zero new custom properties. Every color is a var() already defined
       in /css/styles.css.
     - Zero hex literals. `grep -E "#[0-9a-fA-F]{3,8}" lamella.css` must be empty.
     - --marrow-red is used for rules, dots and borders. It never colours a
       word anywhere in this file. Where red has to read as type, the shipped
       --marrow-ember-text token carries it. Corrected 2026-08-21: this line
       used to say "on light surfaces only", which is a light table reading of
       a page that is stamped dark.
     - Every transition is disabled under prefers-reduced-motion at the bottom.
   Layout, spacing and rhythm only. No brand identity is invented in this file.
*/

/* ---------- shared section rhythm ---------- */
.cx-section {
  padding: var(--space-7) 0;
  border-top: 1px solid var(--line);
}
.cx-section:first-of-type { border-top: 0; }
.cx-narrow { max-width: 860px; }

.cx-h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--bone-black);
  margin: 0 0 var(--space-3);
}
.cx-lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--steel);
  max-width: 66ch;
  margin: 0 0 var(--space-5);
}

/* ---------- hero ---------- */
.cx-hero {
  padding: var(--space-8) 0 var(--space-7);
  background: var(--bone-white);
  border-bottom: 1px solid var(--line);
}
.cx-hero-inner { max-width: 900px; }
.cx-hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 6.4vw, 76px);
  line-height: 1.03;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--bone-black);
  margin: 0 0 var(--space-3);
}
.cx-hero-lede {
  font-size: 20px;
  line-height: 1.6;
  color: var(--steel);
  max-width: 62ch;
  margin: 0 0 var(--space-2);
}
.cx-hero-lede strong { color: var(--bone-black); font-weight: 600; }
.cx-rule {
  width: 72px;
  height: 3px;
  background: var(--marrow-red);
  border: 0;
  margin: 0 0 var(--space-4);
}
.cx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.cx-hero-note {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--steel);
}

/* ---------- role doors ----------
   Three readers land on this page. The doors sit directly under the hero so a
   trainer, a coach and a gym owner each find themselves in one press instead of
   reading two sections that are not theirs. Measured pairs against the
   --bone-white card ground AS THIS PAGE RENDERS IT, which the dark stamp makes
   a near black card rather than the near white one an earlier version of this
   comment assumed: --marrow-ember-text at 7.09 to 1 and --bone-black at 15.72
   to 1. Solid --marrow-red is a border here and never type, because as type on
   that same card it measures 1.62 to 1. The hover changes the border only, so nothing
   moves and nothing depends on seeing a color. */
.cx-doors {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 900px;
}
.cx-doors a {
  display: block;
  height: 100%;
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--marrow-red);
  border-radius: 2px;
  padding: 14px var(--space-3);
  text-decoration: none;
  transition: border-color 160ms ease;
}
.cx-doors a:hover { border-color: var(--marrow-red); }
.cx-door-key {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--marrow-ember-text);
  margin: 0 0 6px;
}
.cx-door-say {
  display: block;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bone-black);
}

/* ---------- the teaching block ----------
   The kicker is the money sentence and the first job is the sentence a reader
   is meant to carry away, so both get more weight than a lede without becoming
   a heading. Neither uses red as type. */
.cx-kicker {
  font-size: 19px;
  font-weight: 500;
  color: var(--bone-black);
  max-width: 62ch;
}
.cx-firstjob {
  font-size: 17px;
  line-height: 1.6;
  color: var(--steel);
  margin: var(--space-4) 0 0;
  padding-left: var(--space-2);
  border-left: 3px solid var(--marrow-red);
}
.cx-firstjob strong {
  font-weight: 600;
  color: var(--bone-black);
}
.cx-firstjob-alt { margin-top: 10px; }

/* ---------- job teasers ----------
   Four of the nine live jobs. Fixed three part shape, repeated, which is what
   makes a dense block scannable. The full list is its own page. */
.cx-section-alt { background: var(--bone-white); }
.cx-section-alt .cx-job { background: var(--bone-cream); }
.cx-jobs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cx-job {
  border: 1px solid var(--line);
  border-top: 3px solid var(--marrow-red);
  border-radius: 2px;
  padding: var(--space-3);
}
.cx-job h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bone-black);
  margin: 0 0 10px;
}
.cx-job-say {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--bone-black);
  margin: 0 0 10px;
}
.cx-job-money {
  font-size: 14px;
  line-height: 1.6;
  color: var(--steel);
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* ---------- numbered steps ---------- */
.cx-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cx-step {
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--marrow-red);
  border-radius: 2px;
  padding: var(--space-4) var(--space-3);
}
.cx-step-num {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--marrow-ember-text);
  margin: 0 0 var(--space-2);
}
.cx-step h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bone-black);
  margin: 0 0 10px;
}
.cx-step p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--steel);
  margin: 0;
}

/* ---------- capability and boundary lists ---------- */
.cx-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.cx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx-card {
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: var(--space-3);
}
.cx-card h3 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bone-black);
  margin: 0 0 8px;
}
.cx-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--steel);
  margin: 0;
}

/* Small status tag inside a card heading. Used once, on the one client we have
   actually run. It sits on --bone-white only. CORRECTED 2026-08-21: this
   comment used to say --marrow-red measures 11.7:1 there and called .cx-guard
   "the dark guard surface". Both statements come from the light table and this
   page renders the dark one, where the card is the near black surface and the
   guard band is the LIGHT slab. The rule itself was already right, because it
   colours the text with --marrow-ember-text (7.09 to 1 on the card) and spends
   --marrow-red on the border. It still never appears inside .cx-guard, where
   no red token clears the bar in both tables. */
.cx-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid var(--marrow-red);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--marrow-ember-text);
}

.cx-guard {
  background: var(--bone-black);
  border-top-color: var(--line-dark);
}
/* THIS BAND'S GROUND INVERTS WITH THE THEME, SO EVERY INK ON IT MUST INVERT
   WITH IT. CORRECTED 2026-08-21.

   The ground is --bone-black. On the light table that is the near black ink
   and the band reads as a black slab, which is what the original three inks
   were chosen against. This page is stamped data-mz-theme="dark", so
   --bone-black resolves to the near white value and the band renders LIGHT.
   Measured in a browser on the rendered page, the section that states what
   Lamella can never do was serving its supporting copy at:
     steel-light on the band .......... 1.37 to 1   the lede and the card copy
     ember-text  on the band .......... 2.22 to 1   the eyebrow
   Neither token is the inverse of the ground. --steel-light is a light grey in
   BOTH tables, and --marrow-ember-text is tuned for a dark ground, so both
   landed light on light and the headings were left standing over invisible
   text.

   --bone-cream is the only foreground family that is the exact opposite of
   --bone-black in both tables, which is why the headings here were always
   fine. The muted tier therefore comes from opacity on that same token rather
   than from a second token, because no muted token inverts with this ground.
   Measured composites:
     bone-cream on bone-black ........ 16.45 light, 17.05 dark   headings
     bone-cream at 0.8 ............... 10.52 light, 10.20 dark   muted tier
   Red is absent here on purpose. Neither red token clears 4.5 to 1 on a ground
   that is near black in one table and near white in the other, and red points
   rather than colouring type. */
/* THE EYEBROW NEEDS FOUR CLASSES, AND THAT IS NOT A STYLE CHOICE.
   .section-eyebrow is a SHARED class, and dashboard-theme.css already remaps it
   with `:root[data-mz-theme="dark"] .section-eyebrow`, which is correct on the
   dark PAGE ground and wrong inside this band, whose ground inverts the other
   way. That selector scores three, so the obvious two class override here lost
   silently: the declaration below read as applied in this file while a browser
   kept returning the ember red at 2.22 to 1. Repeating the class takes this to
   four, which wins on specificity alone and so does not depend on which
   stylesheet the page happens to load last. Confirmed by reading
   getComputedStyle on the rendered page, because a rule that loses the cascade
   still looks perfectly correct in the file that declares it. */
.cx-section.cx-guard .section-eyebrow.section-eyebrow { color: var(--bone-cream); opacity: 0.8; }
.cx-guard .cx-h2 { color: var(--bone-cream); }
.cx-guard .cx-lede { color: var(--bone-cream); opacity: 0.8; }
.cx-guard .cx-card {
  background: transparent;
  border: 1px solid var(--line-dark);
}
.cx-guard .cx-card h3 { color: var(--bone-cream); }
.cx-guard .cx-card p { color: var(--bone-cream); opacity: 0.8; }
.cx-guard-close {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--bone-cream);
  max-width: 62ch;
  margin: var(--space-4) 0 0;
}

/* A lede that closes a section rather than opening one. */
.cx-lede-tail { margin: var(--space-4) 0 0; }

/* ---------- audience sections ---------- */
/* Three audiences read this page: a trainer inside a gym, a coach running the
   whole practice, and a gym owner. Each gets its own section with its own
   heading, its own example asks and its own call to action, so nobody has to
   read someone else's column to find their own. */
.cx-aud-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ---------- honesty banner ---------- */
/* The left rule and the weight are the visual cue. The sentence carries the
   meaning on its own, so nothing here depends on seeing a color. */
.cx-status {
  font-size: 15px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--bone-black);
  background: var(--bone-cream);
  border: 1px solid var(--line);
  border-left: 4px solid var(--marrow-red);
  border-radius: 2px;
  padding: 14px var(--space-3);
  margin: 0 0 var(--space-4);
  max-width: 74ch;
}
.cx-status strong { font-weight: 700; }

/* ---------- example asks ---------- */
.cx-asks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cx-ask {
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--marrow-red);
  border-radius: 2px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
}
.cx-ask-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marrow-ember-text);
  margin: 0 0 8px;
}
.cx-ask-say {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bone-black);
  margin: 0 0 var(--space-2);
}
.cx-ask-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}
.cx-ask-rows li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.cx-ask-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 4px;
}
.cx-ask-rows p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--steel);
  margin: 0;
}
/* The tool line is the receipt. Every example on this page names the shipped
   tools it runs on, so a reader can check the claim rather than trust it. */
.cx-tools {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--steel);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  word-break: break-word;
}

/* ---------- setup ---------- */
/* The steps and the two setup values are one section now, so the ordered list
   needs air under it before the value grid starts. */
.cx-steps + .cx-setup-grid { margin-top: var(--space-5); }
.cx-setup-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: start;
}
/* A grid item defaults to min-width auto, so the long single line inside the
   config block sets the track's floor and pushes the whole page sideways on a
   phone. Measured at a 375 viewport: the document scrolled to 483 without this
   line and to 375 with it. The pre scrolls inside itself instead. */
.cx-setup-grid > * { min-width: 0; }
.cx-code {
  background: var(--ash);
  color: var(--bone-cream);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  padding: var(--space-3);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
  tab-size: 2;
}
.cx-field-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cx-field-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cx-field-list li:last-child { border-bottom: 0; }
.cx-field-key {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marrow-ember-text);
  margin: 0 0 6px;
}
.cx-field-val {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--bone-black);
  word-break: break-all;
}
.cx-field-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--steel);
  margin: 6px 0 0;
}
/* The sentence that explains the config block sits above it, so it needs air
   underneath rather than above. */
.cx-code-intro { margin: 0 0 10px; }
.cx-setup-grid .cx-aud-actions { margin-top: var(--space-3); }

/* ---------- closing call to action ---------- */
.cx-cta {
  background: var(--bone-white);
  border-top: 1px solid var(--line);
  padding: var(--space-7) 0;
  text-align: center;
}
.cx-cta .cx-h2 { margin-bottom: var(--space-2); }
.cx-cta .cx-lede { margin: 0 auto var(--space-4); }
/* Two doors, one row. Coaches already on Marrow go to the dashboard, everyone
   else goes to the existing coach funnel. Both are real shipped buttons from
   /css/styles.css, so their focus rings and contrast come with them. */
.cx-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.cx-cta-sub {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin: var(--space-2) 0 0;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .cx-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cx-steps { grid-template-columns: 1fr; }
  .cx-grid,
  .cx-grid-3 { grid-template-columns: 1fr; }
  .cx-asks { grid-template-columns: 1fr; }
  .cx-setup-grid { grid-template-columns: 1fr; }
  .cx-doors { grid-template-columns: 1fr; }
  .cx-jobs { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cx-section { padding: var(--space-6) 0; }
  .cx-hero { padding: var(--space-6) 0 var(--space-5); }
  .cx-hero-lede { font-size: 18px; }
}

/* ---------- reduced motion ----------
   The page adds no animation of its own. This block also neutralizes the
   inherited hover transform and transition on the shared .btn-primary for
   visitors who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .cx-hero,
  .cx-step,
  .cx-card,
  .cx-ask,
  .cx-status,
  .cx-code,
  .cx-tag,
  .cx-doors a,
  .cx-job,
  .lamella-page .btn-primary,
  .lamella-page .btn-secondary {
    transition: none;
  }
  .lamella-page .btn-primary:hover,
  .lamella-page .btn-primary:active,
  .lamella-page .btn-secondary:hover,
  .lamella-page .btn-secondary:active {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Product capture. A real screenshot of the shipped dashboard card, so the
   page proves the claim instead of asserting it. Reuses existing tokens only,
   no new brand values. The frame is neutral so the shot reads as product
   rather than as decoration, and the image is capped at its true 1x width
   (the file is a 2x capture) so it never upscales into softness.
--------------------------------------------------------------------------- */
.cx-shot {
  margin: 32px 0 0;
  max-width: 460px;
}
.cx-shot img {
  display: block;
  width: 100%;
  max-width: 395px; /* true 1x of the 790px capture */
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.cx-shot figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.68;
}
@media (max-width: 720px) {
  .cx-shot { max-width: 100%; }
}

/* =========================================================================
   THE FIVE THAT COST YOU MOST.

   Two columns of five, coach on the left, owner on the right, so nobody has
   to read someone else's column to find themselves. Hairline separated rather
   than boxed: ten filled cards would read as a pricing table, and this is
   meant to read as someone naming your week back to you.

   The question is the loud line and the answer is the quiet one. That order
   matters. A person scanning should hit the thing that is true about them
   before they hit the thing we sell.
   ========================================================================= */
.cx-pain-tabs {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
@media (min-width: 900px) {
  .cx-pain-tabs { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
.cx-pain-who {
  margin: 0 0 var(--space-2);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--steel);
}
.cx-pain-row {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.cx-pain-row:last-child { border-bottom: 0; }
.cx-pain-q {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bone-black);
}
.cx-pain-a {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  max-width: 60ch;
  color: var(--steel);
}
.cx-pain-foot {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.7;
  max-width: 72ch;
  color: var(--steel);
}
.cx-pain-foot a { color: var(--bone-black); text-underline-offset: 3px; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   The prompt library.

   A disclosure per prompt, built at runtime from the shipped catalog. Tokens
   only, no hex, no new custom properties, no new brand values.

   CONTRAST, MEASURED AGAINST THE TABLE THIS PAGE ACTUALLY RENDERS.

   CORRECTED 2026-08-21. The first version of this block listed 18.77, 16.45,
   7.15, 6.26 and 11.89. Every one of those is a LIGHT palette number, and
   /lamella/ is stamped data-mz-theme="dark" on the html element, so the dark
   remap in assets/css/dashboard-theme.css owns every token on this page. Under
   that remap --bone-black is the near white ink and --bone-cream is the near
   black page, the exact opposite of what those numbers assumed. A comment that
   reasons from the wrong table is not merely stale, it is how a wrong pair
   gets read as a correct one: the 1.49 to 1 hover below shipped underneath
   these very lines.

   The numbers below are WCAG 2.1 relative luminance, computed from the dark
   remap, and confirmed by reading getComputedStyle in a browser on the
   rendered page rather than by reading the stylesheet. The print block in
   dashboard-theme.css restores the light values and is not what a screen
   reader of this page sees, so it is excluded. No literal colour value appears
   in this file, comments included, so the pairs are named by token and the
   numbers are the measurement:

     bone-black on bone-cream ....... 17.05 to 1   labels, headings, pl-for
     steel      on bone-cream ......... 9.47 to 1   badges, intros, lands lines
     bone-cream on ash .............. 15.04 to 1   the prompt text in its block
     bone-white on bone-black ....... 15.72 to 1   the copy control at rest
     mz-fg-on-accent on marrow-red .. 11.60 to 1   the copy control on hover
     ember-text on bone-cream ........ 7.69 to 1   red as type, the legal form

   Marrow red appears here as a rule and a bullet mark only. It never colours a
   word, because solid red type on this page's ground measures 1.62 to 1 and is
   banned. Where red must read as type the shipped ember token is used instead.
   --------------------------------------------------------------------------- */

.pl-bounds {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  max-width: 72ch;
}
.pl-bounds li {
  position: relative;
  padding: 10px 0 10px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.65;
  color: var(--steel);
}
.pl-bounds li:last-child { border-bottom: 0; }
.pl-bounds li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 6px;
  height: 2px;
  background: var(--marrow-red);
}
.pl-bounds strong { color: var(--bone-black); font-weight: 700; }

.pl-status {
  margin: 0 0 var(--space-3);
  min-height: 1.4em;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
}

.pl-groups { display: block; }

.pl-group { margin: 0 0 var(--space-5); }
.pl-group:last-child { margin-bottom: 0; }
.pl-group-h {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-black);
}
.pl-group-intro {
  margin: 0 0 var(--space-3);
  font-size: 15px;
  line-height: 1.65;
  max-width: 66ch;
  color: var(--steel);
}

.pl-sub { margin: 0 0 var(--space-4); }
.pl-sub:last-child { margin-bottom: 0; }
.pl-sub-h {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bone-black);
}

.pl-items {
  border-top: 1px solid var(--line);
}

.pl-item { border-bottom: 1px solid var(--line); }

.pl-q { margin: 0; }

.pl-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 4px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--bone-black);
}
.pl-label {
  flex: 1 1 auto;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--bone-black);
}
.pl-badge {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 3px 7px;
  white-space: nowrap;
}
.pl-badge-write { border-color: var(--marrow-red); }

.pl-chev {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--steel);
  border-bottom: 2px solid var(--steel);
  transform: rotate(45deg);
  margin: 0 4px 3px 0;
  transition: transform 160ms ease;
}
.pl-btn[aria-expanded="true"] .pl-chev { transform: rotate(225deg); margin-bottom: 0; }

.pl-panel {
  padding: 0 4px 18px;
  border-left: 2px solid var(--marrow-red);
  padding-left: 14px;
  margin: 0 0 4px;
}
.pl-panel[hidden] { display: none; }

.pl-for,
.pl-lands {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.65;
  max-width: 66ch;
  color: var(--steel);
}
.pl-for { color: var(--bone-black); font-weight: 600; }

.pl-ask {
  background: var(--ash);
  color: var(--bone-cream);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  padding: var(--space-3);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 12px;
}

/* THE HOVER CHANGES THE GROUND, SO IT MUST ALSO NAME THE INK.

   At rest this button is --bone-white ink on a --bone-black slab. Both tokens
   invert together, so the pair holds in either table: 18.77 to 1 on the light
   one, 15.72 to 1 on the dark one this page actually renders.

   The hover swaps the ground to --marrow-red, which does NOT invert. It is the
   same value in both tables. Leaving the ink as --bone-white therefore
   composited, under the dark remap, to the dark card value on solid red,
   measured 1.49 to 1 by reading getComputedStyle on the rendered page: the
   label vanished into the red at the exact moment a reader was reaching for
   it. The rest state was fine the whole time, which is why reading the base
   rule alone missed it.

   The fix follows the shipped precedent for ink on a red fill rather than
   inventing a pair. --mz-fg-on-accent is the role token dashboard-theme.css
   defines for exactly this case, "text on a marrow-red or brand-primary fill".
   It resolves through --mzv-onfill, which sits outside the dark remap on
   purpose and is therefore constant in BOTH tables, and both pairing tables in
   that file document it at 11.60 to 1 on marrow red. Same ink the
   .btn-primary-dash red fill has carried since it shipped.

   The focus ring names --bone-black, which inverts with the theme, so the ring
   is dark on the light page and light on the dark one without a second rule.
   Measured against the page ground: 16.45 to 1 light, 17.05 to 1 dark. */
.pl-copy {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-white);
  background: var(--bone-black);
  border: 1px solid var(--bone-black);
  border-radius: 2px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 160ms ease;
}
.pl-copy:hover {
  background: var(--marrow-red);
  border-color: var(--marrow-red);
  color: var(--mz-fg-on-accent);
}
.pl-copy:focus-visible {
  outline: 2px solid var(--bone-black);
  outline-offset: 3px;
}

.pl-missing,
.pl-noscript {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  max-width: 66ch;
  color: var(--steel);
}

@media (prefers-reduced-motion: reduce) {
  .pl-chev,
  .pl-copy {
    transition: none;
  }
}