/* Plugbook: page styles on the scroll-craft engine (scrollcraft.css stays untouched).
   Quarktex brand: burnt orange #E76F2A as the one accent, as a glow; ink grounds; Space Grotesk,
   Inter, JetBrains Mono for data; the Audiowide wordmark. */

@font-face { font-family: "Space Grotesk"; src: url("assets/fonts/SpaceGrotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; src: url("assets/fonts/SpaceGrotesk-ext.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("assets/fonts/Inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Audiowide"; src: url("assets/fonts/Audiowide-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  --sc-canvas: #0E0E0F;
  --sc-surface: #17151A;
  --sc-ink: #F6F2EE;
  --sc-ink-soft: #B0A79F;
  --sc-accent: #E76F2A;
  --sc-accent-ink: #160D07;
  --sc-font-display: "Space Grotesk", system-ui, sans-serif;
  --sc-font-text: "Inter", system-ui, sans-serif;
  --sc-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --hair: rgba(246, 242, 238, 0.12);
  --hair-strong: rgba(246, 242, 238, 0.22);
  /* The brand's sanctioned exception to the engine's no-glow rule, at quarktex.com's shipped values:
     one glow word per headline, and the live dot's ring. */
  --glow: 0 0 0.42em rgba(231, 111, 42, 0.5);
  --warm: #FFD9B0;
}

body { background: var(--sc-canvas); color: var(--sc-ink); }
a { color: inherit; }
::selection { background: rgba(231, 111, 42, 0.35); color: var(--sc-ink); }
.glow { color: var(--sc-accent); text-shadow: var(--glow); }
.mono { font-family: var(--sc-font-mono); font-size: 14px; letter-spacing: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- the bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--sc-gutter);
  transition: background 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out);
  border-bottom: 1px solid transparent;
}
.bar.solid { background: rgba(14, 14, 15, 0.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--hair); }
.mark { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; }
.mark b { font: 400 21px/1 "Audiowide", var(--sc-font-display); letter-spacing: 0.01em; }
.mark b::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 4px rgba(231, 111, 42, 0.14), 0 0 14px rgba(231, 111, 42, 0.6); transform: translateY(-1px); }
.mark small { font: 500 13px/1 var(--sc-font-text); color: var(--sc-ink-soft); }
@media (max-width: 560px) { .mark small { display: none; } }

.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--sc-accent); color: var(--sc-accent-ink); text-decoration: none; white-space: nowrap;
  font: 600 16px/1 var(--sc-font-display); letter-spacing: 0.005em;
  box-shadow: 0 10px 30px rgba(231, 111, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 140ms var(--sc-ease-out), background 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
.cta--small { min-height: 40px; padding: 0 16px; font-size: 15px; }
.cta:active { transform: scale(0.97); }
.cta:focus-visible, .ghost:focus-visible, .mind-pick:focus-visible, .chip:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--sc-ink); outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: #F07F3B; box-shadow: 0 14px 36px rgba(231, 111, 42, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
}
.ghost { color: var(--sc-ink); font: 500 16px/1 var(--sc-font-display); text-decoration: underline; text-decoration-color: rgba(231, 111, 42, 0.7); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }

/* ---------- 1. the hero: a screening room in planes ---------- */
/* Stages carry .sc-stage from the engine (position: sticky, height, overflow). Never set position here:
   one class of the same weight, later in the cascade, silently unpins the act. */
.hero__stage { background: #0A0706 url("assets/hero-poster.webp") center / cover no-repeat; }
@media (max-aspect-ratio: 3/4) { .hero__stage { background-image: url("assets/hero-poster-m.webp"); } }
/* One scene, cover-fitted like the plates. Phones swap every plane through <picture> and move the screen
   rectangle, both measured on the Codex plates (1672x941 wide, 941x1672 tall). */
.scene { position: absolute; inset: 0; }
.scene__box { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max(100vw, 177.69svh); aspect-ratio: 1672 / 941; }
.plane { position: absolute; inset: 0; }
.plane img, img.plane { width: 100%; height: 100%; max-width: none; display: block; }
.far { transform-origin: 50% 22%; }
.screen { position: absolute; left: 27.39%; top: 4.04%; width: 45.28%; height: 34.75%; overflow: hidden; background: #F3E2CC; }
@media (max-aspect-ratio: 3/4) {
  .scene__box { width: max(100vw, 56.28svh); aspect-ratio: 941 / 1672; }
  .far { transform-origin: 50% 24%; }
  .screen { left: 17%; top: 13.46%; width: 65.99%; height: 21.29%; }
  .atmos { object-fit: cover; }
}
.screen__grid { position: absolute; inset: 1.4%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1.4%; }
.screen__grid img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.28) saturate(0.85) brightness(1.02) contrast(0.92); }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 232, 205, 0.28), rgba(255, 196, 140, 0.18) 60%, rgba(120, 60, 20, 0.35) 100%); mix-blend-mode: screen; }
.atmos { mix-blend-mode: screen; opacity: 0.6; }
.focal, .near { transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .far   { transform: scale(calc(1 + var(--sc-p, 0) * 0.07)); }
  .atmos { opacity: calc(0.6 + var(--sc-p, 0) * 0.3); transform: scale(calc(1.02 + var(--sc-p, 0) * 0.05)); }
  .focal { transform: translateY(calc(var(--sc-p, 0) * 2.6%)) scale(calc(1 + var(--sc-p, 0) * 0.15)); }
  .near  { transform: translateY(calc(var(--sc-p, 0) * 24%)) scale(calc(1 + var(--sc-p, 0) * 0.22)); }
}
.hero__floor { position: absolute; inset: auto 0 0 0; height: 32%; pointer-events: none; background: linear-gradient(to top, rgba(10, 7, 6, 0.92), rgba(10, 7, 6, 0)); }
.hero__scrim { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 66% 96% at 0% 100%, rgba(10, 7, 6, 0.92) 0%, rgba(10, 7, 6, 0.74) 48%, rgba(10, 7, 6, 0) 84%); }
/* 30rem holds the longest line and ends the box short of the robot's lit shoulder (measured with
   lab/herocontrast.mjs: the brightest patch behind a wider box sat at x 603 to 639, with no text over it). */
.hero__copy { position: absolute; z-index: 5; left: var(--sc-gutter); bottom: clamp(28px, 8svh, 88px); width: min(30rem, calc(100vw - 2 * var(--sc-gutter))); }
.hero h1 { margin: 0 0 16px; font: 600 clamp(2.4rem, 4.3vw, 4.3rem)/1.0 var(--sc-font-display); letter-spacing: -0.035em; }
.hero__sub { margin: 0 0 26px; max-width: 30rem; font: 400 clamp(1.05rem, 1.35vw, 1.25rem)/1.5 var(--sc-font-text); color: #E7DFD7; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hero__works { margin: 22px 0 0; font: 500 14px/1.4 var(--sc-font-text); color: var(--sc-ink-soft); }
@media (max-aspect-ratio: 3/4) {
  .hero__copy { bottom: clamp(20px, 5svh, 48px); }
  .hero h1 { font-size: clamp(2.15rem, 9.6vw, 3rem); }
  .hero__sub { font-size: 1rem; margin-bottom: 20px; }
  .hero__floor { height: 52%; }
}

/* ---------- 2. tension ---------- */
.tension__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: 72px var(--sc-gutter) 24px; background: radial-gradient(60% 50% at 18% 60%, rgba(231, 111, 42, 0.07), transparent 70%); }
.tension__text { display: grid; }
.tension__text > * { grid-area: 1 / 1; align-self: center; }
.tension__line { margin: 0; font: 500 clamp(1.6rem, 2.9vw, 2.9rem)/1.14 var(--sc-font-display); letter-spacing: -0.025em; color: #E9E2DA; }
.tension__quote { margin: 0; }
.tension__quote blockquote { margin: 0; font: 400 clamp(1.6rem, 3vw, 2.8rem)/1.2 var(--sc-font-display); letter-spacing: -0.02em; color: var(--sc-ink); }
.tension__quote figcaption { margin-top: 16px; font: 500 15px/1.4 var(--sc-font-text); color: var(--sc-ink-soft); }
.tension__end p { margin: 0 0 14px; font: 500 clamp(1.4rem, 2.4vw, 2.2rem)/1.2 var(--sc-font-display); letter-spacing: -0.02em; color: #CFC6BD; }
.tension__last { margin: 0; max-width: 14ch; font: 600 clamp(2.3rem, 4.4vw, 4.4rem)/1.02 var(--sc-font-display); letter-spacing: -0.035em; }

/* ---------- 3. the turn: the scrubbed reel and the playbook it writes ---------- */
/* Desktop only: the engine gives phones a full-width copy block, and a two-class rule here would override it. */
@media (min-width: 861px) { .turn .sc-copy { max-width: min(38rem, 46vw); } .turn h2 { max-width: 15ch; } }
/* Phones put this copy at the top, where the engine's lead scrim does not reach and bright frames pass behind. */
.turn__scrim { display: none; }
@media (max-width: 860px) {
  .turn__scrim { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(14, 11, 10, 0.94) 0%, rgba(14, 11, 10, 0.86) 40%, rgba(14, 11, 10, 0) 60%); }
}
.pack-panel {
  position: absolute; z-index: 4; right: var(--sc-gutter); bottom: clamp(24px, 8svh, 80px); width: min(30rem, 42vw);
  padding: 20px 22px 18px; border-radius: 18px; background: rgba(18, 15, 14, 0.82); border: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.pack-panel__head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 12px; }
.pack-panel__head b { font: 600 16px/1.2 var(--sc-font-display); }
.pack-panel__head span { font: 500 13px/1 var(--sc-font-mono); color: var(--sc-ink-soft); }
.pack-panel ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pack-panel li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px; align-items: baseline; font: 400 15px/1.4 var(--sc-font-text); color: #E9E2DA; }
.pack-panel li code { font: 500 13px/1.4 var(--sc-font-mono); color: var(--sc-accent); }
@media (prefers-reduced-motion: no-preference) {
  .pack-panel li { opacity: clamp(0.08, calc(var(--sc-p, 0) * 9 - var(--i) * 1.05 - 0.6), 1); transform: translateY(calc((1 - clamp(0, calc(var(--sc-p, 0) * 9 - var(--i) * 1.05 - 0.6), 1)) * 8px)); }
}
.pack-panel__foot { margin: 12px 0 0; font: 500 13px/1.4 var(--sc-font-text); color: var(--sc-ink-soft); }
@media (max-width: 860px) {
  .pack-panel { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; bottom: 18px; padding: 14px 16px 12px; }
  .pack-panel li { grid-template-columns: 4.6rem 1fr; font-size: 14px; }
  .pack-panel li:nth-child(n+5) { display: none; }
  .turn .sc-copy { top: 13svh; bottom: auto; }
}

/* ---------- 4. the peak: plug a mind into your agent ---------- */
.peak__stage { display: grid; align-content: center; padding: 88px var(--sc-gutter) 40px;
  background: radial-gradient(55% 60% at 75% 55%, rgba(231, 111, 42, 0.09), transparent 70%); }
.peak__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 64px); align-items: center; max-width: var(--sc-maxw); margin: 0 auto; width: 100%; }
.peak h2 { margin: 0 0 12px; font: 600 clamp(2.2rem, 4.2vw, 4rem)/1.02 var(--sc-font-display); letter-spacing: -0.032em; }
.peak__sub { margin: 0 0 24px; max-width: 30rem; font: 400 1.125rem/1.5 var(--sc-font-text); color: #E2DAD2; }
.peak__hint { margin: 18px 0 0; font: 500 14px/1.4 var(--sc-font-text); color: var(--sc-ink-soft); }
.minds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.minds li { display: flex; }
.minds .mind-pick { height: 100%; align-content: start; }
/* If the stage ever overflows, keep the heading and the minds in view and let the bottom give. */
.peak__stage { align-content: safe center; }
.mind-pick .short, .only-narrow { display: none; }
.mind-pick {
  position: relative; width: 100%; display: grid; grid-template-rows: auto auto; text-align: left; cursor: grab; padding: 0; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--hair); background: var(--sc-surface); color: var(--sc-ink);
  transition: transform 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.mind-pick img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; filter: saturate(0.9); }
.mind-pick span { display: block; padding: 10px 12px 12px; }
.mind-pick b { display: block; font: 600 15px/1.2 var(--sc-font-display); }
.mind-pick em { display: block; margin-top: 3px; font: 400 13.5px/1.3 var(--sc-font-text); font-style: normal; color: var(--sc-ink-soft); }
.mind-pick[aria-pressed="true"] { border-color: rgba(231, 111, 42, 0.85); box-shadow: 0 0 0 1px rgba(231, 111, 42, 0.5), 0 12px 32px rgba(231, 111, 42, 0.18); }
.mind-pick[aria-pressed="true"]::after { content: "Plugged in"; position: absolute; top: 8px; left: 8px; padding: 5px 9px; border-radius: 999px; background: var(--sc-accent); color: var(--sc-accent-ink); font: 600 12px/1 var(--sc-font-display); }
.mind-pick.dragging { opacity: 0.5; }
@media (hover: hover) and (pointer: fine) { .mind-pick:hover { transform: translateY(-2px); border-color: var(--hair-strong); } }

.agent {
  border-radius: 22px; background: #141213; border: 1px solid var(--hair-strong); overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.agent__bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--hair); background: #19161A; }
.agent__bar b { font: 600 15px/1 var(--sc-font-display); }
.socket {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1px dashed rgba(246, 242, 238, 0.35); font: 500 14px/1 var(--sc-font-display); color: var(--sc-ink-soft);
  transition: border-color 200ms var(--sc-ease-out), background 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out);
}
.socket i { width: 8px; height: 8px; border-radius: 50%; background: #5C5550; transition: background 200ms, box-shadow 200ms; }
.socket.live { border-style: solid; border-color: rgba(231, 111, 42, 0.9); color: var(--sc-ink); background: rgba(231, 111, 42, 0.12); }
.socket.live i { background: var(--sc-accent); box-shadow: 0 0 0 4px rgba(231, 111, 42, 0.18), 0 0 12px rgba(231, 111, 42, 0.7); }
.socket.over { border-color: var(--sc-accent); background: rgba(231, 111, 42, 0.2); }
.agent__body { padding: 20px 22px 18px; display: grid; gap: 16px; min-height: 22.5rem; align-content: start; }
.agent__ask { justify-self: end; max-width: 92%; padding: 12px 16px; border-radius: 16px 16px 6px 16px; background: #26222A; font: 400 16px/1.45 var(--sc-font-text); }
.agent__state { font: 500 13px/1 var(--sc-font-mono); color: var(--sc-ink-soft); }
.agent__answer { display: grid; gap: 10px; }
.agent__answer .lead { margin: 0; font: 600 17px/1.4 var(--sc-font-display); }
.agent__answer ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.agent__answer li { display: grid; grid-template-columns: 6.6rem 1fr; gap: 12px; align-items: baseline; font: 400 15.5px/1.45 var(--sc-font-text); color: #ECE5DD; }
.agent__answer li code { font: 500 13px/1.4 var(--sc-font-mono); color: var(--sc-accent); white-space: nowrap; }
.agent__answer li code:empty::before { content: "no source"; color: #6F6862; }
.agent__answer.before { opacity: 0.62; }
.agent__answer.before .lead { font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .agent__answer li { animation: rowIn 420ms var(--sc-ease-out) both; animation-delay: calc(var(--i) * 90ms); }
  @keyframes rowIn { from { opacity: 0; transform: translateY(8px); } }
}
.agent__note { margin: 0; padding: 12px 22px 16px; border-top: 1px solid var(--hair); font: 400 13px/1.45 var(--sc-font-text); color: var(--sc-ink-soft); }
@media (max-width: 900px) {
  /* The peak on a phone: one column, and everything inside one 390x844 screen, because the stage is
     pinned and clipped. Measured with lab/peakcheck.mjs for every mind's question and answer. */
  .peak__stage { padding: 72px var(--sc-gutter) 12px; }
  .peak__grid { grid-template-columns: 1fr; gap: 14px; }
  .peak .eyebrow, .peak__hint, .mind-pick em { display: none; }
  .peak h2 { margin-bottom: 8px; font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .peak__sub { margin-bottom: 12px; font-size: 1rem; }
  .only-wide { display: none; }
  .only-narrow { display: inline; }
  .minds { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .mind-pick span { padding: 6px 7px 8px; }
  .mind-pick b { font-size: 12.5px; }
  .mind-pick .full { display: none; }
  .mind-pick .short { display: block; }
  /* A dot, not a word: the word covered most of a 60px thumbnail. Shape plus border, not colour alone. */
  .mind-pick[aria-pressed="true"]::after { content: ""; top: 5px; left: 5px; width: 10px; height: 10px; padding: 0; box-shadow: 0 0 0 2px #141213; }
  .agent__bar { padding: 10px 14px; }
  .socket { min-height: 28px; padding: 0 11px; }
  .agent__body { min-height: 0; padding: 12px 14px 10px; gap: 8px; }
  .agent__ask { font-size: 14.5px; padding: 10px 13px; }
  .agent__answer, .agent__answer ol { gap: 7px; }
  .agent__answer .lead { font-size: 15px; }
  .agent__answer li { display: block; font-size: 14px; line-height: 1.4; }
  .agent__answer li code, .agent__answer li a { margin-right: 6px; }
  .agent__answer li code { font-size: 12px; }
  .agent__note { padding: 9px 14px 11px; font-size: 12px; }
}

/* ---------- 5. the library ---------- */
.library__stage { display: flex; align-items: center; }
.rail { display: flex; gap: 22px; padding: 0 var(--sc-gutter); align-items: stretch; }
.rail__lead, .rail__end { flex: 0 0 min(24rem, 78vw); display: grid; align-content: center; gap: 14px; }
.rail__lead h2 { margin: 0; font: 600 clamp(2.2rem, 4.4vw, 4rem)/1.02 var(--sc-font-display); letter-spacing: -0.032em; }
.rail__lead p, .rail__end p { margin: 0; font: 400 1.1rem/1.5 var(--sc-font-text); color: #E2DAD2; }
.rail__end p { font: 500 clamp(1.4rem, 2.2vw, 1.9rem)/1.25 var(--sc-font-display); color: var(--sc-ink); }
.card { flex: 0 0 clamp(15rem, 22vw, 19rem); display: grid; grid-template-rows: auto 1fr; border-radius: 18px; overflow: hidden; background: var(--sc-surface); border: 1px solid var(--hair); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); }
.card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.card__txt { padding: 16px 18px 18px; display: grid; gap: 6px; align-content: start; }
.card h3 { margin: 0; font: 600 1.25rem/1.15 var(--sc-font-display); letter-spacing: -0.01em; }
.card .field { margin: 0; font: 500 13px/1 var(--sc-font-mono); color: var(--sc-accent); }
.card .does { margin: 6px 0 0; font: 500 1.02rem/1.4 var(--sc-font-text); color: var(--sc-ink); }
.card .src { margin: 6px 0 0; font: 400 13.5px/1.4 var(--sc-font-text); color: var(--sc-ink-soft); }
.card .src a { text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  /* Each card settles as it crosses into view. Tuned at 1440px: 19rem cards, 22px gaps, twelve cards, so card i
     enters at p = 0.096i - 0.28 and is settled 0.13 later. Narrower screens settle a little early, never late. */
  /* Retuned for sixteen cards (2026-10-13): card i enters at p = 0.073i - 0.22 and is settled 0.097 later. */
  .card { opacity: clamp(0.55, calc(1.55 + var(--sc-p, 0) * 4.6 - var(--i) * 0.34), 1); }
}

/* ---------- 6. proof ---------- */
/* Comes straight after the pinned rail: a short top so the reader never faces an empty screen. */
.proof { padding: clamp(24px, 4vh, 48px) 0 clamp(72px, 12vh, 140px); }
.proof__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.proof h2 { margin: 0 0 18px; font: 600 clamp(2rem, 3.8vw, 3.6rem)/1.04 var(--sc-font-display); letter-spacing: -0.03em; }
.proof p { margin: 0 0 14px; max-width: 34rem; font: 400 1.1rem/1.6 var(--sc-font-text); color: #E2DAD2; }
.proof .facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.proof .facts span { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--hair-strong); font: 500 14px/1 var(--sc-font-display); }
.proof__figure { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.proof__video { width: 78%; }
.proof__video .frame { display: block; border-radius: 16px; overflow: hidden; border: 1px solid var(--hair); }
.proof__video img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.proof__video .cap { margin: 0 0 10px; max-width: none; font: 500 13.5px/1.4 var(--sc-font-text); color: var(--sc-ink-soft); }
.proof__pack { position: relative; margin: -84px 0 0 16%; border-radius: 16px; background: #F6F1EA; color: #241F1B; padding: 18px 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.proof__pack h3 { margin: 0 0 4px; font: 600 1.1rem/1.2 var(--sc-font-display); }
.proof__pack .kicker { margin: 0 0 12px; font: 500 12.5px/1.3 var(--sc-font-mono); color: #8A4A1F; }
.proof__pack ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; font: 400 14.5px/1.45 var(--sc-font-text); }
.proof__pack code { font: 500 12.5px/1 var(--sc-font-mono); color: #A5501B; }
@media (max-width: 900px) { .proof__grid { grid-template-columns: 1fr; } .proof__video { width: 100%; } .proof__pack { margin: -36px 0 0 6%; } }

/* ---------- 7. it loads where you work; what owners say; questions ---------- */
.works { padding: clamp(64px, 10vh, 120px) 0 clamp(48px, 8vh, 96px); }
.works h2, .voices h2, .faq h2 { margin: 0 0 28px; font: 600 clamp(1.9rem, 3.4vw, 3.2rem)/1.05 var(--sc-font-display); letter-spacing: -0.03em; }
.agents { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; }
.agents li { background: var(--sc-canvas); padding: 20px 22px; display: grid; gap: 6px; }
.agents b { font: 600 1.2rem/1.1 var(--sc-font-display); }
.agents span { font: 400 15px/1.45 var(--sc-font-text); color: var(--sc-ink-soft); }
@media (max-width: 760px) { .agents { grid-template-columns: 1fr 1fr; } .agents li { padding: 16px; } }
.voices { padding: clamp(40px, 7vh, 88px) 0; }
.voices ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; }
.voices li { padding: 22px; border-radius: 18px; background: var(--sc-surface); border: 1px solid var(--hair); display: grid; gap: 14px; align-content: space-between; }
.voices q { font: 500 1.15rem/1.4 var(--sc-font-display); quotes: "\201C" "\201D"; }
.voices cite { font: 400 13.5px/1.4 var(--sc-font-text); font-style: normal; color: var(--sc-ink-soft); }
@media (max-width: 900px) { .voices ul { grid-template-columns: 1fr; } }
.faq { padding: clamp(40px, 7vh, 88px) 0 clamp(64px, 10vh, 120px); }
.faq details { border-bottom: 1px solid var(--hair); max-width: 52rem; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font: 500 1.2rem/1.3 var(--sc-font-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--sc-ink-soft); border-bottom: 2px solid var(--sc-ink-soft); transform: translateY(-70%) rotate(45deg); transition: transform 160ms var(--sc-ease-out); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { margin: 0 0 20px; max-width: 46rem; font: 400 1.05rem/1.6 var(--sc-font-text); color: #DCD4CC; }

/* ---------- 8. the close ---------- */
/* Two rows: the copy, then the footer in flow. An absolutely placed footer slid over the button on short
   phones once a visitor had plugged in five minds (three rows of chips), and took the tap. */
.close__stage { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.close__stage picture { position: absolute; inset: 0; }
.close__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 30% 50%; }
.close__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to left, rgba(10, 8, 7, 0.9) 0%, rgba(10, 8, 7, 0.72) 34%, rgba(10, 8, 7, 0) 62%); }
@media (max-aspect-ratio: 3/4) {
  .close__bg { object-position: 50% 100%; }
  .close__scrim { background: linear-gradient(to bottom, rgba(10, 8, 7, 0.94) 0%, rgba(10, 8, 7, 0.86) 58%, rgba(10, 8, 7, 0.2) 84%, rgba(10, 8, 7, 0) 100%); }
}
.close__inner { position: relative; z-index: 4; grid-row: 1; align-self: center; justify-self: end; width: min(34rem, calc(100vw - 2 * var(--sc-gutter))); margin-right: var(--sc-gutter); }
.close h2 { margin: 0 0 16px; font: 600 clamp(2.3rem, 4.4vw, 4.2rem)/1.02 var(--sc-font-display); letter-spacing: -0.034em; }
.close__price { margin: 0 0 22px; font: 400 1.1rem/1.5 var(--sc-font-text); color: #E7DFD7; }
.join { display: grid; gap: 12px; }
.join__row { display: flex; gap: 10px; }
.join input[type="email"] { flex: 1; min-width: 0; height: 52px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--hair-strong); background: rgba(20, 17, 16, 0.85); color: var(--sc-ink); font: 400 16px/1 var(--sc-font-text); }
.join input::placeholder { color: #8E857D; }
.join .cta { min-height: 52px; }
.picked { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 32px; font: 500 14px/1.3 var(--sc-font-text); color: var(--sc-ink-soft); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(231, 111, 42, 0.6); background: rgba(231, 111, 42, 0.12); color: var(--sc-ink); font: 500 13.5px/1 var(--sc-font-display); cursor: pointer; }
.chip::after { content: "\00d7"; font-size: 15px; color: var(--sc-ink-soft); }
.join__note { margin: 0; min-height: 22px; font: 500 14.5px/1.4 var(--sc-font-text); color: var(--sc-ink-soft); }
.join__note.err { color: #FF9A80; }
.foot { position: relative; z-index: 4; grid-row: 2; padding: 18px var(--sc-gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font: 400 13px/1.45 var(--sc-font-text); color: #A79E96; background: linear-gradient(to top, rgba(10, 8, 7, 0.9), rgba(10, 8, 7, 0)); }
.foot a { color: inherit; }
/* Stacked, flex: 1 would set the field's height to a zero basis and collapse it: size it outright. */
@media (max-width: 560px) { .join__row { flex-direction: column; } .join input[type="email"] { flex: none; width: 100%; } .join .cta { width: 100%; } }
@media (max-aspect-ratio: 3/4) {
  .close__inner { justify-self: center; margin: 0 var(--sc-gutter); align-self: start; margin-top: 14svh; }
  .close h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .foot { padding: 12px var(--sc-gutter) 14px; font-size: 12px; }
}
@media (max-aspect-ratio: 3/4) and (max-height: 760px) {
  .close__inner { margin-top: 10svh; }
  .close h2 { margin-bottom: 10px; font-size: 1.85rem; }
  .close__price { margin-bottom: 14px; font-size: 1rem; }
  .join { gap: 9px; }
  .join input[type="email"], .join .cta { height: 48px; min-height: 48px; }
  .chip { padding: 5px 9px; font-size: 12.5px; }
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- additions for the full page ---------- */
main p.eyebrow { margin: 0 0 14px; max-width: none; font: 500 13px/1.2 var(--sc-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-accent); }
.link, .stat a, .faq a, .foot a, .tension__quote a, .voices cite a { text-decoration: underline; text-decoration-color: rgba(231, 111, 42, 0.7); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tension__quote blockquote { max-width: 40rem; }
.turn .sc-display { margin: 0 0 16px; }
.turn .sc-body { margin: 0; max-width: 32rem; color: #E7DFD7; }
.turn .eyebrow { margin-bottom: 12px; }

/* the agent window: label, cite links, the compare toggle */
.agent__label { margin: 0; font: 500 12.5px/1 var(--sc-font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-ink-soft); }
.agent__label.on { color: var(--sc-accent); }
.agent__answer li a { text-decoration: none; border-radius: 4px; }
.agent__answer li a:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .agent__answer li a:hover code { text-decoration: underline; text-underline-offset: 3px; } }
.agent__compare { justify-self: start; padding: 0; border: 0; background: none; cursor: pointer; color: var(--sc-ink); font: 500 14px/1.4 var(--sc-font-text); text-decoration: underline; text-decoration-color: rgba(231, 111, 42, 0.7); text-underline-offset: 4px; }
.agent__compare:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.agent__answer.thinking { opacity: 0.35; transition: opacity 160ms var(--sc-ease-out); }
.mind-pick.is-current { border-color: rgba(231, 111, 42, 0.85); }

/* use-case cards: which agents run it */
.card .on { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.card .on span { padding: 5px 9px; border-radius: 999px; border: 1px solid var(--hair-strong); font: 500 12.5px/1 var(--sc-font-display); color: var(--sc-ink); }
.rail__end .ghost { justify-self: start; }

/* proof: the founder's line */
.proof blockquote { margin: 22px 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--sc-accent); }
.proof blockquote p { margin: 0 0 8px; font: 500 clamp(1.2rem, 1.8vw, 1.45rem)/1.4 var(--sc-font-display); color: var(--sc-ink); }
.proof blockquote cite { font: 400 14px/1.4 var(--sc-font-text); font-style: normal; color: var(--sc-ink-soft); }
.proof__pack li code { margin-left: 6px; }

/* for OpenClaw and Hermes owners */
.owners { padding: clamp(64px, 10vh, 120px) 0 clamp(32px, 5vh, 64px); }
.owners__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.owners h2 { margin: 0 0 20px; font: 600 clamp(1.9rem, 3.4vw, 3.2rem)/1.05 var(--sc-font-display); letter-spacing: -0.03em; }
.owners p { margin: 0 0 14px; max-width: 34rem; font: 400 1.1rem/1.6 var(--sc-font-text); color: #E2DAD2; }
.owners .stat { margin-top: 22px; font-size: 1rem; color: var(--sc-ink-soft); }
.owners .stat b { color: var(--sc-ink); font-weight: 600; }
.sends { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; }
.sends li { background: var(--sc-canvas); padding: 18px 20px; display: grid; gap: 4px; }
.sends b { font: 600 1.08rem/1.3 var(--sc-font-display); }
.sends span { font: 400 15px/1.45 var(--sc-font-text); color: var(--sc-ink-soft); }
@media (max-width: 900px) { .owners__grid { grid-template-columns: 1fr; } }
.works__note { margin: 18px 0 0; max-width: 46rem; font: 400 15px/1.5 var(--sc-font-text); color: var(--sc-ink-soft); }
.works__note code { font: 500 13.5px/1 var(--sc-font-mono); color: var(--sc-accent); white-space: nowrap; }

/* Short phones (an SE is 375x667): the peak is pinned and clipped, so it sheds the sub-line, the
   thumbnails and the label (the socket already names the mind) before anything is cut off. */
@media (max-width: 900px) and (max-height: 760px) {
  .peak__sub, .agent__label { display: none; }
  .mind-pick img { display: none; }
  .mind-pick span { padding: 9px 6px; text-align: center; }
  .mind-pick[aria-pressed="true"]::after { top: 4px; left: 4px; width: 7px; height: 7px; }
  .agent__ask { font-size: 13.5px; }
  .agent__answer .lead { font-size: 14px; }
  .agent__answer li { font-size: 13px; }
}
@media (max-width: 900px) and (max-height: 690px) {
  .peak__stage { padding-bottom: 4px; }
  .peak__grid { gap: 10px; }
  .peak h2 { font-size: 1.7rem; }
  .agent__body { padding: 10px 12px 8px; }
  .agent__note { padding: 7px 12px 8px; font-size: 11px; }
}

/* Keyboard focus never lands on a block that has not faded in yet: holding focus shows it at once. */
[data-sc-in]:focus-within, [data-sc-stagger]:focus-within > * { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ================= v2 (2026-10-13 feedback) ================= */
/* logos: inline SVGs; one-colour marks take the page ink, brand marks keep their colour */
.logo { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; fill: currentColor; }
.logo--youtube { fill: #FF0000; } .logo--instagram { fill: #E4405F; } .logo--linkedin { fill: #0A66C2; }
.logo--spotify { fill: #1DB954; } .logo--gemini { fill: #8E75B2; } .logo--x { fill: var(--sc-ink); }
.mark { align-items: center; }
.mark__logo { width: 26px; height: 26px; }
.mark b::before { display: none; }

.hero__apps { display: flex; flex-wrap: wrap; gap: 8px 13px; margin-top: 18px; font: 500 13.5px/1 var(--sc-font-text); color: var(--sc-ink-soft); }
.hero__app { display: inline-flex; align-items: center; gap: 7px; }
.hero__app { gap: 6px; }
.hero__app .logo { width: 16px; height: 16px; }

/* mixed-source tiles (hero screen and the 'never seen it' wall) */
.tile { position: relative; display: block; overflow: hidden; background: #1A1614; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile__pf { position: absolute; left: 6%; bottom: 8%; width: 18%; height: auto; aspect-ratio: 1; max-width: 26px;
  padding: 3%; border-radius: 22%; background: rgba(255, 255, 255, 0.92); box-sizing: content-box; }
.tile--li { background: #F4F1EC; padding: 7%; display: flex; flex-direction: column; gap: 6%; }
.tile--li .tile__pf { left: auto; right: 6%; top: 7%; bottom: auto; padding: 0; background: none; }
.tile__who { width: 22%; aspect-ratio: 1; border-radius: 50%; background: #CBBFB3; }
.tile__txt { font: 600 clamp(6px, 0.62vw, 11px)/1.25 var(--sc-font-text); color: #2B2420; }
.tile__bars { height: 18%; background: repeating-linear-gradient(#DCD3CA 0 22%, transparent 22% 45%); }
.tile--ig { background: radial-gradient(120% 90% at 30% 20%, #833AB4 0%, #C13584 35%, #E1306C 60%, #F77737 100%); }
.tile__play { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.tile__play::after { content: ""; position: absolute; left: 38%; top: 28%; border-left: 0.7em solid #fff; border-top: 0.42em solid transparent; border-bottom: 0.42em solid transparent; font-size: clamp(6px, 0.7vw, 12px); }
.tile--pod { background: linear-gradient(160deg, #1E3D2A, #0F1A13); display: grid; place-items: center; }
.tile__wave { display: flex; align-items: center; gap: 4%; height: 40%; width: 70%; }
.tile__wave b { flex: 1; background: #1DB954; border-radius: 2px; height: 30%; }
.tile__wave b:nth-child(3n) { height: 85%; } .tile__wave b:nth-child(3n+1) { height: 55%; } .tile__wave b:nth-child(4n) { height: 100%; }
.screen__grid .tile { width: 100%; height: 100%; }
.screen__grid .tile img { filter: sepia(0.28) saturate(0.85) brightness(1.02) contrast(0.92); }

/* the live window in act 2: one phase per line of copy (page.js sets data-phase from the act's progress) */
.sim { position: relative; border-radius: 20px; background: #141213; border: 1px solid var(--hair-strong); overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55); height: min(30rem, 62svh); display: grid; grid-template-rows: auto 1fr; }
.sim__bar { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--hair); background: #19161A; font: 600 15px/1 var(--sc-font-display); }
.sim__apps, .agent__apps { display: inline-flex; gap: 6px; }
.sim__apps .logo, .agent__apps .logo { width: 17px; height: 17px; }
.sim__dots { margin-left: auto; display: inline-flex; gap: 5px; }
.sim__dots i { width: 6px; height: 6px; border-radius: 50%; background: #4A4440; }
.sim__body { position: relative; }
.sim__tasks, .sim__chat, .sim__wall { position: absolute; inset: 0; padding: 18px; opacity: 0; transition: opacity 360ms var(--sc-ease-out), transform 360ms var(--sc-ease-out); transform: translateY(10px); }
.sim[data-phase="0"] .sim__tasks, .sim[data-phase="1"] .sim__chat, .sim[data-phase="2"] .sim__chat, .sim[data-phase="3"] .sim__wall { opacity: 1; transform: none; }
.sim__tasks { list-style: none; margin: 0; display: grid; gap: 10px; align-content: start; }
.sim__tasks li { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 13px 14px; border-radius: 14px; background: #1D191C; border: 1px solid var(--hair);
  font: 500 15px/1.3 var(--sc-font-text); opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--sc-ease-out), transform 300ms var(--sc-ease-out); transition-delay: calc(var(--i) * 260ms); }
.sim[data-phase="0"] .sim__tasks li { opacity: 1; transform: none; }
.sim__tasks em { display: block; font-style: normal; font-size: 13px; color: var(--sc-ink-soft); }
.sim__tasks b { font: 600 12px/1 var(--sc-font-mono); color: #7BD88F; }
.ico { width: 34px; height: 34px; border-radius: 10px; background: rgba(231, 111, 42, 0.14); position: relative; }
.ico::after { position: absolute; inset: 0; display: grid; place-items: center; font: 600 15px/34px var(--sc-font-mono); text-align: center; color: var(--sc-accent); }
.ico--web::after { content: "www"; font-size: 10px; } .ico--code::after { content: "</>"; font-size: 12px; } .ico--mail::after { content: "@"; } .ico--cal::after { content: "4pm"; font-size: 10px; }
.sim__chat { display: grid; gap: 12px; align-content: start; }
.sim__ask { justify-self: end; max-width: 88%; margin: 0; padding: 11px 14px; border-radius: 14px 14px 5px 14px; background: #26222A; font: 400 15px/1.45 var(--sc-font-text); }
.sim__answer { padding: 12px 14px; border-radius: 14px; background: #1B181A; font: 400 14.5px/1.45 var(--sc-font-text); color: #CFC6BD; }
.sim__answer p { margin: 0 0 6px; font-weight: 600; color: var(--sc-ink); }
.sim__answer ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.sim__stamp { justify-self: start; margin: 0; padding: 7px 12px; border-radius: 999px; border: 1.5px solid #FF9A80; color: #FFB3A0; font: 600 13px/1 var(--sc-font-display);
  opacity: 0; transform: rotate(-3deg) scale(1.15); transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out); }
.sim[data-phase="2"] .sim__stamp { opacity: 1; transform: rotate(-3deg); }
.sim__wall { padding: 0; }
.sim__tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 6px; padding: 6px; filter: grayscale(0.55) brightness(0.62); }
.sim__never { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; padding: 12px 20px; border-radius: 999px; background: rgba(14, 12, 11, 0.88);
  border: 1px solid var(--hair-strong); font: 600 18px/1 var(--sc-font-display); white-space: nowrap; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
@media (prefers-reduced-motion: reduce) { .sim *, .sim__tasks li { transition: none !important; } }
@media (max-width: 900px) {
  .tension__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; gap: 16px; padding-top: 84px; }
  .tension__line { font-size: clamp(1.35rem, 6vw, 1.8rem); }
  .tension__last { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .tension__quote blockquote { font-size: clamp(1.2rem, 5.2vw, 1.6rem); }
  .tension__text { min-height: 9.5rem; }
  .sim { height: auto; min-height: 0; max-height: 52svh; align-self: stretch; }
  .sim__tasks li { padding: 9px 11px; font-size: 14px; }
  .sim__answer { font-size: 13.5px; }
}

/* act 3 panel and the cites: each line shows the platform it came from */
.pack-panel li { grid-template-columns: 1.1rem 4.6rem 1fr; }
.panel-pf, .cite-pf { width: 14px; height: 14px; }
.agent__answer li a { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 860px) { .pack-panel li { grid-template-columns: 1rem 3.4rem 1fr; } }

/* the peak window reads as a chat app */
.agent__bar { gap: 10px; }
.socket__logo { width: 16px; height: 16px; }
.mind-pick { position: relative; }
.mind-pick__pf { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.mind-pick__pf .pf { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(255, 255, 255, 0.94); }
.mind-pick__pf .logo { width: 14px; height: 14px; }
@media (max-width: 900px) { .mind-pick__pf { top: 3px; right: 3px; } .mind-pick__pf .pf { width: 16px; height: 16px; border-radius: 5px; } .mind-pick__pf .logo { width: 10px; height: 10px; } }

/* rail cards: platform badges on the image, AI apps as logos */
.card__img { position: relative; }
.card__pf { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; }
.card__pf .pf, .rail__pfs .pf { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, 0.95); }
.card__pf .logo, .rail__pfs .logo { width: 17px; height: 17px; }
.rail__pfs .logo--x { fill: #111; }
.rail__pfs { display: flex; gap: 8px; }
.card .on { gap: 8px; }
.card .on .app { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--hair-strong); font: 500 12.5px/1 var(--sc-font-display); }
.card .on .app .logo { width: 14px; height: 14px; }
.card .on span.app > span { border: 0; padding: 0; }

/* OpenClaw and Hermes, plugged into Plugbook */
.owners__grid { align-items: center; }
.plug { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0; min-height: 240px; }
.plug__ends { display: grid; gap: 70px; z-index: 1; }
.plug__app, .plug__hub { display: grid; justify-items: center; gap: 10px; font: 600 15px/1 var(--sc-font-display); }
.plug__app .logo { width: 64px; height: 64px; padding: 16px; border-radius: 22px; background: #1D191C; border: 1px solid var(--hair-strong); box-sizing: content-box; }
.plug__hub { z-index: 1; }
.plug__hub .logo { width: 84px; height: 84px; padding: 18px; border-radius: 26px; background: #1D191C; border: 1px solid rgba(231, 111, 42, 0.6);
  box-shadow: 0 0 0 6px rgba(231, 111, 42, 0.08), 0 0 40px rgba(231, 111, 42, 0.35); box-sizing: content-box; }
/* From the app tiles' right edge to the hub's left edge, so no wire shows past the hub. */
/* An absolutely placed SVG keeps its 300px default width unless told otherwise: size it outright. */
.plug__wires { position: absolute; left: 96px; top: 0; width: calc(100% - 216px); height: 100%; overflow: visible; }
.plug { overflow: hidden; }
.plug__wires path { fill: none; stroke: var(--sc-accent); stroke-width: 3; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .plug__wires path { animation: wire 1.4s linear infinite; }
  @keyframes wire { to { stroke-dashoffset: -28; } }
}
.sends { margin-top: 36px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sends li { grid-template-columns: 22px 1fr; column-gap: 12px; }
.sends li > :not(.logo) { grid-column: 2; }
.sends__pf { width: 20px; height: 20px; grid-row: 1 / span 2; margin-top: 2px; }
@media (max-width: 760px) { .sends { grid-template-columns: 1fr; } .plug { min-height: 200px; } .plug__ends { gap: 46px; } .plug__app .logo { width: 44px; height: 44px; padding: 12px; } .plug__hub .logo { width: 56px; height: 56px; padding: 14px; } }

/* works: the real logos */
.agents { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.agents li { grid-template-columns: 36px 1fr; column-gap: 14px; align-items: center; }
.agents li > :not(.logo) { grid-column: 2; }
.works__logo { width: 32px; height: 32px; grid-row: 1 / span 2; }
.agents__any { grid-template-columns: 1fr !important; }
.agents__any > * { grid-column: 1 !important; }
@media (max-width: 900px) { .agents { grid-template-columns: 1fr 1fr; } }

/* voices: faces */
.voices .who { display: flex; align-items: center; gap: 12px; }
.voices .who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid var(--hair-strong); flex: none; }
.voices__note { margin: 16px 0 0; font: 400 13.5px/1.4 var(--sc-font-text); color: var(--sc-ink-soft); }

/* A focused card is fully drawn, whatever its settle (keyboard users land on rail links before they settle). */
.card:focus-within { opacity: 1 !important; }
/* The peak's heading is two sentences now: keep the act inside one screen on short laptops and on phones. */
.peak h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); }
@media (min-width: 901px) and (max-height: 800px) {
  .peak h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
  .peak__sub { margin-bottom: 14px; font-size: 1rem; }
  .peak__stage { padding-top: 76px; padding-bottom: 16px; }
  .agent__body { min-height: 0; }
  .peak__hint { display: none; }
}
@media (max-width: 900px) { .peak h2 { font-size: clamp(1.6rem, 6.6vw, 2.2rem); } }

@media (max-width: 760px) { .plug__wires { left: 62px; width: calc(100% - 144px); } }
/* The card's own 'span' padding rule must not reach the platform badges. */
.mind-pick .mind-pick__pf, .mind-pick .mind-pick__pf span { padding: 0; }
.mind-pick .mind-pick__pf .pf { display: grid; }

/* The proof follows the pinned rail: start its text at the top so nothing leaves a gap as the rail fades. */
.proof__grid { align-items: start; }
/* ...and tuck it up into the empty band under the rail cards, so the hand-off has no dead space. */
.proof { position: relative; z-index: 2; margin-top: -8svh; }

/* ================= Instagram creators (2026-10-13) ================= */
.reels { padding: clamp(72px, 12vh, 140px) 0 clamp(40px, 6vh, 72px); }
.reels h2 { margin: 0 0 14px; max-width: 22ch; font: 600 clamp(1.9rem, 3.4vw, 3.2rem)/1.05 var(--sc-font-display); letter-spacing: -0.03em; }
.reels__sub { margin: 0 0 32px; max-width: 46rem; font: 400 1.08rem/1.6 var(--sc-font-text); color: #E2DAD2; }
.creators { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.creator { display: grid; gap: 14px; align-content: start; padding: 18px; border-radius: 20px; background: var(--sc-surface); border: 1px solid var(--hair); }
.creator__head { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.creator__pic { width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px var(--sc-surface), 0 0 0 4px #E4405F; }
.creator__head b { display: block; font: 600 1.02rem/1.2 var(--sc-font-display); }
.creator__head a { font: 500 13.5px/1.3 var(--sc-font-mono); color: var(--sc-accent); text-decoration: none; }
.creator__head span { display: block; margin-top: 3px; font: 400 13px/1.35 var(--sc-font-text); color: var(--sc-ink-soft); }
.creator__pf { width: 22px; height: 22px; }
.creator__reels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.reel { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #000; }
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__likes { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 999px;
  background: rgba(10, 8, 7, 0.78); font: 500 11.5px/1 var(--sc-font-text); color: #fff; }
.reel__likes .logo { width: 12px; height: 12px; }
.reel:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; }
.creator__learns { margin: 0; font: 500 14.5px/1.45 var(--sc-font-text); color: var(--sc-ink); }
@media (max-width: 900px) { .creators { grid-template-columns: 1fr; } }
/* Instagram covers are 9:16: keep faces in a 16:9 card */
.card img[src*="assets/ig/"], .mind-pick img[src*="assets/ig/"] { object-position: 50% 22%; }
/* six creators in the demo now */
@media (max-width: 900px) { .minds { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } .mind-pick b { font-size: 11px; } }

/* ================= the plug scene (2026-10-13) ================= */
.plugscene__stage { display: grid; grid-template-rows: auto 1fr; gap: 12px; padding: 92px var(--sc-gutter) 28px;
  background: radial-gradient(50% 55% at 50% 60%, rgba(231, 111, 42, 0.08), transparent 70%); }
.plugscene__copy { display: grid; text-align: center; }
.plugscene__copy > * { grid-area: 1 / 1; margin: 0 auto; max-width: 30ch; font: 600 clamp(1.6rem, 2.9vw, 2.8rem)/1.1 var(--sc-font-display); letter-spacing: -0.025em; }
.plugscene__map { position: relative; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 24rem); gap: clamp(20px, 4vw, 64px);
  align-items: center; max-width: var(--sc-maxw); width: 100%; margin: 0 auto; }
.plugscene__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.plugscene__wires path { fill: none; stroke-linecap: round; }
.plugscene__wires .cable { stroke: #3A3330; stroke-width: 5; }
.plugscene__wires .reads path, .plugscene__wires .gives path { stroke: var(--sc-accent); stroke-width: 2.5; opacity: 0.9; filter: drop-shadow(0 0 4px rgba(231, 111, 42, 0.6)); }
.plugscene__label { margin: 0 0 10px; font: 500 12.5px/1 var(--sc-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.plugscene__ai, .plugscene__src, .hub { position: relative; z-index: 1; }
.ais { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ai { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #1A1719; border: 1px solid var(--hair-strong); font: 600 15px/1 var(--sc-font-display);
  transition: border-color 300ms var(--sc-ease-out), box-shadow 300ms var(--sc-ease-out); }
.ai .logo { width: 22px; height: 22px; }
.ai.lit { border-color: rgba(231, 111, 42, 0.8); box-shadow: 0 0 0 1px rgba(231, 111, 42, 0.35), 0 0 24px rgba(231, 111, 42, 0.18); }
.knows { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 5.4rem; align-content: start; }
.knows .plugscene__label { flex-basis: 100%; margin-bottom: 4px; }
.know { padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(231, 111, 42, 0.6); background: rgba(231, 111, 42, 0.12); font: 500 12.5px/1 var(--sc-font-display);
  opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--sc-ease-out), transform 300ms var(--sc-ease-out); }
.know.on { opacity: 1; transform: none; }
.hub { justify-self: center; display: grid; justify-items: center; gap: 10px; font: 600 1.15rem/1 var(--sc-font-display); }
.hub__mark { display: grid; place-items: center; width: clamp(96px, 10vw, 132px); aspect-ratio: 1; border-radius: 30px; background: #1D191C; border: 1px solid var(--hair-strong);
  transition: border-color 400ms var(--sc-ease-out), box-shadow 400ms var(--sc-ease-out); }
.hub__mark .logo { width: 60%; height: 60%; filter: grayscale(1) brightness(0.7); transition: filter 400ms var(--sc-ease-out); }
.hub.live .hub__mark { border-color: rgba(231, 111, 42, 0.8); box-shadow: 0 0 0 8px rgba(231, 111, 42, 0.08), 0 0 60px rgba(231, 111, 42, 0.45); }
.hub.live .hub__mark .logo { filter: none; }
.hub__socket { position: absolute; left: -12px; top: calc(clamp(96px, 10vw, 132px) / 2 - 12px); width: 12px; height: 24px; border-radius: 4px 0 0 4px; background: #2A2422; border: 1px solid var(--hair-strong); }
.hub__status { font: 500 13px/1.3 var(--sc-font-mono); color: var(--sc-ink-soft); text-align: center; min-height: 2.6em; }
.hub.live .hub__status { color: var(--sc-accent); }
.srcs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.psrc { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #1A1614; border: 1px solid var(--hair);
  filter: grayscale(0.85) brightness(0.55); transition: filter 300ms var(--sc-ease-out), box-shadow 300ms var(--sc-ease-out); }
.psrc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.psrc.lit { filter: none; box-shadow: 0 0 0 1px rgba(231, 111, 42, 0.7), 0 0 18px rgba(231, 111, 42, 0.3); }
.psrc--linkedin { background: #F4F1EC; padding: 10%; display: flex; flex-direction: column; gap: 8%; }
.psrc--linkedin .tile__txt { font-size: clamp(7px, 0.7vw, 11px); }
.psrc--podcast { background: linear-gradient(160deg, #1E3D2A, #0F1A13); display: grid; place-items: center; }
.psrc--podcast .tile__wave { width: 70%; height: 36%; }
.psrc__pf { position: absolute; left: 6px; bottom: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(255, 255, 255, 0.95); }
.psrc__pf .logo { width: 14px; height: 14px; }
/* The plug that travels the cable (named apart from the OpenClaw diagram's .plug) */
.plughead { position: absolute; z-index: 2; left: 0; top: 0; width: 30px; height: 22px; border-radius: 6px; background: #2E2725; border: 1.5px solid var(--sc-accent);
  box-shadow: 0 0 14px rgba(231, 111, 42, 0.45); translate: -50% -50%; }
.plughead i { position: absolute; right: -9px; width: 9px; height: 4px; border-radius: 1px; background: var(--sc-accent); }
.plughead i:nth-of-type(1) { top: 4px; } .plughead i:nth-of-type(2) { bottom: 4px; }
@media (max-width: 900px) {
  .plugscene__stage { padding: 80px var(--sc-gutter) 16px; gap: 10px; }
  .plugscene__copy > * { font-size: clamp(1.25rem, 5.6vw, 1.6rem); }
  .plugscene__map { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 26px; align-items: start; }
  .plugscene__label { margin-bottom: 6px; }
  .ais { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .ai { flex-direction: column; gap: 6px; padding: 8px 4px; font-size: 11.5px; }
  .ai .logo { width: 18px; height: 18px; }
  .knows { margin-top: 8px; min-height: 3.6rem; }
  .hub { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 4px 12px; justify-self: stretch; }
  .hub__mark { width: 64px; border-radius: 18px; grid-row: span 2; }
  .hub__socket { display: none; }
  .hub__status { text-align: left; min-height: 0; }
  .srcs { grid-template-columns: repeat(8, 1fr); gap: 4px; }
  .psrc { aspect-ratio: 3 / 4; border-radius: 6px; }
  .psrc__pf { width: 15px; height: 15px; left: 3px; bottom: 3px; border-radius: 4px; } .psrc__pf .logo { width: 10px; height: 10px; }
  .psrc--linkedin .tile__txt { display: none; }
}
@media (prefers-reduced-motion: reduce) { .know, .ai, .psrc, .hub__mark, .hub__mark .logo { transition: none; } }
/* chips sit above the flow lines on a solid ground; on phones the hub sits in the middle of the column */
.know { position: relative; z-index: 1; background: #2A1C14; }
@media (max-width: 900px) { .hub { justify-self: center; } }

/* ================= phone pass (2026-10-13) ================= */
@media (max-width: 900px) {
  /* tap targets: at least 44px tall, text links get padding rather than bigger type */
  .ghost { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .agent__compare { min-height: 44px; }
  .faq summary { padding-top: 16px; padding-bottom: 16px; }
  .card .src a, .voices cite a, .creator__head a, .tension__quote a { display: inline-block; padding: 6px 0; }
  .agent__answer li a { padding: 4px 2px; margin: -4px 4px -4px -2px; }
  /* small type up to 12px or more */
  .mind-pick b { font-size: 12px; }
  .ai { font-size: 12.5px; }
  .reel__likes { font-size: 12px; }
  /* pinned stages leave sooner, so the dark gap between scenes is shorter */
  .hero__copy { bottom: clamp(20px, 4svh, 40px); }

  /* Instagram creators and the quotes: swipe sideways instead of three screens of stacking */
  .creators, .voices ul { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--sc-gutter)); padding: 4px var(--sc-gutter) 14px; scrollbar-width: none; }
  .creators::-webkit-scrollbar, .voices ul::-webkit-scrollbar { display: none; }
  .creator, .voices li { flex: 0 0 86%; scroll-snap-align: center; }
  .reels { padding-top: 56px; }
  .reels__sub { margin-bottom: 18px; font-size: 1rem; }
  .swipe-hint { display: block; }

  /* Works with: compact rows, logo then name then one line */
  .agents { grid-template-columns: 1fr; }
  .agents li { padding: 12px 14px; column-gap: 12px; }
  .agents li > span { font-size: 13.5px; }
  .works__logo { width: 26px; height: 26px; }

  /* sends: less padding */
  .sends li { padding: 14px 16px; }
  .owners { padding-top: 48px; }
  .works, .voices, .faq { padding-top: 40px; }
}
.swipe-hint { display: none; margin: 0 0 10px; font: 500 12.5px/1 var(--sc-font-mono); color: var(--sc-ink-soft); letter-spacing: 0.04em; }
@media (max-width: 900px) {
  .proof__pack li a { display: inline-block; padding: 8px 4px; margin: -8px 0; }
  .owners .stat a { display: inline-block; padding: 10px 0; margin: -10px 0; }
}
@media (max-width: 900px) { .swipe-hint { display: block; } }
.reel__likes { white-space: nowrap; }

/* the turn panel: Plugbook visibly teaching your AI (review video 2:01) */
.teach { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--hair); }
.teach__pb { width: 26px; height: 26px; }
.teach__apps { display: inline-flex; gap: 6px; } .teach__apps .logo { width: 18px; height: 18px; }
.teach__line { position: relative; height: 2px; background: #3A3330; overflow: hidden; border-radius: 2px; }
.teach__line i { position: absolute; inset: 0; background: var(--sc-accent); box-shadow: 0 0 8px var(--sc-accent); transform-origin: left; transform: scaleX(clamp(0, calc(var(--sc-p, 0) * 1.6 - 0.15), 1)); }
.teach__state { grid-column: 1 / -1; font: 500 12.5px/1 var(--sc-font-mono); color: var(--sc-accent); }
.teach__state[data-p="1"] { display: none; }
.turn[style*="--sc-p: 0.6"] .teach__state, .turn[style*="--sc-p: 0.7"] .teach__state, .turn[style*="--sc-p: 0.8"] .teach__state, .turn[style*="--sc-p: 0.9"] .teach__state, .turn[style*="--sc-p: 1"] .teach__state { display: none; }
.turn[style*="--sc-p: 0.6"] .teach__state[data-p="1"], .turn[style*="--sc-p: 0.7"] .teach__state[data-p="1"], .turn[style*="--sc-p: 0.8"] .teach__state[data-p="1"], .turn[style*="--sc-p: 0.9"] .teach__state[data-p="1"], .turn[style*="--sc-p: 1"] .teach__state[data-p="1"] { display: block; }
@media (max-width: 860px) { .teach { margin-bottom: 8px; padding-bottom: 8px; } }

/* After the pinned demo: start the Instagram section close, no dead band (live empty-screen walk). */
.reels { padding-top: clamp(24px, 4vh, 48px); }

/* ================= How it works (2026-10-13) ================= */
.how__stage { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: 84px var(--sc-gutter) 24px; max-width: calc(var(--sc-maxw) + 2 * var(--sc-gutter)); margin: 0 auto; }
.how__copy { display: grid; align-content: center; }
.how__copy > h2 { grid-area: 2 / 1; margin: 0; font: 600 clamp(1.8rem, 3vw, 2.9rem)/1.08 var(--sc-font-display); letter-spacing: -0.025em; }
.how__copy .eyebrow { grid-area: 1 / 1; }
.how__src { grid-area: 3 / 1; margin: 22px 0 0; font: 400 14px/1.5 var(--sc-font-text); color: var(--sc-ink-soft); }
.how__src a { text-decoration: underline; text-decoration-color: rgba(231, 111, 42, 0.7); text-underline-offset: 3px; }
.how__panel { display: grid; gap: 10px; }
.lane { border-radius: 16px; border: 1px solid var(--hair); background: #161315; padding: 12px 14px; opacity: 0.28; transition: opacity 360ms var(--sc-ease-out), border-color 360ms var(--sc-ease-out); }
.lane__head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 14px/1 var(--sc-font-display); }
.lane__head .logo { width: 16px; height: 16px; }
.lane__head span { margin-left: auto; font: 500 12px/1 var(--sc-font-mono); color: var(--sc-ink-soft); }
.lane ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lane code { font: 500 12.5px/1.4 var(--sc-font-mono); color: var(--sc-accent); }
.how__panel[data-step="0"] .lane--said, .how__panel[data-step="1"] .lane--said, .how__panel[data-step="1"] .lane--seen,
.how__panel[data-step="2"] .lane:not(.lane--sent), .how__panel[data-step="3"] .lane { opacity: 1; }
.how__panel[data-step="0"] .lane--said, .how__panel[data-step="1"] .lane--seen, .how__panel[data-step="2"] .lane--heard, .how__panel[data-step="3"] .lane--sent { border-color: rgba(231, 111, 42, 0.75); box-shadow: 0 0 24px rgba(231, 111, 42, 0.12); }
.lane--said li { display: grid; grid-template-columns: 3rem 1fr; gap: 8px; font: 400 13.5px/1.4 var(--sc-font-text); color: #E2DAD2; }
.lane--said li span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.wave { display: flex; align-items: center; gap: 2px; height: 22px; margin: 0 0 8px; }
.wave b { flex: 1; border-radius: 1px; background: var(--sc-accent); opacity: 0.75; height: 30%; }
.wave b:nth-child(3n) { height: 80%; } .wave b:nth-child(5n+1) { height: 55%; } .wave b:nth-child(7n) { height: 100%; } .wave b:nth-child(4n+2) { height: 40%; }
@media (prefers-reduced-motion: no-preference) {
  .how__panel[data-step="0"] .wave b { animation: wv 900ms ease-in-out infinite alternate; animation-delay: calc(var(--d, 0) * 1ms); }
  .wave b:nth-child(2n) { --d: 180; } .wave b:nth-child(3n) { --d: 360; } .wave b:nth-child(5n) { --d: 540; }
  @keyframes wv { to { transform: scaleY(0.35); } }
}
.lane--seen ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lane--seen li { display: grid; gap: 6px; align-content: start; }
.lane--seen img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; display: block; }
.lane--seen li div { display: grid; gap: 2px; font: 400 12px/1.35 var(--sc-font-text); color: #D8D0C8; }
.lane--seen li span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lane--seen em { font-style: normal; color: var(--sc-ink-soft); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.eye { width: 16px; height: 10px; border: 2px solid var(--sc-accent); border-radius: 50% / 60%; position: relative; }
.eye::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; translate: -50% -50%; border-radius: 50%; background: var(--sc-accent); }
.bubble { width: 15px; height: 12px; border: 2px solid var(--sc-accent); border-radius: 4px; position: relative; }
.lane--heard ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lane--heard li { display: grid; gap: 6px; align-content: space-between; padding: 8px 10px; border-radius: 10px; background: #1E1A1C; font: 400 12.5px/1.4 var(--sc-font-text); }
.lane--heard q { quotes: "\201C" "\201D"; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lane--heard span { font: 500 11.5px/1 var(--sc-font-mono); color: var(--sc-ink-soft); }
.lane--sent { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.bundle { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #F6F1EA; color: #241F1B; }
.bundle__pb { width: 24px; height: 24px; }
.bundle p { margin: 0; display: grid; grid-template-columns: auto auto; column-gap: 6px; row-gap: 1px; font: 400 11.5px/1.3 var(--sc-font-text); }
.bundle b { font: 700 12.5px/1.3 var(--sc-font-display); color: #A5501B; text-align: right; }
.sendline { height: 2px; background: #3A3330; position: relative; overflow: hidden; border-radius: 2px; }
.sendline::after { content: ""; position: absolute; inset: 0; background: var(--sc-accent); box-shadow: 0 0 8px var(--sc-accent); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--sc-ease-out); }
.how__panel[data-step="3"] .sendline::after { transform: scaleX(1); }
.bundle__to { display: grid; justify-items: center; gap: 4px; font: 600 12px/1 var(--sc-font-display); }
.bundle__to .logo { width: 20px; height: 20px; margin: 0 2px; }
.bundle__to em { font-style: normal; }
@media (max-width: 900px) {
  .how__stage { grid-template-columns: 1fr; align-content: start; gap: 12px; padding-top: 76px; }
  .how__copy > h2 { font-size: clamp(1.3rem, 5.8vw, 1.7rem); min-height: 2.3em; }
  .how__src { margin-top: 6px; font-size: 12px; }
  .how .eyebrow { display: none; }
  .lane { padding: 10px 12px; }
  /* phones: only the lane being explained is open; the others shrink to their heading */
  .how__panel .lane > :not(.lane__head) { display: none; }
  .how__panel[data-step="0"] .lane--said > *, .how__panel[data-step="1"] .lane--seen > *, .how__panel[data-step="2"] .lane--heard > * { display: revert; }
  .how__panel[data-step="0"] .lane--said > .wave { display: flex; }
  .how__panel[data-step="1"] .lane--seen > ul, .how__panel[data-step="2"] .lane--heard > ul { display: grid; }
  .how__panel[data-step="3"] .lane--sent > * { display: revert; }
  .how__panel[data-step="3"] .lane--sent > .bundle { display: flex; }
  .how__panel[data-step="3"] .lane--sent > .bundle__to { display: grid; }
  .how__panel .lane--sent { display: none; } .how__panel[data-step="3"] .lane--sent { display: grid; }
  .lane__head { margin: 0; } .how__panel .lane:has(> ul:not([style*=none])) .lane__head { margin-bottom: 8px; }
  .lane--said li span { -webkit-line-clamp: 2; }
  .lane--heard ul { grid-template-columns: 1fr; }
  .lane--heard q { -webkit-line-clamp: 2; }
}
/* fit the four lanes in one short laptop screen (721px tall) */
@media (min-width: 901px) {
  .how__stage { padding-top: 76px; padding-bottom: 12px; }
  .how__panel { gap: 8px; }
  .lane { padding: 10px 12px; }
  .lane__head { margin-bottom: 6px; }
  .wave { height: 16px; margin-bottom: 6px; }
  .lane--seen img { aspect-ratio: 16 / 7; object-position: 50% 30%; }
  .lane--heard q { -webkit-line-clamp: 2; }
  .lane--heard li { padding: 6px 9px; gap: 4px; }
}
@media (min-width: 901px) and (max-height: 760px) { .lane--seen li div span { -webkit-line-clamp: 1; } }
@media (max-width: 900px) {
  .how__panel .lane > .lane__head { display: flex !important; }
  .how__panel[data-step="0"] .lane--said > .lane__head, .how__panel[data-step="1"] .lane--seen > .lane__head, .how__panel[data-step="2"] .lane--heard > .lane__head { margin-bottom: 8px; }
  .how__stage { align-content: center; }
}
@media (max-width: 900px) and (max-height: 690px) {
  .agent__answer li { font-size: 12.5px; line-height: 1.35; }
  .agent__answer .lead { font-size: 13.5px; }
  .agent__answer, .agent__answer ol { gap: 5px; }
  .agent__answer li a { padding: 2px 2px; margin: -2px 4px -2px -2px; }
}
@media (max-width: 900px) and (max-height: 690px) { .peak__sub { display: none; } }
@media (max-width: 900px) and (max-height: 690px) { .peak__stage { padding-top: 64px; } .peak h2 { font-size: 1.45rem; margin-bottom: 6px; } .minds { margin-top: 2px; } }
.join__fine { margin: 0; font: 400 12.5px/1.45 var(--sc-font-text); color: var(--sc-ink-soft); }

/* open sign-up (2026-10-13): Google sign-in replaces the waitlist form */
.bar__right { display: inline-flex; align-items: center; gap: 14px; }
.bar__in { font: 500 15px/1 var(--sc-font-display); text-decoration: none; color: var(--sc-ink); padding: 12px 4px; }
.join__go { justify-self: start; min-height: 52px; }
.join__alt { justify-self: start; font: 500 14.5px/1 var(--sc-font-text); color: var(--sc-ink-soft); text-decoration: underline; text-decoration-color: rgba(231,111,42,0.7); text-underline-offset: 4px; padding: 10px 0; }
@media (max-width: 560px) { .join__go { justify-self: stretch; } .bar__in { display: none; } }