/*
  The widgets page.

  Everything is inside `.clw`, and every class name starts `clw-`. The page lives inside
  WordPress, beneath a theme that has opinions about headings, lists and buttons, and this is
  what stops the two arguing. Nothing here styles a bare element outside `.clw`.

  There is ONE media query in the file, at the very bottom, and only one. Every column split is
  `repeat(auto-fit, minmax(min(N, 100%), 1fr))`, which collapses to one column when the space
  is not there. That is deliberate: a breakpoint is a number somebody has to maintain, and the
  old widget's faults were all breakpoints that stopped matching the content. Sizes that must
  change with the screen use `clamp()` instead. The one media query hides the jump nav on a
  phone, because "show nothing" is the one thing clamp cannot express.

  Tokens are C Level's, from the design sheet, with one addition: --clw-danger. The UX audit of
  27 August 2026 found the warning colour was the same value as the Terracotta accent a user can
  pick, so a warning about a colour was painted in the colour it warned about.
*/

.clw {
  --clw-ink: #3E4454;
  --clw-paper: #F4F8F9;
  --clw-teal: #005A69;
  --clw-lime: #CEF17B;
  --clw-aqua: #00EED2;

  /* A warning needs a colour nobody can choose as their accent. #B4562F was both the warning
     and the "Terracotta" swatch, so picking Terracotta made the contrast warning the same
     colour as the thing it was warning about. 6.6:1 on paper. */
  --clw-danger: #9E2B0E;

  /* Two line jobs, two tokens. --clw-line draws a decorative hairline: a divider, a card edge,
     a rule under a heading. --clw-line-control draws the EDGE OF A CONTROL, which the rules
     require to reach 3:1 against what is behind it. One token was doing both, at .25, which
     measured 1.54:1 — a white field on a white card that you could not see the edge of. */
  --clw-line: rgba(62, 68, 84, .16);
  --clw-line-control: rgba(62, 68, 84, .55);
  --clw-line-control-dark: rgba(244, 248, 249, .55);
  --clw-muted: rgba(62, 68, 84, .85);

  /* The two display sizes shrink on a narrow screen. At 390px the headline used to render at
     its full 48px, wrap to five lines and eat 252px of the first screen. */
  --clw-fs-1: clamp(1.875rem, 6vw, 3rem);
  --clw-fs-2: clamp(1.375rem, 4vw, 2rem);
  --clw-fs-3: 1.25rem;
  --clw-fs-4: 1rem;
  --clw-fs-5: .8125rem;
  /* The explanation layer under each control. 13px at 75% ink measured 4.58:1 against a
     required 4.5 — no headroom at all. 14px at 85% ink measures about 5.9:1. */
  --clw-fs-hint: .875rem;

  /* THREE line heights, not fourteen. Tight for a heading, body for a sentence, loose for
     something you read a paragraph of. The one exception is the h1, which is a display size
     and needs to sit tighter still. */
  --clw-lh-tight: 1.2;
  --clw-lh-body: 1.5;
  --clw-lh-loose: 1.6;

  /* One letter-spacing for the small-caps labels. The eyebrow was .12em and the control label
     .1em, which is the same component drawn two ways. */
  --clw-track-caps: .1em;

  /* The site header is fixed and 73px tall, so a jump link used to land its target 9px under
     it. 96px is the header plus a breathing gap. */
  --clw-anchor: 96px;

  --clw-s-0: 4px;
  --clw-s-1: 8px;
  --clw-s-2: 16px;
  --clw-s-3: 24px;
  --clw-s-4: 32px;
  --clw-s-5: 48px;
  --clw-s-6: 64px;
  --clw-s-7: 96px;

  /* ---- THE GRID. Five widths and one gutter. Nothing on this page invents its own. ----

     Every width below is 1120 minus a whole number of 32px gutters, so any mix of them lands on
     the same vertical lines. At 1440 those lines are 152, 536, 728, 920 and 1272.

       --clw-page      1120   the outer line. EVERY band's content starts here, coloured or not.
       --clw-measure    736   headings and running text. Long enough to read, short enough to scan.
       --clw-half       544   two-up: the builder, the two mockups, prose beside a panel.
       --clw-third      352   three-up: the presets, the reasons, the API steps.
       --clw-quarter    256   four-up: the facts strip under the hero.
       --clw-gutter      32   the ONLY gap between columns. Not 24 here and 64 there.

     A coloured band is full width, and its CONTENT still starts on the 1120 line. Before this
     was written down the two teal bands started at 184 and 200 while everything else started at
     152 — three left edges doing the same job, which is what makes a page feel assembled rather
     than designed. */
  --clw-page: 1120px;
  --clw-measure: 736px;
  --clw-half: 544px;
  --clw-third: 352px;
  --clw-quarter: 256px;
  --clw-gutter: 32px;

  --clw-radius: 2px;
  --clw-control: 48px;
  --clw-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color: var(--clw-ink);
  background: var(--clw-paper);
  font-family: "Epilogue", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--clw-fs-4);
  line-height: var(--clw-lh-loose);
  text-wrap: pretty;
}

/* Every jump link on this page points at a band, except "Custom builds available", which points
   at the tiers block inside a band. Both need the clearance. This is set here rather than as
   `scroll-padding-top` on <html>, because <html> belongs to the WordPress theme and this file
   never reaches outside `.clw`. */
.clw-band, .clw-options { scroll-margin-top: var(--clw-anchor); }

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

.clw a { color: var(--clw-teal); text-decoration: underline; text-underline-offset: 3px; }
.clw a:hover { color: var(--clw-ink); text-decoration-color: var(--clw-lime); text-decoration-thickness: 2px; }
.clw :focus-visible { outline: 2px solid var(--clw-teal); outline-offset: 2px; }
.clw input, .clw button, .clw select { font-family: inherit; }

.clw-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---- Bands and the column inside them ---- */

/* The side gutter closes to 20px on a phone. At 390px a 24px gutter, plus the theme's own,
   left 47px of empty page on each side — a quarter of the screen. */
.clw-band { padding: var(--clw-s-6) clamp(1.25rem, 4vw, var(--clw-s-4)) 0; }
.clw-band:last-child { padding-bottom: 0; }
.clw-wrap { max-width: var(--clw-page); margin: 0 auto; }

/* ---- Type ---- */

/* THE EYEBROW HAS ONE RULE: teal on the paper background, lime on a coloured band. It used to
   render in three colours — teal, lime, and 75% ink inside the mock browser bars — and the
   muted one read as a different component altogether. The -lime modifier stays for markup that
   asks for it, but the band now decides on its own. */
.clw-eyebrow {
  margin: 0;
  font-size: var(--clw-fs-5);
  font-weight: 700;
  letter-spacing: var(--clw-track-caps);
  text-transform: uppercase;
  color: var(--clw-teal);
}
.clw-eyebrow-lime,
.clw .clw-band-colour .clw-eyebrow { color: var(--clw-lime); }

/* The `#clw` on these two is not decoration. Measured at 390px, the h1 rendered at 48px, which
   the clamp below cannot produce at that width — so a WordPress theme rule of equal specificity
   was winning on load order and the page had no responsive headline at all. The id puts these
   beyond the reach of any theme class selector. */
#clw h1.clw-h1, #clw .clw-h1 {
  margin: 0;
  font-size: var(--clw-fs-1);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.025em;
}
#clw .clw-h2 {
  margin: 0 0 var(--clw-s-2);
  padding-top: var(--clw-s-3);
  border-top: 2px solid rgba(62, 68, 84, .18);
  font-size: var(--clw-fs-2);
  line-height: var(--clw-lh-tight);
  font-weight: 700;
  letter-spacing: -.02em;
  max-width: var(--clw-measure);
}
.clw .clw-h3 {
  margin: 0;
  font-size: var(--clw-fs-3);
  line-height: var(--clw-lh-tight);
  font-weight: 700;
}
.clw-lead { margin: 0; font-size: var(--clw-fs-3); line-height: var(--clw-lh-body); }
/* This was the only 18px on the page. One size used once is not a step in a scale. */
.clw-lead-small { margin: 0; font-size: var(--clw-fs-4); line-height: var(--clw-lh-body); }
.clw-sub { margin: 0 0 var(--clw-s-4); max-width: var(--clw-measure); }
/* 68ch, because these lines ran the full 1023px of the builder card — 164 characters of the
   smallest, lightest text on the page. */
.clw-hint {
  margin: 0;
  max-width: 68ch;
  font-size: var(--clw-fs-hint);
  line-height: var(--clw-lh-body);
  color: var(--clw-muted);
}
.clw-mono { font-family: var(--clw-mono); }

/* The margin is the theme's 20px leaking in, on a label that sits in a flex column whose gap
   already supplies the space. */
#clw .clw-label {
  display: block;
  margin: 0;
  font-size: var(--clw-fs-5);
  font-weight: 700;
  letter-spacing: var(--clw-track-caps);
  text-transform: uppercase;
  color: var(--clw-teal);
}
#clw .clw-label-row { display: flex; justify-content: space-between; gap: var(--clw-s-2); }
#clw .clw-label-lime { color: var(--clw-lime); }

/* ---- Buttons and links ---- */

.clw .clw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--clw-control);
  padding: var(--clw-s-1) var(--clw-s-4);
  font-size: var(--clw-fs-4);
  font-weight: 700;
  line-height: var(--clw-lh-tight);
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--clw-radius);
  cursor: pointer;
  /* Every button now eases between its states. The lime button used to flip instantly, which
     reads as the page glitching rather than as a hover. The reduced-motion block at the foot
     of this file switches this off for anyone who asks for it. */
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.clw .clw-btn-lime { color: var(--clw-ink); background: var(--clw-lime); }
/* The hover was #00EED2 — the Dark preset's cyan, which on a light page beside teal and lime
   reads as a different design system. An inversion of the button's own two colours says
   "you are on it" without introducing a third. */
.clw .clw-btn-lime:hover { color: var(--clw-lime); background: var(--clw-ink); }
.clw .clw-btn-teal { color: var(--clw-paper); background: var(--clw-teal); align-self: flex-start; }
.clw .clw-btn-teal:hover { color: var(--clw-paper); background: var(--clw-ink); }
.clw .clw-btn-ink { color: var(--clw-paper); background: var(--clw-ink); }
.clw .clw-btn-ink:hover { color: var(--clw-paper); background: var(--clw-teal); }
.clw .clw-btn-ghost {
  color: var(--clw-ink);
  background: transparent;
  /* This border IS the button — there is no fill behind it. At .28 it measured 1.61:1. */
  border-color: var(--clw-line-control);
}
.clw .clw-btn-ghost:hover { color: var(--clw-teal); border-color: var(--clw-teal); }

.clw-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--clw-s-2); }
.clw-cta-tight { margin-top: var(--clw-s-2); }

.clw .clw-inline {
  display: inline-flex;
  align-items: center;
  min-height: var(--clw-control);
  font-weight: 700;
}

.clw .clw-textbtn {
  min-height: 44px;
  padding: 0;
  font-size: var(--clw-fs-5);
  font-weight: 700;
  color: var(--clw-teal);
  background: transparent;
  border: 0;
  /* The theme rounds every button to 3px. The system uses 2px. */
  border-radius: var(--clw-radius);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.clw-links { display: flex; flex-wrap: wrap; gap: var(--clw-s-3); align-items: center; }

/* Both copy buttons swap their label to "Copied" for 1.6 seconds. "Copy embed code" shrank from
   215px to 125px doing it, and everything to the right of it jumped 90px left and back again.
   A floor under the width means the label changes and nothing moves. */
.clw [data-action^="copy"] { min-width: 13.5rem; }
.clw .clw-textbtn[data-action^="copy"] { min-width: 9rem; }

/* ---- Hero ---- */

/* The hero takes the same 64px top padding as every other band. It used to have its own
   clamp, which at a 1132px window resolved to 67.92px — so the hero sat 4px lower than the
   rest of the page for no reason anybody could name. */
.clw-hero { padding-top: var(--clw-s-6); }
/* Two-up, on the same lines as the builder, the mockups and the prose sections below.
   It used to have a 5vw gutter that opened to 64px, so the hero's columns were 528 while
   every other two-up on the page was 544 — the eye reads that as a wobble even when it
   cannot name it. */
.clw-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--clw-half), 100%), 1fr));
  gap: var(--clw-gutter);
  align-items: start;
}
.clw-hero-words { display: flex; flex-direction: column; gap: var(--clw-s-3); }
.clw-hero-widget { display: flex; flex-direction: column; gap: var(--clw-s-2); }

.clw-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--clw-quarter), 100%), 1fr));
  gap: var(--clw-gutter);
  /* 48px flat. The clamp resolved to 45.28px at a 1132px window — a spacing value that is on
     no scale and that nobody chose. */
  margin: var(--clw-s-5) auto 0;
  padding-top: var(--clw-s-3);
  border-top: 1px solid var(--clw-line);
}
.clw-facts div { display: flex; flex-direction: column; gap: var(--clw-s-0); }
.clw-facts dt {
  font-size: var(--clw-fs-5);
  font-weight: 700;
  letter-spacing: var(--clw-track-caps);
  text-transform: uppercase;
  color: var(--clw-muted);
}
.clw-facts dd { margin: 0; font-weight: 600; }
/* "Custom builds available" is a link on its own, not one inside a sentence, so it has to meet
   the 24x24 minimum target size. It was 17px tall. */
.clw-facts dd a { display: inline-flex; align-items: center; min-height: 24px; }

/* ---- Jump nav ---- */

.clw-jump {
  display: flex;
  flex-direction: column;
  gap: var(--clw-s-2);
  padding: clamp(var(--clw-s-3), 3vw, var(--clw-s-4));
  background: #fff;
  border: 1px solid var(--clw-line);
}
.clw-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--clw-s-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}
.clw-jump li { margin: 0; }
.clw-jump a { display: inline-flex; align-items: center; min-height: var(--clw-control); }

/* ---- Builder ---- */

.clw-builder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--clw-half), 100%), 1fr));
  gap: var(--clw-gutter);
  align-items: start;
}
.clw-panel {
  display: flex;
  flex-direction: column;
  gap: var(--clw-s-4);
  padding: clamp(var(--clw-s-3), 3vw, var(--clw-s-4));
  background: #fff;
  border: 1px solid var(--clw-line);
}
.clw-panel-tight { gap: var(--clw-s-2); }
.clw-panel-ink { background: var(--clw-ink); color: var(--clw-paper); gap: var(--clw-s-2); }
.clw-panel-ink .clw-h3 { color: var(--clw-paper); }

.clw-group { display: flex; flex-direction: column; gap: var(--clw-s-2); }
.clw-group-marked {
  padding: var(--clw-s-3);
  background: var(--clw-paper);
  border-left: 2px solid var(--clw-teal);
}
.clw-group-top { padding-top: var(--clw-s-3); border-top: 1px solid var(--clw-line); }
.clw-group-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--clw-s-3);
}

.clw-group input[type="text"] {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--clw-s-1);
  font-size: var(--clw-fs-4);
  color: var(--clw-ink);
  background: var(--clw-paper);
  border: 1.5px solid var(--clw-line-control);
  border-radius: var(--clw-radius);
}
.clw-group input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--clw-teal); }

/* Chips. Selection is fill AND weight AND a border, never colour alone. */
.clw-chips { display: flex; flex-wrap: wrap; gap: var(--clw-s-1); }
.clw .clw-chip {
  min-height: 44px;
  padding: 0 var(--clw-s-2);
  font-size: var(--clw-fs-5);
  font-weight: 700;
  white-space: nowrap;
  color: var(--clw-ink);
  background: #fff;
  border: 1.5px solid var(--clw-line-control);
  border-radius: var(--clw-radius);
  cursor: pointer;
}
.clw .clw-chip[aria-pressed="true"] {
  color: var(--clw-ink);
  background: var(--clw-lime);
  border-color: var(--clw-ink);
}
.clw-chips-dark .clw-chip {
  min-height: var(--clw-control);
  padding: 0 var(--clw-s-3);
  font-size: var(--clw-fs-4);
  color: var(--clw-paper);
  background: transparent;
  border-color: var(--clw-line-control-dark);
}
.clw-chips-dark .clw-chip[aria-pressed="true"] {
  color: var(--clw-ink);
  background: var(--clw-lime);
  border-color: var(--clw-lime);
}

/* Style thumbnails. */
.clw-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(92px, 100%), 1fr));
  gap: var(--clw-s-2);
}
.clw .clw-thumb {
  display: flex;
  flex-direction: column;
  gap: var(--clw-s-1);
  padding: var(--clw-s-1);
  background: #fff;
  border: 1px solid rgba(62, 68, 84, .2);
  border-radius: var(--clw-radius);
  cursor: pointer;
}
.clw .clw-thumb[aria-pressed="true"] { border: 2px solid var(--clw-teal); }
.clw-thumb-canvas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  height: 56px;
  padding: var(--clw-s-1);
}
.clw-thumb-canvas span { display: block; height: 5px; width: 100%; }
.clw-thumb-canvas span:last-child { height: 9px; width: 60%; margin-top: 2px; }
.clw-thumb-name { font-size: var(--clw-fs-5); font-weight: 700; }
.clw .clw-thumb[aria-pressed="true"] .clw-thumb-name { color: var(--clw-teal); }

/* Colour swatches. The tick, not the fill, is what says which one is chosen. */
.clw-swatches { display: flex; flex-wrap: wrap; gap: var(--clw-s-1); }
.clw .clw-swatch {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(62, 68, 84, .2);
  border-radius: var(--clw-radius);
  cursor: pointer;
}
.clw .clw-swatch[aria-pressed="true"] {
  border: 2px solid var(--clw-ink);
  box-shadow: inset 0 0 0 2px #fff;
}
.clw .clw-swatch[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 14px; top: 9px;
  width: 8px; height: 15px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  /* A dark outline behind the tick, so it survives a pale swatch. */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .9));
}
.clw-custom-colour { display: flex; flex-wrap: wrap; align-items: center; gap: var(--clw-s-2); }
.clw-custom-colour label { font-size: var(--clw-fs-5); font-weight: 600; color: var(--clw-muted); }
.clw-group .clw-custom-colour input[type="text"] {
  width: 130px;
  flex: none;
  min-height: 44px;
  padding: 0 var(--clw-s-1);
  font-family: var(--clw-mono);
  background: var(--clw-paper);
  border: 1.5px solid var(--clw-line-control);
  border-radius: var(--clw-radius);
  color: var(--clw-ink);
}
.clw-accent-preview {
  width: 24px; height: 24px;
  border-radius: var(--clw-radius);
  border: 1px solid rgba(62, 68, 84, .25);
}
/* Reported, never enforced. The failing state changes the weight and the words, not only the
   colour, so it survives being read by somebody who cannot see the colour change. */
.clw-contrast { margin: 0; font-size: var(--clw-fs-5); line-height: 1.5; color: var(--clw-muted); }
.clw-contrast[data-pass="false"] { font-weight: 700; color: var(--clw-warn); }

/* Toggle rows. */
.clw .clw-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--clw-s-2);
  width: 100%;
  min-height: 44px;
  padding: var(--clw-s-1) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--clw-ink);
}
.clw-toggle-track {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(62, 68, 84, .22);
  transition: background .15s ease;
}
.clw-toggle[aria-checked="true"] .clw-toggle-track { background: var(--clw-teal); }
.clw-toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: left .15s ease;
}
.clw-toggle[aria-checked="true"] .clw-toggle-knob { left: 21px; }
.clw-toggle-words { display: flex; flex-direction: column; gap: 2px; }
.clw-toggle-label { font-weight: 600; line-height: 1.35; }
.clw-toggle-note { font-size: var(--clw-fs-5); line-height: 1.4; color: var(--clw-muted); }

/* Advanced. */
.clw-advanced { border-top: 1px solid var(--clw-line); }
.clw-advanced summary {
  display: flex;
  align-items: baseline;
  gap: var(--clw-s-2);
  min-height: 44px;
  padding: var(--clw-s-2) 0;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.clw-advanced summary::-webkit-details-marker { display: none; }
.clw-advanced > .clw-group { margin-bottom: var(--clw-s-3); }
.clw-chev { display: inline-block; transition: transform .18s ease; color: var(--clw-teal); font-weight: 700; }
.clw details[open] > summary .clw-chev { transform: rotate(45deg); }
.clw-advanced-dark { border-top-color: rgba(244, 248, 249, .25); }
.clw-advanced-dark .clw-chev { color: var(--clw-lime); }

/* Preview column. */
.clw-preview { display: flex; flex-direction: column; gap: var(--clw-s-2); }
.clw-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--clw-s-2);
}
.clw-browser { border: 1px solid rgba(62, 68, 84, .18); background: #fff; }
.clw-browser-bar {
  display: flex;
  align-items: center;
  gap: var(--clw-s-2);
  padding: var(--clw-s-1) var(--clw-s-2);
  background: var(--clw-paper);
  border-bottom: 1px solid var(--clw-line);
}
.clw-dots { display: flex; gap: var(--clw-s-0); }
.clw-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(62, 68, 84, .25); }
.clw-address {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: var(--clw-s-0) var(--clw-s-1);
  font-family: var(--clw-mono);
  font-size: var(--clw-fs-5);
  color: var(--clw-muted);
  background: #fff;
  border: 1px solid var(--clw-line);
  border-radius: 999px;
}
.clw-stage {
  display: flex;
  justify-content: center;
  padding: clamp(var(--clw-s-3), 3vw, var(--clw-s-4));
  background: var(--clw-paper);
}
.clw-stage-bordered { border: 1px solid var(--clw-line); }
.clw-stage[data-dark="true"] { background: #1C202A; }

/* Where a widget goes. The height is set by the script from the widget's own message, so a
   frame is never taller than what is inside it. */
.clw-frame { width: 100%; }
.clw-frame iframe { display: block; width: 100%; border: 0; }
.clw-frame[data-device="mobile"] { max-width: 390px; }

/* ---- Embed band ---- */

/* A coloured band.
   The COLOUR runs the full width of the page; the CONTENT starts on the 1120 line, exactly
   where every uncoloured section starts.

   This used to be a padded box 1120 wide, so its words began 32px further in than the rest of
   the page — and the API band, which had more padding, began 48px in. Three left edges for the
   same job. A reader never measures them; they just feel that the page keeps shifting.

   The band paints itself edge to edge with a shadow rather than a background, because the
   section already carries the page's side padding and a negative margin would fight it. */
/* The band paints itself. The section is already the full width of the page, so it needs no
   negative margin and no `100vw` — and that matters, because `100vw` counts the scrollbar and
   put 8px of sideways scroll on the whole page the first time this was tried. */
.clw-band-colour {
  padding-top: var(--clw-s-6);
  padding-bottom: var(--clw-s-6);
  background: var(--clw-teal);
}
.clw-teal {
  display: flex;
  flex-direction: column;
  gap: var(--clw-s-3);
  color: var(--clw-paper);
}
.clw-teal-roomy { gap: var(--clw-s-4); }
.clw-teal .clw-h2 { border-top: 0; padding-top: 0; margin: 0; color: var(--clw-paper); }
.clw-teal a { color: var(--clw-lime); }
.clw-teal a:hover { color: var(--clw-aqua); text-decoration-color: var(--clw-aqua); }
.clw-teal :focus-visible { outline-color: var(--clw-lime); }
.clw-teal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--clw-s-2);
}
/* The heading takes the measure, like every other section heading. Left to itself in a flex row
   it shrank to the width of its own six words — 301px — which starts on the right line but is a
   width that matches nothing else on the page. */
.clw-teal-head .clw-h2 { flex: 1 1 auto; max-width: var(--clw-measure); }
.clw-teal-note { margin: 0; max-width: var(--clw-measure); color: rgba(244, 248, 249, .92); }
.clw-teal-detail { display: flex; flex-direction: column; gap: var(--clw-s-2); max-width: var(--clw-measure); padding-bottom: var(--clw-s-2); }
.clw-teal-detail p { margin: 0; color: rgba(244, 248, 249, .92); }

/* The snippet. Selectable text with a copy button, never a picture of code. */
.clw-code {
  margin: 0;
  padding: var(--clw-s-3);
  font-family: var(--clw-mono);
  font-size: var(--clw-fs-5);
  line-height: 1.7;
  color: var(--clw-paper);
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(244, 248, 249, .2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- Presets ---- */

/* Six presets, three and three. At 240px they laid out four across and left two orphans on a
   second row, which reads as a mistake rather than a choice. On the third line they make two
   complete rows. */
.clw-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--clw-third), 100%), 1fr));
  gap: var(--clw-gutter);
  margin-bottom: var(--clw-s-4);
}
.clw .clw-preset {
  display: flex;
  align-items: center;
  gap: var(--clw-s-2);
  padding: var(--clw-s-2);
  background: #fff;
  border: 1px solid var(--clw-line);
  border-radius: var(--clw-radius);
  cursor: pointer;
  text-align: left;
}
.clw .clw-preset[aria-pressed="true"] { border: 2px solid var(--clw-teal); }
.clw-preset-canvas {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 56px;
  height: 48px;
  padding: var(--clw-s-0);
}
.clw-preset-canvas span { display: block; height: 4px; width: 100%; }
.clw-preset-canvas span:last-child { height: 8px; width: 60%; margin-top: 2px; }
.clw-preset-words { display: flex; flex-direction: column; gap: var(--clw-s-0); }
.clw-preset-name { font-weight: 700; line-height: 1.3; }
.clw .clw-preset[aria-pressed="true"] .clw-preset-name { color: var(--clw-teal); }
.clw-preset-for { font-size: var(--clw-fs-5); line-height: 1.4; color: var(--clw-muted); }

/* ---- In context ---- */

.clw-context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--clw-half), 100%), 1fr));
  gap: var(--clw-gutter);
  align-items: start;
}
.clw-context-side { display: flex; flex-direction: column; gap: var(--clw-s-4); }
.clw-mock { background: #fff; border: 1px solid rgba(62, 68, 84, .18); }
.clw-mock-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clw-s-2);
  padding: var(--clw-s-1) var(--clw-s-2);
  background: var(--clw-paper);
  border-bottom: 1px solid var(--clw-line);
}
.clw-mock-bar .clw-eyebrow { color: var(--clw-muted); }
/* The fake address in the mock bar, and the short technical lines in the API band.
   Both are long unbroken strings, and at 320px they were the only thing pushing the page
   sideways — 16px of it. They are decoration, so they may be cut; the words beside them are
   what carries the meaning. */
.clw-mock-url {
  font-size: var(--clw-fs-5);
  color: var(--clw-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clw-mock-bar > * { min-width: 0; }
.clw-mock-body {
  display: flex;
  flex-direction: column;
  gap: var(--clw-s-3);
  padding: clamp(var(--clw-s-3), 3vw, var(--clw-s-4));
}
.clw-mock-body p { margin: 0; }
.clw-mock-title {
  font-size: clamp(1.25rem, 3.4vw, 2rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
}
.clw-mock-title-small { font-size: var(--clw-fs-3); letter-spacing: 0; }
.clw-mock-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--clw-s-3);
}
.clw-mock-split > div { display: flex; flex-direction: column; gap: var(--clw-s-2); }
.clw-pullquote {
  margin: 0;
  padding-left: var(--clw-s-2);
  border-left: 2px solid var(--clw-teal);
}

/* ---- Reasons ---- */

/* Four reasons, four across. At 304px three fitted and the fourth sat alone on its own row,
   which made a set of four equal statements look like three and an afterthought. */
.clw-reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--clw-quarter), 100%), 1fr));
  gap: var(--clw-gutter);
}
.clw-reasons > div {
  display: flex;
  flex-direction: column;
  gap: var(--clw-s-1);
  padding-top: var(--clw-s-2);
  border-top: 2px solid var(--clw-teal);
}
.clw-reasons p { margin: 0; }
.clw-reason-title { font-size: var(--clw-fs-3); line-height: 1.3; font-weight: 700; }

/* ---- Two-column prose sections ---- */

.clw-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--clw-half), 100%), 1fr));
  gap: var(--clw-gutter);
  align-items: start;
}
.clw-prose { display: flex; flex-direction: column; gap: var(--clw-s-2); max-width: var(--clw-half); }
.clw-prose p { margin: 0; }
.clw-prose .clw-group-top { gap: var(--clw-s-2); }

.clw-linklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.clw-linklist li { border-bottom: 1px solid var(--clw-line); }
.clw-linklist li:last-child { border-bottom: 0; }
.clw-linklist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clw-s-2);
  min-height: var(--clw-control);
  font-weight: 600;
  text-decoration: none;
}
.clw-linklist a:hover { text-decoration: underline; }

.clw-deflist {
  display: grid;
  grid-template-columns: minmax(0, max-content) 1fr;
  gap: var(--clw-s-1) var(--clw-s-2);
  margin: 0;
  line-height: 1.5;
}
.clw-deflist dt { font-weight: 700; color: var(--clw-teal); }
.clw-deflist dd { margin: 0; }

.clw-tiers { display: flex; flex-direction: column; gap: var(--clw-s-3); }
.clw-tiers p { margin: 0; }

/* ---- API steps ---- */

.clw-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--clw-third), 100%), 1fr));
  gap: var(--clw-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}
.clw-steps li {
  display: flex;
  flex-direction: column;
  gap: var(--clw-s-0);
  padding: var(--clw-s-2);
  border: 1px solid rgba(244, 248, 249, .35);
}
.clw-step-mid { background: rgba(0, 0, 0, .22); }
.clw-step-n {
  font-size: var(--clw-fs-5);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--clw-aqua);
}
.clw-step-t { font-weight: 600; }
.clw-steps .clw-mono {
  font-size: var(--clw-fs-5);
  color: rgba(244, 248, 249, .75);
  overflow-wrap: anywhere;
}

/* ---- FAQ ----
   The question is an h3 inside the summary, so it folds AND appears in an outline. */

.clw-faqs { max-width: var(--clw-measure); border-bottom: 1px solid rgba(62, 68, 84, .18); }
.clw-faqs details { border-top: 1px solid rgba(62, 68, 84, .18); }
.clw-faqs summary {
  display: flex;
  align-items: baseline;
  gap: var(--clw-s-2);
  padding: var(--clw-s-2) 0;
  list-style: none;
  cursor: pointer;
}
.clw-faqs summary::-webkit-details-marker { display: none; }
.clw-faqs summary h3 {
  margin: 0;
  font-size: var(--clw-fs-3);
  line-height: 1.35;
  font-weight: 600;
}
.clw-faqs details > div {
  display: flex;
  flex-direction: column;
  gap: var(--clw-s-2);
  padding: 0 0 var(--clw-s-3) var(--clw-s-3);
}
.clw-faqs details > div p { margin: 0; }

/* ---- Closing ---- */

/* Already full width with its content on the 1120 line, which is what the two teal bands now
   do as well. Left here as the pattern the others were made to match. */
.clw-closing {
  margin-top: var(--clw-s-7);
  padding: clamp(var(--clw-s-5), 6vw, var(--clw-s-6)) clamp(var(--clw-s-3), 4vw, var(--clw-s-4));
  background: var(--clw-lime);
}
/* Two-up, like every other two-up. It was a flex row, so the words shrank to whatever was
   left over — 495px, a width that appears nowhere else on the page. */
.clw-closing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--clw-half), 100%), 1fr));
  gap: var(--clw-gutter);
  align-items: end;
}
.clw-closing .clw-h2 { border-top: 0; padding-top: 0; margin: 0 0 var(--clw-s-1); }
.clw-closing-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--clw-s-2); }
.clw-closing a.clw-inline { color: var(--clw-ink); }

@media (prefers-reduced-motion: reduce) {
  .clw * { transition: none !important; }
}

/* ---- What it costs: three options, one row ----

   This block replaced four sections — "What does the free widget include?", the custom build
   card, the white label card and a whole teal band for the API. Four pieces of furniture
   answering one question: what does this cost me, and what if I want more than the free one.

   Three cards on the third line (352px each), so they sit on the same vertical lines as the
   presets and the reasons above them. They collapse to one column on a narrow screen like every
   other grid on this page, with no breakpoint to maintain. */
.clw-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--clw-third), 100%), 1fr));
  gap: var(--clw-gutter);
  align-items: stretch;
}
.clw-option {
  display: flex;
  flex-direction: column;
  gap: var(--clw-s-2);
  padding: clamp(var(--clw-s-3), 3vw, var(--clw-s-4));
  background: #fff;
  border: 1px solid var(--clw-line);
}
/* The action sits on the floor of the card whatever the words above it do, so three cards of
   different lengths still line their buttons up. */
.clw-option .clw-btn { margin-top: auto; align-self: flex-start; }
.clw-option p { margin: 0; }

/* Two of the three are filled, so the eye reads them as a set of three choices rather than one
   card and two notes. Ink for the white-label build, teal for the API — the same two colours
   the page already uses for those two things. */
.clw-option-ink { background: var(--clw-ink); color: var(--clw-paper); border-color: var(--clw-ink); }
.clw-option-teal { background: var(--clw-teal); color: var(--clw-paper); border-color: var(--clw-teal); }
.clw-option-ink .clw-h3, .clw-option-teal .clw-h3 { color: var(--clw-paper); }
.clw-option-ink a:not(.clw-btn), .clw-option-teal a:not(.clw-btn) { color: var(--clw-lime); }
.clw-option-ink :focus-visible, .clw-option-teal :focus-visible { outline-color: var(--clw-lime); }