/* ==========================================================================
   CUI Move — global styles
   Edit brand colors, fonts and spacing in the :root token block below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, latin + latin-ext subsets)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-sans-3-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-sans-3-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --color-cui-purple: #3c1d58;
  --color-purple-tint: #f0ebf5;
  --color-action: var(--color-cui-purple);
  --color-ink: #102a2e;
  --color-paper: #f5f3ec;
  --color-green: #006b5e;
  --color-lime: #ddf45b;
  --color-white: #ffffff;
  --color-body: #334b50;
  --color-muted: #52676c;
  --color-border: #c5d3ce;

  /* Type */
  --font-heading: "Manrope", Arial, sans-serif;
  --font-body: "Source Sans 3", Arial, sans-serif;

  /* Layout */
  --content-width: 77.5rem;      /* 1240px */
  --gutter: clamp(1.25rem, 0.5rem + 2.6vw, 3rem);
  --grid-gap: 1.5rem;            /* 24px */
  --radius-button: 0.375rem;     /* 6px */
  --radius-panel: 0.5rem;        /* 8px */
  --space-section: clamp(3.5rem, 6vw, 6rem);
  --transition-control: 180ms ease;
  --chip-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 5h18.5l-4-4L16 0l6 6-6 6-1.5-1L18.5 7H0z'/%3E%3C/svg%3E");
  --header-height: 4.5rem;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: 1.125rem;   /* 18px */
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-ink);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-weight: 700;
  font-size: clamp(2.5rem, 1.2rem + 4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

h2 {
  font-weight: 700;
  font-size: clamp(1.875rem, 1rem + 2.2vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

h3 {
  font-weight: 600;
  font-size: clamp(1.3125rem, 1.05rem + 0.75vw, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-cui-purple); }

/* Links inside running paragraphs stay underlined. */
p a,
li a { text-decoration: underline; text-underline-offset: 0.15em; }

img, svg { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--color-cui-purple);
  outline-offset: 2px;
  border-radius: 2px;
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--color-cui-purple);
  color: var(--color-white);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-button);
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   4. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-section);
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.section--tint { background: var(--color-white); }

.section__intro { max-width: 40rem; }

.lede {
  font-size: 1.125rem;
  max-width: 34em;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 1rem;
}

.rule {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. Buttons and inline actions
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;              /* 48px */
  padding: 0.625rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-control), color var(--transition-control), border-color var(--transition-control);
}

.btn--primary {
  background: var(--color-action);
  color: var(--color-white);
  border-color: var(--color-action);
}
.btn--primary:hover {
  background: var(--color-white);
  color: var(--color-cui-purple);
}

.btn--secondary {
  background: transparent;
  color: var(--color-cui-purple);
  border-color: var(--color-cui-purple);
}
.btn--secondary:hover {
  background: var(--color-purple-tint);
}

.btn--on-dark {
  background: var(--color-white);
  color: var(--color-cui-purple);
  border-color: var(--color-white);
}
.btn--on-dark:hover {
  background: transparent;
  color: var(--color-white);
}
.btn--on-dark:focus-visible,
.on-dark :focus-visible { outline-color: var(--color-lime); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 3rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-cui-purple);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.text-link:hover { border-bottom-color: var(--color-cui-purple); }
.text-link svg { flex: none; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   6. Header and navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-height);
}

/* Logo lockup: inline mark + live text wordmark */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;           /* half of mark height */
  text-decoration: none;
  flex: none;
}
.logo__mark {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}
.logo__word {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.75rem;     /* 28px -> ~161px lockup */
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  white-space: nowrap;
}
.logo__word span { color: var(--color-cui-purple); }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  border-radius: var(--radius-button);
  border-bottom: 2px solid transparent;
  transition: color var(--transition-control), border-color var(--transition-control);
}
.site-nav__link:hover {
  color: var(--color-cui-purple);
  border-bottom-color: var(--color-cui-purple);
}
.site-nav__list .btn { margin-left: 0.5rem; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.5rem 0.875rem;
  background: transparent;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-button);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle svg { flex: none; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: inline-block; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(2.5rem, 5vw, 5rem) var(--space-section);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
/* A grid item defaults to a minimum size of its content, which lets a wide
   child push the track past the page. The illustration's control row is wide
   enough to do that on a small phone. */
.hero__grid > * { min-width: 0; }
.hero h1 { margin-bottom: 1.5rem; }
.hero__lede {
  font-size: 1.125rem;
  max-width: 32em;
  margin-bottom: 0;
}
.hero__formats {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-muted);
  max-width: 30em;
}

/* --------------------------------------------------------------------------
   8. Format-change illustration
   -------------------------------------------------------------------------- */
.flow {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: clamp(1.25rem, 3vw, 1.5rem);
}
.flow__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  align-items: start;
}
.flow__node {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.flow__art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8.5rem;
}
.flow__art svg { height: 100%; width: auto; }
.flow__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.35;
}
.flow__label small {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-muted);
}

.flow__link {
  position: relative;
  display: grid;
  place-items: center;
  height: 8.5rem;          /* matches .flow__art so the arrow centres on the shapes */
}
.flow__link .flow__arrow--vertical { display: none; }
.flow__tile {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
}
.flow__tile svg { width: 1.75rem; height: 1.75rem; }

/* Rotating examples ------------------------------------------------------- */
/* Every example sits in the same grid cell, so the panel height is the tallest
   of them and nothing moves as they change. Inactive ones use visibility
   rather than display: they keep their space, and stay out of the
   accessibility tree and the tab order. */
.flow__col {
  display: grid;
}
.flow__col > .flow__node {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-control);
}
.flow__col > .flow__node.is-active {
  opacity: 1;
  visibility: visible;
}

.flow__controls {
  display: flex;
  flex-wrap: wrap;   /* the pause control drops below the dots when space runs out */
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}
.flow__controls[hidden] { display: none; }

.flow__dots {
  display: flex;
  align-items: center;
}

/* A small dot with a full-size touch target around it. */
.flow__dot {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-button);
  cursor: pointer;
}
.flow__dot span {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-border);
  transition: background-color var(--transition-control),
              transform var(--transition-control);
}
.flow__dot:hover span { background: var(--color-muted); }
.flow__dot.is-active span {
  background: var(--color-cui-purple);
  transform: scale(1.4);
}

.flow__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  margin-left: auto;
  padding: 0.5rem 0.75rem;
  background: none;
  border: 0;
  border-radius: var(--radius-button);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.flow__play:hover { color: var(--color-cui-purple); }
.flow__play .flow__icon-play { display: none; }
.flow__play[data-paused="true"] .flow__icon-pause { display: none; }
.flow__play[data-paused="true"] .flow__icon-play { display: inline-block; }

/* --------------------------------------------------------------------------
   9. Service summary row
   -------------------------------------------------------------------------- */
.summary {
  border-block: 1px solid var(--color-border);
  padding-block: 2rem;
}
.summary__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.summary__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.35;
}
.summary__item svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--color-green);
}

/* --------------------------------------------------------------------------
   10. Problem section
   -------------------------------------------------------------------------- */
.problem__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.example {
  background: var(--color-purple-tint);
  border-radius: var(--radius-panel);
  padding: 1.5rem;
}
.example + .example { margin-top: 1.25rem; }
.example h3 {
  font-size: 1.3125rem;
  margin-bottom: 0.5rem;
  color: var(--color-cui-purple);
}
.example p { font-size: 1.125rem; }

/* --------------------------------------------------------------------------
   11. Formats table
   -------------------------------------------------------------------------- */
.formats__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2.5rem;
  text-align: left;
}
.formats__table caption {
  text-align: left;
  font-size: 0.875rem;
  color: var(--color-muted);
  padding-bottom: 0.75rem;
}
.formats__table th,
.formats__table td {
  padding: 1rem 1.25rem;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
  width: 50%;
}
.formats__table thead th {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: 2px solid var(--color-ink);
}
/* Input and output carry the same type weight; only the surface differs. */
.formats__table tbody th {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-ink);
  background: var(--color-purple-tint);
}
.formats__table tbody td {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-ink);
  background: var(--color-white);
}
.formats__note {
  margin-top: 1.5rem;
  font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   12. How it works — numbered steps
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  margin-top: 2.5rem;
  counter-reset: step;
  padding: 0;
  list-style: none;
}
.step { padding-top: 1.25rem; border-top: 2px solid var(--color-ink); }
.step__number {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--color-green);
  line-height: 1;
  margin-bottom: 0.75rem;
}
.step h3 { margin-bottom: 0.5rem; }
.step p { font-size: 1.125rem; }

.responsibility {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--color-cui-purple);
  background: var(--color-white);
  font-size: 1.125rem;
  color: var(--color-ink);
  max-width: 44em;
}

/* --------------------------------------------------------------------------
   12b. Fewer flows — two tracks of chips
   -------------------------------------------------------------------------- */
.tracks {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.5rem;
}

/* The do-it-yourself track and its branches read as one block; the rule and the
   space above the CUI Move track keep it from looking like a third branch. */
.track--ours {
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}

.track__title {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 1rem;
}
.track--ours .track__title { color: var(--color-cui-purple); }

.track__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2.25rem;   /* the horizontal gap is where the arrows sit */
  margin: 0;
  padding: 0;
  list-style: none;
  /* An arrow that lands at a wrap point would otherwise point into space and
     widen the page at narrow widths. Clip it at the edge of the track. */
  overflow: hidden;
}

/* The do-it-yourself path, shown one format at a time. Every example sits in
   the same grid cell, so the block is the height of the tallest and nothing
   below it moves as they change. Inactive ones use visibility rather than
   display: they keep their space, and stay out of the accessibility tree and
   the tab order. */
.track__scenes {
  display: grid;
}
.track__scene {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-control);
}
.track__scene.is-active {
  opacity: 1;
  visibility: visible;
}
.track__format {
  margin: 0 0 0.875rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
}

/* The dots and the pause control are the hero's, without its dividing rule —
   the track already sits above one. */
.track__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
}
.track__controls[hidden] { display: none; }
.track__controls .flow__play { margin-left: 0; }
.track__controls .flow__dots { gap: 0.25rem; }

/* The track's chooser carries the format it selects rather than an anonymous
   dot, so a visitor can jump to the one they care about. The selected state is
   an outline and a surface, not colour alone, and it is drawn with an inset
   shadow so picking one does not shift the row. */
.track__dot {
  color: var(--color-muted);
  transition: color var(--transition-control),
              box-shadow var(--transition-control);
}
.track__dot svg {
  width: 1.375rem;
  height: 1.375rem;
}
.track__dot:hover { color: var(--color-ink); }
.track__dot.is-active {
  color: var(--color-cui-purple);
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-cui-purple);
}

/* What the do-it-yourself track drags in with it. The rule on the left ties a
   branch to the track above rather than reading as a track of its own. */
.track__branch {
  margin-top: 1.5rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--color-border);
}
.track__subtitle {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 0.75rem;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-white);
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.3;
}

/* The arrow sits in the gap between two chips, not inside either of them, and
   is drawn rather than typed so screen readers do not announce it.

   Each chip carries the arrow that leads *into* it, never the one that leads
   out. At a wrap point that puts the stray arrow in the margin to the left of
   a line, where the track's overflow clips it, rather than dangling off the
   right-hand end pointing at nothing. */
.chip:not(:first-child)::before {
  content: "";
  position: absolute;
  right: calc(100% + 0.5rem);
  top: 50%;
  width: 1.25rem;
  height: 0.75rem;
  transform: translateY(-50%);
  background-color: var(--color-muted);
  -webkit-mask: var(--chip-arrow) no-repeat center / contain;
  mask: var(--chip-arrow) no-repeat center / contain;
}

/* Standing practices are not a sequence, so they carry no arrows and sit in a
   tighter row than a flow does. */
.track__list--plain { gap: 0.5rem; }
.track__list--plain .chip::before { content: none; }

.chip--end {
  border-style: dashed;
  background: none;
}

/* The track through CUI Move reads as the shorter, firmer path. */
.track--ours .chip {
  border-color: var(--color-cui-purple);
  color: var(--color-ink);
}
.track--ours .chip::before { background-color: var(--color-cui-purple); }

/* Listed after .track--ours .chip and matched with equal weight, so the white
   text is not cancelled by the rule above. */
.track--ours .chip--brand {
  background: var(--color-cui-purple);
  border-color: var(--color-cui-purple);
  color: var(--color-white);
  font-weight: 600;
}
.chip--brand svg { width: 1.125rem; height: 1.125rem; flex: none; }

.tracks__examples {
  margin-top: 2rem;
  font-size: 1.125rem;
  color: var(--color-ink);
  max-width: 44em;
}

@media (min-width: 900px) {
  .tracks { gap: 3rem; }
  .track--ours { padding-top: 3rem; }
}

/* --------------------------------------------------------------------------
   13. Security — purple surface
   -------------------------------------------------------------------------- */
.security {
  background: var(--color-cui-purple);
  color: var(--color-white);
}
.security h2,
.security h3 { color: var(--color-white); }
.security .lede { color: var(--color-white); }
.security__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 5rem);
  margin-top: 3rem;
}
.security__block h3 {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 1.375rem;
  margin-bottom: 0.625rem;
}
.security__block h3::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 0.25rem;
  background: var(--color-lime);
  border-radius: 1px;
  transform: translateY(-0.25em);
}
.security__block p {
  color: var(--color-white);
  font-size: 1.125rem;
  max-width: 34em;
}
.security__status {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   14. Pricing
   -------------------------------------------------------------------------- */
.pricing__panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
  margin-top: 2.5rem;
}
.panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-cui-purple);
  border-radius: var(--radius-panel);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.panel h3 { margin-bottom: 0; }
.panel p { font-size: 1.125rem; }
.panel .btn { margin-top: auto; align-self: flex-start; }
.pricing__note {
  margin-top: 1.75rem;
  font-size: 1rem;
  color: var(--color-muted);
  max-width: 46em;
}

/* --------------------------------------------------------------------------
   15. FAQ disclosures
   -------------------------------------------------------------------------- */
.faq__list {
  margin-top: 2.5rem;
  border-top: 1px solid var(--color-border);
  max-width: 52rem;
}
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 1rem 0;
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q {
  font: inherit;
  color: inherit;
  letter-spacing: -0.01em;
  margin: 0;
}
.faq__item summary:hover { color: var(--color-cui-purple); }
.faq__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-cui-purple);
  transition: transform var(--transition-control);
}
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__answer {
  padding: 0 0 1.5rem;
  max-width: 44em;
  font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   16. Contact — ink surface
   -------------------------------------------------------------------------- */
.contact {
  background: var(--color-ink);
  color: var(--color-white);
}
.contact h2 { color: var(--color-white); max-width: 16em; }
.contact__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact__lede {
  color: var(--color-white);
  font-size: 1.125rem;
  max-width: 34em;
}
.contact__mark {
  width: 3rem;
  height: 0.375rem;
  background: var(--color-lime);
  border-radius: 1px;
  margin-bottom: 1.75rem;
}
.contact__panel {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-panel);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.contact__panel h3 {
  color: var(--color-white);
  font-size: 1.1875rem;
  margin-bottom: 0.75rem;
}
.contact__status {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 1.25rem;
}
.contact__notice {
  font-size: 1rem;
  color: var(--color-white);
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-paper);
  padding-block: 3rem 2.5rem;
  border-top: 1px solid var(--color-border);
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem 3rem;
}
.site-footer__tagline {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  color: var(--color-muted);
  max-width: 22em;
}
.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-footer__nav a:hover {
  color: var(--color-cui-purple);
  border-bottom-color: var(--color-cui-purple);
}
.site-footer__legal {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 900px) and (max-width: 1199px) {
  /* Narrower text column between the mobile and full desktop layouts. */
  h1 { font-size: clamp(2.75rem, 1rem + 3.6vw, 3.5rem); }
}

@media (max-width: 1023px) {
  .summary__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 899px) {
  :root { --header-height: 4rem; }

  /* With JavaScript the navigation becomes a disclosure panel. Without it the
     links stay visible and the Menu button is not shown. */
  .js .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 12px 24px rgba(16, 42, 46, 0.08);
  }
  .js .site-nav.is-open { display: block; }
  .js .nav-toggle { display: inline-flex; }
  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    max-width: var(--content-width);
    margin-inline: auto;
  }
  .site-nav__list li { border-bottom: 1px solid var(--color-border); }
  .site-nav__list li:last-child { border-bottom: 0; }
  .site-nav__link {
    min-height: 3.25rem;
    padding-inline: 0;
    border-bottom: 0;
  }
  .site-nav__list .btn {
    margin-left: 0;
    margin-top: 1rem;
    width: 100%;
  }
  .site-header__inner { position: relative; }
  .site-nav__list { flex-wrap: wrap; }

  .logo__word { font-size: 1.5rem; }   /* 24px -> ~136px lockup */
  .logo__mark { width: 1.25rem; height: 1.25rem; }
  .logo { gap: 0.625rem; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: 2; }
  .problem__grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .security__grid { gap: 2rem; }
}

@media (max-width: 699px) {
  .summary__list { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 2rem; }
  .pricing__panels { grid-template-columns: 1fr; }
  .security__grid { grid-template-columns: 1fr; }

  .actions .btn { width: 100%; }
  .actions { gap: 0.75rem; }
  .text-link { justify-content: center; width: 100%; }

  /* Flow tracks reflow to a vertical sequence, the same way the hero
     illustration does. Side by side they would wrap into an unreadable zigzag
     at this width; stacked, the order is unambiguous. */
  .track__list {
    flex-direction: column;
    align-items: stretch;
    gap: 1.75rem 0;   /* the vertical gap is where the arrows sit */
  }
  .chip:not(:first-child)::before {
    right: auto;
    left: 1.125rem;
    top: auto;
    bottom: calc(100% + 0.5rem);
    transform: rotate(90deg);   /* the same arrow, pointing down the column */
  }
  /* Not a sequence, so no arrows and no room kept for them. */
  .track__list--plain { gap: 0.5rem; }
  .track--ours { padding-top: 2rem; }

  /* Illustration reflows to a vertical sequence; labels keep their size. */
  .flow__row { grid-template-columns: 1fr; gap: 0.5rem; }
  .flow__link { height: auto; }
  .flow__controls { margin-top: 1rem; }
  .flow__link .flow__arrow--horizontal { display: none; }
  .flow__link .flow__arrow--vertical { display: block; }

  /* Table becomes labelled input/output pairs. Explicit ARIA roles in the
     markup keep the table semantics when display is changed. */
  .formats__table,
  .formats__table tbody,
  .formats__table tr,
  .formats__table th,
  .formats__table td { display: block; width: 100%; }
  .formats__table thead { display: none; }
  .formats__table caption { display: block; }
  .formats__table tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    overflow: hidden;
    margin-bottom: 1rem;
  }
  .formats__table th,
  .formats__table td { border-bottom: 0; padding: 1rem 1.25rem; }
  .formats__table th::before,
  .formats__table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 0.25rem;
  }
  .formats__table td { border-top: 1px solid var(--color-border); }
}

/* --------------------------------------------------------------------------
   19. Motion and print preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* The examples stop rotating too — see assets/js/site.js. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   20. Blog
   Used by the generated pages under blog/. See tools/build_blog.py.
   -------------------------------------------------------------------------- */
.post-list {
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 48rem;
  border-top: 1px solid var(--color-border);
}

.post-list__item {
  padding-block: 2rem;
  border-bottom: 1px solid var(--color-border);
}

.post-list__date,
.article__date {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.post-list__title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.625rem;
}

.post-list__title a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.post-list__title a:hover {
  color: var(--color-cui-purple);
  border-bottom-color: var(--color-cui-purple);
}

.post-list__summary {
  margin: 0;
  max-width: 36em;
}

.post-list__empty {
  margin-top: 3rem;
  color: var(--color-muted);
}

/* Article ------------------------------------------------------------------ */
.article__back {
  margin: 0 0 2.5rem;
  font-size: 1rem;
  font-weight: 600;
}
.article__back a {
  color: var(--color-cui-purple);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.article__back a:hover { border-bottom-color: var(--color-cui-purple); }

/* ~65-70 characters of body text */
.article__header,
.article__body,
.article__footer { max-width: 40rem; }

.article__header { margin-bottom: 2.5rem; }
.article__header h1 {
  font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem);
  margin-bottom: 1rem;
}
.article__summary {
  color: var(--color-muted);
  margin: 0;
}

/* One vertical rhythm for the article column. Every top-level block starts at
   zero and the sibling rule owns the gaps. Keep these four rules together and
   in this order: a later `.article__body p { margin: 0 }` would outrank the
   sibling selector and silently flatten the spacing. */
.article__body > * { margin-block: 0; }
.article__body > * + * { margin-top: 1.5rem; }
.article__body > h2 { margin-top: 3rem; }
.article__body > h3 { margin-top: 2.25rem; }
.article__body > h2 + p,
.article__body > h3 + p { margin-top: 1rem; }
.article__body > hr.article__rule { margin-block: 2.5rem; }

.article__body h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.article__body h3 { font-size: 1.375rem; }

.article__body ul,
.article__body ol { padding-left: 1.5rem; }
.article__body li + li { margin-top: 0.5rem; }
.article__body li::marker { color: var(--color-green); }

.article__body a {
  color: var(--color-cui-purple);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.article__body blockquote {
  margin-inline: 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 4px solid var(--color-cui-purple);
  color: var(--color-ink);
}
.article__body blockquote p { margin: 0; }

.article__body img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
}

.article__body code {
  padding: 0.125em 0.375em;
  background: var(--color-purple-tint);
  border-radius: 4px;
  font-size: 0.9375em;
}

.article__body pre {
  padding: 1.25rem;
  background: var(--color-purple-tint);
  border-radius: var(--radius-panel);
  overflow-x: auto;   /* long lines scroll here, never the page */
}
.article__body pre code {
  padding: 0;
  background: none;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.article__rule {
  border: 0;
  border-top: 1px solid var(--color-border);
}

.article__footer {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
  font-size: 1.125rem;
}
.article__footer p { margin: 0; }
.article__footer a {
  color: var(--color-cui-purple);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (max-width: 699px) {
  .post-list__item { padding-block: 1.75rem; }
  .article__back { margin-bottom: 1.75rem; }
}

/* Contact address in the closing section. */
.contact__status a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}
.contact__status a:hover { color: var(--color-lime); }