/* ==========================================================================
   headroom.fm — marketing site
   One hand-written stylesheet, shared by every page. No frameworks.
   Design language: studio hardware. Matte black panels, hairline rules,
   mono silkscreen labels, green reserved for signal (money, live, go).
   ========================================================================== */

:root {
  color-scheme: dark;

  /* palette */
  --bg: #0D0D0D;
  --panel: #121212;
  --panel-2: #161616;
  --line: #232323;
  --line-soft: #1A1A1A;
  --ink: #EDEDEC;
  --body: #A6A6A6;
  --dim: #6E6E6E;
  --faint: #3E3E3E;
  --green: #22C55E;
  --green-down: #1CA850;
  --green-glow: rgba(34, 197, 94, 0.12);
  --amber: #F5A524;
  --red: #FF3B30;

  /* type — faces declared in fonts.css, which every page links first */
  --sans: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace;

  /* rhythm */
  --wrap: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --sect: clamp(4.5rem, 10vw, 7.5rem);
  --radius: 0.65rem;
}

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

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

body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--green); color: var(--bg); }

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

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 860px; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1, h2, h3 { color: var(--ink); font-weight: 650; letter-spacing: -0.025em; }

.display {
  font-size: clamp(2.1rem, 4.8vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-wrap: balance;
}

/* Stacked multi-sentence hero (index): a notch smaller so lines hold their shape.
   Sized against the longest line, "Headroom automates studio admin", which renders
   about 16x its font size wide. The copy column caps at 629px, so anything past
   2.3rem breaks that line and turns a two-line hero into a ragged three. */
.display--stack { font-size: clamp(1.75rem, 3vw, 2.3rem); }

.h2 {
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1.15;
  text-wrap: balance;
}

.h3 { font-size: 1.125rem; line-height: 1.35; }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  max-width: 36em;
}

/* The line under the hero headline. At 600 in full ink it was a second
   headline in a smaller size, and the two ran together as one block. Same
   trick as the secondary hero link: keep it bright, but drop it to regular
   weight and open the tracking so the display above owns the weight. */
.payoff {
  color: var(--body);
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* Silkscreen label: the mono eyebrow used on every section */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow--dim { color: var(--dim); }
/* A four-word eyebrow is wider than a phone. Left to itself it wraps mid-list
   and strands a separator at the end of line one; .sep is the seam it's meant
   to break on instead, so the label lands as two even lines that each end on
   a word. Above the phone breakpoint the seam is just another separator. */
.eyebrow--split .sep { display: inline; }

.fine {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

/* --------------------------------------------------------------------------
   Buttons + links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--green);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius);
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: var(--green-down); }
.btn:active { transform: translateY(1px); }

.btn--lg { padding: 0.95rem 2.2rem; font-size: 1.05rem; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--ghost:hover { background: var(--panel-2); }

.textlink {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--faint);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.textlink:hover { color: var(--green); text-decoration-color: var(--green); }

/* --------------------------------------------------------------------------
   Header / footer
   -------------------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 13, 13, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.95rem;
}
.site-head .logo img { height: 1.65rem; }
.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav a:not(.btn) {
  color: var(--body);
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-nav a:not(.btn):hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav .btn { padding: 0.55rem 1.15rem; font-size: 0.9rem; }

/* ---- phone menu ----
   A <details> disclosure rather than a scripted panel: it opens, closes,
   takes the keyboard, and reports its own expanded state with no JS at all,
   so the header still works if js/nav.js never loads. That script only adds
   the two habits <details> has no native answer for (escape, tap-outside).
   Hidden above the phone breakpoint, where .site-nav shows the links inline. */
.nav-menu { display: none; }
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px square: the tap target is the whole box, not the 18px glyph */
  width: 2.75rem;
  height: 2.75rem;
  /* pull the glyph out to the gutter so it optically aligns with the page
     edge instead of sitting a half-target inside it */
  margin-right: -0.7rem;
  color: var(--body);
  cursor: pointer;
  list-style: none;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-menu[open] .nav-toggle { color: var(--ink); }

.nav-icon, .nav-icon::before, .nav-icon::after {
  display: block;
  width: 1.15rem;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.18s ease, background-color 0.18s ease, top 0.18s ease;
}
.nav-icon { position: relative; }
.nav-icon::before, .nav-icon::after { content: ''; position: absolute; left: 0; }
.nav-icon::before { top: -0.34rem; }
.nav-icon::after { top: 0.34rem; }
/* open: the middle bar goes out, the outer two cross into a close mark */
.nav-menu[open] .nav-icon { background: transparent; }
.nav-menu[open] .nav-icon::before { top: 0; transform: rotate(45deg); }
.nav-menu[open] .nav-icon::after { top: 0; transform: rotate(-45deg); }

/* Anchored to .site-head (sticky, so it's the containing block) rather than
   to the toggle, so the panel spans the full width under the header bar. */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) 1.6rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  animation: nav-drop 0.18s ease;
}
.nav-panel a {
  padding-block: 1rem;
  border-top: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 1.02rem;
  text-decoration: none;
}
.nav-panel a[aria-current="page"] { color: var(--green); }

@keyframes nav-drop {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to { opacity: 1; transform: none; }
}

.site-foot { border-top: 1px solid var(--line-soft); padding-block: 2.25rem; }
.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.site-foot .copy { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--faint); }
.site-foot .copy a { text-decoration: none; transition: color 0.15s ease; }
.site-foot .copy a:hover { color: var(--ink); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.site-foot nav a {
  color: var(--dim);
  font-size: 0.85rem;
  text-decoration: none;
}
.site-foot nav a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.sect { padding-block: var(--sect); border-top: 1px solid var(--line-soft); }
.sect--flush { border-top: 0; }

/* mono index that opens a section, e.g. "01 / bookings" */
.sect-id {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.sect-id .no { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--green); }
.sect-id .of { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--dim); }

/* Section header: mono spec-label kicker + headline that opens a grid */
.sect-head { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.sect-head .eyebrow { display: block; margin-bottom: 0.85rem; }
.sect-head .h2 { max-width: 16em; }
.sect-head .lede { margin-top: 0.9rem; }

/* --------------------------------------------------------------------------
   Panels (the hardware surface)
   -------------------------------------------------------------------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(4rem, 9vw, 7rem) clamp(4rem, 9vw, 6.5rem); }
.hero-grid {
  display: grid;
  /* 1.9fr, not 1.5fr: the headline's first line needs the extra width to hold
     one line, and the meter rig still reads down to about 330px. */
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.hero-copy > * + * { margin-top: 1.4rem; }
.hero-copy .display span { display: block; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
/* The secondary link sits next to a filled button, so it reads as a second
   button unless it is dialled back: lighter weight, dim ink, no underline
   until hover. The wider gap keeps it from crowding the button. */
.hero-ctas--stack { gap: 0.9rem 2rem; }
.hero-ctas .textlink {
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--dim);
  text-decoration-color: transparent;
}
.hero-ctas .textlink:hover { color: var(--green); text-decoration-color: var(--green); }
.hero .fine { margin-top: 1.1rem; }

/* ---- the headroom meter ---- */

.meter-rig {
  --mh: clamp(280px, 36vh, 380px);
  --scl: 2.2rem;                        /* dB scale column */
  --lbl: clamp(110px, 12vw, 150px);     /* label column */
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  user-select: none;
}
.m-scale {
  position: relative;
  width: var(--scl);
  height: var(--mh);
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--faint);
}
.m-scale span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  padding-right: 0.7rem;
}
.m-scale span::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.4rem;
  border-top: 1px solid var(--faint);
}
.m-col { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.meter {
  position: relative;
  width: clamp(64px, 7vw, 88px);
  height: var(--mh);
  border-radius: 0.55rem;
  background: #131313;
  box-shadow: inset 0 0 0 1px #222, inset 0 2px 16px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.m-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 65%;
  background: var(--green);
  transform-origin: bottom;
  animation: m-rise 1.3s cubic-bezier(0.22, 0.7, 0.2, 1) 0.4s both;
}
@keyframes m-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.m-knee {
  position: absolute;
  left: 0; right: 0;
  bottom: 65%;
  border-top: 1px dashed rgba(255, 255, 255, 0.16);
}
.m-cap { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.24em; color: var(--faint); }

.m-labels { position: relative; height: var(--mh); width: var(--lbl); }
.m-lab {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding-left: 0.9rem;
}
.m-lab::before {
  content: '';
  position: absolute;
  left: 0;
  width: 1px;
  background: var(--faint);
}
.m-lab--head { top: 0; height: 35%; }
.m-lab--head::before { top: 0; bottom: 0.75rem; }
.m-lab--sig { bottom: 0; height: 65%; }
.m-lab--sig::before { top: 0.75rem; bottom: 0; }
.m-lab .m-tag {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green);
}
.m-lab--sig .m-tag { color: var(--dim); }
.m-lab .m-txt { font-family: var(--mono); font-size: clamp(0.8rem, 1.4vw, 0.95rem); line-height: 1.35; color: #fff; }
.m-lab--sig .m-txt { color: var(--dim); }

/* --------------------------------------------------------------------------
   Activity feed vignette
   -------------------------------------------------------------------------- */

.feed { overflow: hidden; }
.feed-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}
.feed-head .live { color: var(--green); }
.feed-head .spacer { flex: 1; }
.dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.7);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.45; } }

.feed ol { list-style: none; padding: 0; }
.feed li {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 0.85rem 1.25rem;
}
.feed li + li { border-top: 1px solid var(--line-soft); }
.feed time {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--faint);
  white-space: nowrap;
  min-width: 4.2rem;
}
.feed p { flex: 1; font-size: 0.92rem; color: var(--body); }
.feed p strong { color: var(--ink); font-weight: 500; }
.feed .amt { font-family: var(--mono); font-size: 0.8rem; color: var(--green); white-space: nowrap; }
.feed .amt--out { color: var(--dim); }

.badge {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
}
.badge--ok { color: var(--green); border-color: rgba(34, 197, 94, 0.35); background: var(--green-glow); }

/* two-column story: copy beside a vignette */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.story-copy > * + * { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   Pillars (index) and feature groups (features page)
   -------------------------------------------------------------------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.pillar h3 { margin-bottom: 0.65rem; font-size: 1.25rem; text-wrap: balance; }
.pillar > p { font-size: 0.95rem; }
.pillar ul { list-style: none; padding: 0; margin-top: 1.25rem; }
.pillar li {
  padding: 0.55rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.9rem;
  color: var(--dim);
}
.pillar li:last-child { border-bottom: 1px solid var(--line-soft); }

/* features page: label column + item list */
.fgroup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
.fgroup + .fgroup { border-top: 1px solid var(--line-soft); }
.fgroup-head .no {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--green);
  display: block;
  margin-bottom: 0.8rem;
}
.fgroup-head h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: 0.6rem; }
.fgroup-head p { font-size: 0.95rem; }
.fgroup ul { list-style: none; padding: 0; }
.fgroup ul li {
  position: relative;
  padding: 0.65rem 0 0.65rem 1.4rem;
  font-size: 0.95rem;
}
.fgroup ul li + li { border-top: 1px solid var(--line-soft); }
.fgroup ul li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 1.18rem;
  width: 0.45rem;
  border-top: 1px solid var(--green);
}

/* spec-sheet grid: the deeper capabilities, one line each */
.rack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(2rem, 4vw, 3.5rem);
}
.rack > div { padding: 1.1rem 0 1.2rem; border-top: 1px solid var(--line-soft); }
.rack h3 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.rack p { font-size: 0.85rem; color: var(--dim); }
.rack + .textlink-row { margin-top: 2.25rem; }

/* --------------------------------------------------------------------------
   Signal chain (widget page)
   -------------------------------------------------------------------------- */

.chain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.chain > div { background: var(--panel); padding: 1.6rem 1.5rem 1.7rem; }
.chain .stage {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
  display: block;
  margin-bottom: 0.9rem;
}
.chain h3 { font-size: 1.05rem; margin-bottom: 0.45rem; }
.chain p { font-size: 0.9rem; }

/* before/after leak rows */
.leak { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.leak + .leak { margin-top: 1rem; }
.leak .was {
  padding: 0.9rem 1.35rem;
  background: #101010;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.88rem;
  color: var(--dim);
  text-decoration: line-through;
  text-decoration-color: var(--faint);
}
.leak .now { padding: 0.95rem 1.35rem; font-size: 0.95rem; color: var(--ink); }
.leak .now strong { color: var(--green); font-weight: 600; }

/* without / with panels */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.duo > div { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.6rem; }
.duo .tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.8rem;
  color: var(--dim);
}
.duo p { font-size: 0.92rem; }
.duo .with { border-color: rgba(34, 197, 94, 0.4); background: linear-gradient(180deg, rgba(34, 197, 94, 0.05), transparent 60%); }
.duo .with .tag { color: var(--green); }
.duo .with p { color: var(--body); }

/* numbered steps (widget funnel) */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.step .no { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--green); display: block; margin-bottom: 0.7rem; }
.step h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.step p { font-size: 0.92rem; }

/* --------------------------------------------------------------------------
   Compare page
   -------------------------------------------------------------------------- */

.only { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4rem); }
.only > div { padding: 1.35rem 0; border-top: 1px solid var(--line-soft); }
.only h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.only h3::before {
  content: attr(data-no);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--green);
  margin-right: 0.8rem;
}
.only p { font-size: 0.9rem; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.legend span { display: inline-flex; align-items: center; gap: 0.6rem; }

.cmp-block + .cmp-block { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.cmp-block > h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.tscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.88rem; }
.cmp th {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: center;
  white-space: nowrap;
}
.cmp th:first-child { text-align: left; width: 34%; }
.cmp th:nth-child(2) { color: var(--green); }
.cmp td { padding: 0.7rem 0.9rem; text-align: center; }
.cmp td:first-child { text-align: left; color: var(--body); }
.cmp tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.cmp th:nth-child(2), .cmp td:nth-child(2) { background: rgba(34, 197, 94, 0.045); }

/* marks: drawn in CSS, no icon library */
.mk { display: inline-block; vertical-align: middle; }
.mk--yes {
  width: 0.68rem; height: 0.34rem;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg) translateY(-0.1rem);
}
.mk--part { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: var(--dim); }
.mk--no { width: 0.6rem; border-top: 1px solid var(--faint); }

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */

/* The page leads with the person: face and claim share the first screen,
   the figures back it up directly underneath, the story comes after. */
.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.about-hero-copy > * + * { margin-top: 1.4rem; }

/* the story, read as one centred column rather than stranded on the left */
.about-story { max-width: 44em; margin-inline: auto; }
.about-story > * + * { margin-top: 1.1rem; }
.about-story strong { color: var(--ink); font-weight: 600; }
/* the thesis line, given its own air */
.about-story .pull {
  margin-block: clamp(1.6rem, 3vw, 2.2rem);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

/* sign-off, set apart from the last paragraph like a letter's signature.
   Same face and size as the story it closes: the separation comes from the
   air above it and the dimmer ink, not from a change of voice. */
.about-story .sign {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--dim);
}

/* Capped rather than filling its column: at full width the face outweighs the
   claim next to it. Pushed to the outer edge so the gutter between copy and
   photo grows instead of the column going ragged. */
.portrait { max-width: 21rem; margin-inline-start: auto; }

/* square frame: the source is shot square, and a taller crop would clip the
   head and cut the hands */
.portrait img {
  width: 100%;
  /* the height attribute on the tag would otherwise win and aspect-ratio
     would never apply, leaving a tall box that crops the sides off */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.portrait figcaption {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

/* figures row: streams, artists, certifications, and so on. Columns are
   generated per visible child rather than fixed at three, so a figure that
   has no data yet can hide itself without leaving a hole in the row. */
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 clamp(1rem, 3vw, 2.5rem); }
.stats > div { padding: 1.4rem 0 1.5rem; border-top: 1px solid var(--line); text-align: center; }
.stats .fig {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stats .lab {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
/* figures roll up into place when the row is first scrolled to, and again
   whenever a live value changes. Digits rise and fade rather than being
   clipped, so nothing is ever hidden if the script doesn't run. */
.stats .fig .d { display: inline-block; }
.stats .fig--roll .d {
  animation: fig-roll 0.48s cubic-bezier(0.19, 0.9, 0.25, 1) both;
}
@keyframes fig-roll {
  from { transform: translateY(0.5em); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .stats .fig--roll .d { animation: none; }
}

/* shown only while a figure is a remembered value, not a fresh reading */
.live-dot {
  display: inline-block;
  width: 0.3rem;
  height: 0.3rem;
  margin-left: 0.55rem;
  border-radius: 999px;
  background: var(--faint);
  vertical-align: 0.1em;
}
/* a class-level display would otherwise beat the UA rule for [hidden] */
.live-dot[hidden] { display: none; }

/* hover/focus tooltip: figure provenance, without a library */
.tip { position: relative; cursor: help; }
.tip::after {
  content: attr(data-tip);
  position: absolute;
  /* opens downward: upward would slide under the sticky header whenever the
     figure sits near the top of the viewport */
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: max-content;
  max-width: 15rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: none;
  color: var(--body);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}
.tip:hover::after,
.tip:focus-visible::after { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .tip::after { transition: none; } }


/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band { text-align: center; }
.cta-band .h2 { margin-bottom: 0.9rem; }
.cta-band p { max-width: 34em; margin-inline: auto; }
.cta-band .btn { margin-top: 2rem; }
.cta-band .fine { margin-top: 1.4rem; }
.cta-band .fine a { color: inherit; text-decoration: none; }
.cta-band .fine a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Legal prose
   -------------------------------------------------------------------------- */

.prose { max-width: 720px; }
.prose h1 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-bottom: 0.4rem; }
.prose .updated { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 3rem; }
.prose section + section { margin-top: 2.4rem; }
.prose h2 { font-size: 1.15rem; margin-bottom: 0.7rem; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 0.7rem; }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.35rem; }
.prose li::marker { color: var(--faint); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--green); text-decoration: none; }
.prose a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Pricing page
   -------------------------------------------------------------------------- */

/* calculator */
.calc { display: block; }
.calc-controls { padding: 1.1rem 1.75rem 1.4rem; border-bottom: 1px solid var(--line); }
.ctl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1.05rem;
}
.ctl + .ctl, #c-locrows + .ctl, .ctl + #c-locrows > .ctl:first-child { border-top: 1px solid var(--line-soft); }
.ctl--sub { padding-block: 0.6rem; }
.ctl--sub .ctl-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-weight: 400; padding-left: 1rem; border-left: 1px solid var(--line-soft); }
.ctl-label { color: var(--ink); font-weight: 500; font-size: 0.95rem; }
.ctl-label small { display: block; font-size: 0.78rem; color: var(--dim); font-weight: 400; margin-top: 0.1rem; }

.stepper { display: flex; align-items: center; }
.stepper button {
  width: 2.15rem;
  height: 2.15rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.stepper button:hover:not(:disabled) { border-color: var(--dim); }
.stepper button:disabled { opacity: 0.35; cursor: default; }
.stepper output { min-width: 2.6rem; text-align: center; font-family: var(--mono); font-size: 1.05rem; color: var(--ink); }

.locrow-x {
  background: none;
  border: 0;
  margin-left: 0.5rem;
  padding: 0.25rem 0.35rem;
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.15s ease;
}
.locrow-x:hover { color: var(--red); }

.seg { display: flex; border: 1px solid var(--line); border-radius: 0.45rem; overflow: hidden; }
.seg button {
  background: transparent;
  border: 0;
  padding: 0.55rem 0.95rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--green-glow); color: var(--green); }
.seg button[aria-pressed="false"]:hover { color: var(--ink); }

.switch {
  appearance: none;
  -webkit-appearance: none;
  width: 2.7rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--faint);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.switch::after {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  transition: transform 0.15s ease, background 0.15s ease;
}
.switch:checked { background: var(--green); }
.switch:checked::after { transform: translateX(1.2rem); background: var(--bg); }

.calc-out { position: relative; padding: 1.75rem 1.75rem 1.9rem; display: flex; flex-direction: column; }
.calc-lines { list-style: none; padding: 0; flex: 1; }
.calc-lines li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  font-size: 0.92rem;
  color: var(--body);
}
.calc-lines li + li { border-top: 1px solid var(--line-soft); }
.calc-lines .amt { font-family: var(--mono); font-size: 0.8rem; color: var(--dim); white-space: nowrap; }
.calc-lines .disc, .calc-lines .disc .amt { color: var(--green); }
.calc-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.3rem 0.7rem;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.calc-total .was { font-family: var(--mono); font-size: 1rem; color: var(--faint); text-decoration: line-through; }
.calc-total strong { font-family: var(--mono); font-weight: 500; font-size: 2.2rem; letter-spacing: -0.02em; color: var(--green); }
.calc-total .unit { flex-basis: 100%; text-align: right; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }

/* lead gate: sits in the readout column and holds the price back until a
   studio name + email are captured, the way the portal gates its rate step */
.calc-gate { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.calc-gate-lead { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.calc-gate-sub { margin-top: 0.35rem; font-size: 0.92rem; color: var(--dim); }
.calc-gate-fields { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.1rem; }
.calc-gate input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s ease;
}
.calc-gate input::placeholder { color: var(--faint); }
.calc-gate input:focus { outline: none; border-color: var(--green); }
.calc-gate .btn {
  display: block;
  width: 100%;
  margin-top: 0.9rem;
  border: 0;
  text-align: center;
  font-family: inherit;
  cursor: pointer;
}
.calc-gate .btn:disabled { opacity: 0.6; cursor: default; }
.calc-gate-err { margin-top: 0.7rem; font-size: 0.85rem; color: var(--red); }
/* honeypot: left in the layout but off-screen, so bots fill it and people can't */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.calc-reveal { flex: 1; display: flex; flex-direction: column; }
/* the flex display above would otherwise beat the [hidden] attribute (equal
   specificity, later in the sheet) */
.calc-gate[hidden], .calc-reveal[hidden] { display: none; }
/* the amounts change colour, not position, when the gate opens */
.calc-lines .amt, .calc-total .was, .calc-total strong { transition: color 0.35s ease; }

/* ---- locked state ----------------------------------------------------
   The readout is drawn in full with the amounts blocked out by veil() in the
   page script: the quote has a shape before it has numbers, and unlocking
   swaps blocks for digits in place. Sharp rather than soft on purpose. Every
   other surface here is hairlines and silkscreen, and a blur would read as
   someone else's paywall. It is a tease either way: the figures are computed
   by that same script, so the gate is only ever asking. */
.calc-out.is-locked .calc-reveal { user-select: none; }
.calc-out.is-locked .calc-lines .amt,
.calc-out.is-locked .calc-total .was,
.calc-out.is-locked .calc-total strong { color: var(--faint); }
/* the form drops below the blocked-out quote, divided from it like a footer */
.calc-out.is-locked .calc-gate {
  flex: 0 0 auto;
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.calc-year { margin-top: 0.5rem; font-size: 0.92rem; color: var(--body); }
.calc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.75rem;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}


/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .m-fill { animation: none; }
  .dot { animation: none; }
  .nav-panel { animation: none; }
  .nav-icon, .nav-icon::before, .nav-icon::after { transition: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .rack { grid-template-columns: 1fr 1fr; }
  /* The rig's flex box is right-heavy (labels are wider than the dB scale),
     so a plain center puts the meter left of screen center. Shift by half
     the difference so the meter itself is what's centered. */
  .hero-visual { display: flex; justify-content: center; }
  .hero-visual .meter-rig { transform: translateX(calc((var(--lbl) - var(--scl)) / 2)); }
  .story { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; gap: 2.5rem; }
  .fgroup { grid-template-columns: 1fr; gap: 1.25rem; }
  /* headline first, then the photo, then the figures */
  .about-hero { grid-template-columns: 1fr; gap: 2.5rem; }
  /* once the hero stacks, the capped portrait would sit stranded against the
     left gutter; centre it and its caption under the copy */
  .portrait { max-width: 20rem; margin-inline: auto; }
  .portrait figcaption { text-align: center; }
}

@media (max-width: 720px) {
  /* A CTA pair wraps into a ragged pile at phone widths. Stack it into one
     centred column instead. Opt-in per row rather than keyed off child count:
     widget and instagram heroes carry a lone button that stays inline-left,
     and a structural selector would silently flip them the moment anyone
     added a second element. The copy above stays left-aligned by design. */
  .hero-ctas--stack {
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
  }
  .hero-ctas--stack .btn {
    width: 100%;
    max-width: 22rem;
    text-align: center;
  }
  /* zero-height block: breaks the line and takes the separator with it */
  .eyebrow--split .sep { display: block; height: 0; overflow: hidden; }
  /* Phone header: the hamburger replaces the inline links. Scoped with :has
     so the landing pages, whose .site-nav carries a lone CTA and no menu,
     keep showing it instead of losing their only call to action. */
  .site-head .wrap:has(.nav-menu) .site-nav { display: none; }
  .nav-menu { display: block; }
  .site-nav { gap: 1.1rem; }
  .chain { grid-template-columns: 1fr; }
  .rack { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .only { grid-template-columns: 1fr; }
  .feed li { flex-wrap: wrap; gap: 0.35rem 1rem; }
  .feed p { flex-basis: 100%; order: 3; }
}

@media (max-width: 560px) {
  /* three figures across stop reading at phone widths: the labels wrap and
     the row turns into a word search. One per line, still centred. */
  .stats { grid-auto-flow: row; grid-auto-columns: auto; }
}