/* ===========================================================================
   CLARA MARITIME — 2026 PAGE COMPONENTS
   ---------------------------------------------------------------------------
   The component layer for the four designed pages (home, why-licensing,
   how-clara-works, legal-basis), built from the approved prototypes in
   /var/www/clara-design/.

   The prototypes carry their styling as inline attributes (a design-canvas
   convention, including a non-standard `style-hover` attribute that no browser
   implements). Everything here is the same design expressed as real CSS driven
   by tokens.css, so hover/focus states actually work and a value is changed in
   one place.

   Prefix: .cm-  (Clara Maritime). Legacy classes in clara.css are untouched.
   Load order: tokens.css -> clara.css -> pages.css
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. LAYOUT PRIMITIVES
   ------------------------------------------------------------------------- */
.cm-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.cm-wrap--narrow { max-width: var(--container-narrow); }

.cm-section { padding-top: var(--band-y); padding-bottom: var(--band-y); }
.cm-section--scene { padding-top: var(--scene-y);  padding-bottom: var(--scene-y); }
.cm-section--stage { padding-top: var(--stage-y);  padding-bottom: var(--stage-y); }
.cm-section--group { padding-top: var(--group-y);  padding-bottom: var(--group-y); }
.cm-section--hero  { padding-top: var(--hero-y-top); padding-bottom: var(--hero-y-bottom); }

/* Band tones. A band owns its own background and top hairline. */
.cm-band            { background: var(--offwhite); color: var(--ink); }
.cm-band--pale      { background: var(--blue-pale); color: var(--ink); }
.cm-band--white     { background: var(--white); color: var(--ink); }
.cm-band--navy      { background: var(--navy); color: var(--on-navy); }
.cm-band--rule      { border-top: 1px solid var(--rule); }
.cm-band--rule-both { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* Two-column split that reflows to one column when the columns cannot hold
   their basis. This is the prototypes' core layout device. */
.cm-split {
  display: flex;
  gap: var(--gap-split);
  flex-wrap: wrap;
}
.cm-split--wide   { gap: var(--gap-split-wide); }
.cm-split--center { align-items: center; }
.cm-split--top    { align-items: flex-start; }
.cm-split--end    { align-items: flex-end; }

/* Stacked layout puts the figure first: on a phone the illustration should sit
   directly under the header, with the copy beneath it. Desktop is untouched. */
@media (max-width: 899px) {
  .cm-split--figfirst .cm-split__fig { order: -1; }
}

/* The mobile sticky bar already carries "Book a confidential intake" on every
   screen, so the in-page repeats of the SAME action are suppressed where it is
   showing (<=768px, matching .sticky-cta). The closing CTA band keeps its
   button: that one is the end of the argument, not a nag. */
@media (max-width: 768px) {
  .cm-hide-when-sticky { display: none; }
}

/* Column basis helpers — the number is the flex-basis in px. */
.cm-col-280 { flex: 1 1 280px; min-width: min(250px, 100%); }
.cm-col-300 { flex: 1 1 300px; min-width: min(260px, 100%); }
.cm-col-320 { flex: 1 1 320px; min-width: min(260px, 100%); }
.cm-col-340 { flex: 1 1 340px; min-width: min(280px, 100%); }
.cm-col-360 { flex: 1 1 360px; min-width: min(280px, 100%); }
.cm-col-380 { flex: 1 1 380px; min-width: min(280px, 100%); }
.cm-col-400 { flex: 1 1 400px; min-width: min(280px, 100%); }
.cm-col-420 { flex: 1 1 420px; min-width: min(280px, 100%); }
.cm-col-440 { flex: 1 1 440px; min-width: min(280px, 100%); }
.cm-col-460 { flex: 1 1 460px; min-width: min(300px, 100%); }
.cm-col-480 { flex: 1 1 480px; min-width: min(300px, 100%); }
.cm-col-500 { flex: 1 1 500px; min-width: min(280px, 100%); }
.cm-col-520 { flex: 1 1 520px; min-width: min(300px, 100%); }

/* ---------------------------------------------------------------------------
   2. TYPE
   ------------------------------------------------------------------------- */
.cm-eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 var(--sp-5);
}
.cm-eyebrow--tight { letter-spacing: var(--ls-eyebrow-tight); margin-bottom: 0; }
.cm-eyebrow--lead  { margin-bottom: var(--sp-7); }

.cm-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1-page);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h1-page);
  letter-spacing: var(--ls-h1);
  color: var(--ink);
  text-wrap: balance;
}
.cm-h1--hero { font-size: var(--fs-h1); line-height: var(--lh-h1); max-width: 20ch; }
.cm-h1--26   { max-width: 26ch; }
.cm-h1--24   { max-width: 24ch; }

.cm-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
}
.cm-h2--scene { font-size: var(--fs-h2-scene); line-height: var(--lh-h2-scene); letter-spacing: 0; }
.cm-h2--stage { font-size: var(--fs-h2-stage); line-height: var(--lh-h2-scene); letter-spacing: 0; }
.cm-h2--group { font-size: var(--fs-h2-group); line-height: var(--lh-h2-scene); letter-spacing: 0; }
.cm-h2--cta   { font-size: var(--fs-h2-cta);   line-height: var(--lh-h2-cta);   letter-spacing: 0; }

.cm-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h3);
}
.cm-h3--sm   { font-size: var(--fs-h3-sm);   max-width: 26ch; }
.cm-h3--card { font-size: var(--fs-h3-card); }
.cm-h3--lg   { font-size: var(--fs-h3-lg); }

.cm-p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-muted);
  max-width: var(--measure);
  text-wrap: pretty;
  margin: 0;
}
.cm-p--lg    { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.cm-p--sm    { font-size: var(--fs-card);    line-height: 1.66; }
.cm-p--note  { font-size: var(--fs-small);   line-height: var(--lh-small); color: var(--ink-soft); }
.cm-p--ink   { color: var(--ink); }
.cm-p--tight { max-width: var(--measure-tight); }
.cm-p--wide  { max-width: var(--measure-wide); }
.cm-p--58    { max-width: 58ch; }
.cm-p--54    { max-width: 54ch; }
.cm-p--52    { max-width: 52ch; }
.cm-p--48    { max-width: 48ch; }
.cm-p--44    { max-width: 44ch; }

/* On navy, body copy switches to the on-navy ink and headings to offwhite. */
.cm-band--navy .cm-p  { color: var(--on-navy); }
.cm-band--navy .cm-h2,
.cm-band--navy .cm-h3 { color: var(--offwhite); }

/* Stacking helpers — vertical rhythm without one-off margins. */
.cm-mt-3  { margin-top: var(--sp-3); }
.cm-mt-4  { margin-top: var(--sp-4); }
.cm-mt-5  { margin-top: var(--sp-5); }
.cm-mt-6  { margin-top: var(--sp-6); }
.cm-mt-7  { margin-top: var(--sp-7); }
.cm-mt-8  { margin-top: var(--sp-8); }
.cm-mt-10 { margin-top: var(--sp-10); }
.cm-mt-12 { margin-top: var(--sp-12); }

/* ---------------------------------------------------------------------------
   3. LINKS + BUTTONS
   ------------------------------------------------------------------------- */
.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-pad);
  font-family: var(--font-text);
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.cm-btn--primary { background: var(--blue); color: var(--offwhite); }
.cm-btn--primary:hover,
.cm-btn--primary:focus-visible { background: var(--blue-hover); color: var(--offwhite); }

/* Outline button on the light ground. */
.cm-btn--outline { background: transparent; color: var(--ink); border-color: var(--rule); }
.cm-btn--outline:hover,
.cm-btn--outline:focus-visible { border-color: var(--ink); color: var(--ink); }
.cm-btn--outline-strong { border-color: var(--rule-strong); }

/* Primary CTA sitting on a navy band inverts to white on hover. */
.cm-btn--on-navy { background: var(--blue); color: var(--offwhite); }
.cm-btn--on-navy:hover,
.cm-btn--on-navy:focus-visible { background: var(--white); color: var(--navy); }

/* Inline link with the brand underline. */
.cm-link {
  display: inline-block;
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
  color: var(--blue);
  border-bottom: 1px solid var(--blue);
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cm-link:hover,
.cm-link:focus-visible { color: var(--accent); border-color: var(--accent); }
.cm-link--inline { display: inline; font-size: inherit; font-weight: inherit; padding-bottom: 1px; }

.cm-actions {
  margin-top: var(--sp-8);
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   4. FIGURES
   Prototype diagrams are raster scenes; inline SVG follows the same rules.
   ------------------------------------------------------------------------- */
.cm-fig { margin: 0; }
.cm-fig img,
.cm-fig svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.cm-fig--hero img { max-width: 560px; }

/* Diagram conventions, applied to inline SVG from the prototypes. */
.cm-dia { --dia-c: currentColor; }
.cm-dia .rights    { stroke: var(--dia-rights); }
.cm-dia .technical { stroke: var(--dia-technical); }
.cm-dia .signal    { stroke-dasharray: var(--dia-dash); }
.cm-dia text       { font-family: var(--font-text); font-size: var(--dia-label); fill: var(--ink-muted); }

/* ---------------------------------------------------------------------------
   5. HOME — applicability checklist (02)
   ------------------------------------------------------------------------- */
.cm-checklist { display: flex; flex-direction: column; }
.cm-checklist__row {
  display: flex;
  gap: var(--sp-5);
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.cm-checklist__row:last-child { border-bottom: 1px solid var(--rule); }
.cm-checklist__ix {
  font-size: 0.8rem;
  font-weight: var(--fw-semibold);
  color: var(--blue);
  padding-top: var(--sp-1);
  font-variant-numeric: var(--tab);
  flex: none;
}
.cm-checklist__q {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   6. HOME — storyline strip (03)
   Five cards; one is tinted at a time. The tint cycles via JS, and degrades to
   "all cards legible, none tinted" with JS off.
   ------------------------------------------------------------------------- */
.cm-strip {
  margin-top: var(--sp-12);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(172px, 100%), 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.cm-strip__card {
  background: var(--offwhite);
  padding: 0 var(--sp-5) 30px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: background var(--t-slow) var(--ease);
  /* Flex column so the figure can be reordered per breakpoint without the
     markup changing: DOM order is bar -> title -> figure -> copy. */
  display: flex;
  flex-direction: column;
}
.cm-strip__bar { order: -2; flex: none; }   /* 2px rule must not be shrunk by the flex column */
/* The card title needs more air beneath it than the copy has between its own
   lines, or the heading reads as part of the paragraph. */
.cm-strip__card .cm-h3 { margin-bottom: var(--sp-4); }
.cm-strip__bar {
  height: 2px;
  margin: 0 calc(var(--sp-5) * -1) var(--sp-6);
  background: var(--rule);
  transition: background var(--t-slow) var(--ease);
}
.cm-strip__card.is-active            { background: var(--white); }
.cm-strip__card.is-active .cm-strip__bar { background: var(--blue); }
/* The highlight follows the pointer (see main.js), so show the cards are
   responsive to it. No-JS still gets a highlight: card 1 is server-rendered
   is-active and this paints whatever is hovered. */
.cm-strip__card:hover                { background: var(--white); }
.cm-strip__card:hover .cm-strip__bar { background: var(--blue); }
/* Multi-column: the illustration leads, as approved. Single column (below):
   title, image, copy -- you are told what you are looking at first. */
@media (min-width: 560px) {
  .cm-strip__fig { order: -1; }
}
.cm-strip__fig { margin: 14px 0 var(--sp-4); }
/* The five source illustrations are not a uniform aspect (1:1, 4:3 and 3:2 are
   all present). Giving the figure one box and fitting each image inside it keeps
   every card's heading and copy on the same baseline across the row. The art is
   transparent, so the letterboxing is invisible. */
.cm-strip__fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.cm-strip__card .cm-p { max-width: 32ch; }

@media (max-width: 560px) {
  /* Below two columns the 172px grid produces a single tall column; keep the
     rules reading as a stack rather than a broken table. */
  .cm-strip { grid-template-columns: 1fr; border-left: none; }
  .cm-strip__card { border-right: none; padding-bottom: var(--sp-8); }
  /* At one column the illustration is full card width, so the 14/16px it gets
     in the multi-column grid is far too tight against the index and the title. */
  .cm-strip__fig { margin: var(--sp-7) 0 var(--sp-6); }
}

/* ---------------------------------------------------------------------------
   7. HOME — what Clara does (04): three navy pillars
   ------------------------------------------------------------------------- */
.cm-pillars {
  margin-top: var(--sp-13);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--gap-stack);
}
.cm-pillar { border-top: 2px solid var(--blue); padding-top: 22px; }
.cm-pillar .cm-h3 { margin-bottom: var(--sp-3); color: var(--offwhite); }
.cm-pillar .cm-p  { color: var(--on-navy); font-size: var(--fs-body-sm); line-height: 1.7; }

/* ---------------------------------------------------------------------------
   8. HOME — report extract panel (05)
   ------------------------------------------------------------------------- */
.cm-report {
  border: 1px solid var(--rule);
  background: var(--white);
  padding: var(--sp-7) var(--sp-6);
}
.cm-report__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 14px;
}
.cm-report__title { font-family: var(--font-display); font-size: 1rem; }
.cm-report__tag {
  font-size: 0.7rem;
  letter-spacing: var(--ls-eyebrow-tight);
  color: var(--blue);
  text-transform: uppercase;
}
.cm-report__rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--sp-4);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}
.cm-report__rows > span {
  padding: 13px 0;
  border-bottom: 1px solid var(--blue-pale);
}
.cm-report__rows > span:nth-last-child(-n+2) { border-bottom: none; }
.cm-report__val    { color: var(--ink); text-align: right; }
.cm-report__val--k { color: var(--blue); }
.cm-report__val--soft { color: var(--ink-muted); }

/* ---------------------------------------------------------------------------
   9. HOME — sectors grid (09)
   1px gaps over a rule-coloured background produce hairline dividers.
   ------------------------------------------------------------------------- */
.cm-sectors {
  margin-top: var(--sp-11);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.cm-sector {
  background: var(--offwhite);
  padding: 30px var(--sp-6) 34px;
  transition: background var(--t-fast) var(--ease);
}
.cm-sector:hover,
.cm-sector:focus-within { background: var(--white); }
.cm-sector .cm-h3 { margin-bottom: var(--sp-3); }
.cm-sector__note { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 var(--sp-3); }
.cm-sector--tight .cm-h3 { margin-bottom: var(--sp-2); }

/* ---------------------------------------------------------------------------
   10. CLOSING CTA (all four pages)
   ------------------------------------------------------------------------- */
.cm-cta { background: var(--navy); color: var(--on-navy); }
.cm-cta .cm-wrap {
  padding-top: var(--cta-y);
  padding-bottom: var(--cta-y);
  display: flex;
  gap: var(--gap-split-wide);
  flex-wrap: wrap;
  align-items: flex-start;
}
.cm-cta .cm-h2 { color: var(--offwhite); max-width: 20ch; }
.cm-cta .cm-p  { color: var(--on-navy); }

/* ---------------------------------------------------------------------------
   11. WHY LICENSING — narrative scenes
   ---------------------------------------------------------------------------
   DOM order is always heading -> figure -> text, which is the order a narrow
   screen must read in: you are told what the scene is, shown it, then given the
   explanation. The desktop left/right alternation is done here with
   grid-template-areas, so no scene needs its markup reordered to sit on the
   other side -- swapping sides can never again cost the mobile reading order.

   Column ratio comes in per scene as --fig-col (the figure column's fr value
   against the text column's 1fr), matching the widths the prototype's
   flex-basis pairs actually resolved to.
   ------------------------------------------------------------------------- */
.cm-scene .cm-h2 { margin-bottom: 0; }
.cm-scene .cm-eyebrow { margin-bottom: var(--sp-4); }

.cm-scene__grid {
  display: grid;
  /* Mobile stack: heading / figure / copy. The figure gets real space on both
     sides -- see --gap-stack-figure. Desktop resets this to a tight row gap
     below, because there the figure sits beside the text, not between it. */
  gap: var(--gap-stack-figure);
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "fig"
    "text";
}
.cm-scene__head { grid-area: head; min-width: 0; }
.cm-scene__fig  { grid-area: fig;  min-width: 0; }
.cm-scene__text { grid-area: text; min-width: 0; }

@media (min-width: 900px) {
  .cm-scene__grid {
    grid-template-columns: var(--fig-col, 1.1fr) 1fr;
    column-gap: var(--gap-split);
    row-gap: var(--sp-6);
    grid-template-areas:
      "fig head"
      "fig text";
  }
  /* The only difference between the two sides is which column the figure
     occupies. Markup is identical. */
  .cm-scene--flip .cm-scene__grid {
    grid-template-columns: 1fr var(--fig-col, 1.1fr);
    grid-template-areas:
      "head fig"
      "text fig";
  }
  /* The figure spans both rows, so the two text rows share its extra height.
     Bottom-aligning the heading and top-aligning the copy keeps them together
     as one block, optically centred against the image. */
  .cm-scene__head { align-self: end; }
  .cm-scene__text { align-self: start; }
  .cm-scene__fig  { align-self: center; }
}

/* A scene with no illustration: one full-width column, no empty figure track.
   The larger stack gap exists to give a figure air; with no figure between the
   heading and its copy, they go back to the normal heading rhythm. */
.cm-scene--noimg .cm-scene__grid,
.cm-scene--flip.cm-scene--noimg .cm-scene__grid {
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "text";
}
@media (min-width: 900px) {
  .cm-scene--noimg .cm-scene__head,
  .cm-scene--noimg .cm-scene__text { align-self: auto; }
  /* Prose alone gets the reading measure back rather than running the full
     container width. */
  .cm-scene--noimg .cm-scene__text .cm-p { max-width: var(--measure); }
}

/* ---------------------------------------------------------------------------
   11b. WHY LICENSING — quiet interlude
   ---------------------------------------------------------------------------
   A pause between two scenes. Everything that makes a scene a scene is absent:
   no figure, no eyebrow, no two-column grid, no side alternation. What marks it
   instead is the ground (--white, against the offwhite/pale the scenes alternate
   between) and a narrow centred measure. Nothing here is decorative; it is the
   same tokens used more sparingly.
   ------------------------------------------------------------------------- */
.cm-interlude__inner {
  max-width: 60ch;
  margin-inline: auto;
}
.cm-interlude .cm-h2 { margin-bottom: var(--sp-6); }
/* The container already sets the measure, so the paragraphs fill it rather than
   carrying a second, narrower cap of their own. */
.cm-interlude .cm-p { max-width: none; }
.cm-interlude .cm-p + .cm-p { margin-top: var(--sp-6); }

/* The diagram is deliberately wider than the reading measure and centred under
   it. Prose wants 60ch; a five-branch flow diagram at 60ch is illegible. Keeping
   the text narrow and letting the figure breathe is what stops this reading as a
   scene -- a scene puts the two side by side, this stacks them. */
.cm-interlude__fig {
  max-width: 880px;
  margin: var(--sp-12) auto 0;
}

/* ---------------------------------------------------------------------------
   12. WHY LICENSING — closing statement
   ------------------------------------------------------------------------- */
.cm-close {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2.05rem);
  line-height: 1.32;
  color: var(--ink);
  max-width: 40ch;
  text-wrap: pretty;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   13. HOW CLARA WORKS — stage meta line
   ------------------------------------------------------------------------- */
.cm-stage__meta {
  margin-top: 14px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.cm-band--navy .cm-stage__meta { color: var(--blue-pale); }

/* Sticky column beside the intake form (desktop only — a sticky element in a
   single-column mobile flow just eats the viewport). */
.cm-sticky { position: static; }
@media (min-width: 900px) {
  .cm-sticky { position: sticky; top: var(--sticky-offset); }
}

/* ---------------------------------------------------------------------------
   14. LEGAL BASIS — reference groups
   ------------------------------------------------------------------------- */
.cm-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.cm-group__head .cm-eyebrow { margin-bottom: 0; }
.cm-group__rule { margin-top: var(--sp-3); height: 2px; background: var(--blue); }

/* A reference row: source on the left, description spanning the rest.
   Explicit columns (not auto-fit) so the description can never spill into an
   implicit second column when the row collapses on mobile. */
.cm-ref {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2) var(--sp-10);
  padding: var(--sp-7) 0;
  border-bottom: 1px solid var(--rule);
}
.cm-ref--strong { border-bottom-color: var(--rule-strong); }
.cm-ref--last   { border-bottom: none; }
.cm-ref--top    { border-bottom: none; border-top: 1px solid var(--rule); padding: var(--sp-7) 0 0; }
@media (min-width: 720px) {
  .cm-ref { grid-template-columns: minmax(min(230px, 100%), 1fr) 2fr; }
}
.cm-ref__src {
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.cm-ref__meta {
  margin-top: 6px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.cm-ref__meta--dark { color: var(--ink-muted); }
.cm-ref__flag {
  margin-top: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--blue);
}
.cm-ref__body { min-width: 0; }
.cm-ref__body .cm-p { max-width: none; }
/* Inside the pale jurisprudence band the description runs in full ink. */
.cm-band--pale .cm-ref__body .cm-p { color: var(--ink); }

.cm-callout {
  margin-top: var(--sp-12);
  border: 1px solid var(--rule-strong);
  background: var(--white);
  padding: clamp(24px, 3vw, 32px);
}
.cm-callout .cm-p { color: var(--ink); max-width: var(--measure-wide); }

/* ---------------------------------------------------------------------------
   15. INTAKE FORM — prototype dressing for the WordPress form
   The shortcode's markup (fields, honeypot, nonce, radio pills) is unchanged;
   this only restyles it and lays it out on the two-up grid.
   ------------------------------------------------------------------------- */
.cm-form .intake-form {
  border: 1px solid var(--rule);
  background: var(--white);
  padding: var(--panel-pad);
}
.cm-form .cm-fieldgrid {
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: var(--sp-5);
}
.cm-form .cm-fieldgrid .field { margin-bottom: 0; }
.cm-form .field-block { margin-top: var(--sp-8); }
.cm-form .radio-group { margin-top: 14px; gap: 10px; }
.cm-form .submit-row { margin-top: var(--sp-8); }
.cm-form .submit-row .btn { padding: var(--btn-pad-lg); }
.cm-form .intake-error {
  background: var(--error-bg);
  border-left: 2px solid var(--error-rule);
  padding: 12px 16px;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-small);
  color: var(--error-ink);
}

/* ---------------------------------------------------------------------------
   16. SKIP LINK / A11Y
   ------------------------------------------------------------------------- */
.cm-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   17. CHROME ADDENDA
   Small pieces the templates need that do not belong to a page component.
   ------------------------------------------------------------------------- */
/* Size and colour come from the footer's two-tier scale in clara.css; only the
   spacing is local. The hours inherit BOTH size and colour, because they sit on
   the same line as the phone number - a shift mid-line is the most visible kind
   of inconsistency there is. */
footer.site .contact-list .addr { margin-top: var(--sp-2); line-height: 1.6; }

.mobile-menu .mm-lockup { display: flex; align-items: center; gap: var(--sp-3); }
.mobile-menu .mm-icon { width: 36px; height: 30px; display: inline-block; }
.mobile-menu .mm-icon svg { width: 100%; height: 100%; display: block; }
.mobile-menu .mm-word {
  font-family: var(--font-text);
  font-size: 1.08rem;
  color: #fff;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.42em;
}
.mobile-menu .mm-close {
  background: none; border: none; color: #fff;
  font-size: 32px; line-height: 1; cursor: pointer; padding: 4px 8px;
}

/* A row of inline links (not buttons) -- e.g. home section 05, where the sample
   report CTA joins the assessment link only when it has somewhere to point. */
.cm-actions--links { margin-top: var(--sp-6); gap: var(--sp-6); }

/* ---------------------------------------------------------------------------
   18. HERO WATERMARK  (experimental — front page only)
   ---------------------------------------------------------------------------
   A full-bleed line-art vessel behind the hero band. Decorative only: it is a
   background on a pseudo-element, carries no alt text, and is inert to
   pointer and screen reader alike.

   The asset is pre-flattened onto the band colour with 30% of the fade already
   baked in (the alpha channel was the entire file size — 287 KB with it, 44 KB
   without). --wm-opacity tunes the rest, so the effective strength is
   0.30 x --wm-opacity. Raise --wm-opacity toward 1 to make it bolder.

   No PNG fallback by design: a browser that cannot decode WebP simply gets no
   watermark, which costs nothing but a texture.
   ------------------------------------------------------------------------- */
.cm-band--watermark {
  position: relative;
  overflow: hidden;

  /* The artwork. Overridable, so more than one band can use this machinery. */
  --wm-image: url("../img/design/opt/wireframe-1280.webp");

  /* Overall strength. The asset already carries 30% of the fade, so the
     effective peak is 0.30 x this value. */
  --wm-opacity: 0.15;

  /* WHERE it fades. A soft ellipse centred on the text column masks the
     wireframe almost completely behind the headline and body copy, and lets it
     strengthen outward - so what survives is the far right and the lower and
     outer edges. Transparent = hidden, opaque = shown. */
  --wm-mask: radial-gradient(ellipse 62% 78% at 26% 44%,
               rgba(0,0,0,0)    0%,
               rgba(0,0,0,0.06) 38%,
               rgba(0,0,0,0.32) 62%,
               rgba(0,0,0,0.72) 84%,
               rgba(0,0,0,1)   100%);
}
.cm-band--watermark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--wm-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;      /* screen wide; band height crops it */
  opacity: var(--wm-opacity);

  -webkit-mask-image: var(--wm-mask);
          mask-image: var(--wm-mask);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

/* Stacked layout: the copy is no longer in a left column, it runs full width at
   the top with the CLARA vessel beneath it. So the fade becomes vertical -
   clear behind the headline, strengthening toward the lower edge. */
@media (max-width: 899px) {
  .cm-band--watermark {
    --wm-opacity: 0.13;
    --wm-mask: linear-gradient(to bottom,
                 rgba(0,0,0,0)    0%,
                 rgba(0,0,0,0.05) 38%,
                 rgba(0,0,0,0.40) 72%,
                 rgba(0,0,0,0.90) 100%);
  }
}
/* Content sits above the watermark. */
.cm-band--watermark > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* nothing animated here — declared only so the block reads consistently */
}

/* Print: decoration off. */
@media print {
  .cm-band--watermark::before { display: none; }
}

/* ---------------------------------------------------------------------------
   18b. WHY LICENSING — "Where the money goes" ground
   ---------------------------------------------------------------------------
   A wide line-art scene of the people the copy names -- musicians, film crews,
   studios, publishers, broadcasters -- laid under the section as a very light
   ground. It replaces the money-flow diagram that briefly sat here: that one
   carried its own headline and closing lines, so it restated the prose beside
   it, and it had to be cropped to hide them. This one has no text to duplicate
   and is drawn edge to edge, so it can simply fill the band.

   Opacity is set from the artwork's own density, not by eye. Its ink averages
   81% luminance -- it is a pale drawing before CSS touches it -- so the usual
   watermark strength would render it invisible. At 0.40 the ink lands around
   92% on white and the few dark accents around 72%: present, but a ground.

   The asset is flattened onto white rather than carrying transparency. WebP
   will not compress this drawing's alpha channel at any quality (550 KB at
   q40 and q82 alike); flattened it is 100 KB. That is safe only because this
   band is white -- on a tinted band the ::before would paint a white rectangle.
   ------------------------------------------------------------------------- */
.cm-interlude.cm-band--watermark {
  --wm-image: url("../img/design/opt/ground-people-1280.webp");
  --wm-opacity: 0.40;

  /* Cleared through the middle so the 60ch column reads off near-white, but to
     0.10 rather than 0 -- the field stays continuous instead of showing a hole
     punched behind the text. */
  --wm-mask: radial-gradient(ellipse 54% 66% at 50% 46%,
               rgba(0,0,0,0.10)  0%,
               rgba(0,0,0,0.18) 42%,
               rgba(0,0,0,0.55) 68%,
               rgba(0,0,0,0.88) 88%,
               rgba(0,0,0,1)   100%);
}
.cm-interlude.cm-band--watermark::before { background-size: cover; }

@media (max-width: 899px) {
  /* Stacked: the column fills the width, so there is no clear margin to hide in
     and every part of the ground sits behind text. Lighter throughout, with the
     middle -- where the paragraphs are -- held down hardest. */
  .cm-interlude.cm-band--watermark {
    --wm-opacity: 0.26;
    --wm-mask: linear-gradient(to bottom,
                 rgba(0,0,0,0.30) 0%,
                 rgba(0,0,0,0.10) 30%,
                 rgba(0,0,0,0.10) 70%,
                 rgba(0,0,0,0.45) 100%);
  }
}

/* ---------------------------------------------------------------------------
   19. LICENSING OBLIGATIONS REPORT — native extract card
   ---------------------------------------------------------------------------
   Replaces the raster report figure on how-clara-works Stage 2. Shares the
   header language of .cm-report (the homepage extract panel) so the two read as
   the same object at two levels of detail.

   Every colour, size and space here comes from tokens.css. The source artwork
   used green ticks; there is no green in the palette, so affirmative marks are
   --blue and pending ones are the dashed --rule-strong treatment.

   No transitions or animation anywhere in this component, so there is nothing
   for prefers-reduced-motion to switch off.
   ------------------------------------------------------------------------- */
.cm-repcard {
  border: 1px solid var(--rule);
  background: var(--white);
  padding: var(--sp-7) var(--sp-6);
}
.cm-repcard__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 14px;
  margin-bottom: var(--sp-2);
}
.cm-repcard__title { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.cm-repcard__tag {
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow-tight);
  color: var(--blue);
  text-transform: uppercase;
  flex: none;
}

.cm-repcard__table { width: 100%; border-collapse: collapse; }
.cm-repcard__table tr { border-bottom: 1px solid var(--blue-pale); }
.cm-repcard__table tr:last-child { border-bottom: none; }
.cm-repcard__table th {
  text-align: left;
  font-family: var(--font-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
  padding: 14px var(--sp-4) 14px 0;
  vertical-align: middle;
}
.cm-repcard__mark  { padding: 14px 0; vertical-align: middle; width: 46%; }
.cm-repcard__state {
  padding: 14px 0 14px var(--sp-4);
  text-align: right;
  white-space: nowrap;
  font-size: var(--fs-small);
  color: var(--blue);
  vertical-align: middle;
}

/* --- schematic marks ----------------------------------------------------- */
.cm-repcard__mark .cm-rc__marks {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--blue);
}
.cm-rc__marks--ink { color: var(--navy); }

.cm-rc__glyph { width: 26px; height: 15px; display: block; flex: none; }
.cm-rc__glyph--muted { color: var(--blue-mid); }

/* channel chips: carried vs not */
.cm-rc__chip {
  width: 22px; height: 11px;
  background: var(--blue);
  border: 1px solid var(--blue);
  flex: none;
}
.cm-rc__chip--off { background: transparent; border-color: var(--blue-mid); }

/* territory tiles: framework known, contents pending */
.cm-rc__tile {
  width: 30px; height: 22px;
  border: 1px dashed var(--rule-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-mid);
  flex: none;
}
.cm-rc__tile svg { width: 13px; height: 13px; display: block; }

/* layered rights categories */
.cm-rc__bars { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 190px; }
.cm-rc__bar { height: 6px; background: var(--blue); display: block; }

/* coverage ticks. The check is stroked from CSS, not from a presentation
   attribute: var() is not supported in SVG attributes and the mark would
   silently vanish (stroke defaults to none). */
.cm-rc__tick { width: 18px; height: 18px; flex: none; color: var(--blue); }
.cm-rc__tick svg { width: 100%; height: 100%; display: block; }
.cm-rc__tick-mark { stroke: var(--white); }

/* outstanding gaps */
.cm-rc__slot {
  width: 34px; height: 20px;
  border: 1px dashed var(--rule-strong);
  flex: none;
}

/* indicative cost range */
.cm-rc__range { display: flex; align-items: center; gap: 0; width: 100%; max-width: 190px; color: var(--blue); }
.cm-rc__range-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.cm-rc__range-track { height: 4px; background: var(--blue-mid); flex: 1 1 auto; }

/* status pill */
.cm-rc__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: var(--blue);
  color: var(--offwhite);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow-tight);
  text-transform: uppercase;
}
.cm-rc__pill svg { width: 15px; height: 15px; display: block; flex: none; }

/* --- narrow screens: stack each row ------------------------------------- */
@media (max-width: 479px) {
  .cm-repcard { padding: var(--sp-6) var(--sp-5); }
  /* :not() keeps the visually-hidden state cells out of this -- otherwise
     `width: auto` would beat .cm-visually-hidden's `width: 1px` on specificity
     and start reflowing text that is meant for screen readers only. */
  .cm-repcard__table,
  .cm-repcard__table tbody,
  .cm-repcard__table tr,
  .cm-repcard__table th,
  .cm-repcard__table td:not(.cm-visually-hidden) { display: block; width: auto; }
  .cm-repcard__table tr { padding: 14px 0; }
  .cm-repcard__table th { padding: 0 0 10px; color: var(--ink); }
  .cm-repcard__mark { padding: 0; width: auto; }
  .cm-repcard__state {
    padding: 8px 0 0;
    text-align: left;
    white-space: normal;
  }
  .cm-rc__bars, .cm-rc__range { max-width: 100%; }
}