/* Hallmark · Bloop landing · system: DESIGN.md (locked; display face on the landing: Bricolage Grotesque, chosen by the founder 2026-11-15) · genre: atmospheric · shape: hero stage, outputs, steps, proof lanes, poster CTA · signature: the studio recording live, built in HTML with the brand's 3D characters */
/* Critique: one idea per screen, the product shown not described; lime stays a signal (speaker ring, karaoke word, CTA hover), red only for the recording pill; motion is transform/opacity, off under reduced motion. */
/* waive 24b: spacing follows DESIGN.md's own scale (6, 10, 16, 24 and the studio's 14), not a 4px grid. */

/* Bricolage Grotesque (OFL, self-hosted: no visitor IP sent to a font CDN), variable weight and optical size. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --font-display: "Bricolage Grotesque", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-lk: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ink: #0b0b0b;
  --s1: #141414;
  --s2: #1c1c1c;
  --s3: #252525;
  --s4: #303030;
  --s5: #444444;
  --quiet: #8a8a8a;
  --muted: #aaaaaa;
  --text: #ededeb;
  --paper: #f1f1ef;
  --lime: #d3ff5c;
  --sage: #c4dfb6;
  --ice: #c7e4f1;
  --pink: #f0388d;
  --ok-tint: #1c2617;
  --tile-bg: #000000; /* the 3D tiles' own black, so a tile sits on it without a seam */
  /* LinkedIn's own feed colours, for posts shown as they appear there. */
  --lk-card: #ffffff;
  --lk-text: #191919;
  --lk-sub: #666666;
  --lk-line: #e8e8e8;
  --lk-blue: #0a66c2;
  --lk-avatar-bg: #e9e5df;
  --lk-rx-like: #378fe9;
  --lk-rx-clap: #6dae4f;
  --lk-rx-love: #df704d;
  /* Quote cards (card.py): white quote, grey name, backdrops behind the guest. */
  --qc-white: #ffffff;
  --qc-grey: #a6a6a6;
  --qc-a: #2b3a4a;
  --qc-b: #3a2a35;
  --qc-c: #2d3a2f;
  --rec: #c8424a;
  --rec-deep: #ad3840;
  --danger: #ff5a5a;
  --glass: rgb(11 11 11 / 0.62);
  /* The page itself is light (DESIGN.md's paper); the product shown on it (studio, clip) stays dark. */
  --page: #f6f5f1;
  --fg: #0f0f0e;
  --fg-muted: #57554f;
  --fg-quiet: #6f6c65;
  --line: #e3e1db;
  --card: #ffffff;
  --track: #ecebe6;
  --track-on: #b8b5ad;
  --ok-strong: #3d7426;
  --logo: #8c8981;
  --nav-bg: rgb(246 245 241 / 0.96);
  --shadow-page: rgb(40 36 20 / 0.2);
  --shadow: rgb(0 0 0 / 0.55);
  --shadow-near: rgb(0 0 0 / 0.25);
  /* Over a playing clip: bottom shade, progress track, text and icon shadows. */
  --clip-shade: rgb(0 0 0 / 0.75);
  --clip-track: rgb(255 255 255 / 0.3);
  --clip-text-shadow: rgb(0 0 0 / 0.6);
  --clip-icon-shadow: rgb(0 0 0 / 0.5);

  --r-btn: 14px;
  --r-media: 18px;
  --r-poster: 22px;
  --r-block: 24px;
  --r-pill: 999px;

  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: clip; }

html { background: var(--page); color-scheme: light; }

body {
  margin: 0;
  background: var(--page);
  color: var(--fg);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  font-synthesis: none;
  overflow-wrap: break-word;
  min-width: 0;
}

h1, h2 { text-wrap: balance; }

::selection { background: var(--lime); color: var(--ink); }
html { caret-color: var(--fg); scrollbar-color: var(--track-on) var(--page); }

h3 { margin: 0; font-size: 19px; font-weight: 600; }

p { margin: 0; }

:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 6px; transition: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-btn);
  font: 500 15px/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}

.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--fg); color: var(--page); }
.btn-primary:hover { background: var(--lime); color: var(--ink); }

.btn-ink { background: var(--ink); color: var(--text); }
.btn-ghost { border: 1px solid var(--line); color: var(--fg); }
.btn-ghost:hover { border-color: var(--fg); }
.btn-ink:hover { background: var(--s3); }

.btn-lg { min-height: 54px; padding: 0 28px; font-size: 16px; border-radius: var(--r-btn); }

.link { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--track-on); transition: text-decoration-color 160ms var(--ease); }
.link:hover { text-decoration-color: var(--fg); }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
}

.nav-in { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-actions { display: flex; align-items: center; gap: 22px; font-size: 15px; }
.nav-in { gap: 32px; }
.brand { margin-right: auto; }
.nav-links { display: flex; gap: 28px; font-size: 15px; color: var(--fg-muted); }
.nav-links a { text-decoration: none; transition: color 160ms var(--ease); }
.nav-links a:hover { color: var(--fg); }

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

.hero { padding: clamp(48px, 8vh, 96px) 0 clamp(64px, 10vh, 120px); }

.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero h1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.04; text-wrap: wrap; }
.lede { margin-top: 24px; max-width: 38ch; font-size: clamp(18px, 1.6vw, 21px); color: var(--fg-muted); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 36px; }
.note { font-size: 14px; color: var(--fg-quiet); }

.hero-visual { position: relative; }

/* The brand's 3D tiles drift around the studio. */
.float {
  position: absolute;
  z-index: 2;
  filter: drop-shadow(0 18px 30px var(--shadow-page));
  animation: drift 9s ease-in-out infinite;
}
.float-a { width: 112px; bottom: -14px; left: -40px; rotate: -10deg; }
.float-b { width: 96px; top: -48px; right: -30px; rotate: 9deg; animation-delay: -3s; }

@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ---------- The studio (built, not a screenshot) ---------- */

.studio {
  position: relative;
  z-index: 1;
  background: var(--s1);
  color: var(--text); /* the product UI keeps its dark world on the light page */
  border: 1px solid var(--s3);
  border-radius: var(--r-block);
  box-shadow: 0 40px 80px -30px var(--shadow-page);
  overflow: hidden;
}

.studio-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--s3);
  font-size: 13px;
}

.studio-title { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pill-rec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--rec-deep);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pill-rec::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text);
  animation: breathe 1.6s ease-in-out infinite;
}

@keyframes breathe { 50% { opacity: 0.3; } }

.studio-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 14px; }

.tile {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--r-media);
  background: var(--s2);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.tile img { width: 64%; transform-origin: 50% 85%; }

/* Who speaks: a lime ring fades in, the face nods. The two alternate. */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--lime);
  border-radius: inherit;
  opacity: 0;
}
.tile-host::after { animation: speaking 8s steps(1) infinite; }
.tile-guest::after { animation: speaking 8s steps(1) -4s infinite; }
.tile-host img { animation: talk 8s ease-in-out infinite; }
.tile-guest img { animation: talk 8s ease-in-out -4s infinite; }

@keyframes speaking { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes talk {
  0%, 50%, 100% { transform: translateY(0) scale(1); }
  6%, 18%, 30%, 42% { transform: translateY(-3px) scale(1.02); }
  12%, 24%, 36% { transform: translateY(0) scale(1); }
}

.tile figcaption { position: absolute; left: 10px; bottom: 10px; }
.tag { display: inline-block; padding: 4px 10px; border-radius: 9px; background: var(--glass); font-size: 13px; font-weight: 500; }

.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.tile .bars { position: absolute; top: 12px; right: 12px; padding: 6px 7px; border-radius: 8px; background: var(--glass); height: auto; }
.bars i { width: 3px; border-radius: 1px; background: var(--s5); }
.bars i:nth-child(1) { height: 4px; }
.bars i:nth-child(2) { height: 8px; }
.bars i:nth-child(3) { height: 12px; }
.bars.is-good i { background: var(--sage); }

.studio-dock {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 16px;
}
.dock-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--s3); color: var(--text); }
.dock-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dock-stop, .dock-star { padding: 9px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.dock-stop { margin-left: 6px; background: var(--text); color: var(--ink); }
.dock-star { background: var(--s3); color: var(--muted); font-weight: 500; }

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

section h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.06; max-width: 22ch; }
.section-sub { margin-top: 14px; color: var(--fg-muted); font-size: 18px; }

.safe { padding: clamp(72px, 11vh, 128px) 0; border-top: 1px solid var(--line); }

/* ---------- The deck: what one episode gives you, stacked like cards on a desk ---------- */

.deck {
  position: relative;
  width: min(100%, 360px);
  height: 600px;
  margin: 40px auto 0;
}

/* Four cards, one place each: in front, then three peeking out behind, turned a little. */
.dk {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 34px 70px -28px var(--shadow-page), 0 0 0 1px var(--line);
  transform-origin: 50% 90%;
  transition: transform 800ms var(--ease), opacity 500ms var(--ease);
}
.dk[data-pos="0"] { z-index: 4; transform: none; }
.dk[data-pos="1"] { z-index: 3; transform: translate(64px, -14px) rotate(7deg) scale(0.94); }
.dk[data-pos="2"] { z-index: 2; transform: translate(-62px, -26px) rotate(-8deg) scale(0.9); }
.dk[data-pos="3"] { z-index: 1; transform: translate(14px, -44px) rotate(2deg) scale(0.86); }
/* The front card is dealt off to the right (away from the headline), then slides in at the back. */
.dk.is-leaving { z-index: 5; transform: translate(70%, 30px) rotate(14deg); opacity: 0; }

.deck-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 34px; }
.deck-legend button {
  padding: 8px 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--fg-quiet);
  font: 500 14px/1 var(--font-body);
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.deck-legend button:hover { color: var(--fg); }
.deck-legend button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--fg); }

/* The clip: a vertical short, as it plays on a phone. */
.dk-clip { background: var(--qc-a); color: var(--qc-white); }
.dk-clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, var(--clip-shade)); }
.clip-face { position: absolute; left: 50%; top: 9%; width: 68%; translate: -50% 0; }
.clip-progress { position: absolute; z-index: 2; top: 12px; left: 12px; right: 12px; height: 3px; border-radius: 2px; background: var(--clip-track); overflow: hidden; }
.clip-progress::after { content: ""; position: absolute; inset: 0; background: var(--qc-white); transform-origin: left; animation: play 6s linear infinite; }
@keyframes play { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.subs {
  position: absolute;
  z-index: 2;
  left: 7%;
  right: 17%;
  bottom: 25%;
  margin: 0;
  text-align: center;
  font: 800 25px/1.12 var(--font-body);
  text-transform: uppercase;
  text-shadow: 0 2px 12px var(--clip-text-shadow);
}
/* As in the clips Bloop renders: every word white, the word being said in lime. */
.subs span { display: inline-block; color: var(--qc-white); animation: karaoke 6s steps(1) infinite; }
.subs span:nth-child(1) { animation-delay: 0.0s; }
.subs span:nth-child(2) { animation-delay: 0.6s; }
.subs span:nth-child(3) { animation-delay: 1.2s; }
.subs span:nth-child(4) { animation-delay: 1.8s; }
.subs span:nth-child(5) { animation-delay: 2.4s; }
.subs span:nth-child(6) { animation-delay: 3.0s; }
.subs span:nth-child(7) { animation-delay: 3.6s; }
.subs span:nth-child(8) { animation-delay: 4.2s; }
.subs span:nth-child(9) { animation-delay: 4.8s; }
@keyframes karaoke { 0% { color: var(--lime); } 10% { color: var(--qc-white); } }

.clip-rail { position: absolute; z-index: 2; right: 14px; bottom: 96px; display: grid; gap: 18px; }
.clip-rail svg { width: 28px; height: 28px; fill: var(--qc-white); filter: drop-shadow(0 2px 6px var(--clip-icon-shadow)); }
.clip-rail svg:nth-child(3) { fill: none; stroke: var(--qc-white); stroke-width: 2; stroke-linejoin: round; }
.clip-meta { position: absolute; z-index: 2; left: 16px; right: 64px; bottom: 20px; display: grid; gap: 4px; font-size: 14px; line-height: 1.35; }
.clip-meta b { font-weight: 700; }

/* A LinkedIn post, as it shows in the feed. */
.lk { background: var(--lk-card); color: var(--lk-text); font: 400 14px/1.43 var(--font-lk); }
.lk-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 12px 12px 0 14px; }
.lk-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--lk-avatar-bg); }
.lk-id { min-width: 0; }
.lk-id p { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lk-name { font-weight: 600; }
.lk-deg { color: var(--lk-sub); font-weight: 400; }
.lk-headline, .lk-meta { color: var(--lk-sub); font-size: 12px; line-height: 1.35; }
.lk-meta { display: flex; align-items: center; gap: 4px; }
.lk-globe { width: 12px; height: 12px; fill: currentColor; }
.lk-follow { color: var(--lk-blue); font-weight: 600; white-space: nowrap; }
.lk-text { padding: 8px 14px 10px; }
.lk-text p { margin: 0; }
.lk-more { color: var(--lk-sub); }

/* The quote card exactly as card.py renders it: the guest, a dark gradient, white quote, grey name, white wordmark. */
.qc { position: relative; display: grid; align-content: end; gap: 6px; margin: 0; aspect-ratio: 1; padding: 7%; overflow: hidden; isolation: isolate; color: var(--qc-white); }
.qc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent 30%, var(--ink) 84%); }
.qc--a { background: var(--qc-a); }
.qc--plain { background: var(--ink); }
.qc--plain::after { display: none; }
.qc--plain { align-content: center; }
.qc--plain blockquote { font-size: 28px; line-height: 1.15; }
.qc-face { position: absolute; z-index: -2; left: 50%; top: 2%; width: 74%; translate: -50% 0; }
.qc blockquote { margin: 0; max-width: 82%; font: 700 19px/1.22 var(--font-body); }
.qc figcaption { color: var(--qc-grey); font-size: 12px; }
.qc-mark { position: absolute; right: 7%; bottom: 7%; width: 19%; }

.lk-social { display: flex; align-items: center; gap: 6px; padding: 9px 14px; color: var(--lk-sub); font-size: 12px; }
.lk-rx { display: flex; flex: none; }
.rx { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--lk-card); }
.rx + .rx { margin-left: -4px; }
.rx svg { width: 10px; height: 10px; fill: var(--lk-card); }
.rx-like { background: var(--lk-rx-like); }
.rx-clap { background: var(--lk-rx-clap); }
.rx-love { background: var(--lk-rx-love); }

.lk-actions { display: flex; justify-content: space-around; margin: 0 12px; border-top: 1px solid var(--lk-line); color: var(--lk-sub); font-size: 13px; font-weight: 600; }
.lk-actions span { display: inline-flex; align-items: center; gap: 5px; padding: 11px 2px; }
.lk-actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The podcast, as it shows in a player. */
.dk-pod { display: grid; align-content: start; gap: 12px; padding: 22px; background: var(--card); color: var(--ink); }
.pod-cover { display: grid; align-content: space-between; aspect-ratio: 1; padding: 18px; border-radius: 14px; background: var(--lime); color: var(--ink); }
.pod-cover-title { font: 700 40px/0.98 var(--font-display); letter-spacing: -0.035em; }
.pod-cover-ep { font-size: 13px; font-weight: 600; }
.pod-show { margin: 6px 0 0; color: var(--lk-sub); font-size: 14px; }
.pod-title { font: 700 22px/1.12 var(--font-display); letter-spacing: -0.035em; }
.pod-wave { display: flex; align-items: center; gap: 4px; height: 34px; }
.pod-wave i { width: 3px; flex: none; height: 100%; border-radius: 2px; background: var(--ink); transform-origin: center; animation: wave 1.6s ease-in-out infinite; }
.pod-wave { justify-content: space-between; }
.pod-wave i:nth-child(5n + 2) { height: 60%; }
.pod-wave i:nth-child(7n + 3) { height: 80%; }
.pod-wave i:nth-child(4n + 1) { height: 45%; }
.pod-wave i:nth-child(3n) { animation-delay: -0.4s; }
.pod-wave i:nth-child(3n + 1) { animation-delay: -0.9s; }
.pod-wave i:nth-child(4n) { animation-duration: 1.2s; }
@keyframes wave { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(0.9); } }
.pod-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; color: var(--lk-sub); font-size: 12px; font-variant-numeric: tabular-nums; }
.pod-bar b { position: relative; height: 4px; border-radius: 2px; background: var(--lk-line); }
.pod-bar i { position: absolute; inset: 0 80% 0 0; border-radius: 2px; background: var(--ink); }
.pod-play { position: absolute; right: 22px; bottom: 22px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); }
.pod-play svg { width: 22px; height: 22px; fill: var(--paper); }

/* ---------- The call: the studio, one link away ---------- */

.call { padding: clamp(72px, 11vh, 128px) 0; border-top: 1px solid var(--line); }
.call-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.call-copy p { margin-top: 20px; max-width: 40ch; color: var(--fg-muted); font-size: 18px; }
.call-visual { position: relative; }
.call-visual .float-a { bottom: -64px; left: -78px; }
.call-visual .float-b { top: -40px; right: -48px; }

/* ---------- Proof lanes ---------- */

.safe-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.safe-copy p { margin-top: 20px; color: var(--fg-muted); max-width: 46ch; }

.lanes { display: grid; gap: 14px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-block); }
.lane { display: grid; grid-template-columns: 128px minmax(0, 1fr) 44px; gap: 14px; align-items: center; font-size: 14px; }
.lane-name { color: var(--fg-muted); }
.lane-track { position: relative; height: 26px; border-radius: 8px; background: var(--track); overflow: hidden; }

/* The call stutters: segments blink out. */
.lane-call { display: flex; gap: 3px; padding: 6px; }
.lane-call i { flex: 1; border-radius: 3px; background: var(--track-on); animation: stutter 3.2s steps(1) infinite; }
.lane-call i:nth-child(3) { animation-delay: -0.8s; }
.lane-call i:nth-child(4) { animation-delay: -0.8s; }
.lane-call i:nth-child(6) { animation-delay: -2s; }
.lane-call i:nth-child(1), .lane-call i:nth-child(2), .lane-call i:nth-child(5), .lane-call i:nth-child(7), .lane-call i:nth-child(8) { animation: none; }
@keyframes stutter { 0% { opacity: 1; } 40% { opacity: 0.12; } 70% { opacity: 1; } }

.bars.is-flaky i { background: var(--track-on); }
.bars.is-flaky i:nth-child(1) { background: var(--danger); animation: flaky 3.2s steps(1) infinite; }
@keyframes flaky { 0% { opacity: 1; } 70% { opacity: 0.4; } }

/* The recording never breaks: one lime bar fills. */
.lane-rec b { position: absolute; inset: 6px; border-radius: 3px; background: var(--lime); transform-origin: left; animation: fill 3.2s var(--ease) infinite; }
@keyframes fill { 0% { transform: scaleX(0.08); } 85%, 100% { transform: scaleX(1); } }
.lane-ok { color: var(--ok-strong); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Final ---------- */

.final { padding: 0 0 clamp(72px, 11vh, 128px); }

.poster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(36px, 6vw, 72px);
  border-radius: var(--r-poster);
  background: var(--lime);
  color: var(--ink);
}
.poster h2 { font-size: clamp(34px, 4.6vw, 60px); max-width: 14ch; }

/* ---------- Footer ---------- */

.foot { border-top: 1px solid var(--line); padding: 32px 0 40px; font-size: 14px; color: var(--fg-quiet); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { text-decoration: none; transition: color 160ms var(--ease); }
.foot a:hover { color: var(--fg); }
.copy { margin-left: auto; }

/* ---------- Reveal (only with JS: without it everything is simply there) ---------- */

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .hero .reveal:nth-child(2) { transition-delay: 90ms; }
.js .hero .reveal:nth-child(3) { transition-delay: 180ms; }
.js .call .reveal:nth-child(2) { transition-delay: 90ms; }



/* ---------- Platforms ---------- */

.platforms { padding: 8px 0 clamp(48px, 7vh, 80px); }
.platforms-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.platforms-in p { color: var(--fg-quiet); font-size: 15px; }
.logos { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 0; padding: 0; list-style: none; }
.logos li { display: inline-flex; align-items: center; gap: 10px; color: var(--logo); font-size: 15px; font-weight: 600; }
.logos svg { width: 24px; height: 24px; fill: currentColor; }

/* A short laptop window: the deck shrinks so the headline and the cards share one screen. */
@media (min-width: 961px) and (max-height: 820px) {
  .hero { padding-top: 36px; }
  .hero-visual { zoom: 0.84; }
}


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

/* What moves all the time gets its own layer: the page is not repainted for it on every frame. */
.float, .dk, .marquee .logos, .tile img, .pod-wave i, .clip-progress::after { will-change: transform; }

/* The headline rises word by word; « clips viraux » gets a lime marker stroke. */
.hero h1 mark { position: relative; z-index: 0; padding: 0 0.08em; background: none; color: inherit; }
.hero h1 mark::before { content: ""; position: absolute; z-index: -1; inset: 0.08em -0.02em 0.02em; border-radius: 0.12em; background: var(--lime); transform-origin: left; }
.js .hero h1 .w { display: inline-block; opacity: 0; transform: translateY(0.45em); animation: rise 900ms var(--ease) forwards; animation-delay: calc(var(--i) * 70ms + 80ms); }
.js .hero h1 mark::before { transform: scaleX(0); animation: mark 700ms var(--ease) 900ms forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes mark { to { transform: scaleX(1); } }

/* The front card of the deck breathes. */
.dk[data-pos="0"] { animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -8px; } }

/* Platforms scroll by, softly faded at both ends; hover holds them. */
.marquee { display: flex; overflow: hidden; max-width: 760px; mask-image: linear-gradient(to right, transparent, var(--fg) 12%, var(--fg) 88%, transparent); }
.marquee .logos { flex: none; flex-wrap: nowrap; padding-right: 36px; animation: marquee 28s linear infinite; }
.marquee:hover .logos { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }


/* ---------- Clips: three shorts, fanned like phones on a table ---------- */

.clips { padding: clamp(72px, 11vh, 128px) 0; border-top: 1px solid var(--line); overflow-x: clip; }
.clips-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.clips-copy > p { margin-top: 20px; max-width: 42ch; color: var(--fg-muted); font-size: 18px; }
.facts { display: grid; gap: 0; margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.facts li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts b { font: 700 20px/1.2 var(--font-display); letter-spacing: -0.02em; }
.facts span { color: var(--fg-quiet); font-size: 15px; }

.phones { position: relative; height: 540px; }
.phone {
  position: absolute;
  top: 0;
  left: 50%;
  width: 250px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--r-media);
  color: var(--qc-white);
  box-shadow: 0 34px 70px -28px var(--shadow-page), 0 0 0 1px var(--line);
  transition: transform 500ms var(--ease);
}
.phone::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, var(--clip-shade)); }
.phone .subs { font-size: 21px; }
.phone .clip-rail { bottom: 84px; gap: 14px; }
.phone .clip-rail svg { width: 24px; height: 24px; }
.phone-a { z-index: 1; background: var(--qc-b); transform: translate(-128%, 46px) rotate(-8deg); }
.phone-b { z-index: 2; background: var(--qc-a); transform: translate(-50%, 0); }
.phone-c { z-index: 1; background: var(--qc-c); transform: translate(28%, 46px) rotate(8deg); }
.phones:hover .phone-a { transform: translate(-138%, 30px) rotate(-11deg); }
.phones:hover .phone-c { transform: translate(38%, 30px) rotate(11deg); }
.phone-a .clip-progress::after { animation-delay: -2s; }
.phone-c .clip-progress::after { animation-delay: -4s; }
.phone-a .subs span, .phone-c .subs span { animation: none; }

/* ---------- Posts: the week the episode fills ---------- */

.posts { padding: clamp(72px, 11vh, 128px) 0; background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.posts-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 88px); align-items: end; }
.posts-head p { max-width: 44ch; color: var(--fg-muted); font-size: 18px; }
.week { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 56px 0 0; padding: 0; list-style: none; align-items: start; }
.mini { display: grid; gap: 12px; }
.mini:nth-child(2) { margin-top: 40px; }
.mini:nth-child(3) { margin-top: 80px; }
.mini-day { font: 700 15px/1 var(--font-display); color: var(--fg-quiet); }
.mini-post { overflow: hidden; border: 1px solid var(--lk-line); border-radius: 10px; background: var(--lk-card); color: var(--lk-text); font: 400 14px/1.45 var(--font-lk); box-shadow: 0 24px 50px -30px var(--shadow-page); transition: transform 300ms var(--ease); }
.mini-post:hover { transform: translateY(-6px); }
.mini-post header { display: flex; gap: 8px; align-items: center; padding: 12px 14px 0; }
.mini-post header img { width: 36px; height: 36px; border-radius: 50%; background: var(--lk-avatar-bg); }
.mini-post header p { display: grid; font-size: 13px; line-height: 1.3; }
.mini-post header span { color: var(--lk-sub); font-size: 12px; }
.mini-text { padding: 10px 14px 14px; }
.mini-card { aspect-ratio: 16 / 10; }
.mini-card .qc-face { position: absolute; z-index: -2; right: 6%; top: 6%; width: 44%; }
.mini-card blockquote { margin: 0; max-width: 70%; font: 700 19px/1.15 var(--font-display); letter-spacing: -0.02em; }
.mini-card figcaption { color: var(--qc-grey); font-size: 13px; }

/* ---------- The full episode ---------- */

.kit { padding: clamp(64px, 9vh, 104px) 0; }
.kit-in { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 32px clamp(32px, 6vw, 88px); align-items: start; }
.kit-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.kit-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.kit-list svg { grid-row: span 2; width: 24px; height: 24px; fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kit-list b { font-weight: 600; }
.kit-list span { color: var(--fg-quiet); font-size: 15px; }

/* ---------- Mobile, soon ---------- */

.mobile { padding: clamp(72px, 11vh, 128px) 0 0; }
.mobile-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 88px); align-items: end; overflow: hidden; padding: clamp(36px, 6vw, 72px) clamp(36px, 6vw, 72px) 0; border-radius: var(--r-poster); background: var(--ink); color: var(--text); }
.mobile-copy { align-self: center; padding-bottom: clamp(36px, 6vw, 72px); }
.mobile-copy p { margin-top: 18px; max-width: 36ch; color: var(--muted); font-size: 18px; }
.soon { display: inline-block; margin-bottom: 18px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--lime); color: var(--ink); font-size: 14px; font-weight: 600; }
.handset { justify-self: center; width: 280px; padding: 12px 12px 0; border-radius: 44px 44px 0 0; background: var(--s3); box-shadow: 0 0 0 1px var(--s4); translate: 0 24px; transition: translate 600ms var(--ease); }
.mobile:hover .handset { translate: 0 0; }
.handset-screen { position: relative; display: grid; gap: 8px; height: 420px; padding: 52px 10px 0; border-radius: 34px 34px 0 0; background: var(--s1); }
.handset-screen .pill-rec { position: absolute; top: 14px; font-size: 12px; left: 50%; translate: -50% 0; white-space: nowrap; }
.handset-screen .tile { aspect-ratio: auto; height: 136px; }
.handset-screen .tile img { width: 44%; }
.handset-stop { justify-self: center; align-self: start; padding: 9px 18px; border-radius: 12px; background: var(--text); color: var(--ink); font-size: 13px; font-weight: 600; }

/* ---------- FAQ ---------- */

.faq { padding: clamp(72px, 11vh, 128px) 0; }
.faq-in { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 32px clamp(32px, 6vw, 88px); align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 18px; font-weight: 500; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 400 26px/0.8 var(--font-body); color: var(--fg-quiet); transition: transform 200ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--fg-muted); }
.faq details p { max-width: 60ch; padding: 0 0 22px; color: var(--fg-muted); }

.final { padding-top: clamp(72px, 11vh, 128px); }

@media (max-width: 1080px) {
  .nav-links { display: none; }
}
@media (max-width: 960px) {
  .clips-in, .posts-head, .kit-in, .mobile-in, .faq-in { grid-template-columns: minmax(0, 1fr); }
  .week { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .mini:nth-child(n) { margin-top: 0; }
  .phones { height: 500px; }
}
@media (max-width: 640px) {
  .phone { width: 200px; }
  .phones { height: 420px; }
  .phone-a { transform: translate(-112%, 40px) rotate(-8deg); }
  .phone-c { transform: translate(12%, 40px) rotate(8deg); }
  .kit-list { grid-template-columns: minmax(0, 1fr); }
  .mobile-in { padding-inline: 24px; }
}

/* ---------- Narrow screens ---------- */

@media (max-width: 1320px) {
  .dk[data-pos="1"] { transform: translate(40px, -14px) rotate(6deg) scale(0.94); }
  .dk[data-pos="2"] { transform: translate(-52px, -24px) rotate(-7deg) scale(0.9); }
}

@media (max-width: 960px) {
  .hero-in, .safe-in, .call-in { grid-template-columns: minmax(0, 1fr); }
  .call-visual { max-width: 620px; }
  .call-visual .float { display: none; }
}

@media (max-width: 640px) {
  .nav-actions .link { display: none; }
  .lane { grid-template-columns: minmax(0, 1fr) 44px; row-gap: 6px; }
  .lane-name { grid-column: 1 / -1; }
  .float-a { width: 80px; left: -10px; bottom: -20px; }
  .deck { width: min(100% - 56px, 330px); height: 552px; }
  .lk-actions { margin: 0 8px; font-size: 12px; }
  .lk-actions span { gap: 3px; }
  .lk-actions svg { width: 15px; height: 15px; }

  .dk[data-pos="1"] { transform: translate(16px, -12px) rotate(4deg) scale(0.95); }
  .dk[data-pos="2"] { transform: translate(-16px, -20px) rotate(-4deg) scale(0.91); }
  .dk[data-pos="3"] { transform: translate(4px, -30px) rotate(1deg) scale(0.87); }
  .float-b { width: 72px; right: -6px; }
  .studio-dock .dock-star { display: none; }
  .copy { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero h1 .w { opacity: 1; transform: none; }
  .js .hero h1 mark::before { transform: none; }
  .tile-host::after { opacity: 1; }
}