/* ==========================================================================
   Clearline — UK payments reference
   Namespace: clrl-      (design/DESIGN_SPEC.md → COMPONENT MAP, rev 2)
   Contemporary Swiss modular information system: cobalt colour-blocks,
   condensed uppercase display over humanist body, information in grid modules.
   Radius 0 everywhere. No drop shadows. No monospaced face.
   ========================================================================== */

:root {
  --clrl-surface: #e8ecf3;
  --clrl-panel: #ffffff;
  --clrl-primary: #1637d8;
  --clrl-primary-dark: #0f28a8;
  --clrl-primary-tint: #c5d0f8;
  --clrl-primary-tint-2: #dbe3f8;
  --clrl-ink: #0b1220;
  --clrl-ink-2: #22304a;
  --clrl-body: #2b3547;
  --clrl-mute: #5c6779;
  --clrl-mute-2: #8a95a8;
  --clrl-rule: #d5dce8;
  --clrl-rule-fine: #e3e8f1;
  --clrl-rule-dash: #c3cddf;
  --clrl-signal: #f0325a;
  --clrl-signal-tint: #fdeaef;
  --clrl-signal-text: #c8103c;
  --clrl-signal-soft: #ff9db3;
  --clrl-index-link: #dbe3f2;
  --clrl-index-num: #6f86e8;
  --clrl-ink-mute: #7b8aa5;
  --clrl-foot-body: #9fadc4;
  --clrl-foot-link: #c9d3e4;
  --clrl-foot-mute: #6f7d94;
  /* rgba(255,255,255,.3) composited over cobalt — used as an opaque hairline so
     overlapping cell halos cannot double up in opacity. */
  --clrl-on-primary-rule: #5c73e4;

  --clrl-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --clrl-body-face: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --clrl-container: 1280px;
  --clrl-doc: 900px;
  --clrl-gutter: clamp(16px, 4vw, 48px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html,
body {
  margin: 0;
  padding: 0;
  background: var(--clrl-surface);
}

body {
  color: var(--clrl-body);
  font-family: var(--clrl-body-face);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: var(--clrl-primary); text-decoration: none; }
a:hover { color: var(--clrl-ink); text-decoration: underline; }

:focus-visible { outline: 3px solid var(--clrl-primary); outline-offset: 2px; }

summary::-webkit-details-marker { display: none; }
summary { list-style: none; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--clrl-display);
  text-transform: uppercase;
  color: var(--clrl-ink);
}

.clrl-wrap {
  max-width: var(--clrl-container);
  margin: 0 auto;
  padding-left: var(--clrl-gutter);
  padding-right: var(--clrl-gutter);
}

.clrl-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  background: var(--clrl-ink);
  color: #fff;
  font-family: var(--clrl-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 18px;
}
.clrl-skip:focus { left: 8px; top: 8px; text-decoration: none; color: #fff; }

/* --- header bar --------------------------------------------------------- */

.clrl-bar {
  background: var(--clrl-primary);
  color: #fff;
  position: relative;
  z-index: 5;
}

.clrl-bar-inner {
  max-width: var(--clrl-container);
  margin: 0 auto;
  padding: 0 var(--clrl-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0 clamp(16px, 3vw, 40px);
  min-height: 62px;
}

.clrl-home {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: #fff;
  text-decoration: none;
}
.clrl-home:hover { color: #fff; text-decoration: none; }

.clrl-wordmark {
  font-family: var(--clrl-display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.clrl-descriptor {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--clrl-primary-tint);
  max-width: 80px;
}

.clrl-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  font-family: var(--clrl-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.clrl-nav a,
.clrl-locale {
  color: #fff;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 clamp(10px, 1.4vw, 18px);
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.clrl-nav a:hover {
  background: var(--clrl-primary-dark);
  color: #fff;
  text-decoration: none;
}

.clrl-locale {
  color: var(--clrl-primary-tint);
  font-size: 16px;
  padding-right: 0;
}

/* --- hero -------------------------------------------------------------- */

.clrl-hero {
  background: var(--clrl-primary);
  color: #fff;
}

.clrl-hero-top {
  max-width: var(--clrl-container);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) var(--clrl-gutter) 0;
}

.clrl-flag {
  margin: 0 0 clamp(14px, 2vw, 22px);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--clrl-signal);
  display: inline-block;
  padding: 6px 12px;
}

.clrl-hero h1 {
  font-weight: 700;
  font-size: clamp(52px, 11vw, 138px);
  line-height: 0.86;
  letter-spacing: 0.005em;
  margin: 0 0 clamp(22px, 3vw, 34px);
  color: #fff;
  text-wrap: balance;
}

.clrl-lede {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(18px, 3vw, 48px);
  padding-bottom: clamp(26px, 4vw, 44px);
}

.clrl-lede > p:first-child {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.5;
  font-weight: 500;
  text-wrap: pretty;
  min-width: 0;
}

.clrl-lede > p:last-child {
  margin: 0;
  font-size: 16.5px;
  color: var(--clrl-primary-tint);
  align-self: end;
  min-width: 0;
}

.clrl-status-wrap {
  max-width: var(--clrl-container);
  margin: 0 auto;
  padding: 0 var(--clrl-gutter) clamp(28px, 4vw, 48px);
}

/* Dividers live on the cells, so a partially filled last row shows the cobalt
   band instead of a pale block. */
.clrl-status-strip {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 2px;
}

.clrl-status-strip > div {
  background: var(--clrl-primary);
  box-shadow: 0 0 0 1px var(--clrl-on-primary-rule);
  padding: 16px 18px 18px;
  min-width: 0;
}

.clrl-status-strip dt {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--clrl-primary-tint);
  margin: 0 0 8px;
}

.clrl-status-strip dd {
  margin: 0;
  font-family: var(--clrl-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}

.clrl-status-strip dd.is-blocked { color: var(--clrl-signal-soft); }

.clrl-status-strip dd.is-note {
  font-family: var(--clrl-body-face);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
}

/* --- section frames ---------------------------------------------------- */

.clrl-sec--panel { background: var(--clrl-panel); }
.clrl-sec--surface { background: var(--clrl-surface); }
.clrl-sec--ink { background: var(--clrl-ink); color: #c9d3e4; }
.clrl-sec--primary { background: var(--clrl-primary); color: #fff; }

.clrl-pad { padding-top: clamp(34px, 5vw, 66px); padding-bottom: clamp(34px, 5vw, 66px); }
.clrl-pad--tight { padding-top: clamp(30px, 4vw, 52px); padding-bottom: clamp(30px, 4vw, 52px); }
.clrl-pad--band { padding-top: clamp(20px, 2.6vw, 30px); padding-bottom: clamp(20px, 2.6vw, 30px); }
.clrl-pad--wide { padding-top: clamp(38px, 5.5vw, 80px); padding-bottom: clamp(38px, 5.5vw, 80px); }
.clrl-pad--steps { padding-top: clamp(32px, 4.5vw, 60px); padding-bottom: clamp(32px, 4.5vw, 60px); }
.clrl-pad--strip { padding-top: clamp(22px, 3vw, 36px); padding-bottom: clamp(22px, 3vw, 36px); }

/* --- quick three entries ------------------------------------------------ */

.clrl-first-three-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin-bottom: clamp(18px, 2vw, 26px);
}

.clrl-first-three-head h2 {
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: 0.01em;
  margin: 0;
}

.clrl-tag-outline {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--clrl-mute);
  border: 2px solid var(--clrl-rule);
  padding: 5px 10px;
}

.clrl-first-three {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: clamp(14px, 2vw, 24px);
}

.clrl-entry-card {
  border-top: 5px solid var(--clrl-primary);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.clrl-entry-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.clrl-entry-index {
  font-family: var(--clrl-display);
  font-weight: 700;
  font-size: 46px;
  line-height: 0.8;
  color: var(--clrl-primary);
}

.clrl-entry-card h3 {
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.02em;
  margin: 0;
}

.clrl-entry-card h3 a { color: var(--clrl-ink); }
.clrl-entry-card h3 a:hover { color: var(--clrl-primary); }

.clrl-entry-card > p {
  margin: 0;
  font-size: 16px;
  color: var(--clrl-mute);
}

.clrl-blocked-chip {
  margin: auto 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--clrl-signal);
  display: inline-block;
  align-self: flex-start;
  padding: 5px 10px;
}

/* --- brand plate ------------------------------------------------------- */
/* Supplied operator artwork is light-on-dark, so the plate is ink. The logo
   itself is never recoloured or stretched — object-fit keeps its ratio. */

.clrl-plate {
  background: var(--clrl-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  width: 96px;
  height: 32px;
  flex: none;
}

.clrl-plate img { width: 100%; height: 100%; object-fit: contain; }

.clrl-plate--ledger { width: 104px; height: 34px; }

.clrl-plate--light {
  background: var(--clrl-panel);
  border: 1px solid var(--clrl-rule);
}

/* --- index band -------------------------------------------------------- */

.clrl-index-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: 14px;
}

.clrl-index-head h2 {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.06em;
  margin: 0;
  color: #fff;
}

.clrl-index-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--clrl-ink-mute);
}

.clrl-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  /* 40px rows with no row gap keep the band's pitch (was 30px + 8px gap)
     while giving each index link a full-size tap target. */
  gap: 0 clamp(18px, 3vw, 40px);
}

.clrl-index li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-width: 0;
}

.clrl-index span {
  font-family: var(--clrl-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--clrl-index-num);
  flex: none;
}

.clrl-index a {
  color: var(--clrl-index-link);
  font-size: 15px;
  font-weight: 500;
  min-height: 40px;
  display: flex;
  align-items: center;
}
.clrl-index a:hover { color: #fff; }

/* --- main comparison: ledger modules ----------------------------------- */

.clrl-ledger-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px clamp(24px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(20px, 3vw, 30px);
}

.clrl-ledger-head h2 {
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 0.94;
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
  min-width: 0;
}

.clrl-ledger-head p {
  margin: 0;
  color: var(--clrl-mute);
  font-size: 16.5px;
  min-width: 0;
}

.clrl-locked-note {
  background: var(--clrl-ink);
  color: #fff;
  margin: 0 0 clamp(14px, 2vw, 20px);
  padding: 14px clamp(14px, 2vw, 20px);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
  font-size: 15px;
}

.clrl-locked-note > span:first-child {
  font-family: var(--clrl-display);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clrl-signal-soft);
}

.clrl-locked-note > span:last-child { font-weight: 500; }

.clrl-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.clrl-module {
  background: var(--clrl-panel);
  border: 1px solid var(--clrl-rule);
  border-top: 5px solid var(--clrl-primary);
  min-width: 0;
}

.clrl-module-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  padding: 16px clamp(14px, 2vw, 20px);
  border-bottom: 1px solid var(--clrl-rule-fine);
}

.clrl-module-id {
  min-width: 0;
  flex: 1 1 130px;
}

.clrl-module-id h3 {
  font-weight: 600;
  font-size: 25px;
  letter-spacing: 0.02em;
  margin: 0;
}

.clrl-module-domain {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--clrl-mute);
  word-break: break-all;
}

.clrl-module-num {
  font-family: var(--clrl-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: var(--clrl-rule-dash);
  margin-left: auto;
}

.clrl-locked-band {
  margin: 0;
  background: var(--clrl-signal-tint);
  color: var(--clrl-signal-text);
  padding: 11px clamp(14px, 2vw, 20px);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  border-bottom: 1px solid var(--clrl-rule-fine);
}

.clrl-locked-band > span:first-child {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--clrl-mute);
}

/* The locked field records an absence of licence, not a prohibited value, so
   the design's strike-through (reserved for permitted/prohibited) is dropped.
   State is still carried by the word, not by colour alone. */
.clrl-locked-band > span:last-child {
  font-family: var(--clrl-display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* --- licensing notice --------------------------------------------------- */

.clrl-notice {
  background: var(--clrl-signal);
  color: #fff;
}

.clrl-notice-inner {
  max-width: var(--clrl-container);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 30px) var(--clrl-gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 10px clamp(24px, 4vw, 56px);
  align-items: start;
}

.clrl-notice h2 {
  font-weight: 700;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 0.98;
  margin: 0;
  color: #fff;
  min-width: 0;
  text-wrap: balance;
}

.clrl-notice p {
  margin: 0 0 10px;
  font-size: 16px;
  min-width: 0;
}
.clrl-notice p:last-child { margin-bottom: 0; }

.clrl-notice a { color: #fff; text-decoration: underline; }
.clrl-notice a:hover { color: #fff; }

.clrl-fields {
  margin: 0;
  padding: 16px clamp(14px, 2vw, 20px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 14px 20px;
}

.clrl-fields > div { min-width: 0; }

.clrl-fields dt {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--clrl-mute);
  margin-bottom: 5px;
}

.clrl-slot {
  margin: 0;
  font-size: 14px;
  color: var(--clrl-mute-2);
  border-bottom: 2px dashed var(--clrl-rule);
  padding-bottom: 4px;
}

.clrl-ledger-foot {
  margin: clamp(16px, 2vw, 22px) 0 0;
  font-size: 14.5px;
  color: var(--clrl-mute);
  max-width: 60em;
}

/* --- operator detail records ------------------------------------------- */

.clrl-records-head h2 {
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 0.94;
  margin: 0 0 12px;
}

.clrl-records-head p {
  margin: 0 0 clamp(24px, 4vw, 40px);
  max-width: 48em;
  color: var(--clrl-mute);
}

.clrl-record {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px clamp(24px, 4vw, 56px);
  padding: clamp(20px, 3vw, 30px) 0;
  border-top: 1px solid var(--clrl-rule);
}

.clrl-record:first-of-type { border-top: 2px solid var(--clrl-ink); }
.clrl-record:last-of-type { border-bottom: 2px solid var(--clrl-ink); }

.clrl-record-id { min-width: 0; }

.clrl-record-id h3 {
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}

.clrl-record-meta {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--clrl-primary);
}

.clrl-record-link {
  font-size: 14px;
  font-weight: 600;
  word-break: break-all;
}

.clrl-record-body {
  min-width: 0;
}

.clrl-record-body > p { margin: 0 0 16px; }
.clrl-record-body > p.is-second { color: var(--clrl-mute); font-size: 16px; }

.clrl-lobby-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clrl-lobby-strip img {
  width: 76px;
  height: 76px;
  object-fit: cover;
}

/* --- methodology ------------------------------------------------------- */

.clrl-method-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 28px;
  margin-bottom: clamp(22px, 3vw, 34px);
}

.clrl-method-head h2 {
  font-weight: 700;
  font-size: clamp(28px, 3.8vw, 46px);
  margin: 0;
  color: #fff;
}

.clrl-method-head p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--clrl-ink-mute);
}

.clrl-criteria {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 2px;
}

.clrl-criterion {
  background: var(--clrl-ink);
  box-shadow: 0 0 0 1px var(--clrl-ink-2);
  padding: clamp(16px, 2vw, 22px);
  min-width: 0;
}

.clrl-criterion > span {
  font-family: var(--clrl-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 0.85;
  color: var(--clrl-index-num);
  display: block;
  margin-bottom: 10px;
}

.clrl-criterion p { margin: 0; font-size: 15.5px; }

.clrl-criterion strong {
  font-family: var(--clrl-display);
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  text-wrap: balance;
}

/* --- explainer --------------------------------------------------------- */

.clrl-essay-head {
  border-left: 8px solid var(--clrl-primary);
  padding-left: clamp(16px, 2.4vw, 28px);
  margin-bottom: clamp(26px, 4vw, 42px);
}

.clrl-essay-head h2 {
  font-weight: 700;
  font-size: clamp(34px, 5.6vw, 74px);
  line-height: 0.9;
  margin: 0 0 12px;
  max-width: 22em;
  text-wrap: balance;
}

.clrl-essay-head p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--clrl-primary);
}

.clrl-essay {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(20px, 3vw, 54px);
}

.clrl-essay > div { min-width: 0; }
.clrl-essay p { margin: 0 0 18px; }
.clrl-essay p:last-child { margin-bottom: 0; }

/* --- three steps ------------------------------------------------------- */

.clrl-steps-head {
  font-weight: 700;
  font-size: clamp(28px, 4vw, 50px);
  margin: 0 0 clamp(20px, 3vw, 30px);
}

.clrl-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.clrl-step {
  background: var(--clrl-panel);
  padding: clamp(18px, 2.4vw, 26px);
  border-bottom: 6px solid var(--clrl-primary);
  min-width: 0;
}

.clrl-step > span {
  font-family: var(--clrl-display);
  font-weight: 700;
  font-size: clamp(56px, 7vw, 84px);
  line-height: 0.8;
  color: var(--clrl-primary);
  display: block;
  margin-bottom: 14px;
}

.clrl-step h3 {
  font-weight: 600;
  font-size: 25px;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  text-wrap: balance;
}

.clrl-step p { margin: 0; font-size: 16px; }

/* --- secondary comparison: method blocks ------------------------------- */

.clrl-methods-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 14px clamp(24px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(20px, 3vw, 30px);
}

.clrl-methods-head h2 {
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 54px);
  margin: 0;
  min-width: 0;
}

.clrl-methods-head p {
  margin: 0;
  color: var(--clrl-mute);
  font-size: 16px;
  min-width: 0;
}

.clrl-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}

.clrl-method-block {
  border: 1px solid var(--clrl-rule);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.clrl-status-cap {
  margin: 0;
  background: var(--clrl-primary);
  color: #fff;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
}

.clrl-method-block > div { padding: 16px 14px 18px; }

.clrl-method-block h3 {
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}

.clrl-method-block p:last-child { margin: 0; font-size: 16px; }

.clrl-method-block--prohibited {
  border-color: #f7c3d0;
  background: var(--clrl-signal-tint);
}

.clrl-method-block--prohibited .clrl-status-cap { background: var(--clrl-signal); }

/* --- FAQ --------------------------------------------------------------- */

.clrl-qa-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 24px;
  margin-bottom: clamp(18px, 2.4vw, 26px);
}

.clrl-qa-head h2 {
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 54px);
  margin: 0;
}

.clrl-qa-head p {
  margin: 0;
  color: var(--clrl-mute);
  font-size: 15px;
  font-weight: 600;
}

.clrl-qa {
  background: var(--clrl-panel);
  border: 1px solid var(--clrl-rule);
}

.clrl-qa details + details { border-top: 1px solid var(--clrl-rule-fine); }

.clrl-qa summary {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px clamp(12px, 1.6vw, 18px);
  min-height: 58px;
}
.clrl-qa summary:hover { background: #f2f5fa; }

.clrl-qtile {
  font-family: var(--clrl-display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: var(--clrl-primary);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.clrl-qa summary > span:nth-child(2) {
  flex: 1;
  font-weight: 600;
  font-size: 17px;
  color: var(--clrl-ink);
}

/* Disclosure glyph is CSS-only — the FAQ needs no JavaScript at all. */
.clrl-qa-mark {
  color: var(--clrl-primary);
  font-weight: 700;
  font-size: 20px;
  flex: none;
}

.clrl-qa-mark::before { content: "+"; }
.clrl-qa details[open] .clrl-qa-mark::before { content: "\2212"; }

.clrl-qa p {
  margin: 0;
  padding: 0 clamp(12px, 1.6vw, 18px) 18px 56px;
  font-size: 16px;
}

/* --- safer-use band ---------------------------------------------------- */

.clrl-safer-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px clamp(24px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(20px, 3vw, 28px);
}

.clrl-safer-head h2 {
  font-weight: 700;
  font-size: clamp(28px, 4vw, 50px);
  margin: 0;
  color: #fff;
  min-width: 0;
}

.clrl-safer-head p {
  margin: 0;
  font-size: 16.5px;
  color: var(--clrl-primary-tint-2);
  min-width: 0;
}

.clrl-safer-band {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 2px;
}

.clrl-safer-band li {
  background: var(--clrl-primary);
  box-shadow: 0 0 0 1px var(--clrl-on-primary-rule);
  padding: 16px 18px 20px;
  min-width: 0;
}

.clrl-safer-band li > p:first-child {
  font-family: var(--clrl-display);
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
  color: #fff;
}

.clrl-safer-band li > p:last-child {
  margin: 0;
  font-size: 15.5px;
  color: var(--clrl-primary-tint-2);
}

/* --- revision strip ---------------------------------------------------- */

.clrl-revision {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 10px clamp(24px, 4vw, 56px);
  align-items: start;
}

.clrl-revision h2 {
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.05em;
  margin: 0;
  min-width: 0;
}

.clrl-revision p {
  margin: 0;
  color: var(--clrl-mute);
  font-size: 16px;
  min-width: 0;
}

/* --- service pages / 404 ----------------------------------------------- */

.clrl-doc {
  background: var(--clrl-surface);
}

.clrl-doc-inner {
  max-width: var(--clrl-doc);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) var(--clrl-gutter);
}

.clrl-doc-flag {
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--clrl-primary);
  display: inline-block;
  padding: 6px 12px;
}

.clrl-doc h1 {
  font-weight: 700;
  font-size: clamp(38px, 7vw, 78px);
  line-height: 0.9;
  margin: 0 0 18px;
}

.clrl-doc-stand {
  font-size: 19px;
  margin: 0 0 28px;
  color: var(--clrl-body);
  max-width: 36em;
}

.clrl-clauses {
  background: var(--clrl-panel);
  border: 1px solid var(--clrl-rule);
  border-top: 5px solid var(--clrl-primary);
}

.clrl-clause {
  padding: 20px clamp(14px, 2vw, 24px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 8px clamp(20px, 3vw, 40px);
}

.clrl-clause + .clrl-clause { border-top: 1px solid var(--clrl-rule-fine); }

.clrl-clause h2 {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.05em;
  margin: 0;
  color: var(--clrl-primary);
  min-width: 0;
}

.clrl-clause-body {
  min-width: 0;
}

.clrl-clause-body p { margin: 0 0 12px; font-size: 16px; }
.clrl-clause-body p:last-child { margin-bottom: 0; }

.clrl-clause-body ul {
  margin: 0;
  padding-left: 18px;
  color: var(--clrl-mute);
  font-size: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.clrl-doc-back { margin: 26px 0 0; }
.clrl-doc-back a { font-size: 16px; font-weight: 600; }

.clrl-404 {
  max-width: var(--clrl-doc);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) var(--clrl-gutter);
}

.clrl-404-code {
  font-family: var(--clrl-display);
  font-weight: 700;
  font-size: clamp(80px, 20vw, 200px);
  line-height: 0.8;
  color: var(--clrl-primary);
  margin: 0 0 18px;
}

.clrl-404 h1 {
  font-weight: 700;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 0.94;
  margin: 0 0 18px;
}

.clrl-404 > p {
  font-size: 18px;
  margin: 0 0 26px;
  max-width: 34em;
}

.clrl-404 ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 2px;
  background: var(--clrl-rule);
}

.clrl-404 li { background: var(--clrl-panel); min-width: 0; }

.clrl-404 li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  min-height: 56px;
  font-family: var(--clrl-display);
  font-weight: 600;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.clrl-404 li a:hover { background: #f2f5fa; text-decoration: none; }

/* --- footer ------------------------------------------------------------ */

.clrl-footer {
  background: var(--clrl-ink);
  color: var(--clrl-foot-body);
}

.clrl-age-band { background: var(--clrl-signal); color: #fff; }

.clrl-age-band-inner {
  max-width: var(--clrl-container);
  margin: 0 auto;
  padding: 12px var(--clrl-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.clrl-age-mark {
  border: 2px solid #fff;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--clrl-display);
  font-weight: 700;
  font-size: 16px;
  flex: none;
}

.clrl-age-band p { margin: 0; font-size: 15px; font-weight: 600; }

.clrl-footer-grid {
  max-width: var(--clrl-container);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) var(--clrl-gutter) 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 26px clamp(24px, 4vw, 64px);
}

.clrl-footer-id {
  min-width: 0;
}

.clrl-footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.clrl-footer-logo span {
  font-family: var(--clrl-display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

.clrl-footer-id > p:first-of-type {
  margin: 0 0 14px;
  font-size: 16px;
  max-width: 34em;
}

.clrl-footer-reviewed {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--clrl-foot-mute);
}

.clrl-footer-col { min-width: 0; }

.clrl-footer-col > p:first-child {
  font-family: var(--clrl-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  margin: 0 0 12px;
}

.clrl-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 15.5px;
}

.clrl-footer-col ul a {
  color: var(--clrl-foot-link);
  display: flex;
  align-items: center;
  min-height: 40px;
}
.clrl-footer-col ul a:hover { color: #fff; }

.clrl-footer-col > p:last-child { margin: 0; font-size: 15.5px; }

.clrl-fine {
  border-top: 1px solid var(--clrl-ink-2);
}

.clrl-fine p {
  max-width: var(--clrl-container);
  margin: 0 auto;
  padding: 16px var(--clrl-gutter);
  font-size: 13px;
  color: var(--clrl-foot-mute);
}

/* --- touch targets ------------------------------------------------------ */
/* The design sets the module domain and the record link in 13–14px type. The
   hit area is expanded with a pseudo element so the tap target clears 44px
   without changing the module geometry. */

.clrl-module-domain a,
.clrl-record-link,
.clrl-entry-card h3 a { position: relative; }

.clrl-module-domain a::after,
.clrl-record-link::after,
.clrl-entry-card h3 a::after {
  content: "";
  position: absolute;
  inset: -14px -8px;
}

.clrl-entry-card h3 a::after { inset: -9px -8px; }

/* --- asymmetry: the span-2 text zone only exists once the grid has more
   than one column, so it can never force a second track at 360px ---------- */

@media (min-width: 900px) {
  .clrl-record-body,
  .clrl-clause-body,
  .clrl-footer-id { grid-column: span 2; }
  .clrl-revision p { grid-column: span 2; }
}

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