.signal-home { background: var(--sg-room); color: var(--sg-ink); font-family: 'Exo 2', system-ui, sans-serif; }
html:not([data-skin="vintage"]) .signal-home header.radio-set { position: fixed; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
html:not([data-skin="vintage"]) .signal-home.is-scrolled header.radio-set { background: rgba(12, 9, 7, 0.78); border-bottom-color: var(--sg-line); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); }
/* Up to 820px the header has no blur (signal.css), so once scrolled it is near
   solid: the hero copy never shows through behind the wordmark. */
@media (max-width: 820px) {
  html:not([data-skin="vintage"]) .signal-home.is-scrolled header.radio-set { background: var(--sg-room); }
}
/* Without script nothing marks the page scrolled, so the header is solid from the start. */
html:not([data-skin="vintage"]):not(.js) .signal-home header.radio-set { background: var(--sg-room); border-bottom-color: var(--sg-line); }
.signal-home .sg-main { overflow-x: clip; }
.sg-main h1, .sg-main h2, .sg-main h3, .sg-main p { margin: 0; }
.sg-main h1, .sg-main h2, .sg-main h3, .sg-big { text-wrap: balance; }
.sg-main a { color: inherit; }

/* ---------- Type ---------- */
.sg-display {
  font: 500 clamp(56px, 6.2vw, 96px)/0.9 'Exo 2', system-ui, sans-serif;
  letter-spacing: -0.045em;
  text-wrap: balance;
  color: var(--sg-ink);
}
.sg-h2 {
  font: 500 clamp(40px, 5.6vw, 84px)/0.96 'Exo 2', system-ui, sans-serif;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.sg-k {
  display: inline-block;
  color: var(--sg-ember);
  font: 500 12px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sg-lead {
  max-width: 34ch;
  color: var(--sg-mute);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  text-wrap: pretty;
}
.sg-lead-sm { max-width: 38ch; color: var(--sg-mute); font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.sg-note { color: var(--sg-faint); font-size: 14px; line-height: 1.4; }
.sg-fine { max-width: 72ch; color: var(--sg-faint); font-size: 14px; line-height: 1.6; }
.sg-fine a, .sg-link { color: var(--sg-ink); text-decoration: none; }
.sg-link { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font-size: 16px; font-weight: 500; }
.sg-link span { transition: transform 240ms var(--sg-out); }
.sg-link:hover span { transform: translateX(4px); }
.sg-fine a { text-decoration: underline; text-decoration-color: var(--sg-line-2); text-underline-offset: 3px; }

/* ---------- Buttons ---------- */
.sg-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.sg-btn {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 12px;
  font: 600 16px/1 'Exo 2', system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
}
html:not([data-skin="vintage"]) .sg-actions .button.primary { display: inline-flex; gap: 10px; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 12px; font: 600 16px/1 'Exo 2', system-ui, sans-serif; text-decoration: none; white-space: nowrap; }
.sg-actions .button.primary::after { display: none; }
.sg-actions .button.primary span { transition: transform 240ms var(--sg-out); }
.sg-actions .button.primary:hover span { transform: translateX(3px); }
.sg-btn span { transition: transform 240ms var(--sg-out); }
.sg-btn:hover span { transform: translateX(3px); }
.sg-btn-ghost {
  color: var(--sg-ink);
  box-shadow: inset 0 0 0 1px var(--sg-line-2);
  background: rgba(12, 9, 7, 0.72);
  transition: background-color 160ms var(--sg-out), box-shadow 160ms var(--sg-out);
}
.sg-btn-ghost:hover { background: rgba(248, 238, 223, 0.07); box-shadow: inset 0 0 0 1px rgba(248, 238, 223, 0.28); }

/* ---------- Hero ---------- */
.sg-hero {
  position: relative;
  padding: 88px var(--sg-gutter) 0;
  isolation: isolate;
}
.sg-field {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  display: block;
  width: 100%;
  height: min(118svh, 1180px);
  opacity: 0.5;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(42, 22, 6, 0.9), transparent 70%),
    var(--sg-room);
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}
.sg-hero-copy {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.sg-hero-copy::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(12, 9, 7, 0.55), rgba(12, 9, 7, 0.3) 60%, transparent);
  pointer-events: none;
}
.sg-hero .sg-display { margin-bottom: 4px; }
.sg-hero .sg-lead { margin-inline: auto; max-width: 46ch; }
.sg-hero .sg-actions { margin-top: 8px; }
.sg-hero .sg-note, .sg-hero .sg-lead { text-shadow: 0 1px 2px rgba(12, 9, 7, 0.9), 0 0 24px rgba(12, 9, 7, 0.8); }
.sg-hero .sg-line { display: block; }
.sg-line { display: inline-block; overflow: hidden; padding: 0.06em 0 0.24em; margin: -0.06em 0 -0.24em; vertical-align: top; }
.sg-line > span { display: inline-block; }
/* Essential copy is visible at the first paint. Motion belongs to the demo. */
.sg-enter { opacity: 1; }
@keyframes sg-rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes sg-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sg-stage-in { from { opacity: 0; translate: 0 80px; } to { opacity: 1; translate: 0 0; } }
@keyframes lc-live { 70% { box-shadow: 0 0 0 6px rgba(131, 200, 165, 0); } 100% { box-shadow: 0 0 0 0 rgba(131, 200, 165, 0); } }

/* ---------- Frame grade (the tape's first frame) ---------- */
.sg-frame:nth-child(1) > img:first-child { filter: brightness(0.86) saturate(0.9) sepia(0.12) contrast(1.03); }
.sg-vig { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: radial-gradient(125% 95% at 62% 48%, transparent 52%, rgba(14, 10, 7, 0.5) 100%), linear-gradient(rgba(224, 106, 50, 0.05), rgba(224, 106, 50, 0.05)); box-shadow: inset 0 0 0 1px rgba(248, 238, 223, 0.07), inset 0 0 36px rgba(14, 10, 7, 0.45); }

/* ---------- Sections ---------- */
.sg-section { max-width: calc(var(--sg-max) + 2 * var(--sg-gutter)); margin: 0 auto; padding: var(--sg-section) var(--sg-gutter) 0; }
.sg-head { display: grid; gap: 20px; margin-bottom: clamp(48px, 6vw, 80px); }
.sg-head-row { grid-template-columns: 1fr auto; align-items: end; }

/* ---------- Tape (pinned chapters) ---------- */
.sg-story { position: relative; height: 340svh; margin-top: 0; }
.sg-story-pin {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  max-width: calc(var(--sg-max) + 2 * var(--sg-gutter));
  height: 100svh;
  margin: 0 auto;
  padding: calc(64px + 12svh) var(--sg-gutter) 0;
}
.sg-story-words { position: relative; height: min(56svh, 440px); }
.sg-story-index { display: flex; gap: 8px; margin: 0 0 40px; padding: 0; list-style: none; }
.sg-story-index li { position: relative; width: 48px; height: 2px; overflow: hidden; border-radius: 1px; background: var(--sg-line-2); }
.sg-story-index li::after { content: ""; position: absolute; inset: 0; background: var(--sg-ember); transform: scaleX(var(--fill, 0)); transform-origin: 0 50%; }
.sg-chapter { position: absolute; inset: 42px 0 auto; display: grid; gap: 24px; }
.sg-chapter .sg-big { font: 500 clamp(48px, 6.4vw, 100px)/0.94 'Exo 2', system-ui, sans-serif; letter-spacing: -0.045em; text-wrap: balance; }
.sg-chapter p:not(.sg-big) { max-width: 30ch; color: var(--sg-mute); font-size: 19px; line-height: 1.5; }
.sg-story-frames { position: relative; aspect-ratio: 16 / 10; }
.sg-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #0E0A07;
  box-shadow: 0 0 0 1px rgba(248, 238, 223, 0.12), 0 40px 100px -30px rgba(0, 0, 0, 0.9);
}
.sg-frame > img:first-child { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1.6)); transform-origin: var(--ox) var(--oy); }
/* Each frame is cropped to the one region that tells its chapter. */
.sg-frame:nth-child(1) { --ox: 95%; --oy: 50%; }
.sg-frame:nth-child(2) { --ox: 28%; --oy: 16%; }
.sg-frame:nth-child(3) { --ox: 28%; --oy: 30%; }
.sg-frame-card { position: absolute; left: 6%; right: 6%; bottom: 7%; width: 88%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(224, 106, 50, 0.6), 0 24px 60px -10px rgba(0, 0, 0, 0.8), 0 0 60px -10px rgba(224, 106, 50, 0.5); }
.sg-pin { position: absolute; z-index: 2; left: calc(var(--ox) + (var(--x) - var(--ox)) * var(--z, 1.6)); top: calc(var(--oy) + (var(--y) - var(--oy)) * var(--z, 1.6)); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #EE7A62; box-shadow: 0 0 0 0 rgba(238, 122, 98, 0.6); animation: sg-pin 1.8s ease-out infinite; }
@keyframes sg-pin { 0% { box-shadow: 0 0 0 0 rgba(238, 122, 98, 0.6); } 100% { box-shadow: 0 0 0 28px rgba(238, 122, 98, 0); } }

/* Scroll drives the tape directly: home.mjs writes --o (opacity), --ty (drift)
   and --z (crop zoom) every frame, so the story scrubs with the wheel. */
html.sg-motion .sg-chapter { opacity: var(--o, 0); transform: translateY(var(--ty, 0px)); pointer-events: none; }
html.sg-motion .sg-chapter.is-on { pointer-events: auto; }
html.sg-motion .sg-frame { opacity: var(--o, 0); }
html.sg-motion .sg-frame .sg-frame-card { opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--sg-out) 500ms, transform 900ms var(--sg-expo) 500ms; }
html.sg-motion .sg-frame.is-on .sg-frame-card { opacity: 1; transform: none; }

/* Without motion (reduced motion or no script) the tape is three plain rows. */
html:not(.sg-motion) .sg-story { height: auto; }
html:not(.sg-motion) .sg-story-pin { position: static; height: auto; row-gap: var(--sg-section); padding-top: 0; }
@media (min-width: 901px) { html:not(.sg-motion) .sg-story-pin { padding-top: var(--sg-section); align-items: center; } }
html:not(.sg-motion) .sg-story-words, html:not(.sg-motion) .sg-story-frames { display: contents; }
html:not(.sg-motion) .sg-story-index { display: none; }
html:not(.sg-motion) .sg-chapter { position: static; grid-column: 1; }
html:not(.sg-motion) .sg-frame { position: relative; inset: auto; grid-column: 2; aspect-ratio: 16 / 10; }
html:not(.sg-motion) .sg-chapter:nth-of-type(1), html:not(.sg-motion) .sg-frame:nth-child(1) { grid-row: 1; }
html:not(.sg-motion) .sg-chapter:nth-of-type(2), html:not(.sg-motion) .sg-frame:nth-child(2) { grid-row: 2; }
html:not(.sg-motion) .sg-chapter:nth-of-type(3), html:not(.sg-motion) .sg-frame:nth-child(3) { grid-row: 3; }
.sg-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 24px 24px 28px;
  border-radius: 16px;
  background: var(--sg-surface);
  box-shadow: inset 0 0 0 1px var(--sg-line);
  overflow: hidden;
  isolation: isolate;
}
.sg-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(224, 106, 50, 0.14), transparent 65%);
  opacity: 0;
  transition: opacity 400ms var(--sg-out);
}
.sg-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 178, 92, 0.55), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 400ms var(--sg-out);
  pointer-events: none;
}
.sg-tile h3 { margin-top: 18px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.sg-tile p { color: var(--sg-mute); font-size: 15px; line-height: 1.5; }
/* ---------- Commands ---------- */
.sg-cmd { display: flex; gap: 4px; align-items: center; margin-top: 8px; padding: 6px 6px 6px 16px; border-radius: 12px; background: var(--sg-surface); box-shadow: inset 0 0 0 1px var(--sg-line-2); }
.sg-cmd code { color: var(--sg-ink); font: 400 14px 'JetBrains Mono', monospace; }
.sg-cmd button { min-height: 44px; margin-left: 12px; padding: 0 14px; border: 0; border-radius: 8px; background: rgba(248, 238, 223, 0.08); color: var(--sg-ink); font: 500 13px 'Exo 2', sans-serif; cursor: pointer; transition: background-color 160ms var(--sg-out); }
.sg-cmd button:hover { background: rgba(248, 238, 223, 0.14); }
.sg-caret { display: inline-block; width: 8px; height: 17px; margin-left: 2px; vertical-align: -3px; background: var(--sg-ember); animation: sg-caret 1s steps(1) infinite; }
@keyframes sg-caret { 50% { opacity: 0; } }

/* ---------- Install ---------- */
.sg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sg-line-2); }
.sg-steps li { display: grid; align-content: start; gap: 14px; padding: 32px 32px 40px 0; }
.sg-steps li + li { padding-left: 32px; border-left: 1px solid var(--sg-line); }
.sg-steps h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.sg-steps p { max-width: 30ch; color: var(--sg-mute); font-size: 16px; line-height: 1.5; }
.sg-sdks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 48px 0 28px; border-radius: 16px; background: var(--sg-line); box-shadow: 0 0 0 1px var(--sg-line); overflow: hidden; }
.sg-sdks > div { display: grid; align-content: start; gap: 12px; padding: 28px 24px 32px; background: var(--sg-room); transition: background-color 300ms var(--sg-out); }
.sg-sdks > div:hover { background: var(--sg-surface); }
.sg-sdks h3 { font-size: 20px; font-weight: 600; }
.sg-sdks small { margin-left: 6px; padding: 2px 6px; border-radius: 5px; background: rgba(235, 201, 138, 0.12); color: #EBC98A; font: 500 11px 'JetBrains Mono', monospace; vertical-align: 3px; }
.sg-sdks code { color: var(--sg-glow); font: 400 13px 'JetBrains Mono', monospace; }
.sg-sdks p { color: var(--sg-mute); font-size: 15px; line-height: 1.5; }

.sg-fine-links { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 8px; }
.sg-fine-links .sg-link { font-size: 15px; color: var(--sg-mute); }
.sg-fine-links .sg-link:hover { color: var(--sg-ink); }

/* ---------- Home as a path (2026-10-18) ----------
   The first screen carries the message and one real capture, like a product
   shot. Below it, one idea at a time: the tape, then the visitor's turn. */
.sg-hero-shot {
  position: relative;
  max-width: var(--sg-max);
  margin: clamp(40px, 6vw, 72px) auto 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--sg-room);
  box-shadow:
    0 0 0 1px var(--sg-line),
    0 50px 120px -30px rgba(0, 0, 0, 0.9),
    0 30px 80px -40px rgba(224, 106, 50, 0.45);
  animation: none;
}
.sg-hero-shot img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 0; }
.sg-hero-shot figcaption { padding: 12px 20px; border-top: 1px solid var(--sg-line); color: var(--sg-faint); font-size: 13px; line-height: 1.4; }

.sg-yours { display: grid; gap: clamp(32px, 4vw, 56px); justify-items: center; padding-top: clamp(64px, 7vw, 104px); text-align: center; }
/* Phones: the tape ends in a card, so the visitor's turn starts a clear screen later. */
@media (max-width: 900px) { .sg-yours { padding-top: calc(var(--sg-section) * 1.6); } }
.sg-yours-head { display: grid; gap: 16px; justify-items: center; }
.sg-yours-head .sg-big { font: 500 clamp(48px, 6.4vw, 100px)/0.94 'Exo 2', system-ui, sans-serif; letter-spacing: -0.045em; }
.sg-yours-head .sg-lead-sm { max-width: 44ch; margin-inline: auto; }
.sg-yours-cmd { display: grid; gap: 8px; justify-items: center; width: min(560px, 100%); }
.sg-cmd-lg { align-self: stretch; padding: 10px 10px 10px 24px; border-radius: 16px; }
.sg-cmd-lg code { flex: 1; font-size: clamp(16px, 2vw, 20px); text-align: left; }
.sg-yours .sg-steps { width: 100%; text-align: left; }
.sg-yours-agent { display: grid; gap: 12px; justify-items: center; max-width: 640px; }
.sg-yours-agent > p:first-child { color: var(--sg-mute); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
/* The MCP address is the second step, so it reads as a line, not a second command box. */
.sg-cmd-quiet { margin-top: 0; padding: 0; background: none; box-shadow: none; }
.sg-cmd-quiet code { color: var(--sg-mute); }
.sg-cmd-quiet button { min-height: 44px; margin-left: 8px; background: none; color: var(--sg-ink); text-decoration: underline; text-decoration-color: var(--sg-line-2); text-underline-offset: 3px; }
.sg-cmd-quiet button:hover { background: none; text-decoration-color: var(--sg-ink); }
.sg-yours-agent .sg-fine-links { justify-content: center; }
.sg-limits { width: 100%; text-align: left; border-top: 1px solid var(--sg-line); border-bottom: 1px solid var(--sg-line); }
.sg-limits > summary { display: flex; gap: 16px; align-items: center; justify-content: space-between; min-height: 52px; color: var(--sg-mute); font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; }
.sg-limits > summary::-webkit-details-marker { display: none; }
.sg-limits > summary::after { content: "+"; color: var(--sg-faint); font: 300 24px/1 'Exo 2', sans-serif; transition: rotate 300ms var(--sg-out); }
.sg-limits[open] > summary::after { rotate: 45deg; }
.sg-limits > summary:hover { color: var(--sg-ink); }
.sg-limits .sg-sdks { margin: 8px 0 20px; }
.sg-limits .sg-fine { margin: 0 0 12px; }
.sg-limits .sg-fine-links { margin: 0 0 16px; }

/* ---------- Film ---------- */
.sg-film-len { color: var(--sg-faint); font: 400 13px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.04em; }
.sg-film-frame { position: relative; }
.sg-film-cover {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(12, 9, 7, 0.55), rgba(12, 9, 7, 0.82));
  cursor: pointer;
  transition: opacity 400ms var(--sg-out);
}
.sg-film-cover span {
  display: grid;
  place-items: center;
  width: clamp(72px, 8vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sg-ember);
  box-shadow: 0 0 0 10px rgba(224, 106, 50, 0.18), 0 20px 60px -10px rgba(224, 106, 50, 0.7);
  transition: transform 300ms var(--sg-expo), box-shadow 300ms var(--sg-out);
}
.sg-film-cover span::before { content: ""; width: 0; height: 0; margin-left: 6px; border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent var(--sg-ember-ink); }
.sg-film-cover:hover span { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(224, 106, 50, 0.22), 0 20px 60px -10px rgba(224, 106, 50, 0.8); }
.sg-film-cover[hidden] { display: none; }
.sg-film-frame { margin: 0; }
.sg-film-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #000; box-shadow: 0 0 0 1px var(--sg-line-2), 0 50px 120px -40px rgba(0, 0, 0, 0.9); }
.sg-film-frame figcaption { display: flex; flex-wrap: wrap; gap: 0 24px; align-items: center; margin-top: 12px; color: var(--sg-faint); font-size: 13px; line-height: 1.5; }
.sg-film-frame figcaption .sg-film-note { flex: 1 1 320px; }
.sg-film-frame figcaption > a, .sg-credits summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--sg-mute); text-decoration: none; cursor: pointer; }
.sg-film-frame figcaption > a:hover, .sg-credits summary:hover { color: var(--sg-ink); }
.sg-credits summary { list-style: none; }
.sg-credits summary::-webkit-details-marker { display: none; }
.sg-credits summary::after { content: "+"; margin-left: 6px; color: var(--sg-faint); }
.sg-credits[open] summary::after { content: "−"; }
.sg-credits { flex-basis: 100%; order: 9; }
.sg-credits:not([open]) { flex-basis: auto; order: 0; }
.sg-credits p { max-width: 72ch; padding-bottom: 8px; }
.sg-credits a { color: var(--sg-mute); }

/* ---------- Pricing ---------- */
.sg-price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.sg-price-cell { display: grid; gap: 16px; align-content: start; justify-items: start; padding: 36px 36px 36px; border-radius: 16px; background: var(--sg-surface); box-shadow: inset 0 0 0 1px var(--sg-line); text-decoration: none; transition: box-shadow 300ms var(--sg-out), background-color 300ms var(--sg-out); }
.sg-price-cell:hover { background: var(--sg-surface-2); }
.sg-price-cell b { font: 500 clamp(56px, 6vw, 88px)/0.9 'Exo 2', sans-serif; letter-spacing: -0.05em; }
.sg-price-cell .sg-btn { margin-top: 12px; min-height: 48px; }
.sg-price-cell.is-pro .sg-btn { box-shadow: inset 0 0 0 1px rgba(224, 106, 50, 0.6); }
.sg-price-cell small { margin-left: 6px; color: var(--sg-faint); font-size: 20px; letter-spacing: 0; }
.sg-price-cell p { color: var(--sg-mute); font-size: 17px; line-height: 1.5; }

/* ---------- FAQ ---------- */
.sg-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.sg-faq-list { border-top: 1px solid var(--sg-line-2); }
.sg-faq details { border-bottom: 1px solid var(--sg-line-2); }
.sg-faq summary { display: flex; justify-content: space-between; gap: 24px; align-items: center; min-height: 72px; padding: 20px 0; font-size: 19px; font-weight: 500; cursor: pointer; list-style: none; }
.sg-faq summary::-webkit-details-marker { display: none; }
.sg-faq summary::after { content: "+"; flex: none; color: var(--sg-faint); font: 300 26px/1 'Exo 2', sans-serif; transition: transform 300ms var(--sg-out); }
.sg-faq details[open] summary::after { transform: rotate(45deg); }
.sg-faq details p { max-width: 60ch; padding: 0 0 24px; color: var(--sg-mute); font-size: 16px; line-height: 1.6; }
.sg-faq details a { color: var(--sg-ink); }

/* ---------- Close ---------- */
.sg-close { position: relative; display: grid; justify-items: center; gap: 32px; margin-top: 0; padding: clamp(96px, 12vw, 176px) var(--sg-gutter) clamp(112px, 14vw, 184px); text-align: center; isolation: isolate; }
.sg-field-close { inset: 0; height: 100%; -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 35%, #000 70%, transparent); }
.sg-display-close { font-size: clamp(52px, 8vw, 128px); }

/* ---------- Scroll reveals (only once home.mjs runs) ---------- */
html.sg-motion .sg-rv { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--sg-out), transform 700ms var(--sg-expo), scale 140ms var(--sg-out); transition-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms), 0ms; }
html.sg-motion .sg-rv.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .sg-sdks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sg-story { height: auto; margin-top: 0; }
  .sg-story-pin { position: static; display: flex; flex-direction: column; gap: 0; height: auto; padding: 0 var(--sg-gutter); }
  .sg-story-words, .sg-story-frames { display: contents; }
  .sg-story-index { display: none; }
  .sg-chapter { position: static; gap: 16px; margin-top: var(--sg-section); }
  .sg-chapter:nth-of-type(1) { order: 1; } .sg-frame:nth-child(1) { order: 2; }
  .sg-chapter:nth-of-type(2) { order: 3; } .sg-frame:nth-child(2) { order: 4; }
  .sg-chapter:nth-of-type(3) { order: 5; } .sg-frame:nth-child(3) { order: 6; }
  .sg-frame { position: relative; inset: auto; aspect-ratio: 16 / 10; margin-top: 32px; }
  html:not(.sg-motion) .sg-story-pin { display: flex; }
  html.sg-motion .sg-chapter, html.sg-motion .sg-frame { opacity: 1; transform: none; filter: none; clip-path: none; }
  html.sg-motion .sg-frame .sg-frame-card { opacity: 1; transform: none; }
  .sg-faq { grid-template-columns: 1fr; }
  .sg-faq { gap: 28px; }
  .sg-steps { grid-template-columns: 1fr; }
  .sg-steps li, .sg-steps li + li { padding: 28px 0 32px; border-left: 0; border-bottom: 1px solid var(--sg-line); }
}
@media (max-width: 640px) {
  .sg-hero-shot { margin-top: 36px; border-radius: 14px; }
  /* The first screen holds one picture; the tape starts below the fold. */
  .sg-story { padding-top: 160px; }
  /* Tape frames zoom less, so each crop keeps its labels. */
  .sg-frame { --z: 1.2; }
  .sg-cmd code { min-width: 0; font-size: 12.5px; }
  .sg-cmd-lg { padding-left: 16px; }
  .sg-cmd-lg code { font-size: 15px; }
  .sg-hero { padding-top: calc(64px + 72px); }
  .sg-hero-copy { gap: 22px; }
  .sg-display { font-size: clamp(52px, 15vw, 72px); letter-spacing: -0.05em; }
  .sg-lead { font-size: 18px; }
  .sg-actions { flex-direction: column; align-self: stretch; width: 100%; }
  .sg-actions .sg-btn, .sg-actions .button.primary { width: 100%; }
  .sg-display-close { font-size: clamp(40px, 11.5vw, 52px); }
  .sg-head-row { grid-template-columns: 1fr; }
  .sg-tile { scroll-snap-align: start; }
  .sg-tile { padding: 20px 20px 24px; }
  .sg-sdks { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 32px 0 24px; border-radius: 14px; }
  .sg-sdks > div { gap: 8px; padding: 18px 16px 20px; }
  .sg-sdks h3 { font-size: 17px; }
  .sg-sdks code { font-size: 11.5px; }
  .sg-sdks p { display: none; }
  .sg-film-frame figcaption .sg-film-note { flex-basis: 100%; }
  .sg-price-row { grid-template-columns: 1fr; }
  .sg-price-cell { padding: 28px 24px 32px; }
  .sg-cmd { align-self: stretch; }
  .sg-cmd code { font-size: 12.5px; }
  .sg-faq summary { font-size: 17px; }
}

/* ---------- Reduced motion: final states, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
  .sg-line > span, .sg-enter { animation: none; }
  .sg-pin, .sg-caret, .sg-hero-shot { animation: none; }
  html.sg-motion .sg-rv, html.sg-motion .sg-chapter, html.sg-motion .sg-frame { transition: none; }
}

/* ======================================================================
   Product shine (2026-10-15). Every product frame (.sg-shine) carries an
   ember rim light along its top edge and, once it enters, one light sweep.
   Focus rings pulse on the part of the product the copy is about. Only
   transform and opacity move; reduced motion shows the rings steady.
   ====================================================================== */
.sg-shine, .ag-same .product-shot { isolation: isolate; }
.sg-shine::before, .ag-same .product-shot::before,
.sg-shine::after, .ag-same .product-shot::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; }
.sg-shine::before, .ag-same .product-shot::before {
  padding: 1px;
  background: linear-gradient(180deg, rgba(255, 178, 92, 0.5), rgba(224, 106, 50, 0.14) 22%, rgba(248, 238, 223, 0.04) 60%, rgba(248, 238, 223, 0.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.sg-shine::after, .ag-same .product-shot::after {
  background: linear-gradient(105deg, transparent 38%, rgba(255, 226, 190, 0.13) 47%, rgba(255, 226, 190, 0.04) 53%, transparent 60%);
  transform: translateX(-130%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .sg-shine.is-swept::after, .ag-same .product-shot.is-swept::after { opacity: 1; transform: translateX(130%); transition: transform 1700ms var(--sg-inout) 250ms, opacity 200ms linear 250ms; }
}

/* Focus pulse (the agents page rings its evidence with it). */
@keyframes sg-focus { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
.sg-more > summary { display: none; }
.sg-narrow-only { display: none; }
@media (max-width: 640px) { .sg-narrow-only { display: inline; } }

/* Presses: a quick .98 settle, no hover needed. */
.sg-btn-ghost { transition: background-color 160ms var(--sg-out), box-shadow 160ms var(--sg-out), scale 140ms var(--sg-out); }
.sg-price-cell { transition: box-shadow 300ms var(--sg-out), background-color 300ms var(--sg-out), scale 140ms var(--sg-out); }
.sg-cmd button { transition: background-color 160ms var(--sg-out), scale 140ms var(--sg-out); }
@media (prefers-reduced-motion: no-preference) {
  .sg-btn:active, .sg-cmd button:active { scale: 0.98; }
  .sg-tile:active, .sg-price-cell:active, .sg-sdks > div:active { scale: 0.985; }
  .sg-faq summary:active, .sg-more > summary:active { color: var(--sg-glow); }
}

@media (max-width: 900px) {
  /* Tape: three full-width cards, picture over words. */
  .sg-story-pin { align-items: stretch; }
  .sg-chapter:nth-of-type(1) { order: 2; } .sg-frame:nth-child(1) { order: 1; }
  .sg-chapter:nth-of-type(2) { order: 4; } .sg-frame:nth-child(2) { order: 3; }
  .sg-chapter:nth-of-type(3) { order: 6; } .sg-frame:nth-child(3) { order: 5; }
  .sg-frame { margin-top: 20px; border-radius: 20px 20px 0 0; box-shadow: 0 0 0 1px rgba(248, 238, 223, 0.1), 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
  .sg-frame:nth-child(1) { margin-top: var(--sg-section); }
  .sg-chapter { gap: 10px; margin-top: 0; padding: 24px 24px 28px; border-radius: 0 0 20px 20px; background: linear-gradient(180deg, var(--sg-surface-2), var(--sg-surface)); box-shadow: 0 0 0 1px rgba(248, 238, 223, 0.1); }
  .sg-chapter .sg-big { font-size: clamp(34px, 6vw, 48px); line-height: 1; }
  .sg-chapter p:not(.sg-big) { font-size: 17px; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.sg-motion .sg-frame { opacity: 0; transform: translateY(32px) scale(0.96); transition: opacity 700ms var(--sg-out), transform 1100ms var(--sg-expo); }
  html.sg-motion .sg-frame > img:first-child { scale: 1.14; transition: scale 1800ms var(--sg-expo) 100ms; }
  html.sg-motion .sg-chapter { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--sg-out) 120ms, transform 1000ms var(--sg-expo) 120ms; }
  html.sg-motion .sg-frame.is-seen, html.sg-motion .sg-chapter.is-seen { opacity: 1; transform: none; }
  html.sg-motion .sg-frame.is-seen > img:first-child { scale: 1; }
  html.sg-motion .sg-frame .sg-frame-card { opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--sg-out) 700ms, transform 900ms var(--sg-expo) 700ms; }
  html.sg-motion .sg-frame.is-seen .sg-frame-card { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .sg-wide-only { display: none; }

  /* Hero: one statement, the console entering the first screen. */
  .sg-hero { padding-top: calc(64px + 24px); }
  .sg-hero-copy { gap: 12px; }
  .sg-hero .sg-display { margin-bottom: 0; }
  .sg-hero .sg-lead { max-width: 36ch; font-size: 17px; line-height: 1.45; }
  .sg-hero .sg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
  .sg-hero .sg-actions .sg-btn, html:not([data-skin="vintage"]) .sg-hero .sg-actions .button.primary { width: auto; padding: 0 12px; }
  .sg-hero .sg-note { margin-top: -4px; font-size: 13px; }
  .sg-head { gap: 16px; margin-bottom: 32px; }

  /* Tape cards on phones: a tall crop of the one region each chapter is about. */
  html .sg-story .sg-frame { aspect-ratio: 4 / 5; }
  .sg-frame > img:first-child { object-position: var(--op); transform: scale(var(--zm)); transform-origin: var(--mx-o) var(--my-o); }
  .sg-frame:nth-child(1) { --op: 100% 50%; --zm: 1.2; --mx-o: 100%; --my-o: 40%; }
  .sg-frame:nth-child(2) { --op: 9% 50%; --zm: 1.5; --mx-o: 50%; --my-o: 0%; }
  .sg-frame:nth-child(3) { --op: 16% 50%; --zm: 1.4; --mx-o: 50%; --my-o: 0%; }
  .sg-frame .sg-pin { left: 10.8%; top: 66%; }
  .sg-frame-card { left: 5%; right: 5%; bottom: 6%; width: 90%; }

  /* Fine print behind one disclosure. */
  .sg-more { margin-top: 24px; border-top: 1px solid var(--sg-line); border-bottom: 1px solid var(--sg-line); }
  .sg-more > summary { display: flex; gap: 16px; align-items: center; justify-content: space-between; min-height: 52px; color: var(--sg-mute); font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
  .sg-more > summary::-webkit-details-marker { display: none; }
  .sg-more > summary::after { content: "+"; color: var(--sg-faint); font: 300 24px/1 'Exo 2', sans-serif; transition: rotate 300ms var(--sg-out); }
  .sg-more[open] > summary::after { rotate: 45deg; }
  .sg-more .sg-fine { margin: 0 0 16px; }
  .sg-more .sg-fine-links { margin: 0 0 8px; }

  /* Agent and install: code at 13px, never wrapping mid-token. */
  .sg-cmd { justify-self: stretch; padding: 6px 6px 6px 14px; }
  .sg-cmd code { font-size: 13px; }
  .sg-cmd button { margin-left: auto; }
  .sg-steps li, .sg-steps li + li { gap: 8px; padding: 20px 0 22px; }
  .sg-steps h3 { font-size: 21px; }
  .sg-sdks { grid-template-columns: 1fr; }
  .sg-sdks > div { grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; padding: 16px 18px; }
  .sg-sdks h3 { white-space: nowrap; }
  .sg-sdks code { justify-self: end; font-size: 13px; white-space: nowrap; }
  .sg-hero .sg-display { font-size: clamp(48px, 14vw, 64px); }

  .sg-close { gap: 28px; padding: 88px var(--sg-gutter) 96px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  html.sg-motion .sg-frame > img:first-child { transition: scale 1800ms var(--sg-expo) 100ms; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-shine::after, .ag-same .product-shot::after { display: none; }
}
/* The ring circles the tick, not the whole 44px target. */

/* Shared reading grid: questions and facts keep the same edges at every size. */
.sg-faq > *, .answer-facts > * { min-width: 0; }
.sg-faq > h2, .answer-facts > h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.06; }
/* Home: FAQ and Facts come after the close, as quiet reference. */
.launch-home:not(.ag-page) .sg-faq > h2, .launch-home:not(.ag-page) .answer-facts > h2 { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; }
.sg-faq-list { overflow-wrap: anywhere; }
.sg-faq details code { font-size: 0.9em; }

/* The existing CLI starts setup; browser consent and installation stay explicit. */
.sg-copy-status, .sg-copy-status.sr-only { position: static; width: auto; height: auto; margin: 8px 0 0; padding: 0; clip: auto; clip-path: none; overflow: visible; white-space: normal; color: var(--sg-glow); font-size: 14px; line-height: 1.5; }
.sg-copy-status:empty { margin: 0; }