/* Commitscale, the public page: John's homepage v2 from Claude Design
   (ADR 76). Plain CSS, no build step. It is served under
   `default-src 'self'; script-src 'self'`, so nothing here loads from
   another site. The page's markup uses classes only; the two scripts,
   motion.js and page.js, set a few styles as they animate.

   The brand (ADRs 57, 70, and 75): the Charter in ink and a lighter Petrol,
   and the wordmark in its own font. Type: Atkinson Hyperlegible Next for
   display and text, and Atkinson Hyperlegible Mono for anything a machine
   says, the same as the web app. Both are variable, 200 to 800, under the
   SIL Open Font License; licences are in fonts/. Latin, Latin Extended, and
   the italic are separate files, and the page loads each only when it shows
   text that needs it. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-italic-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  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: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-italic-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  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: "Atkinson Hyperlegible Mono";
  src: url("fonts/atkinson-hyperlegible-mono-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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: "Atkinson Hyperlegible Mono";
  src: url("fonts/atkinson-hyperlegible-mono-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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;
}

/* The wordmark's font (ADR 70): Schibsted Grotesk Bold cut down to the
   letters of "Commitscale", 1.6 kB, built in brand/font. It blocks rather
   than swaps, because a fallback font would draw a different wordmark. */
@font-face {
  font-family: "Commitscale Wordmark";
  src: url("fonts/commitscale-wordmark.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* ---- Tokens: light, then dark by the system's setting. The site's own
   names, plus the web app's for the product mockup. */

:root {
  color-scheme: light dark;
  --ground: #f0f4f4;
  --sheet: #fbfdfd;
  --paper: #ffffff;
  --paper-edge: rgb(15 26 29 / 5%);
  --sheet-2: #f4f8f8;
  --ink: #0f1a1d;
  --ink-2: #2f3f43;
  --muted: #52646a;
  --rule: #d9e2e3;
  --rule-soft: #e3eaec;
  --rule-strong: #b4c3c6;
  --seal: #0d4655;
  --seal-hover: #0b3e4b;
  --seal-ink: #fbfdfd;
  --seal-soft: #dde8ea;
  --seal-text: #0d4655;
  --mark-left: #082830;
  --mark-right: #3d7f91;
  --pass: #0e7a4a;
  --pass-soft: #e0f2e8;
  --build: #8a5300;
  --build-soft: #fbeed5;
  --void: #bf2530;
  --void-soft: #fcebec;
  --info: #1f5fbf;
  --info-soft: #e7effd;
  --violet: #6a3fc8;
  --violet-soft: #f0eafd;
  --band: #0d4655;
  --band-ink: #fbfdfd;
  --band-ink-2: #cfe0e5;
  --deep: #0f1a1d;
  --focus: #0d4655;
  --lift: 0 1px 0 rgb(15 26 29 / 4%), 0 24px 48px -28px rgb(15 26 29 / 35%);
  /* The web app's, for the inbox mockup. */
  --bg: #f0f4f4;
  --surface: #fbfdfd;
  --surface-3: #e3eaeb;
  --faint: #5f7074;
  --line: #d9e2e3;
  --accent-text: #0d4655;
  --good: #137a47;
  --good-soft: #e3f4ea;
  --warn: #8f5a00;
  --warn-soft: #fcf1d8;
  --neutral-soft: #e6edee;
  --shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 1px 3px rgb(16 24 40 / 6%);
  --radius: 10px;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* On a phone held sideways, the gutters also clear the notch, while the
     bands still run to the screen's edges (viewport-fit=cover). */
  --gutter: max(clamp(16px, 3vw, 40px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --indent: clamp(24px, 3vw, 40px);
  /* What a tap flashes on a touch screen. */
  --tap: rgb(13 70 85 / 14%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b1113;
    --sheet: #121a1d;
    --paper: #1a2428;
    --paper-edge: rgb(255 255 255 / 7%);
    --sheet-2: #161f23;
    --ink: #e2ebed;
    --ink-2: #bccacd;
    --muted: #90a2a6;
    --rule: #1f2d31;
    --rule-soft: #1c272b;
    --rule-strong: #38484d;
    --seal: #86b6c6;
    --seal-hover: #9ec5d2;
    --seal-ink: #0b1113;
    --seal-soft: #1c2f35;
    --seal-text: #8fbccb;
    --mark-left: #e2ebed;
    --mark-right: #86b6c6;
    --pass: #53d094;
    --pass-soft: #11301f;
    --build: #eab85f;
    --build-soft: #2e2512;
    --void: #ff7d77;
    --void-soft: #34171b;
    --info: #80b0ff;
    --info-soft: #122138;
    --violet: #b59cff;
    --violet-soft: #211939;
    --band: #0e3440;
    --band-ink: #eef5f6;
    --band-ink-2: #bcd5dc;
    --deep: #060a0b;
    --focus: #8fbccb;
    --lift: 0 1px 0 rgb(0 0 0 / 30%);
    --bg: #0b1113;
    --surface: #121a1d;
    --surface-3: #1d292d;
    --faint: #7a8c90;
    --line: #1f2d31;
    --accent-text: #8fbccb;
    --good: #4cc98a;
    --good-soft: #0f261b;
    --warn: #e6b45a;
    --warn-soft: #2a2110;
    --neutral-soft: #1a2528;
    --shadow: none;
    --tap: rgb(134 182 198 / 22%);
  }
}

/* ---- Base */

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

html {
  /* The viewport also clips the hero's full-bleed scene. */
  overflow-x: clip;
  scroll-padding-top: calc(80px + env(safe-area-inset-top, 0px));
  /* A phone held sideways keeps the page's type sizes. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--seal-text);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

a,
button,
summary {
  -webkit-tap-highlight-color: var(--tap);
}

h1,
h2,
h3,
p,
ol,
ul {
  margin: 0;
}

code {
  font-family: var(--mono);
}

img,
svg {
  display: block;
}

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

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

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 40;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  background: var(--ink);
  color: var(--ground);
  font-weight: 700;
}

.skip:focus {
  top: 1rem;
}

.mono {
  font-family: var(--mono);
}

/* ---- The brand (ADRs 57, 70, and 75). The mark is 1.75 cap heights tall,
   centred on the caps, with one cap height to the name. The font draws the
   i's square dot; .wordmark-i colours what lies above the stem. */

.mark {
  flex: none;
}

.mark-left {
  fill: var(--mark-left);
}

.mark-right {
  fill: var(--mark-right);
}

.wordmark {
  display: block;
  flex: none;
  margin: 0 -0.0146em 0 -0.0337em;
  color: var(--ink);
  font-family: "Commitscale Wordmark";
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-kerning: normal;
  font-variant-ligatures: none;
  white-space: nowrap;
}

.wordmark-i {
  background: linear-gradient(var(--mark-right) 0 0.293em, currentColor 0.293em);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Buttons */

.button {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 8px;
  background: var(--seal);
  color: var(--seal-ink);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.2s,
    transform 0.2s;
}

.button:hover {
  background: var(--seal-hover);
  transform: translateY(-1px);
}

.button-small {
  min-height: 40px;
  padding: 0 16px;
  font-size: 15px;
}

.button-small:hover {
  transform: none;
}

/* The hero's button has a little depth: a light top edge, a petrol shadow
   that grows on hover, and a press. Its arrow slides on hover. */
.hero .button {
  gap: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--seal) 88%, white) 0%, var(--seal) 55%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 18%),
    0 1px 2px rgb(15 26 29 / 20%),
    0 8px 20px -10px color-mix(in srgb, var(--seal) 70%, transparent);
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    filter 0.15s;
}

.hero .button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 18%),
    0 2px 4px rgb(15 26 29 / 20%),
    0 14px 28px -12px color-mix(in srgb, var(--seal) 75%, transparent);
}

.hero .button:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    0 1px 1px rgb(15 26 29 / 25%);
}

.button-arrow {
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.button:hover .button-arrow {
  transform: translateX(4px);
}

.text-link {
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
}

/* ---- Masthead */

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.masthead-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--ink);
  text-decoration: none;
}

.brand .wordmark {
  font-size: 22.756px;
}

.masthead-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.masthead-nav[hidden] {
  display: none;
}

.masthead-nav a {
  color: var(--ink-2);
  text-decoration: none;
}

.masthead-nav a:hover {
  color: var(--ink);
}

.masthead-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: none;
  margin-left: auto;
}

.masthead-actions .sign-in {
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

/* ---- Sections: a rail down the left, with a dot for each section */

.band {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--sheet);
}

.wrap {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(72px, 9vw, 120px) var(--gutter);
}

.rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gutter) + 5px);
  width: 2px;
  background: var(--rule);
}

.rail-dot {
  position: absolute;
  left: -2px;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  background: var(--seal);
}

.indent {
  padding-left: var(--indent);
}

/* Each section's heading carries its dot on the rail, centred on the
   heading's first line. */
.section-title,
.hero h1 {
  position: relative;
}

.section-title::before,
.hero h1::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--indent));
  top: 0.52em;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  border: 2px solid var(--seal);
  background: var(--ground);
}

.band .section-title::before {
  background: var(--sheet);
}

.section-title {
  font-weight: 700;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  align-items: end;
  justify-content: space-between;
}

.section-lede {
  max-width: 26em;
  font-size: 18px;
  color: var(--ink-2);
  text-wrap: pretty;
}

.frame {
  margin-top: clamp(36px, 4vw, 56px);
}

/* ---- Code behind every page, seen only around the pointer (ADR 314).
   code.js adds the layer, sets the circle's centre, and turns it on. It
   sits over the sections' backgrounds; .wrap, .hero-inner and .colophon
   lift their content over it. */

.site-code {
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.6s;
  --mx: 50%;
  --my: 50%;
  -webkit-mask-image: radial-gradient(circle 220px at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 100%);
  mask-image: radial-gradient(circle 220px at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 100%);
}

.site-code.on {
  opacity: 0.3;
}

.site-code pre {
  height: 100%;
  margin: 0;
  padding: 24px var(--gutter);
  column-width: 26em;
  column-gap: 56px;
  column-fill: auto;
  font: 13px / 1.75 var(--mono);
  color: var(--mark-right);
  white-space: pre;
}

/* ---- Hero */

.hero {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--gutter) clamp(64px, 8vw, 112px);
}

.hero .rail {
  top: calc(clamp(56px, 8vw, 104px) + 0.49 * clamp(44px, 6.2vw, 84px));
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(48px, 6vw, 80px);
}

.hero-stage {
  position: relative;
}

.hero-ambient {
  position: absolute;
  z-index: 0;
  /* Starts 64px above the hero's padding, where an eyebrow once
     stood, so the scene's lines keep clear of the headline. */
  top: calc(-1 * clamp(56px, 8vw, 104px) - 64px);
  bottom: -24px;
  left: calc(50% - 50vw);
  width: 100vw;
  pointer-events: none;
  /* On top of the scene's own fade: the lines stay faint behind the
     headline and its lede, and sharpen only towards the right. */
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.08) 0, rgb(0 0 0 / 0.2) 45%, #000 80%);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.08) 0, rgb(0 0 0 / 0.2) 45%, #000 80%);
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 880px;
}

.hero h1::before {
  top: 0.49em;
  border: 0;
  background: var(--seal);
}

.hero h1 {
  font-weight: 750;
  font-size: clamp(44px, 6.2vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* "Safely." carries the promise, so it gets the one mark in the headline:
   a highlighter's band behind the lower half of the word, swept in once
   the headline has arrived. */
.hero-safely {
  padding: 0 0.06em;
  background: linear-gradient(var(--seal-soft), var(--seal-soft)) no-repeat 0 72% / 100% 38%;
}

.hero-lede {
  margin-top: 28px;
  max-width: 32em;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* The lede's three ideas stand out for a skimmer. */
.hero-lede b {
  color: var(--ink);
  font-weight: 650;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
}

.works-with {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 44px;
}

.works-with-label {
  font: 600 13px/1.2 var(--mono);
  color: var(--muted);
}

.agent-logos {
  display: flex;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.agent-logo {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fbfdfd;
  border: 1px solid #d9e2e3;
  transition: transform 0.2s;
}

.agent-logo:hover {
  transform: translateY(-2px);
}

.agent-logo img {
  width: 20px;
  height: 20px;
}

.works-with-more {
  font-size: 14px;
  color: var(--muted);
}

.live-card {
  margin: 0;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--lift);
  overflow: hidden;
}

.live-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule-soft);
}

.card-label {
  font: 600 13px/1.3 var(--mono);
  color: var(--muted);
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--violet);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--violet);
}

.live-body {
  padding: clamp(20px, 3vw, 36px);
}

/* Before the script runs, and without it, the two lanes as they stand. */
.triage-static {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.triage-lane {
  padding: 16px 18px;
  border-radius: 12px;
}

.triage-lane.merged {
  background: var(--violet-soft);
  color: var(--violet);
}

.triage-lane.waiting {
  background: var(--build-soft);
  color: var(--build);
}

.triage-lane p {
  font-weight: 700;
  font-size: 16px;
}

.triage-lane ul {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
  font: 500 14px/1.35 var(--mono);
  color: var(--ink);
}

/* ---- Why */

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
}

.why-grid > div {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}

.icon-tile {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--seal-soft);
  color: var(--seal-text);
}

.why-grid h3 {
  margin-top: 18px;
  font-size: 21px;
  line-height: 1.25;
}

.why-grid p {
  margin-top: 10px;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* A heading can step part of itself back a shade, such as the hero's
   middle, and a lede marks the ideas a skimmer should take away. */
.title-soft {
  color: color-mix(in srgb, var(--ink) 62%, var(--ground));
}

.section-lede b {
  color: var(--ink);
  font-weight: 650;
}

/* Cards that each take a colour of their own. On hover, a card's top rule
   draws across in it, and its tile fills. The problems are a warning, a
   check, a question, and independence; the rules' points are Trusted's blue,
   risk's amber, and the lock's petrol. */
.toned > div {
  position: relative;
}

.problems > div:nth-child(1) {
  --tone: var(--build);
  --tone-soft: var(--build-soft);
}

.problems > div:nth-child(2) {
  --tone: var(--pass);
  --tone-soft: var(--pass-soft);
}

.problems > div:nth-child(3) {
  --tone: var(--info);
  --tone-soft: var(--info-soft);
}

.problems > div:nth-child(4) {
  --tone: var(--violet);
  --tone-soft: var(--violet-soft);
}

.rule-points > div:nth-child(1) {
  --tone: var(--info);
  --tone-soft: var(--info-soft);
}

.rule-points > div:nth-child(2) {
  --tone: var(--build);
  --tone-soft: var(--build-soft);
}

.rule-points > div:nth-child(3) {
  --tone: var(--seal);
  --tone-soft: var(--seal-soft);
}

.toned .icon-tile {
  background: var(--tone-soft);
  color: var(--tone);
  transition:
    background 0.3s,
    color 0.3s;
}

.toned > div::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--tone);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.toned > div:hover::before {
  transform: scaleX(1);
}

.toned > div:hover .icon-tile {
  background: var(--tone);
  color: var(--sheet);
}

/* ---- The product mockup: the web app's own markup and styles. */

.app-mock {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--lift);
  font-size: 14px;
  line-height: 1.5;
}

.app-mock .id {
  font-family: var(--mono);
  font-size: 0.9em;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--neutral-soft);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}

.ui-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.ui-chip.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.ui-detail {
  padding: 18px 20px;
}

.ui-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.ui-title {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.ui-sub {
  margin-top: 4px;
  color: var(--muted);
}

.ui-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.ui-facts dt {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ui-facts dd {
  margin: 2px 0 0;
  font-weight: 650;
}

.ui-facts .good {
  color: var(--good);
}

.ui-facts .warn {
  color: var(--warn);
}

.ui-facts .bad {
  color: var(--void);
}

.ui-merged {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}

/* ---- How it works: the card stays in view while the steps scroll past. */

.scrolly {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px);
  align-items: flex-start;
  margin-top: clamp(32px, 4vw, 48px);
}

.change-card {
  flex: 1 1 380px;
  min-width: 0;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--lift);
  overflow: hidden;
}

.change-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  padding: 18px 22px;
  border-bottom: 1px solid var(--rule-soft);
}

.change-card-title {
  margin-top: 4px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
}

.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.pill-muted {
  padding-left: 0;
  padding-right: 0;
  color: var(--muted);
}

.pill-muted-soft {
  color: var(--muted);
  background: var(--sheet-2);
}

.pill-pass {
  color: var(--pass);
  background: var(--pass-soft);
}

.pill-build {
  color: var(--build);
  background: var(--build-soft);
}

.pill-seal {
  color: var(--seal-text);
  background: var(--seal-soft);
}

.pill-void {
  color: var(--void);
  background: var(--void-soft);
}

.change-card-status {
  transition:
    background 0.3s,
    color 0.3s;
}

.change-card-steps {
  display: grid;
  gap: 2px;
  padding: 10px;
  list-style: none;
}

.change-card-steps li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 12px;
  border-radius: 10px;
  transition:
    opacity 0.35s,
    background-color 0.35s;
}

.change-card-steps li.current {
  background: var(--sheet-2);
}

.change-card-steps li.later {
  opacity: 0.3;
}

.step-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font: 700 13px var(--mono);
}

.step-number.pushed {
  background: var(--sheet-2);
  border: 1px solid var(--rule);
  color: var(--muted);
}

.step-number.tested {
  background: var(--pass-soft);
  color: var(--pass);
}

.step-number.checked {
  background: var(--seal-soft);
  color: var(--seal-text);
}

.step-number.merges {
  background: var(--violet-soft);
  color: var(--violet);
}

.change-card-steps b {
  display: block;
  font-weight: 700;
}

.change-card-steps .step-detail {
  margin-top: 2px;
  font-size: 15px;
  color: var(--muted);
}

.step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.fake-button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--seal);
  color: var(--seal-ink);
  font-weight: 700;
  font-size: 15px;
}

.fake-button.secondary {
  background: var(--sheet);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}

.change-card-foot {
  padding: 14px 22px;
  background: var(--sheet-2);
  border-top: 1px solid var(--rule-soft);
  font-size: 14px;
  color: var(--muted);
}

.steps {
  flex: 1 1 420px;
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 0;
  list-style: none;
}

/* The four steps beside the card, each a button. The one in play opens to
   show its words, and the card shows how far the change has got. Without
   the script, every step shows its words. */
.steps button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--sheet);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
}

.steps button:hover {
  border-color: var(--rule-strong);
}

.steps button[aria-pressed="true"] {
  border-color: var(--seal);
  box-shadow: 0 10px 24px -16px rgb(15 26 29 / 40%);
}

.step-title {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

.step-body {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 15px;
  text-wrap: pretty;
}

.steps.picking .step-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.4s,
    opacity 0.3s;
}

.steps.picking button[aria-pressed="true"] .step-body {
  max-height: 160px;
  opacity: 1;
}

.step-count {
  font: 700 14px var(--mono);
}

.steps li:nth-child(1) .step-count {
  color: var(--muted);
}

.steps li:nth-child(2) .step-count {
  color: var(--info);
}

.steps li:nth-child(3) .step-count {
  color: var(--seal-text);
}

.steps li:nth-child(4) .step-count {
  color: var(--violet);
}


/* ---- The head of a dark card, which the policy file uses */

.dark-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #1f2d31;
  font: 600 13px/1.3 var(--mono);
  color: #90a2a6;
}

/* ---- The dial */

.dial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 16px;
  align-items: stretch;
}

.dial-panel {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: clamp(16px, 2.4vw, 24px);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 14px;
}

.level-0 {
  --level: var(--void);
  --level-soft: var(--void-soft);
}

.level-1 {
  --level: var(--build);
  --level-soft: var(--build-soft);
}

.level-2 {
  --level: var(--info);
  --level-soft: var(--info-soft);
}

.level-3 {
  --level: var(--pass);
  --level-soft: var(--pass-soft);
}

.scope {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--rule-soft);
}

.scope-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.scope-path {
  margin-top: 2px;
  overflow-wrap: anywhere;
  font: 500 13px/1.3 var(--mono);
  color: var(--muted);
}

/* Each level as the app shows it: its bars and its name, with its number
   in the tip (ADR 276). */
.levels {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.levels button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--sheet);
  color: var(--muted);
  font: 650 13px var(--text);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.levels button[aria-pressed="true"] {
  border-color: var(--level);
  background: var(--level-soft);
  color: var(--level);
}

.levels .bars {
  display: inline-flex;
  gap: 2px;
}

.levels .bars i {
  width: 4px;
  height: 11px;
  border-radius: 1px;
  background: var(--rule-strong);
}

.levels .bars .on {
  background: currentColor;
}

.scope-outcome {
  grid-column: 1 / span 2;
  font-size: 14px;
  font-weight: 700;
  color: var(--level);
}

.dial-summary {
  margin: 10px 4px 0;
  font-size: 15px;
  color: var(--ink-2);
}

.policy-file {
  display: flex;
  flex-direction: column;
  background: #0f1a1d;
  border: 1px solid #1f2d31;
  border-radius: 14px;
  overflow: hidden;
}

.policy-file .dark-card-head {
  padding: 12px 20px;
}

.policy-file pre {
  flex: 1;
  margin: 0;
  padding: 18px 20px;
  overflow: auto;
  font: 500 14px/1.6 var(--mono);
  color: #e2ebed;
  white-space: pre;
}

/* The file in colour, as an editor shows it, and the lines a click changed
   flash and fade. A dot by its name says it has changed. */
.policy-file .ln {
  display: inline-block;
  min-width: 100%;
  margin: 0 -20px;
  padding: 0 20px;
  border-radius: 3px;
}

.policy-file .flash {
  animation: changed-line 1.6s ease-out;
}

@keyframes changed-line {
  0%,
  25% {
    background: rgb(134 182 198 / 28%);
  }
}

.y-key {
  color: #86b6c6;
}

.y-name {
  color: #ffffff;
  font-weight: 700;
}

.y-number {
  color: #eab85f;
}

.y-string {
  color: #9fd4b4;
}

.policy-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-radius: 50%;
  background: #eab85f;
  vertical-align: 1px;
}

.try-hint {
  margin: clamp(28px, 4vw, 40px) 0 12px;
  font: 600 14px var(--mono);
  color: var(--seal-text);
}

/* ---- Fits your stack */

.join-ambient {
  position: relative;
  z-index: 1;
  height: clamp(48px, 6vw, 72px);
}

.stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

.stack-grid > div {
  padding: 22px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 12px;
  transition:
    border-color 0.2s,
    transform 0.2s;
}

.stack-grid > div:hover {
  border-color: var(--rule-strong);
  transform: translateY(-2px);
}

/* The cards beside the product's pictures lift a little under the pointer,
   as the stack's do. */
.checks-list > div,
.record-stats > div {
  transition:
    border-color 0.2s,
    transform 0.2s;
}

.checks-list > div:hover,
.record-stats > div:hover {
  border-color: var(--rule-strong);
  transform: translateY(-2px);
}

.stack-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--seal-soft);
  color: var(--seal-text);
  font: 600 13px/1.4 var(--mono);
}

/* What it fits: each card's tag takes a colour of its own, as the other
   card rows do, and its border takes it on hover. */
.fits > div:nth-child(1) {
  --tone: var(--violet);
  --tone-soft: var(--violet-soft);
}

.fits > div:nth-child(2) {
  --tone: var(--pass);
  --tone-soft: var(--pass-soft);
}

.fits > div:nth-child(3) {
  --tone: var(--build);
  --tone-soft: var(--build-soft);
}

.fits > div:nth-child(4) {
  --tone: var(--info);
  --tone-soft: var(--info-soft);
}

.fits .stack-tag {
  background: var(--tone-soft);
  color: var(--tone);
}

.fits > div:hover {
  border-color: var(--tone);
}

.stack-grid h3 {
  font-size: 19px;
}

.stack-grid p:last-child {
  margin-top: 8px;
  font-size: 16px;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---- The alternatives, and what CScale 1 adds */

.compare-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.compare-card {
  --compare-tone: var(--build);
  --compare-tone-soft: var(--build-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 18px 18px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--sheet);
  box-shadow: var(--lift);
}

.compare-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  width: 36px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--compare-tone);
}

.compare-card:nth-child(2) {
  --compare-tone: var(--info);
  --compare-tone-soft: var(--info-soft);
}

.compare-card:nth-child(3) {
  --compare-tone: var(--violet);
  --compare-tone-soft: var(--violet-soft);
}

.compare-card:nth-child(4) {
  --compare-tone: var(--pass);
  --compare-tone-soft: var(--pass-soft);
}

.compare-kicker {
  font: 700 11px/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--compare-tone);
}

.compare-quote {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  text-wrap: balance;
}

.compare-quote-mark {
  flex: none;
  height: 0.7em;
  font-size: 1.7em;
  line-height: 0.85;
  color: var(--seal-text);
}

/* The pair sits at the foot of each card, so the four line up. */
.compare-pair {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
}

.compare-line {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--sheet-2);
}

.compare-line-answer {
  background: var(--seal-soft);
}

.compare-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--muted);
}

.compare-icon svg {
  width: 18px;
  height: 18px;
}

.compare-line-answer .compare-icon svg {
  width: 20px;
  height: 20px;
}

.compare-line:not(.compare-line-answer) .compare-icon {
  border-radius: 7px;
  background: var(--compare-tone-soft);
  color: var(--compare-tone);
}

.compare-label,
.compare-value {
  display: block;
}

.compare-label {
  font: 700 11px/1.3 var(--mono);
  color: var(--muted);
}

.compare-line-answer .compare-label {
  color: var(--seal-text);
}

.compare-value {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: pretty;
}

.compare-more {
  margin-top: 22px;
}

.compare-more a {
  font-weight: 650;
  color: var(--seal-text);
  text-decoration: none;
}

.compare-more a::after {
  content: " →";
}

.compare-more a:hover {
  text-decoration: underline;
}

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

@media (max-width: 560px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Test strength */

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 48px);
  align-items: flex-start;
  margin-top: clamp(32px, 4vw, 48px);
}

.checks-list {
  flex: 1 1 380px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}

.checks-list > div {
  padding: 20px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 12px;
}

.checks-list h3 {
  font-size: 18px;
}

.checks-list p:last-child {
  margin-top: 8px;
  font-size: 15px;
  color: var(--ink-2);
  text-wrap: pretty;
}

.ui-change {
  flex: 1 1 420px;
  min-width: 0;
}

.ui-finding {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: var(--radius);
  background: var(--warn-soft);
}

.ui-finding b {
  color: var(--warn);
}

.ui-finding > p:first-child {
  font-size: 13.5px;
}

.ui-finding-where {
  margin: 10px 0;
  color: var(--ink-2);
  font-size: 12.5px;
}

.ui-finding code {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  font: 12px var(--mono);
}

.ui-small-button {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: 7px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 650;
}

/* ---- Your rules: what the levels add, under the dial. */

.rule-points {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: clamp(32px, 4vw, 48px);
}

/* ---- Your time back: three sliders and what they come to. */

.calc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: center;
  margin-top: clamp(32px, 4vw, 48px);
  overflow: hidden;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--lift);
}

.calc-inputs {
  display: grid;
  gap: 22px;
}

.calc-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
  font-weight: 650;
}

.calc-field input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--seal);
}

.calc-field output {
  grid-row: 1;
  grid-column: 2;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--seal-soft);
  font: 700 16px var(--mono);
  color: var(--seal-text);
  font-variant-numeric: tabular-nums;
}

/* The result on a soft petrol panel, so the inputs and the answer read as
   two halves. */
.calc-inputs {
  padding: clamp(22px, 3vw, 36px);
}

.calc-result {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 3vw, 36px);
  background: linear-gradient(160deg, var(--seal-soft), color-mix(in srgb, var(--seal-soft) 40%, var(--sheet)));
}

/* Sliders in the brand: a petrol track filled up to the thumb, a white
   thumb in a petrol ring, and each value in a pill. */
.calc-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background:
    linear-gradient(var(--seal), var(--seal)) no-repeat 0 0 / var(--fill, 50%) 100%,
    var(--rule);
  outline-offset: 6px;
}

.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--seal);
  background: var(--sheet);
  box-shadow: 0 2px 6px rgb(15 26 29 / 25%);
  cursor: grab;
  transition: transform 0.15s;
}

.calc-field input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

.calc-field input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--seal);
  background: var(--sheet);
  cursor: grab;
}

.presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}

.presets button {
  padding: 6px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--sheet);
  color: var(--ink-2);
  font: 600 13px var(--text);
  cursor: pointer;
}

.presets button[aria-pressed="true"] {
  border-color: var(--seal);
  background: var(--seal-soft);
  color: var(--seal-text);
}

.calc-days {
  margin-top: 8px;
  font-size: 17px;
  color: var(--ink-2);
}

.calc-days b {
  color: var(--ink);
}

/* A 40-hour week: what review gives back, then what stays yours. */
.week {
  margin-top: 18px;
}

.week-bar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  background: var(--rule-soft);
  overflow: hidden;
}

.week-bar i {
  height: 100%;
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.week-back,
.key-back {
  background: var(--pass);
}

.week-review,
.key-review {
  background: color-mix(in srgb, var(--build) 70%, transparent);
}

.week-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

.week-key b {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 2px;
}

.week-of {
  margin-left: auto;
}

.calc-big {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.2;
}

.calc-big span {
  display: block;
  font: 700 clamp(56px, 7vw, 88px) / 1 var(--mono);
  color: var(--seal-text);
  font-variant-numeric: tabular-nums;
}

.calc-note {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 17px;
  text-wrap: pretty;
}

/* ---- The founder's letter, as a page on top of two others, each a little
   askew. The sheets behind sit on the outer box, so the page's own tilt
   never carries them, and the reveal can move the whole stack. */

.letter {
  position: relative;
  max-width: 1000px;
  margin: clamp(32px, 4vw, 48px) 0 clamp(40px, 5vw, 64px);
}

.letter::before,
.letter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--paper-edge), 0 12px 32px -20px rgb(0 0 0 / 30%);
}

.letter::before {
  transform: rotate(1.4deg) translate(10px, 6px);
}

.letter::after {
  transform: rotate(-1.8deg) translate(-8px, 10px);
}

/* On a phone the sheets fan less, so they stay inside the page's margins. */
@media (max-width: 639px) {
  .letter::before {
    transform: rotate(0.8deg) translate(4px, 4px);
  }

  .letter::after {
    transform: rotate(-0.9deg) translate(-3px, 6px);
  }
}

.letter-sheet {
  position: relative;
  z-index: 1;
  padding: clamp(32px, 7vw, 88px) clamp(24px, 7vw, 92px);
  background: var(--paper);
  border-radius: 3px;
  transform: rotate(-0.4deg);
  box-shadow:
    0 0 0 1px var(--paper-edge),
    0 6px 40px -18px rgb(0 0 0 / 25%),
    0 28px 48px -40px rgb(15 26 29 / 45%);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.6;
  color: var(--ink);
}

.letter-sheet p + p {
  margin-top: 1.1em;
}

.letter-sign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 2em;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.letter-sign img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

/* A stand-in for John's signature until he sends his own. */
.letter-signature {
  width: clamp(140px, 20vw, 210px);
  margin-left: auto;
  color: var(--ink);
}

.letter-sign small {
  display: block;
  color: var(--ink-2);
  font-size: 15px;
  font-style: italic;
  font-weight: 400;
}

/* ---- Is it for you? */

.fit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
  margin-top: clamp(32px, 4vw, 48px);
}

.fit-col {
  padding: 24px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 12px;
}

.fit-col h3 {
  font-size: 19px;
}

.fit-col ul {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}

.fit-col li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-2);
}

.fit-col li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}

.fit-col.yes li::before {
  content: "✓";
  color: var(--pass);
}

.fit-col.no li::before {
  content: "–";
  color: var(--muted);
}

/* ---- Our own record */

.record-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px;
}

.record-note {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}

.record-stats > div {
  padding: 22px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 12px;
}

.record-stats dt {
  font-size: 15px;
  color: var(--muted);
}

.record-stats dd {
  margin: 6px 0 0;
  font: 700 clamp(36px, 5vw, 52px) / 1 var(--mono);
  font-variant-numeric: tabular-nums;
}

.fit-title {
  margin: clamp(48px, 6vw, 72px) 0 20px;
  font-size: 22px;
}

/* ---- FAQ */

.faq {
  border-bottom: 0;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 24px clamp(40px, 6vw, 96px);
  align-items: start;
}

.faq-list {
  display: grid;
  border-top: 1px solid var(--rule);
}

.faq-list details {
  border-bottom: 1px solid var(--rule);
}

.faq-list summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 20px 8px 20px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  transition: color 0.2s;
}

.faq-list summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
  font: 700 16px/1 var(--mono);
  color: var(--seal-text);
  transition:
    transform 0.25s,
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}

.faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.faq-list details p {
  max-width: 38em;
  margin: 0 0 22px;
  padding-left: 14px;
  overflow: hidden;
  color: var(--ink-2);
}

.faq-list details p b {
  color: var(--ink);
  font-weight: 650;
}

/* The open question stands out: petrol, with a bar on its left and its
   + in a filled circle. Rows tint under the pointer. */
.faq-list details {
  position: relative;
  transition: background 0.2s;
}

.faq-list details:hover {
  background: color-mix(in srgb, var(--sheet-2) 60%, transparent);
}

.faq-list details::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 2px;
  background: var(--seal);
  transform: scaleY(0);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.faq-list details[open]::before {
  transform: scaleY(1);
}

.faq-list details[open] summary {
  color: var(--seal-text);
}

.faq-list details[open] summary::after {
  border-color: var(--seal);
  background: var(--seal);
  color: var(--seal-ink);
}

/* The side stays in view beside the questions, with a way to ask. */
/* General and Common concerns. Without page.js both lists show, each under its own heading. */
.faq-main {
  min-width: 0;
}

.faq-tabs {
  display: none;
  gap: 6px;
  margin-bottom: 18px;
}

.faq-tabs.ready {
  display: flex;
  flex-wrap: wrap;
}

.faq-tabs button {
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--sheet);
  color: var(--muted);
  font: 650 14px var(--text);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.faq-tabs button[aria-selected="true"] {
  border-color: var(--seal-text);
  background: var(--seal-soft);
  color: var(--seal-text);
}

.faq-tabs button:focus-visible {
  outline: 2px solid var(--seal-text);
  outline-offset: 2px;
}

.faq-group-title {
  margin: 0 0 12px;
  font: 700 12px/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.faq-panel + .faq-panel {
  margin-top: 36px;
}

.faq-tabbed .faq-group-title {
  display: none;
}

.faq-tabbed .faq-panel + .faq-panel {
  margin-top: 0;
}

.faq-side {
  position: sticky;
  top: calc(100px + env(safe-area-inset-top, 0px));
}

/* One column on narrow screens: the side scrolls away instead of covering the questions. */
@media (max-width: 860px) {
  .faq-side {
    position: static;
  }
}

.ask {
  display: flex;
  gap: 14px;
  align-items: center;
  max-width: 26em;
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--sheet);
}

.ask img {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.ask p {
  font-size: 15px;
  color: var(--ink-2);
}

.ask b {
  color: var(--ink);
}

/* ---- Early access */

.access {
  position: relative;
  overflow: hidden;
  background: var(--band);
  color: var(--band-ink);
}

.access-ambient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  pointer-events: none;
}

.access .wrap {
  padding-block: clamp(72px, 9vw, 112px);
}

.access .rail {
  bottom: auto;
  height: calc(clamp(72px, 9vw, 112px) + 0.52 * clamp(32px, 4vw, 54px));
  background: color-mix(in srgb, var(--band-ink) 30%, transparent);
}

.access .section-title::before {
  border: 0;
  background: var(--band-ink);
}

.access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px 72px;
  /* The heading starts the section, where its rail ends at its dot. */
  align-items: start;
}

.access-copy > p {
  font-size: 18px;
  color: var(--band-ink-2);
  text-wrap: pretty;
}

.access .cta-row {
  margin-top: 28px;
}

.access .button {
  background: var(--band-ink);
  color: var(--band);
}

.access .button:hover {
  background: var(--band-ink-2);
}

.access .text-link {
  color: var(--band-ink);
}

.access :focus-visible {
  outline-color: var(--band-ink);
}

.access {
  --tap: rgb(251 253 253 / 20%);
}

/* ---- Footer */

.colophon {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px var(--gutter);
  font-size: 15px;
  color: var(--muted);
}

/* The lockup at its smallest allowed size, the app bar's: a 22 px mark,
   and one cap height, 22 / 1.75 px, to the name and after it. */
.colophon-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12.57px;
}

.colophon-brand .wordmark {
  font-size: 17.879px;
}

.colophon nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.colophon nav a {
  color: var(--ink-2);
  white-space: nowrap;
}

/* ---- The early-access form (ADR 158) */

.form-wrap .indent {
  max-width: 780px;
}

.form-lede {
  margin-top: 20px;
  font-size: 19px;
  color: var(--ink-2);
  text-wrap: pretty;
}

.access-form {
  display: grid;
  gap: 56px;
  margin-top: 56px;
}

.access-form[hidden],
.form-error[hidden],
.form-done[hidden] {
  display: none;
}

.form-part h2 {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 22px 24px;
}

.field {
  display: grid;
  gap: 8px;
  align-content: start;
}

.field-wide {
  grid-column: 1 / -1;
}

.field-label,
.question legend {
  font-weight: 700;
  font-size: 16px;
}

.optional {
  margin-left: 6px;
  font-weight: 400;
  font-size: 14px;
  color: var(--muted);
}

.field-hint {
  font-size: 15px;
  color: var(--muted);
  text-wrap: pretty;
}

.access-form input:not([type="radio"], [type="checkbox"]),
.access-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--sheet);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
}

.access-form textarea {
  min-height: 150px;
  line-height: 1.5;
  resize: vertical;
}

.access-form input::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

.access-form input:focus-visible,
.access-form textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.handle {
  display: flex;
  align-items: center;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--sheet);
}

.handle > span {
  padding-left: 14px;
  color: var(--muted);
}

.access-form .handle input {
  border: 0;
  padding-left: 4px;
  background: transparent;
}

.access-form .handle input:focus-visible {
  outline: none;
}

.handle:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.question {
  min-width: 0;
  margin: 0 0 30px;
  padding: 0;
  border: 0;
}

.question legend {
  margin-bottom: 12px;
  padding: 0;
}

.question:last-child {
  margin-bottom: 0;
}

.fields + .question {
  margin-top: 24px;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.choice {
  position: relative;
}

.choice input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--sheet);
  font-size: 15px;
  font-weight: 600;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.choice:hover span {
  border-color: var(--seal);
}

.choice input:checked + span {
  border-color: var(--seal);
  background: var(--seal);
  color: var(--seal-ink);
}

.choice input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  font-size: 15px;
  color: var(--muted);
  text-wrap: pretty;
}

.form-error {
  font-weight: 700;
  color: var(--void);
}

.access-form .cta-row {
  margin-top: 0;
}

.access-form .button {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.access-form .button:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

#form-intro[hidden] {
  display: none;
}

.form-done:focus {
  outline: none;
}

/* ---- Phones and small tablets (ADR 84): John's design, fitted to narrow
   screens, changing nothing on a desktop. The masthead and touch targets
   follow the screen's width; the parts below follow their own. */

/* Safe areas, when a phone draws the page under its status bar or home
   indicator. */
.masthead {
  padding-top: env(safe-area-inset-top, 0px);
}

.colophon {
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}

.skip {
  left: max(1rem, env(safe-area-inset-left, 0px));
}

/* The masthead keeps to one line. Its links never fit below this width, so
   they go before the first paint, script or not; above it, page.js decides. */
@media (max-width: 860px) {
  .masthead-nav {
    display: none;
  }
}

/* Nor do the lockup, Sign in, and the button below this one. The lockup
   stays whole and Sign in stays for invited people; the button gives way,
   as it is also the hero's first action, just below. */
@media (max-width: 540px) {
  .masthead-actions .button {
    display: none;
  }
}

/* Touch targets of at least 44 px, as in the web app (ADR 47). Links grow
   their hit area without moving anything around them. */
@media (max-width: 640px), (pointer: coarse) {
  .button-small {
    min-height: 44px;
  }

  .brand {
    padding-block: 8px;
    margin-block: -8px;
  }

  .masthead-actions .sign-in,
  .text-link {
    padding-block: 10px;
    margin-block: -10px;
  }

  .masthead-nav a,
  .colophon nav a {
    padding: 10px;
    margin: -10px;
  }
}

@media (max-width: 640px) {
  .live-body {
    padding: 20px 14px;
  }

  /* Two labels that can't sit side by side wrap whole. */
  .dark-card-head {
    flex-wrap: wrap;
    row-gap: 2px;
  }
}

/* The parts that fit themselves to their own width. */
.scrolly {
  container: how / inline-size;
}

.change-card {
  container: change / inline-size;
}

.dial-panel {
  container: dial / inline-size;
}

/* In a narrow card, a step's title takes the width, and its label goes
   under it, so it stays readable. */
@container change (max-width: 299px) {
  .change-card-steps li {
    grid-template-columns: 28px minmax(0, 1fr);
    row-gap: 0;
  }

  .change-card-steps li > :first-child {
    grid-row: span 2;
  }

  .change-card-steps li > .pill {
    justify-self: start;
    margin-top: 8px;
  }
}

/* The dial: in a narrow panel, each part's levels go under its name. */
@container dial (max-width: 359px) {
  .scope {
    grid-template-columns: minmax(0, 1fr);
  }

  .levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scope-outcome {
    grid-column: 1;
  }
}

/* ---- Motion when the page opens, and on jumps from its links. None of it
   runs when motion is reduced. */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes highlight {
  from {
    background-size: 0% 38%;
  }
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .masthead-inner {
    animation: settle 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }

  .hero-copy > * {
    animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }

  .hero-copy > :nth-child(2) {
    animation-delay: 0.08s;
  }

  .hero-copy > :nth-child(3) {
    animation-delay: 0.16s;
  }

  .hero-copy > :nth-child(4) {
    animation-delay: 0.24s;
  }

  .hero-copy > :nth-child(5) {
    animation-delay: 0.32s;
  }

  .hero .live-card {
    animation: rise 0.9s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }

  .hero-safely {
    animation: highlight 0.7s 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }
}

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

/* The launch (ADR 363): the CI section's command, and the install band's
   one command. Picking a system shows its command, without script: each
   choice is a radio before the commands it reveals. A command wraps rather
   than scrolls, with a copy button beside it. The box is dark in both
   themes, as the panels are. */
#ci .policy-file { margin-top: clamp(32px, 4vw, 48px); }
#ci .rule-points { margin-top: 24px; }
.install { margin-top: 28px; }
.install-box { position: relative; background: #0f1a1d; border: 1px solid #1f2d31; border-radius: 14px; overflow: hidden; }
.install-os { position: absolute; opacity: 0; pointer-events: none; }
.install-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid #1f2d31; }
.install-tabs label { padding: 10px 12px; font: 600 13px/1.3 var(--mono); color: #90a2a6; cursor: pointer; }
.install-tabs label:hover { color: #e2ebed; }
#install-unix:checked ~ .install-tabs [for="install-unix"],
#install-windows:checked ~ .install-tabs [for="install-windows"],
#install-brew:checked ~ .install-tabs [for="install-brew"] { color: #e2ebed; box-shadow: inset 0 -2px 0 #86b6c6; }
#install-unix:focus-visible ~ .install-tabs [for="install-unix"],
#install-windows:focus-visible ~ .install-tabs [for="install-windows"],
#install-brew:focus-visible ~ .install-tabs [for="install-brew"] { outline: 2px solid var(--band-ink); outline-offset: -2px; border-radius: 6px; }
.install-command { display: none; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; padding: 14px 14px 14px 20px; }
#install-unix:checked ~ [data-os="unix"],
#install-windows:checked ~ [data-os="windows"],
#install-brew:checked ~ [data-os="brew"] { display: grid; }
#install-windows:checked ~ .install-windows { display: block; }
.install-windows { display: none; }
.install-windows .install-command { display: grid; }
.install-guidance { margin: 0; padding: 14px 20px 0; color: #cfe0e5; font: 500 14px/1.5 var(--text); }
.install-command code { font: 500 14px/1.55 var(--mono); color: #e2ebed; white-space: pre-wrap; overflow-wrap: anywhere; }
.install-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; font: 600 13px/1 var(--mono); color: #cfe0e5; background: transparent; border: 1px solid #2c3d42; border-radius: 8px; cursor: pointer; }
.install-copy svg { flex: none; }
.install-copy:hover { background: rgb(255 255 255 / 6%); }
.install-copy[data-copied] { color: #53d094; border-color: rgb(83 208 148 / 45%); }
.install-then { margin-top: 12px; font-size: 15px; color: var(--band-ink-2); text-wrap: pretty; }
.install-then code { color: var(--band-ink); overflow-wrap: anywhere; }

/* Pricing (ADR 366). */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.plan { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 32px); background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--lift); }
.plan.paid { border-color: var(--seal); }
.plan-name { font: 600 13px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.plan-price { font-size: clamp(36px, 5vw, 48px); font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-price small { font-size: 16px; font-weight: 400; color: var(--muted); }
.plan-for { font-size: 17px; color: var(--ink-2); }
.plan ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.plan li { position: relative; padding-left: 26px; font-size: 16px; color: var(--ink-2); text-wrap: pretty; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--pass); }
.plan .cta-row { margin-top: auto; padding-top: 8px; }
.plan .cta-row .button { width: 100%; justify-content: center; }
.plans-note { margin-top: 20px; font-size: 16px; color: var(--ink-2); }
/* Pricing's two promises, under the plans: each a seal, a title and a line. */
.assurances { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; margin-top: 16px; }
.assurance { display: flex; gap: 24px; align-items: center; padding: clamp(20px, 3vw, 28px); background: var(--seal-soft); border-radius: 14px; }
.assurance > div { min-width: 0; }
.assurance-seal { flex: none; display: grid; place-content: center; width: 88px; height: 88px; border-radius: 50%; background: var(--seal); color: var(--seal-ink); text-align: center; box-shadow: 0 0 0 5px var(--seal-soft), 0 0 0 6px var(--seal); }
.assurance-seal b { font: 700 32px/1 var(--mono); font-variant-numeric: tabular-nums; }
.assurance-seal small { margin-top: 4px; font: 600 10px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.assurance h3 { font-size: 20px; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.assurance p { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 480px) {
  .assurance { flex-direction: column; align-items: flex-start; gap: 16px; }
}
.masthead-nav a[aria-current="page"] { color: var(--ink); }

/* CScale 1 (ADR 414): the hero's line, the homepage section and the model's
   page. */
.hero-model { margin-top: 18px; font-size: 15px; color: var(--ink-2); }
.hero-model a { color: var(--ink); font-weight: 600; text-decoration-color: var(--rule); text-underline-offset: 3px; }
#model .policy-file { margin-top: clamp(32px, 4vw, 48px); }
#model .rule-points, #when .rule-points, #yours .rule-points { margin-top: 24px; }
#model .cta-row { margin-top: 24px; }

/* CScale 1's page: the hero's answered question under the copy, the five
   questions as How it works' steps. */
.model-answer { margin: 0; max-width: 720px; min-width: 0; }
.model-answer .policy-file pre { font-size: 15px; }
.policy-file .model-yes { color: #53d094; font-weight: 600; }