/* =========================================================================
   CloudLift — components and layout
   Consumes tokens only. No literal colour, size, or spacing value below this
   line (S9). Ported from the StratusWorks build, which is the same design
   system under a different practice hue, so fixes travel in both directions.

   ---------------------------------------------------------------------------
   COMPONENT MODEL — native custom elements, declarative shadow DOM, zero JS
   ---------------------------------------------------------------------------
   The handover specifies a component library as custom elements (<sw-button>,
   <sw-card-capability>, ...) and budgets 30 kB of JavaScript for it. This build
   ships the element names and spends 0 kB, because declarative shadow DOM is
   parsed by the browser: a <template shadowrootmode="open"> needs no
   customElements.define() to render, so S1 (no executable script) holds intact
   and the CSP keeps default-src 'none'.

   Two rules decide whether a thing is a <cl-*> element or a native element with
   a data-cl-* hook. Both exist to protect semantics, which is what search and
   answer engines actually read:

   1. NATIVE ELEMENT whenever the thing carries a landmark, a role, or an
      interaction. <header data-cl-header> keeps the banner landmark;
      <footer data-cl-footer> keeps contentinfo; a button stays an <a> or
      <button> with data-cl-button. A <cl-button> would have no role, no
      keyboard behaviour and no accessible name, so the handover's own name for
      it survives only as a comment. Same for data-cl-field: labels and inputs
      are native or they are broken.

   2. <cl-*> ELEMENT for pure composition blocks — the ones that group and frame
      content without claiming to be anything. Those get a shadow root ONLY
      where it removes presentational markup from the light DOM (a bar's fill
      <span>, a panel's frame <div>s). Where a pseudo-element already does that
      job the element has no shadow root, because one would be ceremony rather
      than encapsulation. cl-workflow is the worked example: its connectors stay
      ::after pseudo-elements, already invisible to the light DOM and to AT.

   Consequences that are load-bearing, so do not "tidy" them away:

   - ALL text content stays in the LIGHT DOM and is projected through <slot>.
     Nothing a crawler needs to read sits inside a template. Slotted nodes are
     still document children, so the selectors below reach them normally.
   - No shadow root carries a <style> block or a <link>. Inline styles are
     forbidden by the skill's never-list AND blocked by style-src 'self'. Shadow
     internals expose part="..." and are styled from here through ::part().
   - Custom properties inherit ACROSS the shadow boundary, so tokens work inside
     a shadow root with no plumbing. That is what makes the model cheap.
   - Shadow content IS in the accessibility tree. A shadow root hides nothing
     from a screen reader, so decorative parts carry no text rather than relying
     on the boundary to silence them.
   - Every <cl-*> element needs an explicit display: custom elements are inline
     by default. If declarative shadow DOM is ever unsupported the template
     stays inert and the light-DOM children render directly in the host —
     degraded layout, complete content. That is the intended failure mode.

   RESERVED COMPONENTS — do not prune.
   The handover specifies a full library; the pages built so far place only
   part of it. These blocks are marked "reserved" and are waiting for their
   templates (service detail, article, insights index, about), not dead:

     [data-cl-spine]          hero diagram, four nodes
     [data-cl-layers]         the strata stack
     [data-cl-metrics]        before/after metric pairs
     [data-cl-spec-table]     engagement specification
     [data-cl-pullquote]      pull quote
     [data-cl-prose]          article body with margin notes
     [data-cl-note]           margin note
     [data-cl-card="insight"] article teaser
     [data-cl-print-foot]     running foot, for the article print sheet

   They cost roughly 5 kB gzipped. A CSS coverage run will report them unused
   until the pages that place them exist — that is expected, and deleting them
   means re-deriving the design system from the handover a second time.
   ========================================================================= */

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

/* Custom elements are inline by default and every one of these is a block-level
   composition wrapper. Declared once, up front, so a new element cannot ship
   half-laid-out because its own display rule was forgotten. */
cl-record,
cl-services,
cl-card-service,
cl-gap-figure,
cl-bar,
cl-split,
cl-ecosystem {
  display: block;
}

/* -------------------------------------------------------------------------
   1. Base
   ------------------------------------------------------------------------- */

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
}

h1 {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
}

h3,
h4 {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}

p {
  margin: 0;
  max-width: var(--measure);
}

ul, ol, dl, dd {
  margin: 0;
}

::selection {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* focus — one treatment, everywhere. Never removed, never a shadow, and never
   accent-coloured: the accent is already the resting state of links. */
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: var(--focus-offset);
}

/* -------------------------------------------------------------------------
   2. Links in prose — underlines stay on, no visited styling
   ------------------------------------------------------------------------- */

a {
  color: var(--accent);
  text-decoration: none;
}

[data-cl-prose] a,
[data-cl-legal] a,
[data-cl-legal] li a,
p a,
dd a {
  border-block-end: 1px solid var(--accent-tint-line);
  transition: border-color var(--duration-state) linear;
}

[data-cl-prose] a:hover,
[data-cl-legal] a:hover,
[data-cl-legal] li a:hover,
p a:hover,
dd a:hover {
  border-block-end-color: var(--accent);
}

/* The handover says "no visited styling", on the grounds that it introduces a
   colour that is in no palette. The review asks for a clear visited state.
   Both hold if the state uses no new colour: the text keeps the accent and the
   underline drops to the neutral rule tone. :visited only permits colour
   properties, and border-colour is one of them. */
[data-cl-prose] a:visited,
[data-cl-legal] a:visited,
[data-cl-legal] li a:visited,
p a:visited,
dd a:visited {
  border-block-end-color: var(--line-strong);
}

/* -------------------------------------------------------------------------
   3. Icons — 24px grid, stroke compensated so optical weight stays constant
   ------------------------------------------------------------------------- */

[data-cl-icon] {
  flex: none;
  vertical-align: -0.125em;
}

/* -------------------------------------------------------------------------
   4. Layout — container, sections, grounds, grid
   ------------------------------------------------------------------------- */

.container {
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-margin);
}

/* Sections are separated by their own padding plus a full-bleed hairline —
   never by margins, so collapsing margins cannot occur. The hairline spans
   the viewport while content stays inside the container. */
[data-cl-section] {
  padding-block: var(--section-padding);
  border-block-end: 1px solid var(--line);
  background: var(--surface);
}

/* the opening section of any page keeps the original, more generous rhythm —
   the review asked for a tighter page but a hero that still breathes */
main > [data-cl-section]:first-child {
  padding-block: var(--hero-padding);
}

/* Anchor targets have to clear the sticky header, or a /#services jump lands the
   section's marker and first heading line underneath the bar. This matters more
   than it looks: every nav item is a root-relative fragment, so this is the normal
   way into a section rather than an edge case.

   Derived from the header's own tokens, not guessed. The bar is
   space-8 + space-2 (72px) at >=1024 and space-8 - space-2 (56px) below, and it
   settles to the smaller value on scroll — so space-8 + space-4 clears the tallest
   state with room to spare and needs no breakpoint of its own. */
[data-cl-section][id],
main[id],
[data-cl-legal] h2[id] {
  scroll-margin-block-start: calc(var(--space-8) + var(--space-4));
}

/* honour a reduced-motion preference for the jump itself, not just for animation */
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

[data-ground="sunken"] {
  background: var(--surface-sunken);
}

/* The graphite band remaps the neutral ramp and the accent to their
   inverse-ground partners, so every component inside renders in its dark
   form from identical markup. */
[data-ground="graphite"] {
  --surface: var(--inverse-surface);
  --surface-raised: var(--inverse-raised);
  --surface-sunken: var(--inverse-surface);
  --line: var(--inverse-line);
  --line-strong: var(--inverse-line);
  --text: var(--inverse-text);
  --text-secondary: var(--inverse-secondary);
  --text-muted: var(--inverse-muted);
  --accent: var(--inverse-accent);
  --accent-hover: var(--inverse-accent-hover);
  --accent-contrast: var(--inverse-accent-contrast);
  --focus-ring: 2px solid var(--inverse-text);

  background: var(--surface);
  color: var(--text-secondary);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

/* the 12-column grid halves rather than reflowing arbitrarily */
@media (max-width: 1023px) {
  .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------------
   5. Section head + marker
   ------------------------------------------------------------------------- */

/* mono marker, uppercase, aria-hidden in the markup: wayfinding for the eye,
   noise for a screen reader */
[data-cl-marker] {
  display: block;
  margin-block-end: var(--space-4);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

[data-cl-section-head] {
  margin-block-end: var(--head-gap);
}

[data-cl-section-head] > p {
  margin-block-start: var(--space-5);
  font-size: var(--text-lead);
  line-height: 1.55;
}

/* split head: heading at 1–7, margin note at 9–12.
   The note starts level with the h2's first line, not with the section marker
   above it. This was `align-items: end`, which bottom-aligned the two columns:
   fine while the heading and the note happened to be a similar height, but a
   one-line heading beside a five-line note pushed the note's first line 39px
   ABOVE the marker. Aligning from the top and offsetting by exactly the
   marker's own block size is height-independent, so it holds for any
   combination of heading and note length. */
[data-cl-section-head="split"] {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

[data-cl-section-head="split"] > :first-child {
  grid-column: 1 / span 7;
}

[data-cl-section-head="split"] > p {
  grid-column: 9 / -1;
  /* the marker's line box plus the margin below it: drops the note to the
     heading's first line without depending on how tall either one is */
  margin-block-start: calc(var(--text-marker) * 1.4 + var(--space-4));
  font-size: var(--text-small);
  line-height: 1.55;
}

@media (max-width: 1023px) {
  [data-cl-section-head="split"] {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  [data-cl-section-head="split"] > :first-child,
  [data-cl-section-head="split"] > p {
    grid-column: 1 / -1;
  }

  /* stacked, the note follows the heading, so the marker offset would just be
     dead space on top of the row gap */
  [data-cl-section-head="split"] > p {
    margin-block-start: 0;
  }
}

/* -------------------------------------------------------------------------
   6. Skip link — first in DOM, visible on focus
   ------------------------------------------------------------------------- */

[data-cl-skip] {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 3;
  padding: var(--space-3) var(--space-4);
  background: var(--text);
  color: var(--surface);
  font-weight: 600;
  translate: 0 -200%;
}

[data-cl-skip]:focus {
  translate: 0 0;
}

/* -------------------------------------------------------------------------
   7. <sw-header> — 72px, sticky, hairline bottom
   ------------------------------------------------------------------------- */

[data-cl-header] {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}

[data-cl-header] > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  /* was --space-9, which made the sticky bar TALLER on a phone than on a
     desktop and ate the top of every small screen */
  min-block-size: calc(var(--space-8) - var(--space-2));
}

@media (min-width: 1024px) {
  [data-cl-header] > .container {
    min-block-size: calc(var(--space-8) + var(--space-2));
  }
}

/* The bar is sticky and present from the first paint — it is never revealed on
   scroll. What scroll changes is its height and its hairline.

   Gated twice: @supports because scroll-driven animation is Chrome/Edge only,
   and prefers-reduced-motion because it is motion. Where either fails the
   header simply stays at its full height, which is correct on its own.

   Documented exception to the motion budget's "transform and opacity only":
   this animates min-block-size, which costs layout on the scroll path. It is
   8px, once, and bounded — but it is the one place the page does scroll-path
   work, so it is the first thing to delete if the budget ever tightens. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-cl-header] > .container {
      animation: cl-header-settle linear both;
      animation-timeline: scroll();
      animation-range: 0 calc(var(--space-10) * 2);
    }

    [data-cl-header] {
      animation: cl-header-rule linear both;
      animation-timeline: scroll();
      animation-range: 0 var(--space-8);
    }
  }
}

@keyframes cl-header-settle {
  to {
    min-block-size: calc(var(--space-8) - var(--space-2));
  }
}

/* the handover asks for the hairline to appear only once the page has scrolled */
@keyframes cl-header-rule {
  from {
    border-block-end-color: transparent;
  }
}

/* only meaningful while the header is sticky and content is behind it */
@supports (backdrop-filter: blur(1px)) {
  [data-cl-header] {
    background: transparent;
    backdrop-filter: blur(12px) saturate(140%);
  }

  [data-cl-header]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--surface);
    opacity: 0.86;
  }

  [data-cl-header] > .container {
    position: relative;
  }
}

/* the bar CTA is the same action as the hero's, so it must not be the same
   weight — outlined in accent, one step smaller */
[data-cl-nav] a[data-cl-button="primary"] {
  min-block-size: var(--target-min);
  padding-inline: var(--space-4);
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}

[data-cl-nav] a[data-cl-button="primary"]:hover {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* logo lockup — mark + wordmark, links home */
[data-cl-brand] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--target-min);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: var(--tracking-h3);
  text-transform: uppercase;
}

/* one colour at two weights. The white/grey split read as two entities. */
[data-cl-brand] i {
  font-style: normal;
  font-weight: 600;
}

[data-cl-nav] ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-cl-nav-desktop] {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* :not([data-cl-button]) matters — these selectors outrank [data-cl-button],
   so without it the CTA in the bar would inherit body text on an accent ground */
[data-cl-nav] a:not([data-cl-button]) {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  border-block-end: 2px solid transparent;
  color: var(--text-secondary);
  font-size: var(--text-small);
  transition: color var(--duration-state) linear,
    border-color var(--duration-state) linear;
}

[data-cl-nav] a:not([data-cl-button]):hover {
  color: var(--text);
  border-block-end-color: var(--line);
}

/* the active item is marked by a 2px accent rule, not a colour change */
[data-cl-nav] a:not([data-cl-button])[aria-current="page"] {
  color: var(--text);
  border-block-end-color: var(--accent);
}

/* mobile disclosure — a native <details>: works with JavaScript disabled and
   needs no aria-expanded bookkeeping. A full list, not an overlay: no dimming,
   no transform, no scroll lock. */
[data-cl-nav-mobile] > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--target-min);
  block-size: var(--target-min);
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

[data-cl-nav-mobile] > summary::-webkit-details-marker {
  display: none;
}

[data-cl-nav-mobile] > summary [data-cl-icon-close],
[data-cl-nav-mobile][open] > summary [data-cl-icon-menu] {
  display: none;
}

[data-cl-nav-mobile][open] > summary [data-cl-icon-close] {
  display: block;
}

/* the panel's visibility is driven explicitly rather than left to the UA's
   closed-<details> hiding, which is display:none in some engines and
   content-visibility on ::details-content in others */
[data-cl-nav-mobile] > ul {
  display: none;
  position: absolute;
  inset-inline: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: var(--space-2) var(--container-margin) var(--space-5);
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}

[data-cl-nav-mobile][open] > ul {
  display: flex;
}

[data-cl-nav-mobile] > ul li + li {
  border-block-start: 1px solid var(--line);
}

[data-cl-nav-mobile] > ul a {
  inline-size: 100%;
  min-block-size: calc(var(--target-min) + var(--space-1));
  font-size: var(--text-body);
}

@media (min-width: 1024px) {
  [data-cl-nav-mobile] {
    display: none;
  }
}

@media (max-width: 1023px) {
  [data-cl-nav-desktop] {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   8. <sw-button> — three variants, square, 48px
   ------------------------------------------------------------------------- */

[data-cl-button] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--space-7);
  padding-inline: var(--space-5);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  /* nothing lifts, scales or glows */
  transition: background var(--duration-state) linear,
    border-color var(--duration-state) linear;
}

[data-cl-button="primary"] {
  background: var(--accent);
  color: var(--accent-contrast);
}

[data-cl-button="primary"]:hover {
  background: var(--accent-hover);
}

/* a hairline box, never a filled grey */
[data-cl-button="secondary"] {
  background: transparent;
  border: 1px solid var(--text);
  color: var(--text);
}

[data-cl-button="secondary"]:hover {
  border-color: var(--accent);
  color: var(--accent);
}

[data-cl-button="tertiary"] {
  min-block-size: var(--target-min);
  padding-inline: 0;
  background: transparent;
  color: var(--accent);
  border-block-end: 1px solid var(--accent-tint-line);
}

[data-cl-button="tertiary"]:hover {
  border-block-end-color: var(--accent);
}

[data-cl-button][disabled] {
  background: var(--line);
  border-color: var(--line);
  color: var(--text-muted);
  cursor: not-allowed;
}

[data-cl-actions] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (max-width: 767px) {
  [data-cl-actions] {
    flex-direction: column;
    align-items: stretch;
  }
}

/* -------------------------------------------------------------------------
   9. <sw-hero> — head 1–7, evidence panel 9–12 with a left hairline
   ------------------------------------------------------------------------- */

[data-cl-hero] {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

[data-cl-hero-head] {
  grid-column: 1 / span 7;
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

/* 15ch forced a break inside "Architecture-led". The cap now clears the
   compound; the word joiner in the markup keeps the hyphen unbreakable at
   every width, so the wrap can never land mid-word again. */
[data-cl-hero-head] h1 {
  max-inline-size: 19ch;
}

[data-cl-hero-head] > p {
  font-size: var(--text-lead);
  line-height: 1.55;
}

[data-cl-hero-head] [data-cl-marker] {
  margin-block-end: 0;
}

/* never empty and never decorative — whatever sits here is the first
   evidence a CTO sees */
/* 4 columns read as an afterthought next to a 72px headline; at 5 with a
   raised ground the decision record holds its own half of the hero */
/* Framed, not filled. The presence comes from the rule and the padding; a
   raised ground on top of that read as a dashboard panel. */
[data-cl-evidence] {
  grid-column: 8 / -1;
  padding: var(--card-padding);
  background: transparent;
  border: 1px solid var(--line-strong);
}

[data-cl-evidence] > p {
  margin-block-start: var(--space-4);
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--text-muted);
}

@media (max-width: 1023px) {
  [data-cl-hero-head],
  [data-cl-evidence] {
    grid-column: 1 / -1;
  }

  /* the panel keeps its full frame when it stacks — it is a framed artefact,
     and stripping one edge left it looking broken rather than open */
  [data-cl-evidence] {
    margin-block-start: var(--space-5);
  }
}

/* -------------------------------------------------------------------------
   10. Cards — hairline cells in a grid. No radius, no shadow, no icon tile.
   ------------------------------------------------------------------------- */

[data-cl-cards] {
  display: grid;
  gap: var(--grid-gap);
}

[data-cl-cards="practice"],
[data-cl-cards="insight"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
  [data-cl-cards] {
    grid-template-columns: 1fr;
  }
}

/* <cl-situations> — the handover's <sw-card-problem> is a hairline box used
   6-up. CloudLift's final design renders the same six items as full-width
   ruled rows instead, and that is what ships: the handover permits per-practice
   section stacks to differ, and its own guidance says to prefer ruled rows over
   a card grid "wherever the content is a list of positions". Six diagnoses with
   a sentence of elaboration each is exactly that.

   An <ol> of <h3> + <p>, not a <dl> and not a <cl-situations>: the statements
   belong in the document outline, which a definition list would keep them out
   of, and the list semantic is already carried by the native element. Wrapping
   it in a custom element would add a node and take away nothing. */
[data-cl-situations] {
  padding: 0;
  list-style: none;
}

[data-cl-situations] > li {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gutter);
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--line);
}

/* the outer rules of the block are the strong tone, so the run of six reads as
   one ruled table rather than six unrelated rows */
[data-cl-situations] > li:first-child {
  border-block-start-color: var(--line-strong);
}

[data-cl-situations] > li:last-child {
  border-block-end: 1px solid var(--line-strong);
}

/* [index] [statement] — the number is its own column rather than an inline
   marker, so a statement that wraps aligns under its own first line */
[data-cl-situations] h3 {
  display: grid;
  grid-template-columns: var(--space-6) 1fr;
  align-items: baseline;
}

[data-cl-situations] h3 > [data-cl-index] {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

[data-cl-situations] p {
  max-inline-size: var(--measure);
}

@media (max-width: 1023px) {
  [data-cl-situations] > li {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* on a phone the number stacks above the statement: a 32px column is a sixth of
   the available measure there */
@media (max-width: 767px) {
  [data-cl-situations] h3 {
    grid-template-columns: 1fr;
    row-gap: var(--space-2);
  }
}

/* <cl-services> — the handover's <sw-card-capability>, used 3-up */
cl-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}

@media (max-width: 1023px) {
  cl-services {
    grid-template-columns: 1fr;
  }
}

/* a 2px --text rule outshouted the heading under it. The divider drops to the
   normal tone and a short accent segment carries the hierarchy instead. */
cl-card-service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--line-strong);
}

cl-card-service::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: var(--space-7);
  block-size: 2px;
  background: var(--accent);
}

cl-card-service > p {
  font-size: var(--text-small);
  line-height: 1.55;
}

cl-card-service ul {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

cl-card-service li {
  display: grid;
  grid-template-columns: var(--space-4) 1fr;
  font-size: var(--text-small);
  line-height: 1.5;
}

cl-card-service li::before {
  content: "/";
  color: var(--accent);
  font-family: var(--font-mono);
}

/* CloudLift's outcome is a tinted block rather than the parent's bare accent
   line — it is the one claim per card a reader is meant to carry away, and the
   three of them land at the same height because the cards are flex columns. */
[data-cl-outcome] {
  margin-block-start: auto;
  padding: var(--space-3) var(--space-4);
  background: var(--accent-tint);
  border-block-start: 1px solid var(--accent-tint-line);
}

[data-cl-outcome] > [data-cl-marker] {
  margin-block-end: var(--space-1);
  color: var(--text-muted);
}

[data-cl-outcome] > p {
  color: var(--accent);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.4;
}

/* <sw-card-practice> — carries another practice's mark and hue */
[data-cl-card="practice"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--card-padding);
  border: 1px solid var(--line);
}

[data-cl-card="practice"] header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* NO flex gap here, unlike [data-cl-brand]. A wordmark split for typographic
   weight ("Stratus<i>works</i>") puts a bare text node and an <i> side by side,
   and a flex container makes each of them a separate item — so a gap renders
   INSIDE the word and the mark reads as two words. The mark-to-wordmark spacing
   goes on the svg instead, where it is the only thing it can affect. */
[data-cl-practice-name] {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: var(--tracking-h3);
  text-transform: uppercase;
}

[data-cl-practice-name] > svg {
  margin-inline-end: var(--space-2);
}

/* <i>, never <em>. A wordmark is typographic differentiation, not stress
   emphasis, and <em> makes a screen reader announce the sibling brand with
   emphasis. The parent build shipped this as <em> on five of six pages, where
   the rule never matched and the browser's italic default showed through — it
   read as a rendering glitch. Same element as [data-cl-brand] i, on purpose. */
[data-cl-practice-name] i {
  color: var(--text-muted);
  font-style: normal;
}

[data-cl-card="practice"] p {
  font-size: var(--text-small);
  line-height: 1.55;
  max-inline-size: none;
}

[data-cl-card="practice"] p:last-of-type {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  line-height: 1.6;
}

/* <sw-tag> */
[data-cl-tag] {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

/* RESERVED — <sw-card-insight> */
/* RESERVED — <sw-card-insight>, awaiting the insights index */
[data-cl-card="insight"] {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
}

[data-cl-card="insight"] > div {
  display: grid;
  gap: var(--space-2);
  padding: var(--card-padding);
}

[data-cl-card="insight"] [data-cl-meta] {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-code);
}

[data-cl-card="insight"] [data-cl-read] {
  margin-block-start: auto;
  padding: var(--space-3) var(--card-padding);
  border-block-start: 1px solid var(--line);
  color: var(--accent);
  font-size: var(--text-small);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   11. <sw-definition-rows> — use instead of a card grid wherever the content
       is a list of positions: principles, services, FAQ
   ------------------------------------------------------------------------- */

[data-cl-definition-rows="numbered"] {
  counter-reset: position;
}

/* three columns per row: [number] [term] [description]. The number is its own
   column rather than an inline marker, so a term that wraps aligns under its own
   first line instead of indenting under the counter. Baseline alignment keeps the
   11.5px number sitting on the term's first baseline despite the size difference. */
[data-cl-definition-rows="numbered"] dt {
  display: grid;
  grid-template-columns: var(--space-6) 1fr;
  align-items: baseline;
}

[data-cl-definition-rows="numbered"] dt::before {
  counter-increment: position;
  content: "0" counter(position);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  font-variant-numeric: tabular-nums;
}

[data-cl-definition-rows] > div {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gutter);
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--line);
}

[data-cl-definition-rows] > div:last-child {
  border-block-end: 1px solid var(--line);
}

[data-cl-definition-rows] dt {
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}

[data-cl-definition-rows] dd {
  max-inline-size: var(--measure);
}

/* when a term is a destination (the 404 list), it is a control and owes the
   44px target — the h3 line box alone is about 26px */
[data-cl-definition-rows] dt a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
}

/* term above description below 1024 */
@media (max-width: 1023px) {
  [data-cl-definition-rows] > div {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* on a phone the number stacks above the term: a 32px column is a sixth of the
   available measure there, and the term needs the full width more than the
   number needs a gutter */
@media (max-width: 767px) {
  [data-cl-definition-rows="numbered"] dt {
    grid-template-columns: 1fr;
    row-gap: var(--space-2);
  }
}

/* -------------------------------------------------------------------------
   12. <sw-callout> and <sw-pullquote>
   ------------------------------------------------------------------------- */

[data-cl-callout] {
  padding: var(--card-padding);
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-line);
}

[data-cl-callout] [data-cl-marker] {
  margin-block-end: var(--space-2);
}

/* RESERVED — <sw-pullquote>, awaiting the article template */
[data-cl-pullquote] {
  margin: 0;
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--accent);
}

[data-cl-pullquote] p {
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--tracking-h3);
}

[data-cl-pullquote] figcaption {
  margin-block-start: var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   13. <sw-prose> — body at 1–7, margin notes at 9–12
   ------------------------------------------------------------------------- */

[data-cl-prose] {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

[data-cl-prose] > * {
  grid-column: 1 / span 7;
}

[data-cl-prose] > * + * {
  margin-block-start: var(--space-5);
}

[data-cl-note] {
  grid-column: 9 / -1;
  grid-row: span 2;
  margin-block-start: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

[data-cl-note] b {
  display: block;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

/* below 1024 the notes go inline behind a 2px accent left rule */
@media (max-width: 1023px) {
  [data-cl-prose] {
    grid-template-columns: 1fr;
  }

  [data-cl-prose] > *,
  [data-cl-note] {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  [data-cl-note] {
    margin-block-start: var(--space-5);
    border-inline-start-width: 2px;
    border-inline-start-color: var(--accent);
  }
}

/* -------------------------------------------------------------------------
   14. Diagrams — hairline rules, square nodes, connectors as pseudo-elements
       so they are never announced
   ------------------------------------------------------------------------- */

/* <sw-workflow> — five numbered nodes. Each step owns its own connector
   segment; one absolutely-positioned rule across the row breaks the moment
   the grid wraps. */
[data-cl-workflow] {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gutter);
  padding: 0;
  list-style: none;
}

[data-cl-step] {
  position: relative;
  min-block-size: var(--space-7);
}

/* starts clear of the 32px glyph and stops at the next one, at the glyph's
   vertical centre: the strata are the structure, a rule through them is noise */
[data-cl-step]::after {
  content: "";
  position: absolute;
  inset-inline: calc(var(--space-7) + var(--space-2)) calc(-1 * var(--gutter));
  inset-block-start: var(--space-5);
  block-size: 1px;
  background: var(--connector);
  transform-origin: left center;
}

[data-cl-step]:last-child::after {
  content: none;
}

/* A filled square carrying the stage number. The handover specifies 38px; the
   spacing scale has no 38, and inventing one to match a mock would break S9 for
   a 10px difference nobody can see, so the node is one scale step (--space-7).
   The connector offset above is derived from the same token, so the rule always
   starts clear of the glyph however that step is retuned. */
[data-cl-node] {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--space-7);
  block-size: var(--space-7);
  margin-block-end: var(--space-3);
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-variant-numeric: tabular-nums;
}

/* Filled nodes are stages in scope; hairline nodes are available but not
   engaged. That distinction is the handover's way of showing a single-stage
   engagement without drawing the rest as missing, so it ships even though the
   home page currently fills all five. */
[data-cl-node="available"] {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
}

[data-cl-node] svg {
  inline-size: var(--space-7);
  block-size: var(--space-7);
}

[data-cl-stage] {
  display: block;
  margin-block-end: var(--space-1);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  font-variant-numeric: tabular-nums;
}

/* the closing stage is the mark, so it carries the mark's weight */
[data-cl-step]:last-child [data-cl-stage] {
  color: var(--accent);
}

[data-cl-step] h3 {
  margin-block-end: var(--space-1);
}

[data-cl-step] p {
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text-muted);
}

/* the spine rotates vertical: rule down the left, nodes stacked, text right */
@media (max-width: 1023px) {
  [data-cl-workflow] {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  [data-cl-step] {
    padding-inline-start: calc(var(--space-7) + var(--space-3));
  }

  [data-cl-step] > [data-cl-node] {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    margin-block-end: 0;
  }

  [data-cl-step]::after {
    inset-inline: var(--space-5) auto;
    inset-block: calc(var(--space-7) + var(--space-2)) calc(-1 * var(--space-6));
    inline-size: 1px;
    block-size: auto;
  }
}

/* RESERVED — <sw-diagram-spine>: four square nodes on a connector rule, three
   outlined and the last filled. Awaiting the service-detail and about pages. */
[data-cl-spine] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  padding: 0;
  list-style: none;
}

[data-cl-spine] > li {
  position: relative;
  padding-block-start: var(--space-6);
}

[data-cl-spine] > li::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--space-4);
  block-size: var(--space-4);
  border: 1px solid var(--accent-fill);
  background: transparent;
}

[data-cl-spine] > li:last-child::before {
  background: var(--accent-fill);
}

[data-cl-spine] > li::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-4) calc(-1 * var(--gutter));
  inset-block-start: var(--space-2);
  block-size: 1px;
  background: var(--connector);
  transform-origin: left center;
}

[data-cl-spine] > li:last-child::after {
  content: none;
}

[data-cl-spine] h3 {
  margin-block-end: var(--space-1);
}

[data-cl-spine] p {
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text-muted);
}

/* rotates vertical: rule down the left, nodes stacked, text to the right */
@media (max-width: 1023px) {
  [data-cl-spine] {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  [data-cl-spine] > li {
    padding-block-start: 0;
    padding-inline-start: var(--space-6);
  }

  [data-cl-spine] > li::after {
    inset-inline: var(--space-2) auto;
    inset-block: var(--space-4) calc(-1 * var(--space-6));
    inline-size: 1px;
    block-size: auto;
  }
}

/* RESERVED — <sw-diagram-layers>: each row indented one stratum further than the one
   below, matching the logo's offset */
[data-cl-layers] {
  display: grid;
  padding: 0;
  list-style: none;
}

[data-cl-layers] li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--text-code);
}

[data-cl-layers] li + li {
  border-block-start: 0;
}

[data-cl-layers] li:nth-child(1) {
  margin-inline-start: calc(2 * var(--space-5));
}

[data-cl-layers] li:nth-child(2) {
  margin-inline-start: var(--space-5);
}

[data-cl-layers] li[aria-current="true"] {
  background: var(--accent-tint);
  border-color: var(--accent-tint-line);
}

/* <cl-record> — the handover's <sw-decision-record>. A cloud decision record,
   not a table of technologies: Constraint / Selected / Avoided / Expected effect
   is the shape of the artefact and the shape of the argument.

   DECLARATIVE SHADOW DOM. The four framed bands (bar, body, effect, note) are
   presentation, so they live in the shadow root as parts and the light DOM
   carries nothing but the record's text. The host itself is the frame — one
   fewer node than wrapping everything in part="frame".

   Verdict labels use STATUS colours, which is where this build parts company
   with the StratusWorks sibling. That build stripped them on review, reasoning
   that green and red beside the accent read as a second brand system. The
   handover answers that objection directly — status colours are shared by all
   three practices precisely so a green "pass" never reads as one practice's
   branding — and the CloudLift design uses them. Colour is never the only
   carrier: the avoided value is also <del>. */
cl-record {
  background: var(--surface-raised);
  border: 1px solid var(--line);
}

cl-record::part(bar) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--card-padding);
  border-block-end: 1px solid var(--line);
}

cl-record::part(body) {
  display: grid;
  gap: var(--space-4);
  padding: var(--card-padding);
}

cl-record::part(effect) {
  padding: var(--space-4) var(--card-padding);
  background: var(--accent-tint);
  border-block-start: 1px solid var(--accent-tint-line);
}

cl-record::part(note) {
  padding: var(--space-3) var(--card-padding) var(--space-4);
  border-block-start: 1px solid var(--line);
}

/* the bar: artefact name on the left, its state on the right */
cl-record [data-cl-label] {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}


cl-record dl {
  display: grid;
  gap: var(--space-4);
}

/* labels sit above their values at every width. A two-column record cramps at
   phone width, and the panel is only 5 of 12 columns even on a desktop. */
cl-record dl > div + div {
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--surface-sunken);
}

cl-record dt {
  margin-block-end: var(--space-1);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

cl-record dd {
  color: var(--text);
  font-size: var(--text-small);
  line-height: 1.55;
}

cl-record [data-cl-verdict="selected"] dt {
  color: var(--positive);
}

cl-record [data-cl-verdict="avoided"] dt {
  color: var(--critical);
}

/* struck through as well as coloured: <del> carries the meaning without hue */
cl-record [data-cl-verdict="avoided"] del {
  color: var(--text-muted);
  text-decoration-thickness: 1px;
}

cl-record [slot="effect-label"] {
  display: block;
  margin-block-end: var(--space-2);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

cl-record ul[slot="effect"] {
  display: grid;
  gap: var(--space-1);
  padding: 0;
  list-style: none;
}

cl-record ul[slot="effect"] li {
  display: grid;
  grid-template-columns: var(--space-4) 1fr;
  color: var(--text-secondary);
  font-size: var(--text-small);
  line-height: 1.45;
}

cl-record ul[slot="effect"] li::before {
  content: "/";
  color: var(--accent);
  font-family: var(--font-mono);
}

cl-record p[slot="note"] {
  color: var(--text-muted);
  font-size: var(--text-code);
  line-height: 1.5;
  max-inline-size: none;
}

/* <sw-decision-record> — mono table, option + verdict. Verdicts use status
   colours, never the practice accent. */
[data-cl-decision-record],
[data-cl-spec-table] {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  text-align: start;
}

/* the caption names the artefact, so it leads rather than whispers */
[data-cl-decision-record] caption,
[data-cl-spec-table] caption {
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--line-strong);
  color: var(--text);
  font-size: var(--text-code);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  text-align: start;
  text-transform: uppercase;
}

[data-cl-decision-record] th,
[data-cl-decision-record] td,
[data-cl-spec-table] th,
[data-cl-spec-table] td {
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--line);
  font-weight: 400;
  text-align: start;
  vertical-align: baseline;
}

[data-cl-decision-record] thead th,
[data-cl-spec-table] thead th {
  border-block-start-color: var(--line-strong);
  color: var(--text-muted);
  font-size: var(--text-marker);
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

[data-cl-decision-record] tbody tr:last-child th,
[data-cl-decision-record] tbody tr:last-child td,
[data-cl-spec-table] tbody tr:last-child td {
  border-block-end: 1px solid var(--line);
}

[data-cl-decision-record] td {
  inline-size: 8ch;
  text-align: end;
  white-space: nowrap;
}

/* No semantic hue: red/green/amber beside the accent read as a second brand
   system, and colour was never the carrier here — the word is. Weight and the
   neutral ramp do the ranking instead. */
[data-cl-verdict="selected"] {
  color: var(--accent);
  font-weight: 500;
}

[data-cl-verdict="rejected"],
[data-cl-verdict="deferred"] {
  color: var(--text-muted);
}

[data-cl-spec-table] td:last-child {
  white-space: nowrap;
}

/* stacks to labelled rows at 390 */
@media (max-width: 767px) {
  [data-cl-spec-table] thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  [data-cl-spec-table] tr {
    display: grid;
    padding-block: var(--space-3);
    border-block-start: 1px solid var(--line);
  }

  [data-cl-spec-table] td {
    padding-block: var(--space-1);
    border: 0;
  }

  [data-cl-spec-table] td::before {
    content: attr(data-label) " ";
    color: var(--text-muted);
    text-transform: uppercase;
  }
}

/* -------------------------------------------------------------------------
   15. Measurement
   ------------------------------------------------------------------------- */

/* RESERVED — <sw-metric-pair>: <del> and <ins> so the meaning survives without colour */
[data-cl-metrics] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
}

[data-cl-metrics] > div {
  padding: var(--card-padding);
  border-block-end: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
}

[data-cl-metrics] dt {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

[data-cl-metrics] dd {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

[data-cl-metrics] del {
  color: var(--text-muted);
  font-size: var(--text-body);
}

[data-cl-metrics] ins {
  color: var(--text);
  font-size: var(--text-metric);
  line-height: 1.1;
  text-decoration: none;
}

@media (max-width: 767px) {
  [data-cl-metrics] {
    grid-template-columns: 1fr;
  }
}

/* <cl-bar> — the handover's <sw-budget-bar>. A ratio, not a score.
   DECLARATIVE SHADOW DOM: the track and the fill are two meaningless <div>s, so
   they belong in the shadow root. The light DOM carries only the label and the
   value, which is all a reader or a crawler has any use for. */
cl-bar {
  display: grid;
  gap: var(--space-2);
}

cl-bar > [data-cl-bar-label] {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-variant-numeric: tabular-nums;
}

cl-bar > [data-cl-bar-label] b {
  color: var(--text);
  font-weight: 400;
}

cl-bar::part(track) {
  block-size: var(--space-2);
  background: var(--line);
}

cl-bar::part(fill) {
  block-size: 100%;
  background: var(--accent-fill);
  transform-origin: left center;
}

/* a second reading on the same figure — "justified against running" is a
   different claim from "used against provisioned", so it takes a different fill */
cl-bar[data-cl-bar="positive"]::part(fill) {
  background: var(--positive);
}

cl-bar[data-cl-bar="over"]::part(fill) {
  background: var(--critical);
}

/* Fill in 5% steps. Inline style attributes are forbidden by the never-list and
   blocked by style-src 'self'; attr() with a type is not Baseline. So the scale
   is enumerated, and every published width has to round onto it — which is also
   a useful brake on implying more precision than a figure carries. */
cl-bar[data-cl-fill="0"]::part(fill)   { inline-size: 0 }
cl-bar[data-cl-fill="5"]::part(fill)   { inline-size: 5% }
cl-bar[data-cl-fill="10"]::part(fill)  { inline-size: 10% }
cl-bar[data-cl-fill="15"]::part(fill)  { inline-size: 15% }
cl-bar[data-cl-fill="20"]::part(fill)  { inline-size: 20% }
cl-bar[data-cl-fill="25"]::part(fill)  { inline-size: 25% }
cl-bar[data-cl-fill="30"]::part(fill)  { inline-size: 30% }
cl-bar[data-cl-fill="35"]::part(fill)  { inline-size: 35% }
cl-bar[data-cl-fill="40"]::part(fill)  { inline-size: 40% }
cl-bar[data-cl-fill="45"]::part(fill)  { inline-size: 45% }
cl-bar[data-cl-fill="50"]::part(fill)  { inline-size: 50% }
cl-bar[data-cl-fill="55"]::part(fill)  { inline-size: 55% }
cl-bar[data-cl-fill="60"]::part(fill)  { inline-size: 60% }
cl-bar[data-cl-fill="65"]::part(fill)  { inline-size: 65% }
cl-bar[data-cl-fill="70"]::part(fill)  { inline-size: 70% }
cl-bar[data-cl-fill="75"]::part(fill)  { inline-size: 75% }
cl-bar[data-cl-fill="80"]::part(fill)  { inline-size: 80% }
cl-bar[data-cl-fill="85"]::part(fill)  { inline-size: 85% }
cl-bar[data-cl-fill="90"]::part(fill)  { inline-size: 90% }
cl-bar[data-cl-fill="95"]::part(fill)  { inline-size: 95% }
cl-bar[data-cl-fill="100"]::part(fill) { inline-size: 100% }

/* -------------------------------------------------------------------------
   15a. <cl-gap-figure> — "provisioned against used", inside the graphite band.
        The gap is the finding, so the figure is a framed artefact rather than a
        decoration: caption bar naming it, the bars, then what it does not claim.

        The panel is LIGHTER than the band it sits on, not darker as the design
        file draws it. On a dark ground elevation reverses — that is the
        handover's own rule, and --surface-raised already resolves to the
        inverse-raised step inside [data-ground="graphite"].
   ------------------------------------------------------------------------- */

cl-gap-figure {
  margin-block-start: var(--head-gap);
  background: var(--surface-raised);
  border: 1px solid var(--line);
}

cl-gap-figure::part(bar) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--line);
}

cl-gap-figure::part(body) {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

cl-gap-figure::part(note) {
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--line);
}

cl-gap-figure [data-cl-label],
cl-gap-figure [data-cl-status] {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

cl-gap-figure p[slot="note"] {
  color: var(--text-muted);
  font-size: var(--text-code);
  line-height: 1.5;
  max-inline-size: none;
}

/* -------------------------------------------------------------------------
   15b. <cl-split> — a framed panel in two halves, used by the assessment
        ("what we review" / "what you receive") and the measurement section
        ("baseline" / "target"). One half may be tinted to mark it as the side
        the reader gets rather than the side we do.

        DECLARATIVE SHADOW DOM: the column wrapper and the footer band are
        frame, not content. The halves themselves stay in the light DOM.
   ------------------------------------------------------------------------- */

cl-split {
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
}

cl-split::part(cols) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

cl-split::part(foot) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--card-padding);
  border-block-start: 1px solid var(--line);
}

cl-split > [slot="a"],
cl-split > [slot="b"] {
  padding: var(--card-padding);
}

/* the divider belongs to the second half, so it cannot double up with the
   frame's own edge and it flips to a top rule when the halves stack */
cl-split > [slot="b"] {
  border-inline-start: 1px solid var(--line);
}

cl-split[data-cl-tint] > [slot="b"] {
  background: var(--accent-tint);
  border-inline-start-color: var(--accent-tint-line);
}

cl-split [data-cl-marker] {
  margin-block-end: var(--space-4);
}

cl-split[data-cl-tint] > [slot="b"] [data-cl-marker] {
  color: var(--accent);
}

/* a run of / items, hairline separated — the same list the service cards use,
   but ruled because these are inventories a reader scans rather than reads */
cl-split ul {
  padding: 0;
  list-style: none;
}

cl-split ul > li {
  display: grid;
  grid-template-columns: var(--space-4) 1fr;
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--line);
  font-size: var(--text-small);
  line-height: 1.5;
}

cl-split ul > li::before {
  content: "/";
  color: var(--line-strong);
  font-family: var(--font-mono);
}

cl-split[data-cl-tint] > [slot="b"] ul > li {
  border-block-start-color: var(--accent-tint-line);
}

cl-split[data-cl-tint] > [slot="b"] ul > li::before {
  color: var(--accent);
}

/* The verification steps are a sequence, so they are a numbered <ol> rather than
   the / list the inventory halves use. Reuses [data-cl-next] from the confirmation
   page; only the rhythm needs aligning to the list beside it. */
cl-split [data-cl-next] li {
  padding-block: var(--space-3);
  font-size: var(--text-small);
}

cl-split [data-cl-next] li:last-child {
  border-block-end: 0;
}

cl-split p[slot="foot"] {
  color: var(--text-muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

/* The halves stack well before the 1024 breakpoint the rest of the page uses:
   two inventories of eight items each are unreadable at 40ch. */
@media (max-width: 899px) {
  cl-split::part(cols) {
    grid-template-columns: 1fr;
  }

  cl-split > [slot="b"] {
    border-inline-start: 0;
    border-block-start: 1px solid var(--line);
  }

  cl-split[data-cl-tint] > [slot="b"] {
    border-block-start-color: var(--accent-tint-line);
  }
}

[data-cl-budget-title] {
  margin-block-end: var(--space-4);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

[data-cl-provisional] {
  margin-block-start: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

/* -------------------------------------------------------------------------
   15b. Section compositions
   ------------------------------------------------------------------------- */

/* 04 — the graphite emphasis band: 6 / 6 */
[data-cl-band-head] {
  grid-column: 1 / span 6;
}

[data-cl-band-head] > p {
  margin-block-start: var(--space-5);
}

[data-cl-band-list] {
  grid-column: 8 / -1;
  padding: 0;
  list-style: none;
  counter-reset: principle;
}

[data-cl-band-list] li {
  display: grid;
  grid-template-columns: var(--space-6) 1fr;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--line);
  font-size: var(--text-small);
}

[data-cl-band-list] li:last-child {
  border-block-end: 1px solid var(--line);
}

[data-cl-band-list] li::before {
  counter-increment: principle;
  content: "0" counter(principle);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-variant-numeric: tabular-nums;
}

/* 06 — lifecycle footnote */
[data-cl-lifecycle-note] {
  margin-block-start: var(--head-gap);
  color: var(--text-muted);
  font-size: var(--text-small);
}

/* <cl-ecosystem> — a strip, not a band. CloudLift is one practice of three, and
   the sibling that can carry a decision through to delivery is worth naming;
   giving it a full section of the page would make the parent the subject. */
cl-ecosystem {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gutter);
  align-items: center;
}

cl-ecosystem > [data-cl-lockup] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline-start: var(--gutter);
  border-inline-start: 1px solid var(--line);
}

cl-ecosystem > [data-cl-lockup] svg {
  flex: none;
}

cl-ecosystem [data-cl-practice-name] {
  font-size: var(--text-h3);
}

cl-ecosystem > [data-cl-lockup] p {
  color: var(--text-muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

cl-ecosystem > div:first-child > p {
  margin-block: var(--space-3) var(--space-4);
}

@media (max-width: 767px) {
  cl-ecosystem {
    grid-template-columns: 1fr;
  }

  cl-ecosystem > [data-cl-lockup] {
    padding-inline-start: 0;
    padding-block-start: var(--space-5);
    border-inline-start: 0;
    border-block-start: 1px solid var(--line);
  }
}

/* RESERVED — the handover's "built as we advise" composition: prose 1–6, budget
   8–12. CloudLift's measurement section is about the client's estate, not this
   website, so no page places this yet. Kept because a "how this site is built"
   page is a plausible addition and re-deriving it is waste. */
[data-cl-proof] {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

[data-cl-proof] > :first-child {
  grid-column: 1 / span 5;
}

[data-cl-proof] > :last-child {
  grid-column: 7 / -1;
}

/* the most distinctive block on the page, so it stops looking like a sidebar */
[data-cl-panel] {
  padding: var(--space-5);
  background: var(--surface-raised);
  border: 1px solid var(--line);
}

[data-cl-panel] /* RESERVED — only the proof composition places this now. The measurement
   section used it for a baseline/target table until a review read the repeated
   pending values as an unfinished placeholder; it lists its dimensions once. */
[data-cl-facts] {
  margin-block-start: var(--space-5);
}

[data-cl-proof] h2 {
  margin-block-end: var(--space-5);
}

[data-cl-proof-list] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
  padding: 0;
  list-style: none;
}

[data-cl-proof-list] li {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

/* 09 — footer call to action */
[data-cl-footer-cta] {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gutter);
  align-items: end;
  margin-block-end: calc(var(--section-padding) * 0.88);
  padding-block-end: var(--space-6);
  border-block-end: 1px solid var(--line);
}

[data-cl-footer-cta] h2 {
  margin-block-end: var(--space-4);
}

/* The scope line qualifies the lead rather than restating the pitch, so it has
   to read as subordinate. Colour alone will not do it: the footer lead already
   sits at --text-small, and on the graphite ground --text-muted and
   --text-secondary resolve to near-identical tones by design. Dropping a step
   to --text-code is what actually creates the hierarchy, and it matches the
   register of the meta row at the bottom of the same footer. */
[data-cl-footer-cta] [data-cl-cta-scope] {
  margin-block-start: var(--space-3);
  max-inline-size: var(--measure);
  color: var(--text-muted);
  font-size: var(--text-code);
}

[data-cl-footer-cta] [data-cl-actions] {
  justify-content: end;
}

/* CloudLift's closing call to action is its OWN graphite band and the footer
   below it is sunken, so the divider the parent needs between its CTA and its
   footer columns would here be a rule against nothing. The band's own
   full-bleed section hairline already separates the two. */
[data-cl-footer-cta="band"] {
  margin-block-end: 0;
  padding-block-end: 0;
  border-block-end: 0;
}

/* Display-sized, deliberately bookending the h1: the page opens by naming the
   problem and closes by naming the position. It is the only other heading on the
   site allowed at this size. */
[data-cl-footer-cta="band"] h2 {
  max-inline-size: 18ch;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

[data-cl-footer-cta="band"] > div > p:not([data-cl-cta-scope]) {
  font-size: var(--text-lead);
  line-height: 1.55;
}

/* the address, in mono, under the button — a second way to reach us for anyone
   who will not use a form, without making the form look optional */
[data-cl-contact-line] {
  margin-block-start: var(--space-4);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  text-align: end;
}

@media (max-width: 1023px) {
  [data-cl-contact-line] {
    text-align: start;
  }
}

@media (max-width: 1023px) {
  [data-cl-band-head],
  [data-cl-band-list],
  [data-cl-proof] > :first-child,
  [data-cl-proof] > :last-child {
    grid-column: 1 / -1;
  }

  [data-cl-band-list],
  [data-cl-proof] > :last-child {
    margin-block-start: var(--space-6);
  }

  [data-cl-footer-cta] {
    grid-template-columns: 1fr;
    align-items: start;
  }

  [data-cl-footer-cta] [data-cl-actions] {
    justify-content: start;
  }
}

[data-cl-facts] {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-variant-numeric: tabular-nums;
}

[data-cl-facts] > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-1);
}

[data-cl-facts] dt {
  color: var(--text-muted);
}

[data-cl-facts] dd {
  color: var(--text);
}

/* -------------------------------------------------------------------------
   16. <sw-field> — one form on the site
   ------------------------------------------------------------------------- */

[data-cl-form] {
  display: grid;
  gap: var(--space-5);
  max-inline-size: var(--measure);
}

[data-cl-field] {
  display: grid;
  gap: var(--space-2);
}

/* the label is always visible above the field — never a placeholder as label */
[data-cl-field] > [data-cl-label] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text);
  font-size: var(--text-small);
  font-weight: 600;
}

/* the word "required" in mono, right-aligned to the label — no asterisk,
   and no "optional" on the rest */
[data-cl-required] {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 400;
  letter-spacing: var(--tracking-marker);
}

[data-cl-form] input,
[data-cl-form] textarea {
  min-block-size: calc(var(--space-7) - var(--space-1) + var(--space-1));
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-small);
  transition: border-color var(--duration-state) linear;
}

/* on dark the field recedes into the sunken tone: an input is a hole,
   not a card */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-cl-form] input,
  :root:not([data-theme="light"]) [data-cl-form] textarea {
    background: var(--surface-sunken);
  }
}

:root[data-theme="dark"] [data-cl-form] input,
:root[data-theme="dark"] [data-cl-form] textarea {
  background: var(--surface-sunken);
}

[data-cl-form] textarea {
  min-block-size: calc(var(--space-10) + var(--space-2));
  resize: vertical;
}

[data-cl-form] input:hover,
[data-cl-form] textarea:hover {
  border-color: var(--text);
}

/* focus is a 2px accent border, not a glow */
[data-cl-form] input:focus,
[data-cl-form] textarea:focus {
  border: 2px solid var(--accent);
  outline: 2px solid var(--text);
  outline-offset: var(--focus-offset);
}

/* validated on blur by the browser, never while typing */
[data-cl-form] input:user-invalid,
[data-cl-form] textarea:user-invalid {
  border: 2px solid var(--critical);
}

/* the message is always present; colour is never the only carrier */
[data-cl-error] {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--critical);
  font-size: var(--text-small);
}

[data-cl-form] :user-invalid ~ [data-cl-error] {
  display: flex;
}

[data-cl-form] [disabled] {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

[data-cl-consent] {
  color: var(--text-muted);
  font-size: var(--text-small);
}

/* honeypot — off-screen via CSS so naive bots still fill it */
[data-cl-hp] {
  position: absolute;
  inset-inline-start: -100vw;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   17. <sw-footer> — graphite, four columns, then ecosystem, then measurements
   ------------------------------------------------------------------------- */

[data-cl-footer] {
  padding-block: calc(var(--section-padding) * 0.88);
  border-block-end: 0;
}

[data-cl-footer-columns] {
  display: grid;
  grid-template-columns: 4fr 3fr 3fr 2fr;
  gap: var(--gutter);
}

[data-cl-footer-columns] h2 {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  font-weight: 500;
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

[data-cl-footer] ul {
  padding: 0;
  list-style: none;
}

/* footer line-height is 2 so link targets reach 44px */
[data-cl-footer] li,
[data-cl-footer] p {
  font-size: var(--text-small);
  line-height: 2;
}

/* :not([data-cl-button]) for the same reason as the nav bar */
[data-cl-footer] a:not([data-cl-button]) {
  display: inline-block;
  color: var(--text-secondary);
  transition: color var(--duration-state) linear;
}

[data-cl-footer] a:not([data-cl-button]):hover {
  color: var(--text);
}

/* a strip, not a section: two practices marked Coming should not take a full
   band of the page away from StratusWorks */
[data-cl-ecosystem] {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--line);
}

[data-cl-ecosystem] > [data-cl-marker] {
  margin-block-end: var(--space-2);
}

[data-cl-ecosystem] > p {
  max-inline-size: var(--measure);
  font-size: var(--text-small);
}

[data-cl-ecosystem] ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--gutter);
  margin-block-start: var(--space-4);
  padding: 0;
  list-style: none;
}

[data-cl-ecosystem] li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  line-height: 1.5;
}

[data-cl-ecosystem] li > span:last-child {
  color: var(--text-muted);
  font-size: var(--text-small);
}

/* The sibling lockups are links, so the footer's own container link rule
   outranks [data-cl-practice-name] on specificity and the wordmark would render
   as body text. This is exactly the trap the parent build documented for
   [data-cl-button], reappearing on a different component — if a wordmark in a
   link container ever looks wrong, check specificity before the cascade.

   The li carries data-practice, so --accent here resolves to the SIBLING's hue:
   hovering the StratusWorks lockup goes amber, ClarusTech goes green. */
[data-cl-footer] a[data-cl-practice-name] {
  color: var(--text);
}

[data-cl-footer] a[data-cl-practice-name]:hover {
  color: var(--accent);
}

@media (max-width: 767px) {
  [data-cl-ecosystem] ul {
    grid-template-columns: 1fr;
  }
}

[data-cl-footer-bottom] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--line);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-variant-numeric: tabular-nums;
}

/* Appearance control — makes both authored themes reachable without an OS
   setting. The mechanism and its per-page scope are documented in tokens.css.
   role="radiogroup" rather than <fieldset>: a fieldset's rendered <legend> is
   special-cased by every engine and cannot be a flex item, and this group has
   to sit on one line in the meta row. */
[data-cl-appearance] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

/* clipped, never display:none — a hidden radio must stay focusable and in the
   tab order. clip-path takes the global :focus-visible outline with it, so the
   ring is redrawn on the label rather than removed. */
[data-cl-appearance] input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

[data-cl-appearance-options] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* the same treatment as the primary nav: the selected item is marked by a 2px
   accent rule and a step up in text colour, never by hue alone */
[data-cl-appearance] label {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  border-block-end: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--duration-state) linear,
    border-color var(--duration-state) linear;
}

[data-cl-appearance] label:hover {
  color: var(--text);
  border-block-end-color: var(--line);
}

[data-cl-appearance] input:checked + label {
  color: var(--text);
  border-block-end-color: var(--accent);
}

[data-cl-appearance] input:focus-visible + label {
  outline: 2px solid var(--text);
  outline-offset: var(--focus-offset);
}

@media (max-width: 1023px) {
  [data-cl-footer-columns] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--gutter);
  }
}

@media (max-width: 767px) {
  [data-cl-footer-columns] {
    grid-template-columns: 1fr;
  }

  /* ecosystem row last at 390 */
  [data-cl-ecosystem] {
    margin-block-start: var(--space-6);
  }
}

/* -------------------------------------------------------------------------
   18. Utility page furniture
   ------------------------------------------------------------------------- */

[data-cl-status] {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-marker);
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

[data-cl-stack] {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

/* RESERVED — a second-language term beside an English heading. The imprint carried
   "Impressum" this way; a review asked for it twice and it is gone. Kept because the
   pattern is the right one if Austrian or German findability is ever wanted back: it
   belongs on the heading with lang="de", not in the <title>. */
[data-cl-alt-term] {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-weight: 400;
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
  vertical-align: middle;
}

[data-cl-legal] {
  max-inline-size: var(--measure);
}

/* A page head needs air below it before the body starts. [data-cl-stack] sets its
   OWN internal gap but nothing between itself and whatever follows, so on the pages
   that place a block straight after it the two ran together: "Last updated" against
   the imprint's first paragraph, and the 404's action row against its first hairline.
   The privacy page only looked right because its contents box happened to sit
   between. One rule for every such pairing rather than a per-page nudge. */
[data-cl-stack] + [data-cl-legal],
[data-cl-stack] + [data-cl-toc],
[data-cl-stack] + [data-cl-definition-rows],
[data-cl-toc] + [data-cl-legal] {
  margin-block-start: var(--head-gap);
}

[data-cl-legal] > * + * {
  margin-block-start: var(--space-5);
}

[data-cl-legal] h2 {
  margin-block-start: var(--space-7);
  font-size: var(--text-h3);
}

/* Legal disclosures as labelled rows rather than a <br>-separated blob: better
   semantics, and it makes each required field individually addressable so an
   unresolved one can be marked instead of guessed at. */
[data-cl-disclosures] {
  display: grid;
  max-inline-size: var(--measure);
}

[data-cl-disclosures] > div {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--line);
}

[data-cl-disclosures] > div:last-child {
  border-block-end: 1px solid var(--line);
}

[data-cl-disclosures] dt {
  color: var(--text-muted);
  font-size: var(--text-small);
}

[data-cl-disclosures] dd {
  color: var(--text);
  font-size: var(--text-small);
}

/* A value that is not registered yet. Deliberately not styled as an error: the page
   is pre-launch and the state is correct for now. `LAUNCH=1 bash tools/checks.sh`
   is what refuses to let it ship, and it counts these against legal.config so the
   page and the config cannot disagree in either direction. */
[data-cl-unset] {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  letter-spacing: var(--tracking-marker);
  text-transform: uppercase;
}

@media (max-width: 767px) {
  [data-cl-disclosures] > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

[data-cl-toc] {
  padding: var(--card-padding);
  border: 1px solid var(--line);
}

[data-cl-toc] ol {
  padding-inline-start: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  line-height: 2;
}

[data-cl-updated] {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-code);
}

/* numbered "what happens next" steps on the confirmation page */
[data-cl-next] {
  display: grid;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

[data-cl-next] li {
  display: grid;
  grid-template-columns: var(--space-6) 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--line);
}

[data-cl-next] li:last-child {
  border-block-end: 1px solid var(--line);
}

[data-cl-next] li::before {
  counter-increment: step;
  content: "0" counter(step);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   19. Motion — two of the four specified movements survive zero JavaScript.
       ≤3 animated elements per view, no infinite loops, transform and
       opacity only, all neutralized under prefers-reduced-motion (S4).
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* strata settle — 300ms, first load only */
  [data-cl-strata] > rect {
    animation: cl-settle 300ms var(--easing) both;
  }

  [data-cl-strata] > rect:nth-child(2) {
    animation-delay: 40ms;
  }

  [data-cl-strata] > rect:nth-child(3) {
    animation-delay: 80ms;
  }

  /* connector draw and budget fill were specified as IntersectionObserver
     scroll reveals. Shipped as progressive enhancement only: where
     unsupported, both render in their final state, which is correct. */
  @supports (animation-timeline: view()) {
    [data-cl-step]::after {
      animation: cl-draw var(--duration-reveal) var(--easing) both;
      animation-timeline: view();
      animation-range: entry 20% cover 30%;
    }

    /* reaching a shadow part from a keyframed rule works exactly as it does for
       a static one — ::part() is a normal selector, animations included */
    cl-bar::part(fill) {
      animation: cl-fill 500ms var(--easing) both;
      animation-timeline: view();
      animation-range: entry 25% cover 40%;
    }
  }
}

@keyframes cl-settle {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
}

@keyframes cl-draw {
  from {
    transform: scaleX(0);
  }
}

@keyframes cl-fill {
  from {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   20. Print — articles get printed and forwarded inside client organisations,
       so this is part of the brand, not an afterthought
   ------------------------------------------------------------------------- */

@page {
  size: A4;
  margin: 20mm;
}

@media print {
  :root {
    --surface: #fff;
    --surface-raised: #fff;
    --surface-sunken: #fff;
    --text: #000;
    --text-secondary: #000;
    --text-muted: #000;
    --line: #000;
    --line-strong: #000;
    /* accent is dropped — hairline rules only */
    --accent: #000;
    --accent-fill: #000;
    --accent-tint: #fff;
    --accent-tint-line: #000;
    --connector: #000;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  h1 {
    font-size: 18pt;
  }

  h2 {
    font-size: 13pt;
  }

  h3,
  h4 {
    font-size: 11pt;
  }

  /* nav, footer nav, CTAs, screen-only controls and related are removed —
     a colour-scheme control means nothing on paper */
  [data-cl-header],
  [data-cl-skip],
  [data-cl-footer-columns],
  [data-cl-ecosystem],
  cl-ecosystem,
  [data-cl-actions],
  [data-cl-button],
  [data-cl-appearance],
  [data-cl-related] {
    display: none;
  }

  [data-cl-section] {
    padding-block: 8mm;
    break-inside: avoid;
  }

  /* link URLs print after the text */
  [data-cl-prose] a::after,
  [data-cl-legal] a::after,
  p a::after {
    content: " <" attr(href) ">";
    font-family: var(--font-mono);
    font-size: 8pt;
    word-break: break-all;
  }

  a[href^="#"]::after {
    content: "";
  }

  /* margin notes become footnote-styled blocks in the flow */
  [data-cl-note] {
    border-inline-start: 0;
    border-block-start: 1px solid #000;
    padding-inline-start: 0;
    padding-block-start: 2mm;
    font-size: 8.5pt;
  }

  /* table headers repeat on every page */
  thead {
    display: table-header-group;
  }

  tr,
  [data-cl-card],
  cl-card-service,
  cl-record,
  [data-cl-situations] > li,
  [data-cl-outcome] {
    break-inside: avoid;
  }

  /* the split panels are two inventories side by side on screen; on A4 they are
     two columns of eight items each, which is exactly what the page is for */
  cl-split::part(cols) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* running foot — source URL, printed on the last page of the flow.
     Page numbers need @page margin boxes, which no browser implements. */
  [data-cl-print-foot] {
    display: block;
    margin-block-start: 6mm;
    padding-block-start: 2mm;
    border-block-start: 1px solid #000;
    font-family: var(--font-mono);
    font-size: 7pt;
  }
}

/* RESERVED — the article print sheet places this element; no page does yet */
[data-cl-print-foot] {
  display: none;
}