/* ============================================================================
   XataWorks Platform — platform.xataworks.ca
   No frameworks, no webfonts, no third-party requests.
   ========================================================================== */

:root {
  --ink:        #10131a;
  --ink-soft:   #5b6270;
  --ink-faint:  #878e9c;
  --line:       #e3e5ea;
  --line-soft:  #eef0f3;

  --paper:      #ffffff;
  --tint:       #f4f5f7;

  --dark:       #0a0d13;
  --dark-2:     #12161f;
  --dark-line:  rgba(255,255,255,.11);
  --on-dark:    #f2f4f8;
  --on-dark-soft: #a6adbb;

  --accent:     #0b5fd4;
  --accent-lit: #4b93ff;

  --wrap:       1080px;
  --wrap-wide:  1360px;
  --gutter:     clamp(20px, 5vw, 40px);
  --band-y:     clamp(72px, 11vw, 148px);

  --radius:     16px;
  --radius-lg:  22px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; }

::selection { background: rgba(11,95,212,.18); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 18px;
  border-radius: 0 0 10px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent-lit);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Layout ───────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 800px; }

.band { padding-block: var(--band-y); position: relative; }
.band-plain { background: var(--paper); }
.band-tint  { background: var(--tint); }
.band-dark  { background: var(--dark); color: var(--on-dark); }
.band-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% -10%, rgba(75,147,255,.16), transparent 62%);
}
.band-dark > * { position: relative; }
.band-close { padding-block: clamp(84px, 12vw, 160px); text-align: center; }
.band-close .section-head { margin-inline: auto; margin-bottom: 0; }
.band-close .lede { margin-inline: auto; max-width: 44ch; }

/* ── Type ─────────────────────────────────────────────────────────────── */

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.028em; line-height: 1.05; }

h1 { font-size: clamp(2.9rem, 8.4vw, 5.4rem); letter-spacing: -0.04em; }
h2 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); }
h3 { font-size: clamp(1.24rem, 2.4vw, 1.6rem); line-height: 1.2; letter-spacing: -0.02em; }

h1 em, h2 em { font-style: normal; color: var(--accent); }
.band-dark h1 em, .band-dark h2 em { color: var(--accent-lit); }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  margin: 0 0 .9em;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.band-dark .eyebrow { color: var(--on-dark-soft); }

.lede {
  font-size: clamp(1.06rem, 1.9vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-top: 1.1em;
}
.band-dark .lede { color: var(--on-dark-soft); }

.section-head { max-width: 52rem; margin-bottom: clamp(40px, 6vw, 72px); }

.note-center {
  max-width: 54ch;
  margin: clamp(36px, 5vw, 56px) auto 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.02rem;
}
.band-dark .note-center { color: var(--on-dark-soft); }

code {
  font-family: var(--mono);
  font-size: .88em;
  background: rgba(16,19,26,.06);
  padding: .12em .38em;
  border-radius: 5px;
}
.band-dark code { background: rgba(255,255,255,.1); }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(28px, 4vw, 40px);
}
.band-close .actions { justify-content: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 1.02rem; font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-lg { padding: 17px 36px; font-size: 1.08rem; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #0a55bd; }
.band-dark .btn-primary { background: var(--accent-lit); color: #06101f; }
.band-dark .btn-primary:hover { background: #6aa6ff; }

.btn-secondary { background: var(--ink); color: #fff; }
.btn-secondary:hover { background: #262c38; }

.btn-ghost { border-color: rgba(255,255,255,.28); color: var(--on-dark); }
.btn-ghost:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); }

.actions-note {
  margin-top: 16px;
  font-size: .92rem;
  color: var(--on-dark-soft);
}

/* ── Nav ──────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8,10,15,.78);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--on-dark);
}
.nav-inner {
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: 54px;
  display: flex; align-items: center; gap: 22px;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em;
  text-decoration: none; color: inherit; flex: none;
}
.brand-mark { width: 24px; height: 24px; opacity: .95; }

.nav-links {
  display: flex; gap: 20px; margin-inline: auto;
  font-size: .88rem;
}
.nav-links a {
  text-decoration: none; color: var(--on-dark-soft);
  padding: 4px 0; transition: color .15s ease;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--on-dark); }

.nav-sections {
  flex: none;
  display: flex; align-items: center; gap: 16px;
  font-size: .86rem; font-weight: 600;
  padding-inline-end: 18px;
  border-inline-end: 1px solid rgba(255,255,255,.14);
}
.nav-sections a {
  text-decoration: none; color: var(--on-dark); opacity: .82;
  padding: 4px 0; white-space: nowrap;
  transition: opacity .15s ease;
}
.nav-sections a:hover { opacity: 1; }

.nav-cta {
  flex: none;
  background: var(--accent-lit); color: #06101f;
  text-decoration: none; font-weight: 650; font-size: .86rem;
  padding: 7px 16px; border-radius: 999px;
  transition: background-color .18s ease;
}
.nav-cta:hover { background: #6aa6ff; }

/* The fragment nav collapses below 940px because a table of contents has a
   fallback: the reader scrolls. The section links have none — hiding them
   makes the other sections unreachable on a phone — so they stay, and wrap
   onto their own row when the bar runs out of width. Canvas: Structure →
   Page anatomy §3a; checked by §7.20. */
@media (max-width: 940px) { .nav-links { display: none; } .nav-sections { margin-inline-start: auto; } }

@media (max-width: 620px) {
  .nav-inner { height: auto; flex-wrap: wrap; padding-block: 8px; row-gap: 4px; }
  .nav-cta { margin-inline-start: auto; }
  .nav-sections {
    order: 3; width: 100%;
    margin-inline-start: 0;
    padding-inline-end: 0; border-inline-end: 0;
    padding-block-start: 7px;
    border-block-start: 1px solid rgba(255,255,255,.12);
    gap: 18px;
  }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  background: var(--dark);
  color: var(--on-dark);
  padding-top: clamp(64px, 10vw, 112px);
  padding-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-glow {
  position: absolute; inset: -20% -10% auto -10%; height: 120%;
  background:
    radial-gradient(58% 46% at 50% 6%, rgba(75,147,255,.26), transparent 64%),
    radial-gradient(46% 38% at 82% 34%, rgba(120,86,255,.16), transparent 68%);
  z-index: -1;
}
.hero-copy { max-width: 900px; text-align: center; }
.hero-copy .eyebrow { color: var(--accent-lit); }

.hero-sub {
  margin: clamp(22px, 3.4vw, 34px) auto 0;
  max-width: 42ch;
  font-size: clamp(1.18rem, 2.5vw, 1.62rem);
  line-height: 1.4;
  letter-spacing: -.016em;
  color: var(--on-dark);
}
.hero-sub strong { color: var(--accent-lit); font-weight: 650; }

.hero-detail {
  margin: 1.1em auto 0;
  max-width: 54ch;
  color: var(--on-dark-soft);
  font-size: clamp(1rem, 1.6vw, 1.1rem);
}
.hero-copy .actions { justify-content: center; }
.hero-copy .actions-note { text-align: center; }

.hero-shot {
  margin: clamp(48px, 7vw, 84px) auto 0;
  max-width: var(--wrap-wide);
  padding-inline: var(--gutter);
  padding-bottom: clamp(40px, 6vw, 72px);
}
@media (max-width: 560px) { .hero-shot { padding-inline: 16px; } }

/* ── Screenshot frames ────────────────────────────────────────────────── */

.shot { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.shot img { width: 100%; }

.shot-lg {
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 30px 70px -20px rgba(0,0,0,.65);
  background: #fff;
}
.band-plain .shot-lg, .band-tint .shot-lg {
  border-color: var(--line);
  box-shadow: 0 2px 4px rgba(16,19,26,.05), 0 26px 60px -24px rgba(16,19,26,.32);
}

.shot-card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 18px 44px -22px rgba(16,19,26,.4);
}
.band-dark .shot-card { border-color: var(--dark-line); box-shadow: 0 24px 56px -22px rgba(0,0,0,.8); }
.shot-tall img { width: 100%; }
.shot-dialog { padding: 0; }

/* ── Composite: blurred app + sharp zoom card ─────────────────────────── */

.composite { margin: 0; }
.composite-stage { position: relative; padding-bottom: clamp(44px, 6vw, 86px); }
.composite-base {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 30px 80px -26px rgba(0,0,0,.75);
}
.composite-base img {
  width: 100%;
  filter: blur(2.4px) saturate(.82) brightness(.78);
  transform: scale(1.015);
}
.composite-zoom {
  position: absolute;
  right: 3.5%;
  top: 54%;
  width: min(42%, 460px);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 40px 90px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.3);
}
.composite figcaption {
  margin-top: clamp(6px, 1.5vw, 16px);
  color: var(--on-dark-soft);
  font-size: .96rem;
  max-width: 46ch;
}

@media (max-width: 820px) {
  .composite-stage { padding-bottom: 0; }
  .composite-base img { filter: blur(1.6px) saturate(.82) brightness(.72); }
  .composite-zoom {
    position: static;
    width: 100%;
    margin-top: 16px;
    border-color: var(--dark-line);
  }
  .composite figcaption { margin-top: 22px; }
}

/* ── Permission ladder ────────────────────────────────────────────────── */

.ladder {
  list-style: none;
  margin: clamp(70px, 9vw, 110px) 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--dark-line);
}
.ladder li {
  background: var(--dark-2);
  padding: 24px clamp(20px, 3vw, 30px);
  display: grid;
  grid-template-columns: minmax(180px, 15rem) 1fr;
  gap: 6px clamp(20px, 4vw, 44px);
  align-items: baseline;
}
.rung { font-weight: 650; font-size: 1.04rem; letter-spacing: -.015em; }
.ladder li:nth-child(1) .rung { color: var(--accent-lit); }
.ladder li:nth-child(2) .rung { color: #6ee7a8; }
.ladder li:nth-child(3) .rung { color: #ffc65c; }
.ladder li:nth-child(4) .rung { color: #ff8585; }
.ladder p { color: var(--on-dark-soft); font-size: .98rem; margin: 0; }
@media (max-width: 680px) { .ladder li { grid-template-columns: 1fr; } }

/* ── Split ────────────────────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5.5vw, 74px);
  align-items: center;
  margin-top: clamp(56px, 8vw, 100px);
}
.split-flip .split-text { order: 1; }
.split-flip .split-media { order: 2; }
.split-text h3 { margin-bottom: .7em; }
.split-text p { color: var(--ink-soft); }
.band-dark .split-text p { color: var(--on-dark-soft); }
.split-text em { font-style: italic; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split-flip .split-text, .split-flip .split-media { order: 0; }
}

/* ── Tab shot with pins ───────────────────────────────────────────────── */

.tabshot { margin: 0; }
.pin {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  width: clamp(20px, 1.55vw, 26px);
  height: clamp(20px, 1.55vw, 26px);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: clamp(11px, .85vw, 14px);
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 4px 10px rgba(16,19,26,.4);
}
.tabshot figcaption { margin-top: clamp(26px, 4vw, 40px); }
.tablegend {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px clamp(16px, 2.5vw, 30px);
  font-size: .95rem;
  color: var(--ink-soft);
}
.tablegend b {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 11.5px; margin-right: 8px;
  vertical-align: 1px;
}
@media (max-width: 900px) { .tablegend { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .pin { display: none; }
  .tablegend { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Prompts ──────────────────────────────────────────────────────────── */

.prompts {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: 14px;
}
.prompts li {
  background: var(--tint);
  border: 1px solid var(--line-soft);
  border-radius: 14px 14px 14px 4px;
  padding: 18px 22px;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink);
}
.prompts li::before {
  content: "";
  display: block;
  width: 22px; height: 3px; border-radius: 2px;
  background: var(--accent);
  opacity: .55;
  margin-bottom: 12px;
}

/* ── Cards ────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: clamp(14px, 2vw, 20px); margin-top: clamp(50px, 7vw, 80px); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-quiet { margin-top: clamp(40px, 5vw, 60px); }

.card {
  background: var(--tint);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 30px);
}
.band-tint .card { background: var(--paper); border-color: var(--line); }
.band-dark .card { background: var(--dark-2); border-color: var(--dark-line); }
.card-title { font-size: 1.08rem; margin-bottom: .6em; }
.card p { font-size: .98rem; color: var(--ink-soft); }
.band-dark .card p { color: var(--on-dark-soft); }

/* ── Steps ────────────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  counter-reset: step;
  margin: clamp(56px, 7vw, 86px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(26px, 3.4vw, 44px);
}
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700; font-size: .95rem;
  margin-bottom: 18px;
}
.steps h3 { font-size: 1.1rem; margin-bottom: .5em; }
.steps p { font-size: .98rem; color: var(--ink-soft); }

/* ── Definition rows ──────────────────────────────────────────────────── */

.rows { margin: clamp(56px, 7vw, 86px) 0 0; }
.rows > div {
  display: grid;
  grid-template-columns: minmax(180px, 17rem) 1fr;
  gap: 6px clamp(22px, 4vw, 52px);
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.band-dark .rows > div { border-top-color: var(--dark-line); }
.rows > div:last-child { border-bottom: 1px solid var(--line); }
.band-dark .rows > div:last-child { border-bottom-color: var(--dark-line); }
.rows dt { font-weight: 650; letter-spacing: -.015em; }
.rows dd { margin: 0; color: var(--ink-soft); font-size: .99rem; }
.band-dark .rows dd { color: var(--on-dark-soft); }
@media (max-width: 680px) { .rows > div { grid-template-columns: 1fr; } }

/* ── Adapters ─────────────────────────────────────────────────────────── */

.adapters {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.adapters li {
  border: 1px solid var(--line);
  background: var(--tint);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 550;
}

/* ── Callout ──────────────────────────────────────────────────────────── */

.callout {
  margin-top: clamp(44px, 6vw, 68px);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  max-width: 44rem;
}
.callout h3 { margin-bottom: .55em; }
.callout p { color: var(--ink-soft); }
.callout-action { margin-top: 22px; }

/* ── Inline figure ────────────────────────────────────────────────────── */

.figure-inline {
  margin: clamp(50px, 7vw, 80px) auto 0;
  max-width: 620px;
}
.figure-inline figcaption,
.tabshot figcaption .caption {
  margin-top: 18px;
  font-size: .95rem;
  color: var(--ink-faint);
  text-align: center;
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 0;
  position: relative;
  font-size: clamp(1.02rem, 1.8vw, 1.14rem);
  font-weight: 600;
  letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq-answer { padding: 0 clamp(0px, 4vw, 44px) 26px 0; color: var(--ink-soft); }

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--tint);
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 72px);
  font-size: .95rem;
  color: var(--ink-soft);
}
.footer-lead { max-width: 52ch; }
.footer-links { margin-top: 1.4em; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.footer-links a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
.footer-links a:hover { text-decoration-color: var(--accent); }
.footer-fine { margin-top: 1.4em; color: var(--ink-faint); font-size: .9rem; }

/* ── Diagrams ─────────────────────────────────────────────────────────── */

.diagram-pair {
  margin: 0 0 clamp(56px, 8vw, 96px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 52px);
}
@media (max-width: 760px) { .diagram-pair { grid-template-columns: 1fr; } }

.diagram {
  background: var(--tint);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(20px, 2.6vw, 30px);
}
.band-tint .diagram { background: var(--paper); border-color: var(--line); }
.band-dark .diagram { background: var(--dark-2); border-color: var(--dark-line); }

.diagram-title {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
.diagram svg { width: 100%; height: auto; display: block; overflow: visible; }
.diagram-note {
  margin-top: 18px;
  font-size: .95rem;
  color: var(--ink-soft);
}

.dg-link path {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1.5;
  opacity: .5;
}
.dg-link .dg-link-on { stroke: var(--accent); opacity: .9; stroke-width: 2; }

.dg-you { fill: none; stroke: var(--ink); stroke-width: 2; }
.dg-you-label,
.dg-hub-label,
.dg-app-label text {
  font-family: var(--font);
  text-anchor: middle;
  fill: var(--ink);
}
.dg-you-label { font-size: 15px; font-weight: 650; }
.dg-hub { fill: var(--accent); stroke: none; }
.dg-hub-label { font-size: 14px; font-weight: 700; fill: #fff; }
.dg-app rect { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.band-tint .dg-app rect { fill: var(--tint); }
.dg-app-label text { font-size: 13.5px; }

/* ── Video ────────────────────────────────────────────────────────────── */

.video-figure { margin: 0; }
.video-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #000;
  box-shadow: 0 2px 4px rgba(16,19,26,.05), 0 26px 60px -24px rgba(16,19,26,.32);
}
.video-wrap video { display: block; width: 100%; height: auto; }
.video-figure figcaption {
  margin-top: 16px;
  font-size: .92rem;
  color: var(--ink-faint);
  text-align: center;
}

/* ── Flow ─────────────────────────────────────────────────────────────── */

.flow-heading {
  margin: clamp(56px, 8vw, 92px) 0 clamp(24px, 3vw, 34px);
  font-size: 1.12rem;
}
.flow { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.flow > li {
  position: relative;
  padding: 0 0 26px 26px;
  border-left: 2px solid var(--line);
}
.flow > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.flow > li::before {
  content: "";
  position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink-faint);
  box-shadow: 0 0 0 4px var(--tint);
}
.band-tint .flow > li::before { box-shadow: 0 0 0 4px var(--tint); }
.flow-it::before { background: var(--accent) !important; }

.flow-actor {
  margin: 0 0 6px;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.flow-it > .flow-actor { color: var(--accent); }
.flow-line { margin: 0; color: var(--ink-soft); }
.flow-you .flow-line {
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.015em;
}
.flow-line strong { color: var(--ink); font-weight: 650; }

.flow-apps {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.flow-apps li {
  font-size: .78rem;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  padding: 3px 11px;
  color: var(--ink-soft);
}

/* ── Reveal on scroll (progressive enhancement) ───────────────────────── */

.js:not(.no-reveal) .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.8,.3,1), transform .7s cubic-bezier(.22,.8,.3,1);
  will-change: opacity, transform;
}
.js:not(.no-reveal) .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover { transform: none; }
}

@media print {
  .nav, .hero-glow { display: none; }
  .band-dark { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}