/* Humpback marketing site — shared styles.
   Identity carried over from the original page: near-black ground, Bricolage
   Grotesque headings, IBM Plex Sans body, JetBrains Mono for figures, muted
   blue accent. */

@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url('../assets/fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap;
  src: url('../assets/fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap;
  src: url('../assets/fonts/plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap;
  src: url('../assets/fonts/plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --bg: #0d0d0d;
  --bg-deep: #040506;
  --surface: #141414;
  --surface-2: #1a1a1a;
  --line: #262626;
  --line-soft: #1f1f1f;
  --text: #ffffff;
  --text-soft: #dbe4e5;
  --muted: #b4b4b4;
  --dim: #8d8d8d;
  --accent: #6ca6cd;
  --accent-ink: #0d0d0d;
  --success: #7dc38f;
  --focus: #9fd0f0;

  --font-head: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Monaco, monospace;

  --gutter: clamp(20px, 5vw, 56px);
  --measure: 1180px;
  --measure-wide: 1440px;
  --header-h: 60px;
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { max-width: 100%; }
img, video { display: block; height: auto; }
a { color: inherit; }
::selection { background: #2a4a64; color: #fff; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: calc(var(--measure) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: calc(var(--measure-wide) + 2 * var(--gutter)); }
.wrap--narrow { max-width: calc(820px + 2 * var(--gutter)); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 13, 13, 0.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-h);
}
.brand {
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em;
  text-decoration: none; padding: 6px 2px;
}
.site-nav { display: flex; align-items: center; gap: 0.5rem; }
.site-nav__list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav__list a {
  display: inline-block; padding: 8px 12px; border-radius: 8px;
  font-size: 0.875rem; color: #9fb0b8; text-decoration: none; transition: color .15s ease;
}
.site-nav__list a:hover, .site-nav__list a[aria-current="page"] { color: #eef2f3; }
.site-nav__cta { margin-left: 0.5rem; }
.nav-toggle {
  display: none; align-items: center; gap: 8px;
  font: 600 0.875rem/1 var(--font-body); color: var(--text);
  background: transparent; border: 1px solid #3a3a3a; border-radius: 8px; padding: 9px 12px; cursor: pointer;
}
.nav-toggle__bars { width: 16px; height: 10px; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 1px; transition: transform .2s ease, top .2s ease;
}
.nav-toggle__bars::before { top: 1px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 4px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 4px; transform: rotate(-45deg); }

@media (max-width: 820px) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav__panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #0d0d0d; border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 20px;
  }
  .js .site-nav__panel:not(.is-open) { display: none; }
  .site-nav__panel { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .site-nav__list { flex-direction: column; align-items: stretch; }
  .site-nav__list a { display: block; padding: 12px 4px; font-size: 1rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .site-nav__cta { margin: 8px 0 0; align-self: flex-start; }
  /* Without JS the links simply wrap under the brand. */
  html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: 8px; }
  html:not(.js) .site-nav__list { flex-direction: row; flex-wrap: wrap; }
  html:not(.js) .site-nav__list a { border: 0; padding: 6px 8px; font-size: 0.9rem; }
}
@media (min-width: 821px) { .site-nav__panel { display: flex; align-items: center; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 44px; padding: 0.7rem 1.4rem; border-radius: 100px;
  font: 600 0.95rem/1.2 var(--font-head); letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--accent); color: #111; }
.btn--primary:hover { background: #82b6d8; }
.btn--ghost { border-color: rgba(255,255,255,0.32); color: var(--text); background: rgba(10,12,14,0.25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.btn--ghost:hover { border-color: rgba(255,255,255,0.6); }
.btn--small { min-height: 36px; padding: 0.45rem 1rem; font-size: 0.82rem; border-radius: 8px; font-family: var(--font-body); }
.btn--quiet { border-color: #3a3a3a; color: var(--text); background: transparent; border-radius: 8px; font-family: var(--font-body); }
.btn--quiet:hover { border-color: #5a5a5a; }
.btn__note { font: 400 0.8em var(--font-mono); opacity: 0.8; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(28px, 9vh, 120px) var(--gutter) clamp(34px, 9vh, 106px);
  text-align: center;
  background: var(--bg-deep);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__still, .hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.6) contrast(1.08);
}
/* The video (showing its first-frame poster until it plays) fades in as in
   the original; without JS only the final still is shown. */
html:not(.js) .hero__video { display: none; }
@keyframes hb-fadein { from { opacity: 0; } to { opacity: 1; } }
.js .hero.is-intro .hero__video { animation: hb-fadein 1.2s ease both 0.15s; }
.hero.is-final .hero__video { opacity: 0; visibility: hidden; }
.js .hero:not(.is-final) .hero__still { opacity: 0; }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,5,6,0.35) 0%, rgba(4,5,6,0.08) 24%, rgba(4,5,6,0.05) 50%, rgba(4,5,6,0.55) 76%, rgba(4,5,6,0.92) 100%);
}
/* Explicit layers (media 0, text 1) instead of a negative z-index: Safari
   could paint the shade over the text once the page scrolled. */
.hero__content { margin-top: auto; max-width: 820px; position: relative; z-index: 1; }
.hero h1 {
  font-family: var(--font-head); font-weight: 600; font-size: clamp(2.5rem, 6vw, 4.1rem);
  line-height: 1.04; letter-spacing: -0.02em; margin: 0; text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.hero__lede {
  max-width: 34rem; margin: 1.2rem auto 0; color: var(--text-soft);
  font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.6; text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 1.8rem; }

/* Entrance: the text stays hidden while the whale plays and rises in 0.9 s
   before the video ends (.is-revealed, set by site.js). Settling
   early (scroll, failed or slow video) shows it at once. */
@keyframes hb-text-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.js .hero.is-intro:not(.is-revealed) .hero__content > * { opacity: 0; }
.js .hero.is-revealed h1 { animation: hb-text-in 1.4s ease-out both; }
.js .hero.is-revealed .hero__lede { animation: hb-text-in 1.4s ease-out both 0.24s; }
.js .hero.is-revealed .hero__actions { animation: hb-text-in 1.4s ease-out both 0.48s; }

@media (max-height: 700px) and (min-width: 600px) {
  .hero { padding-top: 24px; padding-bottom: 30px; }
  .hero h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
  .hero__lede { margin-top: 0.9rem; }
  .hero__actions { margin-top: 1.2rem; }
}
@media (max-width: 599px) {
  .hero { padding-top: clamp(28px, 7vh, 64px); padding-bottom: clamp(24px, 5.5vh, 46px); }
  .hero__actions .btn { flex: 1 1 100%; max-width: 20rem; margin-inline: auto; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 0.6rem; }
}

.hero-fade { height: 0; background: linear-gradient(180deg, var(--bg-deep), var(--bg)); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(72px, 11vw, 136px) 0; }
.section:last-of-type { padding-bottom: clamp(72px, 10vw, 120px); }
.section__head { max-width: 46rem; }
.eyebrow {
  margin: 0 0 0.9rem; font: 500 0.75rem/1.4 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.h2, .section h2 {
  font-family: var(--font-head); font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.06; letter-spacing: -0.03em; margin: 0; text-wrap: balance;
}
.h3, .section h3 {
  font-family: var(--font-head); font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.15; letter-spacing: -0.02em; margin: 0; text-wrap: balance;
}
.lede { font-size: clamp(1rem, 1.4vw, 1.08rem); line-height: 1.7; color: var(--muted); margin: 1.1rem 0 0; max-width: 60ch; text-wrap: pretty; }
.prose p { color: var(--muted); line-height: 1.75; margin: 0.9rem 0 0; max-width: 60ch; text-wrap: pretty; }
.prose strong { color: var(--text); font-weight: 600; }
.section-rule { border-top: 1px solid #232323; padding-top: clamp(32px, 4vw, 48px); }

/* ---------- Figures ---------- */
.shot { margin: clamp(32px, 4vw, 48px) 0 0; }
.shot__frame {
  display: block; width: 100%; padding: 0; border: 1px solid #2b2b2b; border-radius: 4px;
  background: #1e1e1e; overflow: hidden; position: relative;
}
button.shot__frame { cursor: zoom-in; font: inherit; color: inherit; }
.shot__frame img, .shot__frame video { width: 100%; height: auto; }
.shot figcaption, .caption {
  margin-top: 0.8rem; font-size: 0.85rem; line-height: 1.6; color: var(--dim); max-width: 70ch;
}
.only-narrow { display: none; }
@media (max-width: 700px) { .only-narrow { display: inline; } .only-wide { display: none; } }

/* Split: text + media side by side, stacked when narrow */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(56px, 7vw, 96px); }
.split--flip > :first-child { order: 2; }
@media (max-width: 880px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--flip > :first-child { order: 0; }
}
.split .shot { margin-top: 0; }

/* Videos */
.player { position: relative; }
/* 3:2 recordings never taller than the screen below the header. */
.player .shot__frame { max-width: calc((100svh - var(--header-h) - 120px) * 1.5); margin-inline: auto; }
.player figcaption { margin-inline: auto; max-width: calc((100svh - var(--header-h) - 120px) * 1.5); }
.player video { aspect-ratio: var(--ar, 3 / 2); object-fit: cover; background: #1e1e1e; }

/* Numbered sequence */
.steps { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; gap: clamp(40px, 5vw, 64px); counter-reset: step; }
.step { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.step__text { counter-increment: step; position: relative; padding-left: 3rem; }
.step__text::before {
  content: counter(step); position: absolute; left: 0; top: 0.1rem;
  width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid #3a4a55;
  display: grid; place-items: center; font: 600 0.85rem/1 var(--font-mono); color: var(--accent);
}
.step__text h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); }
.step__text p { color: var(--muted); margin: 0.6rem 0 0; line-height: 1.7; max-width: 48ch; }
.step--text-only { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.step .shot { margin: 0; }
@media (max-width: 880px) {
  .step, .step--text-only { grid-template-columns: minmax(0, 1fr); }
}

/* Points list */
.points { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 0.9rem; }
.points li { position: relative; padding-left: 1.3rem; color: var(--muted); line-height: 1.65; max-width: 60ch; }
.points li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.points strong { color: var(--text); font-weight: 600; }

/* Questions */
.faq { margin-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.2rem 0; font-weight: 600; font-size: 1rem; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font: 400 1.3rem/1 var(--font-mono); flex: 0 0 auto; }
.faq details[open] summary::after { content: "\2212"; }
.faq__body { padding: 0 0 1.3rem; color: var(--muted); line-height: 1.75; max-width: 66ch; }
.faq__body p { margin: 0 0 0.8rem; }
.faq__body p:last-child { margin-bottom: 0; }
.faq__body a, .prose a, .lede a, .text-link { color: var(--accent); text-underline-offset: 3px; }

/* Plans */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 880px) { .tiers { grid-template-columns: minmax(0, 1fr); } }
.tier { display: flex; flex-direction: column; padding-top: 1.4rem; border-top: 2px solid #3a3a3a; }
.tier--featured { border-top-color: var(--accent); }
.tier__name { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin: 0 0 1.1rem; }
.tier__price { display: flex; align-items: baseline; gap: 0.4rem; margin: 0; }
.tier__amount { font: 500 2.1rem/1 var(--font-mono); letter-spacing: -0.03em; }
.tier__per { font: 400 0.8rem var(--font-mono); color: var(--dim); }
.tier__note { font-size: 0.78rem; color: var(--dim); min-height: 2.8em; line-height: 1.5; margin: 0.55rem 0 0; }
.tier__note.is-saving { color: var(--success); }
.tier__specs { margin: 0.8rem 0 0; padding: 1rem 0; border-block: 1px solid #232323; display: grid; gap: 0.6rem; font-size: 0.85rem; color: var(--dim); }
.tier__specs div { display: flex; justify-content: space-between; gap: 1rem; }
.tier__specs dt { margin: 0; }
.tier__specs dd { margin: 0; font-family: var(--font-mono); color: var(--text); }
.tier__includes { color: #c8c8c8; font-size: 0.9rem; line-height: 1.7; margin: 1rem 0 1.6rem; }
.tier__cta { margin-top: auto; align-self: flex-start; }
.tier__cta.btn { white-space: normal; text-align: left; }

.billing-toggle { display: inline-flex; margin-top: 2rem; padding: 3px; border-radius: 10px; background: #161616; border: 1px solid var(--line); }
.billing-toggle button {
  font: 600 0.85rem/1 var(--font-body); padding: 0.6rem 1.1rem; border-radius: 7px; border: 0; cursor: pointer;
  background: transparent; color: var(--dim); display: inline-flex; align-items: center; gap: 0.5rem; min-height: 38px;
}
.billing-toggle button[aria-pressed="true"] { background: #fff; color: #0d0d0d; }
.billing-toggle .save { font-size: 0.68rem; font-weight: 600; padding: 0.15rem 0.45rem; border-radius: 4px; background: var(--success); color: #0c1f11; }

.band {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem 3rem; flex-wrap: wrap;
}
.band__side { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; max-width: 36rem; }
.band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.mail { font-family: var(--font-mono); font-size: 0.92em; color: var(--accent); overflow-wrap: anywhere; }

/* Secondary pages */
.page-head { padding-block: clamp(56px, 8vw, 96px) clamp(16px, 2vw, 24px); }
.page-head h1 {
  font-family: var(--font-head); font-size: clamp(2rem, 4.2vw, 2.9rem); font-weight: 600; line-height: 1.12;
  letter-spacing: -0.025em; margin: 0; max-width: 24ch; text-wrap: balance;
}
.page-body { padding-block: clamp(24px, 3vw, 40px) clamp(72px, 9vw, 112px); }
.rows { border-top: 1px solid var(--line); }
.row { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.row h2 { font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; margin: 0 0 0.6rem; letter-spacing: 0; line-height: 1.4; }
.row p { color: #c8c8c8; line-height: 1.8; margin: 0 0 0.7rem; max-width: 66ch; }
.row p:last-child { margin-bottom: 0; }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin-top: 2rem; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-card { border: 1px solid var(--line); border-radius: 12px; background: #141414; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; }
.contact-card h2 { font: 600 1.05rem/1.3 var(--font-body); margin: 0; }
.contact-card p { color: var(--muted); margin: 0; line-height: 1.7; font-size: 0.95rem; }
.contact-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: #111; padding-block: 2.4rem 2rem; font-size: 0.85rem; color: var(--dim); }
.site-footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.6rem 3rem; }
.site-footer__brand { display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer__brand strong { font: 600 1.05rem var(--font-head); color: var(--text); }
.site-footer__tag { display: flex; align-items: center; gap: 0.6rem; }
.site-footer__tag::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--success); flex: 0 0 auto; }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.site-footer a { color: #b9c4c9; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__legal { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid #1d1d1d; }

/* ---------- Zoom dialog ---------- */
.zoom-dialog {
  padding: 0; border: 0; background: transparent; color: var(--text);
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0;
}
.zoom-dialog::backdrop { background: rgba(0,0,0,0.9); }
.zoom-dialog__bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 10px var(--gutter); background: rgba(10,10,10,0.9); border-bottom: 1px solid var(--line);
}
.zoom-dialog__title { font-size: 0.88rem; color: var(--muted); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.zoom-dialog__scroller { position: absolute; inset: 58px 0 0 0; overflow: auto; overscroll-behavior: contain; display: grid; place-items: center; padding: 16px; }
.zoom-dialog__scroller img { max-width: none; width: auto; height: auto; }
.zoom-dialog.is-fit .zoom-dialog__scroller img { max-width: 100%; max-height: calc(100vh - 90px); }
.zoom-dialog__actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }

html.has-dialog { overflow: hidden; }

/* Coordination steps: the two text-only steps pair up; steps with a
   screenshot take the full row. */
.steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(20px, 4vw, 56px); }
.step { grid-column: 1 / -1; }
.step--text-only { grid-column: auto; display: block; }
@media (max-width: 880px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step--text-only { grid-column: 1 / -1; }
}

/* Assignment clip on phones: the task panel crop, kept within the screen height. */
@media (max-width: 900px) {
  .player--people { background: transparent; border: 0; }
  .player .player--people { max-width: none; }
  .player--people video {
    aspect-ratio: 420 / 1240;
    width: min(100%, calc(76svh * 420 / 1240));
    margin-inline: auto;
    border: 1px solid #2b2b2b; border-radius: 4px;
  }
}

/* The first section follows the hero closely. */
#how { padding-top: clamp(40px, 6vw, 88px); }
@media (max-width: 620px) {
  .demo[data-assignment-chart] { padding: 0; border: 0; background: none; }
}

/* Reduced motion: the static final composition from the first paint. */
@media (prefers-reduced-motion: reduce) {
  .hero *, .hero *::before, .hero *::after { animation: none !important; }
  .js .hero .hero__still { opacity: 1 !important; }
  .js .hero .hero__content > * { opacity: 1 !important; }
  .js .hero .hero__video { visibility: hidden; }
}

.only-tablet { display: none; }
@media (max-width: 900px) { .only-tablet { display: inline; } }

/* Homepage: the header stays out of the way over the hero and slides in once
   the visitor scrolls. The hero then fills the whole first screen. Without
   JS the header is always shown. */
.js .site-header--auto {
  position: fixed; left: 0; right: 0; top: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.js .site-header--auto.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.js .page-home .hero { min-height: 100vh; min-height: 100svh; }
@media (prefers-reduced-motion: reduce) { .js .site-header--auto { transition: none; } }

/* Copy v2 additions */
.hero__small { margin: 1.1rem auto 0; font-size: 0.85rem; line-height: 1.5; color: #aebbc0; text-shadow: 0 1px 12px rgba(0,0,0,0.6); max-width: 34rem; }
.js .hero.is-revealed .hero__small { animation: hb-text-in 1.4s ease-out both 0.72s; }

/* The strip carries the fade from the hero's near-black into the page. */
.strip { padding-block: clamp(6px, 1vw, 12px) 0; background: linear-gradient(180deg, var(--bg-deep), var(--bg) 48px); }
.strip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.strip__list li { border-top: 1px solid #2a2a2a; padding-top: 1.1rem; }
.strip__title { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0; }
.strip__list p { margin: 0.5rem 0 0; color: var(--muted); line-height: 1.6; }
@media (max-width: 760px) { .strip__list { grid-template-columns: minmax(0, 1fr); } }

.split--top { align-items: start; }
.section .split:first-child { margin-top: 0; }
.steps--compact { margin-top: 0; grid-template-columns: minmax(0, 1fr); row-gap: 1.6rem; }
.steps--compact .step--text-only { grid-column: 1 / -1; }
.lede--after { margin-top: clamp(28px, 4vw, 44px); }
.section__head .lede + .lede { margin-top: 0.8rem; }
.tiers--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .tiers--four { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.6rem; } }
@media (max-width: 640px) { .tiers--four { grid-template-columns: minmax(0, 1fr); } }
.tier__specs dd { text-align: right; }

/* Centered text blocks: short sections read as one centered column
   (headline and paragraph share a comfortable measure) instead of hugging
   the left edge of a wide container. Two-column rows stay as they are. */
.section__head--center { max-width: 46rem; margin-inline: auto; text-align: center; }
.section__head--center .lede { margin-inline: auto; }
.lede--center { max-width: 46rem; margin-inline: auto; text-align: center; }
.band__actions--center { justify-content: center; margin-top: 1.8rem; }
.page-head--center { text-align: center; }
.page-head--center h1, .page-head--center .lede { margin-inline: auto; }
.page-head--center h1 { max-width: 22ch; }

/* Room for a two-line billing note so every plan's rows line up. */
.tier__note { min-height: 3.1em; }
.tier__specs dd.tier__tick { display: flex; align-items: center; justify-content: flex-end; color: var(--success); }
.tier__tick svg { width: 16px; height: 16px; }

/* Scrolling during the intro shows the text at once, even mid-rise. */
.js .hero.is-skipped .hero__content > * { animation: none !important; opacity: 1; transform: none; }

/* Media corner controls: two small round buttons (play/pause/replay bottom
   left, full screen bottom right) that appear on hover, tap or keyboard
   focus and fade out again. A video that hasn't started keeps its play
   button visible. */
.media-controls {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.media-btn {
  width: 34px; height: 34px; padding: 0; border-radius: 999px; display: grid; place-items: center;
  color: #f2f2f2; background: rgba(13, 13, 13, 0.74); border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer;
}
.media-btn svg { width: 14px; height: 14px; }
.media-btn--fs { margin-left: auto; }
.media-btn:hover { border-color: rgba(255, 255, 255, 0.4); }
.shot__frame.is-controls .media-controls,
.shot__frame:focus-within .media-controls,
.shot__frame:focus-visible .media-controls { opacity: 1; }
.shot__frame.is-controls .media-controls, .shot__frame:focus-within .media-controls { pointer-events: auto; }
.shot__frame.is-unstarted .media-controls { opacity: 1; pointer-events: auto; }
.shot__frame.is-unstarted .media-btn--fs { opacity: 0; }
.shot__frame.is-unstarted:is(.is-controls, :focus-within) .media-btn--fs { opacity: 1; }
@media (hover: hover) {
  .shot__frame:hover .media-controls { opacity: 1; pointer-events: auto; }
  .shot__frame.is-unstarted:hover .media-btn--fs { opacity: 1; }
}
a.shot__frame .media-controls { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .media-controls { transition: none; } }
.shot__frame.is-unstarted:not(.is-controls):not(:focus-within) .media-btn--fs { pointer-events: none; }

/* Headline phrases: each phrase starts on its own line; a phrase longer
   than the line wraps into balanced lines. */
.hl { display: block; text-wrap: balance; }
/* Centered headlines get a wider column than their paragraphs, so a
   phrase like "If you can draw boxes and arrows," fits on one line. */
.section__head--center { max-width: 60rem; }
.section__head--center .lede { max-width: 46rem; }
.page-head--center h1 { max-width: none; }
/* Headlines beside a demo or list sit in a narrower column. */
.split .section__head h2 { font-size: clamp(1.9rem, 3.1vw, 2.6rem); }


/* Engine section: headline + illustration on the left, intro + points on the right. */
.engine__lede { margin-top: 0; text-wrap: balance; }
.engine__side .points { margin-top: 1.6rem; }
#engine .split { align-items: start; }
.engine__layers { margin-top: clamp(32px, 4vw, 48px); width: 88%; max-width: 29rem; } /* 88% of its previous size */
/* Phones and narrow tablets: headline, intro, illustration, points. */
@media (max-width: 880px) {
  #engine .split { gap: 0; }
  #engine .section__head, #engine .engine__side { display: contents; }
  #engine .eyebrow, #engine h2 { order: 0; }
  #engine .engine__lede { order: 1; margin-top: 1.1rem; }
  #engine .engine__layers { order: 2; }
  #engine .engine__side .points { order: 3; margin-top: clamp(32px, 6vw, 48px); }
}

/* <engine-layers> (scripts/engine-layers.js) */
engine-layers {
  display: block; position: relative; width: 100%; max-width: 900px;
  container-type: inline-size; color: var(--el-text, #eee);
  aspect-ratio: 900 / 650;
}
engine-layers .el__svg { display: block; width: 100%; height: auto; }
engine-layers .el__result {
  position: absolute; top: 1%; left: 43.89%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.5em; white-space: nowrap;
  font: 500 clamp(9.6px, 2.88cqw, 16px)/1 var(--font-body);
}
engine-layers .el__dot { width: 0.42em; height: 0.42em; flex: none; border-radius: 50%; background: var(--el-accent); }
engine-layers .el__label {
  position: absolute; left: 83%; transform: translateY(-50%); white-space: nowrap;
  font: 400 clamp(8px, 2.08cqw, 12px)/1.3 var(--font-body); color: var(--muted);
}

/* Privacy page: lists and simple tables inside rows. */
.row-list { margin: 0.4rem 0 0.9rem; padding-left: 1.2rem; color: #c8c8c8; line-height: 1.75; max-width: 66ch; }
.row-list li + li { margin-top: 0.35rem; }
.row-list strong { color: var(--text); font-weight: 600; }
.row a.text-link, .row a.mail { color: var(--accent); }
.table-scroll { overflow-x: auto; margin: 0.6rem 0 1rem; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; line-height: 1.6; min-width: 520px; }
.data-table th { text-align: left; font: 500 0.7rem/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); padding: 0 1rem 0.6rem 0; border-bottom: 1px solid var(--line); }
.data-table td { vertical-align: top; padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid var(--line-soft); color: #c8c8c8; }
.data-table td:first-child { color: var(--text); }
.data-table code { display: block; margin-top: 0.25rem; font: 400 0.75rem/1.4 var(--font-mono); color: var(--dim); }