/* QA Agent marketing site. Named lane: sfcompute plainness — one 576px white
   column, 24px serif h1, headings barely larger than body, one physical CTA.
   System fonts only. House rules: ~/.claude/skills/house-style. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #262626;
  --soft: #737373;
  --faint: #a3a3a3;
  --hairline: #e5e5e5;
  --card: #fafafa;
  /* Named families before the ui-* generics. ui-serif resolves to New
     York on iOS and to Georgia in desktop Chrome, so the two platforms
     rendered different type; naming the family makes them agree. */
  --serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

html { -webkit-font-smoothing: antialiased; }

body {
  background: #ffffff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

.col {
  max-width: 576px;
  margin: 0 auto;
  padding: 32px 16px 96px;
}
@media (min-width: 640px) {
  .col { padding-top: 48px; }
}

/* nav */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 32px;
}
.mark { width: 26px; height: 26px; opacity: 0.65; }
.mark-small { width: 18px; height: 18px; opacity: 0.5; }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-right a {
  color: var(--soft);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nav-right a:hover { color: var(--ink); }
/* the repo pill: mark + name + star count, soft, quiet */
a.gh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border: 1px solid rgba(26, 26, 26, 0.1);
  border-radius: 999px;
  background: transparent;
  text-decoration: none;
  color: var(--ink);
}
a.gh:hover { border-color: rgba(26, 26, 26, 0.26); background: #ffffff; }
.gh-mark { width: 16px; height: 16px; opacity: 0.85; }
.gh-stars {
  padding-left: 8px;
  border-left: 1px solid rgba(26, 26, 26, 0.14);
  color: var(--soft);
  font-variant-numeric: tabular-nums;
}
/* heyclicky Windows-variant gray gloss pill */
a.btn-small {
  text-decoration: none;
  color: #000000;
  border: 1px solid #626262;
  border-radius: 999px;
  padding: 5px 14px 6px;
  font-size: 13px;
  font-weight: 500;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, #fbfbfb 0%, #ededed 42%, #e4e4e4 100%);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    inset 0 -3px 4px -2px rgba(0, 0, 0, 0.15);
  transition: transform 0.12s ease, opacity 0.15s ease;
}
a.btn-small:hover {
  color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.13), inset 0 1px 1px rgba(255,255,255,0.85), inset 0 -3px 4px -2px rgba(0,0,0,0.15);
}
a.btn-small:active { transform: translateY(1px) scale(0.985); }

/* type */
h1 {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  padding-bottom: 16px;
  text-wrap: balance;
}
h2 {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  padding-bottom: 8px;
}
h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  padding: 8px 0 2px;
}
p { padding-bottom: 8px; }
section { padding: 32px 0 0; }

/* CTA — heyclicky Aqua pill: gradient fill, border far darker than fill,
   letterpress black label, screen-gloss top strip, color-burn bottom shade */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 24px 1px;
  margin-top: 10px;
  border-radius: 999px;
  border: 1px solid #221898;
  background: linear-gradient(180deg, #edf4ff 0%, #d6e7ff 18%, #a2c7ff 50%, #99cbf8 80%, #a2d2f7 100%);
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.3px;
  text-decoration: none;
  text-shadow: 0 2px 2px rgba(255, 255, 255, 0.8);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.cta::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 12px;
  right: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  mix-blend-mode: screen;
  pointer-events: none;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  box-shadow:
    inset 0 -8px 10px -6px rgba(34, 24, 152, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.7);
}
.cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 14px 28px rgba(34, 24, 152, 0.18), 0 2px 6px rgba(34, 24, 152, 0.14);
}
.cta:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.95);
  box-shadow: 0 2px 5px rgba(34, 24, 152, 0.22);
}
.caveat { font-size: 12px; color: var(--soft); padding-top: 6px; }

/* report artifact */
.report {
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  margin-top: 8px;
}

/* steps */
ol { padding-left: 20px; }
ol li { padding-bottom: 8px; }

/* quote */
.quote {
  background: var(--card);
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 16px;
  margin-top: 8px;
  color: #525252;
}
.quote p { padding-bottom: 8px; }
.quote b { color: var(--ink); }
.quote footer { font-size: 14px; color: var(--soft); }

/* ledger rows */
.ledger { display: flex; flex-direction: column; }
.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dotted var(--hairline);
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
}
.row span:last-child {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
}
.row-label { display: flex; align-items: center; gap: 10px; }
.ri { width: 16px; height: 16px; opacity: 0.55; flex-shrink: 0; }

/* faq */
section h3 + p { color: #404040; }

/* footer */
footer {
  background: transparent;
}
.footer-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  font-size: 12px;
  color: var(--soft);
  border-top: 1px solid var(--hairline);
}

@media (prefers-reduced-motion: reduce) {
  .cta, a.btn-small, .copy-btn { transition: none; }
  .cc-caret { animation: none; }
  .orb-cluster i { animation: none; opacity: 0.6; }
  /* static end state: the film is in the chat, no working line */
  .cc-spin { display: none; }
}

/* ── v2 additions: accents, sample film, TR panel, situ card, agents,
   install, vision. Accent colors are deliberate small touches only:
   acid green (Cabra card) for "live/today", host yellow for "soon". */
:root {
  --acid: #c9f24b;
  --host-yellow: #f3f94e;
  --panel: #121212;
}

.lede { font-size: 17px; color: var(--ink); }

.sample-film {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  margin-top: 8px;
  display: block;
  background: #111;
}

/* TR-100-register session record: dark panel, mono, hairline grid */
.tr-panel {
  margin-top: 12px;
  background: var(--panel);
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  overflow-x: auto;
}
.tr-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid #2a2a2a;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--acid);
}
.tr-head span:last-child { color: #8a8a8a; letter-spacing: 0; }
.tr-panel pre {
  padding: 10px 12px 12px;
  font-family: var(--mono);
  font-size: clamp(9px, 2.5vw, 12px);
  line-height: 1.7;
  color: #d4d4d4;
  white-space: pre;
}
.tr-err { color: #f87171; }
.figcap { font-size: 13px; color: var(--soft); padding-top: 6px; }

/* in-situation card: a PR comment, drawn not screenshotted */
.situ { margin-top: 8px; }
.situ-card {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
}
.situ-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--card);
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--soft);
}
.situ-bar img { width: 16px; height: 16px; }
.situ-bar b { color: var(--ink); font-weight: 500; }
.situ-ref { font-family: var(--mono); font-size: 12px; }
.situ-body { padding: 12px; }
.situ-body img {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  margin: 4px 0 6px;
}
.situ-meta { font-size: 13px; color: var(--soft); padding-bottom: 0; }
.situ-meta u { color: var(--ink); text-underline-offset: 2px; }

/* terminal block (install) */
.terminal {
  background: var(--panel);
  color: #d4d4d4;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre-wrap;
  margin-top: 4px;
}

/* copy button in the corner of a terminal block. The 66px gutter is wider
   than the button footprint (52 + 8), so command text stops clear of the
   button at every width. The fixed width keeps "copied" the size of
   "copy". .nb holds a command together, so a wrapped block breaks between
   commands and never inside one. */
.copy-block { position: relative; }
.copy-block .terminal { padding-right: 66px; }
.terminal .nb { white-space: nowrap; }
.copy-btn {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 52px;
  border: 1px solid #2f2f2f;
  border-radius: 4px;
  background: #1d1d1d;
  color: #8a8a8a;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  padding: 3px 0;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.copy-btn[hidden] { display: none; }
.copy-btn:hover { color: #d4d4d4; border-color: #4a4a4a; }
.copy-btn:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }

/* works-with agents */
.agents {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 6px 0 2px;
}
.agent {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  color: var(--ink);
}
.agent img { width: 15px; height: 15px; opacity: 0.8; }
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.dot.today { background: var(--acid); outline: 1px solid #9dbe2a; }
.dot.soon { background: var(--host-yellow); outline: 1px solid #c9c421; }
.agents-legend { font-size: 12px; color: var(--faint); padding: 2px 0 6px; }
.inline-ico {
  width: 13px; height: 13px; opacity: 0.7;
  vertical-align: -1px; margin-right: 3px;
}

/* founder vision block: no rule before it, whitespace does the separation */
.vision {
  margin-top: 56px;
}
.vision p { color: #404040; }
.vision-sig {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-size: 15px;
  padding-bottom: 0;
}
.vision-sig img { width: 18px; height: 18px; }

/* works-with logo grid: one readable line, wraps on small screens */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 8px;
  padding: 10px 0 4px;
  text-align: center;
}
.lg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--soft);
}
.lg img {
  width: 24px;
  height: 24px;
  filter: brightness(0);
  opacity: 0.85;
}

/* brand wordmark above the hero */
.wordmark { width: 96px; height: auto; margin-bottom: 12px; display: block; opacity: 0.92; }

/* who-uses-it sunseal icons */
.who-ico { width: 18px; height: 18px; vertical-align: -3px; margin-right: 7px; opacity: 0.8; }

/* join-in banner: Gil Scott-Heron register, green field, red burst */
.banner-strip {
  margin-top: 32px;
  padding: 16px 20px;
  background: var(--acid);
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.banner-strip p { padding: 0; font-weight: 500; color: #1a1a1a; }
.burst {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 82px;
  height: 82px;
  background: #e8492a;
  clip-path: polygon(50% 0%, 61% 20%, 80% 7%, 78% 29%, 100% 25%, 87% 44%,
    100% 55%, 81% 62%, 92% 82%, 70% 76%, 68% 100%, 52% 81%, 36% 98%,
    33% 76%, 12% 84%, 22% 63%, 0% 58%, 16% 44%, 2% 28%, 24% 30%, 20% 8%, 39% 18%);
  color: #111111;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.1;
  text-align: center;
}

.lg-label {
  font-size: 12px;
  color: var(--faint);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  padding: 10px 0 0;
}

/* coding-agent mockup: recognizable, drawn. Palette researched 2026-08-21
   from Anthropic's brand-guidelines skill and Claude Code docs:
   dark #141413, coral #d97757, mid-gray #b0aea5, input-border blue #6a9bcc. */
.cc-card {
  margin-top: 8px;
  background: #141413;
  border: 1px solid #33322f;
  border-radius: 8px;
  overflow: hidden;
}
.cc-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #33322f;
  font-size: 12px;
  color: #b0aea5;
}
.cc-bar .cc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #3c3c3c;
}
.cc-body {
  padding: 12px 14px 14px;
  font-family: var(--mono);
  /* Type scales down on narrow screens so the mock reads whole on a
     phone. Desktop keeps 12.5px (the clamp tops out inside .col). */
  font-size: clamp(8.5px, 2.42vw, 12.5px);
  line-height: 1.75;
  color: #c9c7c1;
  overflow-x: auto;
  white-space: pre;
}
.cc-user { color: #b0aea5; }
.cc-claude { color: #d97757; }
.cc-link { color: #6a9bcc; }

/* works-with as logo-bullet rows */
.tool-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
  font-size: 15px;
}
.tool-row img { width: 17px; height: 17px; filter: brightness(0); opacity: 0.85; }

/* inline film preview inside the agent mockup */
.cc-embed {
  margin: 0 14px 14px;
  position: relative;
  max-width: 300px;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  overflow: hidden;
}
.cc-embed img { width: 100%; display: block; }
.cc-embed span {
  position: absolute;
  left: 8px;
  bottom: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 7px;
  border-radius: 4px;
}

/* wordmark as the sign-off stamp */
.wordmark-sig { width: 104px; height: auto; margin-top: 10px; opacity: 0.85; }

/* claude-code mockup accents */
.cc-ast { color: #d97757; font-size: 13px; }
.cc-ok { color: #6fbf73; }
.cc-tool { color: #ededed; font-weight: 600; }
.cc-sub { color: #94908a; }

/* works-with: two columns side by side */
.tool-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
@media (max-width: 480px) {
  .tool-cols { grid-template-columns: 1fr; }
}
.how-steps { margin-top: 16px; }
.situ-host { margin-left: auto; width: 16px; height: 16px; opacity: 0.75; }
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* faq disclosure */
details.faq { border-bottom: 1px dotted var(--hairline); padding: 8px 0; }
details.faq summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  list-style-position: outside;
}
details.faq summary::marker { color: var(--faint); }
details.faq p { padding: 8px 0 4px 2px; color: #404040; }

.term-err { color: #cf8f85; }

/* ── v3 additions (2026-08-21, owner rounds): Claude Code mockup loop,
   persona grid, gray early-access panel, page flower, closing row. */

/* Clawd, drawn in pixels; #d97757 per Anthropic brand guidelines */
.clawd { width: 24px; height: 18px; flex-shrink: 0; }

/* Claude Code status line: star glyph cycle · ✢ ✳ ✶ ✻ ✽.
   The card loops: spinner works, then the film pops into the chat.
   wait/done use visibility so the card never reflows the page. */
.cc-spin {
  padding: 2px 14px 10px;
  font-family: var(--mono);
  font-size: clamp(8.5px, 2.42vw, 12px);
  color: #c9c7c1;
}
.cc-spin.done { visibility: hidden; }
.cc-dim { color: #94908a; }
.cc-embed.wait { visibility: hidden; }
.cc-embed.pop { animation: embed-pop 0.34s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes embed-pop {
  from { opacity: 0; transform: scale(0.96) translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Claude Code input box */
.cc-input {
  margin: 0 14px 14px;
  border: 1px solid rgba(106, 155, 204, 0.5);
  border-radius: 6px;
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: #94908a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cc-caret {
  width: 7px;
  height: 14px;
  background: #c9c7c1;
  animation: caret-blink 1.1s steps(1, end) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* who uses it: four personas, two columns */
.who { padding-top: 44px; }
.who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
  padding-top: 10px;
}
@media (max-width: 560px) {
  .who-grid { grid-template-columns: 1fr; gap: 16px; }
}
.who-star { width: 16px; height: 16px; opacity: 0.75; display: block; margin-bottom: 7px; }
.who-cell p { padding-bottom: 0; font-size: 15px; }

/* feature sections breathe wider than the default rhythm */
.feat { padding: 44px 0 0; }

/* early access: semi-gray panel, earendil register, held to the column
   like the mockup cards */
.access-panel {
  margin-top: 24px;
  background: #2e2e2c;
  border: 1px solid #33322f;
  border-radius: 8px;
  padding: 22px 22px 26px;
}
.access-panel h2 { color: #f1f0ea; }
.access-panel p { color: #c8c6bf; }
.access-panel .cta { margin-top: 10px; }
.access-panel .orb-cluster { color: #e8e6dc; }
/* the pill in dark clothes: same object, gray gradient, ivory letterpress */
.access-panel .cta {
  border-color: #1b1b19;
  background: linear-gradient(180deg, #55544e 0%, #454440 45%, #3a3936 100%);
  color: #f1f0ea;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.25);
}
.access-panel .cta::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0));
}
.access-panel .cta::after {
  box-shadow:
    inset 0 -8px 10px -6px rgba(0, 0, 0, 0.55),
    inset 0 1px 1px rgba(255, 255, 255, 0.22);
}

/* the flower, on its own, above the hero */
.page-flower {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  margin: 0 0 32px;
}

/* thinking orbs (owner pick 2026-08-21, both candidates ship): dot-lattice
   sphere beside the early-access header, breathing cluster on the
   feature-group label. register: orbs.jakubantalik.com */
.orb-c { width: 22px; height: 22px; flex-shrink: 0; }
.orb-head { display: flex; align-items: center; gap: 10px; }
.orb-cluster {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  color: var(--ink);
}
.orb-cluster i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.2;
  animation: orb-breathe 1.8s ease-in-out infinite;
}
.orb-cluster i:nth-child(5) { animation-delay: 0s; }
.orb-cluster i:nth-child(2), .orb-cluster i:nth-child(4),
.orb-cluster i:nth-child(6), .orb-cluster i:nth-child(8) { animation-delay: 0.35s; }
.orb-cluster i:nth-child(1), .orb-cluster i:nth-child(3),
.orb-cluster i:nth-child(7), .orb-cluster i:nth-child(9) { animation-delay: 0.7s; }
@keyframes orb-breathe {
  0%, 100% { opacity: 0.18; transform: scale(0.8); }
  50% { opacity: 0.95; transform: scale(1.15); }
}

/* closing row: signature left, call CTA right */
.vision-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  padding-top: 20px;
}
.defaults { list-style: none; }
.defaults li { padding: 3px 0 3px 22px; position: relative; }
.defaults li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 12px;
  background: url("/assets/q-star.svg") no-repeat center / contain;
  opacity: 0.8;
}

/* ── Marketing sections adopted from the design page, 2026-08-24.
   The imagery law holds here: copy sits on white, art keeps its own zone,
   and the only thing over an image is product chrome. */

/* Who uses it: mark, then the name, then the copy, in a tinted box */
.who-cell {
  background: var(--card);
  border-radius: 8px;
  padding: 15px 16px 17px;
}
.who-mark { width: 20px; height: 20px; display: block; opacity: 0.85; }
.who-cell h3 {
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  padding: 11px 0 3px;
}
.who-cell p { padding-bottom: 0; font-size: 14px; line-height: 21px; color: #404040; }
.who-grid { gap: 12px; }

/* A band of art carrying one piece of product chrome */
.band {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  margin: 4px 0 12px;
}
.band img { width: 100%; height: 168px; object-fit: cover; display: block; }
.band-chrome {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 6px 20px rgba(0,0,0,0.10);
  font-size: 12.5px;
  color: var(--ink);
}
.band-play {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: #1a1a1a; color: #ffffff; font-size: 8px;
}
.band-chrome b { font-weight: 500; }
.band-chrome i { font-style: normal; color: var(--soft); font-family: var(--mono); font-size: 11px; }

/* The end cap, framed like the design page: a plate in the column, the page
   dissolving into it. */
/* The closing, per the design-page study: the art breaks to the
   column edge, fades up out of the white the signature sits on, and
   the negative bottom margin cancels the column padding so the art
   meets the footer. */
.endcap { margin: 26px -16px -96px; }
.endcap img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: 50% 8%;
  display: block;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 58%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 58%, #000 100%);
}

/* The opening cap: the mirror of it, above the nav. Art at the top of the
   page dissolving down into white, so the column starts out of the art. */
.topcap { margin: 0 0 6px; }
.topcap img {
  width: 100%;
  height: 168px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
}
@media (max-width: 480px) { .topcap img { height: 132px; } }

@media (max-width: 480px) {
  .band img { height: 132px; }
  .endcap img { height: 150px; }
}

/* Four session posters, small, in a row: the size the art reads best at */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.strip figure { margin: 0; }
.strip img {
  width: 100%; height: 62px; object-fit: cover; display: block;
  border-radius: 6px; border: 1px solid var(--hairline);
}
.strip figcaption {
  font-family: var(--mono); font-size: 10px; color: var(--faint);
  padding-top: 5px; line-height: 1.4;
}
@media (max-width: 480px) { .strip { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* The dashboard at true scale, cropped to the list: a window onto the app,
   not a shrunken screenshot. */
.uicrop {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 8px;
  background: #ffffff;
}
.uicrop-head {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--hairline);
  background: var(--card);
}
.uicrop-tab {
  font-size: 12.5px; color: var(--soft);
  padding: 4px 9px; border-radius: 999px;
}
.uicrop-tab.is-on { background: #ffffff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.uicrop-cta {
  margin-left: auto; font-size: 12.5px; color: var(--ink);
  text-decoration: underline; text-underline-offset: 2px;
}
.uicrop-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
}
.uicrop-row:last-child { border-bottom: 0; }
.uicrop-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px;
  background: #d4d4d4;
}
.uicrop-dot.is-live { background: #c0392b; }
.uicrop-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.uicrop-main b { font-size: 14px; font-weight: 500; line-height: 1.35; }
.uicrop-main i { font-style: normal; font-size: 12px; color: var(--soft); }
.uicrop-err, .uicrop-ok {
  font-size: 11.5px; white-space: nowrap; flex: 0 0 auto;
}
.uicrop-err { color: #a4463a; background: #fdf0ee; padding: 3px 8px; border-radius: 999px; }
.uicrop-ok { color: var(--faint); }
.uicrop-len { font-family: var(--mono); font-size: 12px; color: var(--soft); flex: 0 0 auto; }
@media (max-width: 480px) {
  .uicrop-row { flex-wrap: wrap; }
  .uicrop-main { flex: 1 1 100%; }
  .uicrop-err, .uicrop-ok, .uicrop-len { font-size: 11px; }
}

/* Cards with art, used for what the recorder makes */
.mcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.mcard { border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; background: #ffffff; }
.mcard-art { display: block; width: 100%; height: 72px; object-fit: cover; }
.mcard-body { padding: 11px 12px 13px; }
.mcard-name {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500; line-height: 20px;
}
.mcard-name img { width: 15px; height: 15px; flex: 0 0 15px; opacity: 0.85; }
.mcard p { padding: 5px 0 0; font-size: 13px; line-height: 19px; color: #404040; }
@media (max-width: 560px) { .mcards { grid-template-columns: 1fr; } .mcard-art { height: 62px; } }