:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  --bg: #fafafa;
  --white: #ffffff;
  --text: #1a1a2e;
  --text-mid: #4a4a6a;
  --text-light: #8888a0;
  --accent: #6c3ce0;
  --accent-dark: #5025b0;
  --accent-light: #ede5ff;
  --cyan: #06b6d4;
  --green: #059669;
  --green-light: #d1fae5;
  --red: #dc2626;
  --red-light: #fee2e2;
  --amber: #d97706;
  --border: #e5e5ef;
  --surface: #f0f0f6;
  --dark: #0a0a1a;
  --dark-surface: #16162a;
  --dark-border: #30304a;
  background: var(--bg);
  color: var(--text);
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

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

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(6, 182, 212, 0.42);
  outline-offset: 2px;
}

.site-progress {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent);
  transform-origin: left;
  animation: progress-entry 500ms ease-out both;
}

.member-nav {
  position: sticky;
  z-index: 50;
  top: 0;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px clamp(20px, 4vw, 56px);
  color: var(--white);
  background: rgba(10, 10, 26, 0.96);
  border-bottom: 1px solid var(--dark-border);
  backdrop-filter: blur(20px);
}

.brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  text-decoration: none;
}

.brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cyan);
  border-radius: 6px;
  color: var(--cyan);
  font: 750 13px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.brand strong,
.brand small {
  display: block;
  white-space: nowrap;
}

.brand strong {
  font-size: 15px;
  line-height: 1.25;
}

.brand small {
  margin-top: 2px;
  color: #b8b8ca;
  font-size: 12px;
}

.member-nav nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.member-nav nav a {
  padding: 8px 0;
  color: #d6d6e2;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}

.member-nav nav a:hover,
.member-nav nav a[aria-current="page"] {
  color: var(--white);
  border-color: var(--cyan);
}

.section-label {
  margin: 0 0 12px;
  color: var(--accent);
  font: 750 12px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace;
  text-transform: uppercase;
}

.button-primary,
.button-secondary,
.button-danger {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 10px 16px;
  font-weight: 720;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.button-primary {
  color: var(--white);
  background: var(--accent);
  border: 1px solid var(--accent);
}

.button-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  box-shadow: 0 8px 20px rgba(80, 37, 176, 0.22);
  transform: translateY(-1px);
}

.button-secondary {
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
}

.button-secondary:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(26, 26, 46, 0.08);
  transform: translateY(-1px);
}

.button-danger {
  color: var(--red);
  background: var(--white);
  border: 1px solid #f4bcbc;
}

.button-danger:hover {
  background: var(--red-light);
  border-color: var(--red);
  transform: translateY(-1px);
}

.member-library {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(64px, 10vh, 120px) 0 96px;
}

.library-intro {
  width: min(720px, 100%);
  margin-bottom: 48px;
}

.library-intro h1 {
  max-width: 700px;
  margin: 0;
  color: var(--text);
  font-size: clamp(42px, 7vw, 78px);
  line-height: 0.98;
}

.library-intro > p:last-child {
  max-width: 640px;
  margin: 24px 0 0;
  color: var(--text-mid);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
}

.library-list {
  border-top: 1px solid var(--border);
}

.product-row {
  min-height: 260px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 4vw, 52px);
  padding: 40px 0;
  border-bottom: 1px solid var(--border);
}

.product-index {
  color: var(--accent);
  font: 750 15px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.product-copy {
  min-width: 0;
}

.product-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.product-heading h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green);
  font: 700 12px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace;
  text-transform: uppercase;
}

.live-badge span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: status-pulse 1.8s ease-in-out infinite;
}

.product-copy > p {
  max-width: 680px;
  margin: 16px 0;
  color: var(--text-mid);
  font-size: 17px;
  line-height: 1.6;
}

.product-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  color: var(--text-light);
  font: 650 12px/1.5 ui-monospace, "SFMono-Regular", Consolas, monospace;
  list-style: none;
  text-transform: uppercase;
}

.product-action {
  width: 156px;
}

.member-product {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 64px 0 96px;
}

.product-intro {
  max-width: 760px;
  padding-bottom: 48px;
}

.back-link {
  display: inline-block;
  margin-bottom: 40px;
  color: var(--accent-dark);
  font-weight: 700;
  text-decoration: none;
}

.back-link::before {
  content: "\2190";
  margin-right: 8px;
}

.product-intro h1 {
  margin: 0;
  color: var(--text);
  font-size: 72px;
  line-height: 1;
}

.product-intro > p:last-child {
  max-width: 680px;
  margin: 22px 0 0;
  color: var(--text-mid);
  font-size: 20px;
  line-height: 1.6;
}

.package-section {
  padding: 48px 0 64px;
  border-top: 1px solid var(--border);
}

.section-heading {
  max-width: 720px;
  margin-bottom: 32px;
}

.section-heading h2,
.install-band h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.15;
}

.section-heading > p:last-child {
  margin: 14px 0 0;
  color: var(--text-mid);
  font-size: 17px;
  line-height: 1.6;
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.package-choice {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgb(26 26 46 / 7%);
}

.package-choice-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.package-choice-heading h2 {
  margin: 0 0 5px;
  font-size: 25px;
  line-height: 1.1;
}

.package-choice-heading code {
  color: var(--accent-dark);
  font-size: 12px;
}

.package-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--dark);
  border-radius: 6px;
  font-weight: 800;
}

.package-choice > p {
  margin: 24px 0 0;
  color: var(--text-mid);
  line-height: 1.6;
}

.package-choice .package-note {
  margin-top: 12px;
  color: var(--text-mid);
  font-size: 13px;
}

.package-action {
  width: 100%;
  min-height: 48px;
  margin-top: auto;
}

.button-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  color: var(--text-mid);
  background: #f1f1f5;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-weight: 750;
}

.release-status {
  margin: 20px 0 0;
  padding-left: 16px;
  color: var(--text-mid);
  border-left: 3px solid var(--cyan);
  font-size: 14px;
  line-height: 1.6;
}

.install-band {
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr);
  gap: 56px;
  padding: 56px 0;
  border-top: 1px solid var(--border);
}

.install-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  counter-reset: install-step;
  list-style: none;
}

.install-steps li {
  position: relative;
  min-height: 76px;
  padding: 0 0 24px 52px;
  counter-increment: install-step;
}

.install-steps li::before {
  content: counter(install-step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--accent-dark);
  font: 750 13px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.install-steps strong,
.install-steps span {
  display: block;
}

/* OS Coach public offer: one clear decision, then the same disciplined member flow. */
.os-coach-sales-page {
  color: var(--white);
  background: var(--dark);
}

/* Member pages: dark to match the sales page so the transition after purchase
   reads as the same product, not a different company's admin panel. */
.member-library-page,
.os-coach-page,
.member-checkout-page {
  color: var(--white);
  background: var(--dark);
}

.member-library-page .section-label,
.os-coach-page .section-label,
.member-checkout-page .section-label {
  color: var(--cyan);
}

.member-library-page .library-intro h1,
.member-library-page .product-heading h2,
.os-coach-page .product-intro h1,
.os-coach-page .section-heading h2,
.os-coach-page .install-band h2,
.os-coach-page .package-choice-heading h2,
.os-coach-page .package-choice h3,
.member-checkout-page .checkout-start h1 {
  color: var(--white);
}

.member-library-page .library-intro > p:last-child,
.member-library-page .product-copy > p,
.os-coach-page .product-intro > p:last-child,
.os-coach-page .section-heading > p:last-child,
.member-checkout-page .checkout-start > p {
  color: #d6d6e2;
}

.member-library-page .product-facts,
.os-coach-page .package-choice > p,
.os-coach-page .package-choice .package-note,
.os-coach-page .install-steps span,
.os-coach-page .release-status,
.member-checkout-page .release-status {
  color: #b8b8ca;
}

.member-library-page .library-list,
.member-library-page .product-row,
.os-coach-page .package-section,
.os-coach-page .install-band {
  border-color: var(--dark-border);
}

.member-library-page .product-index,
.os-coach-page .back-link,
.os-coach-page .install-steps li::before,
.os-coach-page .package-choice-heading code,
.member-checkout-page .back-link {
  color: var(--cyan);
}

.os-coach-page .package-choice {
  background: var(--dark-surface);
  border-color: var(--dark-border);
  box-shadow: none;
}

.os-coach-page .package-icon {
  background: var(--accent-dark);
}

.os-coach-page .button-disabled {
  color: #b8b8ca;
  background: var(--dark-surface);
  border-color: var(--dark-border);
}

.os-coach-sales-page .member-nav,
.os-coach-status-page .member-nav {
  background: #080813;
}

.os-coach-hero,
.os-coach-statement,
.os-coach-value,
.os-coach-fit,
.os-coach-loop,
.os-coach-after,
.os-coach-status {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
}

.os-coach-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(340px, 1.06fr);
  align-items: center;
  gap: clamp(32px, 6vw, 84px);
  min-height: min(790px, calc(100vh - 72px));
  padding: clamp(64px, 10vw, 126px) 0;
}

.os-coach-hero h1,
.os-coach-statement h2,
.os-coach-value h2,
.os-coach-fit h2,
.os-coach-loop h2,
.os-coach-after h2,
.os-coach-status h1 {
  margin: 0;
  color: var(--white);
  font-size: clamp(48px, 6.8vw, 96px);
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.os-coach-hero .section-label,
.os-coach-loop .section-label,
.os-coach-after .section-label,
.os-coach-status .section-label {
  color: var(--cyan);
}

/* Section labels are an eyebrow above a 96px headline. At 12px they read as
   fine print rather than as part of the hierarchy. */
.os-coach-hero .section-label,
.os-coach-value .section-label,
.os-coach-fit .section-label,
.os-coach-loop .section-label,
.os-coach-after .section-label,
.os-coach-status .section-label {
  margin-bottom: 18px;
  font-size: clamp(14px, 1.25vw, 18px);
  letter-spacing: 0.1em;
}

.os-coach-lead {
  max-width: 610px;
  margin: 28px 0 0;
  color: #d6d6e2;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.48;
}

.os-coach-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 34px 0 20px;
}

.os-coach-price strong {
  color: var(--white);
  font-size: 36px;
  line-height: 1;
}

.os-coach-price-amount {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
}

.os-coach-price-rationale {
  position: relative;
  display: inline-block;
}

.os-coach-price-rationale summary {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 8px;
  color: var(--cyan);
  cursor: help;
  border: 1px solid rgb(6 182 212 / 54%);
  font: 700 11px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .015em;
  line-height: 1;
  list-style: none;
  text-transform: uppercase;
}

.os-coach-price-rationale summary::-webkit-details-marker {
  display: none;
}

.os-coach-price-rationale summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.os-coach-price-rationale p {
  position: absolute;
  z-index: 1;
  top: calc(100% + 12px);
  left: calc(50% - 168px);
  width: min(360px, calc(100vw - 48px));
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #4b4b67;
  background: #101023;
  color: #f2f0ff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.os-coach-price-rationale:hover p,
.os-coach-price-rationale:focus-within p,
.os-coach-price-rationale[open] p {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.os-coach-price span,
.os-coach-login,
.os-coach-boundary,
.os-coach-conditions p,
.os-coach-included p,
.os-coach-guarantee p {
  color: #b8b8ca;
  line-height: 1.55;
}

.os-coach-buy {
  min-height: 56px;
  padding-inline: 24px;
  font-size: 16px;
}

.os-coach-login {
  margin: 16px 0 0;
  font-size: 14px;
}

.os-coach-boundary {
  margin: 14px 0 0;
  color: #b8b8ca;
  font-size: 13px;
}

.os-coach-login a,
.os-coach-note a {
  color: var(--cyan);
}

/* The hero panel. The reveal layer inside it screens onto whatever is beneath
   it, so the panel has to be its own stacking context or the blend reaches the
   whole page, and it has to clip or the wall of text spills out of it. */
.os-coach-hero-art {
  position: relative;
  min-height: clamp(420px, 52vh, 580px);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  cursor: crosshair;
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(108 60 224 / 22%), transparent 62%),
    #07071a;
  border: 1px solid rgb(6 182 212 / 52%);
  border-radius: 6px;
  box-shadow: 20px 20px 0 rgb(108 60 224 / 30%);
}

.os-coach-hero-art img {
  display: block;
  width: 100%;
  min-height: 410px;
  object-fit: cover;
  object-position: center;
}

/* A full-width statement between the hero and the first two-column section.
   Deliberately not a grid: it is one line and it should run the full measure
   rather than sit in the left column of an empty row. */
.os-coach-statement {
  padding: clamp(74px, 11vw, 140px) 0 0;
  border-top: 1px solid var(--dark-border);
}

.os-coach-statement + .os-coach-value {
  border-top: 0;
  padding-top: clamp(28px, 4vw, 48px);
}

.os-coach-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
  gap: clamp(36px, 8vw, 130px);
  padding: clamp(74px, 11vw, 140px) 0;
  border-top: 1px solid var(--dark-border);
}

/* ── Hero animation: the reading light ───────────────────────────────────
   "Stop squeezing your vision into an AI-shaped box."

   The panel is densely covered in monospace text, but only the part under a
   soft drifting circle of light is painted. Most of what the light finds is
   grey marketing filler. Scattered through it are one founder's own operating
   standards, in violet and cyan, which brighten as the light passes them.

   The mask lives on .rl-field, which is panel-sized and never moves. The wall
   lives in .rl-inner, which is taller than the panel and drifts vertically, so
   more of it passes under the light over time. Panning .rl-field itself would
   drag the mask along with it and the light would never move relative to the
   text.

   --rl-x, --rl-y and --rl-r are written by the inline script on the sales
   page. The values declared here are the no-script resting state: a centred
   light that still reads as a composition rather than as a blank slab. */

.os-coach-hero-art .rl-bed {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.45;
  pointer-events: none;
}

.os-coach-hero-art .rl-field {
  --rl-x: 50%;
  --rl-y: 50%;
  --rl-r: 150px;

  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 11px 13px;
  overflow: hidden;
  color: #4c4c66;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  user-select: none;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(var(--rl-r) circle at var(--rl-x) var(--rl-y), black 20%, rgb(0 0 0 / 25%), transparent);
  mask-image: radial-gradient(var(--rl-r) circle at var(--rl-x) var(--rl-y), black 20%, rgb(0 0 0 / 25%), transparent);
}

/* The wall itself: taller than the panel, drifting under the fixed mask. */
.os-coach-hero-art .rl-inner {
  position: relative;
  display: block;
  will-change: transform;
}

/* The recoloured gradient, screened into whichever glyphs the light reveals. */
.os-coach-hero-art .rl-field::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.36;
  background: radial-gradient(var(--rl-r) circle at var(--rl-x) var(--rl-y),
    #0a0a1a 0%,
    #0a0a1a 28%,
    #6c3ce0 56%,
    #8e64ff 76%,
    #06b6d4 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* The flat, generic filler. Three greys so the wall has texture at rest. */
.os-coach-hero-art .rl-f0 {
  color: #4d4d68;
}

.os-coach-hero-art .rl-f1 {
  color: #575778;
}

.os-coach-hero-art .rl-f2 {
  color: #43435c;
}

/* The specific lines. Brighter to begin with, so they catch the light harder. */
.os-coach-hero-art .rl-s {
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.38s ease, text-shadow 0.38s ease;
}

.os-coach-hero-art .rl-s.rl-v {
  color: #a97bff;
  text-shadow: 0 0 6px rgb(169 123 255 / 35%);
}

.os-coach-hero-art .rl-s.rl-c {
  color: #06b6d4;
  text-shadow: 0 0 6px rgb(6 182 212 / 35%);
}

.os-coach-hero-art .rl-s.rl-v.rl-lit {
  color: #cbb0ff;
  text-shadow: 0 0 14px rgb(169 123 255 / 85%), 0 0 30px rgb(108 60 224 / 55%);
}

.os-coach-hero-art .rl-s.rl-c.rl-lit {
  color: #7ce8fb;
  text-shadow: 0 0 14px rgb(6 182 212 / 85%), 0 0 30px rgb(6 182 212 / 45%);
}

/* Edge vignette, so the panel keeps its dark frame whatever the light is doing. */
.os-coach-hero-art .rl-vig {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(120% 120% at 50% 50%, rgb(7 7 26 / 0%) 58%, rgb(7 7 26 / 72%) 92%, rgb(7 7 26 / 95%) 100%);
  pointer-events: none;
}

/* The 31 standards are painted, not written, so they carry no text for a
   screen reader. The same lines are published to assistive technology as an
   ordinary paragraph next to the figure. */
.sr-only {
  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;
}

@media (prefers-reduced-motion: reduce) {
  /* No frame loop runs at all: the script parks the light at the centre, parks
     the wall part-way down so a fuller stretch of it shows, and paints one
     frame of the bed. A wider, softer circle makes that single frame read as a
     composition rather than as an animation someone paused. */
  .os-coach-hero-art .rl-field {
    --rl-r: 174px;

    -webkit-mask-image: radial-gradient(var(--rl-r) circle at var(--rl-x) var(--rl-y), black 22%, rgb(0 0 0 / 28%), transparent);
    mask-image: radial-gradient(var(--rl-r) circle at var(--rl-x) var(--rl-y), black 22%, rgb(0 0 0 / 28%), transparent);
  }

  .os-coach-hero-art .rl-s {
    transition: none;
  }

  .os-coach-hero-art {
    cursor: default;
  }
}

.os-coach-value h2,
.os-coach-loop h2,
.os-coach-after h2 {
  font-size: clamp(35px, 5vw, 62px);
}

.os-coach-value-copy {
  max-width: 640px;
}

.os-coach-value-copy p {
  margin: 0;
  color: #d6d6e2;
  font-size: 19px;
  line-height: 1.6;
}

.os-coach-value-copy p + p {
  margin-top: 20px;
}

.os-coach-value-copy p:last-child {
  color: #f2f0ff;
}

.os-coach-fit {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(280px, 1.15fr);
  gap: 18px clamp(36px, 8vw, 124px);
  padding: clamp(74px, 11vw, 140px) 0;
  border-top: 1px solid var(--dark-border);
}

.os-coach-fit .section-label {
  grid-column: 1;
  margin: 0;
  color: var(--coral, #f28c66);
}

.os-coach-fit h2 {
  grid-column: 1;
  margin: 0;
  color: var(--white);
  font-size: clamp(35px, 5vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.os-coach-fit-copy {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.os-coach-fit-copy p {
  max-width: 620px;
  margin: 0;
  color: #d6d6e2;
  font-size: 19px;
  line-height: 1.6;
}

.os-coach-fit-copy p + p {
  margin-top: 20px;
}

/* The first line here used to be set large and cyan, which made it read as a
   second headline competing with the h2 directly above it. It is a sentence in
   the same thought as the paragraphs beneath it, so it is now set like them. */

.os-coach-fit-copy p:last-child {
  color: #f2f0ff;
}

.os-coach-loop {
  padding: clamp(70px, 10vw, 120px) 0;
  border-top: 1px solid var(--dark-border);
}

.os-coach-loop ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: coach-step;
  border-top: 1px solid var(--dark-border);
}

.os-coach-loop li {
  min-height: 220px;
  padding: 24px 20px 16px 0;
  counter-increment: coach-step;
  border-right: 1px solid var(--dark-border);
}

.os-coach-loop li + li {
  padding-left: 20px;
}

.os-coach-loop li::before {
  content: counter(coach-step, decimal-leading-zero);
  display: block;
  margin-bottom: 38px;
  color: var(--coral, #f28c66);
  font: 750 13px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.os-coach-loop strong,
.os-coach-loop span,
.os-coach-after strong,
.os-coach-after span {
  display: block;
}

.os-coach-loop strong,
.os-coach-after strong {
  color: var(--white);
  font-size: 20px;
}

.os-coach-loop span,
.os-coach-after span {
  margin-top: 10px;
  color: #b8b8ca;
  font-size: 14px;
  line-height: 1.55;
}

.os-coach-after {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 8vw, 124px);
  padding: clamp(74px, 11vw, 140px) 0;
  border-top: 1px solid var(--dark-border);
}

.os-coach-after ol {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.os-coach-after li {
  padding: 20px;
  border-left: 3px solid var(--cyan);
  background: var(--dark-surface);
}

.os-coach-after code {
  color: var(--cyan);
  font-size: 0.95em;
}

.os-coach-after-details {
  grid-column: 2;
  display: grid;
  gap: clamp(34px, 5vw, 58px);
  margin-top: 18px;
}

.os-coach-conditions,
.os-coach-included,
.os-coach-guarantee {
  padding-top: 28px;
  border-top: 1px solid var(--dark-border);
}

.os-coach-after h3 {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--white);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.os-coach-conditions p:not(.section-label),
.os-coach-included p:not(.section-label),
.os-coach-guarantee p:not(.section-label) {
  max-width: 640px;
  margin: 16px 0 0;
  font-size: 14px;
}

.os-coach-bonus {
  margin-top: 30px;
  padding: 24px 0 0 22px;
  border-left: 3px solid var(--cyan);
}

.os-coach-bonus .section-label {
  margin: 0;
  color: var(--cyan);
}

.os-coach-bonus h4 {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--white);
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.os-coach-bonus p:not(.section-label) {
  max-width: 560px;
  margin: 14px 0 0;
  color: #d6d6e2;
  line-height: 1.55;
}

.os-coach-status {
  max-width: 760px;
  padding: clamp(90px, 15vw, 180px) 0;
}

.os-coach-status > p:not(.section-label) {
  max-width: 600px;
  margin: 28px 0;
  color: #d6d6e2;
  font-size: 20px;
  line-height: 1.6;
}

@media (max-width: 820px) {
  .os-coach-hero,
  .os-coach-value,
  .os-coach-fit,
  .os-coach-after {
    grid-template-columns: 1fr;
  }

  .os-coach-after-details {
    grid-column: 1;
  }
  .os-coach-hero {
    min-height: auto;
  }
  .os-coach-fit .section-label,
  .os-coach-fit h2,
  .os-coach-fit > p:last-child {
    grid-column: 1;
    grid-row: auto;
  }
  .os-coach-hero-art,
  .os-coach-hero-art img {
    min-height: 260px;
  }
  /* The wall has to stay readable as text on a panel near 320px wide, and the
     script scales the light's radius to the shorter side so it lights a part
     of a short panel rather than all of it. */
  .os-coach-hero-art .rl-field {
    padding: 9px 10px;
    font-size: 11px;
  }
  .os-coach-loop ol {
    grid-template-columns: 1fr;
  }
  .os-coach-loop li,
  .os-coach-loop li + li {
    min-height: auto;
    padding: 24px 0;
    border-right: 0;
    border-bottom: 1px solid var(--dark-border);
  }
  .os-coach-loop li::before {
    margin-bottom: 16px;
  }
  .os-coach-note {
    grid-column: 1;
  }
}

.install-steps span {
  margin-top: 6px;
  color: var(--text-mid);
  line-height: 1.5;
}

.coach-app {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
}

.coach-sidebar {
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  padding: 36px 28px 24px;
  color: var(--white);
  background: var(--dark);
  border-right: 1px solid var(--dark-border);
}

.coach-identity h1 {
  margin: 0;
  max-width: 285px;
  font-size: 30px;
  line-height: 1.06;
}

.coach-identity > p:last-child {
  margin: 14px 0 0;
  color: #b8b8ca;
  font-size: 14px;
  line-height: 1.5;
}

.progress-summary {
  margin: 30px 0 22px;
}

.progress-summary > span {
  display: block;
  margin-bottom: 9px;
  color: #cfcfdd;
  font: 650 12px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.progress-track {
  height: 4px;
  overflow: hidden;
  background: var(--dark-border);
  border-radius: 2px;
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--cyan);
  transition: width 280ms ease;
}

.parts-nav {
  display: grid;
  gap: 2px;
}

.part-button {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: #b8b8ca;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.part-button:hover {
  color: var(--white);
  background: var(--dark-surface);
}

.part-button[aria-current="step"] {
  color: var(--white);
  background: var(--dark-surface);
  border-color: var(--dark-border);
}

.part-number {
  color: var(--cyan);
  font: 700 11px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.part-copy {
  min-width: 0;
}

.part-copy strong,
.part-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.part-copy strong {
  font-size: 13px;
}

.part-copy small {
  margin-top: 3px;
  color: #85859b;
  font-size: 11px;
}

.part-status {
  width: 9px;
  height: 9px;
  border: 2px solid #66667e;
  border-radius: 50%;
}

.status-in-progress {
  border-color: var(--amber);
  background: var(--amber);
}

.status-solid {
  border-color: var(--green);
  background: var(--green);
}

.privacy-note {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--dark-border);
}

.privacy-note strong,
.privacy-note span {
  display: block;
}

.privacy-note strong {
  color: var(--cyan);
  font-size: 12px;
}

.privacy-note span {
  margin-top: 5px;
  color: #85859b;
  font-size: 11px;
  line-height: 1.4;
}

.coach-main {
  min-width: 0;
  background: var(--white);
}

.coach-toolbar {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px clamp(20px, 4vw, 56px);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.coach-toolbar button {
  min-height: 38px;
  padding: 8px 13px;
  font-size: 13px;
}

.coach-workspace {
  width: min(900px, 100%);
  min-height: calc(100vh - 138px);
  padding: clamp(42px, 7vw, 82px) clamp(20px, 6vw, 72px) 80px;
  outline: none;
}

.workspace-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  align-items: start;
  gap: 32px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--border);
  animation: reveal-up 260ms ease-out both;
}

.workspace-header h1 {
  margin: 0;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 0.98;
}

.workspace-summary {
  max-width: 600px;
  margin: 18px 0 0;
  color: var(--text-mid);
  font-size: 17px;
  line-height: 1.6;
}

.output-list {
  display: grid;
  gap: 7px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.output-label {
  color: var(--text-light);
  font: 700 10px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace;
  text-transform: uppercase;
}

.output-list code {
  overflow-wrap: anywhere;
  color: var(--accent-dark);
  font: 650 11px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.coach-form {
  margin-top: 8px;
}

.field-group {
  padding: 30px 0;
  border-bottom: 1px solid var(--border);
  animation: reveal-up 300ms ease-out both;
}

.field-group:nth-child(2) {
  animation-delay: 60ms;
}

.field-group:nth-child(3) {
  animation-delay: 120ms;
}

.field-group label {
  display: block;
  margin-bottom: 12px;
  color: var(--text);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.4;
}

.field-group input,
.field-group textarea {
  width: 100%;
  display: block;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 15px;
  line-height: 1.55;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.field-group input {
  min-height: 50px;
}

.field-group textarea {
  min-height: 126px;
  resize: vertical;
}

.field-group input:hover,
.field-group textarea:hover {
  border-color: #bdbdd0;
}

.field-group input:focus,
.field-group textarea:focus {
  background: var(--white);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.field-group input::placeholder,
.field-group textarea::placeholder {
  color: var(--text-light);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 30px;
}

.review-header {
  grid-template-columns: minmax(0, 1fr);
}

.scorecard {
  margin-top: 10px;
  border-top: 1px solid var(--border);
}

.score-row {
  width: 100%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(92px, auto);
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: color 180ms ease, padding 180ms ease;
}

.score-row:hover {
  color: var(--accent-dark);
  padding-left: 8px;
}

.score-number {
  color: var(--text-light);
  font: 700 12px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.score-result {
  justify-self: end;
  font: 700 11px/1.3 ui-monospace, "SFMono-Regular", Consolas, monospace;
  text-transform: uppercase;
}

.status-text-not-started {
  color: var(--text-light);
}

.status-text-in-progress {
  color: var(--amber);
}

.status-text-solid {
  color: var(--green);
}

.next-action {
  margin-top: 42px;
  padding: 28px 0;
  border-top: 4px solid var(--accent);
  border-bottom: 1px solid var(--border);
}

.next-action h2 {
  margin: 0;
  font-size: clamp(24px, 4vw, 36px);
}

.next-action > p:not(.section-label) {
  max-width: 640px;
  color: var(--text-mid);
  line-height: 1.6;
}

.loading-state,
.app-error {
  color: var(--text-mid);
  font-size: 16px;
}

.app-error {
  padding: 18px;
  border-left: 4px solid var(--red);
  background: var(--red-light);
}

.shell {
  width: min(920px, calc(100% - 40px));
  margin: 0 auto;
  padding: 72px 0;
}

.shell h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(42px, 7vw, 76px);
  line-height: 0.98;
}

.shell > p:not(.section-label) {
  max-width: 660px;
  color: var(--text-mid);
  font-size: 18px;
  line-height: 1.6;
}

.shell nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}

.public-catalog {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(72px, 10vw, 132px) 0 96px;
}

.catalog-page {
  color: var(--white);
  background: var(--dark);
}

.catalog-page .site-progress {
  background: var(--cyan);
}

.catalog-intro {
  max-width: 760px;
  padding-bottom: clamp(52px, 9vw, 104px);
}

.catalog-hero {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
  align-items: end;
  gap: clamp(40px, 7vw, 116px);
}

.catalog-intro-copy {
  max-width: 760px;
}

.catalog-intro h1,
.catalog-member-note h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(46px, 7vw, 82px);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.catalog-intro > p:last-child {
  max-width: 670px;
  margin: 28px 0 0;
  color: #d6d6e2;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
}

.catalog-hourglass {
  width: min(100%, 390px);
  justify-self: end;
  margin: 0;
  color: #b8b8ca;
}

.catalog-hourglass-frame {
  min-height: 388px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #4b4b67;
  background: #101023;
}

.catalog-hourglass-art {
  width: min(100%, 390px);
  height: auto;
  overflow: visible;
}

.hourglass-orbit,
.hourglass-structure,
.hourglass-baseline,
.hourglass-tick {
  fill: none;
  stroke-linecap: square;
}

.hourglass-orbit {
  stroke: #ef6259;
  stroke-width: 2;
  stroke-dasharray: 5 11;
  opacity: 0.82;
}

.hourglass-bar {
  fill: none;
  stroke: #ef6259;
  stroke-width: 7;
  stroke-linecap: square;
}

.hourglass-post {
  fill: none;
  stroke: #97504f;
  stroke-width: 3;
}

.hourglass-glass {
  fill: #121226;
  stroke: #f1eff0;
  stroke-width: 3;
  stroke-linejoin: round;
}

.hourglass-glass-line {
  fill: none;
  stroke: #a29da5;
  stroke-width: 2;
  stroke-linecap: round;
}

.hourglass-sand,
.hourglass-sand-stream,
.hourglass-grain {
  fill: #f1eff0;
}

.hourglass-baseline,
.hourglass-tick {
  stroke: #555570;
  stroke-width: 2;
}

.hourglass-sand-top,
.hourglass-sand-bottom,
.hourglass-sand-stream,
.hourglass-grain {
  transform-box: fill-box;
}

.hourglass-turn {
  transform-box: view-box;
  transform-origin: 210px 210px;
  animation: hourglass-turn 10s linear infinite;
}

.hourglass-sand-top {
  transform-origin: center bottom;
  animation: hourglass-top-sand 10s cubic-bezier(.57, .05, .41, .96) infinite;
}

.hourglass-sand-bottom {
  transform-origin: center bottom;
  animation: hourglass-bottom-sand 10s cubic-bezier(.57, .05, .41, .96) infinite;
}

.hourglass-sand-stream {
  transform-origin: center top;
  animation: hourglass-stream 10s linear infinite;
}

.grain-one,
.grain-two,
.grain-three {
  transform-origin: center;
  animation: hourglass-top-grain 10s linear infinite;
}

.grain-two {
  animation-delay: 100ms;
}

.grain-three {
  animation-delay: 180ms;
}

.grain-four,
.grain-five {
  transform-origin: center;
  animation: hourglass-bottom-grain 10s linear infinite;
}

.catalog-hourglass figcaption {
  max-width: 330px;
  margin-top: 16px;
  color: #b8b8ca;
  font-size: 14px;
  line-height: 1.45;
}

.catalog-hourglass figcaption strong {
  display: block;
  margin-bottom: 4px;
  color: #f2f0ff;
  font-weight: 720;
}

@keyframes hourglass-top-sand {
  0% { transform: scaleY(1); opacity: 1; }
  58% { transform: scaleY(.22); opacity: .9; }
  62% { transform: scaleY(.045); opacity: .62; }
  64%, 100% { transform: scaleY(.025); opacity: 0; }
}

@keyframes hourglass-bottom-sand {
  0% { transform: scaleY(.06); opacity: .75; }
  58% { transform: scaleY(.84); opacity: 1; }
  64%, 100% { transform: scaleY(1); opacity: 1; }
}

@keyframes hourglass-stream {
  0% { transform: scaleY(1); opacity: .9; }
  60% { transform: scaleY(.89); opacity: .9; }
  64%, 100% { transform: scaleY(.89); opacity: 0; }
}

@keyframes hourglass-turn {
  0%, 70% { transform: rotate(0deg); }
  84%, 100% { transform: rotate(180deg); }
}

@keyframes hourglass-top-grain {
  0%, 56% { transform: translateY(0); opacity: 1; }
  61% { transform: translateY(30px); opacity: .8; }
  64%, 100% { transform: translateY(45px); opacity: 0; }
}

@keyframes hourglass-bottom-grain {
  0%, 58% { transform: translateY(-9px); opacity: 0; }
  64%, 100% { transform: translateY(0); opacity: .9; }
}

.catalog-product {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(20px, 4vw, 52px);
  padding: clamp(38px, 6vw, 68px) 0;
  border-top: 1px solid var(--dark-border);
  border-bottom: 1px solid var(--dark-border);
}

.catalog-product-index {
  align-self: start;
  color: var(--cyan);
  font: 750 15px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.catalog-product-copy h2 {
  max-width: 720px;
  margin: 0;
  color: var(--white);
  font-size: clamp(34px, 5vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.catalog-product-copy > p:not(.section-label) {
  max-width: 680px;
  margin: 22px 0 0;
  color: #d6d6e2;
  font-size: 18px;
  line-height: 1.6;
}

.catalog-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 26px 0 0;
  padding: 0;
  color: #b8b8ca;
  font: 650 12px/1.5 ui-monospace, "SFMono-Regular", Consolas, monospace;
  list-style: none;
  text-transform: uppercase;
}

.catalog-facts li::before {
  content: "•";
  margin-right: 7px;
  color: var(--cyan);
}

.catalog-product-action {
  width: 202px;
  min-height: 52px;
  text-align: center;
}

.catalog-member-note {
  max-width: 760px;
  padding: clamp(62px, 9vw, 116px) 0 0;
}

.catalog-member-note h2 {
  max-width: 660px;
  font-size: clamp(32px, 4.8vw, 54px);
}

.catalog-member-note > p:not(.section-label) {
  max-width: 600px;
  margin: 22px 0 28px;
  color: #d6d6e2;
  font-size: 18px;
  line-height: 1.6;
}

.catalog-page .section-label {
  color: var(--cyan);
}

.catalog-page .button-primary {
  color: var(--dark);
  background: var(--cyan);
  border-color: var(--cyan);
}

.catalog-page .button-primary:hover {
  color: var(--white);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgb(6 182 212 / 20%);
}

.catalog-page .button-secondary {
  color: var(--white);
  background: transparent;
  border-color: var(--dark-border);
}

.catalog-page .button-secondary:hover {
  border-color: var(--cyan);
  box-shadow: 0 6px 16px rgb(6 182 212 / 12%);
}

.reveal {
  animation: reveal-up 420ms ease-out both;
}

.reveal-delay-1 {
  animation-delay: 100ms;
}

@keyframes reveal-up {
  from {
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes progress-entry {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

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

  .package-choice {
    min-height: 260px;
  }

  .install-band {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .coach-app {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .coach-sidebar {
    width: 100%;
    min-width: 0;
    min-height: auto;
    padding: 24px 20px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--dark-border);
  }

  .coach-identity h1 {
    max-width: 620px;
    font-size: 28px;
  }

  .progress-summary {
    margin: 18px 0 14px;
  }

  .parts-nav {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .part-button {
    min-width: 150px;
    grid-template-columns: 26px minmax(0, 1fr) 10px;
  }

  .privacy-note {
    margin-top: 14px;
    padding-top: 14px;
  }

  .workspace-header {
    grid-template-columns: 1fr;
  }

  .coach-main {
    width: 100%;
    min-width: 0;
  }

  .output-list {
    width: min(420px, 100%);
  }

  .product-row {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .product-action {
    width: auto;
    grid-column: 2;
    justify-self: start;
  }

  .catalog-product {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .catalog-hero {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .catalog-hourglass {
    width: min(100%, 460px);
    justify-self: start;
  }

  .catalog-product-action {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .os-coach-price-rationale p {
    top: auto;
    right: auto;
    bottom: calc(100% + 10px);
    left: -112px;
    width: min(320px, calc(100vw - 48px));
  }

  .os-coach-bonus {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .member-nav {
    min-height: 64px;
    padding: 10px 16px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .brand small {
    display: none;
  }

  .member-nav nav {
    gap: 12px;
  }

  .member-nav nav a {
    font-size: 12px;
  }

  .member-library {
    width: min(100% - 32px, 1120px);
    padding-top: 56px;
  }

  .member-product {
    width: min(100% - 32px, 1120px);
    padding-top: 48px;
  }

  .product-intro h1 {
    font-size: 50px;
  }

  .product-intro > p:last-child {
    font-size: 17px;
  }

  .package-choice {
    min-height: 0;
    padding: 22px;
  }

  .package-action {
    margin-top: 28px;
  }

  .library-intro h1 {
    font-size: 48px;
  }

  .product-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .product-action {
    grid-column: 1;
  }

  .coach-toolbar {
    min-height: 58px;
    justify-content: stretch;
    padding: 8px 12px;
  }

  .coach-toolbar button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 8px;
  }

  .coach-workspace {
    min-height: calc(100vh - 122px);
    padding: 38px 18px 64px;
  }

  .workspace-header h1 {
    font-size: 44px;
  }

  .workspace-summary {
    font-size: 16px;
  }

  .score-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .score-result {
    grid-column: 2;
    justify-self: start;
  }

  .shell {
    width: min(100% - 32px, 920px);
    padding-top: 56px;
  }

  .public-catalog {
    width: min(100% - 32px, 1120px);
    padding-top: 56px;
  }

  .catalog-product {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .catalog-hourglass-frame {
    min-height: 326px;
  }

  .catalog-product-action {
    grid-column: 1;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Public Tool Library: third-party resources are separate from member downloads. */
.tool-library-page {
  color: var(--text);
  background: var(--bg);
}

.tool-library {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) 0 88px;
}

.tool-library-hero {
  max-width: 780px;
  padding-bottom: clamp(48px, 7vw, 88px);
  border-bottom: 4px solid var(--accent);
}

.tool-library-hero h1,
.tool-library-section h2,
.tool-library-disclaimer h2,
.checkout-start h1 {
  margin: 0;
  color: var(--text);
  letter-spacing: -0.045em;
}

.tool-library-hero h1 {
  font-size: clamp(46px, 7vw, 82px);
  line-height: .96;
}

.tool-library-hero > p:last-child,
.tool-library-blurb,
.tool-grid p,
.tool-howto-grid p,
.tool-library-disclaimer p,
.checkout-start > p {
  color: var(--text-mid);
  font-size: 16px;
  line-height: 1.65;
}

.tool-library-hero > p:last-child { max-width: 620px; margin: 24px 0 0; font-size: 19px; }

.tool-library-section { padding: clamp(48px, 7vw, 80px) 0; border-bottom: 1px solid var(--border); }
.tool-library-section h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.04; }
.tool-library-blurb { margin: 12px 0 30px; }

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

.tool-grid article,
.tool-howto-grid article,
.tool-library-disclaimer {
  min-width: 0;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid #151515;
  border-radius: 6px;
}

.tool-grid article { display: flex; flex-direction: column; }
.tool-grid h3,
.tool-howto-grid h3 { margin: 0; color: var(--text); font-size: 19px; line-height: 1.2; }
.tool-grid p,
.tool-howto-grid p { margin: 14px 0 0; font-size: 14px; }
.tool-grid a { margin-top: auto; padding-top: 20px; color: var(--accent-dark); font: 700 12px/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.tool-library-disclaimer { margin-top: 56px; border-top-color: var(--accent); }
.tool-library-disclaimer h2 { font-size: 22px; }
.tool-library-disclaimer p { margin: 12px 0 0; font-size: 14px; }

.checkout-start { max-width: 680px; }
.checkout-start > p { margin: 20px 0; font-size: 18px; }
.checkout-start form { margin-top: 28px; }

@media (max-width: 980px) {
  .member-nav { align-items: flex-start; gap: 12px; }
  .member-nav nav { justify-content: flex-end; flex-wrap: wrap; gap: 6px 14px; }
  .tool-grid,
  .tool-howto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .member-nav { display: block; }
  .member-nav nav { justify-content: flex-start; margin-top: 8px; }
  .member-nav nav a { padding: 5px 0; }
  .tool-library { width: min(100% - 32px, 1180px); padding-top: 52px; }
  .tool-grid,
  .tool-howto-grid { grid-template-columns: 1fr; }
}