/* ===========================================================================
   Alert6 marketing site — stylesheet
   ---------------------------------------------------------------------------
   Ported from the approved Claude Design canvas export, kept alongside as
   `website/_design-source.alert6.dc.html`. Colours, type scale and spacing
   are taken verbatim from that file; the canvas' three palettes (navy /
   graphite / charcoal) collapsed to its declared default, `graphite`, which
   is the only one the approved design renders. The other two are kept in the
   token block below, commented, so a swap is a one-line change.
   ========================================================================= */

:root {
  /* Surfaces — `graphite` (the design's default palette).
     navy:     bg #0B0F17  frame #0D121C  s2 #0F1420  s1 #121826  bubble #1A2036  avatar #2B3150
     charcoal: bg #121211  frame #151514  s2 #1A1A18  s1 #1F1F1C  bubble #282825  avatar #3A3A35 */
  --bg:      #101113;
  --frame:   #131417;
  --s2:      #17181C;
  --s1:      #1B1D22;
  --bubble:  #23262D;
  --avatar:  #33363F;

  /* Ink */
  --text:    #E6EAF2;
  --muted:   #94A0B8;
  --dim:     #5C6883;

  /* Accents */
  --teal:    #5EEAD4;
  --teal-hi: #8FF3E4;
  --purple:  #8B7CF6;
  --red:     #F0555B;
  --orange:  #F59E42;
  --yellow:  #F3C94B;

  /* Hairlines over the dark ground */
  --line:    rgba(230, 234, 242, .1);
  --line-2:  rgba(230, 234, 242, .08);
  --line-3:  rgba(230, 234, 242, .15);

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--teal); }

h1, h2, h3, p { margin: 0; }

/* --- Keyframes (names kept from the design) ------------------------------ */
@keyframes a6rise  { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes a6in    { from { opacity: 0; transform: translateX(-14px) } to { opacity: 1; transform: none } }
@keyframes a6pulse { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }
@keyframes a6blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes a6pop   { 0% { transform: scale(1) } 40% { transform: scale(.94) } 100% { transform: scale(1) } }
@keyframes a6glow  { 0%, 100% { box-shadow: 0 0 0 0 rgba(94,234,212,.55) } 70% { box-shadow: 0 0 0 14px rgba(94,234,212,0) } }
@keyframes a6hub   { 0%, 100% { filter: drop-shadow(0 0 6px rgba(94,234,212,.4)) } 50% { filter: drop-shadow(0 0 22px rgba(94,234,212,.9)) } }
@keyframes a6bar   { from { width: 0 } to { width: 92% } }

/* Elements the script shows and hides as the loop advances. Hidden by
   `hidden` so the CSS entry animation restarts each time the loop comes
   round; `display:none` is forced because the design's flex/grid parents
   would otherwise still reserve the track. */
[hidden] { display: none !important; }

/* --- Shared atoms -------------------------------------------------------- */
.mono   { font-family: var(--mono); }
.muted  { color: var(--muted); }
.dim    { color: var(--dim); }
.teal   { color: var(--teal); }
.purple { color: var(--purple); }
.wrap   { max-width: 1320px; width: 100%; margin: 0 auto; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.btn-primary {
  font-size: 15px; font-weight: 600; padding: 10px 18px;
  background: var(--teal); color: var(--bg); border-radius: 8px;
}
.btn-primary:hover { background: var(--teal-hi); color: var(--bg); }

.mark { display: flex; align-items: center; gap: 11px; }
.mark-text { font-weight: 700; font-size: 24px; letter-spacing: -.03em; }

/* --- Scroll shell -------------------------------------------------------- */
/* The design is three full-height panels with mandatory snap. */
.deck {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  background: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, rgba(230,234,242,.06) 1px, transparent 0);
  background-size: 28px 28px;
}
.panel { height: 100vh; scroll-snap-align: start; position: relative; }

.next {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  cursor: pointer; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(94,234,212,.45); display: grid; place-items: center;
  color: var(--teal); font-size: 13px; background: none; padding: 0;
  font-family: inherit;
}
.next:hover { background: rgba(94,234,212,.12); color: var(--teal); }
.next--glow { animation: a6glow 1.8s ease-out infinite; }

/* --- Site header --------------------------------------------------------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px;
}
.site-nav { display: flex; gap: 28px; font-size: 15px; color: var(--muted); }
.site-nav a, .site-nav button {
  color: var(--muted); cursor: pointer; background: none; border: 0;
  padding: 0; font: inherit; font-size: 15px;
}
.site-nav a:hover, .site-nav button:hover { color: var(--teal); }
.header-cta { display: flex; gap: 8px; align-items: center; }
.header-cta .signin { font-size: 15px; padding: 9px 14px; color: var(--muted); }

/* =========================================================================
   1 · HERO
   ========================================================================= */
.hero { display: flex; flex-direction: column; }
.hero-body {
  flex: 1; display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 48px; align-items: center; padding: 0 40px 48px; min-height: 0;
}
.eyebrow {
  display: inline-flex; gap: 8px; align-items: center; font-size: 13px;
  color: var(--teal); background: rgba(94,234,212,.08);
  border: 1px solid rgba(94,234,212,.25);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 26px;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
  display: inline-block; animation: a6pulse 1.6s ease-in-out infinite;
}
.hero h1 {
  font-size: clamp(60px, 6.6vw, 96px); line-height: 1; letter-spacing: -.04em;
  font-weight: 700; margin: 0 0 22px; display: flex; flex-direction: column;
}
/* "Catch. Crack. Fix." — the script lights the word matching the stage. */
.hero h1 span { color: var(--text); transition: opacity .6s; opacity: .2; }
.hero h1 span.is-lit { opacity: 1; }
.hero-lede {
  font-size: 17px; line-height: 1.55; color: var(--muted);
  margin: 0 0 28px; text-wrap: pretty;
}

/* The scene is authored at a fixed 780x560 and scaled to whatever width the
   column gets, so the diagram never reflows. */
.scene-slot { position: relative; min-width: 0; }
.scene {
  position: absolute; left: 0; top: 0; width: 780px; height: 560px;
  transform-origin: 0 0; font-size: 13px;
}
.scene-svg { position: absolute; inset: 0; pointer-events: none; }
.scene-col {
  position: absolute; top: 8px; font-size: 12px; font-weight: 600;
  letter-spacing: .02em; color: var(--muted);
}
.scene-col--src { left: 0; width: 170px; }
.scene-col--hub { left: 305px; width: 170px; text-align: center; }
.scene-col--chk { right: 0; width: 190px; text-align: right; }

.src {
  position: absolute; left: 0; width: 180px; animation: a6in .45s ease-out both;
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--s1); border: 1px solid var(--line); border-radius: 999px;
}
.src-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.src-name { font-weight: 600; font-size: 12.5px; }
.src-meta { color: var(--muted); font-size: 11px; }

.hub {
  position: absolute; left: 390px; top: 225px; transform: translate(-50%, -50%);
  width: 132px; height: 132px; display: grid; place-items: center;
}
.hub svg { animation: a6hub 2.4s ease-in-out infinite; }
.hub svg polygon, .hub svg polyline { transition: stroke .6s; }
.hub-caption {
  position: absolute; left: 390px; top: 305px; transform: translateX(-50%);
  width: 200px; text-align: center;
}
.hub-label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; transition: color .6s; }
.hub-title { font-weight: 600; font-size: 13px; margin-top: 4px; line-height: 1.35; }
.hub-sub { color: var(--muted); font-size: 11.5px; margin-top: 3px; }

.chk {
  position: absolute; right: 0; width: 190px; animation: a6rise .4s ease-out both;
  padding: 9px 12px; background: var(--s1);
  border: 1px solid rgba(139,124,246,.4); border-radius: 10px;
}
.chk-head { display: flex; justify-content: space-between; font-weight: 600; font-size: 12.5px; }
.chk-meta { color: var(--muted); font-size: 11px; margin-top: 2px; }

.fix {
  position: absolute; left: 0; right: 0; top: 440px;
  animation: a6rise .5s ease-out both; padding: 16px 18px;
  background: var(--s1); border: 1px solid rgba(94,234,212,.5);
  border-radius: 14px; display: grid; grid-template-columns: 1fr auto;
  gap: 18px; align-items: center;
}
.fix-eyebrow {
  display: flex; align-items: center; gap: 10px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em; color: var(--teal); margin-bottom: 6px;
}
.fix-bar {
  width: 90px; height: 4px; background: var(--line); border-radius: 2px;
  overflow: hidden; display: inline-block;
}
.fix-bar > span { display: block; height: 100%; background: var(--teal); animation: a6bar 1s ease-out both; }
.fix-title { font-weight: 600; font-size: 14px; }
.fix-title code { font-family: var(--mono); font-weight: 500; }
.fix-sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.fix-actions { display: flex; gap: 8px; }
.pill-go {
  background: var(--teal); color: var(--bg); font-weight: 600;
  padding: 9px 14px; border-radius: 8px; font-size: 12.5px;
}
.pill-ghost {
  border: 1px solid var(--line-3); padding: 9px 14px; border-radius: 8px;
  font-size: 12.5px; color: var(--muted);
}

/* =========================================================================
   2 · WALKTHROUGH
   ========================================================================= */
.walk {
  display: flex; flex-direction: column; max-width: 1320px; margin: 0 auto;
  padding: 28px 40px 52px; min-height: 0;
}
.walk-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; margin-bottom: 18px; flex: none;
}
.walk-head h2 {
  font-size: clamp(22px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -.03em;
  font-weight: 700; white-space: nowrap;
}
.walk-head p {
  font-size: 14px; line-height: 1.5; color: var(--muted);
  max-width: 460px; text-align: right; text-wrap: pretty;
}

/* Same trick as the hero scene: a fixed 1240x760 product shot, scaled down. */
.frame-slot { flex: 1; min-height: 0; position: relative; display: flex; justify-content: center; }
.frame {
  position: absolute; top: 0; left: 50%; width: 1240px; height: 760px;
  transform-origin: 50% 0; background: var(--frame);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 60px 120px -50px rgba(0,0,0,.9); font-size: 13px;
  display: flex; flex-direction: column;
}
.app-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; border-bottom: 1px solid var(--line-2);
}
.app-bar-mark { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.app-search {
  width: 380px; padding: 6px 12px; border: 1px solid rgba(230,234,242,.12);
  border-radius: 8px; color: var(--dim); display: flex;
  justify-content: space-between; font-size: 12px;
}
.app-bar-right { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.oncall-pill {
  padding: 4px 10px; border: 1px solid rgba(230,234,242,.12);
  border-radius: 999px; font-size: 12px;
}
.avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--avatar);
  display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none;
}
.app-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr) 280px; }
.app-rail {
  border-right: 1px solid var(--line-2); display: flex; flex-direction: column;
  align-items: center; gap: 14px; padding: 16px 0;
}
.rail-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--dim); }
.rail-active {
  width: 28px; height: 28px; border-radius: 8px; background: rgba(94,234,212,.12);
  display: grid; place-items: center;
}
.rail-active > div { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--teal); }

.app-main { padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.inc-head { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.inc-tag { padding: 3px 8px; background: rgba(94,234,212,.1); color: var(--teal); border-radius: 6px; }
.inc-title { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--text); margin-left: 6px; }
.inc-actions { margin-left: auto; display: flex; gap: 6px; }
.act-primary { padding: 6px 12px; background: var(--teal); color: var(--bg); border-radius: 7px; font-weight: 600; }
.act-ghost { padding: 6px 12px; border: 1px solid var(--line-3); border-radius: 7px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.chip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-3); color: var(--muted); }
.chip--live { background: rgba(94,234,212,.1); color: var(--teal); border-color: transparent; }
.chip--sev { border-color: rgba(245,158,66,.4); color: var(--orange); }
.chip--sla { border-color: rgba(240,85,91,.4); color: var(--red); }
.chip .tagn { opacity: .6; font-family: var(--mono); font-size: 10px; }

.ai-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--s2); display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 24px; font-size: 12.5px;
}
.ai-card-head {
  grid-column: 1 / -1; display: flex; justify-content: space-between;
  align-items: center; font-weight: 600;
}
.field-key { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--dim); }

.chat {
  flex: 1; min-height: 0; overflow: hidden; display: flex;
  flex-direction: column; justify-content: flex-end; gap: 12px;
}
.sys-line { font-size: 12px; color: var(--muted); display: flex; gap: 10px; font-family: var(--mono); }
.msg-op {
  animation: a6rise .4s ease-out both; display: flex; justify-content: flex-end;
  align-items: flex-end; gap: 10px;
}
.msg-op-body { text-align: right; }
.msg-stamp { font-size: 11px; color: var(--dim); margin-bottom: 3px; }
.bubble-op {
  background: rgba(94,234,212,.12); border: 1px solid rgba(94,234,212,.25);
  padding: 8px 12px; border-radius: 10px 10px 3px 10px;
  display: inline-block; text-align: left;
}
.msg-ai { animation: a6rise .4s ease-out both; display: grid; grid-template-columns: 26px 1fr; gap: 10px; }
.ai-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(139,124,246,.2);
  color: var(--purple); display: grid; place-items: center;
}
.thinking { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; }
.thinking-text {
  font-family: var(--mono); font-size: 12px; color: var(--purple);
  animation: a6pulse 1.2s ease-in-out infinite;
}
.tools { margin-top: 8px; display: grid; gap: 4px; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; }
.tool { animation: a6rise .35s ease-out both; }
.tool b { font-weight: 600; }
.tool-out { color: var(--muted); padding-left: 18px; }
.diff {
  margin: 4px 0 0 18px; padding: 6px 10px; background: rgba(0,0,0,.25);
  border-radius: 6px; border: 1px solid var(--line-2);
}
.diff-del { color: var(--red); }
.diff-add { color: var(--teal); }

.rc { animation: a6rise .4s ease-out both; margin-top: 9px; line-height: 1.5; }
.approval {
  margin-top: 9px; border: 1px solid rgba(94,234,212,.4); border-radius: 10px;
  background: rgba(94,234,212,.05); overflow: hidden;
}
.approval-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid rgba(94,234,212,.2); font-size: 12px;
}
.approval-cmds {
  padding: 8px 12px; font-family: var(--mono); font-size: 11.5px;
  color: var(--muted); line-height: 1.6;
}
.approval-actions {
  display: flex; gap: 6px; padding: 8px 12px;
  border-top: 1px solid rgba(94,234,212,.15); font-size: 12px;
}
/* Base state of the Approve control; the script swaps in the approved look. */
.approve {
  background: var(--teal); color: var(--bg); font-weight: 600; padding: 6px 12px;
  border-radius: 7px; font-size: 12px; transition: all .3s;
}
.approve.is-approved { background: rgba(94,234,212,.15); color: var(--teal); }
.approve.is-pressing { animation: a6pop .5s ease-out; box-shadow: 0 0 0 4px rgba(94,234,212,.3); }
.approve-ghost {
  border: 1px solid var(--line-3); padding: 6px 12px; border-radius: 7px; color: var(--muted);
}

.composer {
  flex: none; border: 1px solid rgba(230,234,242,.12); border-radius: 12px;
  padding: 10px 14px; background: var(--s2);
}
.composer-line {
  min-height: 20px; display: flex; gap: 10px; font-family: var(--mono); font-size: 12.5px;
}
.caret { color: var(--teal); animation: a6blink 1s steps(1) infinite; }
.composer-placeholder { color: var(--dim); }
.slash-row { display: flex; gap: 6px; margin-top: 8px; font-size: 12px; }
.slash {
  padding: 4px 10px; border: 1px solid rgba(230,234,242,.12); color: var(--muted);
  border-radius: 6px; font-family: var(--mono); font-size: 11px;
}
.slash-hint { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--dim); align-self: center; }

.app-side {
  border-left: 1px solid var(--line-2); padding: 16px; display: flex;
  flex-direction: column; gap: 16px; font-size: 12px; overflow: hidden;
}
.side-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
.side-rows { display: grid; gap: 7px; color: var(--muted); }
.side-row { display: flex; justify-content: space-between; gap: 8px; }
.side-title { font-weight: 600; margin-bottom: 6px; }
.timeline { display: grid; gap: 5px; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.timeline .pending { color: rgba(148,160,184,.3); }
.side-note {
  margin-top: auto; padding: 10px 12px; border: 1px dashed var(--line-3);
  border-radius: 10px; color: var(--dim); line-height: 1.5;
}

/* =========================================================================
   3 · CTA
   ========================================================================= */
.cta {
  display: flex; flex-direction: column;
  background-image: radial-gradient(ellipse 55% 50% at 50% 110%, rgba(94,234,212,.16), transparent 70%);
}
.cta-slot { flex: 1; min-height: 0; position: relative; }
.cta-box {
  position: absolute; left: 50%; top: 50%; width: 1000px; height: 620px;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 0 20px;
}
.cta-box h2 {
  font-size: clamp(36px, 4.2vw, 60px); line-height: 1; letter-spacing: -.04em;
  font-weight: 700; margin: 0 0 16px; max-width: 900px; text-wrap: balance;
}
.cta-lede { color: var(--muted); font-size: 16px; margin: 0 0 26px; max-width: 520px; text-wrap: pretty; }
.cta-btn {
  font-size: 15px; font-weight: 600; padding: 13px 28px;
  background: var(--teal); color: var(--bg); border-radius: 8px;
}
.cta-btn:hover { background: var(--teal-hi); color: var(--bg); }

.guardrails { margin-top: 44px; width: 100%; max-width: 960px; text-align: left; }
.guardrails-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.guardrails-head b { font-size: 13px; font-weight: 600; color: var(--text); }
.guardrails-head span { font-size: 13px; color: var(--muted); }
.guardrail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.guardrail {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--s1);
}
.guardrail-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
}
.guardrail-head b { font-weight: 600; font-size: 13px; }
.guardrail-flag { font-family: var(--mono); font-size: 10px; }
.guardrail p { font-size: 12px; color: var(--muted); line-height: 1.5; }

.works-title { margin-top: 36px; font-size: 13px; font-weight: 600; color: var(--text); }
.works {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  margin-top: 8px; max-width: 960px;
}
.works span {
  display: flex; align-items: center; gap: 8px; padding: 7px 4px;
  font-size: 14px; font-weight: 500; color: var(--muted);
}
.works .swatch { width: 9px; height: 9px; border-radius: 50%; padding: 0; }
.works .more { color: var(--dim); font-weight: 400; }

/* --- Footer -------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line-2); }
.site-footer-inner {
  max-width: 1320px; margin: 0 auto; padding: 22px 40px; display: flex;
  justify-content: space-between; align-items: center; font-size: 13px; color: var(--dim);
}
.site-footer a { color: var(--dim); }
.site-footer a:hover { color: var(--teal); }
.site-footer-links { display: flex; gap: 22px; }

/* =========================================================================
   Narrow screens
   -------------------------------------------------------------------------
   The design is authored for a desktop viewport and both of its scenes are
   fixed-size artboards that get scaled. Below 900px the snap deck and the
   side-by-side grids stop making sense, so the page becomes an ordinary
   scrolling document and the two artboards scroll sideways inside their own
   box rather than squeezing the copy.
   ========================================================================= */
@media (max-width: 900px) {
  .deck { scroll-snap-type: none; height: auto; overflow-y: visible; }
  .panel { height: auto; min-height: 0; padding-bottom: 64px; }
  .next { display: none; }
  .site-header { flex-wrap: wrap; gap: 12px; padding: 18px 20px; }
  .site-nav { order: 3; width: 100%; }
  .hero-body { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 0 20px 32px; }
  .hero h1 { font-size: clamp(44px, 12vw, 64px); }
  .walk { padding: 24px 20px 32px; }
  .walk-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .walk-head h2 { white-space: normal; }
  .walk-head p { text-align: left; }
  .cta-box { position: static; width: auto; height: auto; transform: none; padding: 48px 20px; }
  .cta-slot { min-height: 0; }
  .guardrail-grid { grid-template-columns: 1fr 1fr; }
  .site-footer-inner { flex-direction: column; gap: 14px; padding: 22px 20px; text-align: center; }
  .site-footer-links { flex-wrap: wrap; justify-content: center; gap: 16px; }
}

/* =========================================================================
   Reduced motion
   -------------------------------------------------------------------------
   The looping scenes are decoration, not content. When the visitor has asked
   for less motion the script parks both loops on their final frame (the one
   that shows the whole story) and everything below stops the idle pulses.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .deck { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
  .caret { display: none !important; }
}

/* =========================================================================
   Sub-pages (Docs / Security / Privacy)
   -------------------------------------------------------------------------
   Ordinary scrolling documents — no snap deck, no artboards. They reuse the
   header, footer and tokens so they read as the same site.
   ========================================================================= */
.doc { min-height: 100vh; display: flex; flex-direction: column; }
.doc .site-header { max-width: 1320px; width: 100%; margin: 0 auto; }
.doc-body { flex: 1; max-width: 760px; width: 100%; margin: 0 auto; padding: 40px 40px 80px; }
.doc-body h1 {
  font-size: clamp(36px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -.035em;
  font-weight: 700; margin: 0 0 14px;
}
.doc-body h2 {
  font-size: 20px; letter-spacing: -.02em; font-weight: 700;
  margin: 40px 0 10px; padding-top: 20px; border-top: 1px solid var(--line-2);
}
.doc-lede { font-size: 17px; line-height: 1.55; color: var(--muted); margin: 0 0 8px; text-wrap: pretty; }
.doc-body p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0 0 12px; text-wrap: pretty; }
.doc-body ul { margin: 0 0 12px; padding-left: 22px; }
.doc-body li { font-size: 15px; line-height: 1.65; color: var(--muted); margin-bottom: 6px; }
.doc-body a { color: var(--teal); }
.doc-body a:hover { text-decoration: underline; }

/* Unmistakable while the copy is unwritten, so a placeholder page cannot be
   mistaken for a finished one. Delete the banner and the .tbd spans with the
   signed-off wording. */
.tbd-banner {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid rgba(245,158,66,.45); background: rgba(245,158,66,.07);
  border-radius: 10px; padding: 14px 16px; margin: 0 0 32px;
}
.tbd-banner b { color: var(--orange); font-size: 13px; font-weight: 700; flex: none; font-family: var(--mono); letter-spacing: .04em; }
.tbd-banner p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.tbd {
  color: var(--orange); background: rgba(245,158,66,.1);
  border: 1px dashed rgba(245,158,66,.4); border-radius: 5px;
  padding: 1px 7px; font-family: var(--mono); font-size: 13px;
}

@media (max-width: 900px) {
  /* The two artboards keep a legibility floor and scroll sideways rather
     than shrinking their 11px labels into nothing. */
  .scene-slot, .frame-slot { overflow-x: auto; overflow-y: hidden; }
  .doc-body { padding: 28px 20px 64px; }
}