/* Signal skin (2026-10-15). Loaded after pro.css on every marketing page.
   The site runs on the walnut room: data-theme="dark" gives the product's dark
   tokens, and this file sets the marketing room, the nav, buttons and footer.
   Ember (#E06A32) is the only accent. Exo 2 for display and UI, JetBrains Mono
   for code and labels. */

:root {
  --sg-room: #0C0907;
  --sg-room-2: #110C09;
  --sg-surface: #15100C;
  --sg-surface-2: #1C1510;
  --sg-ink: #F8EEDF;
  --sg-mute: #CFB69E;
  --sg-faint: #9A8470;
  --sg-line: rgba(248, 238, 223, 0.09);
  --sg-line-2: rgba(248, 238, 223, 0.16);
  --sg-ember: #E06A32;
  --sg-ember-hover: #F07C48;
  --sg-glow: #FFB25C;
  --sg-ember-ink: #140E08;
  --sg-bad: #EE7A62;
  --sg-good: #83C8A5;
  --sg-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sg-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --sg-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --sg-max: 1280px;
  --sg-wide: 1360px;
  --sg-gutter: clamp(20px, 5vw, 56px);
  --sg-section: clamp(112px, 14vw, 200px);
}

html:not([data-skin="vintage"]) {
  --marketing-room: var(--sg-room);
  --marketing-bg: var(--sg-room-2);
  --marketing-surface: var(--sg-surface);
  --marketing-surface-2: var(--sg-surface-2);
  --marketing-text: var(--sg-ink);
  --marketing-muted: var(--sg-mute);
  --marketing-border: var(--sg-line-2);
  --marketing-accent: var(--sg-ember);
  --marketing-accent-hover: var(--sg-ember-hover);
  --marketing-accent-ink: var(--sg-ember-ink);
  color-scheme: dark;
  background: var(--sg-room);
  scrollbar-color: #3A2A1E var(--sg-room);
}
html:not([data-skin="vintage"]) body {
  background: var(--sg-room);
  color: var(--sg-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html:not([data-skin="vintage"]) ::selection { background: rgba(224, 106, 50, 0.38); color: var(--sg-ink); }
html:not([data-skin="vintage"]) :focus-visible { outline: 2px solid var(--sg-ember); outline-offset: 3px; }

/* ---------- Nav ---------- */
html:not([data-skin="vintage"]) header.radio-set {
  height: 64px;
  padding: 0 var(--sg-gutter);
  background: rgba(12, 9, 7, 0.78);
  border-bottom: 1px solid var(--sg-line);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  transition: background-color 320ms var(--sg-out), border-color 320ms var(--sg-out);
}
html:not([data-skin="vintage"]) .rs-body { width: min(100%, var(--sg-max)); gap: 28px; }
html:not([data-skin="vintage"]) .rs-brand { height: 28px; gap: 10px; }
html:not([data-skin="vintage"]) .rs-brand::before {
  flex-basis: 26px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: url('/assets/brand/icon-square.svg') center / contain no-repeat;
  box-shadow: 0 0 0 1px var(--sg-line-2);
  animation: none;
}
html:not([data-skin="vintage"]) .rs-wordmark {
  width: 118px;
  height: 22px;
  background-image: url('/assets/brand/wordmark-dark.svg');
}
html:not([data-skin="vintage"]) .rs-stations { gap: 4px; }
html:not([data-skin="vintage"]) .rs-stations a {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--sg-mute);
  font: 450 14px/1 'Exo 2', system-ui, sans-serif;
  letter-spacing: 0.005em;
  background-image: none;
  transition: color 160ms var(--sg-out), background-color 160ms var(--sg-out);
}
html:not([data-skin="vintage"]) .rs-stations a:hover,
html:not([data-skin="vintage"]) .rs-stations a:focus-visible,
html:not([data-skin="vintage"]) .rs-stations a[aria-current="page"] {
  color: var(--sg-ink);
  background-color: rgba(248, 238, 223, 0.06);
}
html:not([data-skin="vintage"]) .rs-rocker { gap: 8px; }
html:not([data-skin="vintage"]) .rs-rock {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  transition: background-color 160ms var(--sg-out), box-shadow 160ms var(--sg-out), transform 160ms var(--sg-out);
}
html:not([data-skin="vintage"]) .rs-rock:active { transform: scale(0.97); }
html:not([data-skin="vintage"]) .rs-rock-up { background: var(--sg-ember); }
html:not([data-skin="vintage"]) .rs-rock-up:hover { background: var(--sg-ember-hover); }
html:not([data-skin="vintage"]) .rs-rock-up::after { content: "Start free"; color: var(--sg-ember-ink); font: 600 13px/1 'Exo 2', system-ui, sans-serif; }
html:not([data-skin="vintage"]) .rs-rock-down { box-shadow: inset 0 0 0 1px var(--sg-line-2); }
html:not([data-skin="vintage"]) .rs-rock-down:hover { background: rgba(248, 238, 223, 0.06); }
html:not([data-skin="vintage"]) .rs-rock-down::after { content: "Sign in"; color: var(--sg-ink); font: 500 13px/1 'Exo 2', system-ui, sans-serif; }

@media (max-width: 820px) {
  html:not([data-skin="vintage"]) header.radio-set { height: 64px; padding: 0 16px; }
  html:not([data-skin="vintage"]) .rs-body { height: 64px; }
  html:not([data-skin="vintage"]) .rs-tune {
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--sg-line-2);
    border-radius: 10px;
    transition: background-color 160ms var(--sg-out);
  }
  html:not([data-skin="vintage"]) .rs-tune span::before { content: "Menu"; color: var(--sg-ink); font: 500 13px/1 'Exo 2', system-ui, sans-serif; }
  html:not([data-skin="vintage"]) .rs-tune[aria-expanded="true"] span::before { content: "Close"; }
  html:not([data-skin="vintage"]) .rs-stations {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    gap: 0;
    padding: 16px 16px max(24px, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--sg-line);
    border-radius: 0;
    background: var(--sg-room);
    box-shadow: none;
    overflow-y: auto;
  }
  html:not([data-skin="vintage"]) .rs-stations[data-open] { display: flex; animation: sg-menu 360ms var(--sg-out) both; }
  html:not([data-skin="vintage"]) .rs-stations a {
    min-height: 60px;
    padding: 0 4px;
    border-radius: 0;
    border-bottom: 1px solid var(--sg-line);
    color: var(--sg-ink);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    background: none;
  }
  html:not([data-skin="vintage"]) .rs-stations[data-open] a { animation: sg-menu-item 520ms var(--sg-out) both; }
  html:not([data-skin="vintage"]) .rs-stations[data-open] a:nth-child(2) { animation-delay: 40ms; }
  html:not([data-skin="vintage"]) .rs-stations[data-open] a:nth-child(3) { animation-delay: 80ms; }
  html:not([data-skin="vintage"]) .rs-stations[data-open] a:nth-child(4) { animation-delay: 120ms; }
  html:not([data-skin="vintage"]) .rs-stations[data-open] a:nth-child(5) { animation-delay: 160ms; }
  html:not([data-skin="vintage"]) .rs-stations[data-open] a:nth-child(6) { animation-delay: 200ms; }
  html:not([data-skin="vintage"]) .rs-stations::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    height: 24px;
  }
}
@keyframes sg-menu { from { opacity: 0; } to { opacity: 1; } }
@keyframes sg-menu-item { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons ---------- */
html:not([data-skin="vintage"]) .button.primary {
  background: var(--sg-ember);
  color: var(--sg-ember-ink);
  font-weight: 600;
  transition: background-color 160ms var(--sg-out), transform 160ms var(--sg-out), box-shadow 240ms var(--sg-out);
}
html:not([data-skin="vintage"]) .button.primary:hover {
  background: var(--sg-ember-hover);
  box-shadow: 0 0 0 1px rgba(255, 178, 92, 0.35), 0 10px 40px -10px rgba(224, 106, 50, 0.7);
}
html:not([data-skin="vintage"]) .button.primary:active { transform: scale(0.98); }
html:not([data-skin="vintage"]) .button.secondary,
html:not([data-skin="vintage"]) .button:not(.primary) {
  border-color: var(--sg-line-2);
  color: var(--sg-ink);
}

/* ---------- Footer ---------- */
html:not([data-skin="vintage"]) .site-footer {
  border-top: 1px solid var(--sg-line);
  background: var(--sg-room);
  color: var(--sg-mute);
}
html:not([data-skin="vintage"]) .site-footer a { color: var(--sg-mute); transition: color 160ms var(--sg-out); }
html:not([data-skin="vintage"]) .site-footer a:hover { color: var(--sg-ink); }
html:not([data-skin="vintage"]) .site-footer .footer-heading {
  color: var(--sg-faint);
  font: 500 12px/1.2 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Product captures were taken in the light console; give them an edge on walnut. */
html:not([data-skin="vintage"]) main img[src*="/assets/product/"] { border-color: var(--sg-line-2); }

@media (prefers-reduced-motion: reduce) {
  html:not([data-skin="vintage"]) .rs-stations[data-open],
  html:not([data-skin="vintage"]) .rs-stations[data-open] a { animation: none; }
}
html:not([data-skin="vintage"]) .site-footer .brand img { filter: none; }

/* ======================================================================
   Page fixes (2026-10-15): docs, guide, blog, compare and install pages
   were built as ink-on-paper sheets. On walnut the sheet becomes a surface
   panel with a hairline border; text uses the --sg-* ink ramp.
   ====================================================================== */
html:not([data-skin="vintage"]) .doc-sheet,
html:not([data-skin="vintage"]) .doc-card {
  --set-ink: var(--sg-ink);
  --tertiary: var(--sg-ember);
  background: var(--sg-surface);
  color: var(--sg-ink);
  box-shadow: 0 0 0 1px var(--sg-line-2);
  border-radius: 12px;
}
html:not([data-skin="vintage"]) .doc-sheet::after { display: none; }
html:not([data-skin="vintage"]) .doc-card {
  box-shadow: 0 0 0 1px var(--sg-line);
  transition: box-shadow 200ms var(--sg-out), background-color 200ms var(--sg-out);
}
html:not([data-skin="vintage"]) .doc-card:hover,
html:not([data-skin="vintage"]) .doc-card:focus-within {
  transform: none;
  background: var(--sg-surface-2);
  box-shadow: 0 0 0 1px rgba(224, 106, 50, 0.55);
}
html:not([data-skin="vintage"]) .doc-sheet h1,
html:not([data-skin="vintage"]) .doc-sheet h2,
html:not([data-skin="vintage"]) .doc-sheet h3,
html:not([data-skin="vintage"]) .doc-sheet h4,
html:not([data-skin="vintage"]) .doc-card a.doc-card-title,
html:not([data-skin="vintage"]) .doc-table th { color: var(--sg-ink); }
html:not([data-skin="vintage"]) .doc-summary,
html:not([data-skin="vintage"]) .doc-card p,
html:not([data-skin="vintage"]) .guide-sum { color: var(--sg-mute); }
html:not([data-skin="vintage"]) .doc-summary,
html:not([data-skin="vintage"]) .doc-sheet hr,
html:not([data-skin="vintage"]) .guide-steps { border-color: var(--sg-line-2); }
html:not([data-skin="vintage"]) .doc-sheet p,
html:not([data-skin="vintage"]) .doc-sheet li,
html:not([data-skin="vintage"]) .doc-table th,
html:not([data-skin="vintage"]) .doc-table td { color: var(--sg-mute); }
html:not([data-skin="vintage"]) .doc-sheet strong { color: var(--sg-ink); }
html:not([data-skin="vintage"]) .doc-table th,
html:not([data-skin="vintage"]) .doc-table td { border-bottom-color: var(--sg-line-2); }
html:not([data-skin="vintage"]) .doc-table th { color: var(--sg-ink); }
html:not([data-skin="vintage"]) .doc-sheet a { color: var(--sg-glow); }
html:not([data-skin="vintage"]) .doc-kicker,
html:not([data-skin="vintage"]) .doc-card .doc-card-raw,
html:not([data-skin="vintage"]) .guide-n { color: var(--sg-ember); }
html:not([data-skin="vintage"]) .doc-sheet :not(pre) > code {
  background: rgba(248, 238, 223, 0.08);
  color: var(--sg-ink);
}
html:not([data-skin="vintage"]) .doc-code {
  background: #060504;
  color: var(--sg-ink);
  box-shadow: inset 0 0 0 1px var(--sg-line-2);
}
html:not([data-skin="vintage"]) .doc-code[data-lang]::before,
html:not([data-skin="vintage"]) .doc-group h2,
html:not([data-skin="vintage"]) .doc-back { color: var(--sg-faint); }
html:not([data-skin="vintage"]) .doc-back:hover,
html:not([data-skin="vintage"]) .doc-toc a:hover,
html:not([data-skin="vintage"]) .doc-raw:hover { color: var(--sg-ink); }
html:not([data-skin="vintage"]) .doc-toc ol { border-left-color: var(--sg-line-2); }
html:not([data-skin="vintage"]) .doc-sheet blockquote {
  background: rgba(248, 238, 223, 0.04);
  border-left: 2px solid var(--sg-ember);
}
html:not([data-skin="vintage"]) .doc-sheet .guide-list a,
html:not([data-skin="vintage"]) .doc-sheet .guide-steps a { color: var(--sg-ink); }
html:not([data-skin="vintage"]) .guide-list a,
html:not([data-skin="vintage"]) .guide-steps a {
  border-color: var(--sg-line-2);
  background: transparent;
}
html:not([data-skin="vintage"]) .guide-list a:hover,
html:not([data-skin="vintage"]) .guide-steps a:hover { border-color: var(--sg-ember); background: var(--sg-surface-2); }
html:not([data-skin="vintage"]) .guide-steps a span { color: var(--sg-faint); }
html:not([data-skin="vintage"]) .doc-copy { background: var(--sg-surface-2); border-color: var(--sg-line-2); color: var(--sg-ink); }
html:not([data-skin="vintage"]) .doc-copy:hover { border-color: var(--sg-ember); }

/* Mobile menu: a backdrop-filter on the header makes it the containing block for
   the fixed list, collapsing it to a 41px strip on inner pages. Use a solid bar. */
@media (max-width: 820px) {
  html:not([data-skin="vintage"]) header.radio-set.radio-set {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(12, 9, 7, 0.96);
  }
}

@media (max-width: 820px) {
  html:not([data-skin="vintage"]) .site-footer .footer-brand { margin-bottom: 24px; }
}

/* ======================================================================
   Critic pass (2026-10-15)
   ====================================================================== */

/* No looping sheen on the primary button anywhere on the signal skin. */
html:not([data-skin="vintage"]) .button.primary::after { display: none; animation: none; }

/* One grid: header, content and footer share the gutter and the 1280 measure. */
html:not([data-skin="vintage"]) .site-footer.wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--sg-max) + 2 * var(--sg-gutter));
  margin-inline: auto;
  padding-inline: var(--sg-gutter);
}
html:not([data-skin="vintage"]) .site-footer > * { padding-inline: 0; }
html:not([data-skin="vintage"]) .site-footer nav.footer-groups a { font-size: 15px; }

@media (max-width: 820px) {
  html:not([data-skin="vintage"]) header.radio-set,
  html:not([data-skin="vintage"]) header.radio-set.radio-set { padding: 0 var(--sg-gutter); }
  /* A blurred header would become the containing block of the fixed menu sheet. */
  html:not([data-skin="vintage"]) body header.radio-set.radio-set.radio-set {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html:not([data-skin="vintage"]) .rs-tune { min-height: 44px; height: 44px; }
  html:not([data-skin="vintage"]) body header.radio-set.radio-set:has(.rs-stations[data-open]) { background: var(--sg-room); border-bottom-color: var(--sg-line); }

  /* Menu sheet: Start free and Sign in sit at the bottom, in thumb reach. The
     rocker links already exist in every header; while the sheet is open they
     leave the bar and dock to the bottom of the screen. */
  html:not([data-skin="vintage"]) .rs-stations[data-open] { padding-bottom: calc(152px + env(safe-area-inset-bottom)); }
  html:not([data-skin="vintage"]) .rs-dial:has(.rs-stations[data-open]) ~ .rs-rocker {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 71;
    display: grid;
    gap: 10px;
    padding: 16px var(--sg-gutter) max(20px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--sg-line);
    background: var(--sg-room);
    animation: sg-menu-item 520ms var(--sg-out) 120ms both;
  }
  html:not([data-skin="vintage"]) .rs-dial:has(.rs-stations[data-open]) ~ .rs-rocker .rs-rock {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    min-height: 52px;
    border-radius: 12px;
  }
  html:not([data-skin="vintage"]) .rs-dial:has(.rs-stations[data-open]) ~ .rs-rocker .rs-rock::after {
    position: static;
    font-size: 16px;
  }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  html:not([data-skin="vintage"]) .rs-dial:has(.rs-stations[data-open]) ~ .rs-rocker { animation: none; }
}

/* Footer on phones: two tight columns. */
@media (max-width: 820px) {
  html:not([data-skin="vintage"]) .site-footer,
  html:not([data-skin="vintage"]) .site-footer:has(.footer-groups) { gap: 28px; padding-block: 56px 48px; }
  html:not([data-skin="vintage"]) .site-footer .footer-brand { margin-bottom: 0; }
  html:not([data-skin="vintage"]) .site-footer nav.footer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  html:not([data-skin="vintage"]) .site-footer nav.footer-groups a { min-height: 36px; }
  html:not([data-skin="vintage"]) .site-footer .footer-heading { margin-bottom: 4px; }
}

/* ======================================================================
   Mobile lift (2026-10-15)
   ====================================================================== */
/* One vertical rhythm token: it tightens on phones instead of per section. */
@media (max-width: 640px) {
  :root { --sg-section: clamp(80px, 22vw, 112px); }
}
/* The logo is a 44px target like everything else in the bar. */
html:not([data-skin="vintage"]) .rs-brand { min-height: 44px; }
html:not([data-skin="vintage"]) .rs-stations a:active { background-color: rgba(248, 238, 223, 0.08); }

/* Footer folds (signal.mjs foldFooter). Wide screens never see the buttons. */
.footer-links { display: flex; flex-direction: column; }
html .site-footer nav.footer-groups .footer-fold { display: none; }
@media (max-width: 640px) {
  html:not([data-skin="vintage"]) .site-footer .footer-groups.is-folded { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--sg-line); }
  .footer-groups.is-folded .footer-group { border-bottom: 1px solid var(--sg-line); }
  html .site-footer .footer-groups.is-folded .footer-heading { display: none; }
  html .site-footer nav.footer-groups.is-folded .footer-fold {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sg-ink);
    font: 500 16px/1 'Exo 2', system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .footer-groups.is-folded .footer-fold::after { content: "+"; color: var(--sg-faint); font: 300 24px/1 'Exo 2', sans-serif; transition: rotate 300ms var(--sg-out); }
  .footer-groups.is-folded .is-open .footer-fold::after { rotate: 45deg; }
  .footer-groups.is-folded .footer-group:not(.is-open) .footer-links { display: none; }
  .footer-groups.is-folded .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; padding: 0 0 12px; }
  html:not([data-skin="vintage"]) .site-footer .footer-groups.is-folded .footer-links a { min-height: 44px; font-size: 15px; }
  .footer-groups.is-folded .footer-group.is-open .footer-links { animation: sg-menu-item 420ms var(--sg-out) both; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .footer-groups.is-folded .footer-group.is-open .footer-links { animation: none; }
}
/* Every tap target on phones is at least 44px, on every marketing page. */
@media (max-width: 820px) {
  html:not([data-skin="vintage"]) .site-footer nav.footer-groups a { min-height: 44px; }
  html:not([data-skin="vintage"]) main .button { min-height: 44px; }
}

/* Answer-first facts table and FAQ blocks, on the signal skin */
html:not([data-skin="vintage"]) .answer-facts h2 { color: var(--sg-ink); }
html:not([data-skin="vintage"]) .answer-facts table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; border-top: 1px solid var(--sg-line-2); }
html:not([data-skin="vintage"]) .answer-facts th,
html:not([data-skin="vintage"]) .answer-facts td { padding: 16px 0; border-bottom: 1px solid var(--sg-line); vertical-align: top; text-align: left; }
html:not([data-skin="vintage"]) .answer-facts th { width: 28%; padding-right: 24px; color: var(--sg-faint); font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
html:not([data-skin="vintage"]) .answer-facts td { color: var(--sg-mute); }
html:not([data-skin="vintage"]) .answer-facts code,
html:not([data-skin="vintage"]) .answer-faq code { color: var(--sg-glow); font-size: .9em; }
html:not([data-skin="vintage"]) .answer-faq details { border-top: 1px solid var(--sg-line-2); padding: 14px 0; }
html:not([data-skin="vintage"]) .answer-faq summary { color: var(--sg-ink); min-height: 44px; display: flex; align-items: center; cursor: pointer; }
html:not([data-skin="vintage"]) .answer-faq p { color: var(--sg-mute); }
.signal-home .sg-section.answer-facts { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.signal-home .sg-section.answer-facts h2 { margin: 0; }
@media (max-width: 900px) {
  .signal-home .sg-section.answer-facts { grid-template-columns: 1fr; gap: 20px; }
  html:not([data-skin="vintage"]) .answer-facts th { width: 34%; padding-right: 16px; }
}