/* =========================================================================
   Dr. Andrew Koutnik × Steady State · pitch site (system A, "research brief")
   Warm paper, near-black ink, one ink-blue accent, hairline rules and a faint
   graph-paper grid that fades out like a CGM report. Signature motif: a glucose
   trace inside the pale 70 to 180 band that settles flat (hero periphery, the
   $100k underline, the beat rules). Newsreader (display) · Inter (text) ·
   IBM Plex Mono (labels). Every font-size carries var(--bump) (Diego: +2px).
   ========================================================================= */

@font-face { font-family: "Newsreader"; src: url("assets/fonts/newsreader-latin-opsz-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("assets/fonts/newsreader-latin-opsz-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-latin-opsz-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --bump: 2px;

  --bg: #f4f2ec;
  --bg-2: #efece4;
  --surface: #fffdf8;
  --surface-2: #f7f5ef;
  --line: rgba(18, 22, 25, 0.12);
  --line-soft: rgba(18, 22, 25, 0.075);

  --text: #121619;
  --text-2: #4a5156;
  --text-3: #5c6368;

  --accent: #2140b8;
  --accent-2: #3050cc;
  --accent-deep: #1a3192;
  --accent-ink: #fffdf8;
  --accent-soft: rgba(33, 64, 184, 0.065);
  --accent-line: rgba(33, 64, 184, 0.26);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --container: 1120px;
  --gutter: clamp(20px, 5vw, 32px);
  --section-y: clamp(80px, 12vh, 140px);
  --radius: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* the motif, as images (accent #2140b8 baked in) */
  --trace-mini: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Crect x='0' y='7' width='120' height='10' fill='%232140b8' fill-opacity='0.1'/%3E%3Cpath d='M0 12C1.5 10.58 5.83 2.17 9 3.5C12.17 4.83 15.67 19.5 19 20C22.33 20.5 25.67 7.33 29 6.5C32.33 5.67 35.5 14.42 39 15C42.5 15.58 46.17 10.37 50 10C53.83 9.63 57.83 12.57 62 12.8C66.17 13.03 70.33 11.52 75 11.4C79.67 11.28 82.5 12 90 12.1C97.5 12.2 115 12.02 120 12' fill='none' stroke='%232140b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --trace-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16'%3E%3Crect x='0' y='5' width='48' height='6' fill='%232140b8' fill-opacity='0.09'/%3E%3Cpath d='M0 8C0.83 7.08 3.33 1.58 5 2.5C6.67 3.42 8.33 13.17 10 13.5C11.67 13.83 13.33 5.05 15 4.5C16.67 3.95 18.17 9.75 20 10.2C21.83 10.65 23.83 7.5 26 7.2C28.17 6.9 30.67 8.28 33 8.4C35.33 8.52 37.5 7.97 40 7.9C42.5 7.83 46.67 7.98 48 8' fill='none' stroke='%232140b8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --------------------------------- Base --------------------------------- */
[hidden] { display: none !important; } /* mode-switched elements must stay hidden even when a component sets display */
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
/* page canvas: one continuous warm paper field, anchored to the document (no seams anywhere),
   a whisper of cool ink light at the top and a warmer fold towards the end */
body::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1400px 760px at 50% -160px, rgba(33, 64, 184, 0.06), transparent 70%),
    radial-gradient(1200px 900px at 100% 100%, rgba(33, 64, 184, 0.03), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 55%, var(--bg-2) 100%); }
/* paper grain */
body::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 140px 140px; }
body {
  position: relative;
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: calc(17px + var(--bump));
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "cv11", "ss01";
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }

/* ------------------------------ Typography ------------------------------ */
.eyebrow {
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: calc(0.72rem + var(--bump));
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.section__title {
  margin: 0;
  font-family: var(--display);
  font-size: calc(clamp(2rem, 4.4vw, 3.15rem) + var(--bump));
  font-weight: 420;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--text);
  text-wrap: balance;
}
.nowrap { white-space: nowrap; }

/* Small directional arrows */
.arrow, .arrow-down {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  vertical-align: middle;
  margin-left: 7px;
  transition: transform 0.3s var(--ease);
}
.arrow { transform: rotate(-45deg); }
.arrow-down { transform: rotate(45deg); margin-left: 8px; position: relative; top: -2px; }

/* -------------------------------- Reveal -------------------------------- */
/* Progressive enhancement: hidden-until-revealed only when JS is running (html.js). */
.js .reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.988);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }
.hero__inner .reveal:nth-child(1) { transition-delay: 0.05s; }
.hero__inner .reveal:nth-child(2) { transition-delay: 0.18s; }
.hero__inner .reveal:nth-child(3) { transition-delay: 0.3s; }

/* -------------------------------- Buttons ------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px;
  padding: 13px 28px;
  border-radius: 980px;
  font-family: var(--font);
  font-size: calc(0.98rem + var(--bump));
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease),
    border-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: var(--accent-ink); position: relative; overflow: hidden; box-shadow: 0 10px 28px -14px rgba(33, 64, 184, 0.55); }
.btn--primary::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(120deg, transparent, rgba(255, 253, 248, 0.26), transparent); transition: transform 0.6s var(--ease); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(33, 64, 184, 0.6); }
.btn--primary:hover::after { transform: translateX(120%); }
.btn--ghost { background: rgba(255, 253, 248, 0.6); color: var(--text); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); background: var(--surface); }
.btn--lg { padding: 17px 40px; font-size: calc(1.1rem + var(--bump)); }

/* --------------------------------- Hero --------------------------------- */
.hero {
  position: relative;
  text-align: center;
  padding-top: clamp(96px, 14vh, 152px);
  padding-bottom: clamp(28px, 5vh, 56px);
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
}
/* graph paper: minor 24px cells, major 120px, extremely faint, fading out downward like a CGM report */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(33, 64, 184, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(33, 64, 184, 0.055) 1px, transparent 1px),
    linear-gradient(to right, rgba(18, 22, 25, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 22, 25, 0.028) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center -1px;
  -webkit-mask-image: radial-gradient(120% 78% at 50% 0%, #000 22%, rgba(0, 0, 0, 0.45) 52%, transparent 82%);
          mask-image: radial-gradient(120% 78% at 50% 0%, #000 22%, rgba(0, 0, 0, 0.45) 52%, transparent 82%);
}
.hero__inner { position: relative; z-index: 1; }
.hero__title {
  margin: 0 auto;
  max-width: 1040px;
  font-family: var(--display);
  font-size: calc(clamp(1.75rem, 3.15vw, 2.85rem) + var(--bump));
  text-wrap: balance;
  font-weight: 400;
  line-height: 1.13;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: lining-nums;
}
/* Word-by-word reveal (applied once JS splits the headline) */
.js .hero__title.split { opacity: 1; transform: none; transition: none; } /* the words carry the entrance; no transition on the h1 itself so GSAP never samples a half-way state */
.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  filter: blur(6px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease);
  will-change: opacity, transform, filter;
}
.hero__title.is-in .word { opacity: 1; transform: none; filter: blur(0); }

/* $100k: accent ink, underlined by the trace settling flat inside its band */
.mark { position: relative; white-space: nowrap; color: var(--accent); font-weight: 460; }
.mark::after {
  content: "";
  position: absolute;
  left: -0.04em; right: -0.04em; bottom: -0.1em;
  height: 0.3em;
  background: var(--trace-mini) center / 100% 100% no-repeat;
  pointer-events: none;
}
.js .mark::after { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--ease) 0.95s; }
.js .hero__title.is-in .mark::after { clip-path: inset(0 0 0 0); }

.hero__actions { margin-top: 44px; display: flex; justify-content: center; }
.hero__actions .arrow-down { animation: chevBob 2.2s var(--ease) infinite; }

/* the hero-periphery trace (behind the player, full bleed) */
.hero__trace {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: clamp(150px, 15vw, 210px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero__trace svg { width: 100%; height: 100%; overflow: visible; }
.trace__band { fill: rgba(33, 64, 184, 0.06); }
.trace__edge { stroke: rgba(33, 64, 184, 0.22); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.trace__line { fill: none; stroke: var(--accent); stroke-opacity: 0.62; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trace__lab { position: absolute; right: clamp(16px, 3vw, 40px); font-family: var(--mono); font-size: calc(0.62rem + var(--bump)); letter-spacing: 0.12em; color: rgba(33, 64, 184, 0.62); line-height: 1; }
.trace__lab--hi { top: calc(32% - 1.5em); }
.trace__lab--lo { top: calc(68% + 0.6em); }
.js .hero__trace svg { clip-path: inset(0 100% 0 0); transition: clip-path 2.4s cubic-bezier(0.33, 0, 0.2, 1) 0.35s; }
.js .hplayer.is-in .hero__trace svg { clip-path: inset(0 0 0 0); }
.js .trace__lab { opacity: 0; transition: opacity 0.8s var(--ease) 1.9s; }
.js .hplayer.is-in .trace__lab { opacity: 1; }

/* -------------------------------- Player -------------------------------- */
.hplayer { position: relative; margin: 52px auto 0; max-width: 800px; }
.hplayer__stage {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; background: #0b0d10; border: 1px solid rgba(18, 22, 25, 0.16);
  box-shadow: 0 1px 2px rgba(18, 22, 25, 0.06), 0 34px 80px -34px rgba(18, 22, 25, 0.5), 0 0 0 8px rgba(255, 253, 248, 0.55);
}
.hplayer__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; display: block; background: #0b0d10; }

/* dark scrim behind the big play button (idle only) */
.hplayer__scrim { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.45s var(--ease);
  background: radial-gradient(120% 120% at 50% 45%, rgba(8, 10, 14, 0.06), rgba(8, 10, 14, 0.42)); }
.hplayer__stage:not([data-state="idle"]) .hplayer__scrim { opacity: 0; }

/* big centered play */
.hplayer__big { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 1px solid rgba(255, 253, 248, 0.45); background: var(--accent); backdrop-filter: blur(8px);
  box-shadow: 0 14px 34px -10px rgba(10, 18, 60, 0.55);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), opacity 0.4s var(--ease), border-color 0.4s var(--ease); }
.hplayer__big svg { width: 30px; height: 30px; fill: #fffdf8; margin-left: 4px; position: relative; z-index: 1; }
.hplayer__big-glow { position: absolute; inset: 0; border-radius: 50%; animation: hpPulse 2.8s ease-out infinite; }
.hplayer__big:hover { transform: translate(-50%, -50%) scale(1.07); background: var(--accent-2); border-color: #fffdf8; }
.hplayer__stage:not([data-state="idle"]) .hplayer__big { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.8); }
@keyframes hpPulse { 0% { box-shadow: 0 0 0 0 rgba(48, 80, 204, 0.5); } 70% { box-shadow: 0 0 0 22px rgba(48, 80, 204, 0); } 100% { box-shadow: 0 0 0 0 rgba(48, 80, 204, 0); } }

/* captions overlay */
.hplayer__cc { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); max-width: 84%; text-align: center;
  font-size: calc(clamp(0.9rem, 0.8rem + 0.5vw, 1.08rem) + var(--bump)); line-height: 1.4; color: #fffdf8; pointer-events: none;
  transition: bottom 0.3s var(--ease); }
.hplayer__cc span { background: rgba(8, 10, 14, 0.64); padding: 3px 10px; border-radius: 7px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hplayer__cc:empty { display: none; }
.hplayer__stage:hover .hplayer__cc, .hplayer__stage[data-state="paused"] .hplayer__cc { bottom: 82px; }

/* control bar (stays dark: it sits over footage, not over the page) */
.hplayer__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: linear-gradient(to top, rgba(8, 10, 14, 0.85), rgba(8, 10, 14, 0.4) 60%, transparent);
  opacity: 0; transform: translateY(8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.hplayer__stage:hover .hplayer__bar, .hplayer__stage[data-state="paused"] .hplayer__bar,
.hplayer__stage.hp-touch .hplayer__bar { opacity: 1; transform: none; }
.hplayer__stage[data-state="idle"] .hplayer__bar { opacity: 0; pointer-events: none; }

.hp-btn { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: none; background: transparent;
  color: #fffdf8; cursor: pointer; border-radius: 8px; opacity: 0.85; transition: opacity 0.2s var(--ease), background 0.2s var(--ease); }
.hp-btn:hover { opacity: 1; background: rgba(255, 253, 248, 0.12); }
.hp-btn svg { width: 20px; height: 20px; fill: #fffdf8; }
.hp-btn--mute svg, .hp-btn--full svg { fill: none; stroke: #fffdf8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-i-play, .hp-i-sound { display: none; }
.hplayer__stage[data-state="paused"] .hp-i-pause, .hplayer__stage[data-state="idle"] .hp-i-pause { display: none; }
.hplayer__stage[data-state="paused"] .hp-i-play, .hplayer__stage[data-state="idle"] .hp-i-play { display: block; }

.hp-time { font-family: var(--mono); font-size: calc(0.7rem + var(--bump)); color: rgba(255, 253, 248, 0.78); font-variant-numeric: tabular-nums; min-width: 40px; text-align: center; }

/* scrub */
.hp-scrub { position: relative; flex: 1 1 auto; height: 28px; display: flex; align-items: center; cursor: pointer; }
.hp-scrub__track { position: relative; width: 100%; height: 4px; border-radius: 99px; background: rgba(255, 253, 248, 0.22); transition: height 0.15s var(--ease); }
.hp-scrub:hover .hp-scrub__track, .hp-scrub.dragging .hp-scrub__track { height: 6px; }
.hp-scrub__buf { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 99px; background: rgba(255, 253, 248, 0.3); }
.hp-scrub__fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent-2), #8ea4ff); box-shadow: 0 0 10px rgba(80, 110, 230, 0.6); }
.hp-scrub__knob { position: absolute; top: 50%; left: 0; width: 13px; height: 13px; border-radius: 50%; background: #fffdf8;
  transform: translate(-50%, -50%) scale(0); transition: transform 0.18s var(--ease); box-shadow: 0 1px 5px rgba(8, 10, 14, 0.45); }
.hp-scrub:hover .hp-scrub__knob, .hp-scrub.dragging .hp-scrub__knob { transform: translate(-50%, -50%) scale(1); }

/* CC toggle (no CC button in this build; kept for parity) */
.hp-btn--cc { width: auto; padding: 0 9px; font-size: calc(0.7rem + var(--bump)); font-weight: 700; letter-spacing: 0.06em; }
.hp-btn--cc.is-on { background: rgba(48, 80, 204, 0.55); opacity: 1; }

/* speed */
.hp-speed { position: relative; }
.hp-btn--speed { width: auto; padding: 0 9px; font-family: var(--mono); font-size: calc(0.72rem + var(--bump)); font-weight: 600; font-variant-numeric: tabular-nums; }
.hp-speed__menu { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); min-width: 80px; padding: 6px;
  background: rgba(12, 14, 20, 0.97); border: 1px solid rgba(255, 253, 248, 0.12); border-radius: 12px; box-shadow: 0 16px 40px rgba(8, 10, 14, 0.5);
  display: none; flex-direction: column; gap: 2px; }
.hp-speed__menu.open { display: flex; }
.hp-speed__menu button { border: none; background: transparent; color: rgba(255, 253, 248, 0.82); font-family: var(--mono); font-size: calc(0.74rem + var(--bump)); font-weight: 500;
  padding: 7px 10px; border-radius: 7px; cursor: pointer; text-align: center; font-variant-numeric: tabular-nums; }
.hp-speed__menu button:hover { background: rgba(255, 253, 248, 0.09); color: #fffdf8; }
.hp-speed__menu button.is-on { background: rgba(48, 80, 204, 0.5); color: #fffdf8; }

@media (max-width: 560px) {
  .hp-btn { width: 32px; height: 32px; }
  .hp-btn--full { display: none; }
  .hplayer__cc { bottom: 62px; }
  .hplayer__big { width: 72px; height: 72px; }
  .hplayer__big svg { width: 26px; height: 26px; }
}

/* ----------------------------- Deliverables ----------------------------- */
.deliverables { padding-top: clamp(32px, 5vh, 64px); }
.deliverables__title { text-align: center; margin-bottom: clamp(56px, 9vh, 96px); }

.group { margin-bottom: clamp(68px, 10vh, 116px); }
.group:last-child { margin-bottom: 0; }
.group__head { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 36px; }
.group__rule { flex: 1; height: 1px; background: var(--line); max-width: 220px; }
.js .group__rule { transform: scaleX(0); transform-origin: center; transition: transform 0.9s var(--ease); }
.js .group__head.is-in .group__rule { transform: scaleX(1); }
.group__meta { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.group__label { font-family: var(--display); font-size: calc(1.2rem + var(--bump)); font-weight: 480; letter-spacing: -0.012em; color: var(--text); }
.group__count { font-family: var(--mono); font-size: calc(0.68rem + var(--bump)); color: var(--text-3); letter-spacing: 0.2em; }

.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }
.grid--1 { grid-template-columns: 1fr; }

/* Preview card: a framed browser window + clear type hierarchy */
.pcard {
  appearance: none; font: inherit; color: inherit; text-align: left; position: relative;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 12px 12px 22px; cursor: pointer; display: flex; flex-direction: column; gap: 0;
  transform-style: preserve-3d; will-change: transform;
  box-shadow: 0 1px 0 rgba(255, 253, 248, 0.9) inset, 0 1px 2px rgba(18, 22, 25, 0.04), 0 14px 34px -24px rgba(18, 22, 25, 0.28);
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.pcard:hover { border-color: var(--accent-line); box-shadow: 0 1px 0 rgba(255, 253, 248, 0.9) inset, 0 30px 60px -30px rgba(18, 22, 25, 0.34), 0 0 0 1px rgba(33, 64, 184, 0.06); }
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(33, 64, 184, 0.075), transparent 44%); opacity: 0; transition: opacity 0.35s var(--ease); pointer-events: none; }
.pcard:hover::after { opacity: 1; }

/* the window frame */
.thumb { position: relative; display: block; border-radius: 10px; overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 3; border: 1px solid var(--line-soft); box-shadow: 0 14px 30px -20px rgba(18, 22, 25, 0.32); }
.thumb--wide { aspect-ratio: 16 / 7; }
.thumb__bar { position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(250, 248, 242, 0.86)); border-bottom: 1px solid rgba(18, 22, 25, 0.08); backdrop-filter: blur(6px); }
.thumb__bar i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: rgba(18, 22, 25, 0.14); }
.thumb__bar i:nth-child(1) { background: #ff5f57; } .thumb__bar i:nth-child(2) { background: #febc2e; } .thumb__bar i:nth-child(3) { background: #28c840; }
.thumb__url { margin-left: 8px; flex: 1; min-width: 0; height: 16px; border-radius: 8px; background: rgba(18, 22, 25, 0.055); display: block; line-height: 16px; padding: 0 8px; font-family: var(--mono); font-size: calc(8.5px + var(--bump)); letter-spacing: 0.03em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb__img { position: absolute; inset: 26px 0 0 0; width: 100%; height: calc(100% - 26px); object-fit: cover; object-position: 50% 0%; transition: object-position 2.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s var(--ease); }
.pcard:hover .thumb__img { object-position: 50% 38%; }
.thumb--wide .thumb__img { object-position: 50% 50%; }
.pcard:hover .thumb--wide .thumb__img { object-position: 50% 50%; transform: scale(1.02); }
.thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 253, 248, 0.4); }

/* type */
.pcard__body { padding: 18px 8px 0; }
.pcard__kicker { display: block; font-family: var(--mono); font-size: calc(0.66rem + var(--bump)); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.pcard__title { display: block; font-family: var(--display); font-size: calc(1.36rem + var(--bump)); font-weight: 480; letter-spacing: -0.015em; line-height: 1.15; color: var(--text); }
.pcard__desc { display: block; margin-top: 8px; font-size: calc(0.9rem + var(--bump)); line-height: 1.5; color: var(--text-2); }
.pcard__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: calc(0.84rem + var(--bump)); font-weight: 600; color: var(--accent); letter-spacing: 0.005em; transition: gap 0.3s var(--ease); }
.pcard:hover .pcard__link { gap: 10px; }
.pcard__link .arrow { margin-left: 0; border-color: currentColor; }
.pcard--wide .pcard__body { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.pcard--wide .pcard__link { margin-top: 0; }
.n { font-variant-numeric: tabular-nums; }

/* SVG mock palette (legacy) */
.mock { width: 100%; height: auto; }
.m-stroke { fill: none; stroke: rgba(18, 22, 25, 0.28); stroke-width: 2; }
.m-line { stroke: rgba(18, 22, 25, 0.12); stroke-width: 1.5; }
.m-fill { fill: var(--accent); }
.m-soft { fill: rgba(18, 22, 25, 0.16); }
.m-faint { fill: rgba(18, 22, 25, 0.07); }
.m-panel { fill: var(--surface-2); stroke: rgba(18, 22, 25, 0.12); stroke-width: 1; }

/* --------------------------------- CTA ---------------------------------- */
.cta { text-align: center; overflow: hidden; padding-bottom: clamp(96px, 14vh, 150px); }
/* the graph paper returns, faintly, behind the calendar (fades in and out, no seams) */
.cta::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(33, 64, 184, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(33, 64, 184, 0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(18, 22, 25, 0.024) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 22, 25, 0.024) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center 0;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 55%, #000 10%, transparent 72%);
          mask-image: radial-gradient(70% 60% at 50% 55%, #000 10%, transparent 72%);
}
.cta__wrap { position: relative; }
.cta__title {
  margin: 0 0 36px;
  font-family: var(--display);
  font-size: calc(clamp(2.6rem, 6.2vw, 4.4rem) + var(--bump));
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* -------------------------------- Footer -------------------------------- */
/* branding-only banner: height is exactly 1.5x the 48px branding line, centred */
.footer { position: relative; min-height: 72px; padding-block: 12px; background: rgba(18, 22, 25, 0.035); }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: -140px; height: 140px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(18, 22, 25, 0.035)); }
.footer__inner { height: 100%; display: flex; align-items: center; justify-content: center; }
.footer__note { font-family: var(--mono); font-size: calc(0.72rem + var(--bump)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); line-height: 48px; text-align: center; white-space: nowrap; }
.footer__inner { gap: 18px; flex-wrap: wrap; }
.footer__social { display: inline-flex; align-items: center; gap: 6px; }
.footer__social a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 10px; border-radius: 99px; font-size: calc(0.78rem + var(--bump)); font-weight: 600; color: var(--text-2); transition: color 0.3s var(--ease), background 0.3s var(--ease); }
.footer__social a:hover { color: var(--text); background: rgba(18, 22, 25, 0.05); }
.footer__social svg { width: 20px; height: 15px; flex: none; }
.footer__social a + a svg { width: 16px; height: 16px; }

/* ------------------------------ Sticky CTA ------------------------------ */
/* Booking one tap away for the whole scroll; yields only to the closing CTA. */
.stickycta {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 24px;
  border-radius: 980px;
  background: var(--accent, var(--text));
  color: var(--accent-ink, var(--bg));
  font-size: calc(0.96rem + var(--bump));
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 12px 36px color-mix(in srgb, var(--accent) 34%, transparent),
    0 0 0 1px rgba(18, 22, 25, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
    visibility 0s linear 0.35s;
}
.stickycta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--mgx, 0px), var(--mgy, 0px)) scale(1);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s;
}
.stickycta.is-visible:hover { transform: translate(var(--mgx, 0px), calc(var(--mgy, 0px) - 2px)) scale(1.02); }
.stickycta__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-ink, var(--bg));
  animation: stickyPulse 2.4s var(--ease) infinite;
}
@keyframes stickyPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-ink) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
@media (max-width: 560px) {
  .stickycta { left: clamp(16px, 3vw, 28px); right: clamp(16px, 3vw, 28px); justify-content: center; }
}

/* ------------------------------- Lightbox ------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 64px);
  background: rgba(14, 17, 20, 0.74);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox__inner {
  max-width: 1000px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.lightbox__stage {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 248, 0.16);
  background: var(--surface);
  max-height: 78vh;
  transform-origin: top left;
  transition: transform 0.5s var(--ease);
  will-change: transform;
  box-shadow: 0 40px 120px -30px rgba(8, 10, 14, 0.6);
}
.lightbox__stage img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; display: block; }
.lightbox__stage--embed { height: 78vh; background: #ffffff; }
.lightbox__frame { width: 100%; height: 100%; border: 0; display: block; background: #ffffff; }
.lightbox__open { margin-left: 12px; font-size: calc(0.84rem + var(--bump)); font-weight: 500; color: rgba(255, 253, 248, 0.8); border-bottom: 1px solid rgba(255, 253, 248, 0.4); transition: color 0.3s var(--ease); }
.lightbox__open:hover { color: #fffdf8; }
.lightbox__placeholder { padding: clamp(28px, 6vw, 64px); text-align: center; }
.lightbox__placeholder .mock { max-width: 560px; margin: 0 auto 22px; }
.lightbox__placeholder p { margin: 0; font-size: calc(0.9rem + var(--bump)); color: var(--text-3); }
.lightbox__title { margin: 0; font-size: calc(1.02rem + var(--bump)); font-weight: 600; color: #fffdf8; text-align: center; }
.lightbox__close {
  position: absolute;
  top: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 253, 248, 0.42);
  background: rgba(255, 253, 248, 0.14);
  color: #fffdf8;
  font-size: calc(1.6rem + var(--bump));
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.lightbox__close:hover { background: rgba(255, 253, 248, 0.26); transform: rotate(90deg); }

/* --------------------------- Calendly popup ----------------------------- */
.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(14, 17, 20, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}
.cal-modal.open { opacity: 1; visibility: visible; }
.cal-frame {
  position: relative;
  width: min(820px, 100%);
  height: min(1000px, 92vh);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 40px 120px rgba(8, 10, 14, 0.45);
  transform: scale(0.98);
  transition: transform 0.28s var(--ease);
}
.cal-modal.open .cal-frame { transform: scale(1); }
.cal-frame iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.cal-loader {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.3s var(--ease);
}
.cal-loader span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: calDot 1s ease-in-out infinite; }
.cal-loader span:nth-child(2) { animation-delay: 0.15s; }
.cal-loader span:nth-child(3) { animation-delay: 0.3s; }
.cal-modal.cal-ready .cal-loader { opacity: 0; }

/* ------------------------------- Keyframes ------------------------------ */
@keyframes chevBob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(2px, 2px); }
}
@keyframes calDot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 860px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body { font-size: calc(16px + var(--bump)); }
  .grid--3, .grid--2 { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .pcard--wide .pcard__body { grid-template-columns: 1fr; gap: 0; }
  .pcard--wide .pcard__link { margin-top: 16px; }
  .thumb--wide { aspect-ratio: 16 / 10; }
  .group__rule { max-width: 56px; }
  .stickycta { padding: 12px 22px; }
  .cal-frame { height: 90vh; border-radius: 16px; }
}

/* --------------------------- Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .lightbox, .lightbox__stage { transition: none; }
  .hplayer__big-glow, .hero__actions .arrow-down { animation: none; }
  .js .mark::after { transition: none; clip-path: none; }
  .js .hero__trace svg { transition: none; clip-path: none; }
  .js .trace__lab { transition: none; opacity: 1; }
  .js .group__rule { transition: none; transform: scaleX(1); }
  .js .beat__rule { transition: none; clip-path: none; }
  .thumb__img { transition: none; }
  .pcard { transition: none; }
  .stickycta { transform: none; transition: opacity 0.25s linear, visibility 0s linear 0.25s; }
  .stickycta.is-visible { transform: none; transition: opacity 0.25s linear; }
  .stickycta__dot { animation: none; }
  .cal-modal { transition: opacity 0.15s linear; }
  .cal-frame { transition: none; transform: none; }
  .cal-loader span { animation: none; }
}

/* ---------------------- Hero photo-swarm (signature) -------------------- */
/* Overlay above the already-visible hero, pinned to the first screen, pointer-events none
   throughout. Eight tiles = four mirrored pairs (odd child = left, even child = right).
   Positions are CSS custom properties per tile (vw/vh from the screen centre):
   --ox/--oy off-screen start + exit, --ix/--iy the gathered hold, --r tilt. Phones get
   their own layout and six tiles (pair 4 hidden). */
.swarm { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; pointer-events: none; z-index: 5; overflow: visible; }
.swarm__ph {
  --w: clamp(84px, 7.6vw, 124px);
  --pw: min(400px, 50vw - 32px);                   /* half the player's width */
  --in: calc(var(--pw) + 16px + var(--w) / 2);     /* inner column centre, measured from the screen centre */
  --out: calc(var(--pw) + 30px + var(--w) * 1.5);  /* outer column centre */
  position: absolute; left: 50%; top: 50%;
  width: var(--w); aspect-ratio: 4 / 5;
  margin-left: calc(var(--w) / -2); margin-top: calc(var(--w) * -0.625);
  border-radius: 12px; overflow: hidden;
  border: 3px solid var(--surface); background: var(--surface-2);
  box-shadow: 0 1px 2px rgba(18, 22, 25, 0.08), 0 22px 44px -18px rgba(18, 22, 25, 0.42);
  opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--r, 0deg)) scale(0.92); will-change: transform, opacity;
}
.swarm__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swarm.is-on .swarm__ph { animation: swarmIn 2.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes swarmIn {
  0%   { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--r, 0deg)) scale(0.92); }
  28%  { opacity: 1; transform: translate(var(--ix), var(--iy)) rotate(calc(var(--r, 0deg) * 0.4)) scale(1); }
  52%  { opacity: 1; transform: translate(var(--ix), var(--iy)) rotate(calc(var(--r, 0deg) * 0.4)) scale(1); }
  100% { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--r, 0deg)) scale(0.92); }
}
/* desktop: two columns either side of the player, zig-zagging down (outer, inner, outer, inner),
   entering from the top corners, the sides and the bottom corners and leaving the same way */
.swarm__ph:nth-child(1) { --ox: -64vw; --oy: -66vh; --ix: calc(var(--out) * -1); --iy: -27vh; --r: -9deg; }
.swarm__ph:nth-child(2) { --ox:  64vw; --oy: -66vh; --ix: var(--out);            --iy: -27vh; --r:  9deg; }
.swarm__ph:nth-child(3) { --ox: -72vw; --oy:   0vh; --ix: calc(var(--in) * -1);  --iy:   2vh; --r: -5deg; }
.swarm__ph:nth-child(4) { --ox:  72vw; --oy:   0vh; --ix: var(--in);             --iy:   2vh; --r:  5deg; }
.swarm__ph:nth-child(5) { --ox: -72vw; --oy:  26vh; --ix: calc(var(--out) * -1); --iy:  24vh; --r:  6deg; }
.swarm__ph:nth-child(6) { --ox:  72vw; --oy:  26vh; --ix: var(--out);            --iy:  24vh; --r: -6deg; }
.swarm__ph:nth-child(7) { --ox: -36vw; --oy:  72vh; --ix: calc(var(--in) * -1);  --iy:  38vh; --r: -4deg; }
.swarm__ph:nth-child(8) { --ox:  36vw; --oy:  72vh; --ix: var(--in);             --iy:  38vh; --r:  4deg; }
/* face-safe crops (object-position from research/images.md); two tiles zoom slightly to drop
   baked-in borders (testimony) or the inset card in the lower half of the IG cover */
.swarm__ph:nth-child(1) img { object-position: 46% 22%; }
.swarm__ph:nth-child(2) img { object-position: 52% 30%; }
.swarm__ph:nth-child(3) img { object-position: 48% 28%; }
.swarm__ph:nth-child(4) img { object-position: 50% 0%; transform: scale(1.3); transform-origin: 50% 0%; }
.swarm__ph:nth-child(5) img { object-position: 78% 15%; }
.swarm__ph:nth-child(6) img { object-position: 52% 30%; transform: scale(1.15); }
.swarm__ph:nth-child(7) img { object-position: 51% 38%; }
.swarm__ph:nth-child(8) img { object-position: 48% 35%; }
/* small laptops / tablets: the player leaves room for one column a side, so six tiles (pair 1 rests) */
@media (min-width: 761px) and (max-width: 1180px) {
  .swarm__ph { --w: clamp(76px, 8.4vw, 100px); --pw: min(400px, 50vw - 24px); }
  .swarm__ph:nth-child(-n+2) { display: none; }
  .swarm__ph:nth-child(3) { --ix: calc(var(--in) * -1); --iy:  0vh; }
  .swarm__ph:nth-child(4) { --ix: var(--in);            --iy:  0vh; }
  .swarm__ph:nth-child(5) { --ix: calc(var(--in) * -1); --iy: 19vh; }
  .swarm__ph:nth-child(6) { --ix: var(--in);            --iy: 19vh; }
  .swarm__ph:nth-child(7) { --iy: 38vh; }
  .swarm__ph:nth-child(8) { --iy: 38vh; }
}
/* phones: six smaller tiles (pair 4 rests), same mirrored symmetry and timing. Measured from the
   top of the screen in px (the phone hero is laid out in px): the top corners above the eyebrow,
   the player's top corners, and either side of the Start here button. In from the top corners,
   the sides and the bottom corners, out the same way, never past the screen's left or right edge
   while gathered. */
@media (max-width: 760px) {
  .swarm__ph { --w: clamp(64px, 19vw, 92px); top: 0; border-width: 2px; border-radius: 10px; }
  .swarm__ph:nth-child(n+7) { display: none; }
  .swarm__ph:nth-child(1) { --ox: -62vw; --oy: -160px;               --ix: -39vw; --iy: 88px;  --r: -8deg; }
  .swarm__ph:nth-child(2) { --ox:  62vw; --oy: -160px;               --ix:  39vw; --iy: 88px;  --r:  8deg; }
  .swarm__ph:nth-child(3) { --ox: -84vw; --oy: 408px;                --ix: -40vw; --iy: 408px; --r: -6deg; }
  .swarm__ph:nth-child(4) { --ox:  84vw; --oy: 408px;                --ix:  40vw; --iy: 408px; --r:  6deg; }
  .swarm__ph:nth-child(5) { --ox: -58vw; --oy: calc(100svh + 90px);  --ix: -39vw; --iy: 656px; --r:  7deg; }
  .swarm__ph:nth-child(6) { --ox:  58vw; --oy: calc(100svh + 90px);  --ix:  39vw; --iy: 656px; --r: -7deg; }
  /* a slightly longer hold on phones so the photos register before they leave */
  .swarm.is-on .swarm__ph { animation-name: swarmInPhone; animation-duration: 3.2s; }
}
@keyframes swarmInPhone {
  0%   { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--r, 0deg)) scale(0.92); }
  26%  { opacity: 1; transform: translate(var(--ix), var(--iy)) rotate(calc(var(--r, 0deg) * 0.4)) scale(1); }
  62%  { opacity: 1; transform: translate(var(--ix), var(--iy)) rotate(calc(var(--r, 0deg) * 0.4)) scale(1); }
  100% { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(var(--r, 0deg)) scale(0.92); }
}
/* Reduce Motion on: same tiles, same gathered spots, opacity only (no travel, no tilt change).
   Out-specifies the html.reduced zero-duration rule on purpose so phones with the setting on
   still see the photos come in. */
@keyframes swarmFade {
  0%   { opacity: 0; transform: translate(var(--ix), var(--iy)) rotate(calc(var(--r, 0deg) * 0.4)) scale(1); }
  24%  { opacity: 1; transform: translate(var(--ix), var(--iy)) rotate(calc(var(--r, 0deg) * 0.4)) scale(1); }
  66%  { opacity: 1; transform: translate(var(--ix), var(--iy)) rotate(calc(var(--r, 0deg) * 0.4)) scale(1); }
  100% { opacity: 0; transform: translate(var(--ix), var(--iy)) rotate(calc(var(--r, 0deg) * 0.4)) scale(1); }
}
html .swarm.swarm--soft.is-on .swarm__ph { animation: swarmFade 2.9s ease-in-out both !important; animation-duration: 2.9s !important; animation-delay: 0s !important; }

/* reduced / static: jump to final states (no mid-transition captures, honours prefers-reduced-motion) */
html.reduced *, html.reduced *::before, html.reduced *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; transition-delay: 0s !important; }

/* ------------------------- Sender options (pitch site) ------------------- */
/* Agency branding: small top-left lockup. Configured in PITCH_CONFIG.brand; removed when empty. */
.agency-bar { position: absolute; top: clamp(18px, 3vw, 28px); left: clamp(18px, 3vw, 32px); z-index: 6; display: inline-flex; align-items: center; gap: 10px; }
.agency-bar a { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; }
.agency-bar img { height: 26px; width: auto; display: block; }
.agency-bar span { font-family: var(--mono); font-size: calc(0.68rem + var(--bump)); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); }

/* Hero embed (Loom / Wistia) */
.hplayer__embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #0b0d10; }
.hplayer__stage[data-state="embed"] .hplayer__scrim, .hplayer__stage[data-state="embed"] .hplayer__big, .hplayer__stage[data-state="embed"] .hplayer__bar, .hplayer__stage[data-state="embed"] .hplayer__cc { display: none; }

/* Inline Calendly (replaces the CTA button + modal) */
.cta__title { margin-bottom: 28px; }
.cal-inline { position: relative; width: min(920px, 100%); margin: 0 auto; height: min(760px, 92vh); border-radius: 18px; overflow: hidden; background: #ffffff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18, 22, 25, 0.05), 0 40px 90px -46px rgba(18, 22, 25, 0.4), 0 0 0 8px rgba(255, 253, 248, 0.6); }
.cal-inline iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Case studies (optional, PITCH_CONFIG.caseStudies) */
.case-studies { padding-top: 0; }
.case-studies__title { text-align: center; margin-bottom: clamp(36px, 6vh, 60px); }
.cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 960px; margin-inline: auto; }
.cs-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.cs-media { aspect-ratio: 16 / 9; background: var(--surface-2); }
.cs-media iframe, .cs-media img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.cs-body { padding: 20px 22px 24px; text-align: center; }
.cs-result { margin: 0 0 8px; font-family: var(--mono); font-size: calc(0.72rem + var(--bump)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.cs-title { margin: 0 0 8px; font-family: var(--display); font-size: calc(1.2rem + var(--bump)); font-weight: 500; letter-spacing: -0.01em; }
.cs-text { margin: 0; font-size: calc(0.94rem + var(--bump)); color: var(--text-2); line-height: 1.55; }
@media (max-width: 700px) { .cs-grid { grid-template-columns: 1fr; } .cal-inline { height: 80vh; border-radius: 16px; box-shadow: 0 30px 70px -40px rgba(18, 22, 25, 0.4), 0 0 0 5px rgba(255, 253, 248, 0.6); } }

/* ------------------------- Bridge (unaware mode) ------------------------- */
.bridge { padding-bottom: clamp(32px, 5vh, 56px); }
.bridge__head { text-align: center; margin-bottom: clamp(56px, 9vh, 100px); }
.bridge__head .eyebrow { margin-bottom: 16px; }
.beat { display: grid; grid-template-columns: 72px minmax(0, 1.12fr) minmax(320px, 1fr); gap: clamp(24px, 4vw, 60px); align-items: start; padding-block: clamp(44px, 7vh, 72px); border-top: 1px solid var(--line); }
.beat:last-of-type { border-bottom: 1px solid var(--line); }
.beat__num { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.beat__idx { font-family: var(--mono); font-size: calc(0.76rem + var(--bump)); font-weight: 500; letter-spacing: 0.2em; color: var(--accent); line-height: 1; }
/* the motif, small: a trace that settles flat inside its band */
.beat__rule { display: block; width: 48px; height: 16px; background: var(--trace-rule) left center / 48px 16px no-repeat; }
.js .beat__rule { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease) 0.35s; }
.js .beat.is-in .beat__rule { clip-path: inset(0 0 0 0); }
.beat__kicker { margin: 0 0 14px; font-family: var(--mono); font-size: calc(0.7rem + var(--bump)); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.beat__title { margin: 0 0 18px; font-family: var(--display); font-size: calc(clamp(1.5rem, 2.5vw, 2.05rem) + var(--bump)); font-weight: 440; line-height: 1.14; letter-spacing: -0.018em; text-wrap: balance; color: var(--text); }
.beat__text { margin: 0; font-size: calc(1rem + var(--bump)); line-height: 1.66; color: var(--text-2); max-width: 56ch; }
/* the figure card */
.beat__aside { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 20px 22px 22px; box-shadow: 0 1px 2px rgba(18, 22, 25, 0.04), 0 22px 50px -32px rgba(18, 22, 25, 0.3); }
.fig__label { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: var(--mono); font-size: calc(0.64rem + var(--bump)); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.fig__rule { flex: 1; height: 1px; background: var(--line-soft); }
.aside__note { margin: 16px 0 0; font-family: var(--display); font-style: italic; font-size: calc(0.98rem + var(--bump)); font-weight: 400; line-height: 1.45; letter-spacing: -0.003em; color: var(--text-2); }
.aside__link { color: var(--accent); border-bottom: 1px solid var(--accent-line); transition: border-color 0.3s var(--ease); }
.aside__link:hover { border-color: var(--accent); }
/* 01 · price ladder (a table in a paper) */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; }
.ladder li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 2px; border-bottom: 1px solid var(--line-soft); font-size: calc(0.92rem + var(--bump)); }
.ladder li span { color: var(--text-2); }
.ladder li b { font-family: var(--display); font-size: calc(1.02rem + var(--bump)); font-weight: 500; white-space: nowrap; color: var(--text); }
.ladder__gap { margin-top: 12px; padding: 12px 14px !important; border: 1px dashed rgba(33, 64, 184, 0.5) !important; border-radius: 10px; background: var(--accent-soft); }
.ladder__gap span { color: var(--text) !important; }
.ladder__gap b { color: var(--accent) !important; font-family: var(--mono) !important; font-weight: 500 !important; font-size: calc(0.68rem + var(--bump)) !important; letter-spacing: 0.14em; text-transform: uppercase; }
/* 02 · before / after */
.shift { display: grid; grid-template-columns: 1fr 26px 1fr; align-items: stretch; gap: 10px; }
.shift__col { display: grid; align-content: start; gap: 6px; padding: 16px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.shift__col--on { background: var(--accent-soft); border-color: var(--accent-line); }
.shift__label { font-family: var(--mono); font-size: calc(0.62rem + var(--bump)); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.shift__col--on .shift__label { color: var(--accent); }
.shift__col b { font-family: var(--display); font-size: calc(1.22rem + var(--bump)); font-weight: 480; line-height: 1.15; letter-spacing: -0.012em; }
.shift__col--on b { color: var(--accent-deep); }
.shift__sub { font-size: calc(0.8rem + var(--bump)); color: var(--text-2); line-height: 1.4; }
.shift__arrow { align-self: center; width: 22px; height: 22px; border-right: 1.6px solid var(--accent); border-top: 1.6px solid var(--accent); transform: rotate(45deg) scale(0.55); justify-self: center; }
/* 03 · sums */
.sums { display: grid; }
.sum { display: grid; grid-template-columns: 118px 1fr; align-items: baseline; gap: 14px; padding: 13px 2px; border-bottom: 1px solid var(--line-soft); }
.sum b { font-family: var(--display); font-size: calc(1.6rem + var(--bump)); font-weight: 450; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.sum span { font-size: calc(0.84rem + var(--bump)); color: var(--text-2); line-height: 1.45; }
.sum--on { margin-top: 12px; padding: 14px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--accent-soft); }
.sum--on b { color: var(--accent-deep); }
/* 04 · the week */
.week { list-style: none; margin: 0; padding: 0; display: grid; }
.week li { display: grid; grid-template-columns: 118px 1fr; gap: 14px; align-items: baseline; padding: 13px 2px; border-bottom: 1px solid var(--line-soft); }
.week li:last-child { border-bottom: 0; }
.week b { font-family: var(--display); font-size: calc(1.3rem + var(--bump)); font-weight: 460; letter-spacing: -0.015em; white-space: nowrap; color: var(--text); }
.week li:last-child b { color: var(--accent-deep); }
.week span { font-size: calc(0.84rem + var(--bump)); color: var(--text-2); line-height: 1.45; }
/* 03b · the calculator (full width under beat 03, aligned to the copy column) */
.calc { margin: 0 0 clamp(44px, 7vh, 72px) calc(72px + clamp(24px, 4vw, 60px)); background: var(--surface); border: 1px solid var(--line-soft); border-radius: calc(var(--radius) + 4px); padding: clamp(20px, 3vw, 32px); box-shadow: 0 1px 2px rgba(18, 22, 25, 0.04), 0 30px 70px -44px rgba(18, 22, 25, 0.38); }
.calc__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.calc__fig { margin-bottom: 8px; }
.calc__title { margin: 0; font-family: var(--display); font-size: calc(clamp(1.45rem, 2.3vw, 1.85rem) + var(--bump)); font-weight: 440; letter-spacing: -0.018em; line-height: 1.15; color: var(--text); }
.calc__presets { display: inline-flex; padding: 4px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.calc__preset { appearance: none; border: 0; background: transparent; padding: 10px 18px; min-height: 44px; border-radius: 99px; font-family: var(--font); font-size: calc(0.9rem + var(--bump)); font-weight: 600; color: var(--text-2); cursor: pointer; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.calc__preset.is-on { background: var(--accent); color: var(--accent-ink); }
.calc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(22px, 3vw, 40px); align-items: start; }
.calc__sliders { display: grid; gap: 14px; }
.sl { display: grid; gap: 6px; }
.sl__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: calc(0.9rem + var(--bump)); color: var(--text-2); }
.sl output { font-family: var(--display); font-size: calc(1.08rem + var(--bump)); font-weight: 500; color: var(--text); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.sl input[type="range"] { --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; margin: 0; touch-action: pan-y; }
.sl input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--p), rgba(18, 22, 25, 0.1) var(--p)); }
.sl input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: rgba(18, 22, 25, 0.1); }
.sl input[type="range"]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--accent); }
.sl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 2px 8px rgba(18, 22, 25, 0.22); }
.sl input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 2px 8px rgba(18, 22, 25, 0.22); }
.sl input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.calc__out { display: grid; gap: 14px; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.flow li { display: grid; gap: 3px; justify-items: center; text-align: center; padding: 12px 4px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.flow b { font-family: var(--display); font-size: calc(1.3rem + var(--bump)); font-weight: 500; letter-spacing: -0.015em; line-height: 1.05; font-variant-numeric: lining-nums tabular-nums; color: var(--text); }
.flow span { font-size: calc(0.7rem + var(--bump)); color: var(--text-2); line-height: 1.2; }
.flow__on { background: var(--accent-soft) !important; border-color: var(--accent-line) !important; }
.flow__on b { color: var(--accent-deep); }
.calc__result { padding: 20px 22px; border-radius: 16px; background: #121619; color: #fffdf8; }
.calc__big { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--display); font-size: calc(clamp(2.4rem, 4.6vw, 3.3rem) + var(--bump)); font-weight: 420; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.calc__big span { color: #b4c2ff; }
.calc__big small { font-family: var(--font); font-size: calc(0.95rem + var(--bump)); font-weight: 500; letter-spacing: 0; color: rgba(255, 253, 248, 0.74); }
.calc__line { margin: 12px 0 0; font-size: calc(0.9rem + var(--bump)); line-height: 1.55; color: rgba(255, 253, 248, 0.82); }
.calc__line b { color: #fffdf8; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.cbars { display: grid; gap: 10px; padding: 16px 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-soft); }
.cbar { display: grid; grid-template-columns: 112px minmax(0, 1fr) 92px; align-items: center; gap: 12px; font-size: calc(0.84rem + var(--bump)); }
.cbar__label { color: var(--text-2); }
.cbar__track { height: 10px; border-radius: 99px; background: rgba(18, 22, 25, 0.07); overflow: hidden; }
.cbar__fill { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: rgba(18, 22, 25, 0.26); transition: width 0.9s var(--ease); }
.cbar--on .cbar__fill { background: linear-gradient(90deg, var(--accent-deep), var(--accent-2)); }
.cbar b { font-family: var(--display); font-weight: 500; text-align: right; font-variant-numeric: lining-nums tabular-nums; color: var(--text); white-space: nowrap; }
.cbar--on b { color: var(--accent-deep); }
.calc__note { margin: 18px 0 0; font-size: calc(0.8rem + var(--bump)); line-height: 1.6; color: var(--text-3); max-width: 92ch; }
@media (max-width: 1000px) { .calc__grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .calc { margin-left: 0; } }
@media (max-width: 600px) {
  .calc { padding: 18px 14px 20px; border-radius: 18px; }
  .calc__head { align-items: flex-start; }
  .calc__presets { width: 100%; }
  .calc__preset { flex: 1; padding: 10px 8px; }
  .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .flow li { padding: 10px 2px 8px; border-radius: 10px; }
  .flow b { font-size: calc(1.02rem + var(--bump)); }
  .flow span { font-size: calc(0.64rem + var(--bump)); }
  .calc__result { padding: 18px 16px; }
  .cbars { padding: 14px 12px; }
  .cbar { grid-template-columns: 88px minmax(0, 1fr) 76px; gap: 8px; font-size: calc(0.76rem + var(--bump)); }
}

.bridge__close { text-align: center; padding-top: clamp(52px, 8vh, 84px); display: grid; gap: 28px; justify-items: center; }
.bridge__closing { margin: 0; max-width: 40ch; font-family: var(--display); font-size: calc(clamp(1.3rem, 2.1vw, 1.7rem) + var(--bump)); font-weight: 400; line-height: 1.3; letter-spacing: -0.014em; text-wrap: balance; color: var(--text); }
.cta__sub { margin: -10px auto 36px; max-width: 54ch; font-size: calc(1rem + var(--bump)); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
@media (max-width: 900px) {
  .beat { grid-template-columns: 1fr; gap: 22px; }
  .beat__num { flex-direction: row; align-items: center; }
}

/* ------------------------- Who built this (#proof) ------------------------ */
.proof { padding-top: clamp(40px, 6vh, 72px); }
.proof__head { text-align: center; margin-bottom: clamp(48px, 8vh, 84px); }
.proof__head .eyebrow { margin-bottom: 16px; }
.proof__videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 36px); max-width: 1040px; margin-inline: auto; }
.pvid { margin: 0; text-align: center; }
.pvid__media { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0b0d10; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(18, 22, 25, 0.05), 0 28px 60px -36px rgba(18, 22, 25, 0.45), 0 0 0 6px rgba(255, 253, 248, 0.6); }
.pvid__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.pvid__lite { appearance: none; -webkit-appearance: none; display: block; width: 100%; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.pvid__lite:hover { transform: translateY(-4px); }
.pvid__lite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease), filter 0.5s var(--ease); }
.pvid__lite:hover img { transform: scale(1.03); }
.pvid__lite:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.pvid__play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); box-shadow: 0 12px 30px -8px rgba(33, 64, 184, 0.6), 0 0 0 8px rgba(255, 253, 248, 0.18); transition: transform 0.4s var(--ease); }
.pvid__play svg { width: 26px; height: 26px; margin-left: 4px; fill: #fffdf8; }
.pvid__lite:hover .pvid__play { transform: scale(1.08); }
.pvid__badge { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 8px; border-radius: 99px; background: rgba(11, 13, 16, 0.72); color: #fffdf8; font-family: var(--font); font-size: calc(0.72rem + var(--bump)); font-weight: 600; letter-spacing: 0.01em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pvid__badge svg { width: 20px; height: 14px; }
.pvid__media.is-playing { cursor: default; }
.pvid__media.is-playing:hover { transform: none; }
.pvid__name { margin: 26px 0 8px; font-family: var(--display); font-size: calc(1.3rem + var(--bump)); font-weight: 480; line-height: 1.2; letter-spacing: -0.014em; color: var(--text); text-wrap: balance; }
.pvid__desc { margin: 0 auto; max-width: 40ch; text-wrap: balance; font-size: calc(0.92rem + var(--bump)); line-height: 1.55; color: var(--text-2); }

.proof__profiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 28px); max-width: 860px; margin: clamp(56px, 8vh, 88px) auto 0; }
.prof { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 26px 26px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft);
  box-shadow: 0 1px 2px rgba(18, 22, 25, 0.04), 0 22px 50px -34px rgba(18, 22, 25, 0.32);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.prof:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: 0 1px 2px rgba(18, 22, 25, 0.04), 0 34px 70px -36px rgba(18, 22, 25, 0.38); }
.prof__media { position: relative; display: block; width: 88px; height: 88px; margin-bottom: 18px; }
.prof__avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: 52% 37%; background: var(--surface-2); border: 1px solid var(--line-soft); }
.prof__ring { display: block; width: 88px; height: 88px; padding: 3px; border-radius: 50%; background: conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.prof__ring .prof__avatar { width: 82px; height: 82px; border: 2px solid var(--surface); }
.prof__badge { position: absolute; right: -6px; bottom: -2px; display: grid; place-items: center; border-radius: 9px; background: var(--surface); box-shadow: 0 2px 8px rgba(18, 22, 25, 0.16); }
.prof__badge--yt { width: 38px; height: 28px; padding: 0 5px; }
.prof__badge--yt svg { width: 28px; height: 20px; }
.prof__badge--ig { width: 32px; height: 32px; padding: 3px; }
.prof__badge--ig svg { width: 26px; height: 26px; }
.prof__name { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: calc(1.08rem + var(--bump)); font-weight: 650; letter-spacing: -0.012em; color: var(--text); }
.prof__verified { width: 18px; height: 18px; flex: none; }
.prof__handle { margin-top: 4px; font-family: var(--mono); font-size: calc(0.78rem + var(--bump)); letter-spacing: 0.02em; color: var(--text-3); }
.prof__bio { margin-top: 14px; max-width: 34ch; font-size: calc(0.92rem + var(--bump)); line-height: 1.5; color: var(--text-2); text-wrap: balance; }
.prof__link { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-size: calc(0.86rem + var(--bump)); font-weight: 600; color: var(--text); transition: gap 0.3s var(--ease), color 0.3s var(--ease); }
.prof__link { position: relative; }
.prof__linkicon { width: 22px; height: 16px; flex: none; }
.prof__linkicon--ig { width: 18px; height: 18px; }
.prof__link .arrow { margin-left: 0; }
.prof:hover .prof__link { gap: 11px; color: var(--accent); }
.prof__link::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 1px; background: var(--line-soft); }
@media (max-width: 760px) {
  .proof__videos, .proof__profiles { grid-template-columns: 1fr; max-width: 520px; }
}

/* ---- mobile (375px first): type, rhythm, the hero ---- */
@media (max-width: 600px) {
  :root { --section-y: clamp(60px, 9vh, 76px); }
  .hero { padding-top: 140px; padding-bottom: 28px; }
  .hero__title { font-size: calc(1.62rem + var(--bump)); line-height: 1.12; letter-spacing: -0.018em; }
  .hplayer { margin-top: 36px; }
  .hero__actions { margin-top: 36px; }
  .hero__trace { display: none; }
  .agency-bar { left: 0; right: 0; justify-content: center; }
  .section__title { font-size: calc(1.78rem + var(--bump)); }
  .beat { padding-block: 44px; }
  .beat__title { font-size: calc(1.42rem + var(--bump)); }
  .beat__aside { padding: 18px 16px 18px; }
  .sum, .week li { grid-template-columns: 96px 1fr; gap: 12px; }
  .sum b { font-size: calc(1.36rem + var(--bump)); }
  .week b { font-size: calc(1.12rem + var(--bump)); }
  .shift { grid-template-columns: 1fr; }
  .shift__arrow { transform: rotate(135deg) scale(0.55); margin-block: -4px; }
  .ladder li { font-size: calc(0.88rem + var(--bump)); }
  .ladder__gap { flex-direction: column; align-items: flex-start !important; gap: 6px !important; }
  .bridge__closing { font-size: calc(1.22rem + var(--bump)); }
  .cta__title { font-size: calc(2.4rem + var(--bump)); }
  .footer__note { font-size: calc(9px + var(--bump)); letter-spacing: 0.02em; }
  .pvid__name { margin-top: 20px; }
  .proof__videos { gap: 44px; }
}

/* ---- mobile hardening (references/mobile.md) ---- */
img, svg, video, canvas, iframe { max-width: 100%; }
img, video, canvas { height: auto; }
p, li, td, th, blockquote, figcaption,
h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
.hero__title, .section__title, .beat__title, .cta__title, .pvid__name { overflow-wrap: normal; }
table, pre { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 700px) {
  .tag, [class*="badge"], [class*="pill"] { margin-left: 0; }
}
@media (max-width: 420px) {
  .tok-merge, .tok-link, code { white-space: normal; }
}