/* 8play.dev: a scorekeeper's sheet. Ink on cool paper, one ballpoint blue used only for marks. */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("/fonts/BigShouldersDisplay.woff2") format("woff2");
  font-weight: 800 900;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/HankenGrotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --paper: #eef0f1;
  --ink: #121417;
  --mute: #565c64;
  --line: rgb(18 20 23 / 0.16);
  --blue: #2234e8;
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  --text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --wrap: 68rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink) var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
::selection { background: var(--blue); color: var(--paper); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
a { color: inherit; text-decoration-color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
a:hover { color: var(--blue); }
img { display: block; max-width: 100%; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; }

.skip { position: absolute; left: var(--gutter); top: -4rem; background: var(--ink); color: var(--paper); padding: 0.5rem 0.9rem; z-index: 10; }
.skip:focus { top: 0.75rem; }
.skip:hover { color: var(--paper); }

/* header + footer */
.top, .foot, main { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.25rem; }
.mark { display: inline-flex; align-items: center; gap: 0.625rem; font: 900 2rem/1 var(--display); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; }
.studio-logo { width: 3rem; height: 2rem; flex: none; image-rendering: pixelated; }
.mark:hover { color: var(--ink); }
.top nav, .foot nav { display: flex; gap: 1.5rem; }
.top nav a, .foot nav a { text-decoration: none; font-weight: 500; }
.top nav a:hover, .foot nav a:hover { text-decoration: underline; text-decoration-color: var(--blue); }
main { flex: 1; }
.foot { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; padding-block: 2.5rem 2rem; margin-top: 5rem; border-top: 2px solid var(--ink); color: var(--mute); font-size: 0.9375rem; }
.foot p { margin: 0; }
.foot nav a { color: var(--ink); }
.footer-studio { max-width: 38rem; }
.foot .footer-name { font: 800 1.75rem/1.1 var(--display); color: var(--ink); margin-bottom: 0.4rem; }
.footer-studio address { font-style: normal; margin-block: 0.75rem; }
.footer-studio a { color: var(--ink); }
.footer-links { display: grid; gap: 1.25rem; align-content: start; }
.foot nav { flex-wrap: wrap; }
.foot .copyright { width: 100%; padding-top: 1.5rem; margin-top: 1rem; border-top: 1px solid var(--line); font-size: 0.8125rem; }
.github-link { display: inline-flex; align-items: center; gap: 0.5rem; }
.github-icon { width: 1.25rem; height: 1.25rem; flex: none; }
.studio-details > div { grid-template-columns: 11rem minmax(0, 1fr); }
.studio-details dd { overflow-wrap: anywhere; }
.product-icon { display: grid; align-items: center; }
.product-icon img { object-fit: contain; }
.product-icon.sprite-s { width: 4rem; height: 4rem; }
.product-icon.sprite-l { width: 9rem; height: 9rem; }
.apps-intro { margin-bottom: 1rem; }
.product-showcase { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; padding-top: 0.75rem; }
.product-showcase figure, .screenshots figure { margin: 0; min-width: 0; }
.product-showcase a { text-decoration: none; }
.product-showcase img { width: 100%; height: auto; }
.product-showcase figcaption { display: grid; margin-top: 0.75rem; }
.product-showcase figcaption strong { font: 800 1.5rem/1.1 var(--display); }
.product-showcase figcaption span, .screenshots figcaption { font-size: 0.875rem; color: var(--mute); margin-top: 0.25rem; }
.screenshots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; max-width: 56rem; }
.screenshots img { width: 100%; height: auto; }

/* type */
h1, h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(3.25rem, 9.5vw, 6rem); line-height: 0.92; letter-spacing: -0.005em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.25rem); line-height: 1; font-weight: 800; letter-spacing: 0.005em; }
.lede { font-size: clamp(1.1875rem, 2.2vw, 1.4375rem); line-height: 1.5; max-width: 38em; margin: 1.25rem 0 0; text-wrap: pretty; }
.big { font: 800 clamp(2rem, 6vw, 3.5rem)/1 var(--display); margin: 1.25rem 0 0; }
.big a { text-decoration-thickness: 3px; text-underline-offset: 0.12em; text-decoration-skip-ink: none; }
.note { color: var(--mute); margin: 0.75rem 0 0; max-width: 34em; }

/* home */
.hero { padding-block: clamp(1.5rem, 5vw, 4rem) clamp(1.5rem, 3.5vw, 2.5rem); }
.hero h1 { max-width: 11em; }
.studio-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 2rem; }
.studio-intro { min-width: 0; }
.studio-hero h1 { font-size: clamp(3.25rem, 7vw, 5.5rem); max-width: 9em; }
.studio-hero .lede { max-width: 29em; }
.studio-note { color: var(--mute); max-width: 36em; margin: 1rem 0 0; }
.studio-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin-top: 1.5rem; font-weight: 600; }
.studio-links a { display: inline-flex; align-items: center; gap: 0.5rem; }
.studio-links a:hover .go { stroke: var(--blue); }
.studio-art { position: relative; width: 100%; max-width: 28rem; aspect-ratio: 224 / 200; align-self: center; image-rendering: pixelated; }
.studio-art img { width: 100%; height: 100%; }
.studio-film { position: absolute; inset: 0; background: url('/assets/studio-dev-sheet.png') 0 0 / 1200% 100% no-repeat; animation: studio-type 3.6s steps(11) forwards; }
.studio-hero:hover .studio-film, .studio-hero:focus-within .studio-film { animation-name: studio-type-replay; }
@keyframes studio-type { to { background-position: 100% 0; } }
@keyframes studio-type-replay { to { background-position: 100% 0; } }
.studio-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2rem; padding-top: 0.5rem; }
.studio-statement { font: 800 clamp(1.75rem, 3vw, 2.5rem)/1.15 var(--display); margin: 0; }
.studio-story { max-width: 42em; }
.studio-story p { margin: 0 0 1rem; text-wrap: pretty; }
.studio-story p:last-child { margin-bottom: 0; }

.block { margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 2px solid var(--ink); padding-top: 1rem; }
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; min-height: 3rem; margin-bottom: 1rem; }

.tally { height: 2.75rem; width: auto; overflow: visible; flex: none; }
.tally path { fill: none; stroke: var(--blue); stroke-width: 3.25; stroke-linecap: round; stroke-dasharray: 1; animation: draw 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.apps { list-style: none; margin: 0; padding: 0; }
.apps li + li { border-top: 1px solid var(--line); }
.app {
  display: grid;
  grid-template-columns: 4rem 1fr auto 1.25rem;
  align-items: center;
  gap: 0 1.5rem;
  padding-block: 1.25rem;
  text-decoration: none;
  color: var(--ink);
}
.app-main { display: grid; gap: 0.125rem; }
.app-name { font: 900 clamp(2rem, 5vw, 3rem)/1 var(--display); text-transform: uppercase; }
.app-line { color: var(--mute); }
.app-meta { display: grid; gap: 0.125rem; justify-items: end; text-align: right; font-size: 0.9375rem; }
.status { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.plat { color: var(--mute); }
.go { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.15s; }
.app:hover .app-name, .app:focus-visible .app-name { color: var(--blue); }
.app:hover .go, .app:focus-visible .go { transform: translateX(0.35rem); stroke: var(--blue); }

.dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; flex: none; border: 2px solid var(--ink); }
.dot-live { background: var(--ink); }
.dot-review { background: var(--blue); border-color: var(--blue); }
.dot-development { background: transparent; }

/* sprites: still by default, animated on hover or focus, and never animated under reduced motion */
.sprite { display: grid; flex: none; image-rendering: pixelated; }
.sprite img { grid-area: 1 / 1; image-rendering: pixelated; }
.sprite .anim { visibility: hidden; }
.sprite-s { width: 4rem; height: 4rem; justify-items: center; align-items: center; }
.sprite-s img { height: 4rem; width: auto; max-width: 4rem; object-fit: contain; }
.sprite-l { height: 12rem; justify-items: end; }
.sprite-l img { height: 12rem; width: auto; }
.app:hover .sprite .anim, .app:focus-visible .sprite .anim, .app-hero:hover .sprite .anim { visibility: visible; }
@media (hover: hover) { .app:hover .sprite .still, .app:focus-visible .sprite .still, .app-hero:hover .sprite .still { visibility: hidden; } }

.facts { margin: 0; }
.facts > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding-block: 0.9rem; border-top: 1px solid var(--line); }
.facts > div:first-child { border-top: 0; }
.facts dt { font-weight: 700; }
.facts dd { margin: 0; max-width: 42em; text-wrap: pretty; }

/* app page */
.crumb { margin: 0.5rem 0 0; color: var(--mute); font-size: 0.9375rem; }
.crumb a { color: var(--ink); text-decoration: none; font-weight: 600; }
.crumb a:hover { text-decoration: underline; text-decoration-color: var(--blue); }
.app-hero { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; padding-block: clamp(1.5rem, 5vw, 3.5rem) clamp(2rem, 5vw, 3rem); }
.status-line { display: flex; align-items: flex-start; gap: 0.6rem; margin: 1.5rem 0 0; max-width: 40em; }
.status-line .dot { margin-top: 0.5rem; }
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 1.5rem 0 0; }
.badge { display: block; line-height: 0; }
.badge img { height: 2.75rem; width: auto; }
.badge:hover img { opacity: 0.85; }
.plain { margin: 0; padding: 0; list-style: none; }
.plain li { padding-block: 0.75rem; border-top: 1px solid var(--line); }
.plain li span { display: block; max-width: 44em; text-wrap: pretty; }
.plain li:first-child { border-top: 0; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.5rem minmax(0, 44em); padding-block: 0.75rem; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; }
.steps li::before { content: counter(s); font: 900 1.5rem/1.3 var(--display); color: var(--ink); }

/* long-form pages */
.doc main { padding-top: clamp(1.5rem, 5vw, 3.5rem); }
.prose { max-width: 44rem; }
.prose h1 { margin-bottom: 0.75rem; }
.prose .meta { color: var(--mute); margin: 0 0 2rem; }
.prose h2 { margin: 3rem 0 0.75rem; padding-top: 1rem; border-top: 2px solid var(--ink); }
.prose h3 { font: 700 1.125rem/1.4 var(--text); margin: 1.75rem 0 0.25rem; }
.prose p, .prose li { text-wrap: pretty; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-block: 0.5rem; }
.prose li::marker { color: var(--blue); }
.prose :target { scroll-margin-top: 1.5rem; }

@media (max-width: 40rem) {
  .product-showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .screenshots { display: flex; overflow-x: auto; gap: 1rem; padding-bottom: 1rem; scroll-snap-type: x proximity; }
  .screenshots figure { flex: 0 0 78%; scroll-snap-align: start; }
  .product-icon.sprite-l { width: 6rem; height: 6rem; }
  .studio-details > div { grid-template-columns: 1fr; }
  .footer-links { width: 100%; margin-top: 1rem; }
  .mark { font-size: 1.5rem; gap: 0.5rem; }
  .studio-logo { width: 2.25rem; height: 1.5rem; }
  .studio-hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .studio-hero h1 { max-width: 10em; }
  .studio-art { max-width: 18rem; justify-self: center; }
  .studio-about { grid-template-columns: 1fr; gap: 1.25rem; }
  body { font-size: 1rem; }
  .top nav { gap: 1.1rem; }
  .app { grid-template-columns: 4rem 1fr; grid-template-areas: "s m" "s t"; gap: 0.25rem 1rem; align-items: start; }
  .app .sprite { grid-area: s; }
  .app-main { grid-area: m; }
  .app-meta { grid-area: t; justify-items: start; text-align: left; grid-auto-flow: column; gap: 0.25rem 0.75rem; }
  .go { display: none; }
  .facts > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .app-hero { grid-template-columns: 1fr; }
  .app-hero .sprite-l { order: -1; height: 8rem; justify-self: start; }
  .app-hero .sprite-l img { height: 8rem; }
  .shead { align-items: center; }
  .tally { height: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-film { display: none; animation: none; }
  .tally path { animation: none; }
  .sprite .anim { display: none; }
  .sprite .still { visibility: visible !important; }
  .go { transition: none; }
}

/* Primary coaching project: the staff handoff ends at a human decision. */
.flagship-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-bottom: 3rem; }
.flagship-intro { min-width: 0; }
.flagship-hero h1 { font-size: clamp(3.25rem, 7.5vw, 6rem); max-width: 9em; }
.flagship-hero .lede { max-width: 30em; }
.flagship-hero .status-line { font-size: 0.9375rem; color: var(--mute); }
.flagship-hero .status-line strong { color: var(--ink); }
.project-primary { font-weight: 700; text-decoration-thickness: 2px; }
.handoff { margin: 0; border-top: 2px solid var(--ink); padding-top: 0.875rem; }
.handoff figcaption { font-weight: 600; color: var(--mute); }
.handoff p { margin: 0; }
.handoff .handoff-input { font-size: 1.1875rem; margin-top: 1.25rem; max-width: 22em; }
.handoff .handoff-route { padding-block: 1rem; margin-top: 1rem; border-top: 1px solid var(--line); font-weight: 700; }
.handoff-staff { margin: 0; padding: 0 0 1.25rem; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; color: var(--mute); font-size: 0.9375rem; }
.handoff .handoff-review { border-top: 2px solid var(--ink); padding-block: 1.25rem 0.75rem; font: 800 clamp(2rem, 3.5vw, 3rem)/1 var(--display); text-transform: uppercase; text-wrap: balance; text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 0.14em; }
.handoff .handoff-outcome { margin-top: 0.5rem; color: var(--mute); }
.project-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; border-top: 2px solid var(--ink); padding-top: 1.5rem; }
.project-summary h2 { max-width: 15em; }
.project-summary p { margin: 0; max-width: 35em; }
.project-index { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; border-block: 1px solid var(--line); padding-block: 1rem; font-weight: 600; }
.project-page :target { scroll-margin-top: 1.5rem; }
.project-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 2rem; padding-top: 1.5rem; }
.project-section h2 { max-width: 13em; }
.project-reading { min-width: 0; }
.project-reading > p:first-child { margin-top: 0; }
.project-reading .facts { margin-top: 1.5rem; }
.staff-list { margin: 1.75rem 0 0; }
.staff-list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 2rem; padding-block: 1.5rem; border-top: 1px solid var(--line); }
.staff-list dt { font: 800 clamp(1.75rem, 3vw, 2.25rem)/1.1 var(--display); }
.staff-list dd { margin: 0; max-width: 42em; }
.staff-list h3, .review-steps h3 { font: 700 1.1875rem/1.4 var(--text); margin: 0; }
.staff-list p { margin: 0.5rem 0 0; }
.staff-list .staff-boundary { color: var(--mute); font-size: 0.9375rem; margin-top: 0.75rem; }
.review-steps { list-style: none; padding: 0; margin: 0; counter-reset: review; }
.review-steps li { position: relative; counter-increment: review; padding: 0 0 1.5rem 2.75rem; }
.review-steps li + li { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.review-steps li::before { content: counter(review); position: absolute; left: 0; font: 800 1.75rem/1 var(--display); }
.review-steps p { margin: 0.5rem 0 0; max-width: 38em; }
.scope-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; margin-top: 1.75rem; }
.scope-columns h3 { font: 800 1.75rem/1 var(--display); margin: 0 0 0.75rem; }
.scope-facts { margin-top: 2rem; border-top: 1px solid var(--line); }
@media (max-width: 52rem) {
  .flagship-hero { grid-template-columns: 1fr; gap: 2.5rem; }
  .flagship-hero h1 { max-width: 10em; }
  .handoff { max-width: 36rem; width: 100%; }
}
@media (max-width: 40rem) {
  .flagship-hero { padding-block: 1.75rem 2rem; }
  .flagship-hero h1 { font-size: clamp(3.25rem, 12vw, 4.5rem); }
  .project-summary, .project-section, .staff-list > div, .scope-columns { grid-template-columns: 1fr; gap: 1.25rem; }
  .project-index { gap: 0.375rem 1.25rem; font-size: 0.9375rem; }
  .project-index a, .studio-links a { min-height: 2.75rem; display: inline-flex; align-items: center; }
  .project-primary .go { display: block; }
  .scope-columns { gap: 2rem; }
  .staff-list > div { padding-block: 1.5rem; gap: 0.75rem; }
  .handoff .handoff-review { font-size: 2.5rem; max-width: 12em; }
}

/* Coaching-first homepage. Photos are editorial; the map is a readable system diagram. */
.project-image { margin: 0; min-width: 0; }
.project-image img { width: 100%; object-fit: cover; filter: grayscale(1); }
.project-image figcaption { font-size: 0.8125rem; line-height: 1.5; color: var(--mute); margin-top: 0.75rem; }
.project-image figcaption a { display: inline; }
.hero-ai-image img { height: clamp(25rem, 42vw, 35rem); object-position: center 63%; }
.hero-ai-image { align-self: stretch; padding-top: 0.5rem; }
.coaching-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; padding-top: 1.5rem; }
.coaching-overview h2 { max-width: 14em; }
.coaching-overview-text > p { max-width: 34em; }
.companion-image img { aspect-ratio: 16 / 10; height: auto; }
.staff-map { position: relative; height: 650px; margin-top: 2rem; }
.map-connectors { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-connectors path { fill: none; stroke: var(--blue); stroke-width: 1.5; }
.map-dots { fill: var(--blue); }
.map-node { position: absolute; width: 27%; background: var(--paper); padding: 0.75rem; }
.map-node h3 { font: 800 clamp(1.75rem, 2.6vw, 2.25rem)/1.1 var(--display); margin: 0.5rem 0 0; }
.map-node p, .map-node span { display: block; margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--mute); }
.map-node a { display: inline-block; margin-top: 0.5rem; font-size: 0.875rem; }
.agent-icon { width: 2rem; height: 2rem; stroke: var(--ink); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map-client { width: 36%; left: 32%; top: 0; text-align: center; }
.map-orchestrator { width: 22%; left: 39%; top: 220px; text-align: center; border-block: 2px solid var(--ink); padding-block: 1.25rem; }
.map-orchestrator h3 { font-size: clamp(2rem, 3vw, 2.75rem); margin: 0; }
.map-form { left: 0; top: 85px; }
.map-recovery { right: 0; top: 85px; }
.map-companion { left: 0; top: 355px; }
.map-report { right: 0; top: 355px; }
.map-approval { position: absolute; width: 34%; left: 33%; top: 452px; margin: 0; padding: 0.5rem; font-size: 0.875rem; text-align: center; background: var(--paper); color: var(--mute); }
.map-coach { width: 44%; left: 28%; top: 555px; text-align: center; }
.map-coach h3 { font-size: clamp(2.25rem, 4vw, 3rem); margin: 0; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 0.16em; text-decoration-thickness: 2px; }
.secondary-projects h2 { font-size: 1.75rem; }
.portfolio-disclosure { margin-top: 1rem; border-block: 1px solid var(--line); }
.portfolio-disclosure summary { cursor: pointer; padding-block: 1.125rem; font-weight: 600; }
.portfolio-disclosure summary::marker { color: var(--blue); }
.secondary-apps { list-style: none; padding: 0; margin: 0; }
.secondary-apps li { border-top: 1px solid var(--line); }
.secondary-apps a { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto 1.25rem; gap: 1rem; align-items: center; padding-block: 1rem; text-decoration: none; }
.secondary-name { font-weight: 700; }
.secondary-line { color: var(--mute); font-size: 0.9375rem; }
.secondary-apps .status { font-size: 0.875rem; }
@media (max-width: 52rem) {
  .hero-ai-image { max-width: 100%; }
  .hero-ai-image img { height: 24rem; }
  .coaching-overview { gap: 2rem; }
  .staff-map { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; padding: 0; }
  .map-connectors { display: none; }
  .map-node { position: static; width: auto; padding: 0.75rem 0; background: none; }
  .map-client, .map-orchestrator, .map-coach { grid-column: 1 / -1; text-align: left; }
  .map-orchestrator { order: 0; padding-block: 1.5rem; }
  .map-client { order: -1; border-bottom: 1px solid var(--line); }
  .map-form, .map-recovery, .map-companion, .map-report { border-top: 1px solid var(--line); }
  .map-approval { position: static; width: auto; grid-column: 1 / -1; text-align: left; border-top: 1px solid var(--line); padding: 1rem 0 0; }
  .map-coach { padding-top: 0; }
}
@media (max-width: 40rem) {
  .hero-ai-image img { height: 20rem; }
  .coaching-overview { grid-template-columns: 1fr; gap: 1.5rem; }
  .staff-map { gap: 1.25rem 1rem; }
  .map-node h3 { font-size: 1.75rem; }
  .map-node a { min-height: 2.75rem; display: inline-flex; align-items: center; }
  .map-coach h3 { font-size: 2.5rem; }
  .secondary-apps a { grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; }
  .secondary-line { grid-column: 1; grid-row: 2; }
  .secondary-apps .status { grid-column: 2; grid-row: 1 / 3; }
}

/* generated: draw delays */
.tally path:nth-child(1){animation-delay:0.35s}
.tally path:nth-child(2){animation-delay:0.57s}
.tally path:nth-child(3){animation-delay:0.79s}
.tally path:nth-child(4){animation-delay:1.01s}
.tally path:nth-child(5){animation-delay:1.23s}
.tally path:nth-child(6){animation-delay:1.45s}
.tally path:nth-child(7){animation-delay:1.67s}
.tally path:nth-child(8){animation-delay:1.89s}
.tally path:nth-child(9){animation-delay:2.11s}
.tally path:nth-child(10){animation-delay:2.33s}
.tally path:nth-child(11){animation-delay:2.55s}
.tally path:nth-child(12){animation-delay:2.77s}
.tally path:nth-child(13){animation-delay:2.99s}
.tally path:nth-child(14){animation-delay:3.21s}
.tally path:nth-child(15){animation-delay:3.43s}
.tally path:nth-child(16){animation-delay:3.65s}
.tally path:nth-child(17){animation-delay:3.87s}
.tally path:nth-child(18){animation-delay:4.09s}
.tally path:nth-child(19){animation-delay:4.31s}
.tally path:nth-child(20){animation-delay:4.53s}